<template>
  <div id="bad-gas-info">
    <div class="title">有害气体</div>
    <div class="info-list">
      <gas-info-item :gasInfo="gasInfo" />
      <gas-info-item :gasInfo="gasInfo2" />
      <gas-info-item :gasInfo="gasInfo3" />
      <gas-info-item :gasInfo="gasInfo4" />
      <gas-info-item :gasInfo="gasInfo5" />
      <gas-info-item :gasInfo="gasInfo6" />
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import GasInfoItem from "./childComps/GasInfoItem.vue";
const gasInfo = reactive({
  name: "一氧化硫", //气体名称
  max: 100, //最大值
  value: 10, //传感器值
  point: 50, //阈值
});
const gasInfo2 = reactive({
  name: "一氧化氮", //气体名称
  max: 100, //最大值
  value: 10, //传感器值
  point: 10, //阈值
});
const gasInfo3 = reactive({
  name: "一氧化碳", //气体名称
  max: 100, //最大值
  value: 10, //传感器值
  point: 70, //阈值
});
const gasInfo4 = reactive({
  name: "二氧化碳", //气体名称
  max: 100, //最大值
  value: 10, //传感器值
  point: 40, //阈值
});
const gasInfo5 = reactive({
  name: "硫化氢", //气体名称
  max: 100, //最大值
  value: 10, //传感器值
  point: 20, //阈值
});
const gasInfo6 = reactive({
  name: "二氧化硫", //气体名称
  max: 100, //最大值
  value: 10, //传感器值
  point: 20, //阈值
});
setInterval(() => {
  gasInfo.value = parseInt(Math.random() * 10) * 10;
  gasInfo2.value = parseInt(Math.random() * 10) * 10;
  gasInfo3.value = parseInt(Math.random() * 10) * 10;
  gasInfo4.value = parseInt(Math.random() * 10) * 10;
  gasInfo6.value = parseInt(Math.random() * 10) * 10;
  gasInfo5.value = parseInt(Math.random() * 10) * 10;
}, 2000);
</script>

<style lang="scss" scoped>
#bad-gas-info {
  position: absolute;
  z-index: 100;
  width: 830px;
  height: 621px;
  top: 1441px;
  right: 62px;
  background-image: url(/images/badGasInfo/bg.png);
  .title {
    width: 128px;
    height: 45px;
    font-size: 32px;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: 800;
    color: #38cafb;
    line-height: 45px;
    margin: 22px 0px 0px 62px;
  }
  .info-list {
    width: 100%;
    height: calc(621px - 45px - 22px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10px 0px 0px 10px;
  }
}
</style>
