态势界面优化

ems-ui/src/api/basecfg/area.js

@@ -78,3 +78,10 @@ export function areaWithFacsCategory(category, subCategory) {
     method: 'get'
   })
 }
+
+export function areaWithFacsCategoryAsTree(category, subCategory) {
+  return request({
+    url: '/ems/basecfg/area/listWithFacsCategoryAsTree?facsCategory=' + category + '&facsSubCategory=' + subCategory,
+    method: 'get'
+  })
+}

ems-ui/src/views/mgr/powergrid.vue

@@ -4,7 +4,7 @@
       <el-tab-pane label="总览" name="summery">
         <el-row type="flex" :gutter="20" style="margin-top: 20px">
           <el-col :span="12">
-            <PieChartBlock title="当日供电量（单位：kw·h）" :opt-cfg="elecQuantity" />
+            <PieChartBlock title="当日供电量（单位：kw·h）" :opt-cfg="elecQuantity"/>
           </el-col>
           <el-col :span="12">
             <PieChartBlock title="当日电费（单位：元）" :opt-cfg="elecCost"></PieChartBlock>
@@ -12,113 +12,143 @@
         </el-row>
         <el-row type="flex" :gutter="20" style="margin-top: 20px">
           <el-col :span="24">
-            <BarChartBlock title="当日供电量柱状图" :opt-cfg="pvSupplyIndex" />
+            <BarChartBlock title="当日供电量柱状图" :opt-cfg="pvSupplyIndex"/>
           </el-col>
         </el-row>
       </el-tab-pane>
       <el-tab-pane label="市电" name="first">
-        <div class="container-block">
-          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
-            <el-form-item label="服务区" prop="areaCode">
-              <el-select v-model="queryParams.areaCode" placeholder="请选择服务区" @change="handleQuery">
-                <el-option label="汇总" value="" />
-                <el-option v-for="item in areaOptions" :key="item.areaCode" :label="item.areaName"
-                  :value="item.areaCode" />
-              </el-select>
-            </el-form-item>
-          </el-form>
-          <BaseChart width="100%" height="300px" :option="elecOptions" />
-        </div>
-        <div class="container-block">
-          <div class="ctl-container">
-            <el-date-picker v-model="dateRange" type="datetimerange" @change="getList"
-              value-format="yyyy-MM-dd hh:mm:ss" :picker-options="pickerOptions" range-separator="至"
-              start-placeholder="开始日期" end-placeholder="结束日期" align="right">
-            </el-date-picker>
+        <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"
+            />
           </div>
-          <el-table v-loading="loading" :data="pgSupplyHList">
-            <el-table-column label="设施" align="center" prop="facsName" />
-            <el-table-column label="日期" align="center" prop="date" width="180">
-              <template slot-scope="scope">
-                <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="时间" align="center" prop="time">
-              <template slot-scope="scope">
-                <span>{{ scope.row.time }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="计量类型" align="center" prop="meterType">
-              <template slot-scope="scope">
-                <span>{{ getMeterTypeName(scope.row.meterType) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="单位电价(￥)" align="center" prop="meterUnitPrice" />
-            <el-table-column label="供电量(kW-h)" align="center" prop="useElecQuantity" />
-            <el-table-column label="供电电费(￥)" align="center" prop="useElecCost" />
-          </el-table>
-          <pagination :total="total" :page-size.sync="queryParams.pageSize" :page-sizes="[10, 20, 50]"
-            :page.sync="queryParams.pageNum" @pagination="getList" />
-        </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;"
+            />
+          </div>
+        </el-col>
+        <el-col :span="20" :xs="24">
+          <div class="container-block">
+            <el-form size="small" :inline="true" label-width="68px">
+              <el-form-item label="服务区">
+                <template slot-scope="scope">
+                  <span>{{ selectedLabel }}</span>
+                </template>
+              </el-form-item>
+            </el-form>
+            <BaseChart width="100%" height="300px" :option="elecOptions"/>
+          </div>
+          <div class="container-block">
+            <div class="ctl-container">
+              <el-date-picker v-model="dateRange" type="datetimerange" @change="getList"
+                              value-format="yyyy-MM-dd hh:mm:ss" :picker-options="pickerOptions" range-separator="至"
+                              start-placeholder="开始日期" end-placeholder="结束日期" align="right"
+              >
+              </el-date-picker>
+            </div>
+            <el-table v-loading="loading" :data="pgSupplyHList">
+              <el-table-column label="设施" align="center" prop="facsName"/>
+              <el-table-column label="日期" align="center" prop="date" width="180">
+                <template slot-scope="scope">
+                  <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="时间" align="center" prop="time">
+                <template slot-scope="scope">
+                  <span>{{ scope.row.time }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="计量类型" align="center" prop="meterType">
+                <template slot-scope="scope">
+                  <span>{{ getMeterTypeName(scope.row.meterType) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="单位电价(￥)" align="center" prop="meterUnitPrice"/>
+              <el-table-column label="供电量(kW-h)" align="center" prop="useElecQuantity"/>
+              <el-table-column label="供电电费(￥)" align="center" prop="useElecCost"/>
+            </el-table>
+            <pagination :total="total" :page-size.sync="queryParams.pageSize" :page-sizes="[10, 20, 50]"
+                        :page.sync="queryParams.pageNum" @pagination="getList"
+            />
+          </div>
+        </el-col>
       </el-tab-pane>
       <el-tab-pane label="光伏" name="second">
-        <div class="container-block">
-          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
-            <el-form-item label="服务区" prop="areaCode">
-              <el-select v-model="queryParams.areaCode" placeholder="请选择服务区" @change="handleQuery">
-                <el-option label="汇总" value="" />
-                <el-option v-for="item in areaOptions" :key="item.areaCode" :label="item.areaName"
-                  :value="item.areaCode" />
-              </el-select>
-            </el-form-item>
-          </el-form>
-          <BaseChart width="100%" height="300px" :option="pvOptions" />
-        </div>
-        <div class="container-block">
-          <div class="ctl-container">
-            <el-date-picker v-model="dateRange" type="datetimerange" @change="getList" :picker-options="pickerOptions"
-              value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
-              align="right">
-            </el-date-picker>
+        <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"
+            />
+          </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;"
+            />
+          </div>
+        </el-col>
+        <el-col :span="20" :xs="24">
+          <div class="container-block">
+            <el-form size="small" :inline="true" label-width="68px">
+              <el-form-item label="服务区">
+                <template slot-scope="scope">
+                  <span>{{ selectedLabel }}</span>
+                </template>
+              </el-form-item>
+            </el-form>
+            <BaseChart width="100%" height="300px" :option="pvOptions"/>
           </div>
-          <el-table v-loading="loading" :data="pvSupplyHList">
-            <el-table-column label="设施" align="center" prop="facsName" />
-            <el-table-column label="日期" align="center" prop="date" width="180">
-              <template slot-scope="scope">
-                <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="时间" align="center" prop="time">
-              <template slot-scope="scope">
-                <span>{{ scope.row.time }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="总发电量(kW-h)" align="center" prop="genElecQuantity" />
-            <el-table-column label="自用电量(kW-h)" align="center" prop="useElecQuantity" />
-            <el-table-column label="上网电量(kW-h)" align="center" prop="upElecQuantity" />
-            <el-table-column label="上网收益(￥)" align="center" prop="upElecEarn" />
-          </el-table>
-          <pagination :total="total" :page-size.sync="queryParams.pageSize" :page-sizes="[10, 20, 50]"
-            :page.sync="queryParams.pageNum" @pagination="getList" />
-        </div>
+          <div class="container-block">
+            <div class="ctl-container">
+              <el-date-picker v-model="dateRange" type="datetimerange" @change="getList" :picker-options="pickerOptions"
+                              value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期"
+                              end-placeholder="结束日期"
+                              align="right"
+              >
+              </el-date-picker>
+            </div>
+            <el-table v-loading="loading" :data="pvSupplyHList">
+              <el-table-column label="设施" align="center" prop="facsName"/>
+              <el-table-column label="日期" align="center" prop="date" width="180">
+                <template slot-scope="scope">
+                  <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="时间" align="center" prop="time">
+                <template slot-scope="scope">
+                  <span>{{ scope.row.time }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="总发电量(kW-h)" align="center" prop="genElecQuantity"/>
+              <el-table-column label="自用电量(kW-h)" align="center" prop="useElecQuantity"/>
+              <el-table-column label="上网电量(kW-h)" align="center" prop="upElecQuantity"/>
+              <el-table-column label="上网收益(￥)" align="center" prop="upElecEarn"/>
+            </el-table>
+            <pagination :total="total" :page-size.sync="queryParams.pageSize" :page-sizes="[10, 20, 50]"
+                        :page.sync="queryParams.pageNum" @pagination="getList"
+            />
+          </div>
+        </el-col>
       </el-tab-pane>
     </el-tabs>
-
   </div>
 </template>
 
 <script>
-import {ApiCode} from '@/api/apiEmums';
-import * as areaApi from '@/api/basecfg/area';
-import {areaWithFacsCategory} from '@/api/basecfg/area';
-import {get} from '@/api/commonApi';
-import {listPgSupplyH, listPvSupplyH} from '@/api/mgr/pgSupplyH';
-import BaseChart from '@/components/BaseChart';
-import BarChartBlock from '@/components/Block/charts/BarChartBlock.vue';
-import PieChartBlock from '@/components/Block/charts/PieChartBlock.vue';
-import {DateTool} from '@/utils/DateTool';
-import dayjs from 'dayjs';
-import data from "@/views/system/dict/data.vue";
+import { ApiCode } from '@/api/apiEmums'
+import { areaWithFacsCategoryAsTree } from '@/api/basecfg/area'
+import { get } from '@/api/commonApi'
+import { listPgSupplyH, listPvSupplyH } from '@/api/mgr/pgSupplyH'
+import BaseChart from '@/components/BaseChart'
+import BarChartBlock from '@/components/Block/charts/BarChartBlock.vue'
+import PieChartBlock from '@/components/Block/charts/PieChartBlock.vue'
+import { DateTool } from '@/utils/DateTool'
+import dayjs from 'dayjs'
 
 export default {
   name: 'PgSupplyH',
@@ -126,9 +156,9 @@ export default {
   components: {
     BarChartBlock,
     PieChartBlock,
-    BaseChart,
+    BaseChart
   },
-  data () {
+  data() {
     return {
       activeName: 'summery',
       // 遮罩层
@@ -137,15 +167,21 @@ export default {
       total: 0,
       facsCategory: '',
       facsSubCategory: '',
+      areaName: undefined,
+      selectedLabel: '全部',
       pgSupplyHList: [],
       pgSupplyTodayList: [],
       pvSupplyHList: [],
       pvSupplyTodayList: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
       // 查询参数
       queryParams: {
-        areaCode: '',
+        areaCode: 'all',
         startRecTime: dayjs().subtract(1, 'month').format(DateTool.DateFormat.YYYY_MM_DD_HH_mm),
-        endRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_HH_mm),
+        endRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_HH_mm)
       },
       areaOptions: [],
       elecData: [],
@@ -154,91 +190,91 @@ export default {
         shortcuts: [
           {
             text: '最近一周',
-            onClick (picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            },
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', [start, end])
+            }
           }, {
             text: '最近一个月',
-            onClick (picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            },
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+              picker.$emit('pick', [start, end])
+            }
           }, {
             text: '最近三个月',
-            onClick (picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            },
-          },
-        ],
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+              picker.$emit('pick', [start, end])
+            }
+          }
+        ]
       },
       elecQuantity: {
         series: [
           {
             type: 'pie',
-            data: [],
-          },
-        ],
+            data: []
+          }
+        ]
       },
       elecCost: {
         series: [
           {
             type: 'pie',
-            data: [],
-          },
-        ],
+            data: []
+          }
+        ]
       },
       pvSupplyIndex: {
         unit: '  ',
         xAxis: {
           type: 'category',
-          data: [],
+          data: []
         },
-        series: [],
-      },
-    };
+        series: []
+      }
+    }
   },
   computed: {
-    elecOptions () {
-      const xData = this.pgSupplyTodayList.map(item => item.time);
-      const quantity = this.pgSupplyTodayList.map(item => item.useElecQuantity);
-      const cost = this.pgSupplyTodayList.map(item => item.useElecCost);
+    elecOptions() {
+      const xData = this.pgSupplyTodayList.map(item => item.time)
+      const quantity = this.pgSupplyTodayList.map(item => item.useElecQuantity)
+      const cost = this.pgSupplyTodayList.map(item => item.useElecCost)
       const option = {
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'cross',
             crossStyle: {
-              color: '#999',
-            },
-          },
+              color: '#999'
+            }
+          }
         },
         legend: {
-          data: ['供电量', '供电电费'],
+          data: ['供电量', '供电电费']
         },
         xAxis: {
           type: 'category',
           data: xData.reverse(),
           axisPointer: {
-            type: 'shadow',
-          },
+            type: 'shadow'
+          }
         },
         yAxis: [
           {
             name: 'kW-h（千瓦时）',
-            type: 'value',
+            type: 'value'
           },
           {
             name: '￥（元）',
-            type: 'value',
-          },
+            type: 'value'
+          }
         ],
         series: [
           {
@@ -248,9 +284,9 @@ export default {
             barWidth: 30,
             itemStyle: {
               normal: {
-                color: '#6395FA',
-              },
-            },
+                color: '#6395FA'
+              }
+            }
           },
           {
             name: '用电电费',
@@ -260,44 +296,44 @@ export default {
             showSymbol: true,
             itemStyle: {
               normal: {
-                color: '#5BD9A5',
-              },
-            },
-          },
-        ],
-      };
-      return option;
+                color: '#5BD9A5'
+              }
+            }
+          }
+        ]
+      }
+      return option
     },
-    pvOptions () {
+    pvOptions() {
       const option = {
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'cross',
             crossStyle: {
-              color: '#999',
-            },
-          },
+              color: '#999'
+            }
+          }
         },
         legend: {
-          data: ['自用电量', '上网电量', '上网收益'],
+          data: ['自用电量', '上网电量', '上网收益']
         },
         xAxis: {
           type: 'category',
           data: this.pvSupplyTodayList.map(item => item.time).reverse(),
           axisPointer: {
-            type: 'shadow',
-          },
+            type: 'shadow'
+          }
         },
         yAxis: [
           {
             name: 'kW-h（千瓦时）',
-            type: 'value',
+            type: 'value'
           },
           {
             name: '￥（元）',
-            type: 'value',
-          },
+            type: 'value'
+          }
         ],
         series: [
           {
@@ -307,7 +343,7 @@ export default {
             barWidth: 30,
             label: {
               show: false,
-              position: 'insideRight',
+              position: 'insideRight'
             },
             data: this.pvSupplyTodayList.map(item => item.useElecQuantity).reverse(),
             itemStyle: {
@@ -320,11 +356,11 @@ export default {
                     // 数值样式
                     color: '#000',
                     fontSize: 14,
-                    fontWeight: 600,
-                  },
-                },
-              },
-            },
+                    fontWeight: 600
+                  }
+                }
+              }
+            }
           },
           {
             name: '上网电量',
@@ -333,7 +369,7 @@ export default {
             barWidth: 30,
             label: {
               show: false,
-              position: 'insideRight',
+              position: 'insideRight'
             },
             data: this.pvSupplyTodayList.map(item => item.upElecQuantity).reverse(),
             itemStyle: {
@@ -346,119 +382,112 @@ export default {
                     // 数值样式
                     color: '#000',
                     fontSize: 14,
-                    fontWeight: 600,
-                  },
-                },
-              },
-            },
+                    fontWeight: 600
+                  }
+                }
+              }
+            }
           },
           {
             name: '上网收益',
             type: 'line',
             yAxisIndex: 1,
             data: this.pvSupplyTodayList.map(item => item.upElecEarn).reverse(),
-            smooth: false,
-          },
-        ],
-      };
-      return option;
-    },
+            smooth: false
+          }
+        ]
+      }
+      return option
+    }
   },
-  async created () {
-    await this.getAreaList();
-    await this.getSummery();
+  watch: {
+    // 根据名称筛选区域树
+    areaName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  async created() {
+    await this.getSummery()
   },
   methods: {
-    // 查询区域列表
-    async getAreaList () {
-      const {
-        rows,
-        total,
-      } = await areaApi.listArea({
-        pageNum: 1,
-        pageSize: 10,
-      });
-      console.log("列表!!!!!!!!!!!!!!", rows)
-      this.areaOptions = rows;
-    },
-    tabClick () {
+    tabClick() {
       if (this.activeName !== 'summery') {
-        this.dateRange = [dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00), dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59)];
-        this.queryParams.areaCode = ''
+        this.dateRange = [dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00), dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59)]
+        this.queryParams.areaCode = 'all'
         this.queryParams.pageNum = 1
+        this.selectedLabel = '全部'
         this.getTodayList()
-        this.getList();
+        this.getList()
       } else {
-        this.getSummery();
+        this.getSummery()
       }
     },
-    async getSummery () {
-      await this.getHSummery();
-      await this.getThisDaySummery();
+    async getSummery() {
+      await this.getHSummery()
+      await this.getThisDaySummery()
     },
-    async getThisDaySummery () {
+    async getThisDaySummery() {
       const {
         data,
-        code,
-      } = await get('pg/supply/hour/summery/this/day');
+        code
+      } = await get('pg/supply/hour/summery/this/day')
       if (ApiCode.SUCCESS !== code || !data) {
-        this.elecQuantity.series[0].data = [];
-        this.elecCost.series[0].data = [];
-        return;
+        this.elecQuantity.series[0].data = []
+        this.elecCost.series[0].data = []
+        return
       }
       const {
         pv,
-        supply,
-      } = data;
+        supply
+      } = data
       this.elecQuantity.series[0].data = [
         {
           value: supply?.quantity,
           name: '市电',
           itemStyle: {
-            color: '#6395FA',
-          },
+            color: '#6395FA'
+          }
 
         },
         {
           value: pv?.useQuantity,
           name: '光伏',
           itemStyle: {
-            color: '#8CDF6C',
-          },
-        },
-      ];
-
+            color: '#8CDF6C'
+          }
+        }
+      ]
       this.elecCost.series[0].data = [
         {
           value: supply?.cost,
           name: '实际电费',
           itemStyle: {
-            color: '#6395FA',
-          },
+            color: '#6395FA'
+          }
         },
         {
           value: pv?.upEarn,
           name: '节省电费',
           itemStyle: {
-            color: '#8CDF6C',
-          },
-        },
-      ];
+            color: '#8CDF6C'
+          }
+        }
+      ]
 
     },
-    async getHSummery () {
+    async getHSummery() {
       const {
         data,
-        code,
-      } = await get('pg/supply/hour/summery/h');
+        code
+      } = await get('pg/supply/hour/summery/h')
       if (ApiCode.SUCCESS !== code || !data || data.length < 1) {
-        return;
+        return
       }
-      const xaxis = DateTool.getTime(60);
+      const xaxis = DateTool.getTime(60)
       const {
         supply,
-        pv,
-      } = data;
+        pv
+      } = data
       const series = [
         {
           name: '市电',
@@ -466,8 +495,8 @@ export default {
           barWidth: '30%', // 调整柱状图宽度
           data: [],
           itemStyle: {
-            color: '#6395FA',
-          },
+            color: '#6395FA'
+          }
         },
         {
           name: '光伏',
@@ -475,59 +504,66 @@ export default {
           barWidth: '30%', // 调整柱状图宽度
           data: [],
           itemStyle: {
-            color: '#8CDF6C',
-          },
-        },
+            color: '#8CDF6C'
+          }
+        }
 
-      ];
+      ]
       xaxis.forEach((item, index) => {
-        let timeIndex = index + 1;
+        let timeIndex = index + 1
         if (!pv || !pv[timeIndex]) {
-          series[1].data.push(0);
+          series[1].data.push(0)
         } else {
-          series[1].data.push(pv[timeIndex].useQuantity);
+          series[1].data.push(pv[timeIndex].useQuantity)
         }
         if (!supply || !supply[timeIndex]) {
-          series[0].data.push(0);
+          series[0].data.push(0)
         } else {
-          series[0].data.push(supply[timeIndex].quantity);
+          series[0].data.push(supply[timeIndex].quantity)
         }
-      });
-      this.pvSupplyIndex.series = series;
-      this.pvSupplyIndex.xAxis.data = xaxis;
+      })
+      this.pvSupplyIndex.series = series
+      this.pvSupplyIndex.xAxis.data = xaxis
     },
-    getTodayList () {
+    getTodayList() {
       if (this.activeName === 'first') {
-        areaWithFacsCategory('W', this.facsSubCategory).then(response => {
-          this.areaOptions = response.data
+        areaWithFacsCategoryAsTree('W', this.facsSubCategory).then(response => {
+          this.areaOptions = [{
+            id: 'all',
+            label: '全部',
+            children: response.data
+          }]
         })
         listPgSupplyH({
           startRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00),
           endRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59),
           areaCode: this.queryParams.areaCode,
           pageNum: 1,
-          pageSize: 999,
+          pageSize: 999
         }).then(response => {
-          this.pgSupplyTodayList = response.rows;
-        });
+          this.pgSupplyTodayList = response.rows
+        })
       } else {
-        areaWithFacsCategory('E', this.facsSubCategory).then(response => {
-          this.areaOptions = response.data
-          console.log("源网列表2222222", this.areaOptions)
+        areaWithFacsCategoryAsTree('E', this.facsSubCategory).then(response => {
+          this.areaOptions = [{
+            id: 'all',
+            label: '全部',
+            children: response.data
+          }]
         })
         listPvSupplyH({
           startRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00),
           endRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59),
           areaCode: this.queryParams.areaCode,
           pageNum: 1,
-          pageSize: 999,
+          pageSize: 999
         }).then(response => {
-          this.pvSupplyTodayList = response.rows;
-        });
+          this.pvSupplyTodayList = response.rows
+        })
       }
     },
-    getList () {
-      this.loading = true;
+    getList() {
+      this.loading = true
       this.queryParams.startRecTime = ''
       this.queryParams.endRecTime = ''
       if (this.dateRange && this.dateRange.length) {
@@ -537,37 +573,48 @@ export default {
       }
       if (this.activeName === 'first') {
         listPgSupplyH(this.queryParams).then(response => {
-          this.pgSupplyHList = response.rows;
-          console.log("rows", this.pgSupplyHList)
-          this.total = response.total;
-          this.loading = false;
-        });
+          this.pgSupplyHList = response.rows
+          console.log('rows', this.pgSupplyHList)
+          this.total = response.total
+          this.loading = false
+        })
       } else {
         listPvSupplyH(this.queryParams).then(response => {
-          this.pvSupplyHList = response.rows;
-          console.log("rows", this.pvSupplyHList)
-          this.total = response.total;
-          this.loading = false;
-        });
+          this.pvSupplyHList = response.rows
+          console.log('rows', this.pvSupplyHList)
+          this.total = response.total
+          this.loading = false
+        })
       }
     },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.areaCode = data.id
+      this.selectedLabel = data.label
+      this.handleQuery()
+    },
     /** 搜索按钮操作 */
-    handleQuery () {
+    handleQuery() {
       this.queryParams.pageNum = 1
       this.getTodayList()
-      this.getList();
+      this.getList()
     },
-    getMeterTypeName (meterType) {
+    getMeterTypeName(meterType) {
       const meterTypeMap = {
         '-1': '低谷电',
         '0': '平峰电',
         '1': '高峰点',
-        '2': '尖峰电',
-      };
-      return meterTypeMap[meterType] || '平峰电';
-    },
-  },
-};
+        '2': '尖峰电'
+      }
+      return meterTypeMap[meterType] || '平峰电'
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .app-container {

ems-ui/src/views/mgr/powerstore.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-tabs v-model="activeName" @tab-click="handleQuery">
+    <el-tabs v-model="activeName" @tab-click="tabClick">
       <el-tab-pane label="总览" name="summary">
         <div class="chartGroup">
           <Block title="当日充电量（单位：kw·h）">
@@ -9,7 +9,7 @@
                 <div>总充电量</div>
                 <div>{{ daySum.chargeElecQuantity }}kw·h</div>
               </div>
-              <BaseChart width="100%" height="500px" :option="chargePieOptions" />
+              <BaseChart width="100%" height="500px" :option="chargePieOptions"/>
             </div>
           </Block>
           <Block title="当日放电量（单位：kw·h）">
@@ -18,61 +18,81 @@
                 <div>总放电量</div>
                 <div>{{ daySum.dischargeElecQuantity }}kw·h</div>
               </div>
-              <BaseChart width="100%" height="500px" :option="disChargePieOptions" />
+              <BaseChart width="100%" height="500px" :option="disChargePieOptions"/>
             </div>
           </Block>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="区域" name="area">
-        <div class="container-block">
-          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
-            <el-form-item label="服务区" prop="areaCode">
-              <el-select v-model="queryParams.areaCode" placeholder="请选择服务区" @change="handleQuery">
-                <el-option v-for="item in areaOptions" :key="item.areaCode" :label="item.areaName"
-                  :value="item.areaCode" />
-              </el-select>
-            </el-form-item>
-          </el-form>
-          <BaseChart width="100%" height="300px" :option="elecOptions" />
-        </div>
-        <div class="container-block">
-          <div class="ctl-container">
-            <el-date-picker v-model="dateRange" type="datetimerange" @change="getList" :picker-options="pickerOptions"
-              value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
-              align="right">
-            </el-date-picker>
+      <el-tab-pane label="区域储能" name="area">
+        <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"
+            />
           </div>
-          <el-table v-loading="loading" :data="elecStoreHList" max-height="400px">
-            <el-table-column label="设施名称" align="center" prop="facsName" />
-            <el-table-column label="日期" align="center" prop="date" width="180">
-            </el-table-column>
-            <el-table-column label="时间" align="center" prop="time">
-            </el-table-column>
-            <el-table-column label="充电电量(kW-h)" align="center" prop="chargeElecQuantity" />
-            <el-table-column label="放电电量(kW-h)" align="center" prop="dischargeElecQuantity" />
-          </el-table>
-        </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;"
+            />
+          </div>
+        </el-col>
+        <el-col :span="20" :xs="24">
+          <div class="container-block">
+            <el-form size="small" :inline="true" label-width="68px">
+              <el-form-item label="服务区">
+                <template slot-scope="scope">
+                  <span>{{ selectedLabel }}</span>
+                </template>
+              </el-form-item>
+            </el-form>
+            <BaseChart width="100%" height="300px" :option="elecOptions"/>
+          </div>
+          <div class="container-block">
+            <div class="ctl-container">
+              <el-date-picker v-model="dateRange" type="datetimerange" @change="getList" :picker-options="pickerOptions"
+                              value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期"
+                              end-placeholder="结束日期"
+                              align="right"
+              >
+              </el-date-picker>
+            </div>
+            <el-table v-loading="loading" :data="elecStoreHList" max-height="400px">
+              <el-table-column label="设施名称" align="center" prop="facsName"/>
+              <el-table-column label="日期" align="center" prop="date" width="180">
+              </el-table-column>
+              <el-table-column label="时间" align="center" prop="time">
+              </el-table-column>
+              <el-table-column label="充电电量(kW-h)" align="center" prop="chargeElecQuantity"/>
+              <el-table-column label="放电电量(kW-h)" align="center" prop="dischargeElecQuantity"/>
+            </el-table>
+          </div>
+        </el-col>
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script>
-import {listElecStoreH, dayStatistics} from '@/api/mgr/elecStoreH'
-import {areaWithFacsCategory} from '@/api/basecfg/area'
+import { listElecStoreH, dayStatistics } from '@/api/mgr/elecStoreH'
+import { areaWithFacsCategoryAsTree } from '@/api/basecfg/area'
 import BaseChart from '@/components/BaseChart'
-import Block from '@/components/Block/block.vue';
-import {dateFormat} from '@/utils/index.js'
+import Block from '@/components/Block/block.vue'
+import { dateFormat } from '@/utils/index.js'
 import dayjs from 'dayjs'
-import {DateTool} from '@/utils/DateTool'
+import { DateTool } from '@/utils/DateTool'
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
 export default {
   name: 'ElecStoreH',
   components: {
+    Treeselect,
     BaseChart,
     Block
   },
-  data () {
+  data() {
     return {
       activeName: 'summary',
       // 遮罩层
@@ -81,38 +101,44 @@ export default {
       facsSubCategory: '',
       // 储能计量-小时表格数据
       elecStoreHList: [],
+      areaName: undefined,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      selectedLabel: '',
       // 查询参数
       queryParams: {
-        areaCode: null
+        areaCode: ''
       },
       pickerOptions: {
         shortcuts: [
           {
             text: '最近一周',
-            onClick (picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            },
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', [start, end])
+            }
           }, {
             text: '最近一个月',
-            onClick (picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            },
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+              picker.$emit('pick', [start, end])
+            }
           }, {
             text: '最近三个月',
-            onClick (picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            },
-          },
-        ],
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+              picker.$emit('pick', [start, end])
+            }
+          }
+        ]
       },
       // 表单参数
       areaOptions: [],
@@ -123,7 +149,7 @@ export default {
     }
   },
   computed: {
-    elecOptions () {
+    elecOptions() {
       const xData = this.todayList.map(item => item.time)
       const chargeQuantity = this.todayList.map(item => item.chargeElecQuantity)
       const dischargeQuantity = this.todayList.map(item => item.dischargeElecQuantity)
@@ -180,10 +206,10 @@ export default {
       }
       return option
     },
-    chargePieOptions () {
+    chargePieOptions() {
       return {
         tooltip: {
-          trigger: 'item',
+          trigger: 'item'
         },
         series: [
 
@@ -203,12 +229,12 @@ export default {
               }))
           }
         ]
-      };
+      }
     },
-    disChargePieOptions () {
+    disChargePieOptions() {
       return {
         tooltip: {
-          trigger: 'item',
+          trigger: 'item'
         },
         series: [
           {
@@ -226,33 +252,42 @@ export default {
             }))
           }
         ]
-      };
-    },
+      }
+    }
 
   },
-  async created () {
+  watch: {
+    // 根据名称筛选区域树
+    areaName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  async created() {
     this.facsCategory = 'C'
     await this.getAreaList()
-    this.handleQuery()
+    this.tabClick()
   },
   methods: {
     // 查询区域列表
-    async getAreaList () {
-      await areaWithFacsCategory(this.facsCategory, this.facsSubCategory).then(response => {
-        this.areaOptions = response.data
-        this.queryParams.areaCode = this.areaOptions[0].areaCode
+    async getAreaList() {
+      await areaWithFacsCategoryAsTree(this.facsCategory, this.facsSubCategory).then(response => {
+        this.areaOptions = [{
+          id: 'all',
+          label: '全部',
+          children: response.data
+        }]
       })
     },
     /** 查询储能计量-小时列表 */
-    getList () {
+    getList() {
       this.loading = true
-      const {areaCode} = this.queryParams
-      let startRecTime=''
+      const { areaCode } = this.queryParams
+      let startRecTime = ''
       let endRecTime = ''
-      if (this.dateRange&&this.dateRange.length) {
+      if (this.dateRange && this.dateRange.length) {
         const [start, end] = this.dateRange
-        startRecTime=start
-        endRecTime=end
+        startRecTime = start
+        endRecTime = end
       }
       listElecStoreH({
         areaCode,
@@ -266,8 +301,8 @@ export default {
         this.loading = false
       })
     },
-    getTodayChart () {
-      const {areaCode} = this.queryParams
+    getTodayChart() {
+      const { areaCode } = this.queryParams
       const nowDay = dateFormat(new Date(), 'yyyy-MM-dd')
       listElecStoreH({
         areaCode,
@@ -279,19 +314,33 @@ export default {
         this.todayList = response.rows
       })
     },
-    getSummary () {
-      dayStatistics({date: dateFormat(new Date(), 'yyyy-MM-dd')}).then(({code, data}) => {
+    getSummary() {
+      dayStatistics({ date: dateFormat(new Date(), 'yyyy-MM-dd') }).then(({ code, data }) => {
         if (code === 200) {
           this.hourSum = data.hourSum || []
           this.daySum = data.daySum || {}
         }
       })
     },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.areaCode = data.id
+      this.selectedLabel = data.label
+      this.handleQuery()
+    },
     /** 搜索按钮操作 */
-    handleQuery () {
-      if (this.activeName === "summary") {
+    tabClick() {
+      if (this.activeName === 'summary') {
         this.getSummary()
       } else {
+        this.selectedLabel= '全部'
+        this.queryParams.areaCode='all'
+        this.getAreaList()
         this.getTodayChart()
         this.getList()
       }
@@ -302,6 +351,7 @@ export default {
 
 <style lang="scss" scoped>
 @import './index.scss';
+
 .app-container {
   ::v-deep .el-tabs__content {
     overflow: initial;
@@ -311,7 +361,7 @@ export default {
 .chartGroup {
   display: flex;
 
-  >div {
+  > div {
     flex: 1;
 
   }

ems-ui/src/views/mgr/poweruse.vue

@@ -8,168 +8,73 @@
       <el-tab-pane v-for="item in facsCategoryOptions" :key="item.code" :label="item.name" :name="item.code">
         <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" />
+            <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small"
+                      prefix-icon="el-icon-search"
+                      style="margin-bottom: 20px"
+            />
           </div>
           <div class="head-container">
-            <el-tree ref="tree" :data="areaOptions"  />
+            <el-tree ref="tree" :data="areaOptions"/>
           </div>
         </el-col>
         <el-col :span="20" :xs="24">
+          <div class="container-block">
+            <div class="ctl-container">
+              <el-date-picker v-model="dateRange" type="datetimerange" @change="getList"
+                              value-format="yyyy-MM-dd hh:mm:ss" :picker-options="pickerOptions" range-separator="至"
+                              start-placeholder="开始日期" end-placeholder="结束日期" align="right"
+              >
+              </el-date-picker>
+            </div>
+            <el-row :gutter="10" class="mb8">
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
 
-        </el-col>
-      </el-tab-pane>
-
-    </el-tabs>
+            <el-table v-loading="loading" :data="hList" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="55" align="center"/>
+              <el-table-column label="园区" align="center" prop="areaShortName"/>
+              <el-table-column label="设施" align="center" prop="facsName"/>
+              <el-table-column label="设施类型" align="center" prop="facsCategory"/>
+              <el-table-column label="设施子类" align="center" prop="facsSubCategory"/>
+              <el-table-column label="日期" align="center" prop="date" width="180">
+                <template slot-scope="scope">
+                  <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="时间" align="center" prop="time">
+                <template slot-scope="scope">
+                  <span>{{ scope.row.time }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="时间序列" align="center" prop="timeIndex"/>
+              <el-table-column label="用电量(kW-h)" align="center" prop="elecQuantity"/>
+            </el-table>
 
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="园区代码" prop="areaCode">
-        <el-input
-          v-model="queryParams.areaCode"
-          placeholder="请输入园区代码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="设施代码" prop="facsCode">
-        <el-input
-          v-model="queryParams.facsCode"
-          placeholder="请输入设施代码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="日期" prop="date">
-        <el-date-picker clearable
-          v-model="queryParams.date"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择日期 yyyy-MM-dd">
-        </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>
+            <pagination
+              v-show="total>0"
+              :total="total"
+              :page.sync="queryParams.pageNum"
+              :limit.sync="queryParams.pageSize"
+              @pagination="getList"
+            />
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['ems:h:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['ems:h:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['ems:h:remove']"
-        >删除</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="hList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="园区" align="center" prop="areaShortName" />
-      <el-table-column label="设施" align="center" prop="facsName" />
-      <el-table-column label="设施类型" align="center" prop="facsCategory" />
-      <el-table-column label="设施子类" align="center" prop="facsSubCategory" />
-      <el-table-column label="日期" align="center" prop="date" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="时间" align="center" prop="time" >
-        <template slot-scope="scope">
-          <span>{{ scope.row.time }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="时间序列" align="center" prop="timeIndex" />
-      <el-table-column label="用电量(kW-h)" align="center" prop="elecQuantity" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text"  icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['ems:h:edit']">
-            修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['ems:h:remove']">
-            删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+          </div>
 
-    <!-- 添加或修改用能计量-小时对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="园区代码" prop="areaCode">
-          <el-input v-model="form.areaCode" placeholder="请输入园区代码" />
-        </el-form-item>
-        <el-form-item label="设施代码" prop="facsCode">
-          <el-input v-model="form.facsCode" placeholder="请输入设施代码" />
-        </el-form-item>
-        <el-form-item label="日期" prop="date">
-          <el-date-picker clearable
-            v-model="form.date"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择日期">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="时间" prop="time">
-          <el-time-picker v-model="form.time" format="HH:mm" value-format="HH:mm:00"
-                          :picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '100%'}"
-                          placeholder="请选择时间选择" clearable>
-          </el-time-picker>
-        </el-form-item>
-        <el-form-item label="时间序列" prop="timeIndex">
-          <el-input v-model="form.timeIndex" placeholder="请输入时间序列" />
-        </el-form-item>
-        <el-form-item label="用电量" prop="elecQuantity">
-          <el-input v-model="form.elecQuantity" placeholder="请输入用电量 单位：kW-h" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+        </el-col>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
-import { listH, getH, delH, addH, updateH } from "@/api/mgr/elecUseH";
+import { listH, getH, delH, addH, updateH } from '@/api/mgr/elecUseH'
 import { getFacsCategorygetByCode } from '@/api/basecfg/emsfacs'
-import { areaTreeSelect, areaTreeSelectByTag } from '@/api/basecfg/area'
+import { areaWithFacsCategoryAsTree } from '@/api/basecfg/area'
+import dayjs from 'dayjs'
+import { DateTool } from '@/utils/DateTool'
 
 export default {
-  name: "H",
+  name: 'H',
   data() {
     return {
       activeName: 'summery',
@@ -188,11 +93,45 @@ export default {
       // 用能计量-小时表格数据
       hList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
+      facsCategory: 'Z',
+      facsSubCategory: '',
+      // 区域名称
+      areaName: undefined,
       areaOptions: [],
-      facsCategoryOptions:[],
+      facsCategoryOptions: [],
+      dateRange: [dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00), dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59)],
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', [start, end])
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+              picker.$emit('pick', [start, end])
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+              picker.$emit('pick', [start, end])
+            }
+          }
+        ]
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -208,52 +147,65 @@ export default {
       // 表单校验
       rules: {
         areaCode: [
-          { required: true, message: "园区代码不能为空", trigger: "blur" }
+          { required: true, message: '园区代码不能为空', trigger: 'blur' }
         ],
         facsCode: [
-          { required: true, message: "设施代码不能为空", trigger: "blur" }
+          { required: true, message: '设施代码不能为空', trigger: 'blur' }
         ],
         date: [
-          { required: true, message: "日期 yyyy-MM-dd不能为空", trigger: "blur" }
+          { required: true, message: '日期 yyyy-MM-dd不能为空', trigger: 'blur' }
         ],
         time: [
-          { required: true, message: "时间 HH:mm不能为空", trigger: "blur" }
+          { required: true, message: '时间 HH:mm不能为空', trigger: 'blur' }
         ],
         timeIndex: [
-          { required: true, message: "时间序列不能为空", trigger: "blur" }
-        ],
+          { required: true, message: '时间序列不能为空', trigger: 'blur' }
+        ]
       }
-    };
+    }
+  },
+  watch: {
+    // 根据名称筛选区域树
+    areaName(val) {
+      this.$refs.tree.filter(val)
+    }
   },
   created() {
-    this.getFacsCategory('Z');
-    this.getAreaTree('Area')
-    this.getList();
+    this.getFacsCategory('Z')
+    this.getAreaTree(this.facsCategory, this.facsSubCategory)
+    this.getList()
   },
   methods: {
     /** 查询用能计量-小时列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listH(this.queryParams).then(response => {
-        this.hList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+        this.hList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
     },
     async getFacsCategory(code) {
       getFacsCategorygetByCode(code).then(response => {
         this.facsCategoryOptions = response.data.subtypeList
       })
     },
-    async getAreaTree(tier) {
-      await areaTreeSelect(tier).then(response => {
-        this.areaOptions = response.data
+    async getAreaTree(category, subCategory) {
+      await areaWithFacsCategoryAsTree(category, subCategory).then(response => {
+        this.areaOptions = [{
+          id: '',
+          label: '全部',
+          children: response.data
+        }]
       })
     },
+    tabClick() {
+
+    },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -266,75 +218,32 @@ export default {
         date: null,
         time: null,
         timeIndex: null,
-        elecQuantity: null,
-      };
-      this.resetForm("form");
+        elecQuantity: null
+      }
+      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.areaCode = data.id
+      this.selectedLabel = data.label
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加用能计量-小时";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids
-      getH(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改用能计量-小时";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateH(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addH(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除用能计量-小时编号为"' + ids + '"的数据项？').then(function() {
-        return delH(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
     }
-  },
-  tabClick () {
-
   }
 }
 </script>

ems-ui/src/views/mgr/strategy.vue

@@ -1,14 +1,7 @@
 <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="策略代码" prop="strategyCode">
-        <el-input
-            v-model="queryParams.strategyCode"
-            placeholder="请输入策略代码"
-            clearable
-            @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
+
       <el-form-item label="策略名称" prop="strategyName">
         <el-input
             v-model="queryParams.strategyName"
@@ -17,14 +10,6 @@
             @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="策略描述" prop="strategyDesc">
-        <el-input
-            v-model="queryParams.strategyDesc"
-            placeholder="请输入策略描述"
-            clearable
-            @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="策略类型" prop="strategyType">
         <el-select v-model="queryParams.strategyType" placeholder="请选择策略类型" clearable>
           <el-option
@@ -45,24 +30,6 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="执行规则" prop="execRule">
-        <el-input
-            v-model="queryParams.execRule"
-            placeholder="请输入执行规则"
-            clearable
-            @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="允许修改" prop="allowModify">
-        <el-select v-model="queryParams.allowModify" placeholder="请选择允许修改" clearable>
-          <el-option
-              v-for="dict in dict.type.allow_modify"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-          />
-        </el-select>
-      </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>
@@ -82,46 +49,11 @@
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-            type="success"
-            plain
-            icon="el-icon-edit"
-            size="mini"
-            :disabled="single"
-            @click="handleUpdate"
-            v-hasPermi="['ems:energyStrategy:edit']"
-        >修改
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="danger"
-            plain
-            icon="el-icon-delete"
-            size="mini"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['ems:energyStrategy:remove']"
-        >删除
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            v-hasPermi="['ems:energyStrategy:export']"
-        >导出
-        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="energyStrategyList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="序号" align="center" prop="id" />
       <el-table-column label="策略代码" align="center" prop="strategyCode" />
       <el-table-column label="策略名称" align="center" prop="strategyName" />
       <el-table-column label="策略描述" align="center" prop="strategyDesc" />