From 9dca34b089802355a813f57f1e8898af4aefb87d Mon Sep 17 00:00:00 2001
From: Mr.Shi <1878285526@qq.com>
Date: 星期三, 23 八月 2023 10:13:33 +0800
Subject: [PATCH] 大屏
---
screen_standard/src/views/index.vue | 215 +++++++++++++++++++++++++++--------------------------
1 files changed, 108 insertions(+), 107 deletions(-)
diff --git a/screen_standard/src/views/index.vue b/screen_standard/src/views/index.vue
index edb7242..20954e7 100644
--- a/screen_standard/src/views/index.vue
+++ b/screen_standard/src/views/index.vue
@@ -15,7 +15,7 @@
<div class="content_left_item1_content_row_line">
<el-progress
:show-text="false"
- :percentage="item.doneNum">
+ :percentage="item.doneNum / baseNum">
</el-progress>
</div>
<div class="content_left_item1_content_row_num">{{ item.doneNum }}</div>
@@ -77,11 +77,12 @@
effect="dark"
:content="'宸叉姤宸ヨ壇鍝佹暟' + child.doneNum + '锛涘伐搴忚鍒掓暟' + child.planNum"
placement="top">
- <div class="scroll_item_row_item" @click="jump(child.procedureId)">
+ <div class="scroll_item_row_item" @click="jump(child.procedureId, child.procedureName)">
<div class="scroll_item_row_item_x"></div>
<!-- <img v-if="i == 0 || i == 1" src="@/assets/img/ic_complete@2x.png" alt="" /> -->
<span v-if="child.rate < 100">{{ child.rate }}%</span>
<img v-else src="@/assets/img/ic_complete@2x.png" alt="" />
+ <span class="scroll_item_row_item_wz">{{ child.procedureName }}</span>
</div>
</el-tooltip>
</div>
@@ -190,7 +191,7 @@
</template>
<script setup>
- import { reactive, ref, onMounted, nextTick, onUnmounted, computed, watch, onActivated } from 'vue'
+ import { reactive, ref, onMounted, nextTick, onUnmounted, computed, watch, toRefs } from 'vue'
import { getPlanData, getTop, getStockList, getWorkPlansList, getProcedureProcessList, getRecordLogPage, getDeviceCheckPage, getUnqualified7DayData, getUnqualifiedCateData } from '@/utils/api.js'
import { useCounterStore } from '@/stores/counter.js'
import * as echarts from 'echarts'
@@ -207,14 +208,18 @@
patrolInspection: [],
dayDistribution: [],
typeDistribution: [],
- num: 0
+ num: 0,
+ baseNum: 0
})
+
+ let { baseNum } = toRefs(data)
let timer = ref(null)
let timer1 = ref(null)
let timer2 = ref(null)
let timer3 = ref(null)
let timer4 = ref(null)
+ let timer5 = ref(null)
let scrollContainer = ref(null)
let scrollContainer1 = ref(null)
let scrollContainer2 = ref(null)
@@ -246,7 +251,8 @@
return enterprise.departId
})
- const jump = (procedureId) => {
+ const jump = (procedureId, procedureName) => {
+ enterprise.setProcedureName(procedureName)
router.push({ name: 'process', query: { procedureId } })
}
@@ -255,36 +261,6 @@
init()
}
})
- // router.afterEach((to) => {
- // if (to.fullPath === '/') {
- // if (!departId.value) return
- // // data.production = []
- // // data.marginStatistics = []
- // // data.plannedProgress = []
- // // data.processProgress = []
- // // data.log = []
- // // init()
- // } else {
- // clearTimeout(timer.value)
- // clearTimeout(timer1.value)
- // clearTimeout(timer2.value)
- // clearTimeout(timer3.value)
- // clearTimeout(timer4.value)
- // }
- // })
- // router.beforeEach((to) => {
- // console.log(to);
- // if (to.fullPath === '/') {
- // if (!departId.value) return
- // init()
- // } else {
- // clearTimeout(timer.value)
- // clearTimeout(timer1.value)
- // clearTimeout(timer2.value)
- // clearTimeout(timer3.value)
- // clearTimeout(timer4.value)
- // }
- // })
start1()
@@ -293,11 +269,7 @@
getTop(companyId.value, departId.value)
.then(res => {
if (res.length > 0) {
- res.forEach((item, index) => {
- if (index > 1) {
- item.doneNum1 = res[0].doneNum / item.doneNum
- }
- })
+ data.baseNum = res[0].doneNum
data.production = res
}
})
@@ -312,6 +284,9 @@
// 鎴愬搧璁″垝杩涘害
getWorkPlansList(companyId.value, departId.value)
.then(res => {
+ res.forEach(item => {
+ item.rate = Math.trunc(item.rate)
+ })
data.plannedProgress = res
nextTick(() => {
start1()
@@ -491,82 +466,74 @@
// formatter: '{a} <br/>{b} : {c} ({d}%)'
// },
legend: {
- show: false,
- type: 'scroll',
- orient: 'vertical',
- right: 10,
- top: 20,
- bottom: 20,
- data: legendData
+ show: false,
+ type: 'scroll',
+ orient: 'vertical',
+ right: 10,
+ top: 20,
+ bottom: 20,
+ data: legendData
},
series: [
- {
- // name: '濮撳悕',
- type: 'pie',
-
- radius: ['60%', '70%'],
- // avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 4,
- borderColor: 'rgba(52, 88, 159, 0.4)',
- borderWidth: 4
- },
- center: ['50%', '50%'],
- labelLine: {
- show: false
- },
- label: {
- formatter:'{dot| } {title|{b} {c}}\n\n{per|{d}%}',
- rich: {
- title: {
- color: '#fff'
+ {
+ // name: '濮撳悕',
+ type: 'pie',
+ radius: ['60%', '70%'],
+ // avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 4,
+ borderColor: 'rgba(52, 88, 159, 0.4)',
+ borderWidth: 4
},
- per: {
- color: '#01D9FE'
+ center: ['50%', '50%'],
+ labelLine: {
+ show: false
},
- dot: {
- backgroundColor: 'inherit',
- width: 8,
- height: 8,
- borderRadius: 4
+ label: {
+ formatter:'{dot| } {title|{b} {c}}\n\n{per|{d}%}',
+ rich: {
+ title: {
+ color: '#fff'
+ },
+ per: {
+ color: '#01D9FE'
+ },
+ dot: {
+ backgroundColor: 'inherit',
+ width: 8,
+ height: 8,
+ borderRadius: 4
+ }
+ }
+ },
+ // labelLayout: {
+ // hideOverlap: true
+ // },
+ endLabel: {
+ show: true,
+ distance: 5,
+ color: "red"
+ },
+ data: seriesData,
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 1)'
+ }
}
}
- },
- // labelLayout: {
- // hideOverlap: true
- // },
- endLabel: {
- show: true,
- distance: 5,
- color: "red"
- },
- data: seriesData,
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 1)'
- }
- }
- }
]
}
option && myChart.setOption(option);
}
-
- // onBeforeUnmount(()=>{
- // clearTimeout(timer.value)
- // clearTimeout(timer1.value)
- // clearTimeout(timer2.value)
- // clearTimeout(timer3.value)
- // clearTimeout(timer4.value)
- // })
onUnmounted(()=>{
clearTimeout(timer.value)
clearTimeout(timer1.value)
clearTimeout(timer2.value)
clearTimeout(timer3.value)
clearTimeout(timer4.value)
+ clearTimeout(timer5.value)
})
const clickCate = (index) => {
clearTimeout(timer1.value)
@@ -631,35 +598,35 @@
function start() {
clearTimeout(timer.value)
// 瀹氭椂鍣ㄨЕ鍙戝懆鏈�
- let speed = ref(25)
+ let speed = ref(100)
timer.value = setInterval(ListScroll, speed.value)
}
// 寮�鍚畾鏃跺櫒
function start1() {
clearTimeout(timer1.value)
// 瀹氭椂鍣ㄨЕ鍙戝懆鏈�
- let speed1 = ref(25)
+ let speed1 = ref(100)
timer1.value = setInterval(ListScroll1, speed1.value)
}
// 寮�鍚畾鏃跺櫒
function start2() {
clearTimeout(timer2.value)
// 瀹氭椂鍣ㄨЕ鍙戝懆鏈�
- let speed2 = ref(25)
+ let speed2 = ref(100)
timer2.value = setInterval(ListScroll2, speed2.value)
}
// 寮�鍚畾鏃跺櫒
function start3() {
clearTimeout(timer3.value)
// 瀹氭椂鍣ㄨЕ鍙戝懆鏈�
- let speed3 = ref(25)
+ let speed3 = ref(100)
timer3.value = setInterval(ListScroll3, speed3.value)
}
// 寮�鍚畾鏃跺櫒
function start4() {
clearTimeout(timer4.value)
// 瀹氭椂鍣ㄨЕ鍙戝懆鏈�
- let speed4 = ref(25)
+ let speed4 = ref(100)
timer4.value = setInterval(ListScroll4, speed4.value)
}
function ListScroll() {
@@ -788,8 +755,8 @@
// })
onMounted(() => {
- console.log('11111')
- init()
+ if (!departId.value) return;
+ timer5.value = setInterval(init(), 60000)
})
</script>
@@ -840,6 +807,7 @@
}
.content_left_item1_content_row_name {
flex-shrink: 0;
+ width: 100px;
display: flex;
align-items: center;
span {
@@ -884,6 +852,7 @@
}
.content_left_item1_content_row_num {
font-size: 13px;
+ width: 60px;
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
font-weight: 400;
color: #D2E0FF;
@@ -958,11 +927,16 @@
align-items: center;
.scroll_item_row {
flex: 1;
+ width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
+ font-size: 13px;
&:first-child {
flex: 1.5;
}
@@ -1061,10 +1035,14 @@
.scroll_item_row {
flex: 1;
height: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
+ font-size: 13px;
&:nth-child(5) {
flex: 3;
}
@@ -1103,6 +1081,17 @@
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #01D9FE;
+ }
+ .scroll_item_row_item_wz {
+ white-space: nowrap;
+ position: absolute;
+ bottom: -10px;
+ left: 50%;
+ transform: translate(-50%, 45%);
+ font-size: 12px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #FFFFFF;
}
.scroll_item_row_item_x {
position: absolute;
@@ -1163,8 +1152,12 @@
.scroll_item_row {
flex: 1;
height: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
display: flex;
align-items: center;
+ font-size: 13px;
justify-content: center;
color: #FFFFFF;
.scroll_item_row_item {
@@ -1253,7 +1246,11 @@
.scroll_item_row {
flex: 1;
height: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
display: flex;
+ font-size: 13px;
align-items: center;
justify-content: center;
color: #FFFFFF;
@@ -1404,6 +1401,10 @@
.scroll_item_row {
flex: 1;
height: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
--
Gitblit v1.9.3