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"
          style="width: 1.3rem;margin-right: 0.26rem;" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
        </el-date-picker>
        单位：kw·h
      </div>
    </tit>
    <div class="echartClass">
      <el-radio-group v-model="radio" class="radio">
        <el-radio :label="3">日分析</el-radio>
        <el-radio :label="6">周分析</el-radio>
      </el-radio-group>
      <div id="mainLoad"></div>
    </div>
  </div>
</template>

<script>
import tit from "./tit.vue";
import { mapGetters } from "vuex";
import {getDayElectricity,getWeekElectricity} from "@/api/energySources/energySources"
export default {
  data() {
    return {
      radio: 3,
      selectDate:'',
    };
  },
  components: {
    tit
  },
  created() {
    this.selectDate = this.$moment().format('YYYY-MM-DD')
    this.$nextTick(() => {
      this.getDayData()
      this.getWeekData()
      this.echartsInit()
    })
  },
  computed:{
    ...mapGetters(["userInfo", "permission"]),
  },
  methods: {
    // 获取日分析
    getDayData(){
      getDayElectricity({manufacturerBrand:this.userInfo.dept_name,today:this.selectDate}).then(res =>{
        console.log('res ======>',res)
      })
    },
    // 获取月分析
    getWeekData(){
      getWeekElectricity({manufacturerBrand:this.userInfo.dept_name,today:this.selectDate}).then(res =>{
        console.log('res1 ====>',res)
      })
    },
    echartsInit() {
      const chartDom = document.getElementById('mainLoad');
      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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '1'],

          splitLine: {
            show: false,
          }
        },

        series: [
          {
            name: '尖时段',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#A45BFF'
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 0, 301, 334, 390, 330, 320]
          },
          {
            name: '峰时段',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#665EFF'
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '平时段',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#0078FF'
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '谷时段',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#10EFBD'
            },
            emphasis: {
              focus: 'series'
            },
            data: [150, 212, 201, 154, 190, 330, 410]
          },
        ]

      }
      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;
    }
    #mainLoad{
      height: 3.3rem;
    }
  }
}
</style>