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

<template>
  <div class="equipment-info-module">
    <common-title title="设备基本运行情况"></common-title>
    <div class="visualization-common-border box">
        <!-- <a-row>
          <a-col :span="12">
            湿度实值
          </a-col>
          <a-col :span="12">
            30%R.H
          </a-col>
          <a-col :span="12">
            温度实值
          </a-col>
          <a-col :span="12">
            20℃
          </a-col>
          <a-col :span="12">
            辐射强度实值
          </a-col>
          <a-col :span="12">
            20W/㎡
          </a-col>
        </a-row> -->

      <!-- <div id="demo1">
        <div>湿度实值</div>
        <div>温度实值</div>
        <div>辐射强度实值</div>
      </div>
      <div>
        <div>30%R.H</div>
        <div>20℃</div>
        <div>20W/㎡</div>
      </div> -->
      <!-- <div style="height: 32%;display: flex; justify-content: center; align-items: center; font-size: 39px;">程序运行</div> -->
      <div style="height: 32%;display: flex; justify-content: center; align-items: center; font-size: 26px;">{{runStatus == 1 ? '程序运行': '定值运行'}}</div>
      <div style="height: 36%; display: flex; flex-direction: row;">
        <!-- 左 -->
        <div class="le" style="margin: 0 0.1% 0 2.4%;">
          <div style="height: 15%; display: flex; justify-content: space-between;">
            <span style="font-size: 12px;">温度</span>
            <span style="font-size: 11px;">设定{{targetT}}℃</span>
          </div>
          <div style="height: 70%; display: flex; justify-content: center; align-items: center;">
            <span style="font-size: 35px;">{{template}}</span>
          </div>
          <div style="height: 15%; display: flex; justify-content: end; align-items: center;">
            <span style="font-size: 12px;">℃</span>
          </div>
        </div>
        <!-- 中 -->
        <div class="le" style="margin: 0 0.1% 0 1%;">
          <div style="height: 15%; display: flex; justify-content: space-between;">
            <span style="font-size: 12px;">湿度</span>
            <span style="font-size: 11px;">设定{{targetH}}%R.H</span>
          </div>
          <div style="height: 70%; display: flex; justify-content: center; align-items: center;">
            <span style="font-size: 35px;">{{humidity}}</span>
          </div>
          <div style="height: 15%; display: flex; justify-content: end; align-items: center;">
            <span style="font-size: 12px;">%R.H</span>
          </div>
        </div>
        <!-- 右 -->
        <div class="le" style="margin: 0 0.1% 0 1%;">
          <div style="height: 15%; display: flex; justify-content: space-between;">
            <span style="font-size: 12px;">辐射强度</span>
            <span style="font-size: 11px;">设定{{targetF}}W/㎡</span>
          </div>
          <div style="height: 70%; display: flex; justify-content: center; align-items: center;">
            <span style="font-size: 35px;">{{irradiation}}</span>
          </div>
          <div style="height: 15%; display: flex; justify-content: end; align-items: center;">
            <span style="font-size: 12px;">W/㎡</span>
          </div>
        </div>
      </div>
      <div style="height: 22%; margin-top: 2%;">
        <div class="bo">
          <!-- <div style="width: 35%; padding-left: 2%">{{alarmTime}}</div>
          <div style="width: 65%;">{{ information }}</div> -->
          <div style="width: 35%; padding-left: 2%" class="scroll-text">
            <div>
              <div class="number">{{ time1 }}</div>
              <div class="number">{{ time2 }}</div>
            </div>
          </div>
          <div style="width: 65%;" class="scroll-text">
            <div>
              <div class="number">{{ inform1 }}</div>
              <div class="number">{{ inform2 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: { commonTitle },
  name: '',
  props: {
    data: {
      type: Array,
      default: function(){
        return [] // 使用工厂函数返回默认值
      }
    },
    alarmData: {
      type: Object,
      default: function(){
        return {} // 使用工厂函数返回默认值
      }
    }
  },
  data () {
    return {
      // 获取数据(总)
      dataList: [],
      // 温度
      template: '',
      // 温度输出
      outputT: '',
      // 升温/降温(0升温，1降温，3啥也不是)
      statusT: 3,
      // 目标温度
      targetT: '',
      // 斜率设定（温度）
      slopeT: '',
      // 起始温度
      startT: '',
      // 辐照强度
      irradiation: '0',
      // 吹风
      // 时间
      // 辐照强度设定
      targetF: '0',
      // 辐射强度起始
      startF: '',
      // 湿度
      humidity: '',
      // 湿度输出
      outputH: '',
      // 加湿/除湿(0加湿，1除湿，3啥也不是)
      statusH: 3,
      // 目标湿度
      targetH: '',
      // 起始湿度
      startH: '',
      // 运行方式设定
      runStatus: '',
      // 报警信息
      alarmTime: '',
      information: '',
      time1: '',
      time2: '',
      inform1: '',
      inform2: '',
      inform: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6', 'Data 7', 'Data 8', 'Data 9'],
      time: ['time 1', 'time 2', 'time 3', 'time 4', 'time 5', 'time 6', 'time 7', 'time 8', 'time 9'],
      counter: 0
    }
  },
  watch: {
    data: {
      handler(newValue, oldValue){
        // console.log(77,newValue, oldValue)
        this.dataList = newValue
        this.getList()
      },
      immediate: true,
      deep: true
    },
    alarmData: {
      handler(newValue, oldValue){
        console.log(777777,newValue, oldValue)
        var hasAlarm = newValue
        var options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' };
        this.information = hasAlarm ? newValue.tagname : '暂无数据'
        this.alarmTime = hasAlarm ?  new Date(newValue.logtime.time).toLocaleDateString('zh-CN', options) : ''
      },
      immediate: true,
      deep: true
    }
  },
  created () {
    this.showData()
  },
  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.targetT = this.dataList[i].Value
        }
        // 辐照
        // 湿度
        if (this.dataList[i].Name == '当前湿度值') {
          this.humidity = this.dataList[i].Value
        }
        if (this.dataList[i].Name == '湿度设定值') {
          this.targetH = this.dataList[i].Value
        }
        // 运行方式
        if (this.dataList[i].Name == '运行方式设定') {
          this.runStatus = this.dataList[i].Value
        }
      }
    },
    showData() {
      // 如果还有数据未显示
      if (this.counter < this.inform.length) {
        // 显示当前计数器指向的数据
        // console.log(this.inform[this.counter]);
        // console.log(this.time[this.counter]);
        this.time1 =this.time[this.counter]
        this.inform1 =this.inform[this.counter]
        // 如果还有一条数据可以显示
        if (this.counter + 1 < this.inform.length) {
          // console.log(this.inform[this.counter + 1]);
          // console.log(this.time[this.counter + 1]);
          this.time2 =this.time[this.counter + 1]
          this.inform2 =this.inform[this.counter + 1]
        }
        if (this.counter + 1 == this.inform.length) {
          this.time2 = ''
          this.inform2 = ''
          this.counter = -2;
        }
        // 更新计数器
        this.counter += 2;
    
        // 设置下一次调用的定时器
        setTimeout(this.showData, 3000);
      }
      if (this.counter == this.inform.length) {
        this.counter = 0;
      }
    }
  },
  // 销毁定时器
  beforeDestroy(){
    clearTimeout(this.showData)
  }
}
</script>

<style scoped>
  @import '~@/assets/less/uStyle.less';
</style>
<style lang="less" scoped>
  .equipment-info-module{
    width: 100%;
    height: 100%;
  }
  .box {
    width: 100%;
    height: calc(100% - 26px);
    border-width: 8px 0 0 6px;
    // border: 1px solid rgb(255, 255, 255);
    // display: flex;
    // /* row (默认值) : 主轴为水平万向，起点在左端。*/
    // flex-direction: row;
  }
  // .box>div#demo1{
  //   width: 50%;
  //   height: 94%;
  //   margin: 2%;
  //   color: #eeeeee;
  //   font-size: 15px;
  //   // border: 1px solid rgb(255, 255, 255);
  // }
  // .box>div{
  //   width: 70%;
  //   height: 94%;
  //   margin-top: 2%;
  //   color: #eeeeee;
  //   font-size: 15px;
  //   // border: 1px solid rgb(255, 255, 255);
  // }
  // .box>div>div{
  //   padding: 5%;
  // }
  .box>div{
    width: 100%;
    color: #eeeeee;
    // border: 1px solid rgb(255, 255, 255);
  }
  .le{
    height: 100%;
    width: 31%;
    // border: 1px solid rgb(255, 255, 255);
    background: linear-gradient(#207ab7, #207ab7) left top,
    linear-gradient(#207ab7, #207ab7) left top ,
    linear-gradient(#207ab7, #207ab7) right top,
    linear-gradient(#207ab7, #207ab7) right top,
    linear-gradient(#207ab7, #207ab7) left bottom,
    linear-gradient(#207ab7, #207ab7) left bottom,
    linear-gradient(#207ab7, #207ab7) right bottom,
    linear-gradient(#207ab7, #207ab7) right bottom;
    background-repeat: no-repeat;
    background-size: 0.05vw 1vw, 1vw 0.05vw;
    padding: 5px 2px;
  }
  .le>div{
    width: 100%;
    padding: 0 3% 0 3%;
    // border: 1px solid rgb(255, 255, 255);
    color: #eeeeee;
    align-items: center;
  }
  .bo{
    height: 95%;
    width: 95.5%;
    // border: 1px solid rgb(255, 255, 255);
    margin: 0 0.1% 0.5% 2.4%;
    background: linear-gradient(#207ab7, #207ab7) left top,
    linear-gradient(#207ab7, #207ab7) left top ,
    linear-gradient(#207ab7, #207ab7) right top,
    linear-gradient(#207ab7, #207ab7) right top,
    linear-gradient(#207ab7, #207ab7) left bottom,
    linear-gradient(#207ab7, #207ab7) left bottom,
    linear-gradient(#207ab7, #207ab7) right bottom,
    linear-gradient(#207ab7, #207ab7) right bottom;
    background-repeat: no-repeat;
    background-size: 0.05vw 1vw, 1vw 0.05vw;
    display: flex;
    align-items: center;
    flex-direction: row;
  }
  .bo>div{
    height: 100%;
    color: #eeeeee;
    font-size: 16px;
    // padding-top: 0.2%;
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    align-items: center;
  }
  .scroll-text {
    overflow: hidden;
    white-space: nowrap;
  }
  
  .number {
    display: block;
    animation: scrollNumber 3s infinite steps(1);
  }
  
  // @keyframes scrollNumber {
  //   0% {
  //     transform: translateX(20%);
  //   }
  //   100% {
  //     transform: translateX(-20%);
  //   }
  // }
</style>