Merge branch 'master' of http://git.xt.wenhq.top:8083/hs/zhny_ui

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

@@ -1,4 +1,4 @@
-import request from '@/utils/request'
+import request from '@/utils/request';
 
 // 查询储能计量-小时列表
 export function listElecStoreH(query) {
@@ -6,7 +6,7 @@ export function listElecStoreH(query) {
     url: '/ems/elec/store/hour/list',
     method: 'get',
     params: query
-  })
+  });
 }
 // 查询储能总览
 export function dayStatistics(query) {
@@ -14,7 +14,7 @@ export function dayStatistics(query) {
     url: '/ems/elec/store/day/statistics',
     method: 'get',
     params: query
-  })
+  });
 }
 
 // 查询储能计量-小时详细
@@ -22,7 +22,7 @@ export function getElecStoreH(id) {
   return request({
     url: '/ems/elec/store/hour/' + id,
     method: 'get'
-  })
+  });
 }
 
 // 新增储能计量-小时
@@ -31,7 +31,7 @@ export function addElecStoreH(data) {
     url: '/ems/elec/store/hour',
     method: 'post',
     data: data
-  })
+  });
 }
 
 // 修改储能计量-小时
@@ -40,7 +40,7 @@ export function updateElecStoreH(data) {
     url: '/ems/elec/store/hour',
     method: 'put',
     data: data
-  })
+  });
 }
 
 // 删除储能计量-小时
@@ -48,5 +48,13 @@ export function delElecStoreH(id) {
   return request({
     url: '/ems/elec/store/hour/' + id,
     method: 'delete'
-  })
+  });
+}
+
+export function getStoreDayList(query) {
+  return request({
+    url: '/ems/elec/store/day/list',
+    method: 'get',
+    params: query
+  });
 }

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

@@ -67,3 +67,25 @@ export function delH(id) {
     method: 'delete'
   })
 }
+
+export function getPowerData(query) {
+  return request({
+    url: '/ems/object/loadIndex/min/15/list',
+    method: 'get',
+    params: query
+  })
+}
+export function getPowerMaxLoad(query) {
+  return request({
+    url: '/ems/object/loadIndex/min/15/getMaxLoad',
+    method: 'get',
+    params: query
+  })
+}
+export function getPowerDayMaxLoad(query) {
+  return request({
+    url: '/ems/object/loadIndex/day/getMaxLoad',
+    method: 'get',
+    params: query
+  })
+}

ems-ui/src/components/Block/charts/BarChartBlock.vue

@@ -14,7 +14,7 @@
 <script>
 
 import Block from '@/components/Block/block.vue';
-import { copyObj, uuid } from '@/utils';
+import {copyObj, uuid} from '@/utils';
 import * as echarts from 'echarts';
 import SwitchTag from '../../SwitchTag/index.vue';
 
@@ -27,6 +27,22 @@ const basicSerie = {
   data: [],
 };
 const opts = {
+  toolbox: {
+    itemGap: 10,
+    itemSize: 16,
+    right: 10,
+    top: 0,
+    show: true,
+    feature: {
+      magicType: {
+        show: true,
+        type: ['bar', 'line']
+      },
+      saveAsImage: {
+        show: true
+      }
+    }
+  },
   tooltip: {
     trigger: 'axis',
     axisPointer: {
@@ -75,31 +91,32 @@ export default {
   },
   watch: {
     optCfg: {
-      handler(val) {
+      handler (val) {
         this.initChart();
       },
       deep: true,
     },
   },
-  data() {
+  data () {
     return {
       id: uuid(),
       refCharts: null,
     };
   },
-  mounted() {
+  mounted () {
     this.$nextTick(this.initChart);
   },
-  created() {
+  created () {
   },
   methods: {
-    initChart() {
+    initChart () {
       this.refCharts && this.refCharts.clear();
       const chartDom = document.getElementById(this.id);
       this.refCharts = echarts.init(chartDom);
-      const option = copyObj(opts);
+      const {series,...rest } = this.optCfg
+      const option = Object.assign({},copyObj(opts),rest);
       const legend = [];
-      this.optCfg.series.forEach((item, index) => {
+      series.forEach((item, index) => {
         const serie = copyObj(basicSerie);
         Object.assign(serie, item);
         option.series.push(serie);

ems-ui/src/components/Block/charts/PieChartBlock.vue

@@ -87,8 +87,9 @@ export default {
       this.refCharts && this.refCharts.clear();
       const chartDom = document.getElementById(this.id);
       this.refCharts = echarts.init(chartDom);
-      const option = copyObj(opts);
-      this.optCfg.series.forEach((item, index) => {
+      const {series,...rest } = this.optCfg
+      const option = Object.assign({},copyObj(opts),rest);
+      series.forEach((item, index) => {
         const serie = copyObj(basicSerie);
         Object.assign(serie, item);
         option.series.push(serie);

ems-ui/src/views/analysis/power/consume.vue

@@ -1,340 +1,459 @@
 <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="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="请选择日期">
-        </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>
-
-    <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:loadIndex: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:loadIndex:edit']"
-        >修改
-        </el-button>
+    <el-row :gutter="10">
+      <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="1.5">
-        <el-button
-            type="danger"
-            plain
-            icon="el-icon-delete"
-            size="mini"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['ems:loadIndex: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:loadIndex:export']"
-        >导出
-        </el-button>
+      <el-col :span="20" :xs="24">
+        <div class="container-block">
+          <el-card>
+            <div style="display: flex;justify-content: space-between;">
+            <SubTitle :title="`平均功率-15分钟【${selectedLabel}】`" />
+            <el-button-group>
+              <el-button v-for="item in btnGroup" :key="item.name" size="mini"
+                :type="item.name === activeBtn ? 'primary' : ''" :icon="item.icon" @click="btnChange(item)" />
+            </el-button-group>
+          </div>
+          <div class="ctl-container">
+            <el-date-picker v-model="dateRange" type="datetimerange" @change="getPowerChart"
+              :picker-options="pickerOptions" value-format="yyyy-MM-dd hh:mm:ss" range-separator="至"
+              start-placeholder="开始日期" end-placeholder="结束日期" align="right" :clearable="false">
+            </el-date-picker>
+          </div>
+          <el-table v-if="activeBtn == 'table'" :data="powerChartData" max-height="400px">
+            <el-table-column label="日期" align="center" prop="date" width="100" fixed="left">
+            </el-table-column>
+            <el-table-column label="时间" align="center" prop="time" width="100" fixed="left">
+            </el-table-column>
+            <el-table-column label="电流(A)" align="center" show-overflow-tooltip width="200">
+              <template slot-scope="scope">
+                <span>A相:{{ scope.row.la }}A;</span>
+                <span>B相:{{ scope.row.lb }}A;</span>
+                <span>C相:{{ scope.row.lc }}A</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="电压(V)" align="center" show-overflow-tooltip width="200">
+              <template slot-scope="scope">
+                <span>A相:{{ scope.row.ua }}V;</span>
+                <span>B相:{{ scope.row.ub }}V;</span>
+                <span>C相:{{ scope.row.uc }}V</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="有功功率(kW)" align="center" show-overflow-tooltip width="250" >
+              <template slot-scope="scope">
+                <span>A相:{{ scope.row.pa }}kW;</span>
+                <span>B相:{{ scope.row.pb }}kW;</span>
+                <span>C相:{{ scope.row.pc }}kW</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="无功功率(kW)" align="center" show-overflow-tooltip width="250" >
+              <template slot-scope="scope">
+                <span>A相:{{ scope.row.qa }}kW;</span>
+                <span>B相:{{ scope.row.qb }}kW;</span>
+                <span>C相:{{ scope.row.qc }}kW</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="功率因素" align="center" prop="pf" width="100" />
+          </el-table>
+          <BaseChart v-else width="100%" height="400px" :option="powerLineOptions" />
+          </el-card>
+          <el-card style="margin-top: 10px;">
+            <div style="display: flex;justify-content: space-between;">
+            <SubTitle :title="`峰值功率-日【${selectedLabel}】`" />
+            <el-date-picker v-model="maxPowerDate" type="daterange" @change="getDayMaxLoad"
+              :picker-options="pickerOptions" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
+              end-placeholder="结束日期" align="right" :clearable="false">
+            </el-date-picker>
+          </div>
+          <BaseChart width="100%" height="400px" :option="maxLoadLineOptions" />
+          </el-card>
+
+        </div>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-
-    <el-table v-loading="loading" :data="loadIndexList" @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="areaCode" />
-       <el-table-column label="园区名称" align="center" prop="areaName" />
-      <el-table-column label="设施代码" align="center" prop="facsCode" />
-      <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="电压(V)" align="center" prop="voltage" />
-      <el-table-column label="电流(A) " align="center" prop="amperage" />
-      <el-table-column label="功率(W)" align="center" prop="power" />
-      <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:loadIndex:edit']"
-          >修改
-          </el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['ems:loadIndex: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"
-    />
-
-    <!-- 添加或修改电力负荷设施指标对话框 -->
-    <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-date-picker clearable
-                          v-model="form.time"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="电压 " prop="voltage">
-          <el-input v-model="form.voltage" placeholder="请输入电压 " />
-        </el-form-item>
-        <el-form-item label="电流 " prop="amperage">
-          <el-input v-model="form.amperage" placeholder="请输入电流 " />
-        </el-form-item>
-        <el-form-item label="功率 " prop="power">
-          <el-input v-model="form.power" placeholder="请输入功率 " />
-        </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>
   </div>
 </template>
 
-<script>
-import { listLoadIndex, getLoadIndex, delLoadIndex, addLoadIndex, updateLoadIndex } from '@/api/mgr/loadIndex';
 
+<script>
+import {getPowerData, getPowerMaxLoad, getPowerDayMaxLoad} from '@/api/mgr/elecUseH'
+import {areaWithFacsCategoryAsTree} from '@/api/basecfg/area'
+import BaseChart from '@/components/BaseChart'
+import SubTitle from '@/components/SubTitle'
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {dateFormat, getDayAgoDate} from '@/utils'
 export default {
-  name: 'LoadIndex',
-  data() {
+  name: 'Comsume',
+  components: {
+    Treeselect,
+    BaseChart,
+    SubTitle
+  },
+  data () {
+    const lastWeek = dateFormat(getDayAgoDate(7), 'yyyy-MM-dd')
+    const nowDay = dateFormat(new Date(), 'yyyy-MM-dd')
     return {
       // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 电力负荷设施指标表格数据
-      loadIndexList: [],
-      // 弹出层标题
-      title: '',
-      // 是否显示弹出层
-      open: false,
+      facsCategory: 'Z',
+      facsSubCategory: '',
+      areaName: undefined,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      selectedLabel: '',
       // 查询参数
       queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        areaCode: null,
-        facsCode: null,
-        date: null,
-        voltage: null,
-        amperage: null,
-        power: 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])
+            }
+          }, {
+            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])
+            }
+          }
+        ]
       },
       // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        areaCode: [
+      areaOptions: [],
+      dateRange: [`${lastWeek} 00:00:00`, `${nowDay} 23:59:59`],
+      activeBtn: 'chart', //--chart图表 --table表格
+      btnGroup: [
+        {
+          name: 'chart',
+          icon: 'el-icon-s-data'
+        },
+        {
+          name: 'table',
+          icon: 'el-icon-menu'
+        }],
+      powerChartData: [],
+      powerMaxLoad: '',
+      maxPowerDate: [`${lastWeek} 00:00:00`, `${nowDay} 23:59:59`],
+      maxLoadData: []
+    }
+  },
+  computed: {
+    powerLineOptions () {
+      const xAxisData = this.powerChartData.map(item => `${item.date.substr(5)} ${item.time.substr(0, 5)} `);
+      const yData1 = this.powerChartData.map(item => parseFloat(item.s).toFixed(2));
+      const yData2 = this.powerChartData.map(item => item.p);
+      const yData3 = this.powerChartData.map(item => item.q);
+      return {
+        toolbox: {
+          itemGap: 10,
+          itemSize: 16,
+          right: 10,
+          top: 0,
+          show: true,
+          feature: {
+            magicType: {
+              show: true,
+              type: ['bar', 'line']
+            },
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          formatter: (params) => {
+            var relVal = params[0].name
+            for (var i = 0, l = params.length; i < l; i++) {
+              const unit = 'kW'
+              relVal =`${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
+            }
+            return relVal
+          }
+        },
+        legend: {
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisData
+        },
+        yAxis: {
+          name: 'kW（千瓦）',
+          type: 'value',
+        },
+        dataZoom: [
           {
-            required: true,
-            message: '园区代码不能为空',
-            trigger: 'blur',
+            type: "slider",
+            start: 0,
+            end: 100,
+            height: 10,
+            bottom: '5%',
+            showDetail: false,
+            showDataShadow: false,
+            borderColor: "transparent"
           },
-        ],
-        facsCode: [
           {
-            required: true,
-            message: '设施代码不能为空',
-            trigger: 'blur',
+            type: "inside",
+            start: 0,
+            end: 100,
           },
         ],
-        date: [
+        series: [{
+          name: '视在功率',
+          type: 'line',
+          data: yData1,
+          markLine: {
+            symbol: 'none',
+            silent: true,
+            lineStyle: {normal: {type: 'dashed'}},
+            label: {position: 'end'},
+            data: [
+              {
+                yAxis: this.powerMaxLoad,
+                lineStyle: {width: 1.656, color: '#ff6367'},
+                label: {
+                  show: true,
+                  textStyle: {
+                    color: '#ff6367'
+                  }
+                }
+              },
+            ]
+          },
+          markPoint: {
+            silent: true,
+            data: [
+              {
+                yAxis: this.powerMaxLoad,
+                x: '100%',
+                symbolSize: 0.1,
+                symbolOffset: [0, 0],
+                label: {
+                  textStyle: {color: '#ff6367'},
+                  fontSize: 12,
+                  position: 'left',
+                  formatter: '最高负荷'
+                }
+              },
+            ]
+          },
+        },
+        {
+          name: '有功功率',
+          type: 'line',
+          data: yData2,
+        },
+        {
+          name: '无功功率',
+          type: 'line',
+          data: yData3,
+        },]
+      };
+    },
+    maxLoadLineOptions () {
+      const xAxisData = this.maxLoadData.map(item => item.date);
+      const yData1 = this.maxLoadData.map(item => parseFloat(item.s).toFixed(2));
+      const yData2 = this.maxLoadData.map(item => item.p);
+      const yData3 = this.maxLoadData.map(item => item.q);
+      return {
+        toolbox: {
+          itemGap: 10,
+          itemSize: 16,
+          right: 10,
+          top: 0,
+          show: true,
+          feature: {
+            magicType: {
+              show: true,
+              type: ['bar', 'line']
+            },
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          formatter: (params) => {
+            var relVal = params[0].name
+            for (var i = 0, l = params.length; i < l; i++) {
+              const unit = 'kW'
+              relVal =`${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
+            }
+            return relVal
+          }
+        },
+        legend: {
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisData
+        },
+        yAxis: {
+          name: 'kW（千瓦）',
+          type: 'value',
+        },
+        dataZoom: [
           {
-            required: true,
-            message: '日期不能为空',
-            trigger: 'blur',
+            type: "slider",
+            start: 0,
+            end: 100,
+            height: 10,
+            bottom: '5%',
+            showDetail: false,
+            showDataShadow: false,
+            borderColor: "transparent"
           },
-        ],
-        time: [
           {
-            required: true,
-            message: '时间不能为空',
-            trigger: 'blur',
+            type: "inside",
+            start: 0,
+            end: 100,
           },
         ],
-      },
-    };
+        series: [{
+          name: '视在功率',
+          type: 'line',
+          data: yData1,
+        },
+        {
+          name: '有功功率',
+          type: 'line',
+          data: yData2,
+        },
+        {
+          name: '无功功率',
+          type: 'line',
+          data: yData3,
+        },]
+      };
+    },
+
+  },
+  watch: {
+    // 根据名称筛选区域树
+    areaName (val) {
+      this.$refs.tree.filter(val)
+    }
   },
-  created() {
-    this.getList();
+  async created () {
+    await this.getAreaList()
+    this.getPowerChart()
+    this.getDayMaxLoad()
   },
   methods: {
-    /** 查询电力负荷设施指标列表 */
-    getList() {
-      this.loading = true;
-      listLoadIndex(this.queryParams).then(response => {
-        this.loadIndexList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: null,
-        areaCode: null,
-        facsCode: null,
-        date: null,
-        time: null,
-        voltage: null,
-        amperage: null,
-        power: null,
-      };
-      this.resetForm('form');
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+    btnChange (item) {
+      this.activeBtn = item.name
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm('queryForm');
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id);
-      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;
-      getLoadIndex(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = '修改电力负荷设施指标';
-      });
+    getPowerChart () {
+      this.powerMaxLoad = ''
+      this.powerChartData = []
+      const [startTime, endTime] = this.dateRange
+      const params = {
+        startTime,
+        endTime,
+        areaCode: this.queryParams.areaCode,
+        objType: '1',
+      }
+      getPowerData({
+        ...params,
+        pageNum: 1,
+        pageSize: 999
+      }).then(({code, rows}) => {
+        if (code === 200) {
+          this.powerChartData = rows
+        }
+      })
+      getPowerMaxLoad(params).then(({code, data}) => {
+        if (code === 200) {
+          this.powerMaxLoad = parseFloat(data.s).toFixed(2)
+        }
+      })
     },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs['form'].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateLoadIndex(this.form).then(response => {
-              this.$modal.msgSuccess('修改成功');
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addLoadIndex(this.form).then(response => {
-              this.$modal.msgSuccess('新增成功');
-              this.open = false;
-              this.getList();
-            });
-          }
+    getDayMaxLoad () {
+      const [startTime, endTime] = this.maxPowerDate
+      getPowerDayMaxLoad({
+        startTime,
+        endTime,
+        areaCode: this.queryParams.areaCode,
+        objType: '1',
+      }).then(({code, rows}) => {
+        if (code === 200) {
+          this.maxLoadData = rows || []
         }
-      });
+      })
     },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除电力负荷设施指标编号为"' + ids + '"的数据项？').then(function () {
-        return delLoadIndex(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess('删除成功');
-      }).catch(() => {});
+    // 查询区域列表
+    async getAreaList () {
+      await areaWithFacsCategoryAsTree(this.facsCategory, this.facsSubCategory).then(response => {
+        this.areaOptions = [{
+          id: '-1',
+          label: '全部',
+          children: []
+        }].concat(response.data)
+        this.selectedLabel = '全部'
+        this.queryParams.areaCode = '-1'
+      })
     },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('ems/loadIndex/export', {
-        ...this.queryParams,
-      }, `loadIndex_${new Date().getTime()}.xlsx`);
+    // 筛选节点
+    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.getPowerChart()
+      this.getDayMaxLoad()
+    },
+  }
+}
 </script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+
+.app-container {
+  ::v-deep .el-tabs__content {
+    overflow: initial;
+  }
+}
+
+.ctl-container {
+  display: flex;
+  justify-content: flex-end;
+  margin: 10px 0;
+}
+</style>

ems-ui/src/views/analysis/power/prod.vue

@@ -13,9 +13,10 @@
         </div>
       </el-col>
       <el-col :span="20" :xs="24">
+       <el-card>
         <div class="container-block">
           <div style="display: flex;justify-content: space-between;">
-            <SubTitle :title="`发电量【${selectedLabel}】`" />
+            <SubTitle :title="`发电量-日【${selectedLabel}】`" />
             <el-button-group>
               <el-button v-for="item in btnGroup" :key="item.name" size="mini"
                 :type="item.name === activeBtn ? 'primary' : ''" :icon="item.icon" @click="btnChange(item)" />
@@ -35,8 +36,9 @@
             <el-table-column label="自用电量(kW·h)" align="center" prop="useElecQuantity" />
             <el-table-column label="上网收益(元)" align="center" prop="upElecEarn" />
           </el-table>
-          <BaseChart v-else width="100%" height="500px" :option="elecOptions" />
+          <BaseChart v-else width="100%" height="400px" :option="elecOptions" />
         </div>
+       </el-card>
       </el-col>
     </el-row>
   </div>
@@ -126,15 +128,22 @@ export default {
       return {
         tooltip: {
           trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-            crossStyle: {
-              color: '#999'
+          formatter: (params) => {
+            let relVal = params[0].name
+            for (let i = 0, l = params.length; i < l; i++) {
+              const unit = params[i].seriesName==='上网收益'?'元':'kW·h'
+              relVal =
+                relVal +
+                '<br/>' +
+                params[i].marker +
+                params[i].seriesName +
+                '&nbsp;&nbsp;&nbsp;' +
+                params[i].value + unit
             }
+            return relVal
           }
         },
         legend: {
-          data: ['自用电量', '上网电量', '上网收益']
         },
         xAxis: {
           type: 'category',
@@ -155,35 +164,20 @@ export default {
         ],
         dataZoom: [
           {
-            type: 'slider',
-            realtime: true,
+            type: "slider",
             start: 0,
-            // end: 20,  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
-            height: 5, //组件高度
-            left: '25%', //左边的距离
-            right: '25%', //右边的距离
-            bottom: '0%', //下边的距离
-            show: true, // 是否展示
-            fillerColor: 'rgba(102, 177, 255,1)', // 滚动条颜色
-            borderColor: 'rgba(17, 100, 210, 0.12)',
-            backgroundColor: 'rgba(232,244,255,0.51)', //两边未选中的滑动条区域的颜色
-            handleSize: 0, //两边手柄尺寸
-            showDetail: false, //拖拽时是否展示滚动条两侧的文字
-            zoomLock: true, //是否只平移不缩放
-            moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
-            startValue: 0, // 从头开始。
-            endValue: 8 // 最多展示几个柱体
+            end: 40,
+            height: 10,
+            bottom: '5%',
+            showDetail: false,
+            showDataShadow: false,
+            borderColor: "transparent"
           },
           {
-            type: 'inside', // 支持内部鼠标滚动平移
+            type: "inside",
             start: 0,
-            // end: 20,
-            startValue: 0, // 从头开始。
-            endValue: 5, // 最多5个
-            zoomOnMouseWheel: false, // 关闭滚轮缩放
-            moveOnMouseWheel: true, // 开启滚轮平移
-            moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
-          }
+            end: 40,
+          },
         ],
         series: [
           {

ems-ui/src/views/analysis/power/store.vue

@@ -1,350 +1,279 @@
 <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="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 label="充电电量 " prop="chargeElecQuantity">
-        <el-input
-            v-model="queryParams.chargeElecQuantity"
-            placeholder="请输入充电电量 "
-            clearable
-            @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="放电电量" prop="dischargeElecQuantity">
-        <el-input
-            v-model="queryParams.dischargeElecQuantity"
-            placeholder="请输入放电电量"
-            clearable
-            @keyup.enter.native="handleQuery"
-        />
-      </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>
-
-    <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:elecStoreH: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:elecStoreH: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:elecStoreH:remove']"
-        >删除
-        </el-button>
+    <el-row :gutter="10">
+      <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="1.5">
-        <el-button
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            v-hasPermi="['ems:elecStoreH:export']"
-        >导出
-        </el-button>
+      <el-col :span="20" :xs="24">
+        <el-card>
+          <div class="container-block">
+            <div style="display: flex;justify-content: space-between;">
+              <SubTitle :title="`储能-日【${selectedLabel}】`" />
+              <el-button-group>
+                <el-button v-for="item in btnGroup" :key="item.name" size="mini"
+                  :type="item.name === activeBtn ? 'primary' : ''" :icon="item.icon" @click="btnChange(item)" />
+              </el-button-group>
+            </div>
+            <div class="ctl-container">
+              <el-date-picker v-model="dateRange" type="daterange" @change="getList" :picker-options="pickerOptions"
+                value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                align="right" :clearable="false">
+              </el-date-picker>
+            </div>
+            <el-table v-if="activeBtn == 'table'" v-loading="loading" :data="storeList" max-height="400px">
+              <el-table-column label="日期" align="center" prop="date" width="180">
+              </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>
+            <BaseChart v-else width="100%" height="400px" :option="elecOptions" />
+          </div>
+        </el-card>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-
-    <el-table v-loading="loading" :data="elecStoreHList" @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="areaCode" />
-      <el-table-column label="园区名称" align="center" prop="areaName" />
-      <el-table-column label="设施代码" align="center" prop="facsCode" />
-      <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="充电电量(kW.h)" align="center" prop="chargeElecQuantity" width="130" />
-      <el-table-column label="放电电量(kW.h)" align="center" prop="dischargeElecQuantity" width="130"/>
-      <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:elecStoreH:edit']"
-          >修改
-          </el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['ems:elecStoreH: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"
-    />
-
-    <!-- 添加或修改储能计量-小时对话框 -->
-    <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-date-picker clearable
-                          v-model="form.time"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="充电电量 " prop="chargeElecQuantity">
-          <el-input v-model="form.chargeElecQuantity" placeholder="请输入充电电量 " />
-        </el-form-item>
-        <el-form-item label="放电电量" prop="dischargeElecQuantity">
-          <el-input v-model="form.dischargeElecQuantity" placeholder="请输入放电电量" />
-        </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>
   </div>
 </template>
 
-<script>
-import { addElecStoreH, delElecStoreH, getElecStoreH, listElecStoreH, updateElecStoreH } from '@/api/mgr/elecStoreH';
 
+<script>
+import {getStoreDayList} from '@/api/mgr/elecStoreH.js'
+import {areaWithFacsCategoryAsTree} from '@/api/basecfg/area'
+import BaseChart from '@/components/BaseChart'
+import SubTitle from '@/components/SubTitle'
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {dateFormat, getDayAgoDate} from '@/utils'
 export default {
-  name: 'ElecStoreH',
-  data() {
+  name: 'ElecStoreD',
+  components: {
+    Treeselect,
+    BaseChart,
+    SubTitle
+  },
+  data () {
+    const lastWeek = getDayAgoDate(7)
+    const nowDay = new Date()
     return {
       // 遮罩层
       loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 储能计量-小时表格数据
-      elecStoreHList: [],
-      // 弹出层标题
-      title: '',
-      // 是否显示弹出层
-      open: false,
+      facsCategory: 'E',
+      facsSubCategory: '',
+      storeList: [],
+      areaName: undefined,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      selectedLabel: '',
       // 查询参数
       queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        areaCode: null,
-        facsCode: null,
-        date: null,
-        chargeElecQuantity: null,
-        dischargeElecQuantity: 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])
+            }
+          }, {
+            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])
+            }
+          }
+        ]
       },
       // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        areaCode: [
+      areaOptions: [],
+      dateRange: [dateFormat(lastWeek, 'yyyy-MM-dd'), dateFormat(nowDay, 'yyyy-MM-dd')],
+      activeBtn: 'chart', //--chart图表 --table表格
+      btnGroup: [
+        {
+          name: 'chart',
+          icon: 'el-icon-s-data'
+        },
+        {
+          name: 'table',
+          icon: 'el-icon-menu'
+        }]
+    }
+  },
+  computed: {
+    elecOptions () {
+      const xData = this.storeList.map(item => item.date)
+      const chargeQuantity = this.storeList.map(item => item.chargeElecQuantity)
+      const dischargeQuantity = this.storeList.map(item => item.dischargeElecQuantity)
+      const option = {
+        toolbox: {
+          itemGap: 10,
+          itemSize: 16,
+          right: 10,
+          top: 0,
+          show: true,
+          feature: {
+            magicType: {
+              show: true,
+              type: ['bar', 'line']
+            },
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          formatter: (params) => {
+            var relVal = params[0].name
+            for (var i = 0, l = params.length; i < l; i++) {
+              relVal =
+                relVal +
+                '<br/>' +
+                params[i].marker +
+                params[i].seriesName +
+                '&nbsp;&nbsp;&nbsp;' +
+                params[i].value +
+                'kW·h'
+            }
+            return relVal
+          }
+        },
+        legend: {
+        },
+        xAxis: {
+          type: 'category',
+          data: xData,
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        yAxis: [
           {
-            required: true,
-            message: '园区代码不能为空',
-            trigger: 'blur',
-          },
+            name: 'kW·h（千瓦时）',
+            type: 'value'
+          }
         ],
-        facsCode: [
+        series: [
           {
-            required: true,
-            message: '设施代码不能为空',
-            trigger: 'blur',
+            name: '充电电量',
+            type: 'bar',
+            data: chargeQuantity,
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                color: '#6395FA'
+              }
+            }
           },
-        ],
-        date: [
           {
-            required: true,
-            message: '日期不能为空',
-            trigger: 'blur',
-          },
-        ],
-        time: [
-          {
-            required: true,
-            message: '时间不能为空',
-            trigger: 'blur',
-          },
-        ],
-      },
-    };
+            name: '放电电量',
+            type: 'bar',
+            data: dischargeQuantity,
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                color: '#8CDF6C'
+              }
+            }
+          }
+        ]
+      }
+      return option
+    },
+
+  },
+  watch: {
+    // 根据名称筛选区域树
+    areaName (val) {
+      this.$refs.tree.filter(val)
+    }
   },
-  created() {
-    this.getList();
+  async created () {
+    await this.getAreaList()
+    this.getList()
   },
   methods: {
-    /** 查询储能计量-小时列表 */
-    getList() {
-      this.loading = true;
-      listElecStoreH(this.queryParams).then(response => {
-        this.elecStoreHList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: null,
-        areaCode: null,
-        facsCode: null,
-        date: null,
-        time: null,
-        chargeElecQuantity: null,
-        dischargeElecQuantity: null,
-      };
-      this.resetForm('form');
+    btnChange (item) {
+      this.activeBtn = item.name
     },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+    // 查询区域列表
+    async getAreaList () {
+      await areaWithFacsCategoryAsTree(this.facsCategory, this.facsSubCategory).then(response => {
+        this.areaOptions = [{
+          id: '-1',
+          label: '全部',
+          children: []
+        }].concat(response.data)
+        this.selectedLabel = '全部'
+        this.queryParams.areaCode = '-1'
+      })
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm('queryForm');
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id);
-      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;
-      getElecStoreH(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) {
-            updateElecStoreH(this.form).then(response => {
-              this.$modal.msgSuccess('修改成功');
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addElecStoreH(this.form).then(response => {
-              this.$modal.msgSuccess('新增成功');
-              this.open = false;
-              this.getList();
-            });
-          }
+    /** 查询储能计量-小时列表 */
+    getList () {
+      this.loading = true
+      const {areaCode} = this.queryParams
+      const [startTime, endTime] = this.dateRange
+      getStoreDayList({
+        areaCode,
+        startTime,
+        endTime
+      }).then(({code, data}) => {
+        this.loading = false
+        if (code === 200) {
+          this.storeList = data
         }
-      });
+
+      })
     },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除储能计量-小时编号为"' + ids + '"的数据项？').then(function () {
-        return delElecStoreH(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess('删除成功');
-      }).catch(() => {});
+    // 筛选节点
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
     },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('ems/elecStoreH/export', {
-        ...this.queryParams,
-      }, `elecStoreH_${new Date().getTime()}.xlsx`);
+    // 节点单击事件
+    handleNodeClick (data) {
+      this.queryParams.areaCode = data.id
+      this.selectedLabel = data.label
+      this.getList()
     },
-  },
-};
+  }
+}
 </script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+
+.app-container {
+  ::v-deep .el-tabs__content {
+    overflow: initial;
+  }
+}
+
+.ctl-container {
+  display: flex;
+  justify-content: flex-end;
+  margin: 10px 0;
+}
+</style>

ems-ui/src/views/index.vue

@@ -45,12 +45,12 @@
             </div>
           </div>
           <div class="summay-chart">
-            <SubTitle title="费用" style="padding-left: 30px;"/>
+            <SubTitle title="费用【单位：元】" style="padding-left: 30px;"/>
             <div class="cost">
               <span>总费用</span>
               <span>344元</span>
             </div>
-            <BaseChart  height="250px" :option="useOptions" />
+            <BaseChart  width="100%" height="250px" :option="useOptions" />
           </div>
 
         </div>
@@ -202,17 +202,10 @@ export default {
           top: 0,
           show: true,
           feature: {
-            dataView: {
-              show: true,
-              readOnly: false
-            },
             magicType: {
               show: true,
               type: ['bar', 'line']
             },
-            restore: {
-              show: true
-            },
             saveAsImage: {
               show: true
             }
@@ -363,6 +356,7 @@ export default {
   }
   .summary-item {
     flex: 1;
+    flex-shrink: 0;
     display: flex;
     justify-content: space-around;
 

ems-ui/src/views/largeScreen/index.vue

@@ -7,8 +7,8 @@
       <div class="top-info-area">
         <div class="info-block">
           <img src="@/assets/images/home/tianqi.svg" alt="">
-          <span>晴转多云</span>
-          <span>4°C～20°C</span>
+          <span>{{weather.text}}</span>
+          <span>{{weather.temperature}}</span>
         </div>
       </div>
       <router-view class="sidebar-router-view" name="left"></router-view>
@@ -34,7 +34,8 @@
 <script>
 import autofit from 'autofit.js'
 import Footer from './footer.vue';
-import { dateFormat} from '@/utils/index.js'
+import {dateFormat} from '@/utils/index.js'
+import axios from 'axios';
 export default {
   name: 'LargeScreen',
   data () {
@@ -43,7 +44,11 @@ export default {
         currentTime: '',
         week: '',
       },
-      timer:null
+      timer: null,
+      weather: {
+        text: '',
+        temperature:''
+      }
     };
   },
   components: {
@@ -58,6 +63,7 @@ export default {
       resize: true
     })
     this.getDate();
+    this.getWeather()
     this.timer = setInterval(() => {
       this.getDate();
     }, 1000);
@@ -72,6 +78,14 @@ export default {
       this.nowDay.week = "星期" + "日一二三四五六".charAt(nowTime.getDay());
       this.nowDay.currentTime =dateFormat(nowTime,'yyyy-MM-dd HH:mm:ss')
     },
+    getWeather () {
+      axios.get('https://api.seniverse.com/v3/weather/now.json?key=SoZVeNXSD1AlWok1V&location=nanjing&language=zh-Hans&unit=c').then(({data: { results}}) => {
+        if (results && results.length) {
+          this.weather.text = results[0].now.text
+          this.weather.temperature = `${results[0].now.temperature}°C`
+        }
+      })
+    }
   }
 }
 </script>

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

@@ -1,5 +1,29 @@
 <template>
   <div class="app-container">
+    <el-card>
+      <div class="tips">
+        <el-statistic title="国网接入">
+          <template slot="formatter">
+            10kV
+          </template>
+        </el-statistic>
+        <el-statistic title="光伏总装机">
+          <template slot="formatter">
+            1265.85kW
+          </template>
+        </el-statistic>
+        <el-statistic title="光伏南区装机">
+          <template slot="formatter">
+            660.8kW
+          </template>
+        </el-statistic>
+        <el-statistic title="光伏北区装机">
+          <template slot="formatter">
+            605.05kW
+          </template>
+        </el-statistic>
+      </div>
+    </el-card>
     <el-tabs v-model="activeName" @tab-click="tabClick">
       <el-tab-pane label="总览" name="summery">
         <el-row type="flex" :gutter="20" style="margin-top: 20px">
@@ -194,8 +218,13 @@ export default {
           }
         ]
       },
-
       elecQuantity: {
+        tooltip: {
+          trigger: 'item',
+          formatter: (params) => {
+            return `${params.marker}${params.name}&nbsp;&nbsp;&nbsp;${params.value}kW·h`
+          }
+        },
         series: [
           {
             type: 'pie',
@@ -217,6 +246,12 @@ export default {
         ]
       },
       elecCost: {
+        tooltip: {
+          trigger: 'item',
+          formatter: (params) => {
+            return `${params.marker}${params.name}&nbsp;&nbsp;&nbsp;${params.value}元`
+          }
+        },
         series: [
           {
             type: 'pie',
@@ -237,32 +272,32 @@ export default {
           }
         ]
       },
-
-
-      // elecQuantity: {
-      //   series: [
-      //     {
-      //       type: 'pie',
-      //       data: []
-      //     }
-      //   ]
-      // },
-      // elecCost: {
-      //   series: [
-      //     {
-      //       type: 'pie',
-      //       data: []
-      //     }
-      //   ]
-      // },
-
-
       pvSupplyIndex: {
         unit: '  ',
         xAxis: {
           type: 'category',
           data: []
         },
+        yAxis: {
+          name: 'kW·h（千瓦时）',
+          type: 'value',
+          minInterval: 1,
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+          formatter: (params) => {
+            var relVal = params[0].name
+            for (var i = 0, l = params.length; i < l; i++) {
+              const unit = 'kW·h'
+              relVal =`${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
+            }
+            return relVal
+          }
+        },
+
         series: []
       },
       totalSupply: 0,
@@ -282,6 +317,14 @@ export default {
             crossStyle: {
               color: '#999'
             }
+          },
+          formatter: (params) => {
+            var relVal = params[0].name
+            for (var i = 0, l = params.length; i < l; i++) {
+              const unit = params[i].seriesName==='供电电费'?'元':'kW·h'
+              relVal =`${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
+            }
+            return relVal
           }
         },
         legend: {
@@ -348,6 +391,14 @@ export default {
             crossStyle: {
               color: '#999'
             }
+          },
+          formatter: (params) => {
+            var relVal = params[0].name
+            for (var i = 0, l = params.length; i < l; i++) {
+              const unit = params[i].seriesName==='上网收益'?'元':'kW·h'
+              relVal =`${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
+            }
+            return relVal
           }
         },
         legend: {
@@ -680,9 +731,15 @@ export default {
 </script>
 <style lang="scss" scoped>
 .app-container {
+  padding-top: 10px;
+
   ::v-deep .el-tabs__content {
     overflow: initial;
   }
 }
+
+.tips {
+  display: flex;
+}
 </style>
 <style lang="scss" scoped src="./index.scss"></style>

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

@@ -1,5 +1,14 @@
 <template>
   <div class="app-container">
+    <el-card>
+      <div class="tips">
+        <el-statistic title="总装机">
+          <template slot="formatter">
+            400kW·h
+          </template>
+        </el-statistic>
+      </div>
+    </el-card>
     <el-tabs v-model="activeName" @tab-click="tabClick">
       <el-tab-pane label="总览" name="summary">
         <div class="chartGroup">
@@ -144,6 +153,22 @@ export default {
       const chargeQuantity = this.todayList.map(item => item.chargeElecQuantity)
       const dischargeQuantity = this.todayList.map(item => item.dischargeElecQuantity)
       const option = {
+        toolbox: {
+          itemGap: 10,
+          itemSize: 16,
+          right: 10,
+          top: 0,
+          show: true,
+          feature: {
+            magicType: {
+              show: true,
+              type: ['bar', 'line']
+            },
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -151,6 +176,14 @@ export default {
             crossStyle: {
               color: '#999'
             }
+          },
+          formatter: (params) => {
+            var relVal = params[0].name
+            for (var i = 0, l = params.length; i < l; i++) {
+              const unit = 'kW·h'
+              relVal =`${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
+            }
+            return relVal
           }
         },
         legend: {
@@ -199,7 +232,10 @@ export default {
     chargePieOptions () {
       return {
         tooltip: {
-          trigger: 'item'
+          trigger: 'item',
+          formatter: (params) => {
+            return `${params.marker}${params.name}&nbsp;&nbsp;&nbsp;${params.value}kW·h`
+          }
         },
         series: [
 
@@ -224,7 +260,10 @@ export default {
     disChargePieOptions () {
       return {
         tooltip: {
-          trigger: 'item'
+          trigger: 'item',
+          formatter: (params) => {
+            return `${params.marker}${params.name}&nbsp;&nbsp;&nbsp;${params.value}kW·h`
+          }
         },
         series: [
           {
@@ -262,10 +301,10 @@ export default {
     async getAreaList () {
       await areaWithFacsCategoryAsTree(this.facsCategory, this.facsSubCategory).then(response => {
         this.areaOptions = [{
-            id: '-1',
-            label: '全部',
-            children: []
-          }].concat(response.data)
+          id: '-1',
+          label: '全部',
+          children: []
+        }].concat(response.data)
       })
     },
     /** 查询储能计量-小时列表 */
@@ -344,11 +383,17 @@ export default {
 @import './index.scss';
 
 .app-container {
+  padding-top: 10px;
+
   ::v-deep .el-tabs__content {
     overflow: initial;
   }
 }
 
+.tips {
+  display: flex;
+}
+
 .chartGroup {
   display: flex;
 

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

@@ -5,11 +5,11 @@
         <div class="First">
           <div class="time-range-buttons">
             <el-button :class="{ 'is-active': selectedTimeRange === 'day' }"
-              @click="changeTimeRange('day')">日</el-button>
+              @click="changeTimeRange('day')">今日</el-button>
             <el-button :class="{ 'is-active': selectedTimeRange === 'month' }"
-              @click="changeTimeRange('month')">月</el-button>
+              @click="changeTimeRange('month')">本月</el-button>
             <el-button :class="{ 'is-active': selectedTimeRange === 'year' }"
-              @click="changeTimeRange('year')">年</el-button>
+              @click="changeTimeRange('year')">本年</el-button>
           </div>
           <div class="first-content">
             <div>
@@ -28,6 +28,19 @@
             </div>
           </div>
         </div>
+        <div>
+          <div class="ctl-container">
+            <SubTitle title="平均功率-15分钟" />
+            <el-date-picker v-model="powerDate" type="datetimerange" @change="getPowerChart"
+              :picker-options="pickerOptions" value-format="yyyy-MM-dd hh:mm:ss" range-separator="至"
+              start-placeholder="开始日期" end-placeholder="结束日期" align="right">
+            </el-date-picker>
+          </div>
+          <!--柱状图-->
+          <div class="container-block" style="margin-top: 20px;">
+            <BaseChart width="100%" height="350px" :option="powerLineOptions" />
+          </div>
+        </div>
 
       </el-tab-pane>
       <el-tab-pane v-for="item in facsCategoryOptions" :key="item.code" :label="item.name" :name="item.code">
@@ -44,7 +57,7 @@
         </el-col>
         <el-col :span="20" :xs="24">
           <div class="container-block">
-            <div class="ctl-container" style="display: flex; justify-content: space-between;">
+            <div class="ctl-container">
               <SubTitle :title="`设施汇总电耗【${selectedLabel}】`" />
               <div>
                 <el-select v-model="objCode" placeholder="选择设施" clearable @visible-change="handleObjSelectClick"
@@ -55,7 +68,7 @@
                 </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">
+                  start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" align="right">
                 </el-date-picker>
               </div>
             </div>
@@ -82,29 +95,16 @@
             <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">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.objName }}</span>
-                </template>
-              </el-table-column>>
-              <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>
-
-            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
-              :limit.sync="queryParams.pageSize" @pagination="getList" />
+            <div>
+              <div class="ctl-container">
+                <SubTitle title="平均功率-15分钟" />
+              </div>
+              <!--柱状图-->
+              <div class="container-block" style="margin-top: 20px;">
+                <BaseChart width="100%" height="350px" v-if="activeName !== 'summery'"
+                  :option="equipPowerLineOptions" />
+              </div>
+            </div>
           </div>
         </el-col>
       </el-tab-pane>
@@ -114,21 +114,21 @@
 
 <script>
 import * as echarts from 'echarts/core';
-import {listHSum, sumByFacsH, sumBySubCategoryH} from '@/api/mgr/elecUseH'
+import {listHSum, sumByFacsH, sumBySubCategoryH, getPowerData, getPowerMaxLoad} from '@/api/mgr/elecUseH'
 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 {dateFormat} from '@/utils';
 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',
+  name: 'PowerUse',
   components: {
     Treeselect,
     BaseChart,
@@ -136,6 +136,7 @@ export default {
     SubTitle
   },
   data () {
+    const today = dateFormat(new Date(), 'yyyy-MM-dd')
     return {
       activeName: 'summery',
       // 遮罩层
@@ -228,10 +229,12 @@ export default {
       },
       // 表单参数
       form: {},
-      tableData: [{
-        name: '照明设施',
-        value: '122'
-      }]
+      tableData: [],
+      powerDate: [`${today} 00:00:00`, `${today} 23:59:59`],
+      powerChartData: [],
+      powerMaxLoad: '',
+      equipPowerChartData: [],
+      equipPowerMaxLoad: ''
     }
   },
   watch: {
@@ -248,16 +251,47 @@ export default {
     this.getList()
     this.getsumByFacsH()
     this.getSumBySubCategoryH();
+    this.getPowerChart()
   },
   computed: {
     barChartOptions () {
       const xAxisData = this.hList.map(item => item.time);
       const seriesData = this.hList.map(item => item.elecQuantity);
       return {
+        toolbox: {
+          itemGap: 10,
+          itemSize: 16,
+          right: 10,
+          top: 0,
+          show: true,
+          feature: {
+            magicType: {
+              show: true,
+              type: ['bar', 'line']
+            },
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
+          },
+          formatter: (params) => {
+            var relVal = params[0].name
+            for (var i = 0, l = params.length; i < l; i++) {
+              relVal =
+                relVal +
+                '<br/>' +
+                params[i].marker +
+                params[i].seriesName +
+                '&nbsp;&nbsp;&nbsp;' +
+                params[i].value +
+                'kW·h'
+            }
+            return relVal
           }
         },
         legend: {
@@ -283,9 +317,304 @@ export default {
           }
         }]
       };
+    },
+    powerLineOptions () {
+      const xAxisData = this.powerChartData.map(item => `${item.date.substr(5)} ${item.time.substr(0, 5)} `);
+      const yData1 = this.powerChartData.map(item => parseFloat(item.s).toFixed(2));
+      const yData2 = this.powerChartData.map(item => item.p);
+      const yData3 = this.powerChartData.map(item => item.q);
+      return {
+        toolbox: {
+          itemGap: 10,
+          itemSize: 16,
+          right: 10,
+          top: 0,
+          show: true,
+          feature: {
+            magicType: {
+              show: true,
+              type: ['bar', 'line']
+            },
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          formatter: (params) => {
+            var relVal = params[0].name
+            for (var i = 0, l = params.length; i < l; i++) {
+              relVal =
+                relVal +
+                '<br/>' +
+                params[i].marker +
+                params[i].seriesName +
+                '&nbsp;&nbsp;&nbsp;' +
+                params[i].value +
+                'kW'
+            }
+            return relVal
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisData
+        },
+        yAxis: {
+          name: 'kW（千瓦）',
+          type: 'value',
+        },
+        legend: {},
+        dataZoom: [
+          {
+            type: "slider",
+            start: 0,
+            end: 100,
+            height: 10,
+            bottom: '10%',
+            showDetail: false,
+            showDataShadow: false,
+            borderColor: "transparent"
+          },
+          {
+            type: "inside",
+            start: 0,
+            end: 100,
+          },
+        ],
+        series: [{
+          name: '视在功率',
+          type: 'line',
+          data: yData1,
+          markLine: {
+            symbol: 'none',
+            silent: true,
+            lineStyle: {normal: {type: 'dashed'}},
+            label: {position: 'end'},
+            data: [
+              {
+                yAxis: this.powerMaxLoad,
+                lineStyle: {width: 1.656, color: '#ff6367'},
+                label: {
+                  show: true,
+                  textStyle: {
+                    color: '#ff6367'
+                  }
+                }
+              },
+            ]
+          },
+          markPoint: {
+            silent: true,
+            data: [
+              {
+                yAxis: this.powerMaxLoad,
+                x: '100%',
+                symbolSize: 0.1,
+                symbolOffset: [0, 0],
+                label: {
+                  textStyle: {color: '#ff6367'},
+                  fontSize: 12,
+                  position: 'left',
+                  formatter: '最高负荷'
+                }
+              },
+            ]
+          },
+        },
+        {
+          name: '有功功率',
+          type: 'line',
+          data: yData2,
+        },
+        {
+          name: '无功功率',
+          type: 'line',
+          data: yData3,
+        },
+        ]
+      };
+    },
+    equipPowerLineOptions () {
+      const xAxisData = this.equipPowerChartData.map(item => `${item.date.substr(5)} ${item.time.substr(0, 5)} `);
+      const yData1 = this.equipPowerChartData.map(item => parseFloat(item.s).toFixed(2));
+      const yData2 = this.equipPowerChartData.map(item => item.p);
+      const yData3 = this.equipPowerChartData.map(item => item.q);
+      return {
+        toolbox: {
+          itemGap: 10,
+          itemSize: 16,
+          right: 10,
+          top: 0,
+          show: true,
+          feature: {
+            magicType: {
+              show: true,
+              type: ['bar', 'line']
+            },
+            saveAsImage: {
+              show: true
+            }
+          }
+        },
+        legend: {},
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          formatter: (params) => {
+            var relVal = params[0].name
+            for (var i = 0, l = params.length; i < l; i++) {
+              relVal =
+                relVal +
+                '<br/>' +
+                params[i].marker +
+                params[i].seriesName +
+                '&nbsp;&nbsp;&nbsp;' +
+                params[i].value +
+                'kW'
+            }
+            return relVal
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxisData
+        },
+        yAxis: {
+          name: 'kW（千瓦）',
+          type: 'value',
+        },
+        dataZoom: [
+          {
+            type: "slider",
+            start: 0,
+            end: 100,
+            height: 10,
+            bottom: '10%',
+            showDetail: false,
+            showDataShadow: false,
+            borderColor: "transparent"
+          },
+          {
+            type: "inside",
+            start: 0,
+            end: 100,
+          },
+        ],
+        series: [{
+          name: '视在功率',
+          type: 'line',
+          data: yData1,
+          markLine: {
+            symbol: 'none',
+            silent: true,
+            lineStyle: {normal: {type: 'dashed'}},
+            label: {position: 'end'},
+            data: [
+              {
+                yAxis: this.equipPowerMaxLoad,
+                lineStyle: {width: 1.656, color: '#ff6367'},
+                label: {
+                  show: true,
+                  textStyle: {
+                    color: '#ff6367'
+                  }
+                }
+              },
+            ]
+          },
+          markPoint: {
+            silent: true,
+            data: [
+              {
+                yAxis: this.equipPowerMaxLoad,
+                x: '100%',
+                symbolSize: 0.1,
+                symbolOffset: [0, 0],
+                label: {
+                  textStyle: {color: '#ff6367'},
+                  fontSize: 12,
+                  position: 'left',
+                  formatter: '最高负荷'
+                }
+              },
+            ]
+          },
+        },
+        {
+          name: '有功功率',
+          type: 'line',
+          data: yData2,
+        },
+        {
+          name: '无功功率',
+          type: 'line',
+          data: yData3,
+        },
+        ]
+      };
     }
   },
   methods: {
+    getPowerChart () {
+      this.powerMaxLoad = ''
+      this.powerChartData = []
+      const [startTime, endTime] = this.powerDate
+      const params = {
+        startTime,
+        endTime,
+        areaCode: '-1',
+        objType: '1',
+      }
+      getPowerData({
+        ...params,
+        pageNum: 1,
+        pageSize: 999
+      }).then(({code, rows}) => {
+        if (code === 200) {
+          this.powerChartData = rows
+        }
+      })
+      getPowerMaxLoad(params).then(({code, data}) => {
+        if (code === 200 && data) {
+          this.powerMaxLoad = parseFloat(data.s).toFixed(2)
+        }
+      })
+    },
+    getEquipPowerChart () {
+      this.equipPowerMaxLoad = ''
+      this.equipPowerChartData = []
+      const [startTime, endTime] = this.dateRange
+      const params = {
+        startTime,
+        endTime,
+        areaCode: '-1',
+        objType: '1',
+        facsCategory: 'Z',
+        facsSubCategory: this.activeName,
+        objCode: this.objCode
+      }
+      getPowerData({
+        ...params,
+        pageNum: 1,
+        pageSize: 999
+      }).then(({code, rows}) => {
+        if (code === 200) {
+          this.equipPowerChartData = rows
+        }
+      })
+      getPowerMaxLoad(params).then(({code, data}) => {
+        if (code === 200) {
+          this.equipPowerMaxLoad = parseFloat(data.s).toFixed(2)
+        }
+      })
+    },
     /** 查询用能计量-小时列表 */
     getList () {
       this.loading = true
@@ -296,6 +625,7 @@ export default {
         this.loading = false
       })
       this.getsumByFacsH()
+      this.getEquipPowerChart()
     },
     /**根据设施查询能耗统计 */
     getsumByFacsH () {
@@ -373,7 +703,7 @@ export default {
           formatter: function (params) {
             const {name, value, percent} = params;
             const subentries = params.data.subentry;
-            let tooltipContent = `<div><h4>${name}</h4><p>${value} (${percent}%)</p><ul>`;
+            let tooltipContent = `<div><h4>${name}</h4><p>${value}kW·h (${percent}%)</p><ul>`;
             subentries.forEach(subItem => {
               tooltipContent += `<li>${subItem.name}: ${subItem.value} kW·h</li>`;
             });
@@ -492,11 +822,14 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.is-active {
-  background-color: #409eff;
-  color: white;
+.time-range-buttons {
+  .is-active {
+    background-color: #409eff;
+    color: white;
+  }
 }
 
+
 .first-content {
   display: flex;
   margin-top: 20px;
@@ -512,9 +845,11 @@ export default {
 
 .container-block {
   padding-left: 20px;
-  // .panel-title{
+}
 
-  // }
+.ctl-container {
+  display: flex;
+  justify-content: space-between;
 }
 </style>
 

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

@@ -13,10 +13,10 @@
       </el-col>
       <el-col :span="20" :xs="24">
         <el-tabs v-model="strategyType" @tab-click="strategyTypeChange">
-          <el-tab-pane label="源网协调" name="1"></el-tab-pane>
-          <el-tab-pane label="源荷互动" name="2"></el-tab-pane>
-          <el-tab-pane label="网储互动" name="3"></el-tab-pane>
-          <el-tab-pane label="其他" name="4"></el-tab-pane>
+          <el-tab-pane label="源网策略" name="1"></el-tab-pane>
+          <el-tab-pane label="源荷策略" name="2"></el-tab-pane>
+          <el-tab-pane label="网储策略" name="3"></el-tab-pane>
+          <el-tab-pane label="其他策略" name="4"></el-tab-pane>
         </el-tabs>
 
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">