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,6 +147,17 @@ export default {
       ]
       // const colors = ['#5470C6', '#91CC75', '#EE6666']
       this.chart = echarts.init(document.getElementById(this.id))
+      if (!nameList && !passRateList && !outputNumList) {
+        // 隐藏echarts图表
+        this.chart.clear(); // 清空图表
+        this.chart.setOption({ // 设置空的option
+          title: {
+            show: false
+          },
+          series: []
+        });
+      } else {
+        // 显示echarts图表
         this.chart.setOption({
           // color: colors,
           tooltip: {
@@ -155,7 +166,7 @@ export default {
               type: 'cross'
             }
           },
-        grid: { top: 90, right: 60, bottom: 20, left: 90 },
+          grid: { top: 90, right: 60, bottom: 20, left: 90, containLabel: true },
           legend: {
             itemWidth: 10,
             itemHeight: 10,
@@ -214,9 +225,9 @@ export default {
               axisLine: {
                 show: true,
                 lineStyle: {
-                type: 'solid',
+                  // type: 'solid',
                   color: '#25528f',
-                width: '1' // 坐标线的宽度
+                  // width: '1' // 坐标线的宽度
                 }
               },
               axisLabel: {
@@ -259,18 +270,19 @@ export default {
               axisLine: {
                 show: true,
                 lineStyle: {
-                type: 'solid',
+                  // type: 'solid',
                   color: '#25528f', // 左边线的颜色
-                width: '1' // 坐标线的宽度
+                  // width: '1' // 坐标线的宽度
                 }
               },
               axisLabel: {
                 // textStyle: {
                 // color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
                 color: "#fff",
-              fontSize: 12,
+                // show: true,
-              // formatter: '{value}'
+                lineStyle: {
-              formatter: '{value} 片'
+                  color: "#25528f",
+                },
                 // }
               },
               splitLine: {
@@ -290,6 +302,8 @@ export default {
           series: series
         })
       }
+
+    }
   }
 }
 </script>

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,
@@ -123,7 +132,7 @@ export default {
               type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
             }
           },
-        grid: { top: 90, right: 60, bottom: 20, left: 90 },
+          grid: { top: 90, right: 60, bottom: 20, left: 90, containLabel: true },
           // legend: {
           //   itemWidth: 10,
           //   itemHeight: 10,
@@ -196,6 +205,10 @@ export default {
           series: this.series
         })
       }
+      // if (dataList.length !== 0) {
+        // this.$set(this.series, "data", dataList);
+
+    }
   }
 }
 </script>

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'