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="flex:0 0 860px;">
        <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="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="(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="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="(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 :summary="true" :customClass="'table'" :data="eltableData" :height="'310px'" :elPaggingProps='null' @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="'310px'" :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 - 680px)'" :units="['']" />
      </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: 95,
              },
              {
                name: "评分",
                field: "mark",
                width: 55,
              },
            ],
          },
          {
            name: "基础指标",
            child: [
              {
                name: "装机容量(MW)",
                field: "capacity",
                width: 55,
              },
              {
                name: "在运台数(台)",
                field: "units",
                width: 55,
              },
              {
                name: "理论电量(万kWh)",
                field: "theoreticalpower",
                width: 70,
              },
              {
                name: "实际发电量(万kWh)",
                field: "actualpower",
                width: 70,
              },
              {
                name: "故障损失电量(万kWh)",
                field: "daynhgzssdl",
                width: 65,
              },
              {
                name: "维护损失电量(万kWh)",
                field: "daynhwhssdl",
                width: 55,
              },
              {
                name: "限电损失电量(万kWh)",
                field: "daynhxdssdl",
                width: 65,
              },
              {
                name: "受累损失电量(万kWh)",
                field: "daynhcfdl",
                width: 55,
              },
              {
                name: "性能损失电量(万kWh)",
                field: "daynhqfdl",
                width: 65,
              },
            ],
          },
          {
            name: "经济指标",
            child: [
              {
                name: "风能利用率(%)",
                field: "windenergy",
                width: 55,
              },
              {
                name: "限电损失率(%)",
                field: "powerlossrate",
                width: 55,
              },
              {
                name: "性能损失率(%)",
                field: "performancelossrate",
                width: 55,
              },
              {
                name: "综合厂用电率(%)",
                field: "comprehensiverate",
                width: 55,
              },
              {
                name: "设备利用小时(小时)",
                field: "utilizationhours",
                width: 55,
              },
              {
                name: "风功率预测准确率(%)",
                field: "windpoweraccuracy",
                width: 55,
              },
              {
                name: "AGC曲线跟随率(%)",
                field: "agccurvefollowing",
                width: 55,
              },
            ],
          },
          {
            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: [
        ],
      },
      greenTable: {
        column: [
          {
            name: "排名",
            field: "rank",
            width: 50,
            slot: true,
          },
          {
            name: "名称",
            field: "name",
            width: 85,
          },
          {
            name: "指标项",
            child: [
              {
                name: "风能利用率(%)",
                field: "v1",
                width: 60,
              },
            ],
          },
        ],
        data: [],
      },
      barData: [
        {
          title: "日发电量",
          value: [
            {
              text: "石板泉风电场",
              value: 1000,
            },
            {
              text: "牛首山风电场",
              value: 1200,
            },
            {
              text: "麻黄山风电场",
              value: 1200,
            },
            {
              text: "香山风电场",
              value: 1200,
            },
            {
              text: "青山风电场",
              value: 1200,
            },
          ],
        },
      ],
    };
  },
  created() {
    this.requestDataTable('月')
    this.requestDataTop('月')
  },
  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) {
        console.log(param); // 点击一级标题事件
      }
      if (param.col.field != undefined && param.col.name != "区域公司") {
        this.setRank(param.col.field, param.col.name);
        this.echartData(param.col.field, param.col.name);
      }
      if (param.col.name == "基础指标")
        this.$router.push("/decision/decision1");
    },
    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(Math.random() * 3);
              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);
            })
            that.eltableData.data = res.data;
            that.setRank();
            that.echartData();
          }
        },
      });
    },
    // 顶部数据
    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.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(column, name) {
      if (column == undefined) {
        column = "actualpower";
        name = "实际发电量";
      }
      let barData = [
        {
          title: name,
          value: [],
        },
      ];
      this.barData = barData;
      let count = this.eltableData.data.length;
      for (var i = 0; i < count; i++) {
        let obj = {
          text: this.eltableData.data[i].name,
          value: this.eltableData.data[i][column],
        };
        this.barData[0].value.push(obj);
      }
      this.barData[0].title = name;
    },
    // 对象排序
    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 = 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.economiclist){
        let key = item.label;
        if (key === 'comprehensiverate')
        {
          item.actual = this.filter(Math.random() * 3)
          item.mom = this.filter(Math.random() * 3), //环比
          item.yoy = this.filter(Math.random() * 3),  //同比
          item.expect = this.filter(Math.random() * 3)
        }else{
          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])
        }
      }
    },
    // 保留小数位
    filter(num){
      return num%1 === 0 ? num : num.toFixed(1);
    }
  },
};
</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 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>