<template>
|
<div class="module-wrapper">
|
<el-row :gutter="layout.gutter" class="full-height">
|
<el-col :span="layout.left" class="full-height">
|
<layout-box no-bg>
|
<div class="layout-content">
|
<flex-box title="节约电费统计折线图" size="mini">
|
<div slot="tools">
|
<el-input class="flex-box-input" size="mini" v-model="priceRatio">
|
<template slot="prepend">电价系数</template>
|
</el-input>
|
<el-select v-model="timeNum" size="mini">
|
<el-option
|
v-for="(item, key) in timeNums" :key="'key'+key"
|
:label="item.label" :value="item.value"></el-option>
|
</el-select>
|
<el-button size="mini" type="primary" @click="getPeakPrice">查询</el-button>
|
<el-button size="mini" type="success" @click="exportExcel">导出</el-button>
|
</div>
|
<dot-line ref="priceDotLine" :show-area="true"></dot-line>
|
</flex-box>
|
</div>
|
</layout-box>
|
</el-col>
|
<el-col :span="layout.right" class="full-height">
|
<layout-box no-bg>
|
<div class="layout-content">
|
<div class="layout-content-top">
|
<flex-box title="电价分布图" size="mini">
|
<ele-price-bar ref="elePriceBar"></ele-price-bar>
|
</flex-box>
|
</div>
|
<div class="layout-content-bottom">
|
<flex-box title="节约电费统计数据" size="mini">
|
<el-table
|
stripe
|
size="small"
|
:data="tblData"
|
height="100%">
|
<el-table-column
|
prop="num"
|
align="center"
|
label="编号"
|
width="80">
|
</el-table-column>
|
<el-table-column
|
prop="date"
|
align="center"
|
label="日期">
|
</el-table-column>
|
<el-table-column
|
prop="price"
|
align="center"
|
label="节约电费(度/元)">
|
</el-table-column>
|
</el-table>
|
</flex-box>
|
</div>
|
</div>
|
</layout-box>
|
</el-col>
|
</el-row>
|
<form
|
:action="exportInfo.action" method="post"
|
ref="all_picture" enctype="multipart/form-data">
|
<input type="hidden" id="exPageName" name="pageName" value="ePrice" />
|
<input type="hidden" name="ePriceAnalysisPic" ref="ePriceAnalysisPic" value="" />
|
<input type="hidden" name="ePriceDistributeMapPic" ref="ePriceDistributeMapPic" value="" />
|
<input type="hidden" name="ePriceAnalysisData" ref="ePriceAnalysisData" value="" />
|
</form>
|
</div>
|
</template>
|
|
<script>
|
import FlexBox from "@/components/FlexBox";
|
import LayoutBox from "@/pages/dataTest/components/layout-box";
|
import ElePriceBar from "@/components/chart/elePriceBar";
|
import DotLine from "@/components/chart/line/dotLine";
|
import {formatSeconds} from "@/assets/js/tools";
|
import getItemByKey from "@/assets/js/tools/getItemByKey";
|
export default {
|
name: "elePriceTpl",
|
props: {
|
name: {
|
type: String,
|
default: "",
|
},
|
devId: {
|
type: [String, Number],
|
default: 0,
|
},
|
batt: {
|
type: Object,
|
default() {
|
return {}
|
}
|
},
|
},
|
components: {
|
DotLine,
|
ElePriceBar,
|
LayoutBox,
|
FlexBox
|
},
|
data() {
|
let baseURL = this.$axios.defaults.baseURL;
|
baseURL = baseURL ? baseURL : "";
|
return {
|
flag: "elePrice",
|
layout: {
|
gutter: 16,
|
left: 15,
|
right: 9,
|
},
|
priceRatio: 1,
|
timeNum: 1,
|
timeNums: [
|
{
|
key: 1,
|
value: 1,
|
num: 1, // 按月统计
|
label: '最近7天',
|
days: 7,
|
},
|
{
|
key: 2,
|
value: 2,
|
num: 1, // 按月统计
|
label: '最近30天',
|
days: 30,
|
},
|
{
|
key: 3,
|
value: 3,
|
num: 1, // 按月统计
|
label: '最近3个月',
|
days: 30*3,
|
},
|
{
|
key: 4,
|
value: 4,
|
num: 1, // 按月统计
|
label: '最近6个月',
|
days: 30*6,
|
},
|
{
|
key: 5,
|
value: 5,
|
num: 3, // 按年统计
|
label: "最近1年",
|
days: 365,
|
}
|
],
|
tblData: [],
|
exportInfo: {
|
action: baseURL + "EchartPictureDowload.servlet",
|
ePriceAnalysisPic: "",
|
ePriceDistributeMapPic: "",
|
ePriceAnalysisData: {
|
num: 1,
|
tmp_starttime: "2021-10-14",
|
ele_price: 0,
|
},
|
}
|
}
|
},
|
watch: {
|
name() {
|
this.searchData();
|
},
|
devId() {
|
this.priceRatio = this.batt.priceFactor?this.batt.priceFactor:0;
|
this.searchData();
|
}
|
},
|
methods: {
|
resize() {
|
this.$nextTick(()=>{
|
this.$refs.elePriceBar.resize();
|
this.$refs.priceDotLine.resize();
|
});
|
},
|
searchData() {
|
//console.log(this.batt);
|
},
|
getPeakPrice() { // 统计削峰填谷价格
|
let priceRatio = this.priceRatio;
|
let reg = /^[0-9]+.?[0-9]*$/;
|
if(!reg.test(priceRatio)) {
|
this.$layer.msg("电价系数必须为数字");
|
return;
|
}
|
|
let batt = this.batt;
|
let timeNum = getItemByKey(this.timeNum, this.timeNums);
|
let num = timeNum.num;
|
let recordTime1 = new Date().format("yyyy-MM-dd");
|
let recordTime = new Date(new Date().getTime()-timeNum.days*24*3600*1000).format("yyyy-MM-dd");
|
// 构造查询条件
|
let searchParams = {
|
BattGroupId: batt.BattGroupId,
|
num: num,
|
record_time: recordTime,
|
record_time1: recordTime1,
|
priceFactor: priceRatio,
|
};
|
// 查询后台
|
this.$apis.dcdc.getPeakPrice(searchParams).then(res=>{
|
let rs = JSON.parse(res.data.result);
|
let data = [];
|
if(rs.code == 1) {
|
data = rs.data;
|
}else {
|
this.$layer.msg(rs.msg);
|
}
|
let formatData = this.getFormatData(data, num, priceRatio);
|
this.tblData = formatData.xData.map((item,key)=> {
|
let price = formatData.yData[key];
|
return {
|
num: key+1,
|
date: item,
|
price:price,
|
}
|
}).reverse().map((item,key)=>{
|
item.num = key+1;
|
return item;
|
});
|
this.$refs.priceDotLine.setData(formatData);
|
}).catch(error => {
|
let formatData = this.getFormatData([], num);
|
this.$refs.priceDotLine.setData(formatData);
|
});
|
},
|
getFormatData(data, type, ratio) {
|
let xData = [];
|
let yData = [];
|
ratio = ratio?ratio:1;
|
data.map(item=>{
|
let times = item.perid_Time.split(" ");
|
let time = times[0];
|
switch (type) {
|
case 1:
|
time = new Date(time).format("yyyy-MM-dd");
|
break;
|
case 3:
|
time = new Date(time).format("yyyy-MM");
|
break;
|
}
|
xData.push(time);
|
yData.push((item.price*ratio).toHold(4));
|
});
|
return {
|
xData,
|
yData
|
}
|
},
|
searchElePrices() {
|
let batt = this.batt;
|
let loading = this.$layer.loading();
|
// 查询电价
|
this.$apis.dcdc
|
.searchElePrices(batt.tmp_id)
|
.then((res) => {
|
// 关闭弹出框
|
this.$layer.close(loading);
|
|
let rs = JSON.parse(res.data.result);
|
let data = [];
|
if (rs.code == 1) {
|
data = rs.data;
|
}
|
let barData = data.map((child) => {
|
return {
|
value: [
|
"2022-10-01 " + child.tmp_starttime,
|
"2022-10-01 " + child.tmp_stoptime,
|
child.ele_price,
|
"电费",
|
],
|
itemStyle: {
|
color: "#49A1FA",
|
},
|
};
|
});
|
|
// 设置电价的图表
|
this.$refs.elePriceBar.setData({
|
title: "",
|
data: barData,
|
});
|
})
|
.catch((error) => {
|
// 关闭弹出框
|
this.$layer.close(loading);
|
});
|
},
|
// 导出报表
|
exportExcel() {
|
if (this.tblData.length == 0) {
|
this.$layer.msg('暂无数据导出！');
|
return false;
|
}
|
|
// 格式化导出数据
|
let tblData = this.tblData.map(item=>{
|
let tmp = {
|
num: item.num,
|
analysisDate: item.date,
|
ele_price: item.price
|
};
|
return tmp;
|
});
|
// 表格数据
|
this.$refs.ePriceAnalysisData.value = JSON.stringify(tblData);
|
// 电价分布图
|
this.$refs.ePriceDistributeMapPic.value = this.$refs.elePriceBar.getDataURL();
|
// 电价分析图
|
this.$refs.ePriceAnalysisPic.value = this.$refs.priceDotLine.getDataURL();
|
|
// 提交表单
|
this.$refs.all_picture.submit();
|
}
|
},
|
computed: {
|
|
},
|
mounted() {
|
// 设置电价系数
|
this.priceRatio = this.batt.priceFactor?this.batt.priceFactor:0;
|
// 信息修改
|
this.searchData();
|
this.getPeakPrice();
|
this.searchElePrices();
|
},
|
beforeDestroy() {
|
}
|
}
|
</script>
|
|
<style scoped>
|
.module-wrapper {
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
}
|
.layout-content {
|
box-sizing: border-box;
|
padding: 12px 16px 16px 16px;
|
height: 100%;
|
}
|
.layout-content-top,
|
.layout-content-bottom {
|
box-sizing: border-box;
|
height: 50%;
|
}
|
.layout-content-top {
|
padding-bottom: 8px;
|
}
|
.layout-content-bottom {
|
padding-top: 8px;
|
}
|
.layout-price-bar,
|
.layout-cap-line {
|
box-sizing: border-box;
|
}
|
.layout-price-bar {
|
height: 40%;
|
}
|
.layout-cap-line {
|
height: 60%;
|
}
|
.flex-box-input {
|
width: 150px;
|
margin-right: 8px;
|
}
|
</style>
|
