jn_sis_zhfx/src/views/HealthControl/healthDetail/wpHealth/index.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="'损失电量分析'"> -->
        <panel class="info-chart-panel" :title="`${wpName || ''}健康趋势`">
          <vertival-bar-line-chart
            :bardata="bardata"
            :lineData="lineData"
            :height="'250px'"
          />
        </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.yczqlmonth"
            />
            <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.ycdl1month }}</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"
              @click="jumpUrl(item)"
            >
              {{ item[3] }}
            </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";

import axios from "axios";
export default {
  name: "health3",
  setup() {},
  components: {
    SvgIcon,
    Panel,
    VertivalBarLineChart,
    Table,
    ListBarChart,
    ThermometerVChart,
    NormalPieChart,
    ToolbarPanel,
    Dashboard2,
  },
  data() {
    return {
      wpId: "",
      wpName: "",
      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.wpName = this.$route.params.wpName || "";
    this.$nextTick(() => {
      this.requestData();
      this.getWpMap();
    });
  },

  methods: {
    requestData() {
      let that = this;
      that.API.requestData({
        method: "GET",
        timeout: 8000,
        baseURL: process.env.VUE_APP_NEW_WISDOM,
        subUrl: "/recommen/findAllChartjz",
        data: {
          wpId: that.wpId,
          type: that.type,
        },
        success(res) {
          if (res.code == 200) {
            that.bardata.legend = ["优数量", "良数量", "差数量"];
            that.lineData = res.data.lvchart;
            that.bardata.area = res.data.datechart;
            that.bardata.data[2] = res.data.cslchart;
            that.bardata.data[1] = res.data.lslchart;
            that.bardata.data[0] = res.data.yslchart;
          }
        },
      });
    },

    getWpMap() {
      let that = this;
      that.API.requestData({
        method: "GET",
        baseURL: process.env.VUE_APP_NEW_WISDOM,
        subUrl: "/health/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();
    },

    jumpUrl(item) {
    //   this.$router.push({
    //     path: `/health/healthDetail/wtHealth/${this.wpId}/${item[0]}`,
    //     query: { from: "wpHealth" },
    //   });
    },
  },
};
</script>

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

      .tab {
        position: relative;
        flex: 0 0 auto;
        text-align: center;
        height: 33px;
        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;
            cursor: pointer;

            & + .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 {
        tbody {
          height: calc(100vh - 640px);
        }
      }
    }
  }
}
</style>