增加能源管理模块

src/views/module_ems/energyAnalyse/balanceAnalysis/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+// 用能平衡分析
+<script>
+  export default {
+    name: '',
+    data () {
+      return {
+      }
+    },
+    created () {
+    },
+    mounted () {
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/module_ems/energyAnalyse/components/commonSearch.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="table-page-search-wrapper">
+    <a-form :model="queryParams" ref="queryForm" layout="inline">
+      <a-row :gutter="24">
+        <a-col :xl="6" :lg="7" :md="8" :sm="24">
+          <a-form-item label="区域" prop="spaceId">
+            <a-cascader
+              v-model="queryParams.spaceId"
+              placeholder="请选择区域"
+              :allowClear="true"
+              :props="{ multiple: true, checkStrictly: true }"
+              filterable
+              :options="spaceOptions"
+              :field-names="spaceProps"
+            ></a-cascader>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="6" :lg="7" :md="8" :sm="24" v-if="type !== 'nodate'">
+          <a-form-item label="日期" prop="date">
+            <a-range-picker
+              v-if="type === 'daterange'"
+              v-model="queryParams.date"
+              format="YYYY-MM"
+              :placeholder="['开始月份', '结束月份']"
+            >
+            </a-range-picker>
+            <a-date-picker
+              v-if="type === 'month'"
+              v-model="queryParams.yearMonth"
+              :editable="false"
+              :clearable="false"
+              value-format="yyyy-MM"
+              type="month"
+              placeholder="选择月"
+            >
+            </a-date-picker>
+            <a-date-picker
+              v-if="type === 'day'"
+              v-model="queryParams.day"
+              :editable="false"
+              :clearable="false"
+              value-format="yyyy-MM-dd"
+              type="date"
+              placeholder="选择日期"
+            >
+            </a-date-picker>
+          </a-form-item>
+        </a-col>
+        <a-col :xl="6" :lg="7" :md="8" :sm="24">
+          <a-button type="primary" icon="search" @click="handleQuery">搜索</a-button>
+        </a-col>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+
+<script>
+import { httpAction, getAction } from '@/api/manage'
+export default {
+  name: '',
+  props: {
+    type: {
+      type: String,
+      default: null,
+    },
+    hasAreaSearch: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      spaceOptions: [],
+      spaceProps: {
+        value: 'id',
+        label: 'name',
+        children: 'children',
+        emitPath: false,
+        checkStrictly: true,
+      },
+      showSearch: false,
+      queryParams: {
+        spaceId: 288348631531521,
+        beginTime: null, // 只有能耗总览不需要
+        endTime: null, // 只有能耗总览不需要
+        date: [],
+        yearMonth: null, // 节能分析
+        day: null, // 分项能耗
+      },
+      params: {
+        column: 'createTime',
+        order: 'desc',
+        hasQuery: 'false',
+        field: 'id,parentid,name',
+        pageNo: '1',
+        pageSize: '100',
+      },
+      url: {
+        // list: "/space/space/rootList",
+        list: '/space/space/list',
+        childList: '/space/space/childList',
+        getChildListBatch: '/space/space/getChildListBatch',
+      },
+    }
+  },
+  created() {
+    this.getList()
+    this.getNowDate()
+  },
+  mounted() {},
+  methods: {
+    /** 查询区域管理列表 */
+    getList() {
+      // this.loading = true;
+      getAction(this.url.list, this.params).then((response) => {
+        this.spaceOptions = this.handleTree(response.result, 'id', 'parentid')
+        console.log('区域信息', this.spaceOptions)
+        // this.loading = false;
+      })
+    },
+    /**
+     * 查询当天日期
+     */
+    getNowDate() {
+      const nowTime = new Date()
+      const year = nowTime.getFullYear()
+      let month = nowTime.getMonth() + 1
+      let day = nowTime.getDate()
+      month = month < 10 ? '0' + month : month
+      day = day < 10 ? '0' + day : day
+      // const NOW_MONTHS_AGO = `${year}-${month}`
+      this.queryParams.beginTime = `${year}-01`
+      this.queryParams.endTime = `${year}-${month}`
+      this.queryParams.date = [`${year}-01`, `${year}-${month}`]
+      this.queryParams.yearMonth = `${year}-${month}`
+      this.queryParams.day = `${year}-${month}-${day}`
+    },
+    changeShow() {
+      this.showSearch = !this.showSearch
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      // console.log(this.queryParams)
+      this.queryParams.beginTime = this.queryParams.date[0]
+      this.queryParams.endTime = this.queryParams.date[1]
+      this.$emit('search', this.queryParams)
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm')
+      this.date = []
+      this.handleQuery()
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.search-compoments {
+  position: relative;
+  .search-icon {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+    color: #fff;
+    background-color: #1890ff;
+  }
+  .search-container {
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding-top: 12px;
+    margin-bottom: 10px;
+    .a-form-item--small.a-form-item {
+      margin-bottom: 14px;
+    }
+  }
+  .item-echarts {
+    min-height: calc(100vh - 174px);
+    padding: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+}
+</style>

src/views/module_ems/energyAnalyse/demandAnalysis/index.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="demand-analysis" v-loading="loading">
+    <commonSearch ref="commonSearch" type="daterange" @search="handleSearch"></commonSearch>
+    <div class="item-echarts" ref="echarts" :style="{height: echartsHeight + 'px'}"></div>
+  </div>
+</template>
+// 需量分析
+<script>
+  import * as echarts from 'echarts';
+  import commonSearch from '../components/commonSearch.vue'
+  export default {
+    name: '',
+    components: {
+      commonSearch
+    },
+    data () {
+      return {
+        loading: true,
+        echartsHeight: window.innerHeight - 84 - 60 - 30,
+        myChart: null,
+        url: {
+          list: "/ems/statistics/demandanalysis",
+        },
+        monthsplit: [],
+        // monthsplit: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        // mubiao: [],
+        mubiao: [153, 160, 145, 145, 125 ],
+        // mubiao: [153, 160, 145, 145, 125, 195, 210, 145, 180, 160, 210, 170 ],
+        shiji: [],
+        // shiji: [120, 132, 101, 134, 90, 230, 210, 160, 175, 150, 195, 180]
+      }
+    },
+    created () {
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.getDemandanalysis()
+      })
+    },
+    methods: {
+      async getDemandanalysis(){
+        this.loading = true
+        var data = this.$refs.commonSearch.queryParams
+        console.log(data)
+        getAction(this.url.list, data).then(response => {
+          console.log(response)
+          this.monthsplit = response.data.monthsplit
+          this.mubiao = response.data.mubiao
+          this.shiji = response.data.shiji
+          this.loading = false
+        })
+        this.initEcharts()
+      },
+      /**
+       * @param span series 中最大值与最小值的差值
+       * @param splitNumber 坐标轴分割段数
+       * @param round 折线图中需要传 true
+       * @returns {number} 处理后 max 的最后结果
+       */
+      nice(span, splitNumber, round) {
+        let val = span / splitNumber
+        var exponent = Math.floor(Math.log(val) / Math.LN10);
+        var exp10 = Math.pow(10, exponent);
+        var f = val / exp10; // 1 <= f < 10
+      
+        var nf;
+      
+        if (round) {
+          if (f < 1.5) {
+            nf = 1;
+          } else if (f < 2.5) {
+            nf = 2;
+          } else if (f < 4) {
+            nf = 3;
+          } else if (f < 7) {
+            nf = 5;
+          } else {
+            nf = 10;
+          }
+        } else {
+          if (f < 1) {
+            nf = 1;
+          } else if (f < 2) {
+            nf = 2;
+          } else if (f < 3) {
+            nf = 3;
+          } else if (f < 5) {
+            nf = 5;
+          } else {
+            nf = 10;
+          }
+        }
+      
+        val = nf * exp10; // Fix 3 * 0.1 === 0.30000000000000004 issue (see IEEE 754).
+        // 20 is the uppper bound of toFixed.
+      
+        const step = exponent >= -20 ? +val.toFixed(exponent < 0 ? -exponent : 0) : val;
+      
+        let result
+        for(let i = splitNumber - 3; i < splitNumber + 3; i++) {
+          result = step * i
+          if (result > span) break
+        }
+      
+        return result
+      },
+      initEcharts(){
+        var _this = this
+        var chartDom = _this.$refs.echarts
+        _this.myChart = echarts.init(chartDom);
+        var option;
+
+        option = {
+          title: {
+            text: '需量分析'
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: ['实际需量', '目标需量']
+          },
+          toolbox: {
+            show: true,
+            feature: {
+              // magicType: { type: ['line', 'bar'] },
+              saveAsImage: {}
+            }
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: this.monthsplit,
+          },
+          yAxis: {
+            type: 'value',
+            axisLabel: {
+              formatter: '{value}kVA'
+            }
+          },
+          series: [
+            {
+              name: '实际需量',
+              type: 'line',
+              // smooth: true, //平滑曲线显示
+              barWidth: '55%',
+              itemStyle: {
+                normal: {
+                  color: function (params) {
+                    console.log(params)
+                    if(params.data > _this.mubiao[params.dataIndex]){
+                      return '#F5B544'
+                    } else {
+                      return '#0C75FF'
+                    }
+                  },
+                  // barBorderRadius: 11,
+                }
+                
+              },
+              markPoint: {
+                data: [
+                  { type: 'max', name: 'Max' },
+                  { type: 'min', name: 'Min' }
+                ]
+              },
+              // markLine: {
+              //   data: [{ type: 'average', name: 'Avg' }]
+              // }
+              data: this.shiji,
+            },
+            {
+              name: '目标需量',
+              type: 'line',
+              // smooth: true, //平滑曲线显示
+              step: 'middle',
+              symbol: 'none',
+              // showAllSymbol: true, //显示所有图形。
+              // symbol: "circle", //标记的图形为实心圆
+              // symbolSize: 1, //标记的大小
+              itemStyle: {
+                //折线拐点标志的样式
+                color: "rgba(5,140,255, 0.2)"
+              },
+              lineStyle: {
+                  color: "rgba(5,140,255, 0.2)"
+              },
+              areaStyle:{
+                  color: "rgba(5,140,255, 0.2)"
+              },
+            //   areaStyle: {
+            //     normal: {
+            //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            //                 offset: 0,
+            //                 color: 'rgba(0,202,149,0.3)'
+            //             },
+            //             {
+            //                 offset: 1,
+            //                 color: 'rgba(0,202,149,0)'
+            //             }
+            //         ], false),
+            //         shadowColor: 'rgba(0,202,149, 0.9)',
+            //         shadowBlur: 20
+            //     }
+            // },
+              data: this.mubiao,
+              
+              // markPoint: {
+              //   data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
+              // },
+              // markLine: {
+              //   data: [
+              //     { type: 'average', name: 'Avg' },
+              //     [
+              //       {
+              //         symbol: 'none',
+              //         x: '90%',
+              //         yAxis: 'max'
+              //       },
+              //       {
+              //         symbol: 'circle',
+              //         label: {
+              //           position: 'start',
+              //           formatter: 'Max'
+              //         },
+              //         type: 'max',
+              //         name: '最高点'
+              //       }
+              //     ]
+              //   ]
+              // }
+            }
+          ]
+        };
+
+        option && _this.myChart.setOption(option);
+        window.addEventListener("resize",function (){
+          _this.myChart.resize();
+        });
+      },
+      /** 搜索按钮操作 */
+      handleSearch(param) {
+        console.log(param)
+        this.getDemandanalysis()
+      },
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+.demand-analysis{
+  min-height: calc(100vh - 84px);
+  padding: 10px;
+  .search-container{
+    box-shadow: 0 2px 10px rgba(0,0,0,.1);
+    padding-top: 12px;
+    margin-bottom: 10px;
+    .el-form-item--small.el-form-item{
+      margin-bottom: 14px;
+    }
+  }
+  .item-echarts{
+    // min-height: calc(100vh - 174px);
+    padding: 10px;
+    box-shadow: 0 2px 10px rgba(0,0,0,.1);
+  }
+}
+</style>

src/views/module_ems/energyAnalyse/electricityDay/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="日期">
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          style="width: 360px"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button>
+        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['ems:emselectricityday:export']"
+          >导出
+        </el-button>
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="emselectricitydayList"
+    >
+      <el-table-column label="序号" width="55">
+        <template slot-scope="scope">
+          <span>{{
+            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
+          }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="设备名称" align="center" prop="equipmentname" />
+      <el-table-column label="设备编号" align="center" prop="equipmentcode" />
+      <el-table-column label="用电量(kWh)" align="center" prop="electricityvalue" />
+    </el-table>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "emselectricityday",
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 分时电量数据表格数据
+      emselectricitydayList: [],
+      // 弹出层标题
+      title: "",
+      // 日期范围
+      dateRange: [],
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 1000,
+      },
+      url: {
+        list: "/ems/emselectricityday/liststa",
+      },
+    };
+  },
+  created() {
+    this.getDate();
+    this.getList();
+  },
+  methods: {
+    getDate() {
+      var begindate = this.dateformat(new Date()).substring(0, 10);
+      var enddate = this.dateformat(new Date()).substring(0, 10);
+      this.dateRange = [ begindate, enddate ];
+    },
+    dateformat(date) {
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      month = month < 10 ? "0" + month : month;
+      var strDate = date.getDate();
+      strDate = strDate < 10 ? "0" + strDate : strDate;
+      var hour = date.getHours();
+      hour = hour < 10 ? "0" + hour : hour;
+      var minute = date.getMinutes();
+      minute = minute < 10 ? "0" + minute : minute;
+      var second = date.getSeconds();
+      second = second < 10 ? "0" + second : second;
+
+      return year + "-" + month + "-" + strDate + " " + hour + ":" + minute + ":" + second;
+    },
+    /** 查询分时电量数据列表 */
+    getList() {
+      if (this.dateRange == null || this.dateRange.length < 2) {        
+          this.$modal.msgError("请先选择日期!");
+          return false;
+      }
+      this.loading = true;
+      this.dateRange[0] = this.dateformat(new Date(this.dateRange[0])).substring(0, 10);
+      this.dateRange[1] = this.dateformat(new Date(this.dateRange[1])).substring(0, 10);
+
+      getAction(this.url.list, this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
+        this.emselectricitydayList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.dateRange = [];
+      this.handleQuery();
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "ems/emselectricityday/exportsta",
+        {
+          ...this.queryParams,
+        },
+        `用电量_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,498 @@
+<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>

src/views/module_ems/energyAnalyse/energyQuota/index.vue

@@ -0,0 +1 @@
+// 能耗定额

src/views/module_ems/energyAnalyse/energyRank/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="energy-analysis ranking" v-loading="loading">
+    <commonSearch ref="commonSearch" type="daterange" @search="handleSearch"></commonSearch>
+    <div class="item-echarts" ref="echarts"></div>
+    <el-table :data="tableData" border style="width: 100%" height="280">
+      <el-table-column prop="equipmentname" label="设备" align="center"></el-table-column>
+      <el-table-column prop="howManyValue" label="总用电(KWH)" align="center"></el-table-column>
+      <el-table-column prop="otherValue" label="占比(%)" align="center"></el-table-column>
+      <el-table-column prop="howManyValue2" label="去年同期(KWH)" align="center"></el-table-column>
+      <el-table-column prop="otherValue2" label="同比增长率(%)" align="center"></el-table-column>
+    </el-table>
+  </div>
+</template>
+// 能耗排名
+<script>
+  import * as echarts from 'echarts';
+  import commonSearch from '../components/commonSearch.vue'
+  export default {
+    name: '',
+    components: {
+      commonSearch
+    },
+    data () {
+      return {
+        loading: true,
+        tableData: [
+          { equipmentname: '园区A栋3FAXA_P电', howManyValue: '301672', zhanbi: '21.73', otherValue: '--', otherValue2: '--' },
+          { equipmentname: '园区A栋2FAXA_L3电', howManyValue: '230412', zhanbi: '16.60', otherValue: '--', otherValue2: '--' },
+          { equipmentname: '园区A栋4FAXA_L3电', howManyValue: '226125', zhanbi: '16.29', otherValue: '--', otherValue2: '--' },
+          { equipmentname: '园区A栋2FAXA_LR电', howManyValue: '212633', zhanbi: '15.32', otherValue: '--', otherValue2: '--' },
+          { equipmentname: '园区A栋3FAXA_AC电', howManyValue: '185498', zhanbi: '13.36', otherValue: '--', otherValue2: '--' },
+          { equipmentname: '园区A栋2FAXA_P电', howManyValue: '181028', zhanbi: '13.23', otherValue: '--', otherValue2: '--' },
+          { equipmentname: '园区A栋1FAXA_L3电', howManyValue: '176050', zhanbi: '12.31', otherValue: '--', otherValue2: '--' },
+        ],
+        yuanquName: ['园区A栋1FAXA_L3电', '园区A栋2FAXA_P电', '园区A栋3FAXA_AC电', '园区A栋2FAXA_LR电', '园区A栋4FAXA_L3电', '园区A栋2FAXA_L3电', '园区A栋3FAXA_P电'],
+        numbers: [176050, 181028, 185498, 212633, 226125, 230412, 301672],
+        url: {
+          list: "/ems/statistics/ranking",
+        },
+      }
+    },
+    created () {
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.getRanking()
+      })
+    },
+    methods: {
+      async getRanking(){
+        this.loading = true
+        var data = this.$refs.commonSearch.queryParams
+        getAction(this.url.list, data).then(response => {
+          this.tableData = response.data
+          var yuanquName, numbers
+          yuanquName = this.tableData.map(obj => {return obj.equipmentname})
+          numbers = this.tableData.map(obj => {return obj.howManyValue})
+          this.yuanquName = yuanquName.filter((item, index) => index < 10)
+          this.numbers = numbers.filter((item, index) => index < 10)
+          this.yuanquName.reverse()
+          this.numbers.reverse()
+          this.loading = false
+        })
+        this.initEcharts()
+      },
+      initEcharts(){
+        var _this = this
+        var chartDom = this.$refs.echarts
+        var myChart = echarts.init(chartDom);
+        var option;
+
+        option = {
+          title: {
+            text: '能耗排名TOP10',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {
+            top: 'bottom',
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '15px',
+            top: '20px',
+            containLabel: true
+          },
+          toolbox: {
+            show: true,
+            feature: {
+              saveAsImage: {},
+            }
+          },
+          xAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01]
+          },
+          yAxis: {
+            type: 'category',
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            data: this.yuanquName
+          },
+          series: [
+            {
+              name: '本期',
+              type: 'bar',
+              // barWidth: 17,
+              data: this.numbers
+            }
+          ]
+        };
+
+        option && myChart.setOption(option);
+        window.addEventListener("resize",function (){
+          myChart.resize();
+        });
+      },
+      /** 搜索按钮操作 */
+      handleSearch(param) {
+        // this.getList();
+        console.log(param)
+        this.getRanking()
+      },
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+.ranking{
+  padding: 10px;
+  .item-echarts{
+    padding: 10px;
+    min-height: calc(100vh - 464px);
+    box-shadow: 0 2px 10px rgba(0,0,0,.1);
+  }
+  .el-table{
+    // padding: 10px;
+    margin-top: 10px;
+    box-shadow: 0 2px 10px rgba(0,0,0,.1);
+  }
+}
+</style>

src/views/module_ems/energyAnalyse/flowAnalysis/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="energyFlow-analysis" v-loading="loading">
+    <commonSearch ref="commonSearch" type="daterange" @search="handleSearch"></commonSearch>
+    <div class="sankey-chart" ref="sankeyChart" style="height:1800px"></div>
+  </div>
+</template>
+// 能流分析
+<script>
+  import * as echarts from 'echarts';
+  import commonSearch from '../components/commonSearch.vue'
+  export default {
+    name: '',
+    components: {
+      commonSearch
+    },
+    data () {
+      return {
+        loading: true,
+        echartsHeight: window.innerHeight - 84 - 60 - 30,
+        // 每一个数据及当前总数据（可能多条路线的和）
+        sourceData: [],
+        linksData: [],
+        url: {
+          list: "/ems/statistics/energyflowAnalysis",
+        },
+      }
+    },
+    created () {
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.getEnergyflowAnalysis()
+      })
+    },
+    methods: {
+      async getEnergyflowAnalysis(){
+        var _this = this
+        _this.loading = true
+        var data = _this.$refs.commonSearch.queryParams
+        getAction(this.url.list, data).then(response => {
+          console.log(response)
+          _this.sourceData = response.data.sourceData
+          _this.linksData = response.data.linksData
+          _this.loading = false
+        })
+        _this.initEcharts()
+      },
+      initEcharts(){
+        var _this = this
+        var chartDom = _this.$refs.sankeyChart
+        var myChart = echarts.init(chartDom);
+        var option;
+
+        var sangjiColor = ['#f7a365', '#44eda1', '#00ffff', '#00baff', '#f8b551', '#7ecef4', '#7ecef4', '#7ecef4'];
+        var itemStyleSource = [];
+        for(let d = 0; d < _this.sourceData.length; d++) {
+          _this.sourceData[d].itemStyle = {
+            normal: {
+              color: sangjiColor[d]
+            }
+          }
+          itemStyleSource.push(_this.sourceData[d]);
+        }
+
+        option = {
+          // backgroundColor:"#013d5a",
+          toolbox: {
+            show: true,
+            feature: {
+              saveAsImage: {},
+            }
+          },
+          series: [{
+            type: 'sankey',
+            layout: 'none',
+            // top:"12%",
+            // bottom: '21%',
+            // left:'3%',
+            // focusNodeAdjacency: 'allEdges',
+            // focus: 'adjacency',
+            // nodeAligh: 'left',
+            // layoutIterations: 32,
+            data: itemStyleSource,
+            links: _this.linksData,
+            label: {
+              normal:{
+                color:"#666",
+                fontSize:12,
+                formatter: function(params, i) {
+                  // console.log(params);
+                  return "{white|"+params.data.name +"}"+params.data.nameValue+" "+params.data.valueUnit;
+                },
+                rich:{
+                  white:{
+                    fontSize:12,
+                    padding:[10,0,0,0]
+                  }
+                }
+              }
+            },
+            lineStyle: {
+              normal: {
+                color: 'source',
+                curveness: 0.7
+              }
+            },
+            itemStyle: {
+              normal: {
+                borderWidth: 1,
+                borderColor: 'transparent'
+              }
+            }
+          }]
+        }
+        
+        option && myChart.setOption(option);
+        // window.addEventListener("resize",function (){
+        //   myChart.resize();
+        // });
+      },
+      /** 搜索按钮操作 */
+      handleSearch(param) {
+        this.getEnergyflowAnalysis()
+      }
+    },
+  }
+</script>
+
+<style lang="less" scoped>
+.energyFlow-analysis{
+  min-height: calc(100vh - 84px);
+  padding: 10px;
+  .sankey-chart{
+    // min-height: calc(100vh - 104px);
+    padding: 10px;
+    box-shadow: 0 2px 10px rgba(0,0,0,.1);
+  }
+}
+</style>

src/views/module_ems/energyAnalyse/savingAnalysis/index.vue

@@ -0,0 +1,341 @@
+<template>
+  <div class="saving-analysis" v-loading="loading">
+    <commonSearch ref="commonSearch" :type="'month'" @search="handleSearch"></commonSearch>
+    <div class="text-detail-container u-flex">
+      <div class="u-flex-cjac item">
+        <div class="name">实际用能(KWh)</div>
+        <div class="value">{{ shijiAll }}</div>
+      </div>
+      <div class="u-flex-cjac item">
+        <div class="name">计划用能(KWh)</div>
+        <div class="value">{{ jihuaAll }}</div>
+      </div>
+      <div class="u-flex-cjac item">
+        <div class="name">累计节能(KWh)</div>
+        <div class="value">{{ leijiAll }}</div>
+      </div>
+      <div class="u-flex-cjac item analysis-text">
+        <div class="name">数据分析</div>
+        <div class="text">{{ anlysis }}</div>
+      </div>
+    </div>
+    <div class="item-echarts" ref="echarts"></div>
+  </div>
+</template>
+// 节能分析
+<script>
+  import * as echarts from 'echarts';
+  import commonSearch from '../components/commonSearch.vue'
+  export default {
+    name: '',
+    components: {
+      commonSearch
+    },
+    data () {
+      return {
+        loading: true,
+        anlysis: null,
+        shijiAll: null,
+        jihuaAll: null,
+        leijiAll: null,
+        monthDate: ['08/01', '08/02','08/03', '04', '05', '06', '07','08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29' ,'30', '31'],
+        jienengData: [ 6256,13954,14856,14236,14368,14000,0,0,14056,14265,5999,0,14666,5258,6489,14888,0,14257,13999,14879,8899,8159,14148,14942,14025,14356,14943,0,0,14678,14977 ],
+        chaobiaoData: [ 0,0,0,0,0,0,9204,9015,0,0,0,18999,0,0,0,0,15111,0,0,0,0,0,0,0,0,0,0,10056,9752,0,0 ],
+        jihuaData: [ 9000, 15000, 15000, 15000, 15000, 15000, 9000, 9000, 15000, 15000, 15000, 15000, 15000, 9000, 9000, 15000, 15000, 15000, 15000, 15000, 9000, 9000, 15000, 15000, 15000, 15000, 15000, 9000, 9000, 15000, 15000],
+        leijiData: [2743,4100,4828,5768,6670,7929,7424,7315,8338,9193,18252,14124,14547.7,18245,20942.6,22420,22314.5,23049.2,24237.6,24572.8,24638.3,25072.3,25846.9,26014.3,26956.7,27639.2,27859.5,27213.1,26854,27254,27440.8],
+        url: {
+          list: "/ems/statistics/savinganalysis",
+        },
+      }
+    },
+    created () {
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.getSavinganalysis()
+      })
+    },
+    methods: {
+      async getSavinganalysis(){
+        this.loading = true
+        var data = this.$refs.commonSearch.queryParams
+        console.log(data)
+        getAction(this.url.list,data).then(response => {
+          console.log(response)
+          this.jienengData = response.data.jienengData
+          this.chaobiaoData = response.data.chaobiaoData
+          this.jihuaData = response.data.jihuaData
+          this.leijiData = response.data.leijiData
+          this.monthDate = response.data.monthDate
+          this.anlysis = response.data.anlysis
+          this.jihuaAll = response.data.jihuaAll
+          this.shijiAll = response.data.shijiAll
+          this.leijiAll = response.data.leijiAll
+          this.loading = false
+        })
+        this.initEcharts()
+      },
+      // 计算最大值
+      _calcMaxNumber(arr){
+        let max = Math.max(...arr);
+        let maxInt = Math.ceil(max/9.5);
+        let maxVal = maxInt*10;
+        return maxVal;
+      },
+      // 计算最小值
+      _calcMinNumber(arr){
+        let min = Math.min(...arr);
+        let minInt = Math.floor(min/10);
+        let minVal = minInt*10;
+        return minVal;
+      },
+      initEcharts(){
+        var _this = this
+        var chartDom = this.$refs.echarts
+        var myChart = echarts.init(chartDom);
+        var option;
+
+        // let uvMax = this._calcMaxNumber(this.uvDet);
+        // let uvMin = this._calcMinNumber(this.uvDet);
+        // let cliMax = this._calcMaxNumber(this.cliDet);
+        // let cliMin = this._calcMinNumber(this.cliDet);
+
+        //yMax1 第一条y轴的最大值   yMax2 第二条y轴的最大值
+        // var divisor = 5;
+        // var lcmVal = this.chartlcm(yMax1, yMax2)//获取两条y轴的最大公约数
+        // var Ymaxval_interval = this.YmaxvalAndinterval(yMax1, yMax2, lcmVal, divisor);//计算y轴最大值和间隔值
+
+        option = {
+          title: {
+            text: '节能分析趋势',
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: { // 横纵坐标虚线链接显示
+              type: 'cross',
+              crossStyle: {
+                color: '#999'
+              }
+            },
+            formatter: function (params) {
+              // console.log(params)
+              // var res = `${params[0].name} <br/>`
+              var res = ''
+              for (const item of params) {
+                if(item.value === 0 && item.seriesType === 'bar'){
+                } else {
+                  res += `<span style="background: ${item.color}; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> ${item.seriesName} ：${item.value} KWh<br/>`
+                }
+              }
+              return res
+            }
+          },
+          toolbox: {
+            show: true,
+            feature: {
+              saveAsImage: {},
+            }
+          },
+          legend: {
+            top: 'bottom',
+            // data: ['Evaporation', 'Precipitation', 'Temperature']
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: this.monthDate,
+              axisPointer: {
+                type: 'shadow'
+              },
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '实际能耗(KWh)',
+              // min:uvMin,
+              // max:uvMax,
+              // splitNumber:5,
+              // interval:(uvMax-uvMin)/5,
+
+              // min: 0,//最小值
+              // max: Ymaxval_interval.max1,//最大值
+              // interval: Ymaxval_interval.interval1,//每个刻度的间隔值
+            },
+            {
+              type: 'value',
+              name: '累计节能(KWh)',
+              // min:cliMin,
+              // max:cliMax,
+              // splitNumber:5,
+              // interval:(cliMax-cliMin)/5,
+
+              // min: 0,
+              // max: Ymaxval_interval.max2,
+              // interval: Ymaxval_interval.interval2,
+            }
+          ],
+          series: [
+            {
+              name: '实际能耗(节能)',
+              type: 'bar',
+              stack: 'total', // 设置堆叠图，因为后端会分开返回两个数据，而必有一个为0
+              barWidth: '55%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#248ff7'
+                  }, {
+                    offset: 1,
+                    color: '#6851f1'
+                  }]),
+                  barBorderRadius: 12,
+                },
+              },
+              data: this.jienengData
+            },
+            {
+              name: '实际能耗(超标)',
+              type: 'bar',
+              stack: 'total',
+              barWidth: '55%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#fb734e'
+                    // color: '#fccb05'
+                  }, {
+                    offset: 1,
+                    color: '#e32f46'
+                    // color: '#f5804d'
+                  }]),
+                  barBorderRadius: 11,
+                }
+                
+              },
+              data: this.chaobiaoData
+            },
+            {
+              name: '计划用能',
+              type: 'line',
+              step: 'middle',
+              symbol: 'none',
+              // tooltip: { // 单独设置显示的样式
+              //   valueFormatter: function (value) {
+              //     return value + ' KWh';
+              //   }
+              // },
+              itemStyle: {
+                color: '#FAC858'
+              },
+              lineStyle: {
+                join: 'round'
+              },
+              data: this.jihuaData
+            },
+            {
+              name: '累计节能',
+              type: 'line',
+              yAxisIndex: 1, // 依据哪儿个y周坐标显示数据
+              symbol: 'circle',
+              symbolSize: 8,
+              // tooltip: { // 单独设置显示的样式
+              //   valueFormatter: function (value) {
+              //     return value + ' KWh';
+              //   }
+              // },
+              itemStyle: {
+                normal: {
+                  width: 12,
+                  color: '#8bd46e'
+                  // color: '#09bcb7'
+                }
+              },
+              data: this.leijiData
+            }
+          ]
+        };
+
+        option && myChart.setOption(option);
+        window.addEventListener("resize",function (){
+          myChart.resize();
+        });
+      },
+      //echarts专用求最大公约数 不含小数
+      chartlcm(a, b) {
+        var result = 1;
+        for (var i = 1; i <= a && i <= b; i++) {
+          if (a % i == 0 && b % i == 0) {
+            result = i;
+          }
+          if (result > 1 && i >= 10)//公约数大于10的时候 直接跳出 避免y轴刻度太多  (如果不介意刻度太多可以把这一段去掉）
+              break;
+        }
+        return result;
+      },
+      //获取echarts  多Y轴的最大值和间隔值 lcmval 最大公约数   divisor 间隔数量
+      YmaxvalAndinterval(m, n, lcmval, divisor) {
+        var interval1 = Math.ceil(m / lcmval);
+        var interval2 = Math.ceil(n / lcmval);
+        if (lcmval != 1 && lcmval != 0 && lcmval <= 10){
+          return { max1: m, max2: n, interval1: interval1, interval2: interval2 }
+        }
+        if (divisor == undefined || divisor == null)
+            divisor = 5;
+        //var mval = m % divisor;
+        //if (mval > 0) {
+        //    m = ((m - mval) / divisor + 1) * divisor
+        //}
+        m = Math.ceil(m / divisor) * divisor
+        n = Math.ceil(n / divisor) * divisor
+        interval1 = Math.ceil(m / divisor );
+        interval2 = Math.ceil(n / divisor);
+        return { max1: m, max2: n, interval1: interval1, interval2: interval2 }
+      },
+      /** 搜索按钮操作 */
+      handleSearch(param) {
+        this.getSavinganalysis()
+      },
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+.saving-analysis{
+  min-height: calc(100vh - 84px);
+  padding: 10px;
+  .text-detail-container{
+    .item{
+      height: 100px;
+      box-shadow: 0 2px 10px rgba(0,0,0,.1);
+      flex: 1;
+      margin-right: 10px;
+      padding: 10px;
+      .name{
+        font-size: 14px;
+      }
+      .value{
+        margin-top: 8px;
+        font-size: 1.5vw;
+      }
+    }
+    .analysis-text{
+      flex: 4;
+      margin-right: 0;
+      .text{
+        margin-top: 8px;
+        font-size: 1.1vw;
+      }
+    }
+  }
+  .item-echarts{
+    min-height: calc(100vh - 284px);
+    padding: 10px;
+    margin-top: 10px;
+    box-shadow: 0 2px 10px rgba(0,0,0,.1);
+  }
+}
+</style>