hb_sis_zhfx/src/views/NewPages/power-benchmarking.vue

<template>
  <div class="power-benchmarking-page">
    <div class="static">
      <div class="static-main">
        <span class="dot top-left"></span>
        <span class="dot bottom-left"></span>
        <span class="dot top-rignt"></span>
        <span class="dot bottom-right"></span>
        <div class="icon">
          <i class="svg-icon svg-icon-balck">
            <svg-icon :svgid="'svg-flash'" />
          </i>
        </div>
        <div class="info">
          <div class="title">累计增发电量</div>
          <div class="value">666.66</div>
          <div class="unit">kwh</div>
        </div>
      </div>
      <div class="static-items" style="flex:0 0 867px;">
        <div class="static-items-title">
          <i class="svg-icon svg-icon-green">
            <svg-icon :svgid="'svg-flash'" />
          </i>
          理论电量平衡分析法
        </div>
        <div class="items">
          <div class="item" v-for="index of 6" :key="index">
            <div class="title">风能利用率</div>
            <div class="value">30%</div>
            <div class="up-down">
              <div class="up-down-item">
                <span class="name">周</span>
                <span class="icon">
                  <i class="svg-icon svg-icon-sm svg-icon-yellow">
                    <svg-icon :svgid="'svg-arrow-up-1'" />
                  </i>
                </span>
                <span class="value">2%</span>
              </div>
              <div class="up-down-item">
                <span class="name">环</span>
                <span class="icon">
                  <i class="svg-icon svg-icon-sm svg-icon-green">
                    <svg-icon :svgid="'svg-arrow-dpwn-1'" />
                  </i>
                </span>
                <span class="value">2%</span>
              </div>
            </div>
            <div class="percent">
              <div class="percent-box">
                <div class="percent-bar bg-green" style="width:24%;"></div>
                <div class="sj" style="left: calc(24% - 3px);"></div>
              </div>
              <div class="value">24%</div>
            </div>
          </div>
        </div>
      </div>
      <div class="static-items" style="flex:0 0 430px;">
        <div class="static-items-title">
          <i class="svg-icon svg-icon-green">
            <svg-icon :svgid="'svg-flash'" />
          </i>
          理论电量平衡分析法
        </div>
        <div class="items">
          <div class="item" v-for="index of 3" :key="index">
            <div class="title">风能利用率</div>
            <div class="value">30%</div>
            <div class="up-down">
              <div class="up-down-item">
                <span class="name">周</span>
                <span class="icon">
                  <i class="svg-icon svg-icon-sm svg-icon-yellow">
                    <svg-icon :svgid="'svg-arrow-up-1'" />
                  </i>
                </span>
                <span class="value">2%</span>
              </div>
              <div class="up-down-item">
                <span class="name">环</span>
                <span class="icon">
                  <i class="svg-icon svg-icon-sm svg-icon-green">
                    <svg-icon :svgid="'svg-arrow-dpwn-1'" />
                  </i>
                </span>
                <span class="value">2%</span>
              </div>
            </div>
            <div class="percent">
              <div class="percent-box">
                <div class="percent-bar bg-green" style="width:24%;"></div>
                <div class="sj" style="left: calc(24% - 3px);"></div>
              </div>
              <div class="value">24%</div>
            </div>
          </div>
        </div>
      </div>
      <div class="static-items" style="flex:0 0 430px;">
        <div class="static-items-title">
          <i class="svg-icon svg-icon-green">
            <svg-icon :svgid="'svg-flash'" />
          </i>
          理论电量平衡分析法
        </div>
        <div class="items">
          <div class="item" v-for="index of 3" :key="index">
            <div class="title">风能利用率</div>
            <div class="value">30%</div>
            <div class="up-down">
              <div class="up-down-item">
                <span class="name">周</span>
                <span class="icon">
                  <i class="svg-icon svg-icon-sm svg-icon-yellow">
                    <svg-icon :svgid="'svg-arrow-up-1'" />
                  </i>
                </span>
                <span class="value">2%</span>
              </div>
              <div class="up-down-item">
                <span class="name">环</span>
                <span class="icon">
                  <i class="svg-icon svg-icon-sm svg-icon-green">
                    <svg-icon :svgid="'svg-arrow-dpwn-1'" />
                  </i>
                </span>
                <span class="value">2%</span>
              </div>
            </div>
            <div class="percent">
              <div class="percent-box">
                <div class="percent-bar bg-green" style="width:24%;"></div>
                <div class="sj" style="left: calc(24% - 3px);"></div>
              </div>
              <div class="value">24%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="top">
      <div class="top-left">
        <div class="top-left-header">
          <div class="header-left">
            <div class="selecttion">
              <div class="item" :class="{ active: selecttionIndex == 0 }" @click="selectionClick(0)">日</div>
              <div class="item" :class="{ active: selecttionIndex == 1 }" @click="selectionClick(1)">周</div>
              <div class="item" :class="{ active: selecttionIndex == 2 }" @click="selectionClick(2)">月</div>
              <div class="item" :class="{ active: selecttionIndex == 3 }" @click="selectionClick(3)">季</div>
              <div class="item" :class="{ active: selecttionIndex == 4 }" @click="selectionClick(4)">年</div>
            </div>
            <div class="query">
              <div class="query-items">
                <div class="query-item">
                  <div class="lable">风场：</div>
                  <div class="search-input">
                    <el-cascader :options="cascader.options" :props="cascader.props" collapse-tags clearable></el-cascader>
                  </div>
                </div>
              </div>
              <div class="query-items">
                <div class="query-item">
                  <div class="lable">风场：</div>
                  <div class="search-input">
                    <el-cascader :options="cascader.options" :props="cascader.props" collapse-tags clearable></el-cascader>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="header-right">
            <div class="right-btn" :class="{ active: btnIndex == 0 }" @click="rightBtnClick(0)">风电</div>
            <div class="right-btn" :class="{ active: btnIndex == 1 }" @click="rightBtnClick(1)">光伏</div>
          </div>
        </div>
        <group-table :customClass="'table'" :data="eltableData" :height="'280px'" :pageSize="10" @headerClick="headerClick"></group-table>
      </div>
      <div class="top-right">
        <div class="rank-title">
          <div class="border top-left"></div>
          <div class="border top-right"></div>
          <div class="border bottom-left"></div>
          <div class="border bottom-right"></div>
          排行榜
        </div>
        <div class="rank-block"></div>
        <group-table :customClass="'rank-table'" :data="greenTable" :height="'280px'">
          <template v-slot:rank="scope">
            <div class="rank-index" :class="'index-' + scope.row.rank">
              {{ scope.row.rank }}
            </div>
          </template>
        </group-table>
      </div>
    </div>
    <div class="bottom">
      <panel :title="'指标分析'">
        <multiple-bar-chart :list="barData" :height="'calc(100vh - 660px)'" :units="['功率数值（kW）']" />
      </panel>
    </div>
  </div>
</template>
<script>
import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import Panel from "../../components/coms/panel/panel.vue";
import groupTable from "../../components/coms/table/group-table.vue";
export default {
  components: { groupTable, Panel, MultipleBarChart, SvgIcon },
  data() {
    let that = this;
    return {
      selecttionIndex: 0,
      btnIndex: 0,
      eltableData: {
        column: [
          {
            name: "",
            child: [
              {
                name: "区域公司",
                field: "name",
                width: 55,
              },
              {
                name: "评分",
                field: "v1",
                width: 55,
              },
            ],
          },
          {
            name: "基础指标",
            child: [
              {
                name: "装机容量（MW）",
                field: "v1",
                width: 55,
              },
              {
                name: "在运台数 (台)",
                field: "v1",
                width: 55,
              },
              {
                name: "理论电量 (万kwh)",
                field: "v1",
                width: 55,
              },
              {
                name: "发电量 (万kwh)",
                field: "v1",
                width: 55,
              },
              {
                name: "非计划检修损失电量 (万kwh)",
                field: "v1",
                width: 55,
              },
              {
                name: "计划检修损失电量 (万kwh)",
                field: "v1",
                width: 55,
              },
              {
                name: "限电损失电量 (万kwh)",
                field: "v1",
                width: 55,
              },
              {
                name: "受累损失电量 (万kwh)",
                field: "v1",
                width: 55,
              },
              {
                name: "性能损失电量 (万kwh)",
                field: "v1",
                width: 55,
              },
            ],
          },
          {
            name: "安全指标",
            child: [
              {
                name: "人身设备事故 (次)",
                field: "v1",
                width: 55,
              },
              {
                name: "设备一类障碍 (次)",
                field: "v1",
                width: 55,
              },
            ],
          },
          {
            name: "经济指标",
            child: [
              {
                name: "人身设备事故 (次)",
                field: "v1",
                width: 55,
              },
              {
                name: "限电损失率 (%)",
                field: "v1",
                width: 55,
              },
              {
                name: "性能损失率 (%)",
                field: "v1",
                width: 55,
              },
              {
                name: "综合厂用电率 (%)",
                field: "v1",
                width: 55,
              },
              {
                name: "设备利用小时 (小时)",
                field: "v1",
                width: 55,
              },
              {
                name: "光功率 预测 准确率 (%)",
                field: "v1",
                width: 55,
              },
              {
                name: "AGC 曲线 跟随率 (%)",
                field: "v1",
                width: 55,
              },
            ],
          },
          {
            name: "设备指标",
            child: [
              {
                name: "MTBF (小时)",
                field: "v1",
                width: 55,
              },
              {
                name: "MTTF (小时)",
                field: "v1",
                width: 55,
              },
              {
                name: "设备 可利 用率 (%)",
                field: "v1",
                width: 55,
              },
              {
                name: "等效 可用 系数 (%)",
                field: "v1",
                width: 55,
              },
              {
                name: "非计划 检修 损失率 (%)",
                field: "v1",
                width: 55,
              },
              {
                name: "计划检 修损 失率 (%)",
                field: "v1",
                width: 55,
              },
            ],
          },
          {
            name: "管理效率指标",
            child: [
              {
                name: "MTTR (小时)",
                field: "v1",
                width: 55,
              },
              {
                name: "隐患 发现 准确率 (%)",
                field: "v1",
                width: 55,
              },
              {
                name: "消缺 及时率 (%)",
                field: "v1",
                width: 55,
              },
            ],
          },
          {
            name: "资源指标",
            child: [
              {
                name: "累计 辐射 总量 (兆焦/ 平米)",
                field: "v1",
                width: 80,
              },
            ],
          },
        ],
        data: [
          {
            name: "宁夏",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            name: "湖北",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            name: "合肥",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            name: "宁波",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            name: "内蒙",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            name: "山东",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            name: "山西",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            name: "云南",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            name: "新疆",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            name: "湖南",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
        ],
        total: 12,
      },
      greenTable: {
        column: [
          {
            name: "排名",
            field: "rank",
            slot: true,
          },
          {
            name: "名称",
            field: "v2",
            width: 62,
          },
          {
            name: "指标项",
            child: [
              {
                name: "人身设备事故 (次)",
                field: "v1",
                width: 62,
              },
            ],
          },
        ],
        data: [
          {
            rank: 1,
            name: "宁夏",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            rank: 2,
            name: "湖北",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            rank: 3,
            name: "合肥",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            rank: 4,
            name: "宁波",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            rank: 4,
            name: "内蒙",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            rank: 4,
            name: "山东",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            rank: 4,
            name: "山西",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            rank: 4,
            name: "云南",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            rank: 4,
            name: "新疆",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
          {
            rank: 4,
            name: "湖南",
            v1: 100.0,
            v2: 88.88,
            v3: 0.01,
          },
        ],
      },
      barData: [
        {
          title: "日发电量",
          value: [
            {
              text: "宁夏",
              value: 1000,
            },
            {
              text: "宁夏",
              value: 1200,
            },
            {
              text: "宁夏",
              value: 1200,
            },
            {
              text: "宁夏",
              value: 1200,
            },
            {
              text: "宁夏",
              value: 1200,
            },
            {
              text: "宁夏",
              value: 1200,
            },
            {
              text: "宁夏",
              value: 1200,
            },
            {
              text: "宁夏",
              value: 1200,
            },
            {
              text: "宁夏",
              value: 1200,
            },
            {
              text: "宁夏",
              value: 1200,
            },
          ],
        },
      ],
      cascader: {
        props: { multiple: true },
        options: [
          {
            value: 1,
            label: "东南",
            children: [
              {
                value: 2,
                label: "上海",
                children: [
                  { value: 3, label: "普陀" },
                  { value: 4, label: "黄埔" },
                  { value: 5, label: "徐汇" },
                ],
              },
              {
                value: 7,
                label: "江苏",
                children: [
                  { value: 8, label: "南京" },
                  { value: 9, label: "苏州" },
                  { value: 10, label: "无锡" },
                ],
              },
              {
                value: 12,
                label: "浙江",
                children: [
                  { value: 13, label: "杭州" },
                  { value: 14, label: "宁波" },
                  { value: 15, label: "嘉兴" },
                ],
              },
            ],
          },
          {
            value: 17,
            label: "西北",
            children: [
              {
                value: 18,
                label: "陕西",
                children: [
                  { value: 19, label: "西安" },
                  { value: 20, label: "延安" },
                ],
              },
              {
                value: 21,
                label: "新疆维吾尔族自治区",
                children: [
                  { value: 22, label: "乌鲁木齐" },
                  { value: 23, label: "克拉玛依" },
                ],
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    selectionClick(index) {
      this.selecttionIndex = index;
    },
    headerClick(param) {
      console.log(param);
    },
    rightBtnClick(index) {
      this.btnIndex = index;
    },
  },
};
</script>

<style lang="less">
.power-benchmarking-page {
  .static {
    display: flex;
    height: 162px;
    margin-bottom: 8px;

    .static-main {
      position: relative;
      flex: 0 0 150px;
      height: 162px;
      border: 1px solid fade(@green, 60);
      padding: 8px;
      background: fade(@gray, 20);
      margin-right: 8px;

      .dot {
        position: absolute;
        width: 3px;
        height: 3px;
        background: @green;

        &.top-left {
          top: 5px;
          left: 5px;
        }

        &.bottom-left {
          bottom: 5px;
          left: 5px;
        }

        &.top-rignt {
          top: 5px;
          right: 5px;
        }

        &.bottom-right {
          bottom: 5px;
          right: 5px;
        }
      }

      .icon {
        height: 40px;
        margin: 8px 0;
        display: flex;
        justify-content: center;

        i {
          width: 36px;
          height: 36px;
          padding: 2px;
          background: @green;
          border-radius: 100%;
          border: 4px solid @gray;

          svg {
            width: 24px;
            height: 24px;
            use {
              fill: #000;
            }
          }
        }
      }

      .info {
        text-align: center;
        .title {
          font-size: 18px;
          margin-bottom: 12px;
        }

        .value {
          font-size: 18px;
          color: @green;
          margin-bottom: 4px;
        }

        .unit {
          padding: 0 8px;
          text-align: right;
        }
      }
    }

    .static-items {
      border: 1px solid fade(@gray, 60);
      margin-right: 8px;

      .static-items-title {
        text-align: center;
        line-height: 27px;
        height: 27px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: @green;
      }

      .items {
        display: flex;

        .item {
          flex: 0 0 138px;
          height: 133px;
          margin-left: 8px;
          background: fade(@gray, 20);
          text-align: center;
          padding: 8px;

          & > .title {
            font-size: 14px;
            color: @gray-l;
          }

          & > .value {
            font-size: 18px;
            font-family: @font-family-num;
            margin: 8px 0;
          }

          & > .up-down {
            display: flex;
            justify-content: space-around;
            margin: 8px 0;

            .up-down-item {
              flex: 1 0 auto;
              display: flex;
              align-items: center;
              justify-content: space-around;
            }
          }

          & > .percent {
            display: flex;
            .percent-box {
              position: relative;
              height: 10px;
              border: 1px solid @gray;
              margin-right: 8px;
              width: calc(100% - 38px);
              padding: 2px;
              margin-top: 2px;

              .percent-bar {
                height: 4px;
              }

              .sj {
                position: absolute;
                border-style: solid;
                border-width: 5px 3px 5px 3px;
                border-color: transparent transparent @green transparent;
                width: 0px;
                height: 0px;
                top: 8px;
              }
            }
          }

          &:first-child {
            margin-left: 0px;
          }
        }
      }

      &:last-child {
        margin-right: 0px;
      }
    }
  }

  .top {
    display: flex;
    margin-bottom: 16px;

    .top-left {
      flex: 1 0 auto;

      .top-left-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;

        .header-left {
          display: flex;
          .selecttion {
            flex: 1 0 250px;
            width: 250px;
            display: flex;

            .item {
              flex: 0 0 44px;
              height: 28px;
              line-height: 28px;
              text-align: center;
              border: 1px solid @gray;
              margin-right: 8px;
              font-size: 14px;
              color: @gray;
              cursor: pointer;

              &.active,
              &:hover {
                background: fade(@purple, 60);
                color: @white;
              }
            }
          }
        }

        .header-right {
          display: flex;
          margin-right: 12px;

          & > div {
            width: 84px;
            height: 28px;
            line-height: 28px;
            border: 1px solid @gray;
            text-align: center;
            color: @gray;
            font-size: 14px;
            cursor: pointer;

            &:first-child {
              border-top-left-radius: 16px;
              border-bottom-left-radius: 16px;
            }

            &:last-child {
              border-top-right-radius: 16px;
              border-bottom-right-radius: 16px;
            }

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

      .table {
        &.el-table thead tr:first-child th {
          background: fade(@gray, 40);
          border-bottom: 1px solid #0b1010;
          border-right: 1px solid #0b1010;
        }

        &.el-table thead tr:last-child th {
          background: fade(@gray, 20);

          .cell {
            height: 116px;
            padding: 12px 6px;
            border-right: 1px solid #0b1010;
          }
        }
      }
    }

    .top-right {
      flex: 0 0 200px;
      margin-left: 8px;

      .rank-title {
        position: relative;
        height: 28px;
        line-height: 28px;
        border: 1px solid fade(@green, 40);
        text-align: center;
        color: @green;
        font-size: 14px;

        .border {
          position: absolute;
          width: 8px;
          height: 8px;
          border: 2px solid fade(@green, 60);

          &.top-left {
            left: -1px;
            top: -1px;
            border-right: 0px;
            border-bottom: 0px;
          }

          &.top-right {
            top: -1px;
            right: -1px;
            border-left: 0px;
            border-bottom: 0px;
          }

          &.bottom-left {
            bottom: -1px;
            left: -1px;
            border-right: 0px;
            border-top: 0px;
          }

          &.bottom-right {
            bottom: -1px;
            right: -1px;
            border-left: 0px;
            border-top: 0px;
          }
        }

        &::before {
          content: " ";
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          background: linear-gradient(135deg, rgba(5, 187, 76, 0.4), transparent, transparent, transparent, rgba(5, 187, 76, 0.4));
        }
      }

      .rank-block {
        height: 8px;
        width: 100%;
        border: 1px solid fade(@green, 40);
        border-left: 0px;
        border-right: 0px;
        background: fade(@green, 20);
        margin: 4px 0;
        opacity: 0.5;
      }

      .rank-table {
        border: 1px solid fade(@green, 40);
        &.el-table.el-table--striped .el-table__body tr.el-table__row--striped td {
          background: fade(@green, 10);
        }

        &.el-table.el-table--striped .el-table__body tr.el-table__row--striped:hover td {
          background: fade(@green, 10) !important;
        }

        .rank-index {
          height: 20px;
          width: 20px;
          line-height: 20px;
          text-align: center;
          margin: auto;

          &.index-1 {
            background: fade(@purple, 60);
            color: #fff;
            border: 1px solid @purple;
          }

          &.index-2 {
            background: fade(#2d6e76, 60);
            color: #fff;
            border: 1px solid #2d6e76;
          }

          &.index-3 {
            background: fade(#366626, 60);
            color: #fff;
            border: 1px solid #366626;
          }
        }

        &.el-table thead tr th {
          background: fade(@green, 10);
          border-bottom: 1px solid #0b1010;
          border-right: 1px solid #0b1010;
          height: 116px;
        }

        &.el-table thead tr:first-child th:last-child {
          background: fade(@green, 20);
          border-bottom: 1px solid #0b1010;
          border-right: 1px solid #0b1010;
          height: 30px;
        }
      }
    }
  }

  .bottom {
    height: 400px;
  }
}
</style>