展会大屏update

机械分厂设备饼图颜色修改

src/store/module/MicroExhibition.ts

@@ -72,13 +72,24 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
     },
     setcaijian(data) {
 
-      data.chart.series = data.chart.series.map((item) => {
+      data.chart.series = data.chart.series.map((item, index) => {
         item.type = 'bar'
         item.barMaxWidth = 30
         item.label = {
           show: true,
-          position: 'top'
+          position: 'top',
+          formatter: function (params) {
+            let unit = '';
+            if (params.name == '1190269') {
+              unit = '件'
+            } else if(params.name == '1050910'){
+              unit = '米'
+            }
+            return  params.value + unit;
+          }
         }
+
+
         return item
       })
       this.caijian = data;
@@ -90,7 +101,8 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
         item.barMaxWidth = 45
         item.label = {
           show: true,
-          position: 'top'
+          position: 'top',
+          formatter: '{c}只'
         }
         return item
       })
@@ -106,7 +118,17 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
         item.barMaxWidth = 30
         item.label = {
           show: true,
-          position: 'top'
+          position: 'top',
+          formatter: function (params) {
+            let unit = '';
+            let arr = ['RP2011001#', 'RP2011157', '10102109', '10102154']
+            if (arr.includes(params.name)) {
+              unit = '片'
+            } else if(params.name == '1021629'){
+              unit = '米'
+            }
+            return  params.value + unit;
+          }
         }
         return item
       })
@@ -122,7 +144,8 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
         item.barMaxWidth = 30
         item.label = {
           show: true,
-          position: 'top'
+          position: 'top',          
+          formatter: '{c}版'
         }
         return item
       })
@@ -139,7 +162,8 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
         item.barMaxWidth = 30
         item.label = {
           show: true,
-          position: 'top'
+          position: 'top',
+          formatter: '{c}件'
         }
         return item
       })

src/views/Mechanics/components/ringChart.vue

@@ -45,6 +45,7 @@ const init = () => {
                 fontSize: 16,
             },
         },
+        color:['#7CFFB2','#4D9BFF'],
         series: [
             {
                 name: "",

src/views/MicroExhibition/components/BarChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, getCurrentInstance, onMounted,watch } from 'vue'
+import { ref, getCurrentInstance, onMounted, watch } from 'vue'
 
 
 const prop = defineProps({
@@ -13,7 +13,7 @@ const prop = defineProps({
     },
     seriesData: {
         type: Array,
-        default: [        ]
+        default: []
     }
 })
 
@@ -28,7 +28,7 @@ const setCharts = () => {
         // },
         backgroundColor: '#0E0E0E',
         legend: {
-            data: ['计划完成','实际完成'],
+            data: ['计划完成', '实际完成'],
         },
         grid:{
             left:'40',
@@ -43,21 +43,27 @@ const setCharts = () => {
             //     rotate: 45, //倾斜角度
             // },
         },
-        yAxis: {
+        yAxis: [
-            type: 'value'
+            {
-        },
+                type: 'value',
+                name: '日产量',
+                // axisLabel: {
+                //     formatter: '{value}%'
+                // }
+            }
+        ],
         series: prop.seriesData
     };
 
     charts.setOption(option);
 }
 
-watch(()=>prop.seriesData, (newVal, oldVal) => {
+watch(() => prop.seriesData, (newVal, oldVal) => {
     charts.setOption({
         series: newVal
     });
-},{deep:true})
+}, { deep: true })
-watch(()=>prop.xData, (newVal, oldVal) => {
+watch(() => prop.xData, (newVal, oldVal) => {
     charts.setOption({
 
         xAxis: {
@@ -69,7 +75,7 @@ watch(()=>prop.xData, (newVal, oldVal) => {
             // },
         },
     });
-},{deep:true})
+}, { deep: true })
 onMounted(() => {
     setCharts()
 })

src/views/MicroExhibition/components/BoardBar.vue

@@ -36,8 +36,8 @@ const prop = defineProps({
         default: [        ]
     }
 })
-let header = ['序号', '设备名称', '设备编码', '稼动率', '状态']
+let header = ['序号', '设备名称', '设备编码','完成率', '稼动率', '状态']
-let columnWidth = [90, 290, 140, 120, 120];
+let columnWidth = [90, 290, 140, 120, 120,100];
 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, 140, 120, 120],
+    columnWidth: [80, 290, 140, 120, 120,100],
     align: ['center', 'center', 'center', 'center', 'center', 'center'],
     rowNum: 2,
     waitTime: 3000,

src/views/MicroExhibition/index.vue

@@ -124,8 +124,8 @@ let ringData = computed(() => {
     ]
 })
 let timer = null
-let dev_caijian_title = ['设备名称', '设备编码', '稼动率', '状态']
+let dev_caijian_title = ['设备名称', '设备编码','完成率', '稼动率', '状态']
-let dev_tuoxie_title = ['设备编码', '稼动率', '状态']
+let dev_tuoxie_title = ['设备编码','完成率', '稼动率', '状态']
 let dev_value = [
     ['全自动针梭两用铺布机', '待机', '40层', '1'],
     ['全自动9公分电脑裁床', '待机', '40层', '0'],