修改储能

ems-ui/src/api/mgr/elecStoreH.js

@@ -8,6 +8,14 @@ export function listElecStoreH(query) {
     params: query
   })
 }
+// 查询储能总览
+export function dayStatistics(query) {
+  return request({
+    url: '/ems/elec/store/day/statistics',
+    method: 'get',
+    params: query
+  })
+}
 
 // 查询储能计量-小时详细
 export function getElecStoreH(id) {

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

@@ -1,38 +1,59 @@
 <template>
   <div class="app-container">
     <el-tabs v-model="queryParams.areaCode" @tab-click="handleQuery">
-      <el-tab-pane
-        v-for="item in areaOptions"
-        :key="item.areaCode"
-        :label="item.shortName"
-        :name="item.areaCode" >
+      <el-tab-pane v-for="item in areaOptions" :key="item.areaCode" :label="item.shortName" :name="item.areaCode">
       </el-tab-pane>
     </el-tabs>
-
-
-    <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>
+    <template v-if="queryParams.areaCode == 'all'">
+      <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>
+            <BaseChart width="100%" height="500px" :option="chargePieOptions" />
+          </div>
+        </Block>
+        <Block title="当日放电量（单位：kw·h）">
+          <div class="block-area" slot="main">
+            <div class="center-label">
+              <div>总放电量</div>
+              <div>{{daySum.dischargeElecQuantity}}kw·h</div>
+            </div>
+            <BaseChart width="100%" height="500px" :option="disChargePieOptions" />
+          </div>
+        </Block>
+      </div>
+    </template>
+    <template v-else>
+      <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>
+    </template>
   </div>
 </template>
 
 <script>
-import { listElecStoreH } from '@/api/mgr/elecStoreH'
-import { areaWithFacsCategory } from '@/api/basecfg/area'
+import {listElecStoreH, dayStatistics} from '@/api/mgr/elecStoreH'
+import {areaWithFacsCategory} from '@/api/basecfg/area'
 import BaseChart from '@/components/BaseChart'
+import Block from '@/components/Block/block.vue';
+import {dateFormat} from '@/utils/index.js'
 export default {
   name: 'ElecStoreH',
   components: {
-    BaseChart
+    BaseChart,
+    Block
   },
-  data() {
+  data () {
     return {
       // 遮罩层
       loading: true,
@@ -45,11 +66,13 @@ export default {
         areaCode: null
       },
       // 表单参数
-      areaOptions: []
+      areaOptions: [],
+      hourSum: [],
+      daySum: {}
     }
   },
   computed: {
-    elecOptions() {
+    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)
@@ -84,7 +107,7 @@ export default {
             name: '充电电量',
             type: 'bar',
             data: chargeQuantity,
-            barWidth: 30,
+            barWidth: 20,
             itemStyle: {
               normal: {
                 color: '#6395FA'
@@ -95,7 +118,7 @@ export default {
             name: '放电电量',
             type: 'bar',
             data: dischargeQuantity,
-            barWidth: 30,
+            barWidth: 20,
             itemStyle: {
               normal: {
                 color: '#8CDF6C'
@@ -105,34 +128,121 @@ export default {
         ]
       }
       return option
-    }
+    },
+    chargePieOptions () {
+      return {
+        series: [
+          {
+            name: 'Nightingale Chart',
+            type: 'pie',
+            radius: [50, 150],
+            center: ['50%', '50%'],
+            roseType: 'area',
+            itemStyle: {
+              borderRadius: 8
+            },
+            data:
+              this.hourSum.map(item => ({
+                name: item.time,
+                value: item.chargeElecQuantity
+              }))
+          }
+        ]
+      };
+    },
+    disChargePieOptions () {
+      return {
+        series: [
+          {
+            name: 'Nightingale Chart',
+            type: 'pie',
+            radius: [50, 150],
+            center: ['50%', '50%'],
+            roseType: 'area',
+            itemStyle: {
+              borderRadius: 8
+            },
+            data: this.hourSum.map(item => ({
+              name: item.time,
+              value: item.dischargeElecQuantity
+            }))
+          }
+        ]
+      };
+    },
+
   },
-  async created() {
+  async created () {
     this.facsCategory = 'C'
     await this.getAreaList()
-    this.getList()
+    this.handleQuery()
   },
   methods: {
     // 查询区域列表
-    async getAreaList() {
+    async getAreaList () {
       await areaWithFacsCategory(this.facsCategory, this.facsSubCategory).then(response => {
+        response.data.unshift({areaCode: 'all', shortName: '总览'})
         this.areaOptions = response.data
         this.queryParams.areaCode = this.areaOptions[0].areaCode
       })
     },
     /** 查询储能计量-小时列表 */
-    getList() {
+    getList () {
       this.loading = true
-      listElecStoreH(this.queryParams).then(response => {
+      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.elecStoreHList = response.rows
         this.total = response.total
         this.loading = false
       })
     },
+    getSummary () {
+      dayStatistics({date: dateFormat(new Date(), 'yyyy-MM-dd')}).then(({code, data}) => {
+        if (code === 200) {
+          this.hourSum = data.hourSum || []
+          this.daySum = data.daySum || {}
+        }
+      })
+    },
     /** 搜索按钮操作 */
-    handleQuery() {
-      this.getList()
+    handleQuery () {
+      if (this.queryParams.areaCode == 'all') {
+        this.getSummary()
+      } else {
+        this.getList()
+      }
+
     }
   }
 }
 </script>
+<style lang="scss" scoped>
+.chartGroup {
+  display: flex;
+
+  >div {
+    flex: 1;
+
+  }
+  .block-area{
+    position: relative;
+    width: 100%;
+  }
+  .center-label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+</style>