Browse Source

曲线数据对接,预制曲线循环高亮,报错修改等

yuhan 1 year ago
parent
commit
9f4fca7a75

+ 10 - 3
src/views/modules_guAn/visualization/index.vue

@@ -16,7 +16,7 @@
       <div class="left-container">
         <div class="left-top-con">
           <!-- 左上 -->
-          <yuzhi-curve :data="curveData"></yuzhi-curve>
+          <yuzhi-curve :data="yuzhiData" ref="yuzhiCurve"></yuzhi-curve>
         </div>
         <div class="left-center-con">
           <!-- 左中 -->
@@ -39,7 +39,7 @@
         <div class="centen-bottom-con u-flex-jab">
           <!-- 中下 -->
           <div class="center-bottom-left">
-            <running-state :data="eqRealData"></running-state>
+            <running-state :data="eqRealData" @click="handleXunhuan"></running-state>
           </div>
           <div class="center-bottom-right">
             <equipment-info :data="eqRealData" :alarmData="newAlarmData"></equipment-info>
@@ -101,7 +101,9 @@ export default {
   data () {
     return {
       eqRealData: [],
+      yuzhiData: [],
       curveData: [],
+      newAlarmData: [],
       websock: null,
       newAlarmData: null
     }
@@ -164,6 +166,7 @@ export default {
       this.eqRealData = redata['设备实时值']
       this.curveData = redata['设备历史值']
       this.newAlarmData = redata['最新一条报警信息']
+      this.yuzhiData = redata['预制曲线']
     },
     // websocket连接后发送数据(send发送)
     websocketonopen () {
@@ -183,7 +186,11 @@ export default {
     // 关闭
     websocketclose (e) {
       console.log('断开连接', e)
-    }
+    },
+    // 点击循环时触发
+    handleXunhuan(choose){
+      this.$refs.yuzhiCurve.chooseXunhuan.circname = choose
+    },
   }
 }
 </script>

+ 4 - 10
src/views/modules_guAn/visualization/modules/EquipmentInfo.vue

@@ -143,7 +143,6 @@ export default {
       // 运行方式设定
       runStatus: '',
       // 报警信息
-      alarm: [],
       alarmTime: '',
       information: ''
     }
@@ -160,13 +159,10 @@ export default {
     },
     alarmData: {
       handler(newValue, oldValue){
-        this.alarm = newValue
-        // console.log(7788,this.alarm)
-        if (this.alarm.length == 0) {
-          this.information = '暂无数据'
-        }else{
-          this.getList()
-        }
+        // console.log(newValue, oldValue)
+        var hasAlarm = newValue && newValue.length>0
+        this.information = hasAlarm ? newValue[0].Name : '暂无数据'
+        this.alarmTime = hasAlarm ?  newValue[0].Time : ''
       },
       immediate: true,
       deep: true
@@ -201,8 +197,6 @@ export default {
           this.runStatus = this.dataList[i].Value
         }
       }
-      this.information = this.alarm[0].Name
-      this.alarmTime = this.alarm[0].Time
     }
   }
 }

+ 68 - 23
src/views/modules_guAn/visualization/modules/FullCurve.vue

@@ -33,17 +33,23 @@ export default {
         { name: '温度实值', value: 50 },
         { name: '湿度实值', value: 60.3 },
       ],
-      fusheData: [150, 230, 224, 218, 135, 147, 260],
-      wenduData: [120, 132, 101, 134, 90, 230, 210],
-      shiduData: [220, 182, 191, 234, 290, 330, 310],
+      fusheData: [],
+      wenduData: [],
+      shiduData: [],
+      timeData: [],
+      // fusheData: [150, 230, 224, 218, 135, 147, 260],
+      // wenduData: [120, 132, 101, 134, 90, 230, 210],
+      // shiduData: [220, 182, 191, 234, 290, 330, 310],
+      // timeData: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
     }
   },
   watch: {
     data: {
       handler(newValue, oldValue){
-        console.log(newValue, oldValue)
+        console.log('全程曲线', newValue, oldValue)
+        this.refreshData(newValue)
       },
-      immediate: true,
+      // immediate: true,
       deep: true
     }
   },
@@ -67,6 +73,9 @@ export default {
           left: '46',
           bottom: '40'
         },
+        tooltip: {
+          trigger: 'axis',
+        },
         xAxis: {
           type: 'category',
           axisTick: { show: false }, // 横坐标刻度
@@ -81,7 +90,7 @@ export default {
               color: '#fff'
             }
           },
-          data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
+          data: _this.timeData
         },
         yAxis: [
           {
@@ -104,9 +113,10 @@ export default {
               color: '#fff',
               padding: [0, 0, 0, 20],
             },
-            min: 0,
-            max: setMax(maxa),
-            interval: setMax(maxa) / 5,
+            alignTicks: true,
+            // min: 0,
+            // max: setMax(maxa),
+            // interval: setMax(maxa) / 5,
           },
           {
             type: 'value',
@@ -128,9 +138,10 @@ export default {
               color: '#fff',
               // padding: [0, 0, 0, 20],
             },
-            min: 0,
-            max: setMax(maxb),
-            interval: setMax(maxb) / 5,
+            alignTicks: true,
+            // min: 0,
+            // max: setMax(maxb),
+            // interval: setMax(maxb) / 5,
           },
         ],
         legend: {
@@ -142,18 +153,17 @@ export default {
             fontSize: 11
           },
           top: '15',
-          // 使用回调函数
-          formatter: function (name) {
-            console.log(name)
-            var currentObj = _this.legendData.find(item => item.name === name)
-            return name + ':' + currentObj.value;
-          },
+          // 使用回调函数:加上数值方法
+          // formatter: function (name) {
+          //   console.log(name)
+          //   var currentObj = _this.legendData.find(item => item.name === name)
+          //   return name + ':' + currentObj.value;
+          // },
           data: _this.legendData.map(item => item.name),
         },
         series: [
           {
             name: '辐射强度值',
-            data: [150, 230, 224, 218, 135, 147, 260],
             type: 'line',
             // symbol: 'circle',
             // symbolSize: 2,
@@ -183,7 +193,8 @@ export default {
                   }
                 ])
               }
-            }
+            },
+            data: _this.fusheData,
           },
           {
             name: '温度实值',
@@ -209,7 +220,7 @@ export default {
                 ])
               }
             },
-            data: [120, 132, 101, 134, 90, 230, 210],
+            data: _this.wenduData,
           },
           {
             name: '湿度实值',
@@ -235,7 +246,7 @@ export default {
                 ])
               }
             },
-            data: [220, 182, 191, 234, 290, 330, 310],
+            data: _this.shiduData,
           }
         ]
       };
@@ -243,7 +254,41 @@ export default {
       window.addEventListener("resize", ()=>{
         this.uEcharts.resize();
       });
-    }
+    },
+    refreshData(data){
+      if(data.length === 0){
+        return
+      }
+      var wendu = data.find(item => item.Name === '温度实值-全程')
+      var shidu = data.find(item => item.Name === '湿度实值-全程')
+      var fushe = data.find(item => item.Name === '辐射强度值-全程')
+      var time = data.find(item => item.Name === '全程曲线-时间分布')
+      this.wenduData = wendu ? wendu.Values : []
+      this.shiduData = shidu ? shidu.Values : []
+      this.fusheData = fushe ? fushe.Values : []
+      this.timeData = time ? time.Values : []
+      // console.log(this.shiduData)
+      var _this = this
+      this.uEcharts.setOption({
+        xAxis: {
+          data: this.timeData
+        },
+        series: [
+          {
+            name: '辐射强度值',
+            data: _this.fusheData
+          },
+          {
+            name: '温度实值',
+            data: _this.wenduData
+          },
+          {
+            name: '湿度实值',
+            data: _this.shiduData
+          },
+        ]
+      });
+    },
   }
 }
 </script>

+ 64 - 22
src/views/modules_guAn/visualization/modules/RealTimeCurve.vue

@@ -32,17 +32,23 @@ export default {
         { name: '温度实值', value: 50 },
         { name: '湿度实值', value: 60.3 },
       ],
-      fusheData: [150, 230, 224, 218, 135, 147, 260],
-      wenduData: [120, 132, 101, 134, 90, 230, 210],
-      shiduData: [220, 182, 191, 234, 290, 330, 310],
+      fusheData: [],
+      wenduData: [],
+      shiduData: [],
+      timeData: [],
+      // fusheData: [150, 230, 224, 218, 135, 147, 260],
+      // wenduData: [120, 132, 101, 134, 90, 230, 210],
+      // shiduData: [220, 182, 191, 234, 290, 330, 310],
+      // timeData: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
     }
   },
   watch: {
     data: {
       handler(newValue, oldValue){
-        console.log(newValue, oldValue)
+        console.log('实时曲线', newValue, oldValue)
+        this.refreshData(newValue)
       },
-      immediate: true,
+      // immediate: true,
       deep: true
     }
   },
@@ -66,6 +72,9 @@ export default {
           left: '46',
           bottom: '40'
         },
+        tooltip: {
+          trigger: 'axis',
+        },
         xAxis: {
           type: 'category',
           axisTick: { show: false }, // 横坐标刻度
@@ -80,7 +89,7 @@ export default {
               color: '#fff'
             }
           },
-          data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
+          data: _this.timeData
         },
         yAxis: [
           {
@@ -103,9 +112,10 @@ export default {
               color: '#fff',
               padding: [0, 0, 0, 20],
             },
-            min: 0,
-            max: setMax(maxa),
-            interval: setMax(maxa) / 5,
+            alignTicks: true,
+            // min: 0,
+            // max: setMax(maxa),
+            // interval: setMax(maxa) / 5,
           },
           {
             type: 'value',
@@ -127,9 +137,10 @@ export default {
               color: '#fff',
               // padding: [0, 0, 0, 20],
             },
-            min: 0,
-            max: setMax(maxb),
-            interval: setMax(maxb) / 5,
+            alignTicks: true,
+            // min: 0,
+            // max: setMax(maxb),
+            // interval: setMax(maxb) / 5,
           },
         ],
         legend: {
@@ -141,18 +152,17 @@ export default {
             fontSize: 11
           },
           top: '15',
-          // 使用回调函数
-          formatter: function (name) {
-            console.log(name)
-            var currentObj = _this.legendData.find(item => item.name === name)
-            return name + ':' + currentObj.value;
-          },
+          // 使用回调函数:加上数值方法
+          // formatter: function (name) {
+          //   console.log(name)
+          //   var currentObj = _this.legendData.find(item => item.name === name)
+          //   return name + ':' + currentObj.value;
+          // },
           data: _this.legendData.map(item => item.name),
         },
         series: [
           {
             name: '辐射强度值',
-            data: [150, 230, 224, 218, 135, 147, 260],
             type: 'line',
             // symbol: 'circle',
             // symbolSize: 2,
@@ -182,7 +192,8 @@ export default {
                   }
                 ])
               }
-            }
+            },
+            data: _this.fusheData,
           },
           {
             name: '温度实值',
@@ -208,7 +219,7 @@ export default {
                 ])
               }
             },
-            data: [120, 132, 101, 134, 90, 230, 210],
+            data: _this.wenduData,
           },
           {
             name: '湿度实值',
@@ -234,7 +245,7 @@ export default {
                 ])
               }
             },
-            data: [220, 182, 191, 234, 290, 330, 310],
+            data: _this.shiduData,
           }
         ]
       };
@@ -242,6 +253,37 @@ export default {
       window.addEventListener("resize", ()=>{
         this.uEcharts.resize();
       });
+    },
+    refreshData(data){
+      var wendu = data.find(item => item.Name === '温度实值-实时')
+      var shidu = data.find(item => item.Name === '湿度实值-实时')
+      var fushe = data.find(item => item.Name === '辐射强度值-实时')
+      var time = data.find(item => item.Name === '实时曲线-时间分布')
+      this.wenduData = wendu ? wendu.Values : []
+      this.shiduData = shidu ? shidu.Values : []
+      this.fusheData = fushe ? fushe.Values : []
+      this.timeData = time ? time.Values : []
+      // console.log(this.shiduData)
+      var _this = this
+      this.uEcharts.setOption({
+        xAxis: {
+          data: this.timeData
+        },
+        series: [
+          {
+            name: '辐射强度值',
+            data: _this.fusheData
+          },
+          {
+            name: '温度实值',
+            data: _this.wenduData
+          },
+          {
+            name: '湿度实值',
+            data: _this.shiduData
+          },
+        ]
+      });
     }
   }
 }

+ 13 - 5
src/views/modules_guAn/visualization/modules/RunningState.vue

@@ -52,25 +52,25 @@
           <div class="ceecee">终段</div>
           <div class="riice">次数</div>
         </div>
-        <div class="item">
+        <div class="item" @click="handleXunhuan('内部循环1')">
           <div class="leece">1</div>
           <div class="ceece">{{ nx1.start }}</div>
           <div class="ceecee">{{ nx1.end }}</div>
           <div class="riice">{{ nx1.frequency }}</div>
         </div>
-        <div class="item">
+        <div class="item" @click="handleXunhuan('内部循环2')">
           <div class="leece">2</div>
           <div class="ceece">{{ nx2.start }}</div>
           <div class="ceecee">{{ nx2.end }}</div>
           <div class="riice">{{ nx2.frequency }}</div>
         </div>
-        <div class="item">
+        <div class="item" @click="handleXunhuan('内部循环3')">
           <div class="leece">3</div>
           <div class="ceece">{{ nx3.start }}</div>
           <div class="ceecee">{{ nx3.end }}</div>
           <div class="riice">{{ nx3.frequency }}</div>
         </div>
-        <div class="item">
+        <div class="item" @click="handleXunhuan('内部循环4')">
           <div class="leece">4</div>
           <div class="ceece">{{ nx4.start }}</div>
           <div class="ceecee">{{ nx4.end }}</div>
@@ -219,6 +219,8 @@ export default {
       residueTime: '',
       allTime: '',
       schedule: '',
+      // 选择循环
+      chooseXunhuan: ''
     }
   },
   watch: {
@@ -613,7 +615,7 @@ export default {
           }]
       }
       option && this.zhuChart.setOption(option);
-    }
+    },
     // drawzhuzhuang(){
     //   var chartDom = this.$refs.zhuzhuang
     //   this.zhuChart = echarts.init(chartDom);
@@ -703,6 +705,12 @@ export default {
     //   };
     //   option && this.zhuChart.setOption(option);
     // },
+    // 点击循环
+    handleXunhuan(number){
+      // 设置一个-1值,实现再次点击取消高亮
+      this.chooseXunhuan = this.chooseXunhuan === number ? '-1' : number
+      this.$emit('click', this.chooseXunhuan)
+    },
   }
 }
 </script>

+ 14 - 1
src/views/modules_guAn/visualization/modules/SurveillanceVideo.vue

@@ -2,7 +2,9 @@
   <div class="surveillance-video-module">
     <common-title title="安防监控视频"></common-title>
     <div class="visualization-common-border">
-
+      <div class="video-container">
+        <div class="video-img"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -34,4 +36,15 @@ export default {
     width: 100%;
     height: 100%;
   }
+  .video-container{
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+  }
+  .video-img{
+    width: 100%;
+    height: 100%;
+    background: url('../../../../assets/visualization/video.png') no-repeat center center;
+    background-size: cover;
+  }
 </style>

+ 153 - 46
src/views/modules_guAn/visualization/modules/YuzhiCurve.vue

@@ -12,6 +12,27 @@ import * as echarts from "echarts"
 import commonTitle from '../components/commonTitle.vue'
 import { setMax } from "../components/common.js";
 
+var moniData = [
+  {
+    circname:"内部循环1",
+    begintime: '00:00',
+    endtime: '00:40',
+    sections:[
+      {secname:0,temperature:'50.0',humidity:'78.0',time:"00:00"},
+      {secname:1,temperature:'40.0',humidity:'78.0',time:"00:20"},
+      {secname:2,temperature:'40.0',humidity:'58.0',time:"00:40"}
+    ],
+  },
+  {
+    circname:"内部循环2",
+    begintime: '00:50',
+    endtime: '01:10',
+    sections:[
+      {secname:4,temperature:'40.0',humidity:'-58.0',time:"00:50"},
+      {secname:5,temperature:'60.0',humidity:'-88.0',time:"01:10"}
+    ]
+  },
+]
 export default {
   components: { commonTitle },
   name: '',
@@ -25,6 +46,11 @@ export default {
   },
   data () {
     return {
+      chooseXunhuan: {
+        circname: '',
+        begintime: '',
+        endtime: ''
+      },
       uEcharts: null,
       uOption: null,
       legendData: [
@@ -32,9 +58,14 @@ export default {
         { name: '温度实值', value: 50 },
         { name: '湿度实值', value: 60.3 },
       ],
-      fusheData: [150, 230, 224, 218, 135, 147, 260],
-      wenduData: [120, 132, 101, 134, 90, 230, 210],
-      shiduData: [220, 182, 191, 234, 290, 330, 310],
+      fusheData: [],
+      wenduData: [],
+      shiduData: [],
+      timeData: [],
+      // 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']
     }
   },
   watch: {
@@ -44,9 +75,32 @@ export default {
       },
       immediate: true,
       deep: true
-    }
+    },
+    'chooseXunhuan.circname': {
+      handler(newValue, oldValue){
+        if(newValue){
+          console.log(newValue, oldValue)
+          var value = newValue.find(item => item.circname === newValue)
+          console.log(value)
+          if(value){
+            this.chooseXunhuan.circname = value.circname
+            this.chooseXunhuan.begintime = value.begintime
+            this.chooseXunhuan.endtime = value.endtime
+          } else {
+            this.chooseXunhuan.circname = ''
+            this.chooseXunhuan.begintime = ''
+            this.chooseXunhuan.endtime = ''
+          }
+        }
+        console.log(this.chooseXunhuan)
+        this.changeData(this.data)
+      },
+      // immediate: true,
+      deep: true
+    },
   },
   created () {
+    // this.changeData(moniData)
   },
   mounted () {
     this.$nextTick(() => {
@@ -66,6 +120,9 @@ export default {
           left: '46',
           bottom: '40'
         },
+        tooltip: {
+          trigger: 'axis',
+        },
         xAxis: {
           type: 'category',
           axisTick: { show: false }, // 横坐标刻度
@@ -80,7 +137,7 @@ export default {
               color: '#fff'
             }
           },
-          data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00']
+          data: _this.timeData
         },
         yAxis: [
           {
@@ -103,9 +160,10 @@ export default {
               color: '#fff',
               padding: [0, 0, 0, 20],
             },
-            min: 0,
-            max: setMax(maxa),
-            interval: setMax(maxa) / 5,
+            alignTicks: true,
+            // min: 0,
+            // max: setMax(maxa),
+            // interval: setMax(maxa) / 5,
           },
           {
             type: 'value',
@@ -127,9 +185,10 @@ export default {
               color: '#fff',
               // padding: [0, 0, 0, 20],
             },
-            min: 0,
-            max: setMax(maxb),
-            interval: setMax(maxb) / 5,
+            alignTicks: true,
+            // min: 0,
+            // max: setMax(maxb),
+            // interval: setMax(maxb) / 5,
           },
         ],
         legend: {
@@ -141,12 +200,12 @@ export default {
             fontSize: 11
           },
           top: '15',
-          // 使用回调函数
-          formatter: function (name) {
-            console.log(name)
-            var currentObj = _this.legendData.find(item => item.name === name)
-            return name + ':' + currentObj.value;
-          },
+          // 使用回调函数:加上数值方法
+          // formatter: function (name) {
+          //   console.log(name)
+          //   var currentObj = _this.legendData.find(item => item.name === name)
+          //   return name + ':' + currentObj.value;
+          // },
           data: _this.legendData.map(item => item.name),
         },
         series: [
@@ -195,7 +254,7 @@ export default {
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
                   {
                     offset: 0,
-                    color: 'rgb(207, 168, 9, 0)'
+                    color: 'rgba(207, 168, 9, .8)'
                   },
                   {
                     offset: 0.5,
@@ -203,11 +262,27 @@ export default {
                   },
                   {
                     offset: 1,
-                    color: 'rgb(207, 168, 9, 0)'
+                    color: 'rgba(207, 168, 9, .8)'
                   }
                 ])
               }
             },
+            markArea: {
+              itemStyle: {
+                color: 'rgba(255, 173, 177, 0.4)'
+              },
+              data: [
+                [
+                  {
+                    name: _this.chooseXunhuan.circname,
+                    xAxis: _this.chooseXunhuan.begintime
+                  },
+                  {
+                    xAxis: _this.chooseXunhuan.endtime
+                  }
+                ],
+              ]
+            },
             data: _this.wenduData,
           },
           {
@@ -221,7 +296,7 @@ export default {
                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
                   {
                     offset: 0,
-                    color: 'rgb(73, 228, 233, 0)'
+                    color: 'rgba(73, 228, 233, .8)'
                   },
                   {
                     offset: 0.5,
@@ -229,7 +304,7 @@ export default {
                   },
                   {
                     offset: 1,
-                    color: 'rgb(73, 228, 233, 0)'
+                    color: 'rgba(73, 228, 233, .8)'
                   }
                 ])
               }
@@ -243,31 +318,63 @@ export default {
         this.uEcharts.resize();
       });
     },
-    // // 取最大值
-    // setMax(num) {
-    //   // 1.判断是否小数:  //判断是否含有小数点:要检索的字符串值没有出现,则该方法返回 -1。
-    //   if (num.toString().indexOf(".") != -1) {//有小数点
-    //     num = Math.ceil(num);//向上取整
-    //   }
-    //   // 2.向上取整数倍
-    //   if (num.toString().length < 2) {
-    //     // 一位数1
-    //     num = 10;
-    //   } else if (num.toString().length < 3) {
-    //     // 2位数
-    //     num = Math.ceil(num / 5) * 5;// 变成最近的5的倍数
-    //   } else {
-    //     // 位数--先判断是不是1000...的倍数
-    //     var t = '';
-    //     for (let i = 0; i < num.toString().length - 1; i++) {
-    //       t += '0';//'0000...'
-    //     }
-    //     if ((num % Number(1 + t)) != 0) {//不是100的倍数
-    //       num = (Number(num.toString().substr(0, 1)) + 1) * Number(1 + t);
-    //     }
-    //   }
-    //   return num
-    // }
+    // 改变获取数据为所需格式
+    changeData(data){
+      console.log('预制曲线数据', data)
+      data.forEach(element => {
+        var wenduArr = element.sections.map(item => {
+          return item.temperature
+        })
+        var shiduArr = element.sections.map(item => {
+          return item.humidity
+        })
+        var timeArr = element.sections.map(item => {
+          return item.time
+        })
+        this.wenduData = [...this.wenduData, ...wenduArr]
+        this.shiduData = [...this.shiduData, ...shiduArr]
+        this.timeData = [...this.timeData, ...timeArr]
+        console.log(this.wenduData)
+        console.log(this.shiduData)
+      });
+      var _this = this
+      this.uEcharts.setOption({
+        xAxis: {
+          data: this.timeData
+        },
+        series: [
+          {
+            name: '辐射强度值',
+            data: _this.fusheData
+          },
+          {
+            name: '温度实值',
+            markArea: {
+              itemStyle: {
+                color: 'rgba(67, 172, 225, 0.4)'
+                // color: 'rgba(255, 173, 177, 0.4)'
+              },
+              data: [
+                [
+                  {
+                    name: _this.chooseXunhuan.circname,
+                    xAxis: _this.chooseXunhuan.begintime
+                  },
+                  {
+                    xAxis: _this.chooseXunhuan.endtime
+                  }
+                ],
+              ]
+            },
+            data: _this.wenduData
+          },
+          {
+            name: '湿度实值',
+            data: _this.shiduData
+          },
+        ]
+      });
+    },
   }
 }
 </script>

+ 21 - 2
src/views/modules_guAn/visualization/modules/info3D.vue

@@ -17,6 +17,13 @@
 <script>
 import commonTitle from '../components/commonTitle.vue'
 
+var eqStatus = [
+  { name: '设备停止', value: 1 },
+  { name: '设备故障', value: 2 },
+  { name: '设备运行', value: 3 },
+  { name: '设备运行(等待)', value: 4 },
+]
+
 export default {
   components: { commonTitle },
   name: '',
@@ -60,10 +67,22 @@ export default {
     changeData(newValue){
       var newArr = this.staticData.map(item=>{
         var findObj = newValue.find(val=>val.Name === item.webName)
-        // 如果页面为“-”则表示数据没有找到
+        var value = ''
+        if(findObj){
+          if(item.name === '设备状态'){
+            var status = eqStatus.find(ele => ele.value === findObj.Value)
+            console.log('设备状态:', status)
+            value = status ? status.name : '-'
+          } else {
+            value = findObj.Value
+          }
+        } else {
+          // 如果页面为“-”则表示数据没有找到
+          value = '-'
+        }
         return {
           name: item.name,
-          value: findObj?findObj.Value:'-'
+          value: value
         }
       })
       this.raelDate = newArr