project-neic/src/components/area/windturbine/BasicInformationDetail.vue

<template>
  <div class="firstdiv">
    <div v-for="(item, index) in warnList" :key="index">
      <div :class="'worning' + item.type">
        <Worning :worn="item.alertText"></Worning>
      </div>
    </div>
    <img style="float: left; margin-left: 40px; margin-top: 90px;width:50vh;height:25vh;"
      src="../../../assets/img/WindturbineDetailPages/变桨.png" object-fit="fill" />
    <div class="twodiv">
      <table>
        <tr>
          <th>温度信息</th>
        </tr>
        <tr v-for="itm in temperatureInfo" :key="itm">
          <td>{{ itm.name }}</td>
          <td>{{ itm.value }}</td>
          <td>{{ itm.unit }}</td>
        </tr>
      </table>
      <table v-if="pitchInfo.length > 0">
        <tr>
          <th>变桨信息</th>
        </tr>
        <tr v-for="itm in pitchInfo" :key="itm">
          <td>{{ itm.name }}</td>
          <td>{{ itm.value }}</td>
          <td>{{ itm.unit }}</td>
        </tr>
      </table>
    </div>
    <div class="onediv">
      <table>
        <tr>
          <th>基本信息</th>
        </tr>
        <tr v-for="itm in generalInfo" :key="itm">
          <td>{{ itm.name }}</td>
          <td>{{ itm.value }}</td>
          <td>{{ itm.unit }}</td>
        </tr>
      </table>
      <table>
        <tr>
          <th>电网信息</th>
        </tr>
        <tr v-for="itm in powerGridInfo" :key="itm">
          <td>{{ itm.name }}</td>
          <td>{{ itm.value }}</td>
          <td>{{ itm.unit }}</td>
        </tr>
      </table>
    </div>
    <!-- <div>{{alarms[0].alertText}}</div> -->
  </div>
</template>

<script>
  import BackgroundData from "../../../assets/script/BackgroundData";
  import Worning from "./warning.vue"
  export default {
    name: "BasicInformationDetail",
    components: {
      Worning,
    },
    props: {
      alarms: Array,
    },
    mounted() {
      this.show()
    },
    data() {
      return {
        warnList: [],
        BasicInfo: {},
        temperatureInfo: new Array() /* 温度信息 */,
        pitchInfo: new Array() /* 变桨信息 */,
        generalInfo: new Array() /* 基本信息 */,
        powerGridInfo: new Array() /* 电网信息 */,
      };
    },
    methods: {
      show() {
        // axios.get(`http://${config.calcUrl}/alarm/real-time-alarm?objectId=${this.windturbine.windturbineId}&pageIndex=1&pageSize=50`)
        // .then(msg=>{
        //   var vs = msg.data;
        //   if(vs.length<=0)return;
        //   this.alarmTime = BackgroundData.getInstance().formatDate(vs[0].lastUpdateTime);
        //   this.alarmContent = vs[0].alertText;
        //   this.alarms = msg.data;
        //   console.log(this.alarms)
        // })
      },
      start(bi) {
        this.BasicInfo = bi;
        this.bindData();

        this.refreshData();
        this.refreshTimer = setInterval(this.refreshData, 3000);
      },
      end() {
        clearInterval(this.refreshTimer);
      },
      alarmd(bi) {
        let dataList = []
        let warnList = []
        let date1 = {
          type: 1,
          alertText :[]
        }
        let date2 = {
          type: 2,
          alertText :[]
        }
        let date3 = {
          type: 3,
          alertText :[]
        }
        let date4 = {
          type: 4,
          alertText :[]
        }
        let date5 = {
          type: 5,
          alertText :[]
        }
        bi.forEach(item => {
          let data = {}
          data.alertText = item.alertText
          if (item.alertText.indexOf("变桨") >= 0) {
            data.type = 1
          } else if (item.alertText.indexOf("偏航") >= 0) {
            data.type = 5
          }
          else if (item.alertText.indexOf("发电机") >= 0) {
            data.type = 3
          }
          else if (item.alertText.indexOf("齿轮箱") >= 0) {
            data.type = 2
          }
          else if (item.alertText.indexOf("液压") >= 0) {
            data.type = 4
          }
          data.type ? warnList.push(data) : ''
        })
        warnList.forEach(item =>{
          switch (item.type) {
            case 1:
              date1.alertText.push(item.alertText)
              break;
            case 2:
              date2.alertText.push(item.alertText)
              break;
            case 3:
              date3.alertText.push(item.alertText)
              break;
            case 4:
              date4.alertText.push(item.alertText)
              break;
            case 5:
              date5.alertText.push(item.alertText)
              break;
          }
        })
        date1.alertText.length>0?dataList.push(date1):''
        date2.alertText.length>0?dataList.push(date2):''
        date3.alertText.length>0?dataList.push(date3):''
        date4.alertText.length>0?dataList.push(date4):''
        date5.alertText.length>0?dataList.push(date5):''
        this.warnList = dataList
      },
      /* 刷新数据 */
      refreshData() {
        var bg = BackgroundData.getInstance();
        bg.initWinturbineBaseData(this.BasicInfo, this.onMessage);
      },

      /* 获得数据 */
      onMessage(msg) {
        this.BasicInfo.BasicInfo.forEach((element) => {
          element.param.forEach((im) => {
            var val = msg[im.code];
            if (typeof val !== "undefined") {
              if (im.unit == "万度") {
                im.value = (val.doubleValue / 10000).toFixed(2);
              } else {
                im.value = val.doubleValue.toFixed(2);
              }
            }
          });
        });
        console.log(msg);
      },

      bindData() {
        this.BasicInfo.BasicInfo.forEach((element) => {
          if (element.tag == "基本信息") {
            this.generalInfo = element.param;
          } else if (element.tag == "温度信息") {
            this.temperatureInfo = element.param;
          } else if (element.tag == "电网信息") {
            this.powerGridInfo = element.param;
          } else if (element.tag == "桨叶信息") {
            this.pitchInfo = element.param;
          }
        });
      },
    },
  };
</script>

<style scoped>
  .firstdiv {
    height: 50vh;
  }

  .onediv {
    float: right;
    margin-right: 30px;
  }

  .twodiv {
    float: right;
    margin-right: 30px;
  }

  td:nth-child(1) {
    height: 25px;
    width: 130px;
    text-align: right;
  }

  td:nth-child(2) {
    width: 78px;
    text-align: right;
    color: rgb(5, 176, 71);
  }

  td:nth-child(3) {
    text-align: center;
    width: 30px;
  }

  tr:nth-child(1) {
    font-size: 20px;
    width: 90px;
    text-align: right;
  }

  th {
    height: 40px;
  }

  table {
    margin-top: 30px;
  }
  .worning1{
    position: absolute;
    top: 143px;
    left: 119px;
    z-index: 999;
  }
  .worning2{
    position: absolute;
    top: 210px;
    left: 282px;
    z-index: 99;
  }
  .worning3{
    position: absolute;
    top: 219px;
    left: 348px;
    z-index: 0;
  }
  .worning4{
    position: absolute;
    top: 273px;
    left: 296px;
    z-index: 0;
  }
  .worning5{
    position: absolute;
    top: 287px;
    left: 252px;
    z-index: 0;
  }
</style>