Merge pull request 'projects/mesxc-zhp' (#162) from projects/mesxc-zhp into projects/mesxc-test

Reviewed-on: #162

.env.dev

@@ -1,7 +1,7 @@
 ###
  # @Author: Do not edit
  # @Date: 2023-08-29 09:40:39
- # @LastEditTime: 2023-12-18 13:35:00
+ # @LastEditTime: 2023-12-29 08:57:36
  # @LastEditors: zhp
  # @Description:
 ###
@@ -19,7 +19,7 @@ VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 # VUE_APP_BASE_API = 'http://192.168.1.49:48082'
 # VUE_APP_BASE_API = 'http://192.168.1.8:48082'
 # VUE_APP_BASE_API = 'http://192.168.4.159:48080'
-# VUE_APP_BASE_API = 'http://192.168.1.56:48082'
+# VUE_APP_BASE_API = 'http://192.168.1.104:48082'
 # VUE_APP_BASE_API = 'http://192.168.1.62:48082'
 # VUE_APP_BASE_API = 'http://192.168.1.78:48082'
 

src/assets/icons/svg/energyMonitoring.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>能源监控</title>
+    <g id="mes-看板/驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="冷端看板" transform="translate(-685.000000, -149.000000)" fill-rule="nonzero">
+            <g id="编组-26备份-4" transform="translate(661.000000, 127.000000)">
+                <g id="能源监控" transform="translate(24.000000, 22.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                    <path d="M5.56606392,22 L5.56606392,8.69394435 C5.56606392,8.16339333 5.15113542,7.75513729 4.65294365,7.75513729 L1.91312026,7.75513729 C1.41539106,7.75513729 1,8.20385524 1,8.69394435 L1,22 L5.56606392,22 L5.56606392,22 Z M11.3773759,22 L11.3773759,2.97972358 C11.3773759,2.44871795 10.9624474,2 10.4642557,2 L7.72443229,2 C7.22624054,2 6.81131201,2.44871795 6.81131201,2.97972358 L6.81131201,22 L11.3773759,22 Z M17.188688,22 L17.188688,13.591653 C17.188688,13.061102 16.7737595,12.6123841 16.2755677,12.6123841 L13.5362069,12.6123841 C13.0380151,12.6123841 12.622624,13.061102 12.622624,13.591653 L12.622624,22 L17.188688,22 Z M23,22 L23,8.69394435 C23,8.16339333 22.5850715,7.75513729 22.0868797,7.75513729 L19.3470564,7.75513729 C18.8493272,7.75513729 18.4339361,8.20385524 18.4339361,8.69394435 L18.4339361,22 L23,22 L23,22 Z" id="形状" fill="#59D0E2"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/eqAlarm.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>报警</title>
+    <g id="新增看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="深加工看板" transform="translate(-64.000000, -149.000000)" fill-rule="nonzero">
+            <g id="编组-26" transform="translate(40.000000, 127.000000)">
+                <g id="报警" transform="translate(24.000000, 22.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                    <path d="M20.7657338,18.1387399 L13.9284614,22.3462921 C13.4025174,22.6969215 12.8765734,22.3462921 12.8765734,21.6450334 L12.8765734,11.8274116 C12.8765734,11.6520969 13.0518881,11.3014676 13.2272027,11.1261529 L20.0644751,6.91860067 C20.5904191,6.56797132 21.1163631,6.91860067 21.1163631,7.61985938 L21.1163631,17.6127959 C21.1163631,17.7881106 20.9410485,18.1387399 20.7657338,18.1387399 Z M3.23426622,18.1387399 L10.0715386,22.3462921 C10.5974826,22.6969215 11.1234266,22.3462921 11.1234266,21.6450334 L11.1234266,11.8274116 C11.1234266,11.6520969 10.9481119,11.3014676 10.7727973,11.1261529 L3.93552492,6.91860067 C3.58489557,6.743286 2.88363686,7.09391535 2.88363686,7.61985938 L2.88363686,17.6127959 C2.88363686,17.7881106 3.05895154,18.1387399 3.23426622,18.1387399 Z M11.8246853,1.48384573 L3.93552492,4.46419521 C3.58489557,4.63950989 3.58489557,5.16545392 3.93552492,5.34076859 L11.8246853,10.2495795 C12,10.2495795 12.1753147,10.2495795 12.1753147,10.2495795 L20.2397898,5.34076859 C20.5904191,5.16545392 20.5904191,4.63950989 20.2397898,4.46419521 L12.1753147,1.48384573 C12,1.48384573 12,1.48384573 11.8246853,1.48384573 Z" id="形状" fill="#59D0E2"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/eqMonitoring.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="19.7127155px" height="19.7127155px" viewBox="0 0 19.7127155 19.7127155" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>设备监控</title>
+    <g id="mes-看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="深加工看板" transform="translate(-1309.143642, -151.143642)">
+            <g id="编组-26备份-4" transform="translate(1283.000000, 127.000000)">
+                <g id="设备监控" transform="translate(24.000000, 22.000000)">
+                    <rect id="矩形" x="0" y="0" width="24" height="24"></rect>
+                    <g id="异常" transform="translate(2.143642, 2.143642)" fill-rule="nonzero">
+                        <rect id="矩形" fill="#000000" opacity="0" x="0.856357767" y="0.856357767" width="17" height="17"></rect>
+                        <path d="M9.85640228,0.000116285784 C7.94997171,-0.0106702658 6.11587607,0.729338602 4.75082135,2.0602014 C3.41793975,3.37801839 2.66584368,5.173105 2.66128994,7.04744966 L2.66128994,16.6671387 L16.9726637,16.6671387 L16.9726637,7.04743041 C16.9710126,5.1705386 16.2144177,3.37320892 14.8732566,2.06018215 C13.5319151,0.748116476 11.7327241,0.00936885323 9.85638303,0.000116285784 L9.85640228,0.000116285784 Z M9.26502002,14.3607842 L9.05803623,9.69875531 L5.52947465,9.69875531 L10.1619113,3.85402838 L10.5561661,7.61911494 L13.9073323,7.73739052 L9.22555602,14.3607842 L9.26502002,14.3607842 Z M4.37471863e-05,18.6383791 C-0.00254075641,18.3517467 0.109484124,18.0759491 0.311244358,17.8723357 C0.513004592,17.6687223 0.787767718,17.5541863 1.07441422,17.5541863 L18.6383903,17.5541863 C18.9225391,17.5577245 19.1943787,17.6707029 19.3973309,17.8696071 C19.5968337,18.0761491 19.7096866,18.3512359 19.7127155,18.6383791 C19.7127155,19.2317112 19.2317269,19.7127155 18.6383903,19.7127155 L1.07441422,19.7127155 C0.481077682,19.7127155 4.37471863e-05,19.2317112 4.37471863e-05,18.6383791 L4.37471863e-05,18.6383791 Z" id="形状" fill="#59D0E2"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/productLine.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>库存管理</title>
+    <g id="新增看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="周转看板" transform="translate(-64.000000, -618.000000)" fill-rule="nonzero">
+            <g id="编组-26备份" transform="translate(40.000000, 596.000000)">
+                <g id="库存管理" transform="translate(24.000000, 22.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                    <path d="M17.5599807,5.95300863 L17.5599807,7.05052701 L6.39641163,7.05052701 L6.39641163,5.95300863 L5.15061552,5.95300863 C4.59833077,5.95300863 4.15061552,6.40072388 4.15061552,6.95300863 L4.15061552,21.465846 C4.15061552,22.0181307 4.59833077,22.465846 5.15061552,22.465846 L18.8493845,22.465846 C19.4016692,22.465846 19.8493845,22.0181307 19.8493845,21.465846 L19.8493845,6.95300863 C19.8493845,6.40072388 19.4016692,5.95300863 18.8493845,5.95300863 L17.5599807,5.95300863 L17.5599807,5.95300863 Z M6.35280394,9.22062017 L17.516373,9.22062017 L17.516373,11.3240808 L6.35280394,11.3240808 L6.35280394,9.22062017 Z M14.2456217,20.2200499 L6.3962372,20.2200499 L6.3962372,18.0396653 L14.2456217,18.0396653 L14.2456217,20.2200499 Z M17.5709698,15.8758516 L6.40740077,15.8758516 L6.40740077,13.6570923 L17.5709698,13.6570923 L17.5709698,15.8758516 Z M10.7650186,1.53415402 L13.234807,1.53415402 C13.7870917,1.53415402 14.234807,1.98186927 14.234807,2.53415402 L14.234807,4.82653474 L14.234807,4.82653474 L9.76501859,4.82653474 L9.76501859,2.53415402 C9.76501859,1.98186927 10.2127338,1.53415402 10.7650186,1.53415402 Z M16.4807775,4.75814629 L16.4807775,5.95300863 L16.4807775,5.95300863 L7.51922248,5.95300863 L7.51922248,4.75814629 C7.51922248,4.20586154 7.96693773,3.75814629 8.51922248,3.75814629 L15.4807775,3.75814629 C16.0330623,3.75814629 16.4807775,4.20586154 16.4807775,4.75814629 Z" id="形状" fill="#59D0E2"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/scrap.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="23.9999981px" height="23.9999981px" viewBox="0 0 23.9999981 23.9999981" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>缺陷</title>
+    <g id="mes-看板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="深加工看板" transform="translate(-686.000000, -149.000000)" fill-rule="nonzero">
+            <g id="编组-26备份-2" transform="translate(662.000000, 127.000000)">
+                <g id="编组-24" transform="translate(24.000000, 22.000000)">
+                    <g id="缺陷" transform="translate(0.000000, 0.000000)">
+                        <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="23.9999981" height="23.9999981"></rect>
+                        <path d="M20.2321175,10.4550863 L18.9032068,10.4550863 L18.9032068,6.47221732 C18.9010796,5.9702116 18.4935224,5.56438134 17.9915122,5.56438585 L13.108538,5.56438585 L13.108538,3.98437284 C13.1108007,3.21607553 12.8028771,2.47938539 12.2545397,1.94122931 C11.7062023,1.40307324 10.9638711,1.1090093 10.1957511,1.12566955 C8.60430329,1.19855778 7.3587693,2.52279309 7.38340516,4.11571867 L7.38340516,5.56438585 L2.5004309,5.56438585 C1.99842068,5.56438134 1.59086349,5.9702116 1.58870356,6.47221732 L1.58870356,9.53566556 C1.58667583,9.77879788 1.68181868,10.0126808 1.85301841,10.1853314 C2.02421815,10.3579819 2.25728984,10.4550951 2.5004309,10.4550863 L3.01036175,10.4550863 C4.60185595,10.4303757 5.92550348,11.6736467 6.00041086,13.2635692 C6.0149973,14.0317095 5.71894789,14.773225 5.17934105,15.3201042 C4.63973421,15.8669834 3.90224815,16.1729324 3.13398136,16.1686298 L2.5004309,16.1686298 C1.9969159,16.1686298 1.58870356,16.5768093 1.58870356,17.0803243 L1.58870356,21.9632986 C1.58870356,22.4668136 1.9969159,22.8750014 2.5004309,22.8750014 L6.47171061,22.8750014 C6.71382208,22.8760256 6.94631552,22.780304 7.11751574,22.6091037 C7.28871596,22.4379035 7.38443764,22.2054101 7.38340516,21.9632986 L7.38340516,21.5113144 C7.3587693,19.9183889 8.60430329,18.5941536 10.1957511,18.5212653 C10.9638711,18.5046051 11.7062023,18.798669 12.2545397,19.3368251 C12.8028771,19.8749812 13.1108007,20.6116713 13.108538,21.3799686 L13.108538,21.9632986 C13.1075105,22.2047391 13.202703,22.4366433 13.3730659,22.6077311 C13.5434288,22.778819 13.7749267,22.8750014 14.0163694,22.8750014 L17.9915122,22.8750014 C18.4950272,22.8750014 18.9032068,22.4668136 18.9032068,21.9632986 L18.9032068,16.1686298 L20.3596002,16.1686298 C21.127882,16.1719118 21.8649697,15.8649752 22.403851,15.3173671 C22.9427323,14.769759 23.2377892,14.027836 23.2221666,13.259706 C23.1452437,11.6713093 21.8221825,10.4302984 20.2321175,10.4550863 Z" id="路径" fill="#59D0E2"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/OperationalOverview/components/baseTable.vue

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2020-12-14 09:07:03
  * @LastEditors: zhp
- * @LastEditTime: 2023-11-14 10:11:09
+ * @LastEditTime: 2023-12-28 09:00:44
  * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
  * @Description:
 -->
@@ -16,9 +16,8 @@
       style="width: 100%; background: transparent"
     >
       <el-table-column
-        v-if="page && limit && showIndex"
         prop="_pageIndex"
-        :label="'tableHeader.index' | i18nFilter"
+        label="序号"
         :width="70"
         align="center"
       />

src/views/OperationalOverview/components/doubleYChart .vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-09-21 09:06:28
- * @LastEditTime: 2023-10-16 14:20:45
+ * @LastEditTime: 2023-12-27 18:28:45
  * @LastEditors: zhp
  * @Description:
 -->
@@ -60,98 +60,17 @@ export default {
   data() {
     return {
       chart: null,
-      series: []
+      nameList: [],
+      series: [{
+        type: 'bar',
+        data: [],
+        barWidth: 6
+      }]
     }
   },
   mounted() {
     console.log('mounted')
     console.log('borderRadius: ', this.borderRadius)
-
-    this.series = [
-      {
-        name: this.dataList[0].name,
-        type: 'bar',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: this.dataList[0].topColor },
-            { offset: 1, color: this.dataList[0].bottomColor }
-          ]),
-          barBorderRadius: this.borderRadius
-        },
-        data: this.dataList[0].data,
-        barWidth: 6
-      },
-      {
-        name: this.dataList[1].name,
-        type: 'bar',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: this.dataList[1].topColor },
-            { offset: 1, color: this.dataList[1].bottomColor }
-          ]),
-          barBorderRadius: this.borderRadius
-        },
-        data: this.dataList[1].data,
-        barWidth: 6
-      },
-      {
-        name: this.dataList[2].name,
-        type: 'bar',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: this.dataList[2].topColor },
-            { offset: 1, color: this.dataList[2].bottomColor }
-          ]),
-          // borderRadius: [5, 5, 0, 0]
-          barBorderRadius: this.borderRadius
-        },
-        data: this.dataList[2].data,
-        barWidth: 6
-      },
-      {
-        name: this.dataList[3].name,
-        type: 'bar',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: this.dataList[3].topColor },
-            { offset: 1, color: this.dataList[3].bottomColor }
-          ]),
-          // borderRadius: [5, 5, 0, 0]
-          barBorderRadius: this.borderRadius
-        },
-        data: this.dataList[3].data,
-        barWidth: 6
-      },
-      {
-        name: this.dataList[4].name,
-        type: 'bar',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: this.dataList[4].topColor },
-            { offset: 1, color: this.dataList[4].bottomColor }
-          ]),
-          // borderRadius: [5, 5, 0, 0]
-          barBorderRadius: this.borderRadius
-        },
-        data: this.dataList[4].data,
-        barWidth: 6
-      },
-      {
-        name: this.dataList[5].name,
-        type: 'bar',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: this.dataList[5].topColor },
-            { offset: 1, color: this.dataList[5].bottomColor }
-          ]),
-          // borderRadius: [5, 5, 0, 0]
-          barBorderRadius: this.borderRadius
-        },
-        data: this.dataList[5].data,
-        barWidth: 6
-      }
-    ]
-
     this.$nextTick(() => {
       this.initChart()
     })
@@ -164,8 +83,50 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
+    initChart(nameList, passRateList, outputNumList) {
-      console.log(1)
+     let  series= [
+        {
+          name: '产线产量',
+          type: 'bar',
+          yAxisIndex: 1,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#9DD5FF' },
+              { offset: 1, color: '#1295FF' }
+            ])
+            // barBorderRadius: this.borderRadius
+          },
+          barWidth: 12,
+         data: outputNumList
+        },
+        {
+          name: '产线良品率',
+          type: 'line',
+          yAxisIndex: 0,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(255, 209, 96, 0.18)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255, 234, 153, 0)'
+              }
+            ])
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色
+              lineStyle: {
+                color: 'rgba(255, 209, 96, 1)' //改变折线颜色
+              }
+            }
+          },
+          data: passRateList
+        }
+      ]
       const colors = ['#5470C6', '#91CC75', '#EE6666']
       this.chart = echarts.init(document.getElementById(this.id))
       this.chart.setOption({
@@ -177,7 +138,12 @@ export default {
           }
         },
         grid: {
-          right: '20%'
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          width: 'auto',
+          height: "auto",
+          containLabel: true
         },
         legend: {
           data: ['产线产量', '产线良品率'],
@@ -205,7 +171,7 @@ export default {
               color: '#213259'
             }
           },
-          data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线', '钢七线', '钢八线']
+          data: nameList
         },
         // yAxis: {
 
@@ -236,8 +202,7 @@ export default {
             axisLabel: {
               textStyle: {
                 color: '#ced1d5', // 坐标值得具体的颜色
-                formatter: '{value} 片'
+                formatter: '{value}%'
-
               }
             },
             splitLine: {
@@ -295,29 +260,7 @@ export default {
             // },
           }
         ],
-        series: [
+        series: series
-          {
-            name: '产线产量',
-            type: 'bar',
-            yAxisIndex: 1,
-            itemStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#9DD5FF' },
-                { offset: 1, color: '#1295FF' }
-              ])
-              // barBorderRadius: this.borderRadius
-            },
-            data: [
-              2032, 3032, 1802, 2932, 2322, 2613, 2873, 2561
-            ]
-          },
-          {
-            name: '产线良品率',
-            type: 'line',
-            yAxisIndex: 0,
-            data: [98, 97, 94, 97.6, 98.2, 98.2, 97.4, 98.5]
-          }
-        ]
       })
     }
   }

src/views/OperationalOverview/components/linearBarChart.vue

@@ -41,113 +41,39 @@ export default {
       type: Boolean,
       default: false
     },
-    nameList: {
+    // nameList: {
-      type: Array,
+    //   type: Array,
-      default: () => []
+    //   default: () => []
-    },
+    // },
-    dataList: {
+    // dataList: {
-      type: Array,
+    //   type: Array,
-      default: () => []
+    //   default: () => []
-    }
+    // }
   },
   data() {
     return {
       chart: null,
-      series: []
+      nameList: [],
+      series: [{
+        type: 'bar',
+        data: [],
+        barWidth: 6
+
+      }]
     }
   },
   mounted() {
     console.log('mounted')
     console.log('borderRadius: ', this.borderRadius)
-
+    // console.log('33333', this.dataList)
-    this.series = [
+    // let arr = []
-      {
+    // this.dataList.forEach(ele => {
-        name: this.dataList[0].name,
+      // console.log(ele);
-        type: 'bar',
+    // this.series = []
-        itemStyle: {
+    this.initChart()
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    // this.$nextTick(() => {
-            { offset: 0, color: this.dataList[0].topColor },
+    //   // this.initChart()
-            { offset: 1, color: this.dataList[0].bottomColor }
+    // })
-          ]),
-          barBorderRadius: this.borderRadius
-        },
-        data: this.dataList[0].data,
-        barWidth: 6
-      },
-      {
-        name: this.dataList[1].name,
-        type: 'bar',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: this.dataList[1].topColor },
-            { offset: 1, color: this.dataList[1].bottomColor }
-          ]),
-          barBorderRadius: this.borderRadius
-        },
-        data: this.dataList[1].data,
-        barWidth: 6
-      },
-      {
-        name: this.dataList[2].name,
-        type: 'bar',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: this.dataList[2].topColor },
-            { offset: 1, color: this.dataList[2].bottomColor }
-          ]),
-          // borderRadius: [5, 5, 0, 0]
-          barBorderRadius: this.borderRadius
-        },
-        data: this.dataList[2].data,
-        barWidth: 6
-      },
-      {
-        name: this.dataList[3].name,
-        type: 'bar',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: this.dataList[3].topColor },
-            { offset: 1, color: this.dataList[3].bottomColor }
-          ]),
-          // borderRadius: [5, 5, 0, 0]
-          barBorderRadius: this.borderRadius
-        },
-        data: this.dataList[3].data,
-        barWidth: 6
-      },
-      {
-        name: this.dataList[4].name,
-        type: 'bar',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: this.dataList[4].topColor },
-            { offset: 1, color: this.dataList[4].bottomColor }
-          ]),
-          // borderRadius: [5, 5, 0, 0]
-          barBorderRadius: this.borderRadius
-        },
-        data: this.dataList[4].data,
-        barWidth: 6
-      },
-      {
-        name: this.dataList[5].name,
-        type: 'bar',
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: this.dataList[5].topColor },
-            { offset: 1, color: this.dataList[5].bottomColor }
-          ]),
-          // borderRadius: [5, 5, 0, 0]
-          barBorderRadius: this.borderRadius
-        },
-        data: this.dataList[5].data,
-        barWidth: 6
-      }
-    ]
-
-    this.$nextTick(() => {
-      this.initChart()
-    })
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -157,9 +83,20 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
+    initChart(nameList,dataList) {
-      console.log(1)
+      // console.log(1)
       this.chart = echarts.init(document.getElementById(this.id))
+      if (dataList.length !== 0) {
+        // this.$set(this.series, "data", dataList);
+        this.series = [{
+          type: 'bar',
+          data: dataList,
+          barWidth: 6
+        }]
+      }
+      if (nameList.length !== 0) {
+        this.nameList = nameList
+      }
       this.chart.setOption({
         tooltip: {
           trigger: 'axis',
@@ -216,19 +153,19 @@ export default {
           },
           type: 'value'
         },
-        legend: {
+        // legend: {
-          itemHeight: 10,
+        //   itemHeight: 10,
-          itemWidth: 10,
+        //   itemWidth: 10,
-          x: 'center', // 可设定图例在左、右、居中
+        //   x: 'center', // 可设定图例在左、右、居中
-          y: 'top', // 可设定图例在上、下、居中
+        //   y: 'top', // 可设定图例在上、下、居中
-          show: this.showLegend,
+        //   show: this.showLegend,
-          data: this.dataList,
+        //   data: this.dataList,
-          right: '1%',
+        //   right: '1%',
-          textStyle: {
+        //   textStyle: {
-            fontSize: 12 * this.beilv,
+        //     fontSize: 12 * this.beilv,
-            color: '#ced1d5'
+        //     color: '#ced1d5'
-          }
+        //   }
-        },
+        // },
         series: this.series
       })
     }

src/views/OperationalOverview/components/pileBarChart.vue

@@ -0,0 +1,235 @@
+<!--
+ * @Author: zhp
+ * @Date: 2023-12-27 13:54:52
+ * @LastEditTime: 2023-12-27 19:47:27
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <div>
+    <div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import 'echarts/theme/macarons' // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  name: 'OverviewBar',
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'linearBarChart'
+    },
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    borderRadius: {
+      type: Array,
+      default: () => [9, 9, 0, 0]
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    showLegend: {
+      type: Boolean,
+      default: false
+    },
+    // nameList: {
+    //   type: Array,
+    //   default: () => []
+    // },
+    // dataList: {
+    //   type: Array,
+    //   default: () => []
+    // }
+  },
+  data() {
+    return {
+      chart: null,
+      nameList: [],
+      series: [{
+        type: 'bar',
+        data: [],
+        barWidth: 6
+
+      }]
+    }
+  },
+  mounted() {
+    console.log('mounted')
+    // console.log('borderRadius: ', this.borderRadius)
+    // console.log('33333', this.dataList)
+    // let arr = []
+    // this.dataList.forEach(ele => {
+      // console.log(ele);
+    // this.series = []
+    this.initChart()
+    // this.$nextTick(() => {
+    //   // this.initChart()
+    // })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
+      // console.log(1)
+      this.chart = echarts.init(document.getElementById(this.id))
+      let series = [{
+        name: '成品面积',
+        type: 'bar',
+        stack: 'total',
+        // label: {
+        //   show: true
+        // },
+        emphasis: {
+          focus: 'series'
+        },
+        data: passRateList,
+        itemStyle: {
+          normal: { color: '#2359ec' }
+        }
+      },
+      {
+        name: '废片面积',
+        type: 'bar',
+        stack: 'total',
+        // label: {
+        //   show: true
+        // },
+        emphasis: {
+          focus: 'series'
+        },
+        barWidth: 12,
+        data: wasteList,
+        itemStyle: {
+          normal: { color: '#745fe4' }
+        }
+      },]
+      // for (i = 0; i < 5; i++) {
+      //   series.push({
+
+      //   })
+      // }
+      const yAxisDataLeft = topNameList;
+      // const yAxisDataRight = ['服装', '矿产', '服务业', '建筑业', '金融业'];
+      const yAxisDataRight = nameWasteList
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+          }
+        },
+        // legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          width: 'auto',
+          height: 'auto',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+          axisTick: {
+            show: false // 不显示坐标轴刻度线
+          },
+          axisLine: {
+            show: false, // 不显示坐标轴线
+          },
+          axisLabel: {
+            show: false, // 不显示坐标轴上的文字
+          },
+          splitLine: {
+            show: false // 不显示网格线
+          },
+        },
+        yAxis: [
+          {
+            inverse: true,
+            data: yAxisDataLeft,
+            axisLabel: {
+              show: true,
+              inside: true,
+              textStyle: {
+                color: '#ffffff',
+                fontSize: 12,
+                align: 'left',
+              },
+              formatter: '{value}\n{a|占位}\n{a|占位}',
+              rich: {
+                a: {
+                  color: 'transparent',
+                  lineHeight: 24,
+                }
+              }
+            },
+            //offset: 30,
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            }
+          },
+          {
+            inverse: false,
+            data: yAxisDataRight,
+            axisLabel: {
+              inside: true,
+              textStyle: {
+                color: '#ffffff',
+                fontSize: 12,
+                align: 'right',
+              },
+              formatter: '{value}\n{a|占位}\n{a|占位}',
+              rich: {
+                a: {
+                  color: 'transparent',
+                  lineHeight: 24,
+                  fontFamily: 'digital'
+                }
+              }
+            },
+            offset: 0,
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            }
+          }
+        ],
+        series: series
+      })
+    }
+  }
+}
+</script>

src/views/OperationalOverview/processingBoard.vue

@@ -2,16 +2,16 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zhp
- * @LastEditTime: 2023-12-19 14:25:07
+ * @LastEditTime: 2023-12-28 10:22:06
  * @Description:
 -->
 <template>
   <div id="container" ref="container" class="visual-container" :style="styles">
     <el-row class="container-title" :style="{
-        height: 88 + 'px',
+      height: 88 + 'px',
-        lineHeight: 88 + 'px',
+      lineHeight: 88 + 'px',
-        fontSize: 31 + 'px'
+      fontSize: 31 + 'px'
-      }">
+    }">
       <img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
       许昌安彩深加工看板
       <h3 class="unit">单位：河南汇融科技服务有限公司</h3>
@@ -29,26 +29,21 @@
     <el-row class="container-main flex-col" type="flex">
       <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
-          <base-container :title="'设备报警'" :title-icon="'5_1'">
+          <base-container :title="'设备报警'" :title-icon="'eqAlarm'">
             <base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityYearTableProps"
-              :table-data="qualityYearList" />
+              :table-data="equipmentList" />
           </base-container>
         </el-col>
 
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
-          <base-container :title="'各工序缺陷汇总'" :title-icon="'5_2'">
+          <base-container :title="'各工序缺陷汇总'" :title-icon="'scrap'">
-            <div class="visual-select">
-              <el-select class="coldSelect" v-model="modelMonth" size="mini" placeholder="">
-                <el-option key="1" value="钢1线" label="钢1线" default />
-              </el-select>
-            </div>
             <base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityMonthTableProps"
               :table-data="qualityMonthList" />
           </base-container>
         </el-col>
 
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
-          <base-container :title="'设备监控'" :title-icon="'5_3'">
+          <base-container :title="'工单监控'" :title-icon="'eqMonitoring'">
             <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
             </div> -->
@@ -59,13 +54,15 @@
               <!-- <el-row style="margin-bottom: 1em">
                     <p class="now-team-title">加工工单进度</p>
                   </el-row> -->
-              <el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
+              <el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
-                <el-progress :percentage="op.outRate * 100" class="custom-progress-bar" />
+                <!-- <el-col :span="12"> -->
-                <p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
+                  <el-progress :percentage="op.progressRate * 100" class="custom-progress-bar" />
+                  <!-- <p v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD">
                   <i class="el-icon-check" />
                   {{ op.name }}
-                </p>
+                </p> -->
-                <p v-else class="now-secondary-title">{{ op.name }}</p>
+                  <p class="now-secondary-title">{{ op.name }}</p>
+                <!-- </el-col> -->
               </el-row>
               <!-- <el-row>
                     <el-progress :percentage="100" class="custom-progress-bar" />
@@ -98,13 +95,14 @@
 
       <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
-          <base-container :height="256" :title="'能源监控'" :title-icon="'5_5'">
+          <base-container :height="256" :title="'能源监控'" :title-icon="'energyMonitoring'">
-            <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
+            <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
-            </div>
+            </div> -->
             <el-row :gutter="9">
               <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
-                <linear-bar-chart :name-list="cxNameList" :data-list="cxDataList" :height="359" :show-legend="true" />
+                <linear-bar-chart ref="EnergyMonitoringChart" :name-list="EnergyMonitoringNameList"
+                  :data-list="EnergyMonitoringList" :height="359" />
               </el-col>
               <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
                 <base-table3
@@ -119,13 +117,13 @@
           </base-container>
         </el-col>
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
-          <base-container :height="318 + 338 + 16" :title="'产线产量及良品率'" :title-icon="'5_4'">
+          <base-container :height="318 + 338 + 16" :title="'产线产量及良品率'" :title-icon="'productLine'">
-            <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
+            <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
-            </div>
+            </div> -->
             <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
-            <double-y-chart :id=" 'doubleYChart' " :name-list="cxNameList" :data-list="cxDataList" :height="359"
+            <double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :name-list="cxNameList"
-              :show-legend="true" />
+              :data-list="cxDataList" :height="359" :show-legend="true" />
           </base-container>
         </el-col>
       </el-row>
@@ -400,22 +398,22 @@ const legendData3 = [
 ]
 const qualityYearTableProps = [
   {
-    prop: 'eqName',
+    prop: 'name',
     label: '设备名称'
   },
   {
-    prop: 'eqCode',
+    prop: 'code',
     label: '设备编码'
   },
   {
-    prop: 'level',
+    prop: 'status',
-    label: '报警级别',
+    label: '设备状态',
-    subcomponent: alarmLevel,
+    // subcomponent: alarmLevel,
     align: 'center'
   },
   {
-    prop: 'content',
+    prop: 'error',
-    label: '报警内容'
+    label: '是否故障'
   }
 ]
 
@@ -439,206 +437,39 @@ const qualityYearList = [
 ]
 const qualityMonthTableProps = [
   {
-    prop: 'lineName',
+    prop: 'productionLineName',
     label: '产线名'
   },
   {
-    prop: 'process',
+    prop: 'sectionName',
     label: '工序'
   },
   {
-    prop: 'eqName',
+    prop: 'count',
-    label: '设备名'
+    label: '损耗片数'
   },
   {
-    prop: 'eqCode',
+    prop: 'inspectionTypeName',
-    label: '设备编码'
+    label: '缺陷类型'
   },
-  {
-    prop: 'long',
-    label: '总运行时长(h)'
-  },
-  // {
-  //   prop: 'createTime',
-  //   label: '保养时间'
-  // },
-  {
-    prop: 'status',
-    label: '设备状态'
-  }
-  // {
-  //   prop: 'nextCreateTime',
-  //   label: '下次保养时间'
-  // }
-  // {
-  //   prop: 'nextLong',
-  //   label: '距离保养时间(天)',
-  //   // subcomponent: nextDay,
-  //   align: 'center'
-  // }
 ]
 
-const qualityMonthList = [
-  {
-    lineName: '钢一线',
-    process: '41',
-    eqName: '二次清洗机',
-    eqCode: '2312312',
-    long: '200',
-    // createTime: '2021-02-25 12:00:01',
-    status: '报警'
-    // nextCreateTime: '2022-12-25 12:00:01',
-    // nextLong: 365
-  },
-  {
-    lineName: '钢二线',
-    process: '41',
-    eqName: '锻造机',
-    eqCode: '43434',
-    long: '252',
-    // createTime: '2021-11-25 12:00:01',
-    status: '正常'
-    // nextCreateTime: '2022-12-25 12:00:01',
-    // nextLong: 4
-  },
-  {
-    lineName: '钢三线',
-    process: '41',
-    eqName: '设备3',
-    eqCode: '23213212',
-    long: '100',
-    // createTime: '2021-10-25 12:00:01',
-    status: '故障停机'
-    // nextCreateTime: '2022-12-25 12:00:01',
-    // nextLong: 24
-  },
-  {
-    lineName: '钢四线',
-    process: '41',
-    eqName: '设备4',
-    eqCode: '23213',
-    long: '322',
-    // createTime: '2021-02-25 12:00:01',
-    status: '故障停机'
-    // nextCreateTime: '2022-12-25 12:00:01',
-    // nextLong: -36
-  },
-  {
-    lineName: '钢五线',
-    process: '41',
-    eqName: '设备5',
-    eqCode: '23121312',
-    long: '232',
-    // createTime: '2021-06-25 12:00:01',
-    status: '待机'
-    // nextCreateTime: '2022-12-25 12:00:01',
-    // nextLong: 111
-  },
-  {
-    lineName: '钢五线',
-    process: '41',
-    eqName: '设备5',
-    eqCode: '23121312',
-    long: '212',
-    // createTime: '2021-06-25 12:00:01',
-    status: '待机'
-    // nextCreateTime: '2022-12-25 12:00:01',
-    // nextLong: 111
-  },
-  {
-    lineName: '钢五线',
-    process: '41',
-    eqName: '设备5',
-    eqCode: '23121312',
-    long: '123',
-    // createTime: '2021-06-25 12:00:01',
-    status: '镀膜机'
-    // nextCreateTime: '2022-12-25 12:00:01',
-    // nextLong: 111
-  },
-  {
-    lineName: '钢五线',
-    process: '41',
-    eqName: '清洗机',
-    eqCode: '23121312',
-    long: '322',
-    // createTime: '2021-06-25 12:00:01',
-    status: 'Remote'
-    // nextCreateTime: '2022-12-25 12:00:01',
-    // nextLong: 111
-  },
-  {
-    lineName: '钢五线',
-    process: '41',
-    eqName: '磨边机',
-    eqCode: '23121312',
-    long: '232',
-    // createTime: '2021-06-25 12:00:01',
-    status: 'Non-scheduled'
-    // nextCreateTime: '2022-12-25 12:00:01',
-    // nextLong: 111
-  },
-  {
-    lineName: '钢五线',
-    process: '41',
-    eqName: '磨边机',
-    eqCode: '23121312',
-    long: '232',
-    // createTime: '2021-06-25 12:00:01',
-    status: 'Non-scheduled'
-    // nextCreateTime: '2022-12-25 12:00:01',
-    // nextLong: 111
-  },
-  {
-    lineName: '钢五线',
-    process: '41',
-    eqName: '磨边机',
-    eqCode: '23121312',
-    long: '232',
-    // createTime: '2021-06-25 12:00:01',
-    status: 'Non-scheduled'
-    // nextCreateTime: '2022-12-25 12:00:01',
-    // nextLong: 111
-  },
-  {
-    lineName: '钢五线',
-    process: '41',
-    eqName: '磨边机',
-    eqCode: '23121312',
-    long: '232',
-    // createTime: '2021-06-25 12:00:01',
-    status: 'Non-scheduled'
-    // nextCreateTime: '2022-12-25 12:00:01',
-    // nextLong: 111
-  },
-  {
-    lineName: '钢五线',
-    process: '41',
-    eqName: '磨边机',
-    eqCode: '23121312',
-    long: '232',
-    // createTime: '2021-06-25 12:00:01',
-    status: 'Non-scheduled'
-    // nextCreateTime: '2022-12-25 12:00:01',
-    // nextLong: 111
-  }
-]
 const orderProcessList = [
   {
     id: '1', outRate: '.8', name: '凯盛0322'
   }, {
-    id: '1', outRate: '.4', name: '光伏玻璃4.0'
+    id: '2', outRate: '.4', name: '光伏玻璃4.0'
   }, {
-    id: '1', outRate: '.5', name: '光伏玻璃3.0'
+    id: '3', outRate: '.5', name: '光伏玻璃3.0'
   }, {
-    id: '1', outRate: '.3', name: '光伏玻璃2.0'
+    id: '4', outRate: '.3', name: '光伏玻璃2.0'
   }, {
-    id: '1', outRate: '.5', name: '光伏玻璃1.0'
+    id: '5', outRate: '.5', name: '光伏玻璃1.0'
   }, {
-    id: '1', outRate: '.8', name: '光伏玻璃'
+    id: '6', outRate: '.8', name: '光伏玻璃'
   },
   {
-    id: '1', outRate: '.8', name: '统计订单'
+    id: '7', outRate: '.8', name: '统计订单'
   }
 ]
 export default {
@@ -661,11 +492,16 @@ export default {
       beilv2: 1,
       beilv: 1,
       value: 100,
-      times:'',
+      orderList:[],
+      times: '',
+      EnergyMonitoringNameList: [],
+      equipmentList:[],
+      EnergyMonitoringList: [],
       // offsetWidth: null,
       qualityYearTableProps,
       cxNameList,
       cxDataList,
+      productLineList:[],
       qualityYearList,
       clientWidth: 0,
       containerWidth: 111111,
@@ -673,7 +509,7 @@ export default {
       // orderProcessList: [],
       orderProcessList,
       qualityTableProps1,
-      qualityMonthList,
+      qualityMonthList:[],
       qualityMonthTableProps,
       modelMonth: '',
       qualityList1,
@@ -719,8 +555,17 @@ export default {
     this.init()
   },
   mounted() {
+    this.getList()
+    this.initWebSocket()
     this.getTimes()
-    this.windowWidth(document.documentElement.clientWidth)
+    const _this = this;
+    _this.beilv2 = document.documentElement.clientWidth / 1920
+    window.onresize = () => {
+      return (() => {
+        _this.clientWidth = `${document.documentElement.clientWidth}`
+        this.beilv2 = _this.clientWidth / 1920
+      })()
+    }
     // const _this = this;
     // window.onresize = () => {
     //   return (() => {
@@ -746,6 +591,23 @@ export default {
   //   removeEventListener('resize', resizeFun)
   // },
   methods: {
+    getList() {
+      this.$axios.get(
+        'base/core-production-line/listAll',
+        'get',
+        this.queryParams
+      ).then((res) => {
+        console.log('11111', res);
+        this.productLineList = res.data
+      })
+      this.$axios.get(
+        'base/quality-inspection-record/dayStatistics',
+        'get',
+      ).then((res) => {
+        console.log('11111', res);
+        this.qualityMonthList = res.data
+      })
+    },
     getTimes() {
       setInterval(this.getTimesInterval, 1000);
     },
@@ -770,6 +632,165 @@ export default {
       //拼接格式化当前时间
       this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
     },
+    initWebSocket() {
+      if (typeof (WebSocket) === 'undefined') {
+        alert('您的浏览器不支持WebSocket')
+      } else {
+        const wsUrl = `ws://192.168.0.33:48082/websocket/message?userId=EN${date}`
+        // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
+        let date = new Date().valueOf()
+        console.log(date);
+        const SJGWsUrl = `ws://192.168.0.33:48082/websocket/message?userId=SJG${date}`
+        this.SJGWebsocket = new WebSocket(SJGWsUrl)
+        // 监听 WebSocket 连接
+        this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
+        // 监听 WebSocket 错误信息
+        this.SJGWebsocket.onerror = this.SJGWebsocketOnError
+        // 监听 WebSocket 消息
+        this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
+        // 监听 webSocket 断开信息
+        this.SJGWebsocket.onclose = this.SJGWebsocketClose
+        // const wsUrl = 'ws://192.168.0.33:48082/websocket/message?userId=EN111'
+        // 实例化 WebSocket
+        this.websocket = new WebSocket(wsUrl)
+        // 监听 WebSocket 连接
+        this.websocket.onopen = this.websocketOnOpen
+        // 监听 WebSocket 错误信息
+        this.websocket.onerror = this.websocketOnError
+        // 监听 WebSocket 消息
+        this.websocket.onmessage = this.websocketOnMessage
+        // 监听 webSocket 断开信息
+        this.websocket.onclose = this.websocketClose
+      }
+    },
+    SJGWebsocketOnOpen() {
+      console.log('socket连接成功')
+      console.log(this.SJGWebsocket.onmessage);
+      this.SJGWebsocket.onmessage()
+    },
+    // 连接建立失败重连
+    SJGWebsocketOnError(e) {
+      // console.log('11111', e)
+      this.initWebSocket()
+    },
+    // 数据接收
+    SJGWebsocketOnMessage(e) {
+      // console.log(1111, e)
+      this.wsData = JSON.parse(e.data)
+      // console.log(this.wsData.detData);
+      // console.log('22222', this.wsData.data)
+      if (this.wsData.type === 'order') {
+        this.orderList = this.wsData.detData.map((ele, index) => {
+          if (ele.progressRate != 1) {
+            return {
+              id: ele.id,
+              name: ele.name,
+              progressRate: ele.progressRate.toFixed(3)
+            }
+          }
+        });
+        console.log(this.orderList)
+      } else if (this.wsData.type === 'equipment') {
+        this.equipmentList = this.wsData.detData.map((ele, index) => {
+          // if (ele.progressRate != 1) {
+            return {
+              id: ele.id,
+              name: ele.name,
+              code: ele.code,
+              status: ele.status,
+              error: ele.error=== true ? '是' : '否'
+            }
+          // }
+        });
+        // console.log(this.orderList)
+      } else if (this.wsData.type === 'productline') {
+        console.log(this.wsData.detData);
+        let nameList = []
+        let passRateList = []
+        let outputNumList = []
+
+        // console.log('2222222222', this.productLineList);
+        this.productLineList.forEach((item) => {
+          this.wsData.detData.forEach((ele) => {
+            if (item.id == ele.productionLineId) {
+              nameList.push(item.name)
+            }
+          })
+        })
+        console.log(Array.from(new Set(nameList)))
+        // progressRateList = EnergyNameList
+        // let EnergyDataList = []
+        this.wsData.detData.forEach((ele) => {
+          passRateList.push(ele.passRate *100
+          )
+        })
+        this.wsData.detData.forEach((ele) => {
+          outputNumList.push(ele.outputNum
+          )
+        })
+        // console.log(this.EnergyMonitoringNameList)
+        // console.log(this.EnergyMonitoringList)
+        // this.$nextTick(() => {
+        this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
+      }
+    },
+    // 数据发送
+    // SJGWebsocketSend() {
+    //   this.websocket.send('11111')
+    // },
+    // // 关闭
+    // SJGWebsocketClose(e) {
+    //   console.log('WebSocket 断开连接', e)
+    // },
+    // // 连接建立之后执行send方法发送数据
+    websocketOnOpen() {
+      console.log('socket连接成功')
+      this.websocket.onmessage()
+    },
+    // 连接建立失败重连
+    websocketOnError(e) {
+      console.log('11111', e)
+      this.initWebSocket()
+    },
+    // 数据接收
+    websocketOnMessage(e) {
+      // console.log(1111, e)
+      this.wsData = JSON.parse(e.data)
+      // console.log('22222', this.wsData.data)
+      if (this.wsData.type === 'EnergyMonitoring') {
+        let EnergyNameList = []
+        this.wsData.data.forEach((ele) => {
+          EnergyNameList.push(ele.lineName)
+        })
+        this.EnergyMonitoringNameList = EnergyNameList
+        let EnergyDataList = []
+        this.wsData.data.forEach((ele) => {
+          EnergyDataList.push(ele.useQuantity
+            // {
+            //   type: 'bar',
+            //   data: ele.useQuantity,
+            //   barWidth: 6
+
+            // }
+          )
+        })
+        this.EnergyMonitoringList = EnergyDataList
+        console.log(EnergyDataList)
+        // console.log(this.EnergyMonitoringNameList)
+        // console.log(this.EnergyMonitoringList)
+        // this.$nextTick(() => {
+        this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
+        // })
+      }
+    },
+    // 数据发送
+    websocketSend() {
+      this.websocket.send('11111')
+    },
+    // 关闭
+    websocketClose(e) {
+      // console.log('WebSocket 断开连接', e)
+    },
     windowWidth(value) {
       this.clientWidth = value
       this.beilv2 = this.clientWidth / 1920
@@ -901,8 +922,8 @@ export default {
    top: 2em;
  }
 
-//  .container-main {
+// .container-main {
-//    padding: 0px;
+//    padding: 5px;
 //  }