<template lang='pug'>
el-container(style="padding: 0px; height: 77.6vh")
  el-header(
    style="height: 42px; line-height: 42px; border: 1px solid rgba(195, 195, 195, 1); background: #f4f4f4"
  )
    span.title-bold
    el-select(v-model="roomId", size="mini")
      el-option(label="c区1房间", value="11")
      el-option(label="c区2房间", value="22")
  el-main.box_main
    el-row(:gutter="20")
      el-col(
        :span="3 * item.list.length",
        v-for="(item, index) in dataList",
        :key="index",
        style="margin-bottom: 20px"
      )
        card-warp(:title="item.name", height="35px")
          div(slot="content")
            el-row(typr="flex", justify="center", :gutter="20")
              el-col(:span="24 / item.list.length", v-for="child in item.list")
                card-warp(
                  :title="child.leftName",
                  height="35px",
                  bgcolor="#f5f5f5"
                )
                  div(slot="right")
                    | {{ child.rightName }}
                  div(slot="content")
                    .content_warp
                      div(:class="child.type")
                      div.value(:style="{color:child.over?'red':'#10cc2e'}") {{ child.value }}
                      .scope {{ child.scope }}
</template>

<script>
export default {
  data() {
    return {
      roomId: '11',
      dataList: [
        {
          name: '喷淋系统',
          list: [
            {
              leftName: '喷淋系统',
              rightName: '水流压力',
              type: 'slyl',
              value: '0.319mp',
              scope: '参考值：0.2~0.8mp'
            },
            {
              leftName: '喷淋系统',
              rightName: '泵房温度',
              type: 'wd',
              value: '22.5℃',
              scope: '参考值：0.0~50℃'
            },
            {
              leftName: '喷淋系统',
              rightName: '水位高度',
              type: 'swgd',
              value: '22.5℃',
              scope: '参考值：0.0~50℃'
            },
            {
              leftName: '喷淋系统',
              rightName: '水流流量',
              type: 'slll',
              value: '22.5℃',
              scope: '参考值：0.0~50℃'
            }
          ]
        },
        {
          name: '喷淋系统',
          list: [
            {
              leftName: '喷淋系统',
              rightName: '二氧化碳',
              type: 'co2',
              value: '0.319mp',
              scope: '参考值：0.2~0.8mp'
            },
            {
              leftName: '喷淋系统',
              rightName: '一氧化碳',
              type: 'co',
              value: '22.5℃',
              scope: '参考值：0.0~50℃'
            },
            {
              leftName: '喷淋系统',
              rightName: '湿度',
              type: 'sd',
              value: '22.5℃',
              scope: '参考值：0.0~50℃'
            },
            {
              leftName: '喷淋系统',
              rightName: '风速',
              type: 'fs',
              value: '22.5℃',
              scope: '参考值：0.0~50℃'
            }
          ]
        },
        {
          name: '喷淋系统',
          list: [
            {
              leftName: '喷淋系统',
              rightName: '风压',
              type: 'fy',
              value: '0.319mp',
              scope: '参考值：0.2~0.8mp'
            },
            {
              leftName: '喷淋系统',
              rightName: '泵房温度',
              type: 'wd',
              value: '22.5℃',
              scope: '参考值：0.0~50℃'
            },
            {
              leftName: '喷淋系统',
              rightName: '水位高度',
              type: 'swgd',
              value: '22.5℃',
              scope: '参考值：0.0~50℃'
            },
            {
              leftName: '喷淋系统',
              rightName: '水位高度',
              type: 'swgd',
              value: '22.5℃',
              scope: '参考值：0.0~50℃'
            }
          ]
        },
        {
          name: '喷淋系统',
          list: [
            {
              leftName: '喷淋系统',
              rightName: '水流压力',
              type: 'slyl',
              value: '0.319mp',
              scope: '参考值：0.2~0.8mp'
            },
            {
              leftName: '喷淋系统',
              rightName: '泵房温度',
              type: 'wdh',
              value: '60.5℃',
              over: true,

              scope: '参考值：0.0~50℃'
            },
            {
              leftName: '喷淋系统',
              rightName: '水位高度',
              type: 'swgd',
              value: '22.5℃',
              scope: '参考值：0.0~50℃'
            },
            {
              leftName: '喷淋系统',
              rightName: '水位高度',
              type: 'swgd',
              value: '22.5℃',
              scope: '参考值：0.0~50℃'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.content_warp {
  display: flex;
  flex-direction: column;
  align-items: center;
  .value {
    margin: 5px;
  }
  .scope {
    color: #a0a0a0;
    font-size: 13px;
  }
  .co2 {
    width: 100px;
    height: 75px;
    background: url("~@/assets/images/imgs/co2.png") no-repeat;
    background-size: 100% 100%;
  }
  .co2h {
    width: 100px;
    height: 75px;
    background: url("~@/assets/images/imgs/co2h.png") no-repeat;
    background-size: 100% 100%;
  }
  .co {
    width: 73px;
    height: 75px;
    background: url("~@/assets/images/imgs/co.png") no-repeat;
    background-size: 100% 100%;
  }
  .coh {
    width: 73px;
    height: 75px;
    background: url("~@/assets/images/imgs/coh.png") no-repeat;
    background-size: 100% 100%;
  }
  .swgd {
    width: 65px;
    height: 75px;
    background: url("~@/assets/images/imgs/swgd.png") no-repeat;
    background-size: 100% 100%;
  }
  .swgdh {
    width: 65px;
    height: 75px;
    background: url("~@/assets/images/imgs/swgdh.png") no-repeat;
    background-size: 100% 100%;
  }
  .wd {
    width: 57px;
    height: 75px;
    background: url("~@/assets/images/imgs/wd.png") no-repeat;
    background-size: 100% 100%;
  }
  .wdh {
    width: 57px;
    height: 75px;
    background: url("~@/assets/images/imgs/wdh.png") no-repeat;
    background-size: 100% 100%;
  }
  .slll {
    width: 65px;
    height: 75px;
    background: url("~@/assets/images/imgs/slll.png") no-repeat;
    background-size: 100% 100%;
  }
  .slllh {
    width: 65px;
    height: 75px;
    background: url("~@/assets/images/imgs/slllh.png") no-repeat;
    background-size: 100% 100%;
  }
  .slyl {
    width: 65px;
    height: 75px;
    background: url("~@/assets/images/imgs/slyl.png") no-repeat;
    background-size: 100% 100%;
  }
  .slylh {
    width: 65px;
    height: 75px;
    background: url("~@/assets/images/imgs/slylh.png") no-repeat;
    background-size: 100% 100%;
  }
  .sd {
    width: 65px;
    height: 75px;
    background: url("~@/assets/images/imgs/sd.png") no-repeat;
    background-size: 100% 100%;
  }
  .sdh {
    width: 65px;
    height: 75px;
    background: url("~@/assets/images/imgs/sdh.png") no-repeat;
    background-size: 100% 100%;
  }
  .fs {
    width: 61px;
    height: 75px;
    background: url("~@/assets/images/imgs/fs.png") no-repeat;
    background-size: 100% 100%;
  }
  .fsh {
    width: 61px;
    height: 75px;
    background: url("~@/assets/images/imgs/fsh.png") no-repeat;
    background-size: 100% 100%;
  }
  .fy {
    width: 72px;
    height: 75px;
    background: url("~@/assets/images/imgs/fy.png") no-repeat;
    background-size: 100% 100%;
  }
  .fyh {
    width: 72px;
    height: 75px;
    background: url("~@/assets/images/imgs/fyh.png") no-repeat;
    background-size: 100% 100%;
  }
}
</style>
