展会大屏修改

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;

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,

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'
 })
 </script>
@@ -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;