|
|
@@ -28,6 +28,19 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div>
|
|
|
+ <div class="ctl-container">
|
|
|
+ <SubTitle title="平均功率【15min】" />
|
|
|
+ <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,8 +95,17 @@
|
|
|
<div class="container-block" style="margin-top: 20px;">
|
|
|
<BaseChart width="100%" height="300px" :option="barChartOptions" />
|
|
|
</div>
|
|
|
+ <div>
|
|
|
+ <div class="ctl-container">
|
|
|
+ <SubTitle title="平均功率【15min】" />
|
|
|
+ </div>
|
|
|
+ <!--柱状图-->
|
|
|
+ <div class="container-block" style="margin-top: 20px;">
|
|
|
+ <BaseChart width="100%" height="350px" :option="equipPowerLineOptions" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!--表格-->
|
|
|
- <el-table v-loading="loading" :data="hList">
|
|
|
+ <!-- <el-table v-loading="loading" :data="hList">
|
|
|
<el-table-column label="设施" align="center" prop="objName">
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ scope.row.objName }}</span>
|
|
|
@@ -104,7 +126,7 @@
|
|
|
</el-table>
|
|
|
|
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
|
|
- :limit.sync="queryParams.pageSize" @pagination="getList" />
|
|
|
+ :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-tab-pane>
|
|
|
@@ -114,21 +136,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 +158,7 @@ export default {
|
|
|
SubTitle
|
|
|
},
|
|
|
data () {
|
|
|
+ const today = dateFormat(new Date(), 'yyyy-MM-dd')
|
|
|
return {
|
|
|
activeName: 'summery',
|
|
|
// 遮罩层
|
|
|
@@ -228,10 +251,12 @@ export default {
|
|
|
},
|
|
|
// 表单参数
|
|
|
form: {},
|
|
|
- tableData: [{
|
|
|
- name: '照明设施',
|
|
|
- value: '122'
|
|
|
- }]
|
|
|
+ tableData: [],
|
|
|
+ powerDate: [`${today} 00:00:00`, `${today} 23:59:59`],
|
|
|
+ powerChartData: [],
|
|
|
+ powerMaxLoad: '',
|
|
|
+ equipPowerChartData: [],
|
|
|
+ equipPowerMaxLoad:''
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -248,12 +273,29 @@ 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: {
|
|
|
@@ -283,9 +325,257 @@ export default {
|
|
|
}
|
|
|
}]
|
|
|
};
|
|
|
+ },
|
|
|
+ powerLineOptions () {
|
|
|
+ const xAxisData = this.powerChartData.map(item => `${item.date.substr(5)} ${item.time.substr(0,5)} `);
|
|
|
+ const yData = this.powerChartData.map(item => item.p);
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['平均功率']
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ // axisLabel: {
|
|
|
+ // interval: 0,
|
|
|
+ // // margin: 50, //刻度标签与轴线之间的距离。
|
|
|
+ // },
|
|
|
+ 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",
|
|
|
+ // realtime: true,
|
|
|
+ start: 0,
|
|
|
+ end: 100,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [{
|
|
|
+ name: '平均功率',
|
|
|
+ type: 'line',
|
|
|
+ data: yData,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#6395FA'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ symbol: 'none',
|
|
|
+ silent: true,
|
|
|
+ lineStyle: {normal: {type: 'dashed'}},
|
|
|
+ label: {position: 'start'},
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ yAxis: this.powerMaxLoad,
|
|
|
+ lineStyle: {width: 1.656, color: '#ff6367'},
|
|
|
+ label: {show: false}
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ markPoint: {
|
|
|
+ silent: true,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ yAxis: this.powerMaxLoad,
|
|
|
+ x: '100%',
|
|
|
+ symbolSize: 0.1,
|
|
|
+ label: {
|
|
|
+ textStyle: {color: '#F59A23'},
|
|
|
+ fontSize: 12,
|
|
|
+ position: 'left',
|
|
|
+ formatter: '最高负荷'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ equipPowerLineOptions () {
|
|
|
+ const xAxisData = this.equipPowerChartData.map(item => `${item.date.substr(5)} ${item.time.substr(0,5)} `);
|
|
|
+ const yData = this.equipPowerChartData.map(item => item.p);
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['平均功率']
|
|
|
+ },
|
|
|
+ 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: yData,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#6395FA'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ symbol: 'none',
|
|
|
+ silent: true,
|
|
|
+ lineStyle: {normal: {type: 'dashed'}},
|
|
|
+ label: {position: 'start'},
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ yAxis: this.equipPowerMaxLoad,
|
|
|
+ lineStyle: {width: 1.656, color: '#ff6367'},
|
|
|
+ label: {show: false}
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ markPoint: {
|
|
|
+ silent: true,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ yAxis: this.equipPowerMaxLoad,
|
|
|
+ x: '100%',
|
|
|
+ symbolSize: 0.1,
|
|
|
+ label: {
|
|
|
+ textStyle: {color: '#F59A23'},
|
|
|
+ fontSize: 12,
|
|
|
+ position: 'left',
|
|
|
+ formatter: '最高负荷'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ }]
|
|
|
+ };
|
|
|
}
|
|
|
},
|
|
|
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) {
|
|
|
+ this.powerMaxLoad = data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getEquipPowerChart () {
|
|
|
+ this.equipPowerMaxLoad = ''
|
|
|
+ this.equipPowerChartData=[]
|
|
|
+ const [ startTime,endTime] = this.dateRange
|
|
|
+ const params = {
|
|
|
+ startTime,
|
|
|
+ endTime,
|
|
|
+ areaCode: '-1',
|
|
|
+ ObjType: '1',
|
|
|
+ facsCategory: 'Z',
|
|
|
+ subCategory: 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 = data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
/** 查询用能计量-小时列表 */
|
|
|
getList () {
|
|
|
this.loading = true
|
|
|
@@ -296,6 +586,7 @@ export default {
|
|
|
this.loading = false
|
|
|
})
|
|
|
this.getsumByFacsH()
|
|
|
+ this.getEquipPowerChart()
|
|
|
},
|
|
|
/**根据设施查询能耗统计 */
|
|
|
getsumByFacsH () {
|
|
|
@@ -492,10 +783,13 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.is-active {
|
|
|
+.time-range-buttons{
|
|
|
+ .is-active {
|
|
|
background-color: #409eff;
|
|
|
color: white;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
.first-content {
|
|
|
display: flex;
|
|
|
@@ -512,9 +806,11 @@ export default {
|
|
|
|
|
|
.container-block {
|
|
|
padding-left: 20px;
|
|
|
- // .panel-title{
|
|
|
+}
|
|
|
|
|
|
- // }
|
|
|
+.ctl-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
</style>
|
|
|
|
