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

ems-ui/package.json

@@ -38,12 +38,14 @@
     "url": "https://gitee.com/y_project/RuoYi-Cloud.git"
   },
   "dependencies": {
+    "@antv/x6": "^2.18.1",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "^3.25.3",
     "dayjs": "^1.11.12",
     "echarts": "5.4.0",
+    "element-resize-detector": "^1.2.4",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",

ems-ui/src/api/alarm/alarm-info.js

@@ -60,3 +60,16 @@ export const fetchAlarmIndexMonth = (params) => {
 export const fetchAlarmIndexYear = (params) => {
   return get('/alarm-info/alarm/type/index/year', params);
 };
+
+export const fetchSubSysIndexDay = (params) => {
+  return get('/alarm-info/subsys/index/day', params);
+};
+
+export const fetchSubSysIndexMonth = (params) => {
+  return get('/alarm-info/subsys/index/month', params);
+};
+
+
+export const fetchSubSysIndexYear = (params) => {
+  return get('/alarm-info/subsys/index/year', params);
+};

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

@@ -42,3 +42,11 @@ export function delPgSupplyH(id) {
     method: 'delete'
   })
 }
+// 查询光伏供应计量
+export function listPvSupplyH(query) {
+  return request({
+    url: '/ems/prod/list',
+    method: 'get',
+    params: query
+  })
+}

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

@@ -0,0 +1,83 @@
+<template>
+  <div ref="chart" :style="style"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import elementResizeDetectorMaker from 'element-resize-detector'
+export default {
+  name: 'BaseChart',
+  props: {
+    // 图表的宽度
+    width: {
+      type: String,
+      default: '600px'
+    },
+    // 图表的高度
+    height: {
+      type: String,
+      default: '400px'
+    },
+    // 图表的配置
+    option: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  computed: {
+    style() {
+      return {
+        width: this.width,
+        height: this.height
+      }
+    }
+  },
+  watch: {
+    option: {
+      deep: true,
+      handler() {
+        this.initChart()
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.handleResize()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    // 销毁图表实例
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    // 初始化图表
+    initChart() {
+      // 如果没有图表实例，则创建一个新的实例
+      if (!this.chart) {
+        this.chart = echarts.init(this.$refs.chart)
+      }
+      this.chart.setOption(this.option)
+    },
+    // 处理图表容器大小变化
+    handleResize() {
+      const erd = elementResizeDetectorMaker()
+      // 监听图表容器的大小变化
+      erd.listenTo(this.$refs.chart, () => {
+        // 改变图表尺寸
+        this.chart.resize()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
+

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

@@ -51,6 +51,7 @@ const opts = {
   },
   yAxis: {
     type: 'value',
+    minInterval: 1,
   },
   series: [],
 };
@@ -104,7 +105,7 @@ export default {
         legend.push(item.name);
       });
       option.legend.data = legend;
-      option.xAxis.data = this.optCfg.categories;
+      option.xAxis = this.optCfg.xAxis;
       option && this.refCharts && this.refCharts.setOption(option);
       this.refCharts.resize();
     },

ems-ui/src/views/analysis/device/warn.vue

@@ -52,8 +52,14 @@
                 align="center"
             />
             <el-table-column
+                prop="alarmTime"
+                label="时间"
+                align="center"
+            />
+            <el-table-column
                 label="操作"
                 align="center"
+                width="100"
             >
               <template slot-scope="scope">
                 <el-dropdown @command="(cmd)=>handleCommand(cmd, scope.row)"
@@ -63,7 +69,9 @@
             <i class="el-icon-arrow-down el-icon--right"></i>
           </span>
                   <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item :command="ALARM_STATE.disposing.code" v-if="scope.row.alarmState === ALARM_STATE.new.value">开始处理</el-dropdown-item>
+                    <el-dropdown-item :command="ALARM_STATE.disposing.code"
+                                      v-if="scope.row.alarmState === ALARM_STATE.new.value">开始处理
+                    </el-dropdown-item>
                     <el-dropdown-item :command="ALARM_STATE.disposed.code">已处理</el-dropdown-item>
                     <el-dropdown-item :command="ALARM_STATE.dissolved.code">已消散</el-dropdown-item>
                   </el-dropdown-menu>
@@ -74,31 +82,15 @@
         </BlockTable>
       </el-col>
       <el-col :span="12">
-        <BlockTable title="告警统计" :table-data="alarmTableData">
-          <template v-slot:columns>
-            <el-table-column
-                type="index"
-                label="序号"
-                align="center"
-            />
-            <el-table-column
-                prop="warnType"
-                label="告警部位"
-                align="center"
-            />
-            <el-table-column
-                prop="warnFacsType"
-                label="告警能源类型"
-                align="center"
-            />
-            <el-table-column
-                prop="date"
-                label="日期"
-                align="center"
+        <BarChartBlock title="告警统计报表" :opt-cfg="subSysIndex">
+          <template v-slot:filters>
+            <SwitchTag
+                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
+                :defTag="dateType"
+                :tagClick="onSubSysDateTypeSwitch"
             />
-
           </template>
-        </BlockTable>
+        </BarChartBlock>
       </el-col>
     </el-row>
   </div>
@@ -107,7 +99,8 @@
 <script>
 
 import {
-  fetchAlarmIndexDay, fetchAlarmIndexMonth, fetchAlarmIndexYear, listAlarmInfo, updateAlarmInfo,
+  fetchAlarmIndexDay, fetchAlarmIndexMonth, fetchAlarmIndexYear, fetchSubSysIndexDay, fetchSubSysIndexMonth,
+  fetchSubSysIndexYear, listAlarmInfo, updateAlarmInfo,
 } from '@/api/alarm/alarm-info';
 import { ApiCode } from '@/api/apiEmums';
 import Block from '@/components/Block/block.vue';
@@ -151,18 +144,15 @@ export default {
         },
         series: [],
       },
-      alarmTableData: [
-        {
-          warnType: '研发部照明',
-          warnFacsType: '电',
-          date: '2024年6月1日 12:00:00',
-        },
-        {
-          warnType: '研发部照明',
-          warnFacsType: '电',
-          date: '2024年6月1日 12:00:00',
+      subSysIndex: {
+        unit: '  ',
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [],
         },
-      ],
+        series: [],
+      },
       realTimeTableData: [],
     };
   },
@@ -217,6 +207,35 @@ export default {
       this.devcWarningHis.xAxis.data = xaxis;
       this.devcWarningHis.series = series;
     },
+    async onSubSysDateTypeSwitch(item) {
+      if (!this.selectedServiceArea) {
+        return;
+      }
+      if (item.val === 'day') {
+        const xaxis = DateTool.getTime(60);
+        const { data } = await fetchSubSysIndexDay({
+          areaCode: this.selectedServiceArea.val,
+        });
+        const series = this.subSysIndexToSeries(data, xaxis);
+        this.subSysIndex.xAxis.data = xaxis;
+        this.subSysIndex.series = series;
+        return;
+      }
+      if (item.val === 'month') {
+        const xaxis = DateTool.getDayOfRange(
+            dayjs().subtract(1, 'month'), dayjs(), DateTool.DateFormat.YYYY_MM_DD);
+        const { data } = await fetchSubSysIndexMonth({ areaCode: this.selectedServiceArea.val });
+        const series = this.subSysIndexToSeries(data, xaxis);
+        this.subSysIndex.xAxis.data = xaxis;
+        this.subSysIndex.series = series;
+        return;
+      }
+      const xaxis = DateTool.getMonthsOfYearAgo();
+      const { data } = await fetchSubSysIndexYear({ areaCode: this.selectedServiceArea.val });
+      const series = this.subSysIndexToSeries(data, xaxis);
+      this.subSysIndex.xAxis.data = xaxis;
+      this.subSysIndex.series = series;
+    },
     toSeries(data, xaxis) {
       const dayGroup = _.groupBy(data, 'alarmType');
       const series = [];
@@ -237,6 +256,26 @@ export default {
       });
       return series;
     },
+
+    subSysIndexToSeries(data, xaxis) {
+      const dayGroup = _.groupBy(data, 'systemCode');
+      const series = [];
+      Object.keys(dayGroup).forEach((subSysCode) => {
+        let ds = {};
+        let systemName = dayGroup[subSysCode][0].systemName;
+        dayGroup[subSysCode].forEach(item => {
+          ds[item.dateIndex] = item.cnt;
+        });
+        let seriesData = [];
+        xaxis.forEach((item) => seriesData.push(ds[item] || 0));
+        series.push({
+          name: systemName,
+          type: 'bar',
+          data: seriesData,
+        });
+      });
+      return series;
+    },
     async initData() {
       const {
         rows,
@@ -259,6 +298,7 @@ export default {
     },
     queryCharts() {
       this.onDateTypeSwitch(this.dateType);
+      this.onSubSysDateTypeSwitch(this.dateType);
       this.getRealTimeAlarm();
     },
     async getRealTimeAlarm() {

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

@@ -1,337 +1,307 @@
 <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="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 label="计量类型" prop="meterType">
-        <el-select v-model="queryParams.meterType" placeholder="请选择计量类型" clearable>
-          <el-option
-              v-for="dict in dict.type.meter_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </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:pgSupplyH: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:pgSupplyH: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:pgSupplyH:remove']"
-        >删除
-        </el-button>
-      </el-col>
-
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="pgSupplyHList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="服务区" align="center" prop="areaShortName" />
-      <el-table-column label="设施" align="center" prop="facsName" />
-      <el-table-column label="日期" align="center" prop="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="计量类型" align="center" prop="meterType"/>
-      <el-table-column label="单位电价" align="center" prop="meterUnitPrice" />
-      <el-table-column label="用电量" align="center" prop="useElecQuantity" />
-      <el-table-column label="用电电费" align="center" prop="useElecCost" />
-      <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:pgSupplyH:edit']"
-          >修改
-          </el-button>
-          <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @click="handleDelete(scope.row)"
-              v-hasPermi="['ems:pgSupplyH: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-time-picker v-model="form.time" format="HH:mm" value-format="HH:mm:00"
-                          :picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '100%'}"
-                          placeholder="请选择时间选择" clearable>
-          </el-time-picker>
-        </el-form-item>
-        <el-form-item label="时间序列" prop="timeIndex">
-          <el-input v-model="form.timeIndex" placeholder="请输入时间序列" />
-        </el-form-item>
-        <el-form-item label="计量类型" prop="meterType">
-          <el-input v-model="form.meterType" placeholder="请输入计量类型" />
-        </el-form-item>
-        <el-form-item label="计量单价" prop="meterUnitPrice">
-          <el-input v-model="form.meterUnitPrice" placeholder="请输入计量单价" />
-        </el-form-item>
-        <el-form-item label="用电量" prop="useElecQuantity">
-          <el-input v-model="form.useElecQuantity" placeholder="请输入用电量" />
-        </el-form-item>
-        <el-form-item label="用电电费" prop="useElecCost">
-          <el-input v-model="form.useElecCost" 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>
+    <el-tabs v-model="activeName" @tab-click="getList">
+      <el-tab-pane label="电网" name="first">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
+          <el-form-item label="服务区" prop="areaCode">
+            <el-select v-model="queryParams.areaCode" placeholder="请选择服务区" clearable>
+              <el-option v-for="item in areaOptions" :key="item.id" :label="item.label" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <BaseChart width="100%" height="300px" :option="elecOptions" />
+        <el-table v-loading="loading" :data="pgSupplyHList">
+          <el-table-column label="服务区" align="center" prop="areaShortName" />
+          <el-table-column label="设施" align="center" prop="facsName" />
+          <el-table-column label="日期" align="center" prop="date" width="180">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="时间" align="center" prop="time">
+            <template slot-scope="scope">
+              <span>{{ scope.row.time }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="时间序列" align="center" prop="timeIndex" />
+          <el-table-column label="计量类型" align="center" prop="meterType" />
+          <el-table-column label="单位电价" align="center" prop="meterUnitPrice" />
+          <el-table-column label="用电量" align="center" prop="useElecQuantity" />
+          <el-table-column label="用电电费" align="center" prop="useElecCost" />
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="光伏" name="second">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
+          <el-form-item label="服务区" prop="areaCode">
+            <el-select v-model="queryParams.areaCode" placeholder="请选择服务区" clearable>
+              <el-option v-for="item in areaOptions" :key="item.id" :label="item.label" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <BaseChart width="100%" height="300px" :option="pvOptions" />
+        <el-table v-loading="loading" :data="pvSupplyHList">
+          <el-table-column label="服务区" align="center" prop="areaShortName" />
+          <el-table-column label="设施" align="center" prop="facsName" />
+          <el-table-column label="日期" align="center" prop="date" width="180">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="时间" align="center" prop="time">
+            <template slot-scope="scope">
+              <span>{{ scope.row.time }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="时间序列" align="center" prop="timeIndex" />
+          <el-table-column label="单位电价" align="center" prop="upUnitPrice" />
+          <el-table-column label="发电量" align="center" prop="genElecQuantity" />
+          <el-table-column label="自用电量" align="center" prop="useElecQuantity" />
+          <el-table-column label="上网电量" align="center" prop="upElecQuantity" />
+          <el-table-column label="上网收益" align="center" prop="upElecEarn" />
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+    <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
   </div>
 </template>
 
 <script>
-import { listPgSupplyH, getPgSupplyH, delPgSupplyH, addPgSupplyH, updatePgSupplyH } from '@/api/mgr/pgSupplyH';
-
+import { listPgSupplyH, listPvSupplyH } from '@/api/mgr/pgSupplyH'
+import BaseChart from '@/components/BaseChart'
+import { areaTreeSelect } from '@/api/basecfg/area'
 export default {
   name: 'PgSupplyH',
   dicts: ['meter_type'],
+  components: {
+    BaseChart
+  },
   data() {
     return {
+      activeName: 'first',
       // 遮罩层
       loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
       // 总条数
       total: 0,
-      // 电网供应计量-小时表格数据
       pgSupplyHList: [],
-      // 弹出层标题
-      title: '',
-      // 是否显示弹出层
-      open: false,
+      pvSupplyHList: [],
       // 查询参数
       queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        date: null,
-        meterType: null,
+        // pageNum: 1,
+        // pageSize: 10,
+        areaCode: null
       },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        areaCode: [
+      areaOptions: [],
+      elecData: []
+    }
+  },
+  computed: {
+    elecOptions() {
+      const xData = this.pgSupplyHList.map(item => item.time)
+      const quantity = this.pgSupplyHList.map(item => item.useElecQuantity)
+      const cost = this.pgSupplyHList.map(item => item.useElecCost)
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        legend: {
+          data: ['用电量', '用电电费']
+        },
+        xAxis: {
+          type: 'category',
+          data: xData,
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        yAxis: [
           {
-            required: true,
-            message: '园区代码不能为空',
-            trigger: 'blur',
+            name: 'kW-h（千瓦时）',
+            type: 'value'
           },
+          {
+            name: '￥（元）',
+            type: 'value'
+          }
         ],
-        facsCode: [
+        series: [
           {
-            required: true,
-            message: '设施代码不能为空',
-            trigger: 'blur',
+            name: '用电量',
+            type: 'bar',
+            data: quantity,
+            barWidth: 30,
+            itemStyle: {
+              normal: {
+                color: '#6395FA'
+              }
+            }
           },
-        ],
-        date: [
           {
-            required: true,
-            message: '日期不能为空',
-            trigger: 'blur',
+            name: '用电电费',
+            type: 'line',
+            yAxisIndex: 1,
+            data: cost,
+            showSymbol: true,
+            itemStyle: {
+              normal: {
+                color: '#5BD9A5'
+              }
+            }
+          }
+        ]
+      }
+      return option
+    },
+    pvOptions() {
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        legend: {
+          data: ['自用电量', '上网电量','上网收益']
+        },
+        xAxis: {
+          type: 'category',
+          data: this.pvSupplyHList.map(item => item.time),
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        yAxis: [
+          {
+            name: 'kW-h（千瓦时）',
+            type: 'value'
           },
+          {
+            name: '￥（元）',
+            type: 'value'
+          }
         ],
-        time: [
+        series: [
           {
-            required: true,
-            message: '时间不能为空',
-            trigger: 'blur',
+            name: '自用电量',
+            type: 'bar',
+            stack: '总数',
+            barWidth: 30,
+            label: {
+              show: false,
+              position: 'insideRight'
+            },
+            data: this.pvSupplyHList.map(item => item.useElecQuantity),
+            itemStyle: {
+              normal: {
+                color: '#6395FA',
+                label: {
+                  show: true, // 开启显示
+                  position: 'top', // 在上方显示
+                  textStyle: {
+                    // 数值样式
+                    color: '#000',
+                    fontSize: 14,
+                    fontWeight: 600
+                  }
+                }
+              }
+            }
           },
-        ],
-        timeIndex: [
           {
-            required: true,
-            message: '时间序列不能为空',
-            trigger: 'blur',
+            name: '上网电量',
+            type: 'bar',
+            stack: '总数',
+            barWidth: 30,
+            label: {
+              show: false,
+              position: 'insideRight'
+            },
+            data: this.pvSupplyHList.map(item => item.upElecQuantity),
+            itemStyle: {
+              normal: {
+                color: '#8CDF6C',
+                label: {
+                  show: true, // 开启显示
+                  position: 'top', // 在上方显示
+                  textStyle: {
+                    // 数值样式
+                    color: '#000',
+                    fontSize: 14,
+                    fontWeight: 600
+                  }
+                }
+              }
+            }
           },
-        ],
-      },
-    };
+          {
+            name: '上网收益',
+            type: 'line',
+            yAxisIndex:1,
+            data: this.pvSupplyHList.map(item => item.upElecEarn),
+            smooth: false
+          }
+        ]
+      }
+      return option
+    }
   },
   created() {
-    this.getList();
+    this.getList()
+    this.getAreaList('Area')
   },
   methods: {
-    /** 查询电网供应计量-小时列表 */
-    getList() {
-      this.loading = true;
-      listPgSupplyH(this.queryParams).then(response => {
-        this.pgSupplyHList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+    // 查询区域列表
+    getAreaList(tier) {
+      areaTreeSelect(tier).then(response => {
+        this.areaOptions = response.data
+      })
     },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: null,
-        areaCode: null,
-        facsCode: null,
-        date: null,
-        time: null,
-        timeIndex: null,
-        meterType: null,
-        meterUnitPrice: null,
-        useElecQuantity: null,
-        useElecCost: null
-      };
-      this.resetForm('form');
+    getList() {
+      this.loading = true
+      if (this.activeName === 'first') {
+        listPgSupplyH(this.queryParams).then(response => {
+          this.pgSupplyHList = response.rows
+          this.loading = false
+        })
+      } else {
+        listPvSupplyH(this.queryParams).then(response => {
+          this.pvSupplyHList = response.data
+          this.loading = false
+        })
+      }
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.getList()
     },
     /** 重置按钮操作 */
     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;
-      getPgSupplyH(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) {
-            updatePgSupplyH(this.form).then(response => {
-              this.$modal.msgSuccess('修改成功');
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addPgSupplyH(this.form).then(response => {
-              this.$modal.msgSuccess('新增成功');
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除电网供应计量-小时编号为"' + ids + '"的数据项？').then(function () {
-        return delPgSupplyH(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess('删除成功');
-      }).catch(() => {});
+      this.resetForm('queryForm')
+      this.handleQuery()
     }
-  },
-};
+  }
+}
 </script>
+<style lang="scss" scoped>
+.app-container {
+  ::v-deep .el-tabs__content {
+    overflow: initial;
+  }
+}
+</style>