hb_sis_zhfx/src/views/HealthControl/Health10.vue

<template>
  <div class="health-10">
    <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(100vh - 174px);">
                <table style="width:100%;" 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" :list="line.value" :units="line.units" />
        </div>
      </el-col>
    </el-row>
    <div class="fc-info mg-b-16">
      <panel :title="'曲线'" :showLine="false">
        <zoom-line-chart height="35vh" :list="powerChartData.value" :units="powerChartData.units" />
      </panel>
    </div>
  </div>
</template>

<script>
// import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
// import SvgIcon from "../../components/coms/icon/svg-icon.vue";SvgIcon,
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 StrightLineChart from "../../components/chart/line/stright-line-chart.vue";
import ImgLineChart from "../../components/chart/line/img-line-chart.vue";
import ZoomLineChart from '../../components/chart/line/zoom-line-chart.vue';

export default {
  setup () { },
  components: {
    Panel,
    Table,
    TableLineChart,
    ImgLineChart,
    ZoomLineChart,
  },
  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>";
            },
          },
        ],
        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",
          },
        ],
      },
      // 月发电量对比
      line: {
        units: ["功率", "风速"],
        value: [
          {
            title: "应发功率",
            yAxisIndex: 1,
            value: [
              {
                text: "05-02 00:00",
                value: 11,
                weather: 'sun',
                direction: "n",
              },
              {
                text: "05-04 00:00",
                value: 11,
                weather: 'rain',
                direction: "s",
              },
              {
                text: "05-06 00:00",
                value: 13,
                weather: 'sun',
                direction: "w",
              },
              {
                text: "05-08 00:00",
                value: 12,
                weather: 'cloud',
                direction: "e",
              },
              {
                text: "05-10 00:00",
                value: 13,
                weather: 'sun',
                direction: "nw",
              },
              {
                text: "05-12 00:00",
                value: 12,
                weather: 'sun',
                direction: "ne",
              },
              {
                text: "05-14 00:00",
                value: 11,
                weather: 'cloud',
                direction: "sw",
              },
              {
                text: "05-16 00:00",
                value: 11,
                weather: 'sun',
                direction: "se",
              },
              {
                text: "05-18 00:00",
                value: 13,
                weather: 'rain',
                direction: "n",
              },
              {
                text: "05-20 00:00",
                value: 11,
                weather: 'cloud',
                direction: "n",
              },
              {
                text: "05-22 00:00",
                value: 12,
                weather: 'sun',
                direction: "n",
              },
            ],
          },
          {
            title: "实际功率",
            yAxisIndex: 1,
            value: [
              {
                text: "05-02 00:00",
                value: 1,
              },
              {
                text: "05-04 00:00",
                value: 3,
              },
              {
                text: "05-06 00:00",
                value: 4,
              },
              {
                text: "05-08 00:00",
                value: 1,
              },
              {
                text: "05-10 00:00",
                value: 3,
              },
              {
                text: "05-12 00:00",
                value: 5,
              },
              {
                text: "05-14 00:00",
                value: 1,
              },
              {
                text: "05-16 00:00",
                value: 5,
              },
              {
                text: "05-18 00:00",
                value: 4,
              },
              {
                text: "05-20 00:00",
                value: 1,
              },
              {
                text: "05-22 00:00",
                value: 3,
              },
            ],
          },
        ],
      },
      powerChartData: {
        units: [""],
        value: [{
          title: "",
          yAxisIndex: 0,
          value: []
        }],
      },
      line2: {
        units: ["功率", "风速"],
        value: [
          {
            title: "应发功率",
            yAxisIndex: 0,
            value: [
              {
                text: "05-02 00:00",
                value: 1,
              },
              {
                text: "05-04 00:00",
                value: 3,
              },
              {
                text: "05-06 00:00",
                value: 4,
              },
              {
                text: "05-08 00:00",
                value: 2,
              },
              {
                text: "05-10 00:00",
                value: 3,
              },
              {
                text: "05-12 00:00",
                value: 5,
              },
              {
                text: "05-14 00:00",
                value: 1,
              },
              {
                text: "05-16 00:00",
                value: 1,
              },
              {
                text: "05-18 00:00",
                value: 3,
              },
              {
                text: "05-20 00:00",
                value: 4,
              },
              {
                text: "05-22 00:00",
                value: 2,
              },
              {
                text: "05-24 00:00",
                value: 3,
              },
              {
                text: "05-26 00:00",
                value: 5,
              },
              {
                text: "05-28 00:00",
                value: 1,
              },
            ],
          },
        ],
      },
    };
  },

  created () {
    this.wtId = this.$route.params.wtId;
    this.wpId = this.$route.params.wpId;
    this.getTop5();
    this.renderDateTable();
    this.getTop10();
    this.getMtbfByBj();
    this.getFindPowerChar();
  },

  methods: {
    // 获取等级评价
    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",
        timeout: 300000,
        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;
        }
      });
    },
  }
};
</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>