src/views/OperationalOverview/AGVBoard.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zhp
- * @LastEditTime: 2024-03-27 10:25:15
+ * @LastEditTime: 2024-03-27 15:42:39
  * @Description:
 -->
 <template>
@@ -16,7 +16,7 @@
       许昌安彩AGV原片周转看板
       <h3 class="unit">单位：河南汇融数字科技有限公司</h3>
       <h3 class="time">{{ times }}</h3>
-      <!-- <el-button
+      <el-button
         type="text"
         class="title-button"
         :style="{ right: 33 + 'px', top: 37 + 'px' }"
@@ -24,7 +24,7 @@
       >
         <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
         <svg-icon v-else icon-class="fullScreenView" />
-      </el-button> -->
+      </el-button>
     </el-row>
     <el-row class="container-main flex-col" type="flex">
       <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15 * beilv" type="flex" class="flex-1">
@@ -383,18 +383,18 @@ export default {
       this.isFullScreen = screenfull.isFullscreen
     },
     init() {
-      if (screenfull.enabled) {
+      if (screenfull.isEnabled) {
         screenfull.on('change', this.change)
       }
     },
     destroy() {
-      if (screenfull.enabled) {
+      if (screenfull.isEnabled) {
         screenfull.off('change', this.change)
       }
     },
     changeFullScreen() {
       console.log(this.beilv);
-      if (!screenfull.enabled) {
+      if (!screenfull.isEnabled) {
         this.$message({
           message: 'you browser can not work',
           type: 'warning'
@@ -421,16 +421,16 @@ export default {
   // opacity: .8;
   .container-title {
     width: 100%;
-    background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
+    background: url('../../assets/img/OperationalOverview/AGV.png') no-repeat;
     background-size: 100% 100%;
     color: #00fff0;
     text-align: center;
     letter-spacing: 8px;
-    word-spacing: 8px;
+    // word-spacing: 8px;
     position: relative;
     .unit{
       position: absolute;
-      left: 290px;
+      left: 240px;
       top:25px;
       color: rgba($color: #ffffff, $alpha: 8);
       font-size: 20px;
@@ -438,7 +438,7 @@ export default {
     }
     .time{
       position: absolute;
-      left: 1360px;
+      left: 1400px;
       top:25px;
       color: rgba($color: #ffffff, $alpha: 8);
       font-size: 20px;

src/views/OperationalOverview/coldBoard.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-01-29 16:50:26
- * @LastEditTime: 2024-03-27 10:58:39
+ * @LastEditTime: 2024-03-27 17:02:27
  * @LastEditors: zhp
  * @Description:
 -->
@@ -17,15 +17,11 @@
       许昌安彩冷端看板
       <h3 class="unit">单位：河南汇融数字科技有限公司</h3>
       <h3 class="time">{{ times }}</h3>
-      <!-- <el-button
+      <el-button type="text" class="title-button" :style="{ right: 33 + 'px', top: 37 + 'px' }"
-        type="text"
+        @click="changeFullScreen">
-        class="title-button"
-        :style="{ right: 33 + 'px', top: 37 + 'px' }"
-        @click="changeFullScreen"
-      >
         <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
         <svg-icon v-else icon-class="fullScreenView" />
-      </el-button> -->
+      </el-button>
     </el-row>
     <el-row class="container-main flex-col" type="flex">
       <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
@@ -68,8 +64,19 @@
             </div> -->
             <!-- <el-row :gutter="9"> -->
             <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> -->
-            <pile-bar-chart ref="pileChart" :name-list="EnergyMonitoringNameList" :data-list="EnergyMonitoringList"
+            <pile-bar-chart style="margin-bottom: -15px" ref="firstPileChart" :height="90" />
-              :height="359" />
+            <second-pile-bar-chart style="margin-bottom: -15px" id=" 'second' " ref="secondPileChart" :height="90" />
+            <third-pile-bar-chart style="margin-bottom: -15px" id=" 'third' " ref="thirdPileChart" :height="90" />
+            <fourth-pile-bar-chart style="margin-bottom: -15px" id=" 'fourth' " ref="fourthPileChart" :height="90" />
+            <fifth-pile-bar-chart style="margin-bottom: -15px" id=" 'fifth' " ref="fifthPileChart" :height="100" />
+            <!-- <pile-bar-chart ref="secondPileChart"
+              :height="90" />
+            <pile-bar-chart ref="thirdPileChart"
+              :height="90" />
+            <pile-bar-chart ref="fourthPileChart"
+              :height="90" />
+            <pile-bar-chart ref="fifthPileChart"
+              :height="90" /> -->
             <!-- </el-col> -->
             <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
                 <base-table3
@@ -136,6 +143,11 @@ import baseContainer from './components/baseContainer'
 import baseTable1 from './components/baseTable'
 import screenfull from 'screenfull'
 import pileBarChart from './components/pileBarChart'
+import secondPileBarChart from './components/pileBarChart'
+import thirdPileBarChart from './components/pileBarChart'
+import fourthPileBarChart from './components/pileBarChart'
+import fifthPileBarChart from './components/pileBarChart'
+
 import colorDiv from './components/colorDiv'
 import moment from "moment";
 import doubleYChart from './components/coldDoubleYChart'
@@ -152,7 +164,11 @@ export default {
     pileBarChart,
     doubleYChart,
     LinearBarChart,
-    ISRAChart
+    ISRAChart,
+    secondPileBarChart,
+    thirdPileBarChart ,
+    fourthPileBarChart,
+   fifthPileBarChart ,
   },
   data() {
     return {
@@ -256,6 +272,13 @@ export default {
   },
 
   watch: {
+    isFullScreen: function (val) {
+      if (val) {
+        this.beilv = document.body.offsetWidth / 1920
+      } else {
+        this.beilv = document.getElementById('container').offsetWidth / 1920
+      }
+    },
     clientWidth(val) {
       if (!this.timer) {
         this.clientWidth = val
@@ -287,21 +310,92 @@ export default {
     }
   },
   mounted() {
-    console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss'));
+    // let nameList = []
+    // let nameWasteList = []
+    // let topNameList = []
+    // let productList = []
+    // let wasteList = []
+    // // let sumAreaList = []
+    // // let yieldList = []
+    // // this.cutTableDataList =
+    // let coldDetData = [
+    //   {
+    //     "first": 0.8834,
+    //     "lineName": "Y61",
+    //     "product": 0.8834,
+    //     "productArea": 35069.28,
+    //     "second": 0,
+    //     'sumArea': 38400,
+    //     'wastArea': 3330.72,
+    //     "waste": 0.1166
+    //   },
+    //   {
+    //     "first": 0.847,
+    //     "lineName": "Y62",
+    //     "product": 0.847,
+    //     "productArea": 26765.46,
+    //     "second": 0,
+    //     'sumArea': 1111111,
+    //     'wastArea': 22222,
+    //     "waste": 0.153
+    //   },
+    //   {
+    //     "first": 0.8668,
+    //     "lineName": "Y63",
+    //     "product": 0.8668,
+    //     "productArea": 26448.46,
+    //     "second": 0,
+    //     'sumArea': 1111111,
+    //     'wastArea': 22222,
+    //     "waste": 0.1332
+    //   },
+    //   {
+    //     "first": 0.9064,
+    //     "lineName": "Y64",
+    //     "product": 0.9064,
+    //     "productArea": 26667.32,
+    //     "second": 0,
+    //     'sumArea': 1111111,
+    //     'wastArea': 22222,
+    //     "waste": 0.0936
+    //   },
+    //   {
+    //     "first": 0.8838,
+    //     "lineName": "Y65",
+    //     "product": 0.8838,
+    //     "productArea": 26554.32,
+    //     "second": 0,
+    //     'sumArea': 1111111,
+    //     'wastArea': 22222,
+    //     "waste": 0.1162
+    //   }
+    // ]
+    // coldDetData.forEach((ele, index) => {
+    //   nameList.push(ele.lineName)
+    //   topNameList.push('产线: ' + ele.lineName + '   ' + '总面积:' + ele.sumArea)
+    //   productList.push(ele.productArea)
+    //   wasteList.push(ele.wastArea)
+    //   nameWasteList.push('缺陷面积:' + ele.wastArea)
+    //   // sumAreaList.push(ele.sumArea)
+    //   // yieldList.push((ele.yield * 100).toFixed(3))
+    // })
+    // this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
+    // this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]])
+    // this.$refs.thirdPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
+    // this.$refs.fourthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
+    // this.$refs.fifthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
+
+    // this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
+    this.getTimes()
+    // console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss'));
     this.funInitWebSocket()
-    // if (num > 0) {
       if (!this.wsIsOpen) {
         getDcsMsg()
         this.wsIsOpen = true
         console.log('开启websocket==========')
       }
-    // } else {
-
-    // }
     this.CutInitWebSocket()
     this.SJGInitWebSocket()
-    // this.getList()
-    this.getTimes()
     const _this = this;
     _this.beilv2 = document.documentElement.clientWidth / 1920
     window.onresize = () => {
@@ -453,7 +547,11 @@ export default {
             sumAreaList.push(ele.sumArea)
             yieldList.push((ele.yield * 100).toFixed(3))
           })
-          this.$refs.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList)
+          this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
+          this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]])
+          this.$refs.thirdPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
+          this.$refs.fourthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
+          this.$refs.fifthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
           this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
         }
       };
@@ -674,21 +772,22 @@ export default {
       this.beilv2 = this.clientWidth / 1920
     },
     change() {
+      console.log(this.isFullScreen);
       this.isFullScreen = screenfull.isFullscreen
     },
     init() {
-      if (screenfull.enabled) {
+      if (screenfull.isEnabled) {
         screenfull.on('change', this.change)
       }
     },
     destroy() {
-      if (screenfull.enabled) {
+      if (screenfull.isEnabled) {
         screenfull.off('change', this.change)
       }
     },
     changeFullScreen() {
       this.containerWidth = 223223223
-      if (!screenfull.enabled) {
+      if (!screenfull.isEnabled) {
         this.$message({
           message: 'you browser can not work',
           type: 'warning'

src/views/OperationalOverview/components/doubleYChart .vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-09-21 09:06:28
- * @LastEditTime: 2024-03-26 16:16:50
+ * @LastEditTime: 2024-03-27 14:37:35
  * @LastEditors: zhp
  * @Description:
 -->
@@ -147,72 +147,40 @@ export default {
       ]
       // const colors = ['#5470C6', '#91CC75', '#EE6666']
       this.chart = echarts.init(document.getElementById(this.id))
-      this.chart.setOption({
+      if (!nameList && !passRateList && !outputNumList) {
-        // color: colors,
+        // 隐藏echarts图表
-        tooltip: {
+        this.chart.clear(); // 清空图表
-          trigger: 'axis',
+        this.chart.setOption({ // 设置空的option
-          axisPointer: {
+          title: {
-            type: 'cross'
+            show: false
-          }
+          },
-        },
+          series: []
-        grid: { top: 90, right: 60, bottom: 20, left: 90 },
+        });
-        legend: {
+      } else {
-          itemWidth: 10,
+        // 显示echarts图表
-          itemHeight: 10,
+        this.chart.setOption({
-          top: '0%',
+          // color: colors,
-          right: '20px',
+          tooltip: {
-          data: ['产线产量', '产线良品率'],
+            trigger: 'axis',
-          textStyle: {
+            axisPointer: {
-            fontSize: 12 * this.beilv,
+              type: 'cross'
-            color: '#ced1d5'
-          }
-        },
-        xAxis: {
-          type: 'category',
-          axisLine: {
-            lineStyle: {
-              type: 'solid',
-              color: '#25528f',
-              width: '1' // 坐标线的宽度
             }
           },
-          axisLabel: {
+          grid: { top: 90, right: 60, bottom: 20, left: 90, containLabel: true },
-            color: "#fff",
+          legend: {
-            fontSize: 12,
+            itemWidth: 10,
-            // formatter: '{value}'
+            itemHeight: 10,
-            // textStyle: {
+            top: '0%',
-            //   color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
+            right: '20px',
-            // }
+            data: ['产线产量', '产线良品率'],
-          },
+            textStyle: {
-          splitLine: {
+              fontSize: 12 * this.beilv,
-            lineStyle: {
+              color: '#ced1d5'
-              color: '#25528f'
             }
           },
-          data: nameList
+          xAxis: {
-        },
+            type: 'category',
-        // yAxis: {
-
-        // },
-        yAxis: [
-          {
-            // min: function() { // 取最小值向下取整为最小刻度
-            //   return 0
-            // },
-            // max: function(value) { // 取最大值向上取整为最大刻度
-            //   return Math.ceil(value.max)
-            // },
-            scale: true,
-            type: 'value',
-            name: '良品率/%',
-            nameTextStyle: {// y轴上方单位的颜色
-              color: '#fff',
-              align: "left",
-            },
-            position: 'right',
-            alignTicks: true,
             axisLine: {
-              show: true,
               lineStyle: {
                 type: 'solid',
                 color: '#25528f',
@@ -223,72 +191,118 @@ export default {
               color: "#fff",
               fontSize: 12,
               // formatter: '{value}'
-              formatter: '{value}%'
-              // }
-            },
-            splitLine: {
-              lineStyle: {
-                color: '#25528f'
-              }
-            }
-            // type: 'value'
-            // axisLine: {
-            //   show: true,
-            //   lineStyle: {
-            //     color: colors[0]
-            //   }
-            // },
-          },
-          {
-            // min: function() { // 取最小值向下取整为最小刻度
-            //   return 0
-            // },
-            // max: function(value) { // 取最大值向上取整为最大刻度
-            //   return Math.ceil(value.max)
-            // },
-            scale: true,
-            type: 'value',
-            name: '产量/片', // y轴上方的单位
-            nameTextStyle: {
-              color: "#fff",
-              // fontSize: 10,
-              align: "right",
-            },
-            // position: 'left',
-            alignTicks: true,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                type: 'solid',
-                color: '#25528f', // 左边线的颜色
-                width: '1' // 坐标线的宽度
-              }
-            },
-            axisLabel: {
               // textStyle: {
-              // color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+              //   color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
-              color: "#fff",
-              fontSize: 12,
-              // formatter: '{value}'
-              formatter: '{value} 片'
               // }
             },
             splitLine: {
               lineStyle: {
                 color: '#25528f'
               }
+            },
+            data: nameList
+          },
+          // yAxis: {
+
+          // },
+          yAxis: [
+            {
+              // min: function() { // 取最小值向下取整为最小刻度
+              //   return 0
+              // },
+              // max: function(value) { // 取最大值向上取整为最大刻度
+              //   return Math.ceil(value.max)
+              // },
+              scale: true,
+              type: 'value',
+              name: '良品率/%',
+              nameTextStyle: {// y轴上方单位的颜色
+                color: '#fff',
+                align: "left",
+              },
+              position: 'right',
+              alignTicks: true,
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  // type: 'solid',
+                  color: '#25528f',
+                  // width: '1' // 坐标线的宽度
+                }
+              },
+              axisLabel: {
+                color: "#fff",
+                fontSize: 12,
+                // formatter: '{value}'
+                formatter: '{value}%'
+                // }
+              },
+              splitLine: {
+                lineStyle: {
+                  color: '#25528f'
+                }
+              }
+              // type: 'value'
+              // axisLine: {
+              //   show: true,
+              //   lineStyle: {
+              //     color: colors[0]
+              //   }
+              // },
+            },
+            {
+              // min: function() { // 取最小值向下取整为最小刻度
+              //   return 0
+              // },
+              // max: function(value) { // 取最大值向上取整为最大刻度
+              //   return Math.ceil(value.max)
+              // },
+              scale: true,
+              type: 'value',
+              name: '产量/片', // y轴上方的单位
+              nameTextStyle: {
+                color: "#fff",
+                // fontSize: 10,
+                align: "right",
+              },
+              // position: 'left',
+              alignTicks: true,
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  // type: 'solid',
+                  color: '#25528f', // 左边线的颜色
+                  // width: '1' // 坐标线的宽度
+                }
+              },
+              axisLabel: {
+                // textStyle: {
+                // color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+                color: "#fff",
+                // show: true,
+                lineStyle: {
+                  color: "#25528f",
+                },
+                // }
+              },
+              splitLine: {
+                lineStyle: {
+                  color: '#25528f'
+                }
+              }
+              // type: 'value'
+              // axisLine: {
+              //   show: true,
+              //   lineStyle: {
+              //     color: colors[1]
+              //   }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8
+              // },
             }
-            // type: 'value'
+          ],
-            // axisLine: {
+          series: series
-            //   show: true,
+        })
-            //   lineStyle: {
+      }
-            //     color: colors[1]
+
-            //   }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8
-            // },
-          }
-        ],
-        series: series
-      })
     }
   }
 }

src/views/OperationalOverview/components/linearBarChart.vue

@@ -87,8 +87,17 @@ export default {
       // console.log('1111', dataList);
       // console.log(1)
       this.chart = echarts.init(document.getElementById(this.id))
-      // if (dataList.length !== 0) {
+      if (!nameList && !dataList) {
-        // this.$set(this.series, "data", dataList);
+        // 隐藏echarts图表
+        this.chart.clear(); // 清空图表
+        this.chart.setOption({ // 设置空的option
+          title: {
+            show: false
+          },
+          series: []
+        });
+      } else {
+        // 显示echarts图表
         this.series = [{
           type: 'bar',
           data: dataList,
@@ -111,90 +120,94 @@ export default {
           },
           barWidth: 12,
         }]
-      // }
+        // }
-      // if (nameList.length !== 0) {
+        // if (nameList.length !== 0) {
         this.nameList = nameList
-      // }
+        // }
-      this.chart.setOption({
+        this.chart.setOption({
-        tooltip: {
+          tooltip: {
-          trigger: 'axis',
+            trigger: 'axis',
-          axisPointer: {
+            axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
+              // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        grid: { top: 90, right: 60, bottom: 20, left: 90 },
-        // legend: {
-        //   itemWidth: 10,
-        //   itemHeight: 10,
-        //   // right: '20px',
-        //   data: nameList,
-        //   textStyle: {
-        //     fontSize: 12 * this.beilv,
-        //     color: '#ced1d5'
-        //   }
-        // },
-        xAxis: {
-          type: 'category',
-          axisLine: {
-            lineStyle: {
-              type: 'solid',
-              color: '#25528f', // 左边线的颜色
-              width: '1' // 坐标线的宽度
             }
           },
-          axisLabel: {
+          grid: { top: 90, right: 60, bottom: 20, left: 90, containLabel: true },
-            color: "#fff",
+          // legend: {
-            fontSize: 12,
+          //   itemWidth: 10,
-            // formatter: '{value}'
+          //   itemHeight: 10,
+          //   // right: '20px',
+          //   data: nameList,
+          //   textStyle: {
+          //     fontSize: 12 * this.beilv,
+          //     color: '#ced1d5'
+          //   }
+          // },
+          xAxis: {
+            type: 'category',
+            axisLine: {
+              lineStyle: {
+                type: 'solid',
+                color: '#25528f', // 左边线的颜色
+                width: '1' // 坐标线的宽度
+              }
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 12,
+              // formatter: '{value}'
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#25528f'
+              }
+            },
+            data: this.nameList
           },
-          splitLine: {
+          yAxis: {
-            lineStyle: {
+            name: '单位kwh',
-              color: '#25528f'
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 10,
+              align: 'right',
+            },
+            type: 'value',
+            axisLabel: {
+              color: "#fff",
+              fontSize: 12,
+              // formatter: '{value}/kwh'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#25528f",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#25528f",
+              },
             }
           },
-          data: this.nameList
+          // legend: {
-        },
+          //   itemHeight: 10,
-        yAxis: {
+          //   itemWidth: 10,
-          name: '单位kwh',
+          //   x: 'center', // 可设定图例在左、右、居中
-          nameTextStyle: {
+          //   y: 'top', // 可设定图例在上、下、居中
-            color: '#fff',
+          //   show: this.showLegend,
-            fontSize: 10,
+          //   data: this.dataList,
-            align: 'right',
+          //   right: '1%',
-          },
+          //   textStyle: {
-          type: 'value',
+          //     fontSize: 12 * this.beilv,
-          axisLabel: {
+          //     color: '#ced1d5'
-            color: "#fff",
+          //   }
-            fontSize: 12,
+          // },
-            // formatter: '{value}/kwh'
+          series: this.series
-          },
+        })
-          axisLine: {
+      }
-            show: true,
+      // if (dataList.length !== 0) {
-            lineStyle: {
+        // this.$set(this.series, "data", dataList);
-              color: "#25528f",
+
-            },
-          },
-          splitLine: {
-            lineStyle: {
-              color: "#25528f",
-            },
-          }
-        },
-        // legend: {
-        //   itemHeight: 10,
-        //   itemWidth: 10,
-        //   x: 'center', // 可设定图例在左、右、居中
-        //   y: 'top', // 可设定图例在上、下、居中
-        //   show: this.showLegend,
-        //   data: this.dataList,
-        //   right: '1%',
-        //   textStyle: {
-        //     fontSize: 12 * this.beilv,
-        //     color: '#ced1d5'
-        //   }
-        // },
-        series: this.series
-      })
     }
   }
 }

src/views/OperationalOverview/components/pileBarChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-12-27 13:54:52
- * @LastEditTime: 2024-03-26 10:50:30
+ * @LastEditTime: 2024-03-27 16:50:04
  * @LastEditors: zhp
  * @Description:
 -->
@@ -42,7 +42,7 @@ export default {
     },
     height: {
       type: Number,
-      default: 200
+      default: 100
     },
     showLegend: {
       type: Boolean,
@@ -127,23 +127,31 @@ export default {
           ) : []
         };
       });
+      // this.charts.resize({
+      //   //width: width,
+      //   //height: height,
+      //   // es6解构
+      //   width,
+      //   height
+      // })
       this.chart.setOption({
         legend: {
           itemWidth: 12,
           itemHeight: 12,
-          top:'10',
+          bottom: '20',
+          left: '20',
           icon: 'rect',
           textStyle: {
             color: '#ffffff'
           }
         },
         grid: {
-          top:'80',
+          top:'0',
           left: '3%',
           right: '4%',
           // bottom: '3%',
           width: 'auto',
-          height: '300',
+          height: '95',
           containLabel: true
         },
         yAxis: [
@@ -170,7 +178,7 @@ export default {
                 verticalAlign: 'bottom',
                 fontSize: 12,
                 align: 'left',
-                padding: [0, 0, 15, -5]
+                padding: [0, 0, 10, -5]
               }
             },
             data: topNameList
@@ -198,7 +206,7 @@ export default {
                 verticalAlign: 'bottom',
                 fontSize: 12,
                 align: 'right',
-                padding: [0, 0, 15, -5]
+                padding: [0, 0, 10, -5]
               }
             },
             data: nameWasteList
@@ -210,6 +218,10 @@ export default {
         },
         series:series
       })
+      this.chart.resize({
+        width: 'auto',
+        height: 90
+      });;
     }
   }
 }

src/views/OperationalOverview/processingBoard.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zhp
- * @LastEditTime: 2024-03-27 11:08:13
+ * @LastEditTime: 2024-03-27 16:13:14
  * @Description:
 -->
 <template>
@@ -16,6 +16,11 @@
       许昌安彩深加工看板
       <h3 class="unit">单位：河南汇融数字科技有限公司</h3>
       <h3 class="time">{{ times }}</h3>
+      <el-button type="text" class="title-button" :style="{ right: 33 + 'px', top: 37 + 'px' }"
+        @click="changeFullScreen">
+        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
+        <svg-icon v-else icon-class="fullScreenView" />
+      </el-button>
     </el-row>
     <el-row class="container-main flex-col" type="flex">
       <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%;">
@@ -39,7 +44,7 @@
                 <!-- <el-col :span="12"> -->
                 <p class="now-secondary-title">{{ op.name }}</p>
                 <el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white"
-                  :percentage="op.progressRate * 100" class="custom-progress-bar" />
+                  :percentage="op.progressRate" class="custom-progress-bar" />
               </el-row>
             </div>
             <!-- </div> -->
@@ -271,6 +276,52 @@ export default {
     this.SJGWebsocketClose()
   },
   mounted() {
+    let detData = [
+      {
+        id:'1',
+        name: '测试工单',
+        progressRate:0.933333
+      },
+      {
+        id: '2',
+        name: '测试工单2',
+        progressRate: 0.932323
+      }, {
+        id: '3',
+        name: '测试工单3',
+        progressRate: 0.23232
+      }, {
+        id: '4',
+        name: '测试工单4',
+        progressRate: 0.32323
+      }, {
+        id: '5',
+        name: '测试工单',
+        progressRate: 0.5555
+      }, {
+        id: '6',
+        name: '测试工单',
+        progressRate: 0.66564
+      },
+    ]
+    this.orderList = detData.map((ele, index) => {
+      if (ele.progressRate && ele.progressRate != 1) {
+        return {
+          id: ele.id,
+          name: ele.name,
+          progressRate: parseFloat((ele.progressRate * 100).toFixed(3))
+        }
+      }
+    });
+    let EnergyNameList = ['Y61', 'Y62', 'Y63', 'Y64', 'Y65',]
+    this.EnergyMonitoringNameList = EnergyNameList
+    let EnergyDataList = [1, 2, 3, 4, 5]
+    // this.wsData.data.forEach((ele) => {
+    //   EnergyDataList.push(ele.useQuantity)
+    // })
+    this.EnergyMonitoringList = EnergyDataList
+    // console.log(EnergyDataList)
+    this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
     let eqArr = this.qualityYearList.map((item, index) => [
       `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
             </span>`,
@@ -452,7 +503,7 @@ export default {
               return {
                 id: ele.id,
                 name: ele.name,
-                progressRate: ele.progressRate.toFixed(3)
+                progressRate: parseFloat((ele.progressRate * 100).toFixed(3))
               }
             }
           });
@@ -616,18 +667,18 @@ export default {
       this.isFullScreen = screenfull.isFullscreen
     },
     init() {
-      if (screenfull.enabled) {
+      if (screenfull.isEnabled) {
         screenfull.on('change', this.change)
       }
     },
     destroy() {
-      if (screenfull.enabled) {
+      if (screenfull.isEnabled) {
         screenfull.off('change', this.change)
       }
     },
     changeFullScreen() {
       this.containerWidth = 223223223
-      if (!screenfull.enabled) {
+      if (!screenfull.isEnabled) {
         this.$message({
           message: 'you browser can not work',
           type: 'warning'