试验状态信息

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

@@ -1,8 +1,121 @@
 <template>
   <div class="test-statusInfo-module">
     <common-title title="试验状态信息"></common-title>    
-    <div class="visualization-common-border">
-
+    <div class="visualization-common-border box">
+      <div>
+        <div class="item">
+          <div class="itemHead">A机组</div>
+          <div class="itemCenter">
+            <div>A1压机吸气：(1) bar</div>
+            <div>A2压机吸气：(22) bar</div>
+          </div>
+          <div class="itemCenter">
+            <div>A1压机排气：(21) bar</div>
+            <div>A2压机排气：(2222) bar</div>
+          </div>
+          <div class="itemCenter">
+            <div>B1压机吸气：() bar</div>
+            <div>B2压机吸气：() bar</div>
+          </div>
+          <div class="itemCenter">
+            <div>B1压机排气：() bar</div>
+            <div>B2压机排气：() bar</div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="itemHead">E机组</div>
+          <div class="itemCenter">
+            <div>E1压机吸气：() bar</div>
+            <div>E2压机吸气：() bar</div>
+          </div>
+          <div class="itemCenter">
+            <div>E1压机排气：() bar</div>
+            <div>E2压机排气：() bar</div>
+          </div>
+          <div class="itemCenter">
+            <div>F1压机吸气：() bar</div>
+            <div>F2压机吸气：() bar</div>
+          </div>
+          <div class="itemCenter">
+            <div>F1压机排气：() bar</div>
+            <div>F2压机排气：() bar</div>
+          </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="itemCenter">
+            <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>D1压机吸气：() bar</div>
+            <div>D2压机吸气：() bar</div>
+          </div>
+          <div class="itemCenter">
+            <div>D1压机排气：() bar</div>
+            <div>D2压机排气：() bar</div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="itemHead">G机组</div>
+          <div class="itemCenter">
+            <div>G1压机吸气：() bar</div>
+            <div>G2压机吸气：() bar</div>
+          </div>
+          <div class="itemCenter">
+            <div>G1压机排气：() bar</div>
+            <div>G2压机排气：() bar</div>
+          </div>
+          <div class="itemCenter">
+            <div>H1压机吸气：() bar</div>
+            <div>H2压机吸气：() bar</div>
+          </div>
+          <div class="itemCenter">
+            <div>H1压机排气：() bar</div>
+            <div>H2压机排气：() bar</div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="itemHead"> </div>
+          <div class="itemCenter">
+            <div>氧浓度1：() mg/L</div>
+            <div>氧浓度2：() mg/L</div>
+          </div>
+          <div class="itemCenter">
+            <div>变频器1：() Hz</div>
+            <div>变频器2：() Hz</div>
+          </div>
+          <div class="itemCenter">
+            <div>变频器3：() Hz</div>
+            <div>变频器4：() Hz</div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -29,9 +142,46 @@ export default {
 <style scoped>
   @import '~@assets/less/uStyle.less';
 </style>
-<style lang="less">
+<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;
+  }
 </style>