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

<template>
  <div class="firstdiv">
    <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>
</template>

<script>
import BackgroundData from "../../../assets/script/BackgroundData";

export default {
  name: "BasicInformationDetail",
  data() {
    return {
      BasicInfo: {},
      temperatureInfo: new Array() /* 温度信息 */,
      pitchInfo: new Array() /* 变桨信息 */,
      generalInfo: new Array() /* 基本信息 */,
      powerGridInfo: new Array() /* 电网信息 */,
    };
  },
  methods: {
    start(bi) {
      this.BasicInfo = bi;
      this.bindData();

      this.refreshData();
      this.refreshTimer = setInterval(this.refreshData, 3000);
    },
    end() {
      clearInterval(this.refreshTimer);
    },

    /* 刷新数据 */
    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: 49vh;
}
.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;
}
</style>