<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>
            <div>
              <div class="lef">A2压机吸气：</div>
              <div class="rig">() bar</div>
            </div> -->
            <div>A1压机吸气：() bar</div>
            <div>A2压机吸气：() bar</div>
          </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>
          <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>

<script>
import commonTitle from '../components/commonTitle.vue'

export default {
  components: { commonTitle },
  name: '',
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style scoped>
  @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;
  }
</style>
