jiahe_device/src/views/energySources/component/dosage.vue

<template>
  <div class="box dosage">
    <tit :title="'用量分析'" style="width:56%">
      <div class="tit-r">
        <span style="color: #0096FF;">监测明细</span>
        &nbsp;&nbsp;&nbsp;
        <span style="color: #fff;">选择月份：</span>
        <el-date-picker size="mini" v-model="selectDay" type="date" placeholder="选择月" @change="changeDate"
          style="width: 1.3rem;margin-right: 0.26rem;" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
        </el-date-picker>
        单位：kw·h
      </div>
    </tit>
    <div class="content">


      <el-table :data="tableData" style="width: 62%;" height="92%" :stripe="true" :size="mini"
        :row-class-name="tableRowClassName">
        <el-table-column prop="name" label="部门/车间" show-overflow-tooltip>
          <template slot-scope="scope">
            <span style="color: #fff">{{ scope.row.name }}</span>

          </template>
        </el-table-column>
        <el-table-column prop="address" label="总用电量">
          <template slot-scope="scope">
            <!-- <span :style="{ color: scope.row.address > 0 ? '#11F150' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
            scope.row.address }}%</span> -->
            <span style="color: #11F150">{{ scope.row.sum ? scope.row.sum : 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="尖时段">
          <template slot-scope="scope">
            <!-- <span :style="{ color: scope.row.address > 0 ? '#FB5E2D' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
            scope.row.address }}%</span> -->
            <span style="color: #FB5E2D">{{ scope.row.jian ? scope.row.jian : 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="峰时段">
          <template slot-scope="scope">
            <!-- <span :style="{ color: scope.row.address > 0 ? '#FBB02D' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
            scope.row.address
          }}%</span> -->
            <span style="color: #FBB02D">{{ scope.row.feng ? scope.row.feng : 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="平时段">
          <template slot-scope="scope">
            <!-- <span :style="{ color: scope.row.address > 0 ? '#00A2FF' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
            scope.row.address }}%</span> -->
            <span style="color: #00A2FF">{{ scope.row.ping ? scope.row.ping : 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="谷时段">
          <template slot-scope="scope">
            <!-- <span :style="{ color: scope.row.address > 0 ? '#10EFBD' : 'rgba($color: #fff, $alpha: 0.2)' }">{{
            scope.row.address }}%</span> -->
            <span style="color: #10EFBD">{{ scope.row.gu ? scope.row.gu : 0 }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="content-tit">部门用量分布</div>
      <div class="legends">
        <div class="legends-item">
          <div class="legends-item-k" style="background-color: #7E5BFF;"></div>
          部门1
        </div>
        <div class="legends-item">
          <div class="legends-item-k" style="background-color: #A45BFF;"></div>
          部门2
        </div>
        <div class="legends-item">
          <div class="legends-item-k" style="background-color: #FFD052;"></div>
          部门3
        </div>
        <div class="legends-item">
          <div class="legends-item-k" style="background-color: #16F2A7;"></div>
          部门4
        </div>
      </div>
      <div id="mainDosage"></div>
    </div>
  </div>
</template>

<script>
import tit from "./tit.vue";
import { mapGetters } from "vuex";
import {getPeriodElectricity} from "@/api/energySources/energySources"
export default {
  data() {
    return {
      selectDay:'',
      tableData: []
    };
  },
  components: {
    tit
  },
  created() {
    this.selectDay = this.$moment().format('YYYY-MM-DD')
    this.$nextTick(() => {
      this.getPeriodData()
      this.echartsInit()
    })
  },
  computed:{
    ...mapGetters(["userInfo", "permission"]),
  },
  methods: {
    getPeriodData(){
      getPeriodElectricity({manufacturerBrand:this.userInfo.dept_name,today:this.selectDay}).then(res =>{
        console.log('period =====>',res)
        this.tableData = res.data.data
      })
    },
    changeDate(){
      this.getPeriodData()
    },
    echartsInit() {
      const chartDom = document.getElementById('mainDosage');
      const myChart = this.$echarts.init(chartDom);
      const option = {
        // grid: {
        //   left: '0',
        //   right: '0',
        //   bottom: '20px',
        //   containLabel: true
        // },
        grid: {
          left: "0",
          right: 0,
          containLabel: true,
        },
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        animation: false,
        series: [
          {
            type: 'sankey',
            // bottom: '10%',
            // width: '4%',
            emphasis: {
              focus: 'adjacency'
            },
            focusNodeAdjacency: true,
            legend: { // 图例配置
              orient: 'vertical',
              left: 'right',
              top: 'middle',
              textStyle: {
                fontSize: 12
              }
            },
            data: [
              {
                name: 'a',
                itemStyle: {
                  color: "#0084FF"
                }
              },
              {
                name: 'b',
                itemStyle: {
                  color: "#7E5BFF"
                }
              },
              {
                name: 'c',
                itemStyle: {
                  color: "#A45BFF"
                }
              },
              {
                name: 'd',
                itemStyle: {
                  color: "#FFD052"
                }
              },
              {
                name: 'e',
                itemStyle: {
                  color: "#16F2A7"
                }
              },
            ],
            links: [
              {
                source: 'a',
                target: 'b',
                value: 15,
                lineStyle: {
                  color: '#7E5BFF',
                  curveness: 0.5
                },
              },
              {
                source: 'a',
                target: 'c',
                value: 3,
                lineStyle: {
                  color: '#A45BFF',
                  curveness: 0.5
                },
              },
              {
                source: 'a',
                target: 'd',
                value: 3,
                lineStyle: {
                  color: '#FFD052',
                  curveness: 0.5
                },
              },
              {
                source: 'a',
                target: 'e',
                value: 1,
                lineStyle: {
                  color: '#16F2A7',
                  curveness: 0.5
                },
              },
            ],

          }
        ]
      }
      myChart.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
.dosage /deep/ .el-table,
.dosage /deep/ .el-table__expanded-cell {
  background-color: transparent;
  border: 0 !important;
}

.dosage /deep/ .el-table th,
.dosage /deep/ .el-table tr,
.dosage /deep/ .el-table td {
  background-color: transparent !important;
  border: 0 !important;
}
.dosage /deep/ .el-table td span{
  font-size: 0.14rem !important;
}

.dosage /deep/ .el-table::before {
  height: 0 !important;
}

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

.dosage /deep/ .el-input__inner {
  background: transparent !important;
  color: #fff !important;
  border-radius: 0;
  border-color: rgba($color: #fff, $alpha: 0.2) !important;
  height: 0.24rem !important;
}
.dosage /deep/ .el-input__icon{
  line-height: 0.24rem !important; 
}
.box {
  width: 11.18rem;
  height: 3.36rem;
  box-sizing: border-box;
  background: url("../../../../public/img/energySources/dosage.png");
  background-size: 100% 100%;
  padding: 0 0.22rem;
  position: relative;
  padding: 0.54rem 0.22rem 0 0.22rem;

  .tit-r {
    font-size: 0.14rem;
    color: rgba($color: #fff, $alpha: 0.4);
    margin-top: 0.04rem;
  }

  .content {
    display: flex;
    height: 100%;
    position: relative;

    .content-tit {
      position: absolute;
      top: -0.34rem;
      right: 2.98rem;
      color: #fff;
      font-size: 0.14rem;
      font-family: Microsoft YaHei;
      font-weight: bold;
    }

    .legends {
      position: absolute;
      top: -0.34rem;
      right: 0;
      color: rgba($color: #fff, $alpha: 0.5);
      font-size: 0.12rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      width: 2.3rem;
      display: flex;
      justify-content: space-between;
      .legends-item{
        position: relative;
        .legends-item-k {
          position: absolute;
          top: 0.06rem;
          left: -0.14rem;
          width: 0.08rem;
          height: 0.08rem;
        }
      }
    }
  }

  #mainDosage {
    width: 4rem;
    height: 2.8rem;
    top: -0.24rem;
  }
}
</style>