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

<template>
  <el-dialog
    width="65%"
    top="11vh"
    @opened="opened()"
    @closed="closed()"
    :show-close="false"
  >
  <template #title>
    <div style="margin-top:-10px;">风机详情</div>
  </template>
    <div style="background-color: black;margin-top:-30px;margin-left:-10px;margin-right:-10px;margin-bottom:-30px;">
      <!-- <div class="titeldiv">
      <div class="chunkdiv" width="15%">
        <img src="../../../assets/img/WindturbineDetailPages/pic_01.png"/>
        <div>MA B401</div>
      </div>
      <div class="chunkdiv" width="15%">
        <div>所属线路&emsp;</div>
        <div>某某某1线</div>
      </div>
      <div class="chunkdiv" width="15%">
        <div>机型&emsp;</div>
        <div>GW1000</div>
      </div>
      <div class="chunkdiv" width="15%">
        <div>告警时间：</div>
        <div>2021年5月10日&emsp;12：23：31</div>
      </div>
      <div class="chunkdiv" width="15%">
        <div>告警内容：</div>
        <div>通讯中断</div>
      </div> -->
      <table width="99.8%">
        <tr>
          <td>
            <div class="chunkdiv">
              <img
                src="../../../assets/img/WindturbineDetailPages/pic_01.png"
              />
              <div>&emsp;</div>
              <div>{{ windturbine.windturbineId }}</div>
            </div>
          </td>
          <td>
            <div class="chunkdiv">
              <div>所属线路&emsp;</div>
              <div>{{line}}</div>
            </div>
          </td>
          <td>
            <div class="chunkdiv">
              <div>机型&emsp;</div>
              <div>{{windturbine.modelId}}</div>
            </div>
          </td>
          <td>
            <div class="chunkdiv">
              <div>告警时间：</div>
              <div>{{alarmTime}}</div>
            </div>
          </td>
          <td>
            <div class="chunkdiv">
              <div>告警内容：</div>
              <div>{{alarmContent}}</div>
            </div>
          </td>
        </tr>
      </table>

      <el-tabs type="border-card" tab-position="bottom" stretch="true">
        <el-tab-pane label="基本信息">
          <BasicInformationDetail ref="BasicInfo"></BasicInformationDetail>
        </el-tab-pane>
        <!-- <el-tab-pane label="机舱信息">
          <BasicInformationDetail></BasicInformationDetail>
        </el-tab-pane>
        <el-tab-pane label="故障信息">
          <BasicInformationDetail></BasicInformationDetail>
        </el-tab-pane>
        <el-tab-pane label="齿轮箱" >
          <BasicInformationDetail></BasicInformationDetail>
        </el-tab-pane>
        <el-tab-pane label="变桨">
          <BasicInformationDetail></BasicInformationDetail>
        </el-tab-pane>
        <el-tab-pane label="偏航">
          <YawDetail></YawDetail>
        </el-tab-pane>
        <el-tab-pane label="液压">
          <BasicInformationDetail></BasicInformationDetail>
        </el-tab-pane>
        <el-tab-pane label="发电机">
          <BasicInformationDetail></BasicInformationDetail>
        </el-tab-pane> -->
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script>
/* import YawDetail from "./YawDetail.vue";
 */import BasicInformationDetail from "./BasicInformationDetail.vue";
import UniformCodes from "../../../assets/script/UniformCodes";
import {config} from '../../../config';
import axios from 'axios';
import BackgroundData from "../../../assets/script/BackgroundData"

export default {
  components: {
    /* YawDetail, */
    BasicInformationDetail,
  },
  props: {
    windturbine: Object,
  },
  data() {
    return {
      BasicInfo: {},
      line:"",
      alarmTime:"",
      alarmContent:"",
    };
  },
  created() {
    this.UniformCodes = new UniformCodes();
  },
  methods: {
    opened() {
      this.line="";
      this.alarmTime="";
      this.alarmContent="";
      this.BasicInfo = this.UniformCodes.getStationInfos(this.windturbine);
      this.BasicInfo.windturbineId = this.windturbine.windturbineId;
      
      this.$refs.BasicInfo.start(this.BasicInfo);

      this.initData();

      //this.refreshData();
      //this.refreshTimer = setInterval(this.refreshData, 3000);
    },
    closed() {
      // todo 切换页面的时候应该让上一个页面停止刷新数据（调用end方法）
      this.$refs.BasicInfo.end();

      //clearInterval(this.refreshTimer);
    },
    initData(){
      axios.get(`http://${config.calcUrl}/windturbine/line/${this.windturbine.windturbineId}`)
      .then(msg=>this.line=msg.data);
      axios.get(`http://${config.calcUrl}/alarm/real-time-alarm?objectId=${this.windturbine.windturbineId}&pageIndex=1&pageSize=1`)
      .then(msg=>{
        var vs = msg.data;
        if(vs.length<=0)return;
        this.alarmTime = BackgroundData.getInstance().formatDate(vs[0].lastUpdateTime);
        this.alarmContent = vs[0].alertText;
      })
      .catch(err=>{
        console.log(err);
      });
    }
  },
};
</script>
<style scoped>
/*   .titeldiv{
    display: flex;
    justify-content: space-around;
  } */
.chunkdiv {
  display: flex;
  justify-content: center;
  background-color: #363636;
  margin: 1px;
  padding: 2px;
  color: rgb(220, 220, 220);
  overflow:hidden;
  white-space:nowrap;
}
table {
  margin-left: 2px;
  margin-right: 2px;
}
td {
  width: 20%;
}
el-tabs {
  background-color: black;
}
</style>