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

<template>
  <div class="box load">
    <tit :title="'负荷分析'">
      <div class="tit-r">
        <span style="color: #fff;">选择时间：</span>
        <el-date-picker size="mini" v-model="selectDate" type="date" placeholder="选择月" :prefix-icon="null" :clearable="false"
          style="width: 1.3rem;margin-right: 0.26rem;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changeDate">
        </el-date-picker>
        单位：kw·h
      </div>
    </tit>
    <div class="echartClass">
      <el-radio-group v-model="radio" class="radio">
        <el-radio :label="0">日分析</el-radio>
        <el-radio :label="1">周分析</el-radio>
      </el-radio-group>
      <div id="mainLoadDay" v-if="!radio"></div>
      <div id="mainLoadWeek" v-if="radio"></div>

    </div>
  </div>
</template>

<script>
import tit from "./tit.vue";
import { mapGetters } from "vuex";
import { getDayElectricity, getWeekElectricity } from "@/api/energySources/energySources"
export default {
  props: {
    deptName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      radio: 0,
      selectDate: '',
      xAxisArr: [],
      seriesJson: null
    };
  },
  components: {
    tit
  },
  created() {
    this.selectDate = this.$moment().format('YYYY-MM-DD')
    if(this.deptName){

    this.getWeekData('created')
    this.$nextTick(() => {
      if (this.radio) {

        this.getWeekData()
      } else {

        this.getDayData()
      }

    })
    }
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
  },
  watch: {
    radio(v) {
      this.$nextTick(() => {
        if (v) {
          this.getWeekData()
          this.echartsInitWeek(this.xAxisArr, this.seriesJson)
        } else {
          this.getDayData()
        }
      })
    }
  },
  methods: {
    changeDate() {
      this.$nextTick(() => {
        if (this.radio) {

          this.getWeekData()
        } else {

          this.getDayData()
        }

      })
    },
    // 获取日分析
    getDayData() {
      getDayElectricity({ manufacturerBrand: this.deptName, today: this.selectDate }).then(res => {
        console.log('res ======>', res)
        let data = res.data.data
        let xAxisArr = Array.from({ length: 24 }, (_, index) => index + 1);
        let seriesJson = {
          jian: [],
          feng: [],
          ping: [],
          gu: [],
        }
        // 尖 19-22 峰8-11 15-19 平7-8 11-15 22-23 谷 23-24 0-7 这是后端区分尖峰平谷的时间段
        xAxisArr.map(r => {

          if (data[r]) {
            if ([20, 21, 22].includes(r)) {
              seriesJson.jian.push(data[r])
            } else {
              seriesJson.jian.push(0)
            }
            if ([9, 10, 11, 16, 17, 18, 19].includes(r)) {
              seriesJson.feng.push(data[r])
            } else {
              seriesJson.feng.push(0)
            }
            if ([8, 12, 13, 14, 15, 23].includes(r)) {
              seriesJson.ping.push(data[r])
            } else {
              seriesJson.ping.push(0)
            }
            if ([1, 2, 3, 4, 5, 6, 7, 24].includes(r)) {
              seriesJson.gu.push(data[r])
            } else {
              seriesJson.gu.push(0)
            }
          } else {
            seriesJson.jian.push(0)
            seriesJson.feng.push(0)
            seriesJson.ping.push(0)
            seriesJson.gu.push(0)
          }

        })
        this.echartsInitDay(xAxisArr, seriesJson)
      })

    },
    // 获取周分析
    getWeekData(t) {
      getWeekElectricity({ manufacturerBrand: this.deptName, today: this.selectDate }).then(res => {
        console.log('res1 ====>', res)

        let data = res.data.data
        let xAxisArr = Object.keys(data)
        xAxisArr.sort()
        let seriesJson = {
          jian: [],
          feng: [],
          ping: [],
          gu: [],
        }
        for (let k in data) {
          seriesJson.jian.push(data[k].jian)
          seriesJson.feng.push(data[k].feng)
          seriesJson.ping.push(data[k].ping)
          seriesJson.gu.push(data[k].gu)
        }
        if (t) {
          this.xAxisArr = xAxisArr
          this.seriesJson = seriesJson
        } else {
          this.echartsInitWeek(xAxisArr, seriesJson)
        }
      })
    },
    echartsInitDay(xAxisArr, seriesJson) {
      const chartDom = document.getElementById('mainLoadDay');
      const myChart = this.$echarts.init(chartDom);
      const option = {
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   },
        //   formatter: function (params) {
        //     var tar = params[1];
        //     return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
        //   }
        // },
        grid: {
          left: '0',
          top: '40',
          right: 0,
          containLabel: true
        },
        legend: {
          selectedMode: false,
          right: 0,
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: '#fff'
          }
        },

        yAxis: {
          type: 'value',
          axisLine: {
            show: true
          },

          splitLine: {
            show: true,
            lineStyle: {
              color: "#263764",
            },
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisArr,

          splitLine: {
            show: false,
          },
          axisTick: {
            show: true,
            inside: true,
            lineStyle: {
              color: "#9fabc1",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#9fabc1",
            },
          },
        },

        series: [
          {
            name: '尖时段',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#A45BFF'
            },
            emphasis: {
              focus: 'series'
            },
            data: seriesJson.jian
          },
          {
            name: '峰时段',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#665EFF'
            },
            emphasis: {
              focus: 'series'
            },
            data: seriesJson.feng
          },
          {
            name: '平时段',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#0078FF'
            },
            emphasis: {
              focus: 'series'
            },
            data: seriesJson.ping
          },
          {
            name: '谷时段',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#10EFBD'
            },
            emphasis: {
              focus: 'series'
            },
            data: seriesJson.gu
          },
        ]

      }
      myChart.setOption(option);
    },
    echartsInitWeek(xAxisArr, seriesJson) {
      const chartDom = document.getElementById('mainLoadWeek');
      const myChart = this.$echarts.init(chartDom);
      const option = {
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   },
        //   formatter: function (params) {
        //     var tar = params[1];
        //     return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
        //   }
        // },
        grid: {
          left: '0',
          top: '40',
          right: 0,
          containLabel: true
        },
        legend: {
          selectedMode: false,
          right: 0,
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: '#fff'
          }
        },

        yAxis: {
          type: 'value',
          axisLine: {
            show: true
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#263764",
            },
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisArr,

          splitLine: {
            show: false,
          }
        },

        series: [
          {
            name: '尖时段',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#A45BFF'
            },
            emphasis: {
              focus: 'series'
            },
            data: seriesJson.jian
          },
          {
            name: '峰时段',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#665EFF'
            },
            emphasis: {
              focus: 'series'
            },
            data: seriesJson.feng
          },
          {
            name: '平时段',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#0078FF'
            },
            emphasis: {
              focus: 'series'
            },
            data: seriesJson.ping
          },
          {
            name: '谷时段',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#10EFBD'
            },
            emphasis: {
              focus: 'series'
            },
            data: seriesJson.gu
          },
        ]

      }
      myChart.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
.load /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;
}

.load /deep/ .el-input__icon {
  line-height: 0.24rem !important;
}


.load /deep/ .el-radio__label {
  background: transparent !important;
  color: #fff !important;
}

.load /deep/ .el-radio__inner {
  background: transparent !important;
  width: 14px;
  height: 14px;

  &::after {
    width: 8px;
    height: 8px;
    background: #409EFF !important;
  }
}

.box {
  width: 7.28rem;
  height: 3.36rem;
  border-radius: 4px;
  display: flex;
  color: #85AADD;
  box-sizing: border-box;
  background: url("../../../../public/img/energySources/load.png");
  background-size: 100% 100%;
  margin-right: 0.22rem;
  padding: 0.54rem 0.22rem 0 0.22rem;
  position: relative;

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

  .echartClass {
    width: 100%;
    position: relative;

    .radio {
      position: absolute;
      top: 6px;
      left: 0;
      z-index: 999;
    }

    #mainLoadDay {
      height: 3.3rem;
    }

    #mainLoadWeek {
      height: 3.3rem;
    }
  }
}
</style>