hb_sis_zhfx/src/views/HealthControl/Health3.vue

<template>
  <div class="health-3">
    <div class="power-info mg-b-8">
      <div class="info-tab">
        <div class="tab" :class="type === '2' ? 'active' : ''" @click="changeDate('2')">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-h-day'" />
          </i>
          <span> 7日健康趋势 </span>
        </div>
        <div class="tab" :class="type === '3' ? 'active' : ''" @click="changeDate('3')">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-h-month'" />
          </i>
          <span>30日健康趋势</span>
        </div>
        <div class="empty"></div>
        <!-- <div class="tab">
          <span>全部风场健康趋势</span>
        </div> -->
      </div>
      <div class="info-chart">
        <panel class="info-chart-panel" :title="'损失电量分析'">
          <vertival-bar-line-chart :bardata="bardata" :lineData="lineData" :height="'310px'" />
        </panel>
      </div>
    </div>
    <div class="fj-info">
      <div class="left-info ">
        <panel title="预测电量" class="mg-b-16">
          <list-bar-chart :list="listBarData1" :colors="listBarData1Color" :height="'9.5vh'" />
          <div class="dashboard">
            <dashboard-2 :height="'7.5vh'" :width="'115px'" :value="sourceMap.rfdl" />
            <div class="lengends">
              <div class="item">
                <span class="label">本日发电量</span>
                <span class="lengend gary"></span>
                <span class="value">{{sourceMap.rfdl}}</span>
              </div>
              <div class="item">
                <span class="label">本日预测电量</span>
                <span class="lengend green"></span>
                <span class="value">{{sourceMap.ycdl1day}}</span>
              </div>
            </div>
          </div>
          <div class="dashboard">
            <dashboard-2 :height="'7.5vh'" :width="'115px'" :value="sourceMap.yfdl" />
            <div class="lengends">
              <div class="item">
                <span class="label">本月发电量</span>
                <span class="lengend gary"></span>
                <span class="value">{{sourceMap.yfdl}}</span>
              </div>
              <div class="item">
                <span class="label">本月预测电量</span>
                <span class="lengend green"></span>
                <span class="value">{{sourceMap.yczqlmonth}}</span>
              </div>
            </div>
          </div>
        </panel>
        <panel title="设备健康度" class="mg-b-16">
          <thermometer-v-chart :height="'5.5vh'" :value="sourceMap.jkd" />
        </panel>
        <panel title="隐患等级" class="mg-b-16">
          <normal-pie-chart :list="dangerData" :height="'14vh'" />
        </panel>
      </div>
      <div class="right-info">
        <toolbar-panel title="风机健康矩阵列表" :showLine="false" class="matrix-panel mg-b-8">
          <template v-slot:tools>
            <div class="tools">
              <span class="level">
                <span class="text green">优</span>：
                <span class="value white">{{sourceMap.ysl}}</span>
                <span class="unit gray">台</span>
              </span>
              <span class="level">
                <span class="text purple">良</span>：
                <span class="value white">{{sourceMap.lsl}}</span>
                <span class="unit gray">台</span>
              </span>
              <span class="level">
                <span class="text orange">差</span>：
                <span class="value white">{{sourceMap.csl}}</span>
                <span class="unit gray">台</span>
              </span>
            </div>
          </template>
          <div class="matrix">
            <div class="item" :class="item[1] === '1' ? 'green' : item[1] === '2' ? 'purple' : 'orange'" v-for="(item, index) in sourceMap.wtIdls" :key="index">{{item[2]}}</div>
            <div class="blank" v-for="index of 20" :key="index"></div>
          </div>
        </toolbar-panel>
        <div class="table">
          <Table :data="tableData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ListBarChart from "../../components/chart/bar/list-bar-chart.vue";
import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
import Dashboard2 from "../../components/chart/other/Dashboard2.vue";
import ThermometerVChart from "../../components/chart/other/thermometer-v-chart.vue";
import NormalPieChart from "../../components/chart/pie/normal-pie-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import Panel from "../../components/coms/panel/panel.vue";
import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
import Table from "../../components/coms/table/table.vue";
export default {
  setup () { },
  components: { SvgIcon, Panel, VertivalBarLineChart, Table, ListBarChart, ThermometerVChart, NormalPieChart, ToolbarPanel, Dashboard2 },
  data () {
    return {
      sourceMap: {
        wtIdls:[]
      },
      type: "2",
      bardata:{
        area:[],
        legend:[],
        data:[[]]
      },
      lineData:[],
      listBarData1: [],
      dangerData:[],
      listBarData1Color: ["purple", "purple"],
      tableData: {
        column: [{
            name: "",
            field: "",
            is_num: false,
            is_light: false,
          },
          {
            name: "风机编号",
            field: "windTurbineId",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障时间",
            field: "stopTime",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障类型",
            field: "stopTypeId",
            is_num: false,
            is_light: false,
          },
          {
            name: "报警描述",
            field: "warningId",
            is_num: false,
            is_light: false,
          },
        ],
        data: [],
      },
    };
  },
  created () {
    this.wpId = this.$route.params.wpId;
    this.$nextTick(()=>{
      this.requestData();
      this.getWpMap();
    });
  },

  methods: {

    requestData(){
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "recommen/findAllChartjz",
        data: {
          wpId: that.wpId,
          type: that.type
        },
        success (res) {
          // 顶部图表绿线
          let lineData = res.data.lvchart;

          let area = res.data.datechart;
          let legend = ["优数量", "良数量", "差数量"];
          let data = [];

          let dataLength = res.data.datechart.length;

          for(let i=0;i<dataLength;i++){
            data.push([res.data.yslchart[i], res.data.lslchart[i], res.data.cslchart[i]]);
          }

          let bardata = {
            area,
            legend,
            data
          };

          that.bardata = bardata;
          that.lineData = lineData;
        }
      });
    },

    getWpMap () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "healthmain/findWpMap",
        data: {
          wpId: that.wpId
        },
        success (res) {
          that.listBarData1= [
            { name: "未来 {c1|15分钟} 预测电量", value: res.data.ycdl15minute },
            { name: "未来 {c1|4小时} 预测电量", value: res.data.ycdl1hour },
          ];

          let dangerData=[{
            name:"一级隐患",
            value:0
          },{
            name:"二级隐患",
            value:0
          },{
            name:"三级隐患",
            value:0
          },{
            name:"四级隐患",
            value:0
          },{
            name:"五级隐患",
            value:0
          }];

          dangerData.forEach((ele,index) => {
            ele.value=res.data.yhls[index];
          });

          that.dangerData = dangerData;
          that.tableData.data = res.data.gzls;
          that.sourceMap = res.data;
        }
      });
    },

    changeDate(type){
      this.type = type;
      this.requestData();
    },
  }
};
</script>

<style lang="less">
.health-3 {
  .power-info {
    display: flex;
    .info-tab {
      flex: 0 0 156px;
      display: flex;
      flex-direction: column;
      height: 350px;
      margin-right: 1.4815vh;

      .tab {
        position: relative;
        flex: 0 0 auto;
        text-align: center;
        line-height: 33px;
        margin-right: 8px;
        color: @gray-l;
        font-size: 12px;
        background: fade(@gray, 20);
        border: 1px solid fade(@gray, 20);

        display: flex;
        align-items: center;

        i {
          margin: 0 1.4815vh;
          svg use {
            fill: @gray-l;
          }
        }

        &:hover,
        &.active {
          background: fade(@green, 20);
          border: 1px solid @green;
          color: @green;
          cursor: pointer;

          i svg use {
            fill: @green;
          }
        }

        &.active::after {
          box-sizing: content-box;
          width: 0px;
          height: 0px;
          position: absolute;
          right: -19px;
          padding: 0;
          border-bottom: 9px solid @green;
          border-top: 9px solid transparent;
          border-left: 9px solid transparent;
          border-right: 9px solid transparent;
          display: block;
          content: '';
          z-index: 10;
          transform: rotate(90deg);
        }

        &.active::before {
          box-sizing: content-box;
          width: 0px;
          height: 0px;
          position: absolute;
          right: -17px;
          padding: 0;
          border-bottom: 9px solid #063319;
          border-top: 9px solid transparent;
          border-left: 9px solid transparent;
          border-right: 9px solid transparent;
          display: block;
          content: '';
          z-index: 12;
          transform: rotate(90deg);
        }

        & + .tab {
          margin-top: 0.7407vh;
        }

        &:last-child {
          text-align: center;
          justify-content: center;
        }
      }

      .empty {
        flex: 1 0 auto;
      }
    }

    .info-chart {
      flex: 1 0 auto;
    }
  }

  .fj-info {
    display: flex;
    .left-info {
      flex: 0 0 300px;
      padding-right: 16px;

      .com-panel .panel-header {
        margin-bottom: 0.7407vh;
      }
      @media screen and (max-height: 1078px) {
        .mg-b-16 {
          margin-bottom: 0.7407vh;
        }
      }

      @media screen and (min-height: 1078px) and (max-height: 1080px) {
        .com-panel .panel-header {
          margin-bottom: 1.4815vh;
        }
      }

      .dashboard {
        position: relative;
        display: flex;
        align-items: center;

        .lengends {
          font-size: 12px;
          line-height: 20px;
          padding-left: 12px;
          .item {
            display: flex;
            align-items: center;

            .label {
              margin-right: 8px;
              color: @gray;
            }

            .lengend {
              display: inline-block;
              width: 6px;
              height: 6px;
              background: @gray;
              border-radius: 50%;
              margin-right: 8px;

              &.green {
                background: @green;
              }
            }
            .value {
              color: fade(@white, 75);
            }
          }
        }
      }
    }

    .right-info {
      flex: 1;

      .matrix-panel {
        .panel-title {
          flex: 0 0 auto;
        }

        .tools {
          margin-left: 8px;

          .level {
            padding: 0 16px;
          }
        }

        .matrix {
          display: flex;
          flex-wrap: wrap;

          .item {
            flex: 1 0 calc(100% / 20 - 4px);
            line-height: 26px;
            background: fade(@gray, 20);
            color: @gray-l;
            font-size: 12px;
            margin-bottom: 4px;
            text-align: center;
            border: 1px solid transparent;

            & + .item {
              margin-left: 4px;
            }

            &:nth-child(20n + 1) {
              margin-left: 0px;
            }

            &.green {
              color: @green;
              background: fade(@green, 20);
              border-color: @green;
            }

            &.purple {
              color: @purple;
              background: fade(@purple, 20);
              border-color: @purple;
            }

            &.orange {
              color: @orange;
              background: fade(@orange, 20);
              border-color: @orange;
            }

            &.red {
              color: @red;
              background: fade(@red, 20);
              border-color: @red;
            }
          }

          .blank {
            flex: 1 0 calc(100% / 20 - 4px);
            margin-left: 4px;
          }
        }
      }

      .table {
        .com-table thead tr th {
          padding: 0.3704vh 0;
        }

        tbody {
          height: 33vh;
        }
      }
    }
  }
}
</style>