程序运行状态数据对接

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

@@ -11,13 +11,13 @@
         </div>
         <div class="item">
           <div class="lee">循环设定</div>
-          <div class="cee">0</div>
-          <div class="rii">0</div>
+          <div class="cee">{{ targetXhQb }}</div>
+          <div class="rii">{{ targetXhNb }}</div>
         </div>
         <div class="item">
           <div class="lee">循环运行</div>
-          <div class="cee">0</div>
-          <div class="rii">0</div>
+          <div class="cee">{{ runXhQb }}</div>
+          <div class="rii">{{ runXhNb }}</div>
         </div>
         <div class="itemHead">
           <div class="lee"></div>
@@ -26,18 +26,18 @@
         </div>
         <div class="item">
           <div class="lee">温度</div>
-          <div class="cee">0</div>
-          <div class="rii">0</div>
+          <div class="cee">{{startT}}</div>
+          <div class="rii">{{targetT}}</div>
         </div>
         <div class="item">
           <div class="lee">湿度</div>
-          <div class="cee">0</div>
-          <div class="rii">0</div>
+          <div class="cee">{{startH}}</div>
+          <div class="rii">{{targetH}}</div>
         </div>
         <div class="item">
           <div class="lee">辐射强度</div>
-          <div class="cee">0</div>
-          <div class="rii">0</div>
+          <div class="cee">{{startF}}</div>
+          <div class="rii">{{targetF}}</div>
         </div>
         <!-- <div style="width: 100%; height: 12%; margin-bottom: 4.5px; display: flex;">
           <div style="width: 45%; height: 100%; font-size: 11px; color: #0CB8FF; display: flex; align-items: center; justify-content: center;">预计结束时间:</div>
@@ -54,27 +54,27 @@
         </div>
         <div class="item">
           <div class="leece">1</div>
-          <div class="ceece">0</div>
-          <div class="ceecee">0</div>
-          <div class="riice">0</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="leece">2</div>
-          <div class="ceece">0</div>
-          <div class="ceecee">0</div>
-          <div class="riice">0</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="leece">3</div>
-          <div class="ceece">0</div>
-          <div class="ceecee">0</div>
-          <div class="riice">0</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="leece">4</div>
-          <div class="ceece">0</div>
-          <div class="ceecee">0</div>
-          <div class="riice">0</div>
+          <div class="ceece">{{ nx4.start }}</div>
+          <div class="ceecee">{{ nx4.end }}</div>
+          <div class="riice">{{ nx4.frequency }}</div>
         </div>
         <div class="itemHead">
           <div class="leece">总运行</div>
@@ -84,13 +84,13 @@
         </div>
         <div class="item">
           <div class="leece">运行段数</div>
-          <div class="ceece">0</div>
+          <div class="ceece">{{runSegment}}</div>
           <div class="ceecee"></div>
           <div class="riice"></div>
         </div>
         <div class="item">
           <div class="leece">设定段数</div>
-          <div class="ceece">0</div>
+          <div class="ceece">{{targetSegment}}</div>
           <div class="ceecee"></div>
           <div class="riice"></div>
         </div>
@@ -103,28 +103,28 @@
         </div>
         <div class="item">
           <div class="leeri">运行程序号</div>
-          <div class="riiri">0</div>
+          <div class="riiri">{{procedureNo}}</div>
         </div>
         <div class="item">
           <div class="leeri">运行段号</div>
-          <div class="riiri">0</div>
+          <div class="riiri">{{segmentNo}}</div>
         </div>
         <div class="item">
           <div class="leeri">运行时间</div>
-          <div class="riiri">0min</div>
+          <div class="riiri">{{runTime}}min</div>
         </div>
         <div class="item">
           <div class="leeri">段余时间</div>
-          <div class="riiri">0min</div>
+          <div class="riiri">{{residueTime}}min</div>
         </div>
         <div class="item">
           <div class="leeri">段总时间</div>
-          <div class="riiri">0min</div>
+          <div class="riiri">{{allTime}}min</div>
         </div>
         <div class="echarts">
           <div style="width: 30%; height: 100%; font-size: 12px; color: #0CB8FF; display: flex; align-items: center; padding-left:1%;">段进度</div>
-          <div style="width: 60%; height: 100%;" ref="zhuzhuang"></div>
-          <div style="width: 10%; height: 100%; font-size: 9px; color: #FEFFFE; display: flex; align-items: center; justify-content: center; padding-top:2%;">80%</div>
+          <div style="width: 55%; height: 100%;" ref="zhuzhuang"></div>
+          <div style="width: 10%; height: 100%; font-size: 9px; color: #FEFFFE; display: flex; align-items: center; justify-content: center; padding-top:2%;">{{schedule}}%</div>
         </div>
       </div>
     </div>
@@ -138,8 +138,96 @@ import * as echarts from 'echarts';
 export default {
   components: { commonTitle },
   name: '',
+  props: {
+    data: {
+      type: Array,
+      default: []
+    }
+  },
   data () {
     return {
+      // 获取数据(总)
+      dataList: [],
+      // 温度
+      template: '',
+      // 温度输出
+      outputT: '',
+      // 升温/降温(0升温，1降温，3啥也不是)
+      statusT: 3,
+      // 目标温度
+      targetT: '',
+      // 斜率设定（温度）
+      slopeT: '',
+      // 起始温度
+      startT: '',
+      // 辐照强度
+      // 吹风
+      // 时间
+      // 辐照强度设定
+      targetF: '0',
+      // 辐射强度起始
+      startF: '0',
+      // 湿度
+      humidity: '',
+      // 湿度输出
+      outputH: '',
+      // 加湿/除湿(0加湿，1除湿，3啥也不是)
+      statusH: 3,
+      // 目标湿度
+      targetH: '',
+      // 起始湿度
+      startH: '',
+      // 程序运行状态
+      // 循环设定(全部)
+      targetXhQb: '',
+      // 循环设定(内部)
+      targetXhNb: '',
+      // 循环运行(全部)
+      runXhQb: '',
+      // 循环运行(内部)
+      runXhNb: '',
+      // 内循环
+      nx1: {
+        start: '',
+        end: '',
+        frequency: ''
+      },
+      nx2: {
+        start: '',
+        end: '',
+        frequency: ''
+      },
+      nx3: {
+        start: '',
+        end: '',
+        frequency: ''
+      },
+      nx4: {
+        start: '',
+        end: '',
+        frequency: ''
+      },
+      // 总运行
+      runSegment: '',
+      targetSegment: '',
+      // 当前
+      procedureNo: '',
+      segmentNo: '',
+      runTime: '',
+      residueTime: '',
+      allTime: '',
+      schedule: '',
+    }
+  },
+  watch: {
+    data: {
+      handler(newValue, oldValue){
+        console.log(77,newValue, oldValue)
+        this.dataList = newValue
+        this.getList()
+      },
+      immediate: true,
+      deep: true
     }
   },
   created () {
@@ -152,6 +240,110 @@ export default {
     });
   },
   methods: {
+    getList(){
+      // console.log(this.dataList)
+      for (var i = 0; i < this.dataList.length; i++) {
+        console.log(i,this.dataList[i].Name)
+        // 温度
+        if (this.dataList[i].Name == '温度设定值') {
+          this.targetT = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '起始温度值') {
+          this.startT = this.dataList[i].Value
+        }
+        // 辐照
+        // 湿度
+        if (this.dataList[i].Name == '湿度设定值') {
+          this.targetH = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '起始湿度值') {
+          this.startH = this.dataList[i].Value
+        }
+        // 循环
+        if (this.dataList[i].Name == '全部循环设定值') {
+          this.targetXhQb = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '内部循环设定值') {
+          this.targetXhNb = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '全部循环运行值') {
+          this.runXhQb = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '内部循环运行值') {
+          this.runXhNb = this.dataList[i].Value
+        }
+        // 内循环
+        // 1
+        if (this.dataList[i].Name == '内部循环1_启始段') {
+          this.nx1.start = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '内部循环1_结束段') {
+          this.nx1.end = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '内部循环1_次数') {
+          this.nx1.frequency = this.dataList[i].Value
+        }
+        // 2
+        if (this.dataList[i].Name == '内部循环2_启始段') {
+          this.nx2.start = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '内部循环2_结束段') {
+          this.nx2.end = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '内部循环2_次数') {
+          this.nx2.frequency = this.dataList[i].Value
+        }
+        // 3
+        if (this.dataList[i].Name == '内部循环3_启始段') {
+          this.nx3.start = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '内部循环3_结束段') {
+          this.nx3.end = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '内部循环3_次数') {
+          this.nx3.frequency = this.dataList[i].Value
+        }
+        // 4
+        if (this.dataList[i].Name == '内部循环4_启始段') {
+          this.nx4.start = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '内部循环4_结束段') {
+          this.nx4.end = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '内部循环4_次数') {
+          this.nx4.frequency = this.dataList[i].Value
+        }
+        // 总运行
+        if (this.dataList[i].Name == '总的运行段数') {
+          this.runSegment = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '总的设定段数') {
+          this.targetSegment = this.dataList[i].Value
+        }
+        // 当前
+        if (this.dataList[i].Name == '当前运行程序号') {
+          this.procedureNo = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '当前运行段号') {
+          this.segmentNo = this.dataList[i].Value
+        }
+        if (this.dataList[i].Name == '程序段运行时间') {
+          this.runTime = Math.floor(this.dataList[i].Value / 60)
+        }
+        if (this.dataList[i].Name == '段余时间') {
+          this.residueTime = Math.floor(this.dataList[i].Value / 60)
+        }
+        if (this.dataList[i].Name == '程序段设定时间') {
+          this.allTime = Math.floor(this.dataList[i].Value / 60)
+        }
+        if (this.dataList[i].Name == '段进度') {
+          this.schedule = this.dataList[i].Value * 100
+          this.$nextTick(() => {
+            this.drawzhuzhuang()
+          })
+        }
+      }
+    },
     drawzhuzhuang(){
       var chartDom = this.$refs.zhuzhuang
       this.zhuChart = echarts.init(chartDom);
@@ -201,8 +393,9 @@ export default {
       echarts.graphic.registerShape('CubeLeft', CubeLeft)
       echarts.graphic.registerShape('CubeRight', CubeRight)
       echarts.graphic.registerShape('CubeTop', CubeTop)
-      const MAX = [6000]
-      const VALUE = [5000]
+      const MAX = [100]
+      // const VALUE = [50]
+      const VALUE = [this.schedule]
       const NAMES = ['进度'];
       option = {
           // backgroundColor: "#010d3a",
@@ -637,7 +830,7 @@ export default {
     justify-content: center;
   }
   .leeri{
-    width: 65%;
+    width: 56%;
     height: 100%;
     font-size: 12px;
     // border: 1px solid rgb(255, 255, 255);