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

<template>
  <el-dialog
    title="风机详情"
    width="80%"
    top="11vh"
    @opened="opened()"
    @closed="closed()"
  >
    <div style="background-color: black">
      <!-- <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>{{ windturbineId }}</div>
            </div>
          </td>
          <td>
            <div class="chunkdiv">
              <div>所属线路&emsp;</div>
              <div>某某某1线</div>
            </div>
          </td>
          <td>
            <div class="chunkdiv">
              <div>机型&emsp;</div>
              <div>GW1000</div>
            </div>
          </td>
          <td>
            <div class="chunkdiv">
              <div>告警时间：</div>
              <div>2021年5月10日&ensp;12:23:31</div>
            </div>
          </td>
          <td>
            <div class="chunkdiv">
              <div>告警内容：</div>
              <div>通讯中断</div>
            </div>
          </td>
        </tr>
      </table>

      <el-tabs type="border-card" tab-position="bottom" stretch="true">
        <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="变桨">
          <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 BackgroundData from "../../../assets/script/BackgroundData";

export default {
  components: {
    YawDetail,
    BasicInformationDetail,
  },
  props: {
    windturbineId: String,
    stationId: String,
  },
  methods: {
    opened() {
      this.refreshData();
      this.refreshTimer=setInterval(this.refreshData,3000);
    },
    closed() {
      clearInterval(this.refreshTimer);
    },
    refreshData(){
      var bg = BackgroundData.getInstance();
      var data = bg.getWinturbineBaseData(this.windturbineId,this.stationId);
      console.log(data);
    }
  },
};
</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);
}
table {
  margin-left: 2px;
  margin-right: 2px;
}
td {
  width: 20%;
}
el-tabs {
  background-color: black;
}
</style>