预制曲线对接websocket，模块调换等

src/views/modules_guAn/visualization/index.vue

@@ -16,7 +16,7 @@
       <div class="left-container">
         <div class="left-top-con">
           <!-- 左上 -->
-          <yuzhi-curve :data="yuzhiData" ref="yuzhiCurve"></yuzhi-curve>
+          <yuzhi-curve :data="yuzhiData" :markData="yuzhiMarkData" ref="yuzhiCurve"></yuzhi-curve>
         </div>
         <div class="left-center-con">
           <!-- 左中 -->
@@ -42,7 +42,7 @@
             <running-state :data="eqRealData" @click="handleXunhuan"></running-state>
           </div>
           <div class="center-bottom-right">
-            <equipment-info :data="eqRealData" :alarmData="newAlarmData"></equipment-info>
+            <mode-info :data="eqRealData"></mode-info>
           </div>
         </div>
       </div>
@@ -50,15 +50,15 @@
       <div class="right-container">
         <div class="right-top-con">
           <!-- 右上 -->
-          <mode-info :data="eqRealData"></mode-info>
+          <equipment-info :data="eqRealData" :alarmData="newAlarmData"></equipment-info>
         </div>
         <div class="right-center-con">
           <!-- 右中 -->
-          <test-status-info :data="eqRealData"></test-status-info>
+          <surveillance-video :data="eqRealData"></surveillance-video>
         </div>
         <div class="right-bottom-con">
           <!-- 右下 -->
-          <surveillance-video :data="eqRealData"></surveillance-video>
+          <test-status-info :data="eqRealData"></test-status-info>
         </div>
       </div>
     </div>
@@ -105,6 +105,7 @@ export default {
       titleName: '',
       eqRealData: [],
       yuzhiData: [],
+      yuzhiMarkData: [],
       curveData: [],
       websock: null,
       newAlarmData: null,
@@ -195,6 +196,7 @@ export default {
       this.curveData = redata['设备历史值']
       this.newAlarmData = redata['最新一条报警信息']
       this.yuzhiData = redata['预制曲线']
+      this.yuzhiMarkData = redata['预制曲线线段']
       var titleObj = redata['设备实时值'].find(item => item.Name === '试验名称')
       console.log(titleObj)
       this.titleName = titleObj ? titleObj.Value : '高温高湿试验项目'

src/views/modules_guAn/visualization/modules/EquipmentInfo.vue

@@ -100,9 +100,9 @@ export default {
       }
     },
     alarmData: {
-      type: Array,
+      type: Object,
       default: function(){
-        return [] // 使用工厂函数返回默认值
+        return {} // 使用工厂函数返回默认值
       }
     }
   },
@@ -161,7 +161,7 @@ export default {
       handler(newValue, oldValue){
         console.log(newValue, oldValue)
         var hasAlarm = newValue
-        var options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }; 
+        var options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' };
         this.information = hasAlarm ? newValue.tagname : '暂无数据'
         this.alarmTime = hasAlarm ?  new Date(newValue.logtime.time).toLocaleDateString('zh-CN', options) : ''
       },

src/views/modules_guAn/visualization/modules/YuzhiCurve.vue

@@ -42,7 +42,7 @@ export default {
       default: function(){
         return [] // 使用工厂函数返回默认值
       }
-    }
+    },
   },
   data () {
     return {
@@ -62,10 +62,13 @@ export default {
       wenduData: [],
       shiduData: [],
       timeData: [],
+      markData: [],
       // fusheData: [150, 230, 224, 218, 135, 147, 260],
       // wenduData: [50, 60, 60, 70, 50, 50, 60],
       // shiduData: [40, 70, 70, 40, 40, 50, 50],
-      // timeData: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00']
+      // timeData: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
+      colors: ['#0102c8', '#cfa809', '#49e4e9'],
+      // markData: ['1', '2', '3', '0', '1'],
     }
   },
   watch: {
@@ -77,6 +80,15 @@ export default {
       // immediate: true,
       deep: true
     },
+    markData: {
+      handler(newValue, oldValue){
+        console.log('预制曲线线段', newValue, oldValue)
+        // this.refreshData(newValue)
+        this.markData = newValue
+      },
+      // immediate: true,
+      deep: true
+    },
     'chooseXunhuan.circname': {
       handler(newValue, oldValue){
         if(newValue){
@@ -96,13 +108,43 @@ export default {
     })
   },
   methods: {
+    setMarkLine(data, color){
+      console.log(data, color)
+      var markLines = []
+      this.markData.forEach((item, index) => {
+        var y = (data[index] + data[index + 1]) / 2
+        markLines.push([
+          {
+            name: item,
+            coord: [index, y],
+            label: {
+              fontSize: 12,
+              formatter: item,
+              color: color,
+              fontWeight: 'bold',
+              position: 'insideMiddle',
+            },
+            lineStyle: {
+              normal: {
+                  width: 0,
+                  color: 'transparent',
+              },
+            },
+          },
+          {
+            coord: [index+1, y],
+          },
+        ])
+      })
+      return markLines
+    },
     initYuzhiCurve(){
       var _this = this
       var maxa = Math.max.apply(null, this.fusheData)
       var maxb = Math.max.apply(null, [...this.wenduData, ...this.shiduData])
       this.uEcharts = echarts.init(this.$refs.yuzhiCurve);
       this.uOption = {
-        color: ['#0102c8', '#cfa809', '#49e4e9'], // legend对应颜色
+        color: _this.colors, // legend对应颜色
         grid: {
           top: '80',
           left: '46',
@@ -230,6 +272,10 @@ export default {
               }
             },
             data: _this.fusheData,
+            markLine: {
+              symbol: 'none',
+              data: _this.setMarkLine(_this.fusheData, _this.colors[0])
+            }
           },
           {
             name: '温度实值',
@@ -272,6 +318,10 @@ export default {
               ]
             },
             data: _this.wenduData,
+            markLine: {
+              symbol: 'none',
+              data: _this.setMarkLine(_this.wenduData, _this.colors[1])
+            }
           },
           {
             name: '湿度实值',
@@ -298,6 +348,10 @@ export default {
               }
             },
             data: _this.shiduData,
+            markLine: {
+              symbol: 'none',
+              data: _this.setMarkLine(_this.shiduData, _this.colors[2])
+            }
           }
         ]
       };
@@ -333,15 +387,27 @@ export default {
       this.uOption.series.forEach(item => {
         switch (item.name) {
           case '辐射强度值':
-            item.data = _this.fusheData
+            item.data = _this.fusheData,
+            item.markLine = {
+              symbol: 'none',
+              data: _this.setMarkLine(_this.fusheData, _this.colors[0])
+            }
             break;
           case '温度实值':
-            item.data = _this.wenduData
+            item.data = _this.wenduData,
+            item.markLine = {
+              symbol: 'none',
+              data: _this.setMarkLine(_this.wenduData, _this.colors[1])
+            }
             break;
           case '湿度实值':
-            item.data = _this.shiduData
+            item.data = _this.shiduData,
+            item.markLine = {
+              symbol: 'none',
+              data: _this.setMarkLine(_this.shiduData, _this.colors[2])
+            }
             break;
-        
+
           default:
             break;
         }