* 碳排计量趋势

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

@@ -15,6 +15,10 @@ export const DateTool = {
     YYYY_MM_DD_00_00_00: 'YYYY-MM-DD 00:00:00',
     YYYY_MM_DD_23_59_59: 'YYYY-MM-DD 23:59:59',
     MM_DD: 'MM-DD',
+
+    YYYY_MM_01_00_00_00: 'YYYY-MM-01 00:00:00',
+    YYYY_01_01_00_00_00: "YYYY-01-01 00:00:00"
+
   },
   /**
    * 获取当天时间刻度

ems-ui-cloud/src/views/analysis/report/statement-consume.vue

@@ -48,6 +48,13 @@
             </el-date-picker>
           </el-form-item>
           <el-form-item>
+            <el-radio-group v-model="tabPosition">
+              <el-radio-button label="day">日</el-radio-button>
+              <el-radio-button label="month">月</el-radio-button>
+              <el-radio-button label="year">年</el-radio-button>
+            </el-radio-group>
+          </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-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
@@ -91,6 +98,7 @@ import { areaTreeSelect } from '@/api/basecfg/area'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { listAreaMeter, listFacsMeter } from '@/api/device/elecMeterH'
+import {DateTool} from "@/utils/DateTool";
 
 export default {
   name: 'consume',
@@ -110,6 +118,7 @@ export default {
       },
       // 总条数
       total: 0,
+      tabPosition: 'month',
       consumeList: [],
       // 查询参数
       queryParams: {
@@ -165,7 +174,26 @@ export default {
     this.getAreaList()
     this.getConsumeList()
   },
-  watch: {},
+  watch: {
+    // 根据名称筛选区域树
+    tabPosition(val) {
+      if (!val) {
+        return;
+      }
+      if (val === 'day') {
+        this.queryParams.startRecTime = DateTool.now(DateTool.DateFormat.YYYY_MM_DD_00_00_00);
+        this.queryParams.endRecTime = DateTool.now(DateTool.DateFormat.YYYY_MM_DD_23_59_59);
+      }
+      if (val === 'month') {
+        this.queryParams.startRecTime = DateTool.thisMonth(DateTool.DateFormat.YYYY_MM_01_00_00_00);
+        this.queryParams.endRecTime = DateTool.now(DateTool.DateFormat.YYYY_MM_DD_23_59_59);
+      }
+      if (val === 'year') {
+        this.queryParams.startRecTime = DateTool.thisYear(DateTool.DateFormat.YYYY_01_01_00_00_00);
+        this.queryParams.endRecTime = DateTool.now(DateTool.DateFormat.YYYY_MM_DD_23_59_59);
+      }
+    }
+  },
   methods: {
     tabClick() {
       this.clear()
@@ -340,6 +368,7 @@ export default {
 
     // 时间选择处理（增强版）
     handleTimeChange(field) {
+      this.tabPosition = ""
       if (this.queryParams[field]) {
         // 格式化时间
         this.queryParams[field] = this.formatDateTime(this.queryParams[field]);

ems-ui-cloud/src/views/analysis/report/statement-prod.vue

@@ -4,43 +4,53 @@
       <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;" />
+                   @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;"/>
         </div>
       </el-col>
       <el-col :span="20" :xs="24">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                 label-width="68px">
           <!-- 开始时间选择器 -->
           <el-form-item label="开始时间" prop="startRecTime">
             <el-date-picker
-              v-model="queryParams.startRecTime"
-              type="datetime"
-              value-format="yyyy-MM-dd HH:00:00"
-              :picker-options="startPickerOptions"
-              placeholder="请选择开始时间"
-              @change="handleTimeChange('startRecTime')">
+                v-model="queryParams.startRecTime"
+                type="datetime"
+                value-format="yyyy-MM-dd HH:00:00"
+                :picker-options="startPickerOptions"
+                placeholder="请选择开始时间"
+                @change="handleTimeChange('startRecTime')">
             </el-date-picker>
           </el-form-item>
 
           <!-- 结束时间选择器 -->
           <el-form-item label="结束时间" prop="endRecTime">
             <el-date-picker
-              v-model="queryParams.endRecTime"
-              type="datetime"
-              value-format="yyyy-MM-dd HH:00:00"
-              :picker-options="endPickerOptions"
-              placeholder="请选择结束时间"
-              @change="handleTimeChange('endRecTime')">
+                v-model="queryParams.endRecTime"
+                type="datetime"
+                value-format="yyyy-MM-dd HH:00:00"
+                :picker-options="endPickerOptions"
+                placeholder="请选择结束时间"
+                @change="handleTimeChange('endRecTime')">
             </el-date-picker>
           </el-form-item>
           <el-form-item>
+            <el-radio-group v-model="tabPosition">
+              <el-radio-button label="day">日</el-radio-button>
+              <el-radio-button label="month">月</el-radio-button>
+              <el-radio-button label="year">年</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item>
             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button type="warning" plain icon="el-icon-download" size="mini" v-hasPermi="['ems:EmsEcoD:export']" @click="handleExport">导出</el-button>
+            <el-button type="warning" plain icon="el-icon-download" size="mini" v-hasPermi="['ems:EmsEcoD:export']"
+                       @click="handleExport">导出
+            </el-button>
           </el-form-item>
         </el-form>
 
@@ -61,11 +71,11 @@
           <el-table-column label="上网收益(￥)" align="center" prop="upElecEarn"/>
         </el-table>
         <pagination
-          v-show="total>0"
-          :total="total"
-          :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize"
-          @pagination="getList"
+            v-show="total>0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
         />
       </el-col>
     </el-row>
@@ -73,8 +83,9 @@
 </template>
 
 <script>
-import { areaTreeByFacsCategory } from '@/api/basecfg/area'
+import {areaTreeByFacsCategory} from '@/api/basecfg/area'
 import {listPvSupplyH} from "@/api/mgr/pgSupplyH";
+import {DateTool} from "@/utils/DateTool";
 
 export default {
   name: "EmsEcoD",
@@ -110,6 +121,7 @@ export default {
         children: "children",
         label: "label"
       },
+      tabPosition: 'month',
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -149,8 +161,8 @@ export default {
             endDateLimit.setHours(23, 59, 59);
 
             return time.getTime() < startDate.getTime() ||
-              time.getTime() > endDateLimit.getTime() ||
-              time.getTime() > Date.now() - 8.64e7;
+                time.getTime() > endDateLimit.getTime() ||
+                time.getTime() > Date.now() - 8.64e7;
           }
           // 禁用未来时间和超过90天前的时间
           const ninetyDaysAgo = new Date();
@@ -161,6 +173,26 @@ export default {
       }
     };
   },
+  watch: {
+    // 根据名称筛选区域树
+    tabPosition(val) {
+      if (!val) {
+        return;
+      }
+      if (val === 'day') {
+        this.queryParams.startRecTime = DateTool.now(DateTool.DateFormat.YYYY_MM_DD_00_00_00);
+        this.queryParams.endRecTime = DateTool.now(DateTool.DateFormat.YYYY_MM_DD_23_59_59);
+      }
+      if (val === 'month') {
+        this.queryParams.startRecTime = DateTool.thisMonth(DateTool.DateFormat.YYYY_MM_01_00_00_00);
+        this.queryParams.endRecTime = DateTool.now(DateTool.DateFormat.YYYY_MM_DD_23_59_59);
+      }
+      if (val === 'year') {
+        this.queryParams.startRecTime = DateTool.thisYear(DateTool.DateFormat.YYYY_01_01_00_00_00);
+        this.queryParams.endRecTime = DateTool.now(DateTool.DateFormat.YYYY_MM_DD_23_59_59);
+      }
+    }
+  },
   created() {
     // 初始化时间格式
     if (this.queryParams.startRecTime) {
@@ -183,7 +215,7 @@ export default {
       })
     },
     // 查询区域列表
-    async getAreaList () {
+    async getAreaList() {
       await areaTreeByFacsCategory(this.facsCategory, this.facsSubCategory, false).then(response => {
         this.areaOptions = [{
           id: '-1',
@@ -207,12 +239,13 @@ export default {
 
     // 时间选择处理
     handleTimeChange(field) {
+      this.tabPosition = ""
       if (this.queryParams[field]) {
         const date = new Date(this.queryParams[field])
         // 手动格式化日期（替代moment.js）
         const formatDate = (d) => {
           const pad = (n) => String(n).padStart(2, '0')
-          return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:00:00`
+          return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:00:00`
         }
         this.queryParams[field] = formatDate(date)
       }
@@ -288,12 +321,12 @@ export default {
       return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
     },
     // 筛选节点
-    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.getList()