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 active">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-wind-site'" />
          </i>
          <span> 24小时健康趋势 </span>
        </div>
        <div class="tab">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-wind-site'" />
          </i>
          <span> 7日健康趋势 </span>
        </div>
        <div class="tab">
          <i class="svg-icon svg-icon svg-icon-sm">
            <svg-icon :svgid="'svg-wind-site'" />
          </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 :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="25" />
            <div class="lengends">
              <div class="item">
                <span class="label">本日预测电量</span>
                <span class="lengend gary"></span>
                <span class="value">123</span>
              </div>
              <div class="item">
                <span class="label">本日已发电量</span>
                <span class="lengend green"></span>
                <span class="value">123</span>
              </div>
            </div>
          </div>
          <div class="dashboard">
            <dashboard-2 :height="'7.5vh'" :width="'115px'" :value="34" />
            <div class="lengends">
              <div class="item">
                <span class="label">本日预测电量</span>
                <span class="lengend gary"></span>
                <span class="value">123</span>
              </div>
              <div class="item">
                <span class="label">本日已发电量</span>
                <span class="lengend green"></span>
                <span class="value">123</span>
              </div>
            </div>
          </div>
        </panel>
        <panel title="设备健康度" class="mg-b-16">
          <thermometer-v-chart :height="'5.5vh'" :value="100" />
        </panel>
        <panel title="隐患等级" class="mg-b-16">
          <normal-pie-chart :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">98</span>
                <span class="unit gray">台</span>
              </span>
              <span class="level">
                <span class="text purple">良</span>：
                <span class="value white">98</span>
                <span class="unit gray">台</span>
              </span>
              <span class="level">
                <span class="text orange">差</span>：
                <span class="value white">98</span>
                <span class="unit gray">台</span>
              </span>
            </div>
          </template>
          <div class="matrix">
            <div class="item green">1号</div>
            <div class="item purple">2号</div>
            <div class="item orange">3号</div>
            <div class="item" v-for="index of 100" :key="index">{{ index + 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";
export default {
  setup() {},
  components: { SvgIcon, Panel, VertivalBarLineChart, Table, ListBarChart, ThermometerVChart, NormalPieChart, ToolbarPanel, Dashboard2 },
  data() {
    return {
      listBarData1: [
        { name: "未来 {c1|15分钟} 预测电量", value: 123.62 },
        { name: "未来 {c1|4小时} 预测电量", value: 123.62 },
      ],
      listBarData1Color: ["purple", "purple"],
      tableData: {
        column: [
          {
            name: "",
            field: "index",
            is_num: false,
            is_light: false,
          },
          {
            name: "项目",
            field: "name",
            is_num: false,
            is_light: false,
          },
          {
            name: "项目",
            field: "lqf",
            is_num: false,
            is_light: false,
          },
          {
            name: "项目",
            field: "yggl",
            is_num: false,
            is_light: false,
          },
          {
            name: "项目",
            field: "yyy",
            is_num: false,
            is_light: false,
          },
          {
            name: "项目",
            field: "pcspp",
            is_num: false,
            is_light: false,
          },
        ],
        data: [
          {
            index: 1,
            name: "MG01-01",
            lqf: "0.1000",
            yggl: "0.1000",
            yyy: "0.10",
            pcspp: "0.1000",
            u1: "0.1000",
            u2: "0.1000",
            v1: "0.1000",
            v2: "0.1000",
            w1: "0.1000",
            w2: "0.1000",
            zca: "0.1000",
            zcb: "0.1000",
            clx: "0.1000",
            clx1: "0.1000",
            clx2: "0.1000",
            jc: "0.1000",
            hh: "0.1000",
            hj: "0.1000",
            is_light: false,
          },
        ],
      },
    };
  },
  created() {
    for (let i = 1; i < 50; i++) {
      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
      this.tableData.data[i].index = i + 1;
    }
  },
};
</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;
            }
          }

          .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>