From 221d9dfd1634d5fab98a686b0b8a83f6f1e088b5 Mon Sep 17 00:00:00 2001
From: Mr.Zhang <710666463@qq.com>
Date: 星期四, 24 八月 2023 10:56:56 +0800
Subject: [PATCH] 大屏 08.24
---
screen_standard/src/components/AppLayout.vue | 17 +-
screen_standard/.env.development | 8 -
screen_standard/src/views/process.vue | 78 +++++-------
screen_standard/src/views/index.vue | 227 ++++++++++++++++++-------------------
4 files changed, 154 insertions(+), 176 deletions(-)
diff --git a/screen_standard/.env.development b/screen_standard/.env.development
index d1b8dc6..0ee6f4b 100644
--- a/screen_standard/.env.development
+++ b/screen_standard/.env.development
@@ -6,9 +6,5 @@
VITE_BASE_URL='http://192.168.0.35:10021'
# VITE_BASE_PATH='/doumeeplant_api'
-# VITE_BASE_URL='https://dmtest.ahapp.net/doumeeplant_api/'
-VITE_BASE_URL = 'https://www.mes.red/doumeeplant'
-
-
-VITE_BASE_PATH = '/api'
-VITE_BASE_URL = 'https://www.mes.red/doumeeplant'
\ No newline at end of file
+VITE_BASE_URL='https://dmtest.ahapp.net/doumeeplant_api'
+# VITE_BASE_URL = 'https://www.mes.red/doumeeplant'
diff --git a/screen_standard/src/components/AppLayout.vue b/screen_standard/src/components/AppLayout.vue
index beb0e9c..88f8907 100644
--- a/screen_standard/src/components/AppLayout.vue
+++ b/screen_standard/src/components/AppLayout.vue
@@ -115,8 +115,6 @@
}
const fullChange = () => {
- enterprise.setDepartId('')
- enterprise.setDepartId(data.tempCom.id)
data.isFull = !data.isFull
let element = document.documentElement;
if (data.isFull) { // 鍏ㄥ睆
@@ -154,15 +152,18 @@
.catch(err => {})
const week = ['鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�', '鏄熸湡鏃�']
setInterval(() => {
- let date = new Date()
+ let tempDate = new Date()
+ let month = tempDate.getMonth()+1
+ let day = tempDate.getDate()
+ let hours = tempDate.getHours()
+ let minute = tempDate.getMinutes()
+ let seconds = tempDate.getSeconds()
data.tempDate = {
- time: `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`,
- date: `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`,
- day: week[date.getDay()-1]
+ time: `${hours<10?`0${hours}`:hours}:${minute<10?`0${minute}`:minute}:${seconds<10?`0${seconds}`:seconds}`,
+ date: `${tempDate.getFullYear()}/${month<10?`0${month}`:month}/${day<10?`0${day}`:day}`,
+ day: week[tempDate.getDay()-1]
}
}, 1000)
- // console.log(date.getDay());
-
})
const back = () => {
enterprise.setProcedureName('')
diff --git a/screen_standard/src/views/index.vue b/screen_standard/src/views/index.vue
index 989120a..fdfbaa9 100644
--- a/screen_standard/src/views/index.vue
+++ b/screen_standard/src/views/index.vue
@@ -103,7 +103,7 @@
<div class="content_left_item1_head">
<span>褰撴棩鍛樺伐浜ч噺TOP10</span>
</div>
- <div class="content_left_item1_content" ref="scrollContainer">
+ <div class="content_left_item1_content" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" 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>
@@ -203,8 +203,8 @@
<script setup>
import { dateToSub } from '@/utils'
-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 { reactive, ref, onMounted, onUnmounted, computed, watch, toRefs } from 'vue'
+import { getPlanData, getTop, 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,
- bottomAuthHeight: 284
+ firstScroll: false,
+ secondScroll: false,
+ thirdScroll: false,
+ fourthScroll: false,
+ fifthScroll: false,
})
-let { baseNum, bottomAuthHeight } = toRefs(data)
+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)
@@ -276,17 +276,16 @@
}
})
-start1()
const init = () => {
- setBottomHeight();
+ console.log(timer.value);
// 褰撴棩鍛樺伐浜ч噺TOP10
getTop(companyId.value, departId.value)
.then(res => {
if (res.length > 0) {
data.baseNum = res[0].doneNum
data.production = res
- start()
+ data.fifthScroll = true
}
})
// 浠撳簱瀹炴椂浣欓噺缁熻
@@ -303,18 +302,14 @@
getProcedureProcessList(companyId.value, departId.value)
.then(res => {
data.processProgress = res
- nextTick(() => {
- start2()
- })
+ data.thirdScroll = true
})
} else {
// 鎴愬搧璁″垝杩涘害
getWorkPlansList(companyId.value, departId.value)
.then(res => {
data.plannedProgress = res
- nextTick(() => {
- start1()
- })
+ data.secondScroll = true
})
}
}
@@ -328,9 +323,7 @@
page: 1
}).then(res => {
data.log = res.records
- nextTick(() => {
- start3()
- })
+ data.fourthScroll = true
})
// 璁惧宸℃璁板綍
getDeviceCheckPage(companyId.value, departId.value, {
@@ -339,9 +332,7 @@
page: 1
}).then(res => {
data.patrolInspection = res.records
- nextTick(() => {
- start4()
- })
+ data.fifthScroll = true
})
// 杩戜竷澶╀笉鑹暟
getUnqualified7DayData(companyId.value, departId.value, '')
@@ -368,6 +359,7 @@
num: item.unqualifiedNum
}
})
+ console.log(data.num);
setTypeChart()
}
})
@@ -376,10 +368,6 @@
.then(res => {
enterprise.setNum(res)
})
-}
-function setBottomHeight(){
- const pageHeight = window.innerHeight;
- bottomAuthHeight = pageHeight - 700;
}
/**
@@ -390,16 +378,14 @@
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: `杩戜竷鏃ヤ笉鑹搧鎬绘暟锛�${num}`,
+ text: `杩戜竷鏃ヤ笉鑹搧鎬绘暟锛�${data.num}`,
textStyle: {
color: '#fff',
fontSize: 12
@@ -531,9 +517,6 @@
}
}
},
- // labelLayout: {
- // hideOverlap: true
- // },
endLabel: {
show: true,
distance: 5,
@@ -552,17 +535,8 @@
}
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) {
// 鎴愬搧璁″垝杩涘害
@@ -570,17 +544,13 @@
getWorkPlansList(companyId.value, departId.value)
.then(res => {
data.plannedProgress = res
- nextTick(() => {
- start1()
- })
+ data.secondScroll = true
})
} else {
getProcedureProcessList(companyId.value, departId.value)
.then(res => {
data.processProgress = res
- nextTick(() => {
- start2()
- })
+ data.thirdScroll = true
})
}
item.active = true
@@ -590,71 +560,39 @@
})
}
function handleMouseEnter() {
- clearTimeout(timer.value)
+ data.firstScroll = false
}
function handleMouseEnter1() {
- clearTimeout(timer1.value)
+ data.secondScroll = false
}
function handleMouseEnter2() {
- clearTimeout(timer2.value)
+ data.thirdScroll = false
}
function handleMouseEnter3() {
- clearTimeout(timer3.value)
+ data.fourthScroll = false
}
function handleMouseEnter4() {
- clearTimeout(timer4.value)
+ data.fifthScroll = false
}
function handleMouseLeave() {
- start()
+ data.firstScroll = true
}
function handleMouseLeave1() {
- start1()
+ data.secondScroll = true
}
function handleMouseLeave2() {
- start2()
+ data.thirdScroll = true
}
function handleMouseLeave3() {
- start3()
+ data.fourthScroll = true
}
function handleMouseLeave4() {
- start4()
+ data.fifthScroll = true
}
-// 寮�鍚畾鏃跺櫒
-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
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
@@ -664,7 +602,7 @@
let maxLength = scrollDom.clientHeight/34
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
if (scrollDom.children.length <= maxLength) {
- clearTimeout(timer.value)
+ data.firstScroll = false
return
}
// 缁勪欢杩涜婊氬姩
@@ -683,6 +621,8 @@
}
}
function ListScroll1() {
+ if (!data.secondScroll) return
+ // console.log('ListScroll1');
let scrollDom = scrollContainer1.value
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
if (!scrollDom) return
@@ -691,7 +631,7 @@
} else {
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
if (scrollDom.children.length < 7) {
- clearTimeout(timer1.value)
+ data.secondScroll = false
return
}
// 缁勪欢杩涜婊氬姩
@@ -708,6 +648,8 @@
}
}
function ListScroll2() {
+ if (!data.thirdScroll) return
+ // console.log('ListScroll2');
let scrollDom = scrollContainer2.value
if (!scrollDom) return
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
@@ -716,7 +658,7 @@
} else {
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
if (scrollDom.children.length < 10) {
- clearTimeout(timer2.value)
+ data.thirdScroll = false
return
}
// 缁勪欢杩涜婊氬姩
@@ -735,6 +677,9 @@
}
}
function ListScroll3() {
+
+ if (!data.fourthScroll) return
+ // console.log('ListScroll3');
let scrollDom = scrollContainer3.value
if (!scrollDom) return
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
@@ -746,7 +691,7 @@
// alert(scrollDom.children.length +"---------------"+num)
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
if (scrollDom.children.length <= num) {
- clearTimeout(timer3.value)
+ data.fourthScroll = false
return
}
// 缁勪欢杩涜婊氬姩
@@ -763,6 +708,8 @@
}
}
function ListScroll4() {
+ if (!data.fifthScroll) return
+ // console.log('ListScroll4');
let scrollDom = scrollContainer4.value
if (!scrollDom) return
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
@@ -774,7 +721,7 @@
// alert(scrollDom.children.length +"---------------"+num)
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
if (scrollDom.children.length <= num) {
- clearTimeout(timer4.value)
+ data.fifthScroll = false
return
}
// 缁勪欢杩涜婊氬姩
@@ -790,17 +737,30 @@
}
}
}
-
-// onUnmounted(() => {
-
-// })
+function scrillAction() {
+ ListScroll()
+ ListScroll1()
+ ListScroll2()
+ ListScroll3()
+ ListScroll4()
+}
onMounted(() => {
- if (!departId.value) return;
window.addEventListener('resize', () => {
- init()
+ setTypeChart()
+ setDayChart()
})
- timer5.value = setInterval(init(), 60000)
+ if (!departId.value) return;
+ init()
+ timer5.value = setInterval(init, 60000)
+ timer.value = setInterval(scrillAction, 100)
+})
+
+onUnmounted(() => {
+ console.log('鍋滄婊寸瓟');
+ clearTimeout(timer.value)
+ clearTimeout(timer5.value)
+
})
</script>
@@ -808,6 +768,9 @@
$fixed-height: 690px;
.content1 {
+ scrollbar-width:none;
+ -ms-overflow-style:none;
+ ::-webkit-scrollbar{display:none}
flex: 1;
width: 100%;
height: auto;
@@ -1098,7 +1061,12 @@
&:nth-child(5) {
flex: 3;
-
+ }
+ &:nth-child(4) {
+ flex: 0.7;
+ }
+ &:nth-child(6) {
+ flex: 0.7;
}
}
}
@@ -1135,10 +1103,15 @@
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;
@@ -1343,9 +1316,15 @@
font-weight: 500;
color: #01D9FE;
- &:nth-child(4) {
- flex: 2;
+ &:nth-child(5) {
+ flex: 0.5;
}
+ &:nth-child(6) {
+ flex: 0.5;
+ }
+ &:nth-child(7) {
+ flex: 0.7;
+ }
}
}
@@ -1384,9 +1363,16 @@
justify-content: center;
color: #FFFFFF;
- &:nth-child(4) {
- flex: 2;
+ &:nth-child(5) {
+ flex: 0.5;
}
+ &:nth-child(6) {
+ flex: 0.5;
+ }
+ &:nth-child(7) {
+ flex: 0.7;
+ }
+
}
}
}
@@ -1526,8 +1512,11 @@
font-weight: 500;
color: #01D9FE;
- &:first-child {
- flex: 2;
+ // &:first-child {
+ // flex: 2;
+ // }
+ &:nth-child(3) {
+ flex: 0.7;
}
}
}
@@ -1566,10 +1555,12 @@
align-items: center;
justify-content: center;
color: #FFFFFF;
-
- &:first-child {
- flex: 2;
+ &:nth-child(3) {
+ flex: 0.7;
}
+ // &:first-child {
+ // flex: 2;
+ // }
}
}
}
diff --git a/screen_standard/src/views/process.vue b/screen_standard/src/views/process.vue
index 542c8f5..c44e935 100644
--- a/screen_standard/src/views/process.vue
+++ b/screen_standard/src/views/process.vue
@@ -113,7 +113,7 @@
</template>
<script setup>
-import { reactive, ref, toRefs, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
+import { reactive, ref, toRefs, onMounted, onUnmounted } from 'vue'
import { getProcedurePlanData, getTop, getProcedurePlansList, getRecordLogPage, getUnqualified7DayData, getUnqualifiedCateData } from '@/utils/api.js'
import { useCounterStore } from '@/stores/counter.js'
import { useRoute } from 'vue-router'
@@ -122,8 +122,7 @@
const route = useRoute()
const enterprise = useCounterStore()
let mainTimer = ref(null)
-let planTimer = ref(null)
-let reportTimer = ref(null)
+let scrollTimer = ref(null)
let planContainer = ref(null)
let reportLogContainer = ref(null)
const data = reactive({
@@ -140,19 +139,23 @@
{ categoryName: '灏哄涓嶈壇', unqualifiedNum: 22 },
{ categoryName: '鏈夊垝鐥�', unqualifiedNum: 5 },
{ categoryName: '鍏朵粬', unqualifiedNum: 2 },
- ]
+ ],
+ planScroll: false,
+ reportScroll: false,
})
let { listData, top1, top2, baseNum, allBad, reportListData } = toRefs(data)
-// start()
-onBeforeUnmount(() => {
- clearTimeout(planTimer.value)
- clearTimeout(reportTimer.value)
- clearTimeout(mainTimer.value)
-})
onMounted(() => {
+ window.addEventListener('resize', () => {
+ setDayChart()
+ setTypeChart()
+ })
initData()
+ scrollTimer.value = setInterval(() => {
+ ListScroll()
+ reportScroll()
+ }, 100)
mainTimer.value = setInterval(() => {
initData()
}, 60000)
@@ -160,13 +163,11 @@
onUnmounted(() => {
- clearTimeout(planTimer.value)
- clearTimeout(reportTimer.value)
+ clearTimeout(scrollTimer.value)
clearTimeout(mainTimer.value)
})
function initData() {
- console.log(enterprise.departId);
// 璁″垝鏁�
getProcedurePlanData(enterprise.companyId, enterprise.departId, { procedureId: route.query.procedureId })
.then(res => {
@@ -176,7 +177,6 @@
getTop(enterprise.companyId, enterprise.departId, { procedureId: route.query.procedureId })
.then(res => {
if (res.length) {
-
data.baseNum = res[0].doneNum
data.top1 = []
data.top2 = []
@@ -197,52 +197,46 @@
getProcedurePlansList(enterprise.companyId, enterprise.departId, { procedureId: route.query.procedureId })
.then(res => {
data.listData = res
- start()
+ data.planScroll = true
})
// 鎶ュ伐鏃ュ織鍒嗛〉鏌ヨ
getRecordLogPage(enterprise.companyId, enterprise.departId, { capacity: 20, page: 1, model: { procedureId: route.query.procedureId } })
.then(res => {
data.reportListData = res.records
- reportStart()
+ data.reportScroll = true
})
getUnqualified7DayData(enterprise.companyId, enterprise.departId, route.query.procedureId)
.then(res => {
data.dayDistribution = res
+ data.allBad = res.reduce((accumulator, currentValue) => accumulator + currentValue.unqualifiedNum, 0)
setDayChart()
})
getUnqualifiedCateData(enterprise.companyId, enterprise.departId, route.query.procedureId)
.then(res => {
data.typeDistribution = res
- data.allBad = res.reduce((accumulator, currentValue) => accumulator + currentValue.unqualifiedNum, 0)
setTypeChart()
})
}
-
+// 榧犳爣绉诲叆
function handleMouseEnter() {
- clearTimeout(planTimer.value)
+ data.planScroll = false
}
function handleMouseLeave() {
- start()
+ data.planScroll = true
}
-
+// 榧犳爣绉婚櫎
function handleMouseEnterReport() {
- clearTimeout(reportTimer.value)
+ data.reportScroll = false
}
function handleMouseLeaveReport() {
- reportStart()
+ data.reportScroll = true
}
/**
- * 宸ュ簭璁″垝
+ * 宸ュ簭璁″垝婊氬姩鏂规硶
*/
-// 寮�鍚畾鏃跺櫒
-function start() {
- clearTimeout(planTimer.value)
- // 瀹氭椂鍣ㄨЕ鍙戝懆鏈�
- // let speed = ref(100)
- planTimer.value = setInterval(ListScroll, 100)
-}
function ListScroll() {
+ if (!data.planScroll) return
let scrollDom = planContainer.value
if (!scrollDom) return
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
@@ -251,7 +245,7 @@
} else {
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
if (scrollDom.children.length < 11) {
- clearTimeout(planTimer.value)
+ data.planScroll = false
return
}
// 缁勪欢杩涜婊氬姩
@@ -268,15 +262,10 @@
}
}
/**
- * 鎶ュ伐鏃ュ織
+ * 鎶ュ伐鏃ュ織婊氬姩鏂规硶
*/
-function reportStart() {
- clearTimeout(reportTimer.value)
- // 瀹氭椂鍣ㄨЕ鍙戝懆鏈�
- // let speed = ref(100)
- reportTimer.value = setInterval(reportScroll, 100)
-}
function reportScroll() {
+ if (!data.reportScroll) return
let scrollDom = reportLogContainer.value
if (!scrollDom) return
// 鍒よ缁勪欢鏄惁娓叉煋瀹屾垚
@@ -285,13 +274,13 @@
} else {
// 濡傛灉鍒楄〃鏁伴噺杩囧皯涓嶈繘琛屾粴鍔�
if (scrollDom.children.length < 10) {
- clearTimeout(reportTimer.value)
+ data.reportScroll = false
return
}
// 缁勪欢杩涜婊氬姩
- scrollDom.scrollTop += 1.5
+ scrollDom.scrollTop += 2
// 鍒ゆ柇鏄惁婊氬姩鍒板簳閮�
- if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
+ if (scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight - 2)) {
// 鑾峰彇缁勪欢绗竴涓妭鐐�
let first = scrollDom.children[0]
// 鍒犻櫎鑺傜偣
@@ -314,6 +303,7 @@
dateList.push(item.createTime)
numList.push(item.unqualifiedNum || 0)
})
+ console.log(data.allBad);
let option;
option = {
title: {
@@ -502,7 +492,7 @@
}
.today-yield {
- height: calc(100vh - 690px);
+ height: calc(100vh - 725px);
min-height: 226px;
background: linear-gradient(180deg, rgba(52, 88, 159, 0) 0%, rgba(0, 86, 255, 0.4) 100%);
@@ -609,7 +599,7 @@
}
.bad-diagram {
- height:calc(100vh - 690px);;
+ height:calc(100vh - 725px);;
min-height: 226px;
background: linear-gradient(180deg, rgba(52, 88, 159, 0) 0%, rgba(0, 86, 255, 0.4) 100%);
--
Gitblit v1.9.3