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="98%" :stripe="true" :size="mini"
      :row-class-name="tableRowClassName">
      <el-table-column prop="name" label="企业名称" width="200%">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
            <div class="rankname" style="font-size: 0.14rem;">{{ scope.row.name }}</div>
          </el-tooltip>

          <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="electricity" label="用电量(kw·h)">
        <template slot-scope="scope">
          <span style="color: #11F150;">{{ scope.row.electricity }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="carbon" label="碳排放量(t)">
        <template slot-scope="scope">
          <span style="color: #FBB02D;">{{ scope.row.carbon }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getEnterprisePower } from "@/api/energySourcesProvince/energySourcesProvince";
import tit from "./tit.vue";
export default {
  data() {
    return {
      timeList: [
        { id: 1, name: "年" },
        { id: 2, name: "月" },
        { id: 3, name: "日" },
      ],
      timeActiveIndex1: 0,
      tableData: [],
      today: this.$moment().format('YYYY-MM-DD'),
      month: this.$moment().format('YYYY-MM'),
      year: this.$moment().format('YYYY'),
      timeFun: null,
      params: null
    };
  },
  components: {
    tit
  },
  created() {
    this.params = { currentYear: this.year }
    this.getData()
    this.timeFun = setInterval(() => {
      this.getData()
    }, 300000)
  },

  beforeDestroy() {
    clearInterval(this.timeFun)
  },
  methods: {
    getData() {
      getEnterprisePower(this.params).then(res => {
        console.log('res ===>', res)
        this.tableData = res.data.data
      })
    },
    rankStyle(i) {
      if (i === 0) {
        return "background: #E73F3F"
      } else if (i === 1) {
        return "background: #F68E29"
      } else {
        return "background: #1AD0A3"
      }
    },
    timeClick(index) {
      this.timeActiveIndex1 = index;
      this.params = index == 0 ? { currentYear: this.year } : index == 1 ? { currentMonth: this.month } : index == 2 ? { today: this.today } : ''
      console.log('params ====>', this.params)
      this.getData()
    },
    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.18rem;
  font-family: Acumin-Pro-Condensed-Regular-2;
}

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

  .rankname {
    display: inline-block;
    max-width: 78%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  .rank {
    display: inline-block;
    width: 0.32rem;
    height: 0.18rem;
    line-height: 0.22rem;
    text-align: center;
    font-size: 0.14rem !important;
    font-weight: normal;
    color: #FFFFFF;
    // padding: 0.04rem 0.06rem;
    border-radius: 0.08rem;
    margin-left: 0.04rem;
  }

}
</style>