* 碳排计量趋势

ems-ui-cloud/src/utils/DateTool.js

@@ -115,4 +115,10 @@ export const DateTool = {
   nearYearStartDay: (format = DateTool.DateFormat.YYYY_MM_DD) => {
     return dayjs().subtract(1, 'year').startOf('month').format(format);
   },
+  lastYearStartDay: (format = DateTool.DateFormat.YYYY_MM_DD) => {
+    return dayjs().subtract(1, 'year').startOf('year').format(format);
+  },
+  lastMonthStartDay: (format = DateTool.DateFormat.YYYY_MM_DD) => {
+    return dayjs().subtract(1, 'month').startOf('month').format(format);
+  },
 };

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

@@ -31,7 +31,6 @@
             </div>
             <div class="first-content">
               <div>
-                <SubTitle title="能耗统计"/>
                 <!-- 图表容器 -->
                 <BaseChart width="100%" height="380px" :option="powerUseOptions"/>
               </div>
@@ -115,7 +114,7 @@ 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 {array2Map, dateFormat, getDayAgoDate} from '@/utils'
 import dayjs from 'dayjs'
 import {listByFacs} from "@/api/device/elecMeterH";
 import {DateTool} from "@/utils/DateTool";
@@ -176,7 +175,12 @@ export default {
           }
         ]
       },
-      pieDateRange: [dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00), dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59)],
+      pieDateRange: [
+        dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00),
+        dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59),
+        DateTool.lastXDay(1, DateTool.DateFormat.YYYY_MM_DD_00_00_00),
+        DateTool.lastXDay(1, DateTool.DateFormat.YYYY_MM_DD_23_59_59)
+      ],
       // 表单参数
       areaOptions: [],
       dateRange: [`${lastWeek} 00:00:00`, `${nowDay} 23:59:59`],
@@ -201,6 +205,7 @@ export default {
     powerUseOptions() {
       const xAxisData = this.sumBySubCategoryChartOption.map(item => item.name);
       const yData2 = this.sumBySubCategoryChartOption.map(item => item.value);
+      const ratios = this.sumBySubCategoryChartOption.map(item => item.ratio);
       return {
         toolbox: {
           itemGap: 10,
@@ -217,21 +222,45 @@ export default {
           formatter: (params) => {
             var relVal = params[0].name
             for (var i = 0, l = params.length; i < l; i++) {
-              const unit = 'kW·h'
+              const unit = i === 0 ? 'kW·h' : "%"
               relVal = `${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
             }
             return relVal
           }
         },
-        legend: {},
+        legend: {
+          data: ["设施能耗", "同比"],
+        },
         xAxis: {
+          splitLine: {
+            show: false,
+          },
           type: 'category',
           data: xAxisData
         },
-        yAxis: {
-          name: 'kW·h',
-          type: 'value',
+        yAxis: [{
+          type: "value",
+          name: "kW·h",
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: '#334E5E'
+            }
+          },
         },
+          {
+            type: "value",
+            name: "%",
+            position: "right",
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              formatter: "{value} %", //右侧Y轴文字显示
+            }
+          },
+        ],
         series: [
           {
             name: '能耗',
@@ -243,7 +272,26 @@ export default {
               valueAnimation: true, // 开启动画显示数值
               formatter: '{c}' // 格式化显示内容，{c} 表示数据值
             }
-          },]
+          },
+          {
+            name: "同比",
+            type: "line",
+            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+            smooth: true, //平滑曲线显示
+            itemStyle: {
+              color: (params) => {
+                return params.value > 0 ? '#F44336' : '#4CAF50'; // 绿色表示增长，红色表示下降
+              },
+              borderColor: "#000",
+              borderWidth: 3
+            },
+            lineStyle: {
+              color: (params) => {
+                return params.value > 0 ? '#F44336' : '#4CAF50';
+              }
+            },
+            data: ratios
+          }]
       };
     },
     powerLineOptions() {
@@ -524,24 +572,32 @@ export default {
       this.selectedTimeRange = rangeType;
       let start = dayjs();
       let end = dayjs();
-
+      let compareStart = dayjs();
+      let compareEnd = dayjs();
       if (rangeType === 'day') {
         // 日：当前日期的 00:00:00 到 23:59:59
         start = start.startOf('day');
         end = end.endOf('day');
+        compareStart = DateTool.lastXDay(1, DateTool.DateFormat.YYYY_MM_DD_00_00_00)
+        compareEnd = DateTool.lastXDay(1, DateTool.DateFormat.YYYY_MM_DD_23_59_59)
       } 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);
+        end = end.hour(23).minute(59).second(59);
+        compareStart = DateTool.lastMonthStartDay(DateTool.DateFormat.YYYY_MM_DD_00_00_00)
+        compareEnd = DateTool.lastXMonth(1, DateTool.DateFormat.YYYY_MM_DD_23_59_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);
+        end = end.hour(23).minute(59).second(59);
+        compareStart = DateTool.lastYearStartDay(DateTool.DateFormat.YYYY_MM_DD_00_00_00)
+        compareEnd = DateTool.lastXMonth(12, DateTool.DateFormat.YYYY_MM_DD_23_59_59)
       }
-      this.pieDateRange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
+      this.pieDateRange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss'), compareStart, compareEnd];
       this.getSumBySubCategoryH(); // 重新获取数据
     },
-    getSumBySubCategoryH() {
+    async getSumBySubCategoryH() {
+      const [, , compareStart, compareEnd] = this.pieDateRange
       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'),
@@ -549,19 +605,35 @@ export default {
         meterCls: 45,
         facsCategory: this.queryParams.facsCategory,
       };
-      listByFacs(params).then(response => {
-        this.processDataForChart(response.data); // 处理数据并生成图表配置
-      })
+      const {data} = await listByFacs(params)
 
+      const {data: compare} = await listByFacs({
+        ...params,
+        startRecTime: compareStart,
+        endRecTime: compareEnd,
+      })
+      const objMap = array2Map(compare, "objName")
+      this.processDataForChart(data, objMap);
     },
-    processDataForChart(data) {
+    processDataForChart(data, compare) {
       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),
-      }))
+      this.sumBySubCategoryChartOption = data.map(item => {
+        let ratio = 0;
+        let compareDataItem = 0;
+        let thisDataItem = item.quantity || 0;
+        const compareData = compare[item.objName]
+        if (compareData && compareData.quantity) {
+          compareDataItem = compareData.quantity
+        }
+        ratio = ((thisDataItem - compareDataItem) / compareDataItem * 100).toFixed(1)
+        return {
+          name: item.objName,
+          value: thisDataItem,
+          ratio: ratio,
+          percent: ((item.quantity || 0) / this.totalElecQuantity * 100).toFixed(2),
+        }
+      })
     },
   }
 }