试验状态信息修改并接收数据

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

@@ -1,48 +1,41 @@
 <template>
   <div class="test-statusInfo-module">
     <common-title title="试验状态信息"></common-title>
-    <div class="visualization-common-border box">
-      <div>
-        <div class="item">
-          <div class="itemHead">A机组</div>
-          <div class="itemCenter">
-            <!-- <div>
-              <div class="lef">A1压机吸气：</div>
-              <div class="rig">() bar</div>
+    <div class="visualization-common-border">
+      <div class="content u-flex-jab">
+        <div class="item-zuji" v-for="(zuji, key) in raelDate" :key="key">
+          <div class="item-title">{{zuji.title}}</div>
+          <div class="children-con u-flex-jaa">
+            <div class="item-data" v-for="(item, index) in zuji.children" :key="index">
+              {{ item.name }}：{{ item.value }} bar
             </div>
-            <div>
-              <div class="lef">A2压机吸气：</div>
-              <div class="rig">() bar</div>
-            </div> -->
-            <div>A1压机吸气：() bar</div>
-            <div>A2压机吸气：() bar</div>
           </div>
+        </div>
+
+        <!-- <div class="item">
+          <div class="itemHead">C机组</div>
           <div class="itemCenter">
-            <!-- <div>
-              <div class="lef">A1压机排气：</div>
-              <div class="rig">() bar</div>
-            </div>
-            <div>
-              <div class="lef">A2压机排气：</div>
-              <div class="rig">() bar</div>
-            </div> -->
-            <div>A1压机排气：() bar</div>
-            <div>A2压机排气：() bar</div>
+            <div>C1压机吸气：() bar</div>
+            <div>C2压机吸气：() bar</div>
+          </div>
+          <div class="itemCenter">
+            <div>C1压机排气：() bar</div>
+            <div>C2压机排气：() bar</div>
           </div>
           <div class="itemCenter">
-            <div>B1压机吸气：() bar</div>
-            <div>B2压机吸气：() bar</div>
+            <div>D1压机吸气：() bar</div>
+            <div>D2压机吸气：() bar</div>
           </div>
           <div class="itemCenter">
-            <div>B1压机排气：() bar</div>
-            <div>B2压机排气：() bar</div>
+            <div>D1压机排气：() bar</div>
+            <div>D2压机排气：() bar</div>
           </div>
         </div>
         <div class="item">
           <div class="itemHead">E机组</div>
           <div class="itemCenter">
-            <div>E1压机吸气：() bar</div>
-            <div>E2压机吸气：() bar</div>
+            <div>E1压机吸气：(1.05) bar</div>
+            <div>E2压机吸气：(12) bar</div>
           </div>
           <div class="itemCenter">
             <div>E1压机排气：() bar</div>
@@ -58,62 +51,41 @@
           </div>
         </div>
         <div class="item">
-          <div class="itemHead">I机组</div>
-          <div class="itemCenter">
-            <div>I1压机吸气：() bar</div>
-            <div>I2压机吸气：() bar</div>
-          </div>
-          <div class="itemCenter">
-            <div>I1压机排气：() bar</div>
-            <div>I2压机排气：() bar</div>
-          </div>
-          <div class="itemCenter">
-            <div>J1压机吸气：() bar</div>
-            <div>J2压机吸气：() bar</div>
-          </div>
-          <div class="itemCenter">
-            <div>J1压机排气：() bar</div>
-            <div>J2压机排气：() bar</div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div class="item">
-          <div class="itemHead">C机组</div>
+          <div class="itemHead">G机组</div>
           <div class="itemCenter">
-            <div>C1压机吸气：() bar</div>
-            <div>C2压机吸气：() bar</div>
+            <div>G1压机吸气：() bar</div>
+            <div>G2压机吸气：() bar</div>
           </div>
           <div class="itemCenter">
-            <div>C1压机排气：() bar</div>
-            <div>C2压机排气：() bar</div>
+            <div>G1压机排气：() bar</div>
+            <div>G2压机排气：() bar</div>
           </div>
           <div class="itemCenter">
-            <div>D1压机吸气：() bar</div>
-            <div>D2压机吸气：() bar</div>
+            <div>H1压机吸气：() bar</div>
+            <div>H2压机吸气：() bar</div>
           </div>
           <div class="itemCenter">
-            <div>D1压机排气：() bar</div>
-            <div>D2压机排气：() bar</div>
+            <div>H1压机排气：() bar</div>
+            <div>H2压机排气：() bar</div>
           </div>
         </div>
         <div class="item">
-          <div class="itemHead">G机组</div>
+          <div class="itemHead">I机组</div>
           <div class="itemCenter">
-            <div>G1压机吸气：() bar</div>
-            <div>G2压机吸气：() bar</div>
+            <div>I1压机吸气：() bar</div>
+            <div>I2压机吸气：() bar</div>
           </div>
           <div class="itemCenter">
-            <div>G1压机排气：() bar</div>
-            <div>G2压机排气：() bar</div>
+            <div>I1压机排气：() bar</div>
+            <div>I2压机排气：() bar</div>
           </div>
           <div class="itemCenter">
-            <div>H1压机吸气：() bar</div>
-            <div>H2压机吸气：() bar</div>
+            <div>J1压机吸气：() bar</div>
+            <div>J2压机吸气：() bar</div>
           </div>
           <div class="itemCenter">
-            <div>H1压机排气：() bar</div>
-            <div>H2压机排气：() bar</div>
+            <div>J1压机排气：() bar</div>
+            <div>J2压机排气：() bar</div>
           </div>
         </div>
         <div class="item">
@@ -130,7 +102,7 @@
             <div>变频器3：() Hz</div>
             <div>变频器4：() Hz</div>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -142,8 +114,107 @@ import commonTitle from '../components/commonTitle.vue'
 export default {
   components: { commonTitle },
   name: '',
+  props: {
+    data: {
+      type: Array,
+      default: []
+    }
+  },
   data () {
     return {
+      staticData: [
+        {
+          title: 'A组机',
+          children: [
+            { name: 'A1压机吸气', value: '0.01' },
+            { name: 'A2压机吸气', value: '12' },
+            { name: 'A1压机排气', value: '363' },
+            { name: 'A2压机排气', value: '0.1' },
+            { name: 'B1压机吸气', value: '0.12' },
+            { name: 'B2压机吸气', value: '0.11' },
+            { name: 'B1压机排气', value: '0.001' },
+            { name: 'B2压机排气', value: '22' },
+          ]
+        },
+        {
+          title: 'C组机',
+          children: [
+            { name: 'C1压机吸气', value: '0.01' },
+            { name: 'C2压机吸气', value: '3' },
+            { name: 'C1压机排气', value: '12' },
+            { name: 'C2压机排气', value: '52' },
+            { name: 'D1压机吸气', value: '22' },
+            { name: 'D2压机吸气', value: '6.555' },
+            { name: 'D1压机排气', value: '2.23' },
+            { name: 'D2压机排气', value: '0.001' },
+          ]
+        },
+        {
+          title: 'E组机',
+          children: [
+            { name: 'E1压机吸气', value: '' },
+            { name: 'E2压机吸气', value: '' },
+            { name: 'E1压机排气', value: '' },
+            { name: 'E2压机排气', value: '' },
+            { name: 'F1压机吸气', value: '' },
+            { name: 'F2压机吸气', value: '' },
+            { name: 'F1压机排气', value: '' },
+            { name: 'F2压机排气', value: '' },
+          ]
+        },
+        {
+          title: 'G组机',
+          children: [
+            { name: 'G1压机吸气', value: '' },
+            { name: 'G2压机吸气', value: '' },
+            { name: 'G1压机排气', value: '' },
+            { name: 'G2压机排气', value: '' },
+            { name: 'H1压机吸气', value: '' },
+            { name: 'H2压机吸气', value: '' },
+            { name: 'H1压机排气', value: '' },
+            { name: 'H2压机排气', value: '' },
+          ]
+        },
+        {
+          title: 'I机组',
+          children: [
+            { name: 'I1压机吸气', value: '' },
+            { name: 'I2压机吸气', value: '' },
+            { name: 'I1压机排气', value: '' },
+            { name: 'I2压机排气', value: '' },
+            { name: 'J1压机吸气', value: '' },
+            { name: 'J2压机吸气', value: '' },
+            { name: 'J1压机排气', value: '' },
+            { name: 'J2压机排气', value: '' },
+          ]
+        },
+      ],
+      raelDate: []
+    }
+  },
+  watch: {
+    data: {
+      handler(newValue, oldValue){
+        console.log(newValue, oldValue)
+        var newArr = this.staticData.map(res=>{
+          var childrenArr = res.children.map(item=>{
+            var findObj = newValue.find(val=>val.Name === item.name+'压力采集值')
+            return {
+              name: item.name,
+              value: findObj.Value
+            }
+          })
+          return {
+            title: res.title,
+            children: childrenArr
+          }
+        })
+        // this.raelDate = newArr
+        this.raelDate = this.staticData
+        // console.log(this.raelDate)
+      },
+      immediate: true,
+      deep: true
     }
   },
   created () {
@@ -156,60 +227,36 @@ export default {
 </script>
 
 <style scoped>
-  @import '~@assets/less/uStyle.less';
+  @import '~@/assets/less/uStyle.less';
 </style>
 <style lang="less" scoped>
   .test-statusInfo-module{
     width: 100%;
     height: 100%;
-  }
-  .box {
-    // border: 1px solid rgb(255, 255, 255);
-    display: flex;
-    /* row (默认值) : 主轴为水平万向，起点在左端。*/
-    flex-direction: row;
-  }
-  .box>div{
-    width: 50%;
-    height: 89%;
-    margin: 3%;
-    // border: 1px solid rgb(255, 255, 255);
-  }
-  .item{
-    width: 94%;
-    height: 30%;
-    margin: 3%;
-    // border: 1px solid rgb(255, 255, 255);
-    color: #FEFFFE;
-    font-size: 8px;
-  }
-  .itemHead{
-    height: 17%;
-    display: flex;
-    justify-content: center;
-  }
-  .itemCenter{
-    display: flex;
-    justify-content: space-between;
-    flex: 1;
-  }
-  .itemCenter>div{
-    width: 50%;
-    height: 30%;
-    display: flex;
-    justify-content: center;
-    flex: 1;
-  }
-  .lef{
-    width: 50%;
-    height: 100%;
-    display: flex;
-    justify-content: end;
-  }
-  .rig{
-    width: 50%;
-    height: 100%;
-    display: flex;
-    justify-content: start;
+    .content{
+      width: 100%;
+      height: 100%;
+      flex-wrap: wrap;
+      padding: 10px 2%;
+      .item-zuji{
+        width: 49.5%;
+        color: #FEFFFE;
+        font-size: 10px;
+        .item-title{
+          text-align: center;
+        }
+        .children-con{
+          flex-wrap: wrap;
+          flex-basis: auto;
+          width: 100%;
+        }
+        .item-data{
+          min-width: 106px;
+          max-width: 50%;
+          color: #FEFFFE;
+          font-size: 10px;
+        }
+      }
+    }
   }
 </style>