EMS_client/src/views/module_ems/energyAnalyse/energyItem/index.vue

<template>
  <div class="item-zedEnergy" v-loading="loading">
    <commonSearch ref="commonSearch" type="day" @search="handleSearch"></commonSearch>
    <div class="statistics-container u-flex">
      <!-- 日 -->
      <div class="u-flex-cjac item-module">
        <div class="item-title">日统计</div>
        <div class="u-flex-jaa info-container">
          <div class="item-info">
            <div class="name">当日用能(KWh)</div>
            <div class="value">{{ itemizedStatistics.nowDay }}</div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="item-info">
            <div class="name">昨日用能(KWh)</div>
            <div class="value">{{ itemizedStatistics.lastDay }}</div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="item-info">
            <div class="name">环比</div>
            <div class="value">{{ itemizedStatistics.huanbiDay }}%</div>
            <!-- <div class="value">57.55% ↑</div> -->
          </div>
        </div>
        <div class="pie-item-echarts" ref="dayPieCharts"></div>
      </div>
      <!-- 周 -->
      <div class="u-flex-cjac item-module">
        <div class="item-title">周统计</div>
        <div class="u-flex-jaa info-container">
          <div class="item-info">
            <div class="name">当周用能(KWh)</div>
            <div class="value">{{ itemizedStatistics.nowWeek }}</div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="item-info">
            <div class="name">上周用能(KWh)</div>
            <div class="value">{{ itemizedStatistics.lastWeek }}</div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="item-info">
            <div class="name">环比</div>
            <div class="value">{{ itemizedStatistics.huanbiWeek }}%</div>
          </div>
        </div>
        <div class="pie-item-echarts" ref="weekPieCharts"></div>
      </div>
      <!-- 月 -->
      <div class="u-flex-cjac item-module">
        <div class="item-title">月统计</div>
        <div class="u-flex-jaa info-container">
          <div class="item-info">
            <div class="name">当月用能(KWh)</div>
            <div class="value">{{ itemizedStatistics.nowMonth }}</div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="item-info">
            <div class="name">上月用能(KWh)</div>
            <div class="value">{{ itemizedStatistics.lastMonth }}</div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="item-info">
            <div class="name">环比</div>
            <div class="value">{{ itemizedStatistics.huanbiMonth }}%</div>
          </div>
        </div>
        <div class="pie-item-echarts" ref="monthPieCharts"></div>
      </div>
    </div>
    <div class="trend-charts" ref="trendCharts"></div>
  </div>
</template>
// 分项能耗
<script>
  import * as echarts from 'echarts';
  import commonSearch from '../components/commonSearch.vue'
  export default {
    name: '',
    components: {
      commonSearch
    },
    data () {
      return {
        loading: true,
        itemizedStatistics: {
          nowDay: null,
          lastDay: null,
          huanbiDay: null,
          nowWeek: null,
          lastWeek: null,
          huanbiWeek: null,
          nowMonth: null,
          lastMonth: null,
          huanbiMonth: null,
        },
        dayPieData: [
          { value: 2750.10, name: '照明插座' },
          { value: 2368.90, name: '空调用电' },
          { value: 2007.80, name: '其他用电' },
          { value: 639.90, name: '动力用电' }
        ],
        weekPieData: [],
        monthPieData: [],
        hours: ['11/29 00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
        kongtiao: [120, 132, 101, 134, 90, 230, 210],
        dongli: [150, 212, 201, 154, 190, 330, 410],
        zhaoming: [220, 182, 191, 234, 290, 330, 310],
        qita: [320, 302, 301, 334, 390, 330, 320],
        url: {
          list: "/ems/statistics/itemizedenergy",
        },
      }
    },
    created () {
    },
    mounted() {
      this.$nextTick(() => {
        this.getItemizedenergy()
      })
    },
    methods: {
      async getItemizedenergy(){
        this.loading = true
        var data = this.$refs.commonSearch.queryParams
        getAction(this.url.list, data).then(response => {
          console.log(response)
          var listData = response.data
          // 日
          this.itemizedStatistics.nowDay = (listData.dayStatistics.find(item=>item.type === '当日用能')).howManyValue
          this.itemizedStatistics.lastDay = (listData.dayStatistics.find(item=>item.type === '昨日用能')).howManyValue
          this.itemizedStatistics.huanbiDay = (listData.dayStatistics.find(item=>item.type === '环比')).howManyValue
          // 月
          this.itemizedStatistics.nowMonth = (listData.monthStatistics.find(item=>item.type === '当月用能')).howManyValue
          this.itemizedStatistics.lastMonth = (listData.monthStatistics.find(item=>item.type === '上月用能')).howManyValue
          this.itemizedStatistics.huanbiMonth = (listData.monthStatistics.find(item=>item.type === '环比')).howManyValue
          // listData.monthStatistics.find(item=>if (item.type === '环比') {return item.howManyValue})
          // 周
          this.itemizedStatistics.nowWeek = (listData.weekStatistics.find(item=>item.type === '当周用能')).howManyValue
          this.itemizedStatistics.lastWeek = (listData.weekStatistics.find(item=>item.type === '上周用能')).howManyValue
          this.itemizedStatistics.huanbiWeek = (listData.weekStatistics.find(item=>item.type === '环比')).howManyValue

          this.dayPieData = listData.dayStatistics.map(res => {
            if(res.type === '能耗分项'){
              var item ={
                name: res.equipmentname,
                value: res.howManyValue,
              }
              return item
            } 
            
          })
          this.weekPieData = listData.weekStatistics.map(res => {
            if(res.type === '能耗分项'){
              var item ={
                name: res.equipmentname,
                value: res.howManyValue,
              }
              return item
            }
          })
          this.monthPieData = listData.monthStatistics.map(res => {
            if(res.type === '能耗分项'){
              var item ={
                name: res.equipmentname,
                value: res.howManyValue,
              }
              return item
            }
          })
          
          this.hours = listData.hours
          this.kongtiao = listData.kongtiao
          this.dongli = listData.dongli
          this.zhaoming = listData.zhaoming
          this.qita = listData.qita
          this.loading = false
        })
        this.initDayPieCharts()
        this.initWeekPieCharts()
        this.initMonthPieCharts()
        this.initEcharts()
      },
      initDayPieCharts(){
        var chartDom = this.$refs.dayPieCharts
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            top: '10%',
            right: 10,
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['40%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                // position: 'center'
              },
              // emphasis: {
              //   label: { // 饼图每一个的名称显示
              //     show: false,
              //     fontSize: 40,
              //     fontWeight: 'bold'
              //   }
              // },
              labelLine: {
                show: false
              },
              data: this.dayPieData
            }
          ]
        };
        

        option && myChart.setOption(option);
        window.addEventListener("resize",function (){
          myChart.resize();
        });
      },
      initWeekPieCharts(){
        var chartDom = this.$refs.weekPieCharts
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            top: '10%',
            right: 10,
          },
          // grid: {
          //   top: '0',
          //   bottom: '0',
          // },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['40%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                // position: 'center'
              },
              // emphasis: {
              //   label: { // 饼图每一个的名称显示
              //     show: false,
              //     fontSize: 40,
              //     fontWeight: 'bold'
              //   }
              // },
              labelLine: {
                show: false
              },
              data: this.weekPieData
            }
          ]
        };
        

        option && myChart.setOption(option);
        window.addEventListener("resize",function (){
          myChart.resize();
        });
      },
      initMonthPieCharts(){
        var chartDom = this.$refs.monthPieCharts
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            top: '10%',
            right: 10,
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['40%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                // position: 'center'
              },
              // emphasis: {
              //   label: { // 饼图每一个的名称显示
              //     show: false,
              //     fontSize: 40,
              //     fontWeight: 'bold'
              //   }
              // },
              labelLine: {
                show: false
              },
              data: this.monthPieData
            }
          ]
        };
        

        option && myChart.setOption(option);
        window.addEventListener("resize",function (){
          myChart.resize();
        });
      },
      initEcharts(){
        var _this = this
        var chartDom = this.$refs.trendCharts
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '用能趋势',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            bottom: 0
          },
          grid: {
            top: '30px',
            left: '3%',
            right: '4%',
            bottom: '25px',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.hours
          },
          yAxis: {
            type: 'value',
          },
          toolbox: {
            show: true,
            feature: {
              saveAsImage: {},
            }
          },
          series: [
            {
              name: '动力用电',
              type: 'bar',
              stack: 'total',
              color: '#5470C6',
              emphasis: {
                focus: 'series'
              },
              data: this.dongli
            },
            {
              name: '空调用电',
              type: 'bar',
              stack: 'total',
              color: '#91CC75',
              // label: { // 是否显示柱形图上数字
              //   show: true
              // },
              // emphasis: { // 悬浮时是否模糊其他柱形图
              //   focus: 'series'
              // },
              data: this.kongtiao
            },
            {
              name: '照明用电',
              type: 'bar',
              stack: 'total',
              color: '#EE6666',
              // emphasis: {
              //   focus: 'series'
              // },
              data: this.zhaoming
            },
            {
              name: '其他用电',
              type: 'bar',
              stack: 'total',
              barWidth: '30%',
              color: '#FAC858',
              // emphasis: {
              //   focus: 'series'
              // },
              data: this.qita
            }
          ]
        };
        

        option && myChart.setOption(option);
        
        window.addEventListener("resize",function (){
          myChart.resize();
        });

      },
      /** 搜索按钮操作 */
      handleSearch(param) {
        console.log(param)
        this.getItemizedenergy()
      }
    },
  }
</script>

<style lang="less" scoped>
.item-zedEnergy{
  min-height: calc(100vh - 84px);
  padding: 10px;
  // 上部3个统计模块
  .statistics-container{
    // 每一个模块
    .item-module{
      // height: 100px;
      box-shadow: 0 2px 10px rgba(0,0,0,.1);
      flex: 1;
      margin-right: 10px;
      padding: 1.4vh 20px 0.8vh;
      // padding: 16px 20px;
      .item-title{
        font-size: 18px;
      }
      // 每个模块的三个统计信息
      .info-container{
        width: 100%;
        flex: 1;
        .item-info{
          padding: 1.3vh 0 1vh;
          // padding: 16px 0 12px;
          text-align: center;
          .name{
            font-size: 14px;
          }
          .value{
            margin-top: 1.3vh;
            // margin-top: 15px;
            font-size: 20px;
          }
        }
      }
      // 饼图
      .pie-item-echarts{
        width: 100%;
        // height: 160px;
        height: 18vh;
      }
    }
    .item-module:last-child{
      margin-right: 0;
    }
  }
  .trend-charts{
    min-height: calc(100vh - 18vh - 5.8vh - 84px - 58px - 57px - 50px);
    padding: 10px;
    margin-top: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
  }
}
</style>