diff --git a/src/store/module/MicroExhibition.ts b/src/store/module/MicroExhibition.ts index f7eb293..e182066 100644 --- a/src/store/module/MicroExhibition.ts +++ b/src/store/module/MicroExhibition.ts @@ -75,6 +75,9 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, { data.chart.series = data.chart.series.map((item) => { item.type = 'bar' item.barMaxWidth = 30 + item.label = { + show: true, + } return item }) this.caijian = data; @@ -84,6 +87,9 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, { data.chart.series = data.chart.series.map((item) => { item.type = 'bar' item.barMaxWidth = 45 + item.label = { + show: true, + } return item }) this.tuoxie = data; @@ -96,6 +102,9 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, { data.chart.series = data.chart.series.map((item) => { item.type = 'bar' item.barMaxWidth = 30 + item.label = { + show: true, + } return item }) this.fengzhong = data; @@ -108,6 +117,9 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, { data.chart.series = data.chart.series.map((item) => { item.type = 'bar' item.barMaxWidth = 30 + item.label = { + show: true, + } return item }) this.banfang = data; @@ -121,6 +133,9 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, { data.chart.series = data.chart.series.map((item) => { item.type = 'bar' item.barMaxWidth = 30 + item.label = { + show: true, + } return item }) this.zuoyi = data; diff --git a/src/views/MicroExhibition/components/BoardBar.vue b/src/views/MicroExhibition/components/BoardBar.vue index 5b87f3a..a7ed11a 100644 --- a/src/views/MicroExhibition/components/BoardBar.vue +++ b/src/views/MicroExhibition/components/BoardBar.vue @@ -37,7 +37,7 @@ const prop = defineProps({ } }) let header = ['序号', '设备名称', '设备编码', '稼动率', '状态'] -let columnWidth = [90, 290, 140, 120, 120, 120]; +let columnWidth = [90, 290, 140, 120, 120]; let sum = 850; let computedWidth = (width: number) => { @@ -49,7 +49,7 @@ let config = reactive({ oddRowBGC: '#000F1D', evenRowBGC: '#000F1D', wrap: [false, false, false, false, false], - columnWidth: [80, 290, 120, 120, 120, 120], + columnWidth: [80, 290, 140, 120, 120], align: ['center', 'center', 'center', 'center', 'center', 'center'], rowNum: 2, waitTime: 3000, diff --git a/src/views/MicroExhibition/index.vue b/src/views/MicroExhibition/index.vue index d787082..fc550b0 100644 --- a/src/views/MicroExhibition/index.vue +++ b/src/views/MicroExhibition/index.vue @@ -131,6 +131,19 @@ let dev_value = [ ['全自动9公分电脑裁床', '待机', '40层', '0'], ] + +let throttle_timer = null +function throttle (fn, delay = 300) { + if(throttle_timer == null){ + throttle_timer = setTimeout(() => { + fn() + + clearTimeout(throttle_timer) + throttle_timer = null + }, delay); + } +} + async function getTopDeviceData() { let res = await getTopDevice() as any if (res.code === 200) { @@ -156,6 +169,7 @@ function getWebsocket(val) { if (data.type == 'StateChart') { + throttle(getTopDeviceData, 1000) store.setDevnum(data.msg) } if (data.type == 'WorkingState') { @@ -195,15 +209,14 @@ function errWebsocket(val) { onMounted(() => { getTopDeviceData() getCismaListData() - timer = setInterval(() => { - getTopDeviceData() - }, 10000) connectWebsocket(null, null, getWebsocket, errWebsocket) document.getElementById('app').style.backgroundColor = '#0E0E0E' }) onUnmounted(() => { clearInterval(timer) + + closeWebsocket() document.getElementById('app').style.backgroundColor = '#100c2a' }) @@ -407,16 +420,18 @@ h2 { } .dev-center { - width: 3px; - height: 60px; - background-image: linear-gradient(to bottom, #2869E8, #00D0FF); - background-color: #5067BC; - transform: rotate(40deg) translate(7px, -6px); + width: 3px; + height: 60px; + background-image: linear-gradient(to bottom, #2869E8, #00D0FF); + background-color: #5067BC; + transform: rotate(40deg) translate(7px, -6px); } + .dev-top { transform: translate(-6px, -10px); font-size: 30px; } + .dev-bottom { transform: translate(15px, 15px); font-size: 30px;