jiahe_device/src/views/energySourcesProvince/component/statistics.vue

<template>
  <div class="statistics box">
    <tit :title="'企业能源消耗及碳排放统计'">
      <div class="tit-r">
        <div class="time">
          <span v-for="(item, index) in timeList" :key="index" :style="{
            background: timeActiveIndex1 === index ? '#11A0EB' : '',
            color: timeActiveIndex1 === index ? '#fff' : '#5f6d87',
          }" @click="timeClick(index)">
            {{ item.name }}
          </span>
        </div>
      </div>
    </tit>
    <el-table :data="tableData" style="width: 100%;" height="92%" :stripe="true" :size="mini"
      :row-class-name="tableRowClassName">
      <el-table-column prop="name" label="企业名称"  width="200%">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
          <span class="rank" v-if="scope.$index <= 2" :style="rankStyle(scope.$index)">TOP.{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="用电量(kw·h)">
        <template slot-scope="scope">
          <span style="color: #11F150;">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="碳排放量(t)">
        <template slot-scope="scope">
          <span style="color: #FBB02D;">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import tit from "./tit.vue";
export default {
  data() {
    return {
      timeList: [
        { id: 1, name: "年" },
        { id: 2, name: "月" },
        { id: 3, name: "日" },
      ],
      timeActiveIndex1: 0,
      tableData: [{
        date: '11.22',
        name: '巨人机床有限公司',
        address: 29,
      }, {
        date: '11.22',
        name: '王小虎',
        address: 0,
      }, {
        date: '11.22',
        name: '王小虎',
        address: 29,
      }, {
        date: '11.22',
        name: '王小虎',
        address: 29,
      }, {
        date: '11.22',
        name: '王小虎',
        address: 29,
      }, {
        date: '11.22',
        name: '王小虎',
        address: 29,
      }, {
        date: '11.22',
        name: '王小虎',
        address: 29,
      }]
    };
  },
  components: {
    tit
  },
  created() {

  },
  methods: {
    rankStyle(i) {
      if (i === 0) {
        return "background: #E73F3F"
      } else if (i === 1) {
        return "background: #F68E29"
      } else {
        return "background: #1AD0A3"
      }
    },
    timeClick(index) {
      this.timeActiveIndex1 = index;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        if (row.address > 0) {
          return 'trEven colorFB5E2D';
        } else {
          return 'trEven';
        }

      } else {
        if (row.address > 0) {
          return 'trOdd colorFB5E2D';
        } else {
          return 'trOdd';
        }
      }
    }
  },
};
</script>
<style></style>
<style lang="scss" scoped>
.statistics /deep/ .el-table,
.statistics /deep/ .el-table__expanded-cell {
  background-color: transparent;
  border: 0 !important;
}

.statistics /deep/ .el-table th,
.statistics /deep/ .el-table tr,
.statistics /deep/ .el-table td {
  background-color: transparent !important;
  border: 0 !important;
}

.statistics /deep/ .el-table td span{
  font-size: 0.14rem !important;
}
.statistics /deep/ .el-table::before {
  height: 0 !important;
}

.statistics /deep/ .trOdd td {
  color: #fff;
}

.statistics /deep/ .trEven td {
  color: #fff;
  background: rgba($color: #0de5ff, $alpha: 0.1) !important;
}


.box {
  width: 4.6rem;
  height: 4.59rem;
  box-sizing: border-box;
  background: url("../../../../public/img/energySourcesProvince/statistics.png");
  background-size: 100% 100%;
  padding: 0.54rem 0.22rem 0 0.22rem;
  position: absolute;
  top: 3.3rem;
  left: 0.24rem;
  z-index: 9;

  .tit-r {

    color: #0096FF;
    margin-top: 0.04rem;

    .time {
      width: 0.75rem;
      height: 0.2rem;
      display: flex;
      justify-content: space-between;

      span {
        display: inline-block;
        height: 0.24rem;
        width: 0.24rem;
        border-radius: 50%;
        color: #616d85;
        text-align: center;
        line-height: 0.24rem;
        font-size: 0.14rem;
        cursor: pointer;
      }
    }
  }

  .rank {
    font-size: 0.14rem;
    font-family: Acumin Variable Concept;
    font-weight: normal;
    color: #FFFFFF;
    padding: 0.04rem 0.06rem;
    border-radius: 0.08rem;
    margin-left: 0.04rem;
  }

}
</style>