* 更改能源管理大屏的使用的模型

ems-ui-cloud/src/views/analysis/power/consume.vue

@@ -4,76 +4,110 @@
       <el-col :span="4" :xs="24">
         <div class="head-container">
           <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
-            style="margin-bottom: 20px" />
+                    style="margin-bottom: 20px"/>
         </div>
         <div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
           <el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false"
-            :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
-            @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;" />
+                   :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
+                   @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;"/>
         </div>
       </el-col>
       <el-col :span="20" :xs="24">
         <div class="container-block">
           <el-card>
             <div style="display: flex;justify-content: space-between;">
-            <SubTitle :title="`平均功率-15分钟【${selectedLabel}】`" />
-            <el-button-group>
-              <el-button v-for="item in btnGroup" :key="item.name" size="mini"
-                :type="item.name === activeBtn ? 'primary' : ''" :icon="item.icon" @click="btnChange(item)" />
-            </el-button-group>
-          </div>
-          <div class="ctl-container">
-            <el-date-picker v-model="dateRange" type="datetimerange" @change="getPowerChart"
-              :picker-options="pickerOptions" value-format="yyyy-MM-dd hh:mm:ss" range-separator="至"
-              start-placeholder="开始日期" end-placeholder="结束日期" align="right" :clearable="false">
-            </el-date-picker>
-          </div>
-          <el-table v-if="activeBtn == 'table'" :data="powerChartData" max-height="400px">
-            <el-table-column label="日期" align="center" prop="date" width="100" fixed="left">
-            </el-table-column>
-            <el-table-column label="时间" align="center" prop="time" width="100" fixed="left">
-            </el-table-column>
-            <el-table-column label="电流(A)" align="center" show-overflow-tooltip width="200">
-              <template slot-scope="scope">
-                <span>A相:{{ scope.row.la }}A;</span>
-                <span>B相:{{ scope.row.lb }}A;</span>
-                <span>C相:{{ scope.row.lc }}A</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="电压(V)" align="center" show-overflow-tooltip width="200">
-              <template slot-scope="scope">
-                <span>A相:{{ scope.row.ua }}V;</span>
-                <span>B相:{{ scope.row.ub }}V;</span>
-                <span>C相:{{ scope.row.uc }}V</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="有功功率(kW)" align="center" show-overflow-tooltip width="250" >
-              <template slot-scope="scope">
-                <span>A相:{{ scope.row.pa }}kW;</span>
-                <span>B相:{{ scope.row.pb }}kW;</span>
-                <span>C相:{{ scope.row.pc }}kW</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="无功功率(kW)" align="center" show-overflow-tooltip width="250" >
-              <template slot-scope="scope">
-                <span>A相:{{ scope.row.qa }}kW;</span>
-                <span>B相:{{ scope.row.qb }}kW;</span>
-                <span>C相:{{ scope.row.qc }}kW</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="功率因素" align="center" prop="pf" width="100" />
-          </el-table>
-          <BaseChart v-else width="100%" height="400px" :option="powerLineOptions" />
+              <SubTitle title='设施能耗'/>
+            </div>
+            <div class="ctl-container">
+              <el-button :class="{ 'is-active': selectedTimeRange === 'day' }"
+                         @click="changeTimeRange('day')">今日
+              </el-button>
+              <el-button :class="{ 'is-active': selectedTimeRange === 'month' }"
+                         @click="changeTimeRange('month')">本月
+              </el-button>
+              <el-button :class="{ 'is-active': selectedTimeRange === 'year' }"
+                         @click="changeTimeRange('year')">本年
+              </el-button>
+            </div>
+            <div class="first-content">
+              <div>
+                <SubTitle title="能耗统计"/>
+                <!-- 图表容器 -->
+                <BaseChart width="100%" height="380px" :option="powerUseOptions"/>
+              </div>
+              <div>
+                <SubTitle title="能耗总览"/>
+                <el-table border stripe show-summary :data="tableData" style="width: 100%;margin-top: 20px;">
+                  <el-table-column prop="name" align="center" label="设施名称">
+                  </el-table-column>
+                  <el-table-column prop="value" align="center" label="能耗(kW·h)">
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+
           </el-card>
           <el-card style="margin-top: 10px;">
             <div style="display: flex;justify-content: space-between;">
-            <SubTitle :title="`峰值功率-日【${selectedLabel}】`" />
-            <el-date-picker v-model="maxPowerDate" type="daterange" @change="getDayMaxLoad"
-              :picker-options="pickerOptions" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
-              end-placeholder="结束日期" align="right" :clearable="false">
-            </el-date-picker>
-          </div>
-          <BaseChart width="100%" height="400px" :option="maxLoadLineOptions" />
+              <SubTitle :title="`平均功率-15分钟【${selectedLabel}】`"/>
+              <el-button-group>
+                <el-button v-for="item in btnGroup" :key="item.name" size="mini"
+                           :type="item.name === activeBtn ? 'primary' : ''" :icon="item.icon" @click="btnChange(item)"/>
+              </el-button-group>
+            </div>
+            <div class="ctl-container">
+              <el-date-picker v-model="dateRange" type="datetimerange" @change="getPowerChart"
+                              :picker-options="pickerOptions" value-format="yyyy-MM-dd hh:mm:ss" range-separator="至"
+                              start-placeholder="开始日期" end-placeholder="结束日期" align="right" :clearable="false">
+              </el-date-picker>
+            </div>
+            <el-table v-if="activeBtn == 'table'" :data="powerChartData" max-height="400px">
+              <el-table-column label="日期" align="center" prop="date" width="100" fixed="left">
+              </el-table-column>
+              <el-table-column label="时间" align="center" prop="time" width="100" fixed="left">
+              </el-table-column>
+              <el-table-column label="电流(A)" align="center" show-overflow-tooltip width="200">
+                <template slot-scope="scope">
+                  <span>A相:{{ scope.row.la }}A;</span>
+                  <span>B相:{{ scope.row.lb }}A;</span>
+                  <span>C相:{{ scope.row.lc }}A</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="电压(V)" align="center" show-overflow-tooltip width="200">
+                <template slot-scope="scope">
+                  <span>A相:{{ scope.row.ua }}V;</span>
+                  <span>B相:{{ scope.row.ub }}V;</span>
+                  <span>C相:{{ scope.row.uc }}V</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="有功功率(kW)" align="center" show-overflow-tooltip width="250">
+                <template slot-scope="scope">
+                  <span>A相:{{ scope.row.pa }}kW;</span>
+                  <span>B相:{{ scope.row.pb }}kW;</span>
+                  <span>C相:{{ scope.row.pc }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="无功功率(kW)" align="center" show-overflow-tooltip width="250">
+                <template slot-scope="scope">
+                  <span>A相:{{ scope.row.qa }}kW;</span>
+                  <span>B相:{{ scope.row.qb }}kW;</span>
+                  <span>C相:{{ scope.row.qc }}kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="功率因素" align="center" prop="pf" width="100"/>
+            </el-table>
+            <BaseChart v-else width="100%" height="400px" :option="powerLineOptions"/>
+          </el-card>
+          <el-card style="margin-top: 10px;">
+            <div style="display: flex;justify-content: space-between;">
+              <SubTitle :title="`峰值功率-日【${selectedLabel}】`"/>
+              <el-date-picker v-model="maxPowerDate" type="daterange" @change="getDayMaxLoad"
+                              :picker-options="pickerOptions" value-format="yyyy-MM-dd" range-separator="至"
+                              start-placeholder="开始日期"
+                              end-placeholder="结束日期" align="right" :clearable="false">
+              </el-date-picker>
+            </div>
+            <BaseChart width="100%" height="400px" :option="maxLoadLineOptions"/>
           </el-card>
 
         </div>
@@ -84,13 +118,17 @@
 
 
 <script>
-import {getPowerData, getPowerMaxLoad, getPowerDayMaxLoad} from '@/api/mgr/elecUseH'
-import { areaTreeByFacsCategory } from '@/api/basecfg/area'
+import {getPowerData, getPowerDayMaxLoad, getPowerMaxLoad} from '@/api/mgr/elecUseH'
+import {areaTreeByFacsCategory} from '@/api/basecfg/area'
 import BaseChart from '@/components/BaseChart'
 import SubTitle from '@/components/SubTitle'
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import {dateFormat, getDayAgoDate} from '@/utils'
+import dayjs from 'dayjs'
+import {listByFacs} from "@/api/device/elecMeterH";
+import {DateTool} from "@/utils/DateTool";
+
 export default {
   name: 'Comsume',
   components: {
@@ -98,10 +136,11 @@ export default {
     BaseChart,
     SubTitle
   },
-  data () {
+  data() {
     const lastWeek = dateFormat(getDayAgoDate(7), 'yyyy-MM-dd')
     const nowDay = dateFormat(new Date(), 'yyyy-MM-dd')
     return {
+
       // 遮罩层
       facsCategory: 'Z',
       facsSubCategory: '',
@@ -113,13 +152,15 @@ export default {
       selectedLabel: '',
       // 查询参数
       queryParams: {
-        areaCode: ''
+        areaCode: '',
+        facsCategory: 'Z',
       },
+      selectedTimeRange: "day",
       pickerOptions: {
         shortcuts: [
           {
             text: '最近一周',
-            onClick (picker) {
+            onClick(picker) {
               const end = new Date()
               const start = new Date()
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
@@ -127,7 +168,7 @@ export default {
             }
           }, {
             text: '最近一个月',
-            onClick (picker) {
+            onClick(picker) {
               const end = new Date()
               const start = new Date()
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
@@ -135,7 +176,7 @@ export default {
             }
           }, {
             text: '最近三个月',
-            onClick (picker) {
+            onClick(picker) {
               const end = new Date()
               const start = new Date()
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
@@ -144,6 +185,7 @@ export default {
           }
         ]
       },
+      pieDateRange: [dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00), dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59)],
       // 表单参数
       areaOptions: [],
       dateRange: [`${lastWeek} 00:00:00`, `${nowDay} 23:59:59`],
@@ -160,11 +202,60 @@ export default {
       powerChartData: [],
       powerMaxLoad: '',
       maxPowerDate: [`${lastWeek} 00:00:00`, `${nowDay} 23:59:59`],
-      maxLoadData: []
+      maxLoadData: [],
+      sumBySubCategoryChartOption: []
     }
   },
   computed: {
-    powerLineOptions () {
+    powerUseOptions() {
+      const xAxisData = this.sumBySubCategoryChartOption.map(item => item.name);
+      const yData2 = this.sumBySubCategoryChartOption.map(item => item.value);
+      return {
+        toolbox: {
+          itemGap: 10,
+          itemSize: 16,
+          right: 10,
+          top: 0,
+          show: true,
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          formatter: (params) => {
+            var relVal = params[0].name
+            for (var i = 0, l = params.length; i < l; i++) {
+              const unit = 'kW·h'
+              relVal = `${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
+            }
+            return relVal
+          }
+        },
+        legend: {},
+        xAxis: {
+          type: 'category',
+          data: xAxisData
+        },
+        yAxis: {
+          name: 'kW·h',
+          type: 'value',
+        },
+        series: [
+          {
+            name: '能耗',
+            type: 'bar',
+            data: yData2,
+            label: {
+              show: true, // 显示数值
+              position: 'top', // 数值显示的位置，可选：'inside', 'top', 'bottom', 'left', 'right'
+              valueAnimation: true, // 开启动画显示数值
+              formatter: '{c}' // 格式化显示内容，{c} 表示数据值
+            }
+          },]
+      };
+    },
+    powerLineOptions() {
       const xAxisData = this.powerChartData.map(item => `${item.date.substr(5)} ${item.time.substr(0, 5)} `);
       const yData1 = this.powerChartData.map(item => parseFloat(item.s).toFixed(2));
       const yData2 = this.powerChartData.map(item => item.p);
@@ -195,13 +286,12 @@ export default {
             var relVal = params[0].name
             for (var i = 0, l = params.length; i < l; i++) {
               const unit = 'kW'
-              relVal =`${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
+              relVal = `${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
             }
             return relVal
           }
         },
-        legend: {
-        },
+        legend: {},
         xAxis: {
           type: 'category',
           data: xAxisData
@@ -267,19 +357,19 @@ export default {
             ]
           },
         },
-        {
-          name: '有功功率',
-          type: 'line',
-          data: yData2,
-        },
-        {
-          name: '无功功率',
-          type: 'line',
-          data: yData3,
-        },]
+          {
+            name: '有功功率',
+            type: 'line',
+            data: yData2,
+          },
+          {
+            name: '无功功率',
+            type: 'line',
+            data: yData3,
+          },]
       };
     },
-    maxLoadLineOptions () {
+    maxLoadLineOptions() {
       const xAxisData = this.maxLoadData.map(item => item.date);
       const yData1 = this.maxLoadData.map(item => parseFloat(item.s).toFixed(2));
       const yData2 = this.maxLoadData.map(item => item.p);
@@ -310,13 +400,12 @@ export default {
             var relVal = params[0].name
             for (var i = 0, l = params.length; i < l; i++) {
               const unit = 'kW'
-              relVal =`${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
+              relVal = `${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
             }
             return relVal
           }
         },
-        legend: {
-        },
+        legend: {},
         xAxis: {
           type: 'category',
           data: xAxisData
@@ -347,36 +436,37 @@ export default {
           type: 'line',
           data: yData1,
         },
-        {
-          name: '有功功率',
-          type: 'line',
-          data: yData2,
-        },
-        {
-          name: '无功功率',
-          type: 'line',
-          data: yData3,
-        },]
+          {
+            name: '有功功率',
+            type: 'line',
+            data: yData2,
+          },
+          {
+            name: '无功功率',
+            type: 'line',
+            data: yData3,
+          },]
       };
     },
 
   },
   watch: {
     // 根据名称筛选区域树
-    areaName (val) {
+    areaName(val) {
       this.$refs.tree.filter(val)
     }
   },
-  async created () {
+  async created() {
     await this.getAreaList()
     this.getPowerChart()
     this.getDayMaxLoad()
+    this.getSumBySubCategoryH();
   },
   methods: {
-    btnChange (item) {
+    btnChange(item) {
       this.activeBtn = item.name
     },
-    getPowerChart () {
+    getPowerChart() {
       this.powerMaxLoad = ''
       this.powerChartData = []
       const [startRecTime, endRecTime] = this.dateRange
@@ -401,7 +491,7 @@ export default {
         }
       })
     },
-    getDayMaxLoad () {
+    getDayMaxLoad() {
       const [startRecTime, endRecTime] = this.maxPowerDate
       getPowerDayMaxLoad({
         startRecTime,
@@ -415,7 +505,7 @@ export default {
       })
     },
     // 查询区域列表
-    async getAreaList () {
+    async getAreaList() {
       await areaTreeByFacsCategory(this.facsCategory, this.facsSubCategory, false).then(response => {
         this.areaOptions = [{
           id: '-1',
@@ -427,17 +517,64 @@ export default {
       })
     },
     // 筛选节点
-    filterNode (value, data) {
+    filterNode(value, data) {
       if (!value) return true
       return data.label.indexOf(value) !== -1
     },
     // 节点单击事件
-    handleNodeClick (data) {
+    handleNodeClick(data) {
       this.queryParams.areaCode = data.id
       this.selectedLabel = data.label
       this.getPowerChart()
       this.getDayMaxLoad()
     },
+    changeTimeRange(rangeType) {
+      this.selectedTimeRange = rangeType;
+      let start = dayjs();
+      let end = dayjs();
+
+      if (rangeType === 'day') {
+        // 日：当前日期的 00:00:00 到 23:59:59
+        start = start.startOf('day');
+        end = end.endOf('day');
+      } else if (rangeType === 'month') {
+        // 月：当前月份的第一天 00:00:00 到 最后一天 23:59:59
+        start = start.date(1).hour(0).minute(0).second(0);
+        end = end.endOf('month').hour(23).minute(59).second(59);
+      } else if (rangeType === 'year') {
+        // 年：当前年份的第一天 00:00:00 到 最后一天 23:59:59
+        start = start.startOf('year');
+        end = end.endOf('year').hour(23).minute(59).second(59);
+      }
+      this.pieDateRange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
+      this.getSumBySubCategoryH(); // 重新获取数据
+    },
+    getSumBySubCategoryH() {
+      const params = {
+        startRecTime: dayjs(this.pieDateRange[0]).format('YYYY-MM-DD HH:mm:ss'),
+        endRecTime: dayjs(this.pieDateRange[1]).format('YYYY-MM-DD HH:mm:ss'),
+        areaCode: this.queryParams.areaCode,
+        meterCls: 45,
+        facsCategory: this.queryParams.facsCategory,
+      };
+      listByFacs(params).then(response => {
+        this.tableData = response.data.map(item => ({
+          name: item.objName,
+          value: item.quantity || 0
+        }))
+        this.processDataForChart(response.data); // 处理数据并生成图表配置
+      })
+
+    },
+    processDataForChart(data) {
+      this.totalElecQuantity = data.reduce((sum, item) => sum + (item.quantity || 0), 0);
+      // 处理数据，生成图表配置
+      this.sumBySubCategoryChartOption = data.map(item => ({
+        name: item.objName,
+        value: item.quantity || 0,
+        percent: ((item.quantity || 0) / this.totalElecQuantity * 100).toFixed(2),
+      }))
+    },
   }
 }
 </script>
@@ -456,4 +593,17 @@ export default {
   justify-content: flex-end;
   margin: 10px 0;
 }
+
+.first-content {
+  display: flex;
+  margin-top: 20px;
+
+  > div:first-child {
+    flex: 3;
+  }
+
+  > div:last-child {
+    flex: 2;
+  }
+}
 </style>