guan_client/src/views/modules_guAn/visualization/modules/ModeInfo.vue

<template>
  <div class="mode-info-module">
    <common-title title="系统模式信息"></common-title>
    <div class="visualization-common-border box">
      <div>
        <div class="itemHead">温度</div>
        <div class="item">
          <div id="demo1">温度：{{template}}</div>
          <div>输出：{{outputT}}</div>
        </div>
        <div class="item">
          <div id="demo1">升温
            <div class="img" v-if="startT == 0"></div>
          </div>
          <div>降温
            <div class="img2" v-if="startT == 1"></div>
          </div>
        </div>
        <div class="item">
          <!-- <div id="demo1">温度设定：(123)℃</div> -->
          <div id="demo1">目标温度：{{targetT}}℃</div>
          <div>斜率设定：{{slopeT}}℃/min</div>
        </div>
        <div class="item">
          <div id="demo1">起始温度：{{startT}}℃</div>
          <!-- <div>目标温度：(123)℃</div> -->
        </div>
        <div class="itemHead">辐照</div>
        <div class="item">
          <div id="demo1">辐照强度：0W/㎡</div>
          <div>吹风</div>
        </div>
        <div class="item">
          <div id="demo1">时间 0min</div>
          <div>辐照强度设定：0W/㎡</div>
        </div>
      </div>
      <div>
        <div class="itemHead">湿度</div>
        <div class="item">
          <div id="demo1">湿度：{{humidity}}%</div>
          <div>输出：{{outputH}}%</div>
        </div>
        <div class="item">
          <div id="demo1">加湿
            <div class="img" v-if="startH === 0"></div>
          </div>
          <div>除湿
            <div class="img2" v-if="startH === 1"></div>
          </div>
        </div>
        <div class="item">
          <!-- <div>湿度设定：(123)%/min</div> -->
          <div>目标湿度：{{targetH}}%R.H</div>
        </div>
        <div class="item">
          <div id="demo1">起始湿度：{{startH}}%R.H</div>
          <!-- <div>目标湿度：(123)%</div> -->
        </div>
        <div class="itemHead">淋雨</div>
        <div class="item">
          <div id="demo1">中雨</div>
          <div>暴雨</div>
        </div>
        <div class="item">
          <div id="demo1">时间 0min</div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: { commonTitle },
  name: '',
  props: {
    data: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      // 获取数据(总)
      dataList: [],
      // 温度
      template: '',
      // 温度输出
      outputT: '',
      // 升温/降温(0升温，1降温)
      statusT: '',
      // 目标温度
      targetT: '',
      // 斜率设定（温度）
      slopeT: '',
      // 起始温度
      startT: '',
      // 辐照强度
      // 吹风
      // 时间
      // 辐照强度设定
      // 湿度
      humidity: '',
      // 湿度输出
      outputH: '',
      // 加湿/除湿(0加湿，1除湿)
      statusH: '',
      // 目标湿度
      targetH: '',
      // 起始湿度
      startH: '',
    }
  },
  watch: {
    data: {
      handler(newValue, oldValue){
        console.log(77,newValue, oldValue)
        this.dataList = newValue
        this.getList()
      },
      immediate: true,
      deep: true
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    getList(){
      // console.log(this.dataList)
      for (var i = 0; i < this.dataList.length; i++) {
        console.log(i,this.dataList[i].Name)
        // 温度
        if (this.dataList[i].Name == '当前温度值') {
          this.template = this.dataList[i].Value
        }
        if (this.dataList[i].Name == '温度输出率') {
          this.outputT = this.dataList[i].Value
          console.log(77777,this.outputT)
          if (this.outputT >0 && this.outputT <100) {
            this.statusT = 0
          }
          if (this.outputT >-100 && this.outputT <0) {
            this.statusT = 1
          }
          console.log(235,this.statusT)
        }
        if (this.dataList[i].Name == '温度设定值') {
          this.targetT = this.dataList[i].Value
        }
        if (this.dataList[i].Name == '斜率设定') {
          this.slopeT = this.dataList[i].Value
        }
        if (this.dataList[i].Name == '起始温度值') {
          this.startT = this.dataList[i].Value
        }
        // 辐照
        // 湿度
        if (this.dataList[i].Name == '当前湿度值') {
          this.humidity = this.dataList[i].Value
        }
        if (this.dataList[i].Name == '湿度输出率') {
          this.outputH = this.dataList[i].Value
        }
        if (this.dataList[i].Name == '湿度设定值') {
          this.targetH = this.dataList[i].Value
        }
        if (this.dataList[i].Name == '起始湿度值') {
          this.startH = this.dataList[i].Value
        }
      }
    }
  }
}
</script>

<style scoped>
  @import '~@/assets/less/uStyle.less';
</style>
<style lang="less" scoped>
  .mode-info-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);
    // background-color: yellowgreen;
    // border: 1px solid red;
  }
  .itemHead{
    width: 100%;
    height: 10%;
    // border: 1px solid rgb(255, 255, 255);
    margin-bottom: 2.5%;
    background-color: #094F8D;
    color: #0CB8FE;
    padding-left: 3%;
    border-radius: 2px;
    display: flex;
    align-items: center;
  }
  .item{
    width: 100%;
    height: 10%;
    // border: 1px solid rgb(255, 255, 255);
    margin-bottom: 2.5%;
    background-color: #072A54;
    color: #FEFFFE;
    padding-left: 3%;
    border-radius: 2px;
    display: flex;
    flex-direction: row;
  }
  .item>div{
    width: 50%;
    height: 100%;
    font-size: 10px;
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    align-items: center;
  }
  .item>div#demo1{
    width: 46%;
    height: 100%;
    font-size: 10px;
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    align-items: center;
  }
  .item>div{
    width: 52%;
    height: 100%;
    font-size: 10px;
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    align-items: center;
  }
  .img{
    width: 50%;
    height: 80%;
    margin-left: 10%;
    background: url(~@/assets/visualization/taiyang.png) no-repeat;
    background-size: contain;
  }
  .img2{
    width: 50%;
    height: 80%;
    margin-left: 10%;
    // border: 1px solid rgb(255, 255, 255);
    background: url(~@/assets/visualization/lvtaiyang.png) no-repeat;
    background-size: contain;
  }
</style>