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

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

@@ -1,4 +1,4 @@
-import request from '@/utils/request'
+import request from '@/utils/request';
 
 // 查询电网供应计量-小时列表
 export function listPgSupplyH(query) {

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

@@ -31,7 +31,7 @@ export default {
     },
     limit: {
       type: Number,
-      default: 20
+      default: 10
     },
     pageSizes: {
       type: Array,

ems-ui/src/utils/DateTool.js

@@ -12,6 +12,8 @@ export const DateTool = {
     YYYY_MM_DD_HH_mm_ss_SSS: 'YYYY-MM-DD HH:mm:ss.SSS',
     YYYYMMDD: 'YYYYMMDD',
     YYYYMMDDHHmmss: 'YYYYMMDDHHmmss',
+    YYYY_MM_DD_00_00_00: 'YYYY-MM-DD 00:00:00',
+    YYYY_MM_DD_23_59_59: 'YYYY-MM-DD 23:59:59',
   },
   /**
    * 获取当天时间刻度

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

@@ -0,0 +1,10 @@
+
+.container-block {
+  .ctl-container {
+    width: 100%;
+    margin-bottom: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}

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

@@ -1,82 +1,155 @@
 <template>
   <div class="app-container">
-    <el-tabs v-model="activeName" @tab-click="getList">
+    <el-tabs v-model="activeName" @tab-click="tabClick">
+      <el-tab-pane label="总览" name="summery">
+        <el-row type="flex" :gutter="20" style="margin-top: 20px">
+          <el-col :span="12">
+            <PieChartBlock
+                title="单日供电量（单位：kw·h）"
+                :opt-cfg="elecQuantity"
+            />
+          </el-col>
+          <el-col :span="12">
+            <PieChartBlock title="当日电费（单位：元）" :opt-cfg="elecCost"></PieChartBlock>
+          </el-col>
+        </el-row>
+        <el-row type="flex" :gutter="20" style="margin-top: 20px">
+          <el-col :span="24">
+            <BarChartBlock
+                title="单日供电量柱状图"
+                :opt-cfg="devcNum"
+            />
+          </el-col>
+        </el-row>
+      </el-tab-pane>
       <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="请选择服务区" @change="handleQuery">
-              <el-option v-for="item in areaOptions" :key="item.areaCode" :label="item.areaName" :value="item.areaCode" />
-            </el-select>
-          </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="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="meterType" >
-            <template slot-scope="scope">
-              <span>{{ getMeterTypeName(scope.row.meterType) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="单位电价(￥)" align="center" prop="meterUnitPrice" />
-          <el-table-column label="供电量(kW-h)" align="center" prop="useElecQuantity" />
-          <el-table-column label="供电电费(￥)" align="center" prop="useElecCost" />
-        </el-table>
+        <div class="container-block">
+          <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="请选择服务区" @change="handleQuery">
+                <el-option label="南北区汇总" value="" />
+                <el-option v-for="item in areaOptions" :key="item.areaCode" :label="item.areaName"
+                           :value="item.areaCode" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <BaseChart width="100%" height="300px" :option="elecOptions" />
+        </div>
+        <div class="container-block">
+          <div class="ctl-container">
+            <el-date-picker
+                v-model="dateRange"
+                type="datetimerange"
+                :picker-options="pickerOptions"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                align="right">
+            </el-date-picker>
+          </div>
+          <el-table v-loading="loading" :data="pgSupplyHList">
+            <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="meterType">
+              <template slot-scope="scope">
+                <span>{{ getMeterTypeName(scope.row.meterType) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="单位电价(￥)" align="center" prop="meterUnitPrice" />
+            <el-table-column label="供电量(kW-h)" align="center" prop="useElecQuantity" />
+            <el-table-column label="供电电费(￥)" align="center" prop="useElecCost" />
+          </el-table>
+          <pagination :total="total"
+                      :page-size.sync="queryParams.pageSize"
+                      :page-sizes="[10,20,50]" :page.sync="queryParams.pageNum"
+                      @pagination="getList" />
+        </div>
       </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="请选择服务区" @change="handleQuery">
-              <el-option v-for="item in areaOptions" :key="item.areaCode" :label="item.areaName" :value="item.areaCode" />
-            </el-select>
-          </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="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="总发电量(kW-h)" align="center" prop="genElecQuantity" />
-          <el-table-column label="自用电量(kW-h)" align="center" prop="useElecQuantity" />
-          <el-table-column label="上网电量(kW-h)" align="center" prop="upElecQuantity" />
-          <el-table-column label="上网收益(￥)" align="center" prop="upElecEarn" />
-        </el-table>
+        <div class="container-block">
+          <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="请选择服务区" @change="handleQuery">
+                <el-option label="南北区汇总" value="" />
+                <el-option v-for="item in areaOptions" :key="item.areaCode" :label="item.areaName"
+                           :value="item.areaCode" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <BaseChart width="100%" height="300px" :option="pvOptions" />
+        </div>
+        <div class="container-block">
+          <div class="ctl-container">
+            <el-date-picker
+                v-model="dateRange"
+                type="datetimerange"
+                :picker-options="pickerOptions"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                align="right">
+            </el-date-picker>
+          </div>
+          <el-table v-loading="loading" :data="pvSupplyHList">
+            <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="总发电量(kW-h)" align="center" prop="genElecQuantity" />
+            <el-table-column label="自用电量(kW-h)" align="center" prop="useElecQuantity" />
+            <el-table-column label="上网电量(kW-h)" align="center" prop="upElecQuantity" />
+            <el-table-column label="上网收益(￥)" align="center" prop="upElecEarn" />
+          </el-table>
+          <pagination :total="total"
+                      :page-size.sync="queryParams.pageSize"
+                      :page-sizes="[10,20,50]" :page.sync="queryParams.pageNum"
+                      @pagination="getList" />
+        </div>
       </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, listPvSupplyH } from '@/api/mgr/pgSupplyH'
-import BaseChart from '@/components/BaseChart'
-import { areaWithFacsCategory } from '@/api/basecfg/area'
+import { ApiCode } from '@/api/apiEmums';
+import * as areaApi from '@/api/basecfg/area';
+import { areaWithFacsCategory } from '@/api/basecfg/area';
+import { get } from '@/api/commonApi';
+import { listPgSupplyH, listPvSupplyH } from '@/api/mgr/pgSupplyH';
+import BaseChart from '@/components/BaseChart';
+import BarChartBlock from '@/components/Block/charts/BarChartBlock.vue';
+import PieChartBlock from '@/components/Block/charts/PieChartBlock.vue';
+import { DateTool } from '@/utils/DateTool';
+import dayjs from 'dayjs';
+
 export default {
   name: 'PgSupplyH',
   dicts: ['meter_type'],
   components: {
-    BaseChart
+    BarChartBlock,
+    PieChartBlock,
+    BaseChart,
   },
   data() {
     return {
-      activeName: 'first',
+      activeName: 'summery',
       // 遮罩层
       loading: true,
       // 总条数
@@ -84,77 +157,127 @@ export default {
       facsCategory: '',
       facsSubCategory: '',
       pgSupplyHList: [],
+      pgSupplyTodayList: [],
       pvSupplyHList: [],
+      pvSupplyTodayList: [],
       // 查询参数
       queryParams: {
-        areaCode: null
+        areaCode: '',
+        startRecTime: dayjs().subtract(1, 'month').format(DateTool.DateFormat.YYYY_MM_DD_HH_mm),
+        endRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_HH_mm),
       },
       areaOptions: [],
-      elecData: []
-    }
+      elecData: [],
+      dateRange: [dayjs().subtract(1, 'day'), dayjs()],
+      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]);
+            },
+          },
+        ],
+      },
+      elecQuantity: {
+        series: [
+          {
+            type: 'pie',
+            data: [],
+          },
+        ],
+      },
+      elecCost: {
+        series: [
+          {
+            type: 'pie',
+            data: [],
+          },
+        ],
+      },
+    };
   },
   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 xData = this.pgSupplyTodayList.map(item => item.time);
+      const quantity = this.pgSupplyTodayList.map(item => item.useElecQuantity);
+      const cost = this.pgSupplyTodayList.map(item => item.useElecCost);
       const option = {
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'cross',
             crossStyle: {
-              color: '#999'
-            }
-          }
+              color: '#999',
+            },
+          },
         },
         legend: {
-          data: ['供电量', '供电电费']
+          data: ['供电量', '供电电费'],
         },
         xAxis: {
           type: 'category',
-          data: xData,
+          data: xData.reverse(),
           axisPointer: {
-            type: 'shadow'
-          }
+            type: 'shadow',
+          },
         },
         yAxis: [
           {
             name: 'kW-h（千瓦时）',
-            type: 'value'
+            type: 'value',
           },
           {
             name: '￥（元）',
-            type: 'value'
-          }
+            type: 'value',
+          },
         ],
         series: [
           {
             name: '用电量',
             type: 'bar',
-            data: quantity,
+            data: quantity.reverse(),
             barWidth: 30,
             itemStyle: {
               normal: {
-                color: '#6395FA'
-              }
-            }
+                color: '#6395FA',
+              },
+            },
           },
           {
             name: '用电电费',
             type: 'line',
             yAxisIndex: 1,
-            data: cost,
+            data: cost.reverse(),
             showSymbol: true,
             itemStyle: {
               normal: {
-                color: '#5BD9A5'
-              }
-            }
-          }
-        ]
-      }
-      return option
+                color: '#5BD9A5',
+              },
+            },
+          },
+        ],
+      };
+      return option;
     },
     pvOptions() {
       const option = {
@@ -163,29 +286,29 @@ export default {
           axisPointer: {
             type: 'cross',
             crossStyle: {
-              color: '#999'
-            }
-          }
+              color: '#999',
+            },
+          },
         },
         legend: {
-          data: ['自用电量', '上网电量', '上网收益']
+          data: ['自用电量', '上网电量', '上网收益'],
         },
         xAxis: {
           type: 'category',
-          data: this.pvSupplyHList.map(item => item.time),
+          data: this.pvSupplyTodayList.map(item => item.time).reverse(),
           axisPointer: {
-            type: 'shadow'
-          }
+            type: 'shadow',
+          },
         },
         yAxis: [
           {
             name: 'kW-h（千瓦时）',
-            type: 'value'
+            type: 'value',
           },
           {
             name: '￥（元）',
-            type: 'value'
-          }
+            type: 'value',
+          },
         ],
         series: [
           {
@@ -195,9 +318,9 @@ export default {
             barWidth: 30,
             label: {
               show: false,
-              position: 'insideRight'
+              position: 'insideRight',
             },
-            data: this.pvSupplyHList.map(item => item.useElecQuantity),
+            data: this.pvSupplyTodayList.map(item => item.useElecQuantity).reverse(),
             itemStyle: {
               normal: {
                 color: '#6395FA',
@@ -208,11 +331,11 @@ export default {
                     // 数值样式
                     color: '#000',
                     fontSize: 14,
-                    fontWeight: 600
-                  }
-                }
-              }
-            }
+                    fontWeight: 600,
+                  },
+                },
+              },
+            },
           },
           {
             name: '上网电量',
@@ -221,9 +344,9 @@ export default {
             barWidth: 30,
             label: {
               show: false,
-              position: 'insideRight'
+              position: 'insideRight',
             },
-            data: this.pvSupplyHList.map(item => item.upElecQuantity),
+            data: this.pvSupplyTodayList.map(item => item.upElecQuantity).reverse(),
             itemStyle: {
               normal: {
                 color: '#8CDF6C',
@@ -234,56 +357,155 @@ export default {
                     // 数值样式
                     color: '#000',
                     fontSize: 14,
-                    fontWeight: 600
-                  }
-                }
-              }
-            }
+                    fontWeight: 600,
+                  },
+                },
+              },
+            },
           },
           {
             name: '上网收益',
             type: 'line',
             yAxisIndex: 1,
-            data: this.pvSupplyHList.map(item => item.upElecEarn),
-            smooth: false
-          }
-        ]
+            data: this.pvSupplyTodayList.map(item => item.upElecEarn).reverse(),
+            smooth: false,
+          },
+        ],
+      };
+      return option;
+    },
+  },
+  watch: {
+    dateRange: function (newVal, oldVal) {
+      if (newVal.length === 0) {
+        return;
       }
-      return option
-    }
+      this.queryParams.startRecTime = dayjs(newVal[0]).format(DateTool.DateFormat.YYYY_MM_DD_HH_mm_ss);
+      this.queryParams.endRecTime = dayjs(newVal[1]).format(DateTool.DateFormat.YYYY_MM_DD_HH_mm_ss);
+      this.getList();
+    },
   },
   async created() {
-    this.facsCategory = 'W'
-    await this.getAreaList()
-    this.getList()
+    // this.facsCategory = 'W';
+    await this.getAreaList();
+    await this.getSummery();
+    // this.getList();
   },
   methods: {
     // 查询区域列表
     async getAreaList() {
-      await areaWithFacsCategory(this.facsCategory, this.facsSubCategory).then(response => {
-        this.areaOptions = response.data
-        this.queryParams.areaCode = this.areaOptions[0].areaCode
-      })
+      const {
+        rows,
+        total,
+      } = await areaApi.listArea({
+        pageNum: 1,
+        pageSize: 10,
+      });
+      this.areaOptions = rows;
+    },
+    tabClick() {
+      if (this.activeName !== 'summery') {
+        this.dateRange = [dayjs().subtract(1, 'month'), dayjs()];
+        this.queryParams = {
+          startRecTime: dayjs().subtract(1, 'month').format(DateTool.DateFormat.YYYY_MM_DD_HH_mm),
+          endRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_HH_mm),
+          areaCode: '',
+          pageNum: 1,
+          pageSize: 10,
+        };
+        this.getList();
+        return;
+      }
+      this.getSummery();
+    },
+    async getSummery() {
+      await this.getHSummery();
+      await this.getThisDaySummery();
+    },
+    async getThisDaySummery() {
+      const {
+        data,
+        code,
+      } = await get('pg/supply/hour/summery/this/day');
+      if (ApiCode.SUCCESS !== code || !data) {
+        this.elecQuantity.series[0].data = [];
+        this.elecCost.series[0].data = [];
+        return;
+      }
+      const {
+        pv,
+        supply,
+      } = data;
+      this.elecQuantity.series[0].data = [
+        {
+          value: supply?.quantity,
+          name: '电网',
+        },
+        {
+          value: pv?.useQuantity,
+          name: '光伏',
+        },
+      ];
+
+      this.elecCost.series[0].data = [
+        {
+          value: supply?.cost,
+          name: '实际电费',
+        },
+        {
+          value: pv?.upEarn,
+          name: '节省电费',
+        },
+      ];
+
+    },
+    async getHSummery() {
+      const {
+        data,
+        code,
+      } = await get('pg/supply/hour/summery/h');
+
     },
     getList() {
-      this.loading = true
+      this.loading = true;
       if (this.activeName === 'first') {
-        areaWithFacsCategory('W', '')
+        areaWithFacsCategory('W', '');
         listPgSupplyH(this.queryParams).then(response => {
-          this.pgSupplyHList = response.rows
-          this.loading = false
-        })
+          this.pgSupplyHList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+        listPgSupplyH({
+          startRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00),
+          endRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59),
+          areaCode: this.queryParams.areaCode,
+          pageNum: 1,
+          pageSize: 999,
+        }).then(response => {
+          this.pgSupplyTodayList = response.rows;
+        });
       } else {
-        areaWithFacsCategory('E', '')
+        areaWithFacsCategory('E', '');
         listPvSupplyH(this.queryParams).then(response => {
-          this.pvSupplyHList = response.data
-          this.loading = false
-        })
+          this.pvSupplyHList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+
+        listPvSupplyH({
+          startRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00),
+          endRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59),
+          areaCode: this.queryParams.areaCode,
+          pageNum: 1,
+          pageSize: 999,
+        }).then(response => {
+          this.pvSupplyTodayList = response.rows;
+        });
       }
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.getList()
+      this.getList();
     },
     getMeterTypeName(meterType) {
       const meterTypeMap = {
@@ -293,9 +515,9 @@ export default {
         '2': '尖峰电',
       };
       return meterTypeMap[meterType] || '平峰电';
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .app-container {
@@ -304,3 +526,5 @@ export default {
   }
 }
 </style>
+<style lang="scss" src="./index.scss">
+</style>