调整能源态势

ems-ui/src/components/Block/block.vue

@@ -3,7 +3,7 @@
       class="grid-content bg-purple"
       v-resize='onResize'
   >
-    <div class="grid-title">{{ title }}</div>
+     <SubTitle :title ="title"/>
     <div class="grid-main-content">
       <slot name="main"></slot>
     </div>
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-
+import SubTitle from '@/components/SubTitle/index.vue'
 export default {
   props: {
     title: {
@@ -27,6 +27,7 @@ export default {
       },
     },
   },
+  components: {SubTitle}
 };
 </script>
 <style src="./index.scss" lang="scss" />

ems-ui/src/components/SubTitle/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="panel-title">{{title}}</div>
+</template>
+<script>
+export default {
+  name: 'SubTitle',
+props:['title'],
+  data () {
+    return {
+    };
+  },
+  methods: {}
+}
+</script>
+<style lang='scss' scoped>
+ .panel-title {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 500;
+    &::before {
+      content: '';
+      display: inline-block;
+      height: 14px;
+      width: 3px;
+      border-radius: 6px;
+      background: #409eff;
+      margin-right: 5px;
+    }
+  }
+</style>

ems-ui/src/router/index.js

@@ -67,6 +67,7 @@ export const constantRoutes = [
     name: 'largeScreen',
     redirect: { name: 'home' },
     component: LargeScreen,
+    hidden: true,
     children: [
       {
         path: 'home',

ems-ui/src/views/mgr/index.scss

@@ -7,4 +7,7 @@
     align-items: center;
     justify-content: flex-end;
   }
+  .panel-title{
+    padding-left: 30px;
+  }
 }

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

@@ -4,11 +4,11 @@
       <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="当日供电量【单位：kWh】" :opt-cfg="elecQuantity" >
             </PieChartBlock>
           </el-col>
           <el-col :span="12">
-            <PieChartBlock title="当日电费（单位：元）" :opt-cfg="elecCost" >
+            <PieChartBlock title="当日电费【单位：元】" :opt-cfg="elecCost" >
             </PieChartBlock>
           </el-col>
         </el-row>
@@ -35,13 +35,7 @@
         </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>
+            <SubTitle :title="`时段供电数据【${selectedLabel}】`"/>
             <BaseChart width="100%" height="300px" :option="elecOptions"/>
           </div>
           <div class="container-block">
@@ -95,13 +89,7 @@
         </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>
+            <SubTitle :title="`时段发电数据【${selectedLabel}】`"/>
             <BaseChart width="100%" height="300px" :option="pvOptions"/>
           </div>
           <div class="container-block">
@@ -147,6 +135,7 @@ 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 SubTitle from '@/components/SubTitle'
 import { DateTool } from '@/utils/DateTool'
 import dayjs from 'dayjs'
 
@@ -156,7 +145,8 @@ export default {
   components: {
     BarChartBlock,
     PieChartBlock,
-    BaseChart
+    BaseChart,
+    SubTitle
   },
   data() {
     return {
@@ -467,7 +457,7 @@ export default {
   },
   methods: {
     getLabelContentForElecQuantity() {
-      return `总供电{totalSupply|${this.totalSupply} kW·h}`;
+      return `总供电{totalSupply|${this.totalSupply} kWh}`;
     },
     getLabelContentForElecCost() {
       return `供电成本{totalCost|${this.totalCost} 元}`;
@@ -706,4 +696,4 @@ export default {
   }
 }
 </style>
-<style lang="scss" src="./index.scss"></style>
+<style lang="scss" scoped src="./index.scss"></style>

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

@@ -3,22 +3,22 @@
     <el-tabs v-model="activeName" @tab-click="tabClick">
       <el-tab-pane label="总览" name="summary">
         <div class="chartGroup">
-          <Block title="当日充电量（单位：kW·h）">
+          <Block title="当日充电量【单位：kWh】">
             <div class="block-area" slot="main">
               <div class="center-label">
                 <div>总充电量</div>
-                <div>{{ daySum.chargeElecQuantity }}kw·h</div>
+                <div>{{ daySum.chargeElecQuantity }}kwh</div>
               </div>
-              <BaseChart width="100%" height="500px" :option="chargePieOptions"/>
+              <BaseChart width="100%" height="500px" :option="chargePieOptions" />
             </div>
           </Block>
-          <Block title="当日放电量（单位：kW·h）">
+          <Block title="当日放电量【单位：kWh】">
             <div class="block-area" slot="main">
               <div class="center-label">
                 <div>总放电量</div>
-                <div>{{ daySum.dischargeElecQuantity }}kw·h</div>
+                <div>{{ daySum.dischargeElecQuantity }}kwh</div>
               </div>
-              <BaseChart width="100%" height="500px" :option="disChargePieOptions"/>
+              <BaseChart width="100%" height="500px" :option="disChargePieOptions" />
             </div>
           </Block>
         </div>
@@ -26,36 +26,25 @@
       <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"
-            />
+            <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;"
-            />
+              :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"/>
+            <SubTitle :title="`时段储能数据【${selectedLabel}】`" />
+            <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"
-              >
+                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">
@@ -63,8 +52,8 @@
               </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-column label="充电电量(kW·h)" align="center" prop="chargeElecQuantity" />
+              <el-table-column label="放电电量(kW·h)" align="center" prop="dischargeElecQuantity" />
             </el-table>
           </div>
         </el-col>
@@ -74,12 +63,13 @@
 </template>
 
 <script>
-import { listElecStoreH, dayStatistics } from '@/api/mgr/elecStoreH'
-import { areaWithFacsCategoryAsTree } from '@/api/basecfg/area'
-import { dateFormat } from '@/utils/index.js'
+import {listElecStoreH, dayStatistics} from '@/api/mgr/elecStoreH'
+import {areaWithFacsCategoryAsTree} from '@/api/basecfg/area'
+import {dateFormat} from '@/utils/index.js'
 import dayjs from 'dayjs'
-import { DateTool } from '@/utils/DateTool'
+import {DateTool} from '@/utils/DateTool'
 import BaseChart from '@/components/BaseChart'
+import SubTitle from '@/components/SubTitle'
 import Block from '@/components/Block/block.vue'
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
@@ -89,9 +79,10 @@ export default {
   components: {
     Treeselect,
     BaseChart,
-    Block
+    Block,
+    SubTitle
   },
-  data() {
+  data () {
     return {
       activeName: 'summary',
       // 遮罩层
@@ -114,7 +105,7 @@ export default {
         shortcuts: [
           {
             text: '最近一周',
-            onClick(picker) {
+            onClick (picker) {
               const end = new Date()
               const start = new Date()
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
@@ -122,7 +113,7 @@ export default {
             }
           }, {
             text: '最近一个月',
-            onClick(picker) {
+            onClick (picker) {
               const end = new Date()
               const start = new Date()
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
@@ -130,7 +121,7 @@ export default {
             }
           }, {
             text: '最近三个月',
-            onClick(picker) {
+            onClick (picker) {
               const end = new Date()
               const start = new Date()
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
@@ -148,7 +139,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)
@@ -205,7 +196,7 @@ export default {
       }
       return option
     },
-    chargePieOptions() {
+    chargePieOptions () {
       return {
         tooltip: {
           trigger: 'item'
@@ -230,7 +221,7 @@ export default {
         ]
       }
     },
-    disChargePieOptions() {
+    disChargePieOptions () {
       return {
         tooltip: {
           trigger: 'item'
@@ -257,18 +248,18 @@ export default {
   },
   watch: {
     // 根据名称筛选区域树
-    areaName(val) {
+    areaName (val) {
       this.$refs.tree.filter(val)
     }
   },
-  async created() {
+  async created () {
     this.facsCategory = 'C'
     await this.getAreaList()
     this.tabClick()
   },
   methods: {
     // 查询区域列表
-    async getAreaList() {
+    async getAreaList () {
       await areaWithFacsCategoryAsTree(this.facsCategory, this.facsSubCategory).then(response => {
         this.areaOptions = [{
           id: '-1',
@@ -278,9 +269,9 @@ export default {
       })
     },
     /** 查询储能计量-小时列表 */
-    getList() {
+    getList () {
       this.loading = true
-      const { areaCode } = this.queryParams
+      const {areaCode} = this.queryParams
       let startRecTime = ''
       let endRecTime = ''
       if (this.dateRange && this.dateRange.length) {
@@ -300,8 +291,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,
@@ -313,8 +304,8 @@ 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 || {}
@@ -322,24 +313,24 @@ export default {
       })
     },
     // 筛选节点
-    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()
       this.getTodayChart();
     },
     /** 搜索按钮操作 */
-    tabClick() {
+    tabClick () {
       if (this.activeName === 'summary') {
         this.getSummary()
       } else {
-        this.selectedLabel= '全部'
-        this.queryParams.areaCode='-1'
+        this.selectedLabel = '全部'
+        this.queryParams.areaCode = '-1'
         this.getAreaList()
         this.getTodayChart()
         this.getList()
@@ -361,7 +352,7 @@ export default {
 .chartGroup {
   display: flex;
 
-  > div {
+  >div {
     flex: 1;
 
   }

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

@@ -4,64 +4,63 @@
       <el-tab-pane label="总览" name="summery">
         <div class="First">
           <div class="time-range-buttons">
-            <el-button
-              :class="{ 'is-active': selectedTimeRange === 'day' }"
+            <el-button :class="{ 'is-active': selectedTimeRange === 'day' }"
               @click="changeTimeRange('day')">日</el-button>
-            <el-button
-              :class="{ 'is-active': selectedTimeRange === 'month' }"
+            <el-button :class="{ 'is-active': selectedTimeRange === 'month' }"
               @click="changeTimeRange('month')">月</el-button>
-            <el-button
-              :class="{ 'is-active': selectedTimeRange === 'year' }"
+            <el-button :class="{ 'is-active': selectedTimeRange === 'year' }"
               @click="changeTimeRange('year')">年</el-button>
           </div>
-          <!-- 图表容器 -->
-          <div ref="sumBySubCategoryChart" style="height: 400px;" class="chart-container"/>
+          <div class="first-content">
+            <div>
+              <SubTitle title="能耗统计" />
+              <!-- 图表容器 -->
+              <div ref="sumBySubCategoryChart" style="height: 380px;"  />
+            </div>
+            <div>
+              <SubTitle title="能耗总览" />
+              <el-table  border stripe show-summary :data="tableData"  style="width: 100%;margin-top: 20px;">
+                <el-table-column prop="name" align="center" label="设施名称" >
+                </el-table-column>
+                <el-table-column prop="value" align="center" label="能耗(kWh)" >
+                </el-table-column>
+              </el-table>
+            </div>
+          </div>
         </div>
 
       </el-tab-pane>
-      <el-tab-pane v-for="item in facsCategoryOptions" :key="item.code" :label="item.name" :name="item.code" >
+      <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" 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;"
-            />
+              :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>
-          </div>
-
-          <div class="container-block">
-            <div class="ctl-container" style="display: flex; justify-content: flex-end;">
-              <el-select v-model="objCode" placeholder="选择设施" clearable  @visible-change="handleObjSelectClick" @change="getList">
-                <el-option v-for="item in objOptions"
-                           :label="item.facsName"
-                           :value="item.facsCode"
-                           :key="item.facsCode"/>
+            <div class="ctl-container" style="display: flex; justify-content: space-between;">
+              <SubTitle :title="`设施汇总电耗【${selectedLabel}】`" />
+              <div>
+                <el-select v-model="objCode" placeholder="选择设施" clearable @visible-change="handleObjSelectClick"
+                @change="getList">
+                <el-option v-for="item in objOptions" :label="item.facsName" :value="item.facsCode"
+                  :key="item.facsCode" />
 
               </el-select>
               <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">
+                value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                align="right">
               </el-date-picker>
+              </div>
             </div>
-          <!-- 表格  -->
-            <el-table v-loading="loading" :data="sumByFacsList"  style="width: 100%; margin-top: 10px" >
+            <!-- 表格  -->
+            <el-table v-loading="loading" :data="sumByFacsList" style="width: 100%; margin-top: 10px">
               <el-table-column label="设施编码" align="center" prop="objCode">
                 <template slot-scope="scope">
                   <span>{{ scope.row.objCode }}</span>
@@ -78,10 +77,11 @@
                 </template>
               </el-table-column>
             </el-table>
-         <!--柱状图-->
-          <div class="container-block" style="margin-top: 20px;">
-            <BaseChart width="100%" height="300px" :option="barChartOptions"/>
-          </div>
+            <SubTitle title="设施时段电耗"  style="margin-top: 20px;"/>
+            <!--柱状图-->
+            <div class="container-block" style="margin-top: 20px;">
+              <BaseChart width="100%" height="300px" :option="barChartOptions" />
+            </div>
             <!--表格-->
             <el-table v-loading="loading" :data="hList">
               <el-table-column label="设施" align="center" prop="objName">
@@ -99,17 +99,12 @@
                   <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" prop="timeIndex" />
+              <el-table-column label="用电量(kWh)" align="center" prop="elecQuantity" />
             </el-table>
 
-            <pagination
-              v-show="total>0"
-              :total="total"
-              :page.sync="queryParams.pageNum"
-              :limit.sync="queryParams.pageSize"
-              @pagination="getList"
-            />
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+              :limit.sync="queryParams.pageSize" @pagination="getList" />
           </div>
         </el-col>
       </el-tab-pane>
@@ -120,24 +115,27 @@
 <script>
 import * as echarts from 'echarts/core';
 import {listHSum, sumByFacsH, sumBySubCategoryH} from '@/api/mgr/elecUseH'
-import { getFacsCategorygetByCode } from '@/api/basecfg/emsfacs'
-import { areaWithFacsCategoryAsTree } from '@/api/basecfg/area'
-import { listAllFacs } from '@/api/basecfg/emsfacs'
+import {getFacsCategorygetByCode} from '@/api/basecfg/emsfacs'
+import {areaWithFacsCategoryAsTree} from '@/api/basecfg/area'
+import {listAllFacs} from '@/api/basecfg/emsfacs'
 import dayjs from 'dayjs'
-import { DateTool } from '@/utils/DateTool'
+import {DateTool} from '@/utils/DateTool'
 import BaseChart from '@/components/BaseChart/index.vue'
+import SubTitle from '@/components/SubTitle'
 import Block from '@/components/Block/block.vue'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import {right} from '@antv/x6/lib/registry/port-layout/line';
 
 export default {
   name: 'H',
   components: {
     Treeselect,
     BaseChart,
-    Block
+    Block,
+    SubTitle
   },
-  data() {
+  data () {
     return {
       activeName: 'summery',
       // 遮罩层
@@ -155,7 +153,7 @@ export default {
       // 用能计量-小时表格数据
       hList: [],
       //查能耗
-      sumByFacsList:[],
+      sumByFacsList: [],
       // 弹出层标题
       title: '',
       // 是否显示弹出层
@@ -185,7 +183,7 @@ export default {
         shortcuts: [
           {
             text: '最近一周',
-            onClick(picker) {
+            onClick (picker) {
               const end = new Date()
               const start = new Date()
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
@@ -193,7 +191,7 @@ export default {
             }
           }, {
             text: '最近一个月',
-            onClick(picker) {
+            onClick (picker) {
               const end = new Date()
               const start = new Date()
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
@@ -201,7 +199,7 @@ export default {
             }
           }, {
             text: '最近三个月',
-            onClick(picker) {
+            onClick (picker) {
               const end = new Date()
               const start = new Date()
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
@@ -230,15 +228,19 @@ export default {
       },
       // 表单参数
       form: {},
+      tableData: [{
+        name: '照明设施',
+        value: '122'
+      }]
     }
   },
   watch: {
     // 根据名称筛选区域树
-    areaName(val) {
+    areaName (val) {
       this.$refs.tree.filter(val)
     }
   },
-  created() {
+  created () {
     this.facsCategory = 'Z'
     this.facsSubCategory = ''
     this.getFacsCategory(this.facsCategory)
@@ -248,7 +250,7 @@ export default {
     this.getSumBySubCategoryH();
   },
   computed: {
-    barChartOptions() {
+    barChartOptions () {
       const xAxisData = this.hList.map(item => item.time);
       const seriesData = this.hList.map(item => item.elecQuantity);
       return {
@@ -266,7 +268,7 @@ export default {
           data: xAxisData
         },
         yAxis: {
-          name: 'kW·h（千瓦时）',
+          name: 'kWh（千瓦时）',
           type: 'value',
         },
         series: [{
@@ -285,34 +287,34 @@ export default {
   },
   methods: {
     /** 查询用能计量-小时列表 */
-    getList() {
+    getList () {
       this.loading = true
       this.queryParams.objCode = this.objCode
-        listHSum(this.queryParams).then(response => {
-          this.hList = response.rows
-          this.total = response.total
-          this.loading = false
-        })
+      listHSum(this.queryParams).then(response => {
+        this.hList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
       this.getsumByFacsH()
     },
     /**根据设施查询能耗统计 */
-    getsumByFacsH(){
+    getsumByFacsH () {
       const params = {
         startRecTime: dayjs(this.dateRange[0]).format('YYYY-MM-DD HH:mm:ss'),
         endRecTime: dayjs(this.dateRange[1]).format('YYYY-MM-DD HH:mm:ss'),
         areaCode: this.queryParams.areaCode,
         facsSubCategory: this.activeName,
-        objCode:this.queryParams.objCode
+        objCode: this.queryParams.objCode
       };
       sumByFacsH(params).then(response => {
         this.sumByFacsList = response.data
-        console.log("能耗",this.sumByFacsList)
+        console.log("能耗", this.sumByFacsList)
 
       })
     },
 
     /**时间范围切换按钮点击事件处理器*/
-    changeTimeRange(rangeType) {
+    changeTimeRange (rangeType) {
       this.selectedTimeRange = rangeType;
       let start = dayjs();
       let end = dayjs();
@@ -335,7 +337,7 @@ export default {
     },
 
     /**总览饼图*/
-    getSumBySubCategoryH(){
+    getSumBySubCategoryH () {
       const params = {
         startRecTime: dayjs(this.dateRange[0]).format('YYYY-MM-DD HH:mm:ss'),
         endRecTime: dayjs(this.dateRange[1]).format('YYYY-MM-DD HH:mm:ss'),
@@ -343,11 +345,15 @@ export default {
       };
       sumBySubCategoryH(params).then(response => {
         this.processDataForChart(response.data); // 处理数据并生成图表配置
-        console.log("pie图",response.data)
+        console.log("pie图", response.data)
+        this.tableData = response.data.map(item => ({
+          name: item.objName,
+          value:item.elecQuantity||0
+        }))
 
       })
     },
-    processDataForChart(data) {
+    processDataForChart (data) {
       this.totalElecQuantity = data.reduce((sum, item) => sum + (item.elecQuantity || 0), 0);
       // 处理数据，生成图表配置
       const seriesData = data.map(item => ({
@@ -362,18 +368,14 @@ export default {
 
       // 设置图表配置
       this.sumBySubCategoryChartOption = {
-        title: {
-          text: '总览能耗',
-          left: 'center'
-        },
         tooltip: {
           trigger: 'item',
           formatter: function (params) {
-            const { name, value, percent } = params;
+            const {name, value, percent} = params;
             const subentries = params.data.subentry;
             let tooltipContent = `<div><h4>${name}</h4><p>${value} (${percent}%)</p><ul>`;
             subentries.forEach(subItem => {
-              tooltipContent += `<li>${subItem.name}: ${subItem.value} kW·h</li>`;
+              tooltipContent += `<li>${subItem.name}: ${subItem.value} kWh</li>`;
             });
             tooltipContent += `</ul></div>`;
             return tooltipContent;
@@ -381,20 +383,21 @@ export default {
         },
         legend: {
           orient: 'vertical',
-          left: 'left',
-          data: data.map(item => item.objName)
+          top:'5%',
+          left:'5%'
         },
         series: [
           {
             name: '能耗',
             type: 'pie',
-            radius: ['40%', '55%'],
+            radius: ['35%', '55%'],
             data: seriesData,
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)',}
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              }
             },
             label: {
               show: true,
@@ -419,13 +422,13 @@ export default {
         const chart = echarts.init(this.$refs.sumBySubCategoryChart);
         chart.setOption(this.sumBySubCategoryChartOption);
       });
-  },
-    async getFacsCategory(code) {
+    },
+    async getFacsCategory (code) {
       getFacsCategorygetByCode(code).then(response => {
         this.facsCategoryOptions = response.data.subtypeList
       })
     },
-    async getAreaTree(category, subCategory) {
+    async getAreaTree (category, subCategory) {
       await areaWithFacsCategoryAsTree(category, subCategory).then(response => {
         this.areaOptions = [{
           id: '-1',
@@ -434,7 +437,7 @@ export default {
         }]
       })
     },
-    async getFacsObj(areaCode, category, subCategory) {
+    async getFacsObj (areaCode, category, subCategory) {
       this.queryObjParams.refArea = areaCode
       this.queryObjParams.facsCategory = category
       this.queryObjParams.subCategory = subCategory
@@ -443,7 +446,7 @@ export default {
         this.objOptions = response.data
       })
     },
-    tabClick() {
+    tabClick () {
       this.reset()
       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)]
@@ -457,27 +460,27 @@ export default {
       }
     },
     /** 搜索按钮操作 */
-    handleQuery() {
+    handleQuery () {
       this.queryParams.pageNum = 1
       this.getList()
     },
-    handleObjSelectClick() {
+    handleObjSelectClick () {
       this.getFacsObj(this.queryParams.areaCode, this.facsCategory, this.activeName)
       this.getsumByFacsH();
     },
     // 筛选节点
-    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.objCode = null
       this.handleQuery()
     },
-    reset() {
+    reset () {
       this.objCode = null
       this.queryParams.areaCode = '-1'
       this.queryParams.facsCategory = 'Z'
@@ -488,22 +491,28 @@ export default {
   }
 }
 </script>
-<style lang="css" scoped>
-
-.chart-container {
-  position: fixed;
-  top: 30px;
-  left: 20px;
-  width: 50%;
-  height: 350px;
-  z-index: 1000; /* 确保图表在其他内容之上 */
-}
+<style lang="scss" scoped>
 
 .is-active {
   background-color: #409eff;
   color: white;
 }
-</style>
 
+.first-content {
+  display: flex;
+  margin-top: 20px;
+
+  >div:first-child{
+    flex: 3;
+  }
+  >div:last-child{
+    flex: 2;
+  }
+}
+.container-block{
+  padding-left:20px ;
+  // .panel-title{
 
+  // }
 }
+</style>