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

<template>
  <a-spin :spinning="loading">
    <div class="item-zedEnergy" :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>
            <a-divider type="vertical" />
            <div class="item-info">
              <div class="name">昨日用能(KWh)</div>
              <div class="value">{{ itemizedStatistics.lastDay }}</div>
            </div>
            <a-divider type="vertical" />
            <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>
            <a-divider type="vertical" />
            <div class="item-info">
              <div class="name">上周用能(KWh)</div>
              <div class="value">{{ itemizedStatistics.lastWeek }}</div>
            </div>
            <a-divider type="vertical" />
            <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>
            <a-divider type="vertical" />
            <div class="item-info">
              <div class="name">上月用能(KWh)</div>
              <div class="value">{{ itemizedStatistics.lastMonth }}</div>
            </div>
            <a-divider type="vertical" />
            <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>
  </a-spin>
</template>

<script>
  import * as echarts from 'echarts';
  import commonSearch from '../components/commonSearch.vue'
  import { httpAction, getAction } from '@/api/manage'
  export default {
    name: 'energyItem',
    components: {
      commonSearch
    },
    data () {
      return {
      description: '分项能耗',
        loading: true,
        itemizedStatistics: {
          nowDay: null,
          lastDay: null,
          huanbiDay: null,
          nowWeek: null,
          lastWeek: null,
          huanbiWeek: null,
          nowMonth: null,
          lastMonth: null,
          huanbiMonth: null,
        },
        dayPieData: [],
        weekPieData: [],
        monthPieData: [],
        hours: [],
        kongtiao: [],
        dongli: [],
        zhaoming: [],
        qita: [],
        url: {
          list: "/emsStatistics/itemizedenergy",
        },
      }
    },
    created () {
    },
    mounted() {
      this.$nextTick(() => {
        this.getItemizedenergy()
      })
    },
    methods: {
      getItemizedenergy(){
        this.loading = true
        var data = this.$refs.commonSearch.queryParams
        getAction(this.url.list, data).then(response => {
          if(response.success){
            var listData = response.result
            // 日
            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
          }else{
            this.$message.warning(response.message);
          }
        }).finally(() => {
          this.initDayPieCharts()
          this.initWeekPieCharts()
          this.initMonthPieCharts()
          this.initEcharts()
          this.loading = false
        })
      },
      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) {
        this.getItemizedenergy()
      }
    },
  }
</script>

<style lang="less" scoped>
  @import '~@/assets/less/uStyle.less';
</style>
<style lang="less" scoped>
.item-zedEnergy{
  min-height: calc(100vh - 84px);
  padding: 0 10px;
  // 上部3个统计模块
  .statistics-container{
    // 每一个模块
    .item-module{
      // height: 100px;
      box-shadow: 0 2px 10px rgba(153,153,153,.1);
      flex: 1;
      margin-right: 10px;
      padding: 1.4vh 20px 0.8vh;
      background: #fff;
      // 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(153,153,153,.1);
    background: #fff;
  }
}
</style>