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

<template>
  <el-dialog
    width="65%"
    @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:-10px;">
      <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>

      <BasicInformationDetail ref="BasicInfo"></BasicInformationDetail>
      <!--<div class="worning1">
        <Worning></Worning>
      </div>
      <div class="worning2">
        <Worning></Worning>
      </div>
      <el-tabs type="border-card" tab-position="bottom" stretch="true">
        <el-tab-pane label="基本信息">
          <BasicInformationDetail ref="BasicInfo" :alarms="alarms"></BasicInformationDetail>
        </el-tab-pane>
        <el-tab-pane label="机舱信息" disabled>
        </el-tab-pane>
        <el-tab-pane label="故障信息" disabled>
        </el-tab-pane>
        <el-tab-pane label="齿轮箱" disabled>
        </el-tab-pane>
        <el-tab-pane label="变桨" disabled>
        </el-tab-pane>
        <el-tab-pane label="偏航" disabled>
        </el-tab-pane>
        <el-tab-pane label="液压" disabled>
        </el-tab-pane>
        <el-tab-pane label="发电机" disabled>
        </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";
// import Worning from "./warning.vue"
export default {
  components: {
    BasicInformationDetail,
    // Worning,
  },
  props: {
    windturbine: Object,
  },
  data() {
    return {
      BasicInfo: {},
      line:"",
      alarmTime:"",
      alarmContent:"",
      alarms:[],
    };
  },
  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=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;
        this.$refs.BasicInfo.alarmd(this.alarms);
        console.log(this.alarms)
      })
      .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>