调整储能

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

@@ -1,13 +1,13 @@
 <template>
   <div class="app-container">
-    <el-tabs v-model="activeName" @tab-click="tabClick">
-      <el-tab-pane label="总览" name="summery">
+    <el-tabs v-model="activeName" @tab-click="handleQuery">
+      <el-tab-pane label="总览" name="summary">
         <div class="chartGroup">
           <Block title="当日充电量（单位：kw·h）">
             <div class="block-area" slot="main">
               <div class="center-label">
                 <div>总充电量</div>
-                <div>{{daySum.chargeElecQuantity}}kw·h</div>
+                <div>{{ daySum.chargeElecQuantity }}kw·h</div>
               </div>
               <BaseChart width="100%" height="500px" :option="chargePieOptions" />
             </div>
@@ -16,7 +16,7 @@
             <div class="block-area" slot="main">
               <div class="center-label">
                 <div>总放电量</div>
-                <div>{{daySum.dischargeElecQuantity}}kw·h</div>
+                <div>{{ daySum.dischargeElecQuantity }}kw·h</div>
               </div>
               <BaseChart width="100%" height="500px" :option="disChargePieOptions" />
             </div>
@@ -29,22 +29,30 @@
             <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" />
+                  :value="item.areaCode" />
               </el-select>
             </el-form-item>
           </el-form>
           <BaseChart width="100%" height="300px" :option="elecOptions" />
         </div>
-        <BaseChart width="100%" height="300px" :option="elecOptions" />
-        <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 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-tab-pane>
     </el-tabs>
   </div>
@@ -57,7 +65,7 @@ import BaseChart from '@/components/BaseChart'
 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'
 export default {
   name: 'ElecStoreH',
   components: {
@@ -66,7 +74,7 @@ export default {
   },
   data () {
     return {
-      activeName: 'summery',
+      activeName: 'summary',
       // 遮罩层
       loading: true,
       facsCategory: '',
@@ -77,17 +85,48 @@ export default {
       queryParams: {
         areaCode: null
       },
+      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]);
+            },
+          },
+        ],
+      },
       // 表单参数
       areaOptions: [],
       hourSum: [],
-      daySum: {}
+      daySum: {},
+      todayList: [],
+      dateRange: [dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00), dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59)]
     }
   },
   computed: {
     elecOptions () {
-      const xData = this.elecStoreHList.map(item => item.time)
-      const chargeQuantity = this.elecStoreHList.map(item => item.chargeElecQuantity)
-      const dischargeQuantity = this.elecStoreHList.map(item => item.dischargeElecQuantity)
+      const xData = this.todayList.map(item => item.time)
+      const chargeQuantity = this.todayList.map(item => item.chargeElecQuantity)
+      const dischargeQuantity = this.todayList.map(item => item.dischargeElecQuantity)
       const option = {
         tooltip: {
           trigger: 'axis',
@@ -143,9 +182,13 @@ export default {
     },
     chargePieOptions () {
       return {
+        tooltip: {
+          trigger: 'item',
+        },
         series: [
+
           {
-            name: 'Nightingale Chart',
+            name: '充电量',
             type: 'pie',
             radius: [50, 150],
             center: ['50%', '50%'],
@@ -164,9 +207,12 @@ export default {
     },
     disChargePieOptions () {
       return {
+        tooltip: {
+          trigger: 'item',
+        },
         series: [
           {
-            name: 'Nightingale Chart',
+            name: '放电量',
             type: 'pie',
             radius: [50, 150],
             center: ['50%', '50%'],
@@ -193,35 +239,46 @@ export default {
     // 查询区域列表
     async getAreaList () {
       await areaWithFacsCategory(this.facsCategory, this.facsSubCategory).then(response => {
-
         this.areaOptions = response.data
         this.queryParams.areaCode = this.areaOptions[0].areaCode
       })
     },
-    tabClick () {
-      if (this.activeName !== 'summery') {
-        this.getSummary()
-      } else {
-        this.getList()
-      }
-    },
     /** 查询储能计量-小时列表 */
     getList () {
       this.loading = true
       const {areaCode} = this.queryParams
-      const nowDay = dateFormat(new Date(), 'yyyy-MM-dd')
+      let startRecTime=''
+      let endRecTime = ''
+      if (this.dateRange&&this.dateRange.length) {
+        const [start, end] = this.dateRange
+        startRecTime=start
+        endRecTime=end
+      }
       listElecStoreH({
         areaCode,
         pageNum: 1,
         pageSize: 999,
-        startRecTime: `${nowDay} 00:00:00`,
-        endRecTime: `${nowDay} 23:59:59`
+        startRecTime,
+        endRecTime
       }).then(response => {
         this.elecStoreHList = response.rows
         this.total = response.total
         this.loading = false
       })
     },
+    getTodayChart () {
+      const {areaCode} = this.queryParams
+      const nowDay = dateFormat(new Date(), 'yyyy-MM-dd')
+      listElecStoreH({
+        areaCode,
+        pageNum: 1,
+        pageSize: 999,
+        startRecTime: `${nowDay} 00:00:00`,
+        endRecTime: `${nowDay} 23:59:59`
+      }).then(response => {
+        this.todayList = response.rows
+      })
+    },
     getSummary () {
       dayStatistics({date: dateFormat(new Date(), 'yyyy-MM-dd')}).then(({code, data}) => {
         if (code === 200) {
@@ -232,16 +289,25 @@ export default {
     },
     /** 搜索按钮操作 */
     handleQuery () {
-      if (this.queryParams.areaCode == 'all') {
+      if (this.activeName === "summary") {
         this.getSummary()
       } else {
+        this.getTodayChart()
         this.getList()
       }
     }
   }
 }
 </script>
+
 <style lang="scss" scoped>
+@import './index.scss';
+.app-container {
+  ::v-deep .el-tabs__content {
+    overflow: initial;
+  }
+}
+
 .chartGroup {
   display: flex;
 
@@ -249,10 +315,12 @@ export default {
     flex: 1;
 
   }
-  .block-area{
+
+  .block-area {
     position: relative;
     width: 100%;
   }
+
   .center-label {
     position: absolute;
     top: 50%;