zhgdyun/src/views/projectAdmin/fourEngin/quality/leftMiddle.vue

<template>
  <Card title="标养室管理">
    <div class="environment">
      <div class="item">
        <div class="icon  temperature"></div>
        <div class="info">
          <div class="label">室内温度</div>
          <div class="value"><span>{{ currentData.temperature }}</span> ℃</div>
        </div>
      </div>
      <div class="item">
        <div class="icon humidity"></div>
        <div class="info">
          <div class="label">室内湿度</div>
          <div class="value"><span>{{ currentData.humidity }}</span>%RH</div>
        </div>
      </div>
      <div class="item">
        <div class="icon spray"></div>
        <div class="info">
          <div class="label">喷淋温度</div>
          <div class="value"><span>{{ currentData.currentDayAlarmNum }}</span> 次</div>
        </div>
      </div>
          <div class="btn">远程验收</div>

    </div>
  </Card>
</template>

<script>
import {
   getstandardDevListApi,
  selectStandardDevStatisticsBySnApi,
} from "@/assets/js/api/markingRoom";
import Card from '../components/Card.vue'
export default {
  components: { Card },
  data(){
    return{
      currentData: {
        currentDayAlarmNum: 0,
        humidity: 0,
        sampleNum: 0,
        temperature: 0,
      },
      searchSn:'',
      devSn:'',
    }
  },
   mounted() {
    if (this.$store.state.projectSn) {
      this.searchSn = this.$store.state.projectSn;
      this.$nextTick(() => {
        this.getDevList();
      });
    } else {
      this.initData();
    }
  },
  methods:{
    //标养室管理数据
     getRealTimeData() {
      selectStandardDevStatisticsBySnApi({
        projectSn: this.searchSn,
        devSn: this.devSn,
      }).then((res) => {
        console.log('标养室数据',res);
        this.currentData = res.result.currentData;
      });
    },
    //获取设备列表--环境监测实时数据--下拉
    getDevList() {
      getstandardDevListApi({ projectSn: this.searchSn }).then((result) => {
        console.log('列表', result)
        this.devList = result.result;
        if (result.result.length > 0) {
          this.devSn = result.result[0].devSn;         
          this.getRealTimeData();
        }
      });
    },
    //初始化数据
    initData() {
      this.searchSn = this.projectsn;
      this.currentData = {
        currentDayAlarmNum: 0,
        humidity: 0,
        sampleNum: 0,
        temperature: 0,
      };
      this.devSn = "";
      if (this.personnelTypeChart) {
        this.personnelTypeChart.clear();
      }

      this.getDevList();
    },
  }
}
</script>

<style lang="less" scoped>
.environment {
  width: 100%;
  height: 540px;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  .item {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 250px;
    padding-bottom: 140px;
    margin-right: 25px;
    .icon {
      // margin-right: 10px;
      width: 40px;
      height: 40px;
      &.temperature {
        background: url(../assets/images/quality/i-temperature.png) no-repeat;
        background-size: contain;
      }
      &.humidity {
        background: url(../assets/images/quality/i-humidity.png) no-repeat;
        background-size: contain;
      }
      &.spray {
        background: url(../assets/images/quality/i-spray.png) no-repeat;
        background-size: contain;
      }
    }
    .info {
      .value {
        margin-top: 4px;
        font-size: 14px;
        text-align: center;
        span {
          color: #f7d502;
          margin-right: 10px;
        }
      }
    }
  }
  .btn {   
  margin: 8px auto;
  width: 408px;
  height: 62px;
  line-height: 62px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #02d5d2;
  background: url(../assets/images/sourse/bg-car-count.png) no-repeat;
  background-size: 100% 100%;
}
}
</style>