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">{{ increasescapacity }}</div>
          <div class="unit">万kWh</div>
        </div>
      </div>
      <div
        class="static-items"
        :style="
          $store.state.themeName === 'dark'
            ? 'flex: 0 0 860px;transition: 0.2s;'
            : ''
        "
      >
        <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="(item, index) of analyselist" :key="index">
            <div class="title">{{ item.name }}</div>
            <div class="value">{{ item.actual }}%</div>
            <div class="up-down">
              <div class="up-down-item">
                <span class="name">环</span>
                <span class="icon">
                  <i
                    class="svg-icon svg-icon-sm"
                    :class="
                      item.mom >= 0 ? 'svg-icon-green' : 'svg-icon-yellow'
                    "
                  >
                    <svg-icon
                      :svgid="
                        item.mom >= 0 ? 'svg-arrow-up-1' : 'svg-arrow-dpwn-1'
                      "
                    />
                  </i>
                </span>
                <span class="value">{{ item.mom }}%</span>
              </div>
              <div class="up-down-item">
                <span class="name">同</span>
                <span class="icon">
                  <i
                    class="svg-icon svg-icon-sm"
                    :class="
                      item.yoy >= 0 ? 'svg-icon-green' : 'svg-icon-yellow'
                    "
                  >
                    <svg-icon
                      :svgid="
                        item.yoy >= 0 ? 'svg-arrow-up-1' : 'svg-arrow-dpwn-1'
                      "
                    />
                  </i>
                </span>
                <span class="value">{{ item.yoy }}%</span>
              </div>
            </div>
            <div class="percent">
              <div class="percent-box">
                <div
                  class="percent-bar"
                  :style="{ width: Math.abs(item.expect) + '%' }"
                  :class="item.expect >= 0 ? 'bg-green' : 'bg-yellow'"
                ></div>
                <div
                  class="sj"
                  :style="{ 'margin-left': Math.abs(item.expect) - 4 + '%' }"
                  :class="item.expect >= 0 ? 'sj' : 'yj'"
                ></div>
              </div>
              <div class="value">{{ item.expect }}%</div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="static-items"
        :style="
          $store.state.themeName === 'dark'
            ? 'flex: 0 0 430px;transition: 0.2s;'
            : ''
        "
      >
        <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="(item, index) of managelist" :key="index">
            <div class="title">{{ item.name }}</div>
            <div class="value">{{ item.actual }}%</div>
            <div class="up-down">
              <div class="up-down-item">
                <span class="name">环</span>
                <span class="icon">
                  <i
                    class="svg-icon svg-icon-sm"
                    :class="
                      item.mom >= 0 ? 'svg-icon-green' : 'svg-icon-yellow'
                    "
                  >
                    <svg-icon
                      :svgid="
                        item.mom >= 0 ? 'svg-arrow-up-1' : 'svg-arrow-dpwn-1'
                      "
                    />
                  </i>
                </span>
                <span class="value">{{ item.mom }}%</span>
              </div>
              <div class="up-down-item">
                <span class="name">同</span>
                <span class="icon">
                  <i
                    class="svg-icon svg-icon-sm"
                    :class="
                      item.yoy >= 0 ? 'svg-icon-green' : 'svg-icon-yellow'
                    "
                  >
                    <svg-icon
                      :svgid="
                        item.yoy >= 0 ? 'svg-arrow-up-1' : 'svg-arrow-dpwn-1'
                      "
                    />
                  </i>
                </span>
                <span class="value">{{ item.yoy }}%</span>
              </div>
            </div>
            <div class="percent">
              <div class="percent-box">
                <div
                  class="percent-bar"
                  :style="{ width: Math.abs(item.expect) + '%' }"
                  :class="item.expect >= 0 ? 'bg-green' : 'bg-yellow'"
                ></div>
                <div
                  class="sj"
                  :style="{ 'margin-left': Math.abs(item.expect) - 4 + '%' }"
                  :class="item.expect >= 0 ? 'sj' : 'yj'"
                ></div>
              </div>
              <div class="value">{{ item.expect }}%</div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="static-items"
        :style="
          $store.state.themeName === 'dark'
            ? 'flex: 0 0 430px;transition: 0.2s;'
            : ''
        "
      >
        <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="(item, index) of economiclist" :key="index">
            <div class="title">{{ item.name }}</div>
            <div class="value">{{ item.actual }}%</div>
            <div class="up-down">
              <div class="up-down-item">
                <span class="name">环</span>
                <span class="icon">
                  <i
                    class="svg-icon svg-icon-sm"
                    :class="
                      item.mom >= 0 ? 'svg-icon-green' : 'svg-icon-yellow'
                    "
                  >
                    <svg-icon
                      :svgid="
                        item.mom >= 0 ? 'svg-arrow-up-1' : 'svg-arrow-dpwn-1'
                      "
                    />
                  </i>
                </span>
                <span class="value">{{ item.mom }}%</span>
              </div>
              <div class="up-down-item">
                <span class="name">同</span>
                <span class="icon">
                  <i
                    class="svg-icon svg-icon-sm"
                    :class="
                      item.yoy >= 0 ? 'svg-icon-green' : 'svg-icon-yellow'
                    "
                  >
                    <svg-icon
                      :svgid="
                        item.yoy >= 0 ? 'svg-arrow-up-1' : 'svg-arrow-dpwn-1'
                      "
                    />
                  </i>
                </span>
                <span class="value">{{ item.yoy }}%</span>
              </div>
            </div>
            <div class="percent">
              <div class="percent-box">
                <div
                  class="percent-bar"
                  :style="{ width: Math.abs(item.expect) + '%' }"
                  :class="item.expect >= 0 ? 'bg-green' : 'bg-yellow'"
                ></div>
                <div
                  class="sj"
                  :style="{ 'margin-left': Math.abs(item.expect) - 4 + '%' }"
                  :class="item.expect >= 0 ? 'sj' : 'yj'"
                ></div>
              </div>
              <div class="value">{{ item.expect }}%</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> -->
            <span class="right-btn">光伏</span>
          </div>
        </div>
        <group-table
          :customClass="'table'"
          :data="eltableData"
          :height="'370px'"
          :elPaggingProps="null"
          @headerClick="headerClick"
          ref="jjyxTableRef"
        ></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="'357px'"
          :elPaggingProps="null"
        >
          <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 - 720px)'"
          :units="unit"
        />
      </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() {
    return {
      selecttionIndex: 2,
      btnIndex: 0,
      increasescapacity: 0, //增发电量
      analyselist: [
        //理论平衡分析法
        { name: "风能利用率", label: "windenergy" },
        { name: "非计划检修损失率", label: "failurelossrate" },
        { name: "计划检修损失率", label: "mainlossrate" },
        { name: "限电损失率", label: "powerlossrate" },
        { name: "受累损失率", label: "daynhcfdl" },
        { name: "性能损失率", label: "performancelossrate" },
      ],
      managelist: [
        //管理效率指标
        { name: "复位及时率", label: "resettimelyrate" },
        { name: "状态转换率", label: "statetransitionrate" },
        { name: "消缺及时率", label: "eliminationrate" },
      ],
      economiclist: [
        //经济指标
        { name: "综合厂用电率", label: "comprehensiverate" },
        { name: "AGC曲线追随率", label: "agccurvefollowing" },
        { name: "风功率预测准确率", label: "windpoweraccuracy" },
      ],
      eltableData: {
        column: [
          {
            name: "",
            child: [
              {
                name: "区域公司",
                field: "name",
                width: 80,
              },
              {
                name: "评分",
                field: "mark",
                width: 55,
              },
            ],
          },
          {
            name: "基础指标",
            child: [
              {
                name: "装机容量(MW)",
                field: "capacity",
                width: 60,
              },
              {
                name: "在运台数(台)",
                field: "units",
                width: 60,
              },
              {
                name: "理论电量(万kWh)",
                field: "theoreticalpower",
                width: 70,
              },
              {
                name: "实际发电量(万kWh)",
                field: "actualpower",
                width: 70,
              },
              {
                name: "故障损失电量(万kWh)",
                field: "daynhgzssdl",
                width: 65,
              },
              {
                name: "维护损失电量(万kWh)",
                field: "daynhwhssdl",
                width: 60,
              },
              {
                name: "限电损失电量(万kWh)",
                field: "daynhxdssdl",
                width: 65,
              },
              {
                name: "受累损失电量(万kWh)",
                field: "daynhcfdl",
                width: 55,
              },
              {
                name: "性能损失电量(万kWh)",
                field: "daynhqfdl",
                width: 65,
              },
            ],
          },
          {
            name: "经济指标",
            child: [
              {
                name: "风能利用率(%)",
                field: "windenergy",
                width: this.$store.state.themeName === "dark" ? 55 : 50,
              },
              {
                name: "限电损失率(%)",
                field: "powerlossrate",
                width: this.$store.state.themeName === "dark" ? 55 : 50,
              },
              {
                name: "性能损失率(%)",
                field: "performancelossrate",
                width: this.$store.state.themeName === "dark" ? 55 : 50,
              },
              {
                name: "综合厂用电率(%)",
                field: "comprehensiverate",
                width: this.$store.state.themeName === "dark" ? 55 : 50,
              },
              {
                name: "设备利用小时(小时)",
                field: "utilizationhours",
                width: this.$store.state.themeName === "dark" ? 55 : 50,
              },
              {
                name: "风功率预测准确率(%)",
                field: "windpoweraccuracy",
                width: this.$store.state.themeName === "dark" ? 55 : 50,
              },
              {
                name: "AGC曲线跟随率(%)",
                field: "agccurvefollowing",
                width: this.$store.state.themeName === "dark" ? 55 : 50,
              },
            ],
          },
          {
            name: "设备指标",
            child: [
              {
                name: "MTBF(小时)",
                field: "mtbf",
                width: 55,
              },
              {
                name: "MTTF(小时)",
                field: "mttf",
                width: 55,
              },
              {
                name: "设备可利用率 (%)",
                field: "availability",
                width: 55,
              },
              {
                name: "等效可用系数 (%)",
                field: "availabilityfactor",
                width: 55,
              },
              {
                name: "非计划检修损失率(%)",
                field: "failurelossrate",
                width: 55,
              },
            ],
          },
          {
            name: "管理效率指标",
            child: [
              {
                name: "计划检修损失率(%)",
                field: "mainlossrate",
                width: 53,
              },
              {
                name: "MTTR(小时)",
                field: "mttr",
                width: 53,
              },
              {
                name: "隐患发现准确率(%)",
                field: "hiddentimely",
                width: 53,
              },
              {
                name: "复位及时率(%)",
                field: "resettimelyrate",
                width: 53,
              },
              {
                name: "状态转换率(%)",
                field: "statetransitionrate",
                width: 53,
              },
              {
                name: "消缺及时率(%)",
                field: "eliminationrate",
                width: 53,
              },
            ],
          },
        ],
        data: [],
      },
      eltableDataBackup: {},
      greenTable: {
        column: [
          {
            name: "排名",
            field: "rank",
            width: 50,
            slot: true,
          },
          {
            name: "名称",
            field: "name",
            width: 70,
          },
          {
            name: "指标项",
            child: [
              {
                name: "风能利用率(%)",
                field: "v1",
                width: 80,
              },
            ],
          },
        ],
        data: [],
      },
      barData: [],
      unit: ["万kWh", ""], //单位
    };
  },
  created() {
    this.requestDataTable("月");
    this.requestDataTop("月");
  },

  mounted() {
    this.$nextTick(() => {
      this.eltableDataBackup = this.BASE.deepCopy(this.eltableData);
      this.resetTableSize(this.$store.state.themeName);
    });
  },
  methods: {
    selectionClick(index) {
      this.selecttionIndex = index;
      switch (index) {
        case 0:
          this.requestDataTable("日");
          this.requestDataTop("日");
          break;
        case 1:
          this.requestDataTable("周");
          this.requestDataTop("周");
          break;
        case 2:
          this.requestDataTable("月");
          this.requestDataTop("月");
          break;
        case 3:
          this.requestDataTable("季");
          this.requestDataTop("季");
          break;
        case 4:
          this.requestDataTable("年");
          this.requestDataTop("年");
          break;
      }
    },
    headerClick(param) {
      // 点击一级标题事件
      if (param.level == 1) {
        if (param.col.name != "" && param.col.name != "基础指标") {
          this.echartData(param.col.child);
          this.unit = ["百分比(%)", "小时"];
        }
        if (param.col.name != "" && param.col.name == "基础指标") {
          this.echartData(param.col.child.slice(3));
          this.unit = ["百分比(%)", ""];
        }
      }
      if (param.level == 2 && param.col.field != "区域公司") {
        this.setRank(param.col.field, param.col.name);
      }
    },
    rightBtnClick(index) {
      this.btnIndex = index;
    },
    // 表格数据
    requestDataTable(timetype) {
      let that = this;
      this.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:9001/",
        subUrl: "benchmarking/dbmainbottom",
        data: {
          timetype: timetype,
          foreigntype: "风电",
        },
        success(res) {
          if (res.code == 200) {
            res.data.forEach((item) => {
              if (item.foreignkeyid === "SBQ_FDC") item.name = "石板泉";
              if (item.foreignkeyid === "MHS_FDC") item.name = "麻黄山";
              if (item.foreignkeyid === "NSS_FDC") item.name = "牛首山";
              if (item.foreignkeyid === "XS_FDC") item.name = "香山";
              if (item.foreignkeyid === "QS_FDC") item.name = "青山";
              item.mark = that.filter(item.mark);
              item.theoreticalpower = that.filter(item.theoreticalpower);
              item.actualpower = that.filter(item.actualpower);
              item.daynhgzssdl = that.filter(item.daynhgzssdl);
              item.daynhwhssdl = that.filter(item.daynhwhssdl);
              item.daynhxdssdl = that.filter(item.daynhxdssdl);
              item.daynhcfdl = that.filter(item.daynhcfdl);
              item.daynhqfdl = that.filter(item.daynhqfdl);
              item.windenergy = that.filter(item.windenergy);
              item.powerlossrate = that.filter(item.powerlossrate);
              item.performancelossrate = that.filter(item.performancelossrate);
              item.comprehensiverate = that.filter(item.comprehensiverate);
              item.utilizationhours = that.filter(item.utilizationhours);
              item.windpoweraccuracy = that.filter(item.windpoweraccuracy);
              item.agccurvefollowing = that.filter(item.agccurvefollowing);
              item.mtbf = that.filter(item.mtbf);
              item.mttf = that.filter(item.mttf);
              item.availability = that.filter(item.availability);
              item.availabilityfactor = that.filter(item.availabilityfactor);
              item.failurelossrate = that.filter(item.failurelossrate);
              item.mainlossrate = that.filter(item.mainlossrate);
              item.mttr = that.filter(item.mttr);
              item.hiddentimely = that.filter(item.hiddentimely);
              item.resettimelyrate = that.filter(item.resettimelyrate);
              item.statetransitionrate = that.filter(item.statetransitionrate);
              item.eliminationrate = that.filter(item.eliminationrate);
            });

            // 合计列
            let item = res.data;
            let obj = {
              name: "合计",
              mark: that.filter(
                (Number(item[0].mark) +
                  Number(item[1].mark) +
                  Number(item[2].mark) +
                  Number(item[3].mark)) /
                  4
              ),
              capacity: that.filter(
                Number(item[0].capacity) +
                  Number(item[1].capacity) +
                  Number(item[2].capacity) +
                  Number(item[3].capacity)
              ),
              units: that.filter(
                Number(item[0].units) +
                  Number(item[1].units) +
                  Number(item[2].units) +
                  Number(item[3].units)
              ),
              theoreticalpower: that.filter(
                Number(item[0].theoreticalpower) +
                  Number(item[1].theoreticalpower) +
                  Number(item[2].theoreticalpower) +
                  Number(item[3].theoreticalpower)
              ),
              actualpower: that.filter(
                Number(item[0].actualpower) +
                  Number(item[1].actualpower) +
                  Number(item[2].actualpower) +
                  Number(item[3].actualpower)
              ),
              daynhgzssdl: that.filter(
                Number(item[0].daynhgzssdl) +
                  Number(item[1].daynhgzssdl) +
                  Number(item[2].daynhgzssdl) +
                  Number(item[3].daynhgzssdl)
              ),
              daynhwhssdl: that.filter(
                Number(item[0].daynhwhssdl) +
                  Number(item[1].daynhwhssdl) +
                  Number(item[2].daynhwhssdl) +
                  Number(item[3].daynhwhssdl)
              ),
              daynhxdssdl: that.filter(
                Number(item[0].daynhxdssdl) +
                  Number(item[1].daynhxdssdl) +
                  Number(item[2].daynhxdssdl) +
                  Number(item[3].daynhxdssdl)
              ),
              daynhcfdl: that.filter(
                Number(item[0].daynhcfdl) +
                  Number(item[1].daynhcfdl) +
                  Number(item[2].daynhcfdl) +
                  Number(item[3].daynhcfdl)
              ),
              daynhqfdl: that.filter(
                Number(item[0].daynhqfdl) +
                  Number(item[1].daynhqfdl) +
                  Number(item[2].daynhqfdl) +
                  Number(item[3].daynhqfdl)
              ),
              windenergy: that.filter(
                (Number(item[0].windenergy) +
                  Number(item[1].windenergy) +
                  Number(item[2].windenergy) +
                  Number(item[3].windenergy)) /
                  4
              ),
              powerlossrate: that.filter(
                (Number(item[0].powerlossrate) +
                  Number(item[1].powerlossrate) +
                  Number(item[2].powerlossrate) +
                  Number(item[3].powerlossrate)) /
                  4
              ),
              performancelossrate: that.filter(
                (Number(item[0].performancelossrate) +
                  Number(item[1].performancelossrate) +
                  Number(item[2].performancelossrate) +
                  Number(item[3].performancelossrate)) /
                  4
              ),
              comprehensiverate: that.filter(
                (Number(item[0].comprehensiverate) +
                  Number(item[1].comprehensiverate) +
                  Number(item[2].comprehensiverate) +
                  Number(item[3].comprehensiverate)) /
                  4
              ),
              utilizationhours: that.filter(
                Number(item[0].utilizationhours) +
                  Number(item[1].utilizationhours) +
                  Number(item[2].utilizationhours) +
                  Number(item[3].utilizationhours)
              ),
              windpoweraccuracy: that.filter(
                (Number(item[0].windpoweraccuracy) +
                  Number(item[1].windpoweraccuracy) +
                  Number(item[2].windpoweraccuracy) +
                  Number(item[3].windpoweraccuracy)) /
                  4
              ),
              agccurvefollowing: that.filter(
                (Number(item[0].agccurvefollowing) +
                  Number(item[1].agccurvefollowing) +
                  Number(item[2].agccurvefollowing) +
                  Number(item[3].agccurvefollowing)) /
                  4
              ),
              mtbf: that.filter(
                Number(item[0].mtbf) +
                  Number(item[1].mtbf) +
                  Number(item[2].mtbf) +
                  Number(item[3].mtbf)
              ),
              mttf: that.filter(
                Number(item[0].mttf) +
                  Number(item[1].mttf) +
                  Number(item[2].mttf) +
                  Number(item[3].mttf)
              ),
              availability: that.filter(
                (Number(item[0].availability) +
                  Number(item[1].availability) +
                  Number(item[2].availability) +
                  Number(item[3].availability)) /
                  4
              ),
              availabilityfactor: that.filter(
                (Number(item[0].availabilityfactor) +
                  Number(item[1].availabilityfactor) +
                  Number(item[2].availabilityfactor) +
                  Number(item[3].availabilityfactor)) /
                  4
              ),
              failurelossrate: that.filter(
                (Number(item[0].failurelossrate) +
                  Number(item[1].failurelossrate) +
                  Number(item[2].failurelossrate) +
                  Number(item[3].failurelossrate)) /
                  4
              ),
              mainlossrate: that.filter(
                (Number(item[0].mainlossrate) +
                  Number(item[1].mainlossrate) +
                  Number(item[2].mainlossrate) +
                  Number(item[3].mainlossrate)) /
                  4
              ),
              mttr: that.filter(
                Number(item[0].mttr) +
                  Number(item[1].mttr) +
                  Number(item[2].mttr) +
                  Number(item[3].mttr)
              ),
              hiddentimely: that.filter(
                (Number(item[0].hiddentimely) +
                  Number(item[1].hiddentimely) +
                  Number(item[2].hiddentimely) +
                  Number(item[3].hiddentimely)) /
                  4
              ),
              resettimelyrate: that.filter(
                (Number(item[0].resettimelyrate) +
                  Number(item[1].resettimelyrate) +
                  Number(item[2].resettimelyrate) +
                  Number(item[3].resettimelyrate)) /
                  4
              ),
              statetransitionrate: that.filter(
                (Number(item[0].statetransitionrate) +
                  Number(item[1].statetransitionrate) +
                  Number(item[2].statetransitionrate) +
                  Number(item[3].statetransitionrate)) /
                  4
              ),
              eliminationrate: that.filter(
                (Number(item[0].eliminationrate) +
                  Number(item[1].eliminationrate) +
                  Number(item[2].eliminationrate) +
                  Number(item[3].eliminationrate)) /
                  4
              ),
            };
            item.push(obj);
            that.eltableData.data = res.data;
            that.setRank();
            that.echartData(that.eltableData.column[1].child.slice(3));
          }
        },
      });
    },
    // 顶部数据
    requestDataTop(timetype) {
      let that = this;
      this.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:9001/",
        subUrl: "benchmarking/dbmaintop",
        data: {
          timetype: timetype,
          foreigntype: "风电",
        },
        success(res) {
          if (res.code == 200) that.calculate(res.data);
        },
      });
    },
    // 左边的排序
    setRank(column, name) {
      if (column == undefined) {
        column = "actualpower";
        name = "实际发电量";
      }
      this.greenTable.data = [];
      let datas = Object.assign([], this.eltableData.data);
      let array = datas.slice(0, 5).sort(this.compare(column));
      for (var i = 0; i < array.length; i++) {
        let obj = {
          rank: i + 1,
          name: array[i].name,
          v1: array[i][column],
        };
        this.greenTable.data[i] = obj;
      }
      this.greenTable.column[2].child[0].name = name;
    },
    // 下面的echart图
    echartData(child) {
      let barData = [];
      let count = this.eltableData.data.length;
      for (let j = 0; j < child.length; j++) {
        let item = {
          title: child[j].name,
          yAxisIndex: child[j].name.indexOf("小时") == -1 ? 0 : 1,
          value: [],
        };
        for (let i = 0; i < count - 1; i++) {
          let obj = {
            text: this.eltableData.data[i].name,
            value: this.eltableData.data[i][child[j].field],
          };
          item.value.push(obj);
        }
        barData.push(item);
      }
      this.barData = barData;
    },
    // 对象排序
    compare(prop) {
      return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
          val1 = Number(val1);
          val2 = Number(val2);
        }
        return val1 > val2 ? -1 : val1 < val2 ? 1 : 0;
      };
    },
    // 同比环比计算
    calculate(array) {
      let shiji = {};
      let huanbi = {};
      let tongbi = {};
      let jizhun = {};
      array.forEach((item) => {
        if (item.foreignkeyid === "实际") shiji = item;
        if (item.foreignkeyid === "环比") huanbi = item;
        if (item.foreignkeyid === "同比") tongbi = item;
        if (item.foreignkeyid === "基准") jizhun = item;
      });

      this.increasescapacity = Math.abs(
        this.filter(jizhun.actualpower - shiji.actualpower)
      );
      // 理论电量平衡分析
      for (let item of this.analyselist) {
        let key = item.label;
        item.actual = this.filter(shiji[key]);
        item.mom = this.filter(shiji[key] - huanbi[key]); //环比
        item.yoy = this.filter(shiji[key] - tongbi[key]); //同比
        item.expect = this.filter(shiji[key] - jizhun[key]);
      }
      // 管理效率指标
      for (let item of this.managelist) {
        let key = item.label;
        item.actual = Math.abs(this.filter(shiji[key]));
        item.mom = Math.abs(this.filter(shiji[key] - huanbi[key])); //环比
        item.yoy = Math.abs(this.filter(shiji[key] - tongbi[key])); //同比
        item.expect = Math.abs(this.filter(shiji[key] - jizhun[key]));
      }
      // 经济指标
      for (let item of this.economiclist) {
        let key = item.label;
        item.actual = this.filter(shiji[key]);
        item.mom = this.filter(shiji[key] - huanbi[key]); //环比
        item.yoy = this.filter(shiji[key] - tongbi[key]); //同比
        item.expect = this.filter(shiji[key] - jizhun[key]);
      }
    },
    // 保留小数位l
    filter(num) {
      return num % 1 === 0 ? num : num.toFixed(1);
    },
    resetTableSize(themeName) {
      this.$nextTick(() => {
        this.eltableData.column.forEach((pEle, pIndex) => {
          pEle.child.forEach((cEle, cIndex) => {
            const width =
              this.eltableDataBackup.column[pIndex].child[cIndex].width;
            cEle.width = themeName === "dark" ? width : width - 1;
          });
        });
        this.$refs?.jjyxTableRef?.$refs?.groupTable?.doLayout();
      });
    },
  },

  watch: {
    "$store.state.themeName"(themeName) {
      this.resetTableSize(themeName);
    },
  },
};
</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;
        justify-content: space-between;

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

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

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

          & > .up-down {
            display: flex;
            justify-content: space-around;
            margin: 15px 0;
            font-size: xx-small;

            .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;
              font-size: xx-small;

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

              .yj {
                // position: absolute;
                border-style: solid;
                border-width: 5px 3px 5px 3px;
                border-color: transparent transparent @yellow 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;
            }
          }

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

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

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

      .table {
        .el-table__body table,
        .el-table__header-wrapper table {
          width: 100%;
        }
        &.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;
          }
        }

        &.el-table tr td {
          height: 35px;
          line-height: 35px;
        }
      }
    }

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

        &.el-table tr td {
          height: 35px;
          line-height: 35px;
        }
      }
    }
  }

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