|
@@ -4,46 +4,42 @@
|
|
|
<el-tab-pane label="总览" name="summery">
|
|
|
<el-row type="flex" :gutter="20" style="margin-top: 20px">
|
|
|
<el-col :span="12">
|
|
|
- <PieChartBlock title="当日供电量【单位:kWh】" :opt-cfg="elecQuantity" >
|
|
|
+ <PieChartBlock title="当日供电量【单位:kWh】" :opt-cfg="elecQuantity">
|
|
|
</PieChartBlock>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <PieChartBlock title="当日电费【单位:元】" :opt-cfg="elecCost" >
|
|
|
+ <PieChartBlock title="当日电费【单位:元】" :opt-cfg="elecCost">
|
|
|
</PieChartBlock>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row type="flex" :gutter="20" style="margin-top: 20px">
|
|
|
<el-col :span="24">
|
|
|
- <BarChartBlock title="当日供电量柱状图" :opt-cfg="pvSupplyIndex"/>
|
|
|
+ <BarChartBlock title="当日供电量柱状图" :opt-cfg="pvSupplyIndex" />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="市电" name="first">
|
|
|
<el-col :span="4" :xs="24">
|
|
|
<div class="head-container">
|
|
|
- <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small"
|
|
|
- prefix-icon="el-icon-search"
|
|
|
- style="margin-bottom: 20px"
|
|
|
- />
|
|
|
+ <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
|
|
|
+ style="margin-bottom: 20px" />
|
|
|
</div>
|
|
|
<div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
|
|
|
<el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false"
|
|
|
- :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
|
|
|
- @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;"
|
|
|
- />
|
|
|
+ :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
|
|
|
+ @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;" />
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="20" :xs="24">
|
|
|
<div class="container-block">
|
|
|
- <SubTitle :title="`时段供电数据【${selectedLabel}】`"/>
|
|
|
- <BaseChart width="100%" height="300px" :option="elecOptions"/>
|
|
|
+ <SubTitle :title="`时段供电数据【${selectedLabel}】`" />
|
|
|
+ <BaseChart width="100%" height="300px" :option="elecOptions" />
|
|
|
</div>
|
|
|
<div class="container-block">
|
|
|
<div class="ctl-container">
|
|
|
<el-date-picker v-model="dateRange" type="datetimerange" @change="getList"
|
|
|
- value-format="yyyy-MM-dd hh:mm:ss" :picker-options="pickerOptions" range-separator="至"
|
|
|
- start-placeholder="开始日期" end-placeholder="结束日期" align="right"
|
|
|
- >
|
|
|
+ value-format="yyyy-MM-dd hh:mm:ss" :picker-options="pickerOptions" range-separator="至"
|
|
|
+ start-placeholder="开始日期" end-placeholder="结束日期" align="right">
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
<el-table v-loading="loading" :data="pgSupplyHList">
|
|
@@ -62,43 +58,37 @@
|
|
|
<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-column label="单位电价(¥)" align="center" prop="meterUnitPrice" />
|
|
|
+ <el-table-column label="供电量(kWh)" 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"
|
|
|
- />
|
|
|
+ :page.sync="queryParams.pageNum" @pagination="getList" />
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="光伏" name="second">
|
|
|
<el-col :span="4" :xs="24">
|
|
|
<div class="head-container">
|
|
|
- <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small"
|
|
|
- prefix-icon="el-icon-search"
|
|
|
- style="margin-bottom: 20px"
|
|
|
- />
|
|
|
+ <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
|
|
|
+ style="margin-bottom: 20px" />
|
|
|
</div>
|
|
|
<div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
|
|
|
<el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false"
|
|
|
- :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
|
|
|
- @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;"
|
|
|
- />
|
|
|
+ :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
|
|
|
+ @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;" />
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="20" :xs="24">
|
|
|
<div class="container-block">
|
|
|
- <SubTitle :title="`时段发电数据【${selectedLabel}】`"/>
|
|
|
- <BaseChart width="100%" height="300px" :option="pvOptions"/>
|
|
|
+ <SubTitle :title="`时段发电数据【${selectedLabel}】`" />
|
|
|
+ <BaseChart width="100%" height="300px" :option="pvOptions" />
|
|
|
</div>
|
|
|
<div class="container-block">
|
|
|
<div class="ctl-container">
|
|
|
<el-date-picker v-model="dateRange" type="datetimerange" @change="getList" :picker-options="pickerOptions"
|
|
|
- value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- align="right"
|
|
|
- >
|
|
|
+ value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
|
|
|
+ align="right">
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
<el-table v-loading="loading" :data="pvSupplyHList">
|
|
@@ -112,14 +102,13 @@
|
|
|
<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-column label="总发电量(kWh)" align="center" prop="genElecQuantity" />
|
|
|
+ <el-table-column label="自用电量(kWh)" align="center" prop="useElecQuantity" />
|
|
|
+ <el-table-column label="上网电量(kWh)" 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"
|
|
|
- />
|
|
|
+ :page.sync="queryParams.pageNum" @pagination="getList" />
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-tab-pane>
|
|
@@ -128,15 +117,15 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { ApiCode } from '@/api/apiEmums'
|
|
|
-import { areaWithFacsCategoryAsTree } from '@/api/basecfg/area'
|
|
|
-import { get } from '@/api/commonApi'
|
|
|
-import { listPgSupplyH, listPvSupplyH } from '@/api/mgr/pgSupplyH'
|
|
|
+import {ApiCode} from '@/api/apiEmums'
|
|
|
+import {areaWithFacsCategoryAsTree} 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 SubTitle from '@/components/SubTitle'
|
|
|
-import { DateTool } from '@/utils/DateTool'
|
|
|
+import {DateTool} from '@/utils/DateTool'
|
|
|
import dayjs from 'dayjs'
|
|
|
|
|
|
export default {
|
|
@@ -148,7 +137,7 @@ export default {
|
|
|
BaseChart,
|
|
|
SubTitle
|
|
|
},
|
|
|
- data() {
|
|
|
+ data () {
|
|
|
return {
|
|
|
activeName: 'summery',
|
|
|
// 遮罩层
|
|
@@ -180,7 +169,7 @@ export default {
|
|
|
shortcuts: [
|
|
|
{
|
|
|
text: '最近一周',
|
|
|
- onClick(picker) {
|
|
|
+ onClick (picker) {
|
|
|
const end = new Date()
|
|
|
const start = new Date()
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
|
@@ -188,7 +177,7 @@ export default {
|
|
|
}
|
|
|
}, {
|
|
|
text: '最近一个月',
|
|
|
- onClick(picker) {
|
|
|
+ onClick (picker) {
|
|
|
const end = new Date()
|
|
|
const start = new Date()
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
|
@@ -196,7 +185,7 @@ export default {
|
|
|
}
|
|
|
}, {
|
|
|
text: '最近三个月',
|
|
|
- onClick(picker) {
|
|
|
+ onClick (picker) {
|
|
|
const end = new Date()
|
|
|
const start = new Date()
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
|
@@ -281,7 +270,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- elecOptions() {
|
|
|
+ elecOptions () {
|
|
|
const xData = this.pgSupplyTodayList.map(item => item.time)
|
|
|
const quantity = this.pgSupplyTodayList.map(item => item.useElecQuantity)
|
|
|
const cost = this.pgSupplyTodayList.map(item => item.useElecCost)
|
|
@@ -307,7 +296,7 @@ export default {
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
- name: 'kW·h(千瓦时)',
|
|
|
+ name: 'kWh(千瓦时)',
|
|
|
type: 'value'
|
|
|
},
|
|
|
{
|
|
@@ -343,14 +332,14 @@ export default {
|
|
|
normal: {
|
|
|
color: '#5BD9A5',
|
|
|
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
return option
|
|
|
},
|
|
|
- pvOptions() {
|
|
|
+ pvOptions () {
|
|
|
const option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
@@ -373,7 +362,7 @@ export default {
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
- name: 'kW·h(千瓦时)',
|
|
|
+ name: 'kWh(千瓦时)',
|
|
|
type: 'value'
|
|
|
},
|
|
|
{
|
|
@@ -448,21 +437,21 @@ export default {
|
|
|
},
|
|
|
watch: {
|
|
|
// 根据名称筛选区域树
|
|
|
- areaName(val) {
|
|
|
+ areaName (val) {
|
|
|
this.$refs.tree.filter(val)
|
|
|
}
|
|
|
},
|
|
|
- async created() {
|
|
|
+ async created () {
|
|
|
await this.getSummery()
|
|
|
},
|
|
|
methods: {
|
|
|
- getLabelContentForElecQuantity() {
|
|
|
+ getLabelContentForElecQuantity () {
|
|
|
return `总供电{totalSupply|${this.totalSupply} kWh}`;
|
|
|
},
|
|
|
- getLabelContentForElecCost() {
|
|
|
+ getLabelContentForElecCost () {
|
|
|
return `供电成本{totalCost|${this.totalCost} 元}`;
|
|
|
},
|
|
|
- tabClick() {
|
|
|
+ tabClick () {
|
|
|
if (this.activeName !== 'summery') {
|
|
|
this.dateRange = [dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00), dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59)]
|
|
|
this.queryParams.areaCode = '-1'
|
|
@@ -474,11 +463,11 @@ export default {
|
|
|
this.getSummery()
|
|
|
}
|
|
|
},
|
|
|
- async getSummery() {
|
|
|
+ async getSummery () {
|
|
|
await this.getHSummery()
|
|
|
await this.getThisDaySummery()
|
|
|
},
|
|
|
- async getThisDaySummery() {
|
|
|
+ async getThisDaySummery () {
|
|
|
const {
|
|
|
data,
|
|
|
code
|
|
@@ -536,7 +525,7 @@ export default {
|
|
|
this.totalCost = totalCost;
|
|
|
},
|
|
|
|
|
|
- async getHSummery() {
|
|
|
+ async getHSummery () {
|
|
|
const {
|
|
|
data,
|
|
|
code
|
|
@@ -586,7 +575,7 @@ export default {
|
|
|
this.pvSupplyIndex.series = series
|
|
|
this.pvSupplyIndex.xAxis.data = xaxis
|
|
|
},
|
|
|
- getTodayList() {
|
|
|
+ getTodayList () {
|
|
|
if (this.activeName === 'first') {
|
|
|
areaWithFacsCategoryAsTree('W', this.facsSubCategory).then(response => {
|
|
|
this.areaOptions = [{
|
|
@@ -623,7 +612,7 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
- getList() {
|
|
|
+ getList () {
|
|
|
this.loading = true
|
|
|
this.queryParams.startRecTime = ''
|
|
|
this.queryParams.endRecTime = ''
|
|
@@ -635,21 +624,21 @@ export default {
|
|
|
if (this.activeName === 'first') {
|
|
|
listPgSupplyH(
|
|
|
{
|
|
|
- startRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00),
|
|
|
- endRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59),
|
|
|
+ startRecTime: this.queryParams.startRecTime,
|
|
|
+ endRecTime: this.queryParams.endRecTime,
|
|
|
areaCode: this.queryParams.areaCode,
|
|
|
pageNum: 1,
|
|
|
pageSize: 999
|
|
|
}
|
|
|
- ).then(response => {
|
|
|
+ ).then(response => {
|
|
|
this.pgSupplyHList = response.rows
|
|
|
this.total = response.total
|
|
|
this.loading = false
|
|
|
})
|
|
|
} else {
|
|
|
listPvSupplyH({
|
|
|
- startRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00),
|
|
|
- endRecTime: dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59),
|
|
|
+ startRecTime: this.queryParams.startRecTime,
|
|
|
+ endRecTime: this.queryParams.endRecTime,
|
|
|
areaCode: this.queryParams.areaCode,
|
|
|
pageNum: 1,
|
|
|
pageSize: 999
|
|
@@ -661,23 +650,23 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 筛选节点
|
|
|
- filterNode(value, data) {
|
|
|
+ filterNode (value, data) {
|
|
|
if (!value) return true
|
|
|
return data.label.indexOf(value) !== -1
|
|
|
},
|
|
|
// 节点单击事件
|
|
|
- handleNodeClick(data) {
|
|
|
+ handleNodeClick (data) {
|
|
|
this.queryParams.areaCode = data.id
|
|
|
this.selectedLabel = data.label
|
|
|
this.handleQuery()
|
|
|
},
|
|
|
/** 搜索按钮操作 */
|
|
|
- handleQuery() {
|
|
|
+ handleQuery () {
|
|
|
this.queryParams.pageNum = 1
|
|
|
this.getTodayList()
|
|
|
this.getList()
|
|
|
},
|
|
|
- getMeterTypeName(meterType) {
|
|
|
+ getMeterTypeName (meterType) {
|
|
|
const meterTypeMap = {
|
|
|
'-1': '低谷电',
|
|
|
'0': '平峰电',
|