hb_sis_zhfx/src/views/HealthControl/Health10.vue

<template>
  <div class="health-10">
    <wt-chooser @change="switchWt" :wpId="wpId" :wtId="wtId"></wt-chooser>
    <el-row :gutter="20" class="table-panel">
      <el-col :span="6">
        <panel :title="'等级评价'" :showLine="false">
          <Table :data="top5Table" :canScroll="false" />
        </panel>
      </el-col>
      <el-col :span="6">
        <panel :title="'健康报告'" :showLine="false">
          <Table :data="dateTable" :canScroll="false" />
        </panel>
      </el-col>
      <el-col :span="12" class="wrong-list">
        <panel :title="'故障信息'" :showLine="false">
          <div class="data-list" style="display: flex">
            <Table :data="top10TableLeft" :canScroll="false" />
            <Table :data="top10TableRight" :canScroll="false" />
          </div>
        </panel>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="table-chart">
      <el-col :span="12">
        <panel :title="'八大部件'" :showLine="false">
          <div class="table">
            <table style="width: 100%" border="0" cellspacing="0">
              <thead>
                <tr>
                  <th rowspan="1" class="type1" style="width: 50px"></th>
                  <th rowspan="1" class="type1" style="width: 105px">健康度</th>
                  <th rowspan="2" class="type1" style="width: 400px">MTBF（H/H）</th>
                  <th rowspan="1" class="type1" style="width: 180px"></th>
                  <th rowspan="1" class="type1" style="width: 100px">MTTR（H）</th>
                </tr>
              </thead>
            </table>
            <el-scrollbar>
              <div style="height: calc(30vh)">
                <table border="0" cellspacing="0">
                  <tbody>
                    <tr v-for="(item, index) of partsArray" :key="index">
                      <td style="width: 50px">
                        {{ item[1] }}
                      </td>
                      <td style="width: 105px">
                        <div :style="'background-color: ' + item[0] + ';width:10px;height:10px;margin:0 auto;'"></div>
                      </td>
                      <td style="width: 400px">
                        <div class="percent-item">
                          {{ item[3] }}%
                          <div class="percent-bar" style="margin-right: 4px">
                            <div class="percent-value" :style="'width:' + item[3] + '%'"></div>
                          </div>
                          <!-- 剩余9999/建个故障9999 -->
                          {{ item[4] }}
                        </div>
                      </td>
                      <td style="width: 200px">
                        <table-line-chart :height="'20px'" :list="item[8]" />
                      </td>
                      <td style="width: #00bf4d">
                        {{ item[6] }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </el-scrollbar>
          </div>
        </panel>
      </el-col>
      <el-col :span="12">
        <div class="chart-title">
          <div class="title-panel" style="">
            <span style="text-align: left; padding-left: 20px; font-size: 12px">故障信息 </span>
            <span class="des-title">预计损失电量<span class="num">73824.0</span><span class="unit">Kwh</span></span>
            <span class="des-title">预计检修时长<span class="num">29.33</span><span class="unit">H</span></span>
          </div>
          <!-- <img-line-chart
            height="270px"
          /> -->
          <weather-line-chart :list="weatherData" />
        </div>
      </el-col>
    </el-row>
    <div class="fc-info mg-b-16">
      <panel :title="'曲线'" :showLine="false">
        <zoom-line-chart height="28vh" :list="powerChartData.value" :units="powerChartData.units" />
      </panel>
    </div>
    <HealthReport
      :show="healthReportShow"
      :params="{ wtId: this.wtId, recorddate: this.recorddate }"
      @closed="
        (res) => {
          this.healthReportShow = false;
        }
      "
    />
  </div>
</template>

<script>
import Panel from "../../components/coms/panel/panel.vue";
import Table from "../../components/coms/table/table.vue";
import TableLineChart from "../../components/chart/line/table-line-chart.vue";
import ImgLineChart from "../../components/chart/line/img-line-chart.vue";
import ZoomLineChart from "../../components/chart/line/zoom-line-chart.vue";
import HealthReport from "@com/other/healthReport/index.vue";
import WeatherLineChart from "@com/chart/line/weather-line-chart.vue";
import WtChooser from "@com/coms/wt-chooser/wt-chooser.vue";

export default {
  setup() {},
  components: {
    Panel,
    Table,
    TableLineChart,
    ImgLineChart,
    ZoomLineChart,
    HealthReport,
    WtChooser,
    WeatherLineChart,
  },
  data() {
    const that = this;
    return {
      top5Table: {
        column: [
          {
            name: "排名",
            field: "index",
            width: "10%",
          },
          {
            name: "日期",
            field: "date",
            width: "45%",
          },
          {
            name: "等级",
            field: "rank",
            width: "45%",
          },
        ],
        data: [],
      },
      dateTable: {
        column: [
          {
            name: "排名",
            field: "index",
            width: "10%",
          },
          {
            name: "日期",
            field: "date",
            width: "60%",
          },
          {
            name: "健康情况",
            field: "",
            width: "30%",
            template() {
              return "<div style='border: 1px solid #182238;background: #303f6e;width: 70%;margin: 0 auto;color:#FFF;cursor: pointer;'>查看报告</div>";
            },
            click(e, row) {
              that.recorddate = row.date;
              that.healthReportShow = true;
            },
          },
        ],
        data: [],
      },
      top10TableLeft: {
        column: [
          {
            name: "排名",
            field: "index",
            width: "8%",
          },
          {
            name: "故障名称",
            field: "warnDesc",
          },
          {
            name: "故障时间",
            field: "startTime",
            width: "35%",
          },
          {
            name: "修复时间",
            field: "stopTime",
          },
          {
            name: "时长",
            field: "stopHours",
          },
        ],
        data: [],
      },
      top10TableRight: {
        column: [
          {
            name: "排名",
            field: "index",
            width: "8%",
          },
          {
            name: "故障名称",
            field: "warnDesc",
          },
          {
            name: "故障时间",
            field: "startTime",
            width: "35%",
          },
          {
            name: "修复时间",
            field: "stopTime",
          },
          {
            name: "时长",
            field: "stopHours",
          },
        ],
        data: [],
      },
      partsArray: [],
      tableData4: {
        column: [
          {
            name: " ",
            field: "name",
            width: "8%",
          },
          {
            name: "故障名称",
            field: "v1",
            template: function (data) {
              return "<div style='overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'>" + data + "</div>";
            },
          },
          {
            name: "故障时间",
            field: "v2",
            width: "35%",
          },
          {
            name: "修复时间",
            field: "v3",
          },
          {
            name: "时长",
            field: "v4",
          },
        ],
        data: [
          {
            name: "1",
            v1: "风机叶轮刹车系统",
            v2: "2018-05-31 16:28:38",
            v3: "2018-05-31",
            v4: "0.09",
          },
          {
            name: "2",
            v1: "风机叶轮刹车系统",
            v2: "2018-05-31 16:28:38",
            v3: "2018-05-31",
            v4: "0.09",
          },
          {
            name: "3",
            v1: "风机叶轮刹车系统",
            v2: "2018-05-31 16:28:38",
            v3: "2018-05-31",
            v4: "0.09",
          },
          {
            name: "4",
            v1: "风机叶轮刹车系统",
            v2: "2018-05-31 16:28:38",
            v3: "2018-05-31",
            v4: "0.09",
          },
          {
            name: "5",
            v1: "风机叶轮刹车系统",
            v2: "2018-05-31 16:28:38",
            v3: "2018-05-31",
            v4: "0.09",
          },
        ],
      },
      // 月发电量对比
      weatherData: [],
      powerChartData: {
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0,
            value: [],
          },
        ],
      },
      healthReportShow: false,
    };
  },

  created() {
    this.init();
  },

  methods: {
    init() {
      this.wpId = this.$route.params.wpId;
      this.wtId = this.$route.params.wtId;
      this.getTop5();
      this.renderDateTable();
      this.getTop10();
      this.getMtbfByBj();
      this.getFindPowerChar();
      this.getWeather();
    },
    switchWt(data) {
      this.$router.push(`/health/health10/${data.wpId}/${data.wtId}`);
      this.init();
    },
    // 获取等级评价
    getTop5() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "healthsub/gadaytop5",
        data: {
          wtId: that.wtId,
        },
        success(res) {
          let top5TableData = [];
          let index = 1;
          for (let key in res.data) {
            let ele = res.data[key];
            top5TableData.push({
              index,
              date: ele[1],
              rank: ele[2],
              wpId: ele[3],
              wtId: ele[4],
            });
            index++;
          }
          that.top5Table.data = top5TableData;
        },
      });
    },

    // 渲染健康报告表格
    renderDateTable(day = 5) {
      let tableData = [];
      for (let i = 0; i < day; i++) {
        tableData.push({
          index: i + 1,
          date: new Date(new Date().getTime() - 3600 * 1000 * 24 * (i + 1)).formatDate("yyyy-MM-dd hh:mm:ss"),
          wtId: this.wtId,
        });
      }
      this.dateTable.data = tableData;
    },

    // 获取等级评价
    getTop10() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "healthsub/queryStopTop10",
        data: {
          wtId: that.wtId,
        },
        success(res) {
          let leftData = [];
          let rightData = [];

          res.data.forEach((ele, index) => {
            const item = {
              index: index + 1,
              warnDesc: ele.warnDesc,
              startTime: new Date(ele.startTime).formatDate("yyyy-MM-dd hh:mm:ss"),
              stopTime: new Date(ele.stopTime).formatDate("yyyy-MM-dd hh:mm:ss"),
              stopHours: ele.stopHours,
            };
            if (index < 5) {
              leftData.push(item);
            } else {
              rightData.push(item);
            }
          });

          that.top10TableLeft.data = leftData;
          that.top10TableRight.data = rightData;
        },
      });
    },

    // 获取八大部件
    getMtbfByBj() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "healthsub/getWtMttrandMtbfByBj",
        data: {
          wtId: that.wtId,
        },
        success(res) {
          let partsArray = [];
          for (let key in res.data) {
            let linChartData = [];
            res.data[key][2].split(",").forEach((ele, index) => {
              linChartData.push({
                text: index + 1,
                value: ele,
              });
            });
            res.data[key].push(linChartData);
            partsArray.push(res.data[key]);
          }
          that.partsArray = partsArray;
        },
      });
    },

    // 获取发电曲线
    getFindPowerChar() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "healthsub/findPowerChar",
        data: {
          wtId: that.wtId,
        },
        success(res) {
          let chartUnits = ["(WM)", "(m/s)"];
          let chartData = [
            {
              title: "理论功率",
              yAxisIndex: 0,
              value: [],
            },
            {
              title: "实际功率",
              yAxisIndex: 0,
              value: [],
            },
            {
              title: "实时风速",
              yAxisIndex: 1,
              value: [],
            },
          ];

          res.data.timearr.forEach((time, index) => {
            chartData[0].value.push({
              text: new Date(time).formatDate("MM-dd hh:mm"),
              value: res.data.llgl[index],
            });
            chartData[1].value.push({
              text: new Date(time).formatDate("MM-dd hh:mm"),
              value: res.data.sjgl[index],
            });
            chartData[2].value.push({
              text: new Date(time).formatDate("MM-dd hh:mm"),
              value: res.data.ssfs[index],
            });
          });
          that.powerChartData.value = chartData;
          that.powerChartData.units = chartUnits;
        },
      });
    },

    // 获取天气信息
    async getWeather() {
      const { data } = await this.API.requestData({
        method: "POST",
        subUrl: "healthsub/getWeatherRealDay5Info",
        data: { wpId: this.wpId },
      });
      // console.log(data);
      if (data && data.data) {
        this.weatherData = data.data.ls;
        // const list = [];
        // data.data.ls.forEach((element) => {
        // console.log(element);
        // console.log(new Date(element.time).formatDate("yyyy-MM-dd hh:mm:ss"));
        // list.push();
        // });
      }
    },
  },
};
</script>

<style lang="less">
.health-10 {
  font-size: 12px;
  .com-table {
    tbody tr td {
      padding: 0;
      height: 30px;
    }
  }

  .table {
    tbody {
      td {
        padding: 0;
        height: 30px;
      }
      tr:nth-child(2n) td {
        background-color: fade(@gray, 20%);

        &.item {
          background-color: transparent;
        }
      }
    }

    th {
      background: fade(@gray, 40);
      font-size: 12px;
      font-weight: 400;
      line-height: 24px;
      color: @gray-l;
      border: 2px solid #07140f;

      &.type1 {
        border-left: 0;
        border-right: 0;
      }
    }
    td {
      color: @gray-l;
      text-align: center;
      height: 26px;
      line-height: 26px;

      &.item {
        width: 100px;
        div {
          color: @white;
          background: fade(@gray, 20);
          margin: 2px;
          border: 1px solid transparent;
        }
      }
    }

    .percent-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 30px;

      .percent-bar {
        height: 12px;
        width: 170px;
        background: transparent;
        border: 1px solid @gray-l;
        margin-left: 8px;

        .percent-value {
          height: calc(100% - 4px);
          background: @green;
          margin: 2px;
        }
      }
    }

    .score {
      width: 100px;
      div {
        background: fade(@gray, 20);
      }
    }
  }
  .panel-header {
    margin-bottom: 0;
    .panel-title {
      text-align: center;
    }
  }
  .fc-info {
    .panel-header {
      margin-bottom: 8px;
    }
    .panel-title {
      text-align: left;
      padding-left: 20px;
    }
  }
  .table-chart {
    height: 312px;
    .panel-title {
      text-align: left;
      padding-left: 20px;
    }
    .chart-title {
      // color: rgba(255, 255, 255, 0.75);
      color: @gray-l;
      .title-panel {
        height: 30px;
        line-height: 30px;
        margin-bottom: 8px;
        background-color: #1e2524;
        .des-title {
          padding-left: 100px;
        }
        .num {
          padding-left: 20px;
          color: #05bb4c;
          font-weight: 600;
        }
        .unit {
          padding-left: 20px;
        }
      }
    }
  }
  .table-panel .wrong-list {
    .panel-title {
      text-align: left;
      padding-left: 20px;
    }
  }

  .percent-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;

    .percent-bar {
      height: 12px;
      width: 170px;
      background: transparent;
      border: 1px solid @gray-l;
      margin-left: 8px;

      .percent-value {
        height: calc(100% - 4px);
        background: @green;
        margin: 2px;
      }
    }
  }
  .score {
    width: 100px;
    div {
      background: fade(@gray, 20);
    }
  }
  .data-list {
    .dot {
      width: 12px;
      height: 12px;
      margin: auto;

      &.green {
        background: @green;
      }

      &.yellow {
        background: @yellow;
      }
    }
  }
}
</style>