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,
    alarmData: {
      type: Array,
      default: function () {
        return [] // 使用工厂函数返回默认值
      },
    },
  },
  data() {
    return {
      intervalId: null,
      // 获取数据(总)
      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: ['暂无数据'],
      time: [],
      // 测试
      // 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('7878999',newValue, oldValue)
        if (newValue.length === 0) return
        this.dataList = newValue
        this.getList()
      },
      immediate: true,
      deep: true,
    },
    alarmData: {
      handler(newValue, oldValue) {
        // console.log('7878999',newValue, oldValue)

        var isYuan = newValue && newValue.length === 1 && newValue[0] === '原数据'
        if (isYuan) return
        this.inform = newValue.map((res) => {
          return res.tagname
        })
        this.time = newValue.map((res) => {
          return res.logtime
        })
        this.showData()

        // 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) : ''
        // var nInform = this.inform
        // var nTime = this.time
        // // ['原数据']表示按照原来数据进行，数据并未改变；[]和其他有数据的情况进行赋值并重新获取方法
        // // console.log(hasAlarm.length === 1 && hasAlarm[0] === '原数据')
        // var isYuan = hasAlarm.length === 1 && hasAlarm[0] === '原数据'
        // this.inform = !isYuan ? newValue.map(res => {
        //   return res.tagname
        // }): nInform
        // this.time = !isYuan ? newValue.map(res => {
        //   return res.logtime
        // }): nTime
        // // console.log(789, this.inform)
        // if(!isYuan){
        //   this.showData()
        // }
      },
      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() {
      // console.log(7891,this.inform)
      // 如果还有数据未显示
      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.refreshData)
  }
}
</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>