From 1f4e7d0f73a73e7350cf5a1df279d5f30904c5d5 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期三, 06 十二月 2023 08:41:32 +0800
Subject: [PATCH] bug
---
screen_standard/src/views/index.vue | 298 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 172 insertions(+), 126 deletions(-)
diff --git a/screen_standard/src/views/index.vue b/screen_standard/src/views/index.vue
index c9970c2..975400e 100644
--- a/screen_standard/src/views/index.vue
+++ b/screen_standard/src/views/index.vue
@@ -59,9 +59,9 @@
:content="'宸叉姤宸ヨ壇鍝佹暟' + child.doneNum + '锛涘伐搴忚鍒掓暟' + child.planNum" placement="top">
<div class="scroll_item_row_item" @click="jump(child.procedureId, child.procedureName)">
<div class="scroll_item_row_item_x"></div>
- <span v-if="child.rate < 100">{{ Math.floor(child.rate) }}%</span>
+ <span v-if="child.rate < 100">{{ child.rate.toFixed(0) }}%</span>
<img v-else src="@/assets/img/ic_complete@2x.png" alt="" />
- <span class="scroll_item_row_item_wz">{{ child.procedureName.substring(0, 3) }}</span>
+ <span class="scroll_item_row_item_wz">{{ child.procedureName }}</span>
</div>
</el-tooltip>
</div>
@@ -103,7 +103,7 @@
<div class="content_left_item1_head">
<span>褰撴棩鍛樺伐浜ч噺TOP10</span>
</div>
- <div class="content_left_item1_content" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" ref="scrollContainer">
+ <div class="content_left_item1_content" ref="scrollContainer">
<div class="content_left_item1_content_row" v-for="(item, index) in data.production" :key="index">
<div class="content_left_item1_content_row_name">
<div :class="index > 2 ? 'num bg1' : 'num bg2'">{{ index + 1 }}</div>
@@ -157,7 +157,7 @@
<span>杩�7澶╀笉鑹搧鍒嗗竷</span>
</div>
<div class="content_right_top_nr">
-
+
<div class="content_right_top_nr_top" id="lineChrat"></div>
<div class="content_right_top_nr_bottom">
<div class="content_right_top_nr_bottom_yuan" v-if="data.typeDistribution.length > 0">
@@ -166,7 +166,7 @@
</div>
<div id="pieChart"></div>
</div>
-
+
</div>
</div>
<!-- 璁惧宸℃璁板綍 -->
@@ -203,8 +203,8 @@
<script setup>
import { dateToSub } from '@/utils'
-import { reactive, ref, onMounted, onUnmounted, computed, watch, toRefs } from 'vue'
-import { getPlanData, getTop, getWorkPlansList, getProcedureProcessList, getRecordLogPage, getDeviceCheckPage, getUnqualified7DayData, getUnqualifiedCateData } from '@/utils/api.js'
+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'
import { useRouter } from 'vue-router'
@@ -222,16 +222,16 @@
typeDistribution: [],
num: 0,
baseNum: 0,
- firstScroll: false,
- secondScroll: false,
- thirdScroll: false,
- fourthScroll: false,
- fifthScroll: false,
+ bottomAuthHeight: 284
})
-let { baseNum } = toRefs(data)
+let { baseNum, bottomAuthHeight } = 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)
@@ -276,17 +276,20 @@
}
})
+start1()
const init = () => {
- console.log(timer.value);
+ setBottomHeight();
// 褰撴棩鍛樺伐浜ч噺TOP10
getTop(companyId.value, departId.value)
.then(res => {
if (res.length > 0) {
data.baseNum = res[0].doneNum
- data.production = res
- data.fifthScroll = true
+ } else {
+ data.baseNum = 0
}
+ data.production = res
+ data.fifthScroll = true
})
// 浠撳簱瀹炴椂浣欓噺缁熻
// getStockList(companyId.value, departId.value)
@@ -302,20 +305,24 @@
getProcedureProcessList(companyId.value, departId.value)
.then(res => {
data.processProgress = res
- data.thirdScroll = true
+ nextTick(() => {
+ start2()
+ })
})
} else {
// 鎴愬搧璁″垝杩涘害
getWorkPlansList(companyId.value, departId.value)
.then(res => {
data.plannedProgress = res
- data.secondScroll = true
+ nextTick(() => {
+ start1()
+ })
})
}
}
})
-
-
+
+
// 鎶ュ伐鏃ュ織
getRecordLogPage(companyId.value, departId.value, {
capacity: 20,
@@ -323,7 +330,9 @@
page: 1
}).then(res => {
data.log = res.records
- data.fourthScroll = true
+ nextTick(() => {
+ start3()
+ })
})
// 璁惧宸℃璁板綍
getDeviceCheckPage(companyId.value, departId.value, {
@@ -332,7 +341,9 @@
page: 1
}).then(res => {
data.patrolInspection = res.records
- data.fifthScroll = true
+ nextTick(() => {
+ start4()
+ })
})
// 杩戜竷澶╀笉鑹暟
getUnqualified7DayData(companyId.value, departId.value, '')
@@ -359,7 +370,6 @@
num: item.unqualifiedNum
}
})
- console.log(data.num);
setTypeChart()
}
})
@@ -368,6 +378,10 @@
.then(res => {
enterprise.setNum(res)
})
+}
+function setBottomHeight(){
+ const pageHeight = window.innerHeight;
+ bottomAuthHeight = pageHeight - 700;
}
/**
@@ -378,14 +392,16 @@
let myChart = echarts.init(dayChartDom);
let dateList = []
let numList = []
+ let num = 0
data.dayDistribution.forEach(item => {
dateList.push(item.date)
numList.push(item.num)
+ num += item.num
})
let option;
option = {
title: {
- text: ` 杩戜竷鏃ヤ笉鑹搧鎬绘暟锛�${data.num}`,
+ text: `杩戜竷鏃ヤ笉鑹搧鎬绘暟锛�${num}`,
textStyle: {
color: '#fff',
fontSize: 12
@@ -393,7 +409,9 @@
},
grid: {
top: 40,
- bottom: 30
+ bottom: 30,
+ left: 60,
+ right: 10
},
xAxis: {
type: 'category',
@@ -402,6 +420,15 @@
lineStyle: {
width: 0.5,
color: ['#fff']
+ }
+ },
+ axisLine: {
+ show: true,
+ onZero: true,
+ lineStyle: {
+ width: 0.5,
+ color: '#fff',
+ opacity: .5
}
},
axisLabel: {
@@ -418,6 +445,15 @@
lineStyle: {
width: 0.5,
color: ['#fff']
+ }
+ },
+ axisLine: {
+ show: true,
+ onZero: true,
+ lineStyle: {
+ width: 1,
+ color: '#fff',
+ opacity: .5
}
},
axisLabel: {
@@ -521,6 +557,9 @@
}
}
},
+ // labelLayout: {
+ // hideOverlap: true
+ // },
endLabel: {
show: true,
distance: 5,
@@ -539,8 +578,17 @@
}
option && myChart.setOption(option);
}
-
+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)
+ clearTimeout(timer2.value)
cate.value.forEach((item, i) => {
if (i === index) {
// 鎴愬搧璁″垝杩涘害
@@ -548,13 +596,17 @@
getWorkPlansList(companyId.value, departId.value)
.then(res => {
data.plannedProgress = res
- data.secondScroll = true
+ nextTick(() => {
+ start1()
+ })
})
} else {
getProcedureProcessList(companyId.value, departId.value)
.then(res => {
data.processProgress = res
- data.thirdScroll = true
+ nextTick(() => {
+ start2()
+ })
})
}
item.active = true
@@ -564,39 +616,71 @@
})
}
function handleMouseEnter() {
- data.firstScroll = false
+ clearTimeout(timer.value)
}
function handleMouseEnter1() {
- data.secondScroll = false
+ clearTimeout(timer1.value)
}
function handleMouseEnter2() {
- data.thirdScroll = false
+ clearTimeout(timer2.value)
}
function handleMouseEnter3() {
- data.fourthScroll = false
+ clearTimeout(timer3.value)
}
function handleMouseEnter4() {
- data.fifthScroll = false
+ clearTimeout(timer4.value)
}
function handleMouseLeave() {
- data.firstScroll = true
+ start()
}
function handleMouseLeave1() {
- data.secondScroll = true
+ start1()
}
function handleMouseLeave2() {
- data.thirdScroll = true
+ start2()
}
function handleMouseLeave3() {
- data.fourthScroll = true
+ start3()
}
function handleMouseLeave4() {
- data.fifthScroll = true
+ start4()
}
-
+// 寮�鍚畾鏃跺櫒
+function start() {
+ clearTimeout(timer.value)
+ // 瀹氭椂鍣ㄨЕ鍙戝懆鏈�
+ let speed = ref(100)
+ timer.value = setInterval(ListScroll, speed.value)
+}
+// 寮�鍚畾鏃跺櫒
+function start1() {
+ clearTimeout(timer1.value)
+ // 瀹氭椂鍣ㄨЕ鍙戝懆鏈�
+ let speed1 = ref(100)
+ timer1.value = setInterval(ListScroll1, speed1.value)
+}
+// 寮�鍚畾鏃跺櫒
+function start2() {
+ clearTimeout(timer2.value)
+ // 瀹氭椂鍣ㄨЕ鍙戝懆鏈�
+ let speed2 = ref(100)
+ timer2.value = setInterval(ListScroll2, speed2.value)
+}
+// 寮�鍚畾鏃跺櫒
+function start3() {
+ clearTimeout(timer3.value)
+ // 瀹氭椂鍣ㄨЕ鍙戝懆鏈�
+ let speed3 = ref(100)
+ timer3.value = setInterval(ListScroll3, speed3.value)
+}
+// 寮�鍚畾鏃跺櫒
+function start4() {
+ clearTimeout(timer4.value)
+ // 瀹氭椂鍣ㄨЕ鍙戝懆鏈�
+ let speed4 = ref(100)
+ timer4.value = setInterval(ListScroll4, speed4.value)
+}
function ListScroll() {
- if (!data.firstScroll) return
- // console.log('ListScroll');
let scrollDom = scrollContainer.value
if (!scrollDom) return
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
@@ -606,15 +690,13 @@
let maxLength = scrollDom.clientHeight/34
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
if (scrollDom.children.length <= maxLength) {
- data.firstScroll = false
+ clearTimeout(timer.value)
return
}
// 缁勪欢杩涜婊氬姩
scrollDom.scrollTop += 2
- // console.log(scrollDom.scrollHeight - scrollDom.clientHeight);
- // console.log(scrollDom.scrollTop);
// 鍒ゆ柇鏄惁婊氬姩鍒板簳閮�
- if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight - 2)) {
+ if (Math.floor(scrollDom.scrollTop) >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
// 鑾峰彇缁勪欢绗竴涓妭鐐�
let first = scrollDom.children[0]
// 鍒犻櫎鑺傜偣
@@ -625,8 +707,6 @@
}
}
function ListScroll1() {
- if (!data.secondScroll) return
- // console.log('ListScroll1');
let scrollDom = scrollContainer1.value
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
if (!scrollDom) return
@@ -634,17 +714,17 @@
scrollDom = scrollContainer1.value
} else {
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
- if (scrollDom.children.length < 7) {
- data.secondScroll = false
+ if (scrollDom.children.length <= 6) {
+ clearTimeout(timer1.value)
return
}
+ // console.log(data.plannedProgress);
// 缁勪欢杩涜婊氬姩
scrollDom.scrollTop += 2
-
+ // scrollDom.scrollTo(0, scrollDom.scrollTop + 3)
+ // console.log('2-----',scrollDom.scrollTop, scrollDom.scrollHeight, scrollDom.clientHeight );
// 鍒ゆ柇鏄惁婊氬姩鍒板簳閮�
- if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight-0.5)) {
- console.log(scrollDom.scrollTop);
- console.log(scrollDom.scrollHeight, scrollDom.clientHeight);
+ if (scrollDom.scrollTop && scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
// 鑾峰彇缁勪欢绗竴涓妭鐐�
let first = scrollDom.children[0]
// 鍒犻櫎鑺傜偣
@@ -655,8 +735,6 @@
}
}
function ListScroll2() {
- if (!data.thirdScroll) return
- // console.log('ListScroll2');
let scrollDom = scrollContainer2.value
if (!scrollDom) return
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
@@ -664,16 +742,17 @@
scrollDom = scrollContainer2.value
} else {
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
- if (scrollDom.children.length < 10) {
- data.thirdScroll = false
+ if (scrollDom.children.length <= 10) {
+ clearTimeout(timer2.value)
return
}
// 缁勪欢杩涜婊氬姩
- scrollDom.scrollTop += 2
+ scrollDom.scrollTo(0, scrollDom.scrollTop + 1) // += 1
+ // scrollDom.scrollTop(scrollDom.scrollTop + 1)
// console.log('scrollDom.scrollTop', scrollDom.scrollTop);
// console.log('scrollDom.scrollHeight - scrollDom.clientHeight', scrollDom.scrollHeight - scrollDom.clientHeight);
// 鍒ゆ柇鏄惁婊氬姩鍒板簳閮�
- if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight - 2)) {
+ if (scrollDom.scrollTop &&scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
// 鑾峰彇缁勪欢绗竴涓妭鐐�
let first = scrollDom.children[0]
// 鍒犻櫎鑺傜偣
@@ -684,9 +763,6 @@
}
}
function ListScroll3() {
-
- if (!data.fourthScroll) return
- // console.log('ListScroll3');
let scrollDom = scrollContainer3.value
if (!scrollDom) return
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
@@ -698,13 +774,13 @@
// alert(scrollDom.children.length +"---------------"+num)
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
if (scrollDom.children.length <= num) {
- data.fourthScroll = false
+ clearTimeout(timer3.value)
return
}
// 缁勪欢杩涜婊氬姩
scrollDom.scrollTop = scrollDom.scrollTop+2
// 鍒ゆ柇鏄惁婊氬姩鍒板簳閮�
- if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight -2)) {
+ if (scrollDom.scrollTop && scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
// 鑾峰彇缁勪欢绗竴涓妭鐐�
let first = scrollDom.children[0]
// 鍒犻櫎鑺傜偣
@@ -715,26 +791,26 @@
}
}
function ListScroll4() {
- if (!data.fifthScroll) return
- // console.log('ListScroll4');
let scrollDom = scrollContainer4.value
if (!scrollDom) return
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
- if (scrollDom.offsetHeight == 0) {
+ if (scrollDom.scrollTop && scrollDom.offsetHeight == 0) {
scrollDom = scrollContainer4.value
} else {
- // console.log(bottom1.value.height);
- let num = scrollContainer4.value.offsetHeight / 35;
- // alert(scrollDom.children.length +"---------------"+num)
- // 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
+ // console.log(scrollDom.offsetHeight);
+ let num = scrollDom.offsetHeight / 35;
+ num = num + (scrollDom.offsetHeight % 35 > 0 ? 1 : 0)
if (scrollDom.children.length <= num) {
- data.fifthScroll = false
+ clearTimeout(timer4.value)
return
}
// 缁勪欢杩涜婊氬姩
- scrollDom.scrollTop += 2
+ scrollDom.scrollTop += 1
+
// 鍒ゆ柇鏄惁婊氬姩鍒板簳閮�
- if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight - 2)) {
+ if (scrollDom.scrollTop && scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
+ // if (scrollDom.scrollTop >= 35) {
+
// 鑾峰彇缁勪欢绗竴涓妭鐐�
let first = scrollDom.children[0]
// 鍒犻櫎鑺傜偣
@@ -744,27 +820,26 @@
}
}
}
-function scrillAction() {
- ListScroll()
- ListScroll1()
- ListScroll2()
- ListScroll3()
- ListScroll4()
-}
+
+// onUnmounted(() => {
+
+// })
onMounted(() => {
+ if (departId.value) {
+ console.log('onMounted');
+ init()
+ timer5.value = setInterval(init, 60000)
+ // timer.value = setInterval(scrillAction, 100)
+ }
window.addEventListener('resize', () => {
setTypeChart()
setDayChart()
})
- if (!departId.value) return;
- init()
- timer5.value = setInterval(init, 60000)
- timer.value = setInterval(scrillAction, 100)
+
})
onUnmounted(() => {
- console.log('鍋滄婊寸瓟');
clearTimeout(timer.value)
clearTimeout(timer5.value)
@@ -775,7 +850,6 @@
$fixed-height: 690px;
.content1 {
-
flex: 1;
width: 100%;
height: auto;
@@ -1066,12 +1140,7 @@
&:nth-child(5) {
flex: 3;
- }
- &:nth-child(4) {
- flex: 0.7;
- }
- &:nth-child(6) {
- flex: 0.7;
+
}
}
}
@@ -1108,15 +1177,10 @@
justify-content: center;
color: #FFFFFF;
font-size: 13px;
- &:nth-child(4) {
- flex: 0.7;
- }
+
&:nth-child(5) {
flex: 3;
justify-content: start;
- }
- &:nth-child(6) {
- flex: 0.7;
}
.scroll_item_row_item {
margin-top: -11px;
@@ -1321,15 +1385,9 @@
font-weight: 500;
color: #01D9FE;
- &:nth-child(5) {
- flex: 0.5;
+ &:nth-child(4) {
+ flex: 2;
}
- &:nth-child(6) {
- flex: 0.5;
- }
- &:nth-child(7) {
- flex: 0.7;
- }
}
}
@@ -1368,16 +1426,9 @@
justify-content: center;
color: #FFFFFF;
- &:nth-child(5) {
- flex: 0.5;
+ &:nth-child(4) {
+ flex: 2;
}
- &:nth-child(6) {
- flex: 0.5;
- }
- &:nth-child(7) {
- flex: 0.7;
- }
-
}
}
}
@@ -1517,11 +1568,8 @@
font-weight: 500;
color: #01D9FE;
- // &:first-child {
- // flex: 2;
- // }
- &:nth-child(3) {
- flex: 0.7;
+ &:first-child {
+ flex: 2;
}
}
}
@@ -1560,12 +1608,10 @@
align-items: center;
justify-content: center;
color: #FFFFFF;
- &:nth-child(3) {
- flex: 0.7;
+
+ &:first-child {
+ flex: 2;
}
- // &:first-child {
- // flex: 2;
- // }
}
}
}
--
Gitblit v1.9.3