657 lines
18 KiB
Vue
657 lines
18 KiB
Vue
<template>
|
||
<view class="energyAnalysis">
|
||
<view class="energyAnalysis-header">
|
||
<view class="energyAnalysis-header-name">{{projectData.projectName}}</view>
|
||
<picker mode="selector" :range="devArr" range-key="deviceLabel" @change="changeDeviceFn">
|
||
<view class="energyAnalysis-header-equipmentId" >
|
||
设备:{{deviceName}}
|
||
<view class="changeIcon">
|
||
<u-icon name="arrow-down" color="#fff" :size="32"></u-icon>
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
<view class="energyAnalysis-header-electricity-consumption">
|
||
<view class="electricity-consumption-info">
|
||
<view class="electricity-consumption-info-number">{{currentMonth}}</view>
|
||
<view class="">本月累计用电量</view>
|
||
</view>
|
||
<view class="electricity-consumption-info">
|
||
<view class="electricity-consumption-info-number">{{lastMonth}}</view>
|
||
<view class="">上月总用电量</view>
|
||
</view>
|
||
</view>
|
||
<view class="energyAnalysis-header-signal">
|
||
<template v-if="projectData.signal > 0">
|
||
<template v-if="projectData.signal == 1">
|
||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onlieyg.png" class="ico-img"></image>
|
||
</template>
|
||
<template v-else-if="projectData.signal == 2">
|
||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onlielg.png" class="ico-img"></image>
|
||
</template>
|
||
<template v-else-if="projectData.signal == 3">
|
||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onliesg.png" class="ico-img"></image>
|
||
</template>
|
||
<template v-else-if="projectData.signal == 4">
|
||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onliesig.png" class="ico-img"></image>
|
||
</template>
|
||
<template v-else-if="projectData.signal == 5">
|
||
<tuiIcon name="xinhaowuge" color="#289A00"></tuiIcon>
|
||
</template>
|
||
</template>
|
||
<template v-else>
|
||
<tuiIcon name="xinhaolx" color="#ff0000"></tuiIcon>
|
||
</template>
|
||
<text class="pl10" :style="{color:projectData.signal > 0?'#FFF':'#ff0000'}">{{projectData.signal > 0 ? getDictionary('signalType',projectData.stype) : '异常'}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="energyAnalysis-content">
|
||
<view class="energyAnalysis-picker">
|
||
<view class="energyAnalysis-picker-date-type">
|
||
<view class="energyAnalysis-picker-date-type-box" :style="{color: currentDateType=='day'?'#1C9AFF':''}" @click="switchDateTypeFn('day')">日</view>
|
||
<view class="picker-line"></view>
|
||
<view class="energyAnalysis-picker-date-type-box" :style="{color: currentDateType=='month'?'#1C9AFF':''}" @click="switchDateTypeFn('month')">月</view>
|
||
<view class="picker-line"></view>
|
||
<view class="energyAnalysis-picker-date-type-box" :style="{color: currentDateType=='year'?'#1C9AFF':''}" @click="switchDateTypeFn('year')">年</view>
|
||
</view>
|
||
|
||
<view class="energyAnalysis-picker-date-value" @click="dayPickerFlag = true">
|
||
<picker mode="date" :fields="currentDateType" @change="onDayPickerConfirmFn">
|
||
<text class="pr10">{{currentDateType=='day'?currentDayValue:currentDateType=='month'?currentMonthValue:currentYearValue}}</text>
|
||
<u-icon name="arrow-down"></u-icon>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="data-loading" v-if="dataLoading">
|
||
<u-loading mode="circle" size="40"></u-loading>
|
||
<view class="data-loading-txt">
|
||
查询中...
|
||
</view>
|
||
</view>
|
||
<view class="energyAnalysis-date" v-else-if="currentDateType=='day'">
|
||
<view class="energyAnalysis-date-title">电量分析</view>
|
||
<lineScroll width="630" height="400" extraLineType="curve"
|
||
v-show="polyLineChart"
|
||
:reshowStatus="polyLineChart"
|
||
:chartData="chartData"
|
||
@onRenderComplete="onRenderComplete" >
|
||
</lineScroll>
|
||
<view class="energyAnalysis-date-title" v-if="dayElectricityType==1">电量电费</view>
|
||
<view class="energyAnalysis-date-table" v-if="dayElectricityType==1">
|
||
<view class="energyAnalysis-date-table-row" v-for="(item,index) in dayElectricityList" :key="index">
|
||
<view class="energyAnalysis-date-table-row-title">{{item.ruleName}}</view>
|
||
<view class="energyAnalysis-date-table-row-degree">{{item.pw}}度</view>
|
||
<view class="energyAnalysis-date-table-row-money">{{item.rate}}元</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="energyAnalysis-date" v-else-if="currentDateType=='month'">
|
||
<view class="energyAnalysis-date-money-title">
|
||
<view>电量分析</view>
|
||
<view class="energyAnalysis-date-money-title-detail" v-if="dayElectricityType==1" @click="goMonthDetailFn">
|
||
<text class="pr10">详情</text>
|
||
<text>></text>
|
||
</view>
|
||
</view>
|
||
<columnScroll width="630" height="400"
|
||
:chartData="chartData"
|
||
:reshowStatus="barChart"
|
||
v-show="barChart"
|
||
@onRenderFinsh="onRenderFinshBar"
|
||
></columnScroll>
|
||
<view class="energyAnalysis-date-calendar">
|
||
<view class="energyAnalysis-date-calendar-box" v-for="(item,index) in analysisData.xName" :key="index">
|
||
<view class="energyAnalysis-date-calendar-box-day">{{item}}</view>
|
||
<view class="energyAnalysis-date-calendar-box-money">{{analysisData.nowData[index]===null?0:analysisData.nowData[index]}}</view>
|
||
</view>
|
||
<!-- <view class="energyAnalysis-date-table-row" v-for="(item,index) in dayElectricityList" :key="index">
|
||
<view class="energyAnalysis-date-table-row-title">{{item.typeName}}</view>
|
||
<view class="energyAnalysis-date-table-row-degree">{{item.degree}}度</view>
|
||
<view class="energyAnalysis-date-table-row-money">{{item.money}}元</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="energyAnalysis-date-title" v-if="dayElectricityType==2">电量电费</view>
|
||
<view class="energyAnalysis-date-table" v-if="dayElectricityType==2">
|
||
<view class="energyAnalysis-date-table-row" v-for="(item,index) in dayElectricityList" :key="index">
|
||
<view class="energyAnalysis-date-table-row-title">{{item.ruleName}}</view>
|
||
<view class="energyAnalysis-date-table-row-degree">{{item.pw}}度</view>
|
||
<view class="energyAnalysis-date-table-row-money">{{item.rate}}元</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="energyAnalysis-date" v-else-if="currentDateType=='year'">
|
||
<view class="energyAnalysis-date-title">电量分析</view>
|
||
<ring width="630" height="400"
|
||
:chartData="ringChartData"
|
||
></ring>
|
||
<view class="energyAnalysis-date-year-table">
|
||
<view class="energyAnalysis-date-year-box" v-for="(item,index) in analysisData.xName" :key="index">
|
||
<view class="">{{item}}月</view>
|
||
<view class="energyAnalysis-date-year-box-money">{{analysisData.nowData[index]===null?0:analysisData.nowData[index]}}度</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <u-picker v-model="dayPickerFlag" :params="timeParams" mode="time" @confirm="onDayPickerConfirmFn"></u-picker> -->
|
||
</view>
|
||
</template>
|
||
<script>
|
||
let _self;
|
||
|
||
// import uCharts from '@/components/u-charts/u-charts.js';
|
||
import lineScroll from "@/components/uchartComponents/line-scroll.vue";
|
||
import columnScroll from "@/components/uchartComponents/column-scroll.vue"
|
||
import ring from "@/components/uchartComponents/ring.vue"
|
||
import math from "@/utils/math.js"
|
||
import getDictionary from "@/utils/dataDictionary.js"
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
deviceId: null,
|
||
deviceKey: null,
|
||
deviceName: null,
|
||
gatewayObj:{
|
||
deviceId: null,
|
||
deviceKey: null,
|
||
deviceName: null,
|
||
},
|
||
dayPickerFlag:false,
|
||
// dayPickerValue:"",
|
||
projectData: {},
|
||
devicesData: {},
|
||
currentMonth: 0,
|
||
lastMonth: 0,
|
||
chartData: {},
|
||
ringChartData: {},
|
||
analysisData: null,
|
||
timeParams: {
|
||
year: true,
|
||
month: true,
|
||
day: true,
|
||
hour: true,
|
||
minute: true,
|
||
second: true
|
||
},
|
||
// 电价合同:1 峰谷计价,2 阶梯计价
|
||
dayElectricityType:1,
|
||
dayElectricityList:[],
|
||
currentDateType:"day",
|
||
currentDayValue:"",
|
||
currentMonthValue:"",
|
||
currentYearValue:"",
|
||
devArr: [],
|
||
polyLineChart: false,
|
||
barChart: false,
|
||
dataLoading:false,
|
||
}
|
||
},
|
||
components:{lineScroll,columnScroll,ring},
|
||
onLoad(e) {
|
||
console.log("当前页面获取参数为",e)
|
||
this.deviceId = e.deviceId;
|
||
this.deviceKey = e.deviceKey;
|
||
this.deviceName = e.deviceName;
|
||
this.gatewayObj = {
|
||
deviceId: e.deviceId,
|
||
deviceKey: e.deviceKey,
|
||
deviceName: e.deviceName,
|
||
deviceLabel: e.deviceName+'('+e.deviceKey+')'
|
||
}
|
||
this.currentDayValue = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
|
||
this.currentMonthValue = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm');
|
||
this.currentYearValue = this.$u.timeFormat(new Date().getTime(), 'yyyy');
|
||
_self = this;
|
||
// this.cWidth=uni.upx2px(750);
|
||
// this.cHeight=uni.upx2px(550);
|
||
this.getServerData()
|
||
},
|
||
methods: {
|
||
getDictionary,
|
||
goMonthDetailFn(){
|
||
// console.log("点击月份详情","./monthDetail?deviceId="+this.deviceId+"&date="+this.currentMonthValue)
|
||
uni.navigateTo({
|
||
url:"./monthDetail?deviceId="+this.deviceId+"&month="+this.currentMonthValue
|
||
})
|
||
},
|
||
switchDateTypeFn(dateType){
|
||
console.log(dateType,"dateType");
|
||
this.currentDateType = dateType;
|
||
this.getServerData();
|
||
},
|
||
onDayPickerConfirmFn(e){
|
||
switch (this.currentDateType){
|
||
case "day":
|
||
this.currentDayValue = e.detail.value;
|
||
break;
|
||
case "month":
|
||
this.currentMonthValue = e.detail.value;
|
||
break;
|
||
case "year":
|
||
this.currentYearValue = e.detail.value;
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
this.getServerData();
|
||
},
|
||
initData(){
|
||
if(this.currentDateType == 'day'){
|
||
let name = [
|
||
"1:00",
|
||
"2:00",
|
||
"3:00",
|
||
"4:00",
|
||
"5:00",
|
||
"6:00",
|
||
"7:00",
|
||
"8:00",
|
||
"9:00",
|
||
"10:00",
|
||
"11:00",
|
||
"12:00",
|
||
"13:00",
|
||
"14:00",
|
||
"15:00",
|
||
"16:00",
|
||
"17:00",
|
||
"18:00",
|
||
"19:00",
|
||
"20:00",
|
||
"21:00",
|
||
"22:00",
|
||
"23:00",
|
||
"24:00"
|
||
];
|
||
let data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
|
||
LineA.series.push({
|
||
// name: '今日',
|
||
name: name,
|
||
data: data,
|
||
color: '#07AEFC'
|
||
});
|
||
LineA.series.push({
|
||
// name: '昨日',
|
||
name: name,
|
||
data: data,
|
||
color: '#FFB660'
|
||
});
|
||
this.chartData = LineA;
|
||
this.analysisData = {
|
||
nowData:data,
|
||
pastData:data,
|
||
xName:name,
|
||
}
|
||
} else if (this.currentDateType == 'month') {
|
||
let name = [
|
||
"1",
|
||
"2",
|
||
"3",
|
||
"4",
|
||
"5",
|
||
"6",
|
||
"7",
|
||
"8",
|
||
"9",
|
||
"10",
|
||
"11",
|
||
"12",
|
||
"13",
|
||
"14",
|
||
"15",
|
||
"16",
|
||
"17",
|
||
"18",
|
||
"19",
|
||
"20",
|
||
"21",
|
||
"22",
|
||
"23",
|
||
"24",
|
||
"25",
|
||
"26",
|
||
"27",
|
||
"28",
|
||
"29",
|
||
"30",
|
||
"31"
|
||
]
|
||
let data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
|
||
LineA.series.push({
|
||
name: name,
|
||
data: data,
|
||
color: '#07AEFC'
|
||
});
|
||
this.chartData = LineA;
|
||
this.analysisData = {
|
||
nowData:data,
|
||
xName:name,
|
||
}
|
||
} else if (this.currentDateType == 'year') {
|
||
let name = [
|
||
"1",
|
||
"2",
|
||
"3",
|
||
"4",
|
||
"5",
|
||
"6",
|
||
"7",
|
||
"8",
|
||
"9",
|
||
"10",
|
||
"11",
|
||
"12"
|
||
]
|
||
let nowData = [0,0,0,0,0,0,0,0,0,0,0,0]
|
||
let pieData = [];
|
||
name.forEach((item, index) => {
|
||
pieData.push({
|
||
name: `${item}月`,
|
||
data: nowData[index],
|
||
format: () => {
|
||
return `${item}月:${nowData[index]}度`
|
||
}
|
||
})
|
||
})
|
||
this.ringChartData = {
|
||
series: pieData
|
||
};
|
||
this.analysisData = {
|
||
nowData:nowData,
|
||
xName:name,
|
||
}
|
||
}
|
||
},
|
||
getServerData(){
|
||
let {currentDateType, currentDayValue, currentMonthValue, currentYearValue} = this;
|
||
let date = currentDateType=='day'?currentDayValue:currentDateType=='month'?currentMonthValue:currentYearValue;
|
||
// console.log("当前日期",date)
|
||
|
||
let pastTime = this.$u.date(new Date(date).getTime(date)-60*60*24*1000);
|
||
this.dataLoading = true;
|
||
// console.log("昨天",pastTime);
|
||
this.$get('/app/smart/power/analysis', {deviceId: this.deviceId, date: date})
|
||
.then(res => {
|
||
if(res.code == 200) {
|
||
let data = res.data;
|
||
this.projectData = data.parent;
|
||
this.devicesData = data.children;
|
||
this.currentMonth = math.divide(data.currentMonth,1000);
|
||
this.lastMonth = math.divide(data.lastMonth,1000);
|
||
if(data.parent.deviceId == this.deviceId){
|
||
this.deviceKey = data.main.deviceKey;
|
||
this.deviceId = data.main.deviceId;
|
||
this.deviceName = data.main.deviceName;
|
||
}
|
||
this.devArr = this.devicesData.map(item => {
|
||
return {
|
||
deviceId: item.deviceId,
|
||
deviceKey: item.deviceKey,
|
||
deviceName: item.deviceName,
|
||
deviceLabel: item.deviceName+'('+item.deviceKey+')'
|
||
}
|
||
});
|
||
// this.devArr.unshift(this.gatewayObj)
|
||
this.dayElectricityType = data.powerRateVo?data.powerRateVo[0].contractType:1;
|
||
this.dayElectricityList = data.powerRateVo?data.powerRateVo[0].ruleRateVoList:[];
|
||
|
||
if(data.powerAnalysisChartDataVo.nowData){
|
||
data.powerAnalysisChartDataVo.nowData.forEach((item,index)=>{
|
||
data.powerAnalysisChartDataVo.nowData[index] = math.divide(item,1000)
|
||
})
|
||
}
|
||
if(data.powerAnalysisChartDataVo.pastData){
|
||
data.powerAnalysisChartDataVo.pastData.forEach((item,index)=>{
|
||
data.powerAnalysisChartDataVo.pastData[index] = math.divide(item,1000)
|
||
})
|
||
}
|
||
|
||
// 图表数据处理
|
||
this.analysisData = data.powerAnalysisChartDataVo;
|
||
const {xName = [], nowData = [], pastData = []} = data.powerAnalysisChartDataVo;
|
||
let LineA={categories:[],series:[]};
|
||
LineA.categories = xName;
|
||
if(currentDateType == 'day'){
|
||
LineA.series.push({
|
||
// name: '今日',
|
||
name: date,
|
||
data: nowData,
|
||
color: '#07AEFC'
|
||
});
|
||
LineA.series.push({
|
||
// name: '昨日',
|
||
name: pastTime,
|
||
data: pastData,
|
||
color: '#FFB660'
|
||
});
|
||
this.chartData = LineA;
|
||
} else if (currentDateType == 'month') {
|
||
LineA.series.push({
|
||
name: this.currentMonthValue,
|
||
data: nowData,
|
||
color: '#07AEFC'
|
||
});
|
||
this.chartData = LineA;
|
||
} else if (currentDateType == 'year') {
|
||
let pieData = [];
|
||
xName.forEach((item, index) => {
|
||
pieData.push({
|
||
name: `${item}月`,
|
||
data: nowData[index],
|
||
format: () => {
|
||
return `${item}月:${nowData[index]}度`
|
||
}
|
||
})
|
||
})
|
||
this.ringChartData = {
|
||
series: pieData
|
||
};
|
||
console.log(pieData,"pieData");
|
||
}
|
||
}else{
|
||
this.$u.toast(res.msg);
|
||
this.initData();
|
||
}
|
||
this.dataLoading = false;
|
||
}).catch(err=>{
|
||
this.dataLoading = false;
|
||
this.initData();
|
||
})
|
||
},
|
||
changeDeviceFn(e) {
|
||
console.log(e)
|
||
let index = +e.detail.value;
|
||
let data = this.devArr[index];
|
||
this.deviceKey = data.deviceKey;
|
||
this.deviceId = data.deviceId;
|
||
this.deviceName = data.deviceName;
|
||
this.getServerData();
|
||
},
|
||
onRenderComplete() {
|
||
this.polyLineChart = true;
|
||
},
|
||
onRenderFinshBar() {
|
||
this.barChart = true;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang='scss' scoped>
|
||
|
||
.energyAnalysis{
|
||
width: 100%;
|
||
&-header{
|
||
width: 100%;
|
||
padding: $paddingTB $paddingLR;
|
||
background-color: #1C9AFF;
|
||
color: #fff;
|
||
position: relative;
|
||
&-equipmentId{
|
||
padding-top: 10rpx;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.changeIcon{
|
||
padding: 0 20rpx;
|
||
position: relative;
|
||
top: 3rpx;
|
||
}
|
||
}
|
||
&-name{
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
&-electricity-consumption{
|
||
display: flex;
|
||
}
|
||
&-signal{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 20rpx;
|
||
background-color: #FF8A00;
|
||
padding: 10rpx 26rpx;
|
||
color: #fff;
|
||
border-top-left-radius: 50rpx;
|
||
border-bottom-left-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.ico-img{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
.pl10{
|
||
position: relative;
|
||
top: 5rpx;
|
||
}
|
||
}
|
||
.electricity-consumption-info{
|
||
width: 100%;
|
||
text-align: center;
|
||
|
||
padding-top: 20rpx;
|
||
&-number{
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
&-content{
|
||
padding: $paddingTB $paddingLR;
|
||
background-color: #f9f9f9;
|
||
}
|
||
&-picker{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
&-date-type{
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
box-shadow: $box-shadow;
|
||
border-radius: 12rpx;
|
||
&-box{
|
||
text-align: center;
|
||
width: 120rpx;
|
||
padding: 20rpx 0;
|
||
}
|
||
.picker-line{
|
||
width: 2rpx;
|
||
height: 30rpx;
|
||
background-color: #eee;
|
||
}
|
||
}
|
||
&-date-value{
|
||
width: 260rpx;
|
||
padding: 20rpx 0;
|
||
background-color: #fff;
|
||
box-shadow: $box-shadow;
|
||
border-radius: 12rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
.energyAnalysis-date{
|
||
margin-top: 30rpx;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
box-shadow: $box-shadow;
|
||
padding: 20rpx;
|
||
&-title{
|
||
padding: 20rpx;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
}
|
||
&-money-title{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
padding: 20rpx;
|
||
&-detail{
|
||
color: #999DB2;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
.canvas-chart{
|
||
width: 100%;
|
||
height: 550rpx;
|
||
}
|
||
&-table{
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
&-row{
|
||
display: flex;
|
||
padding: 30rpx 0;
|
||
background-color: #F5F5F9;
|
||
margin-bottom: 20rpx;
|
||
&:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
&-title{
|
||
color: #1C9AFF;
|
||
}
|
||
&-title,&-degree,&-money{
|
||
width: 33.3%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
&-calendar{
|
||
background-color: #F5F5F9;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
&-box{
|
||
width: 104rpx;
|
||
text-align: center;
|
||
padding: 6rpx 0;
|
||
/* background-color: #F5F5F9; */
|
||
&-money{
|
||
font-size: 24rpx;
|
||
color: #FA6400;
|
||
}
|
||
}
|
||
}
|
||
&-year-table{
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 32%);
|
||
grid-auto-columns: repeat(2, 32%);
|
||
grid-gap: 10rpx 2% ;
|
||
}
|
||
&-year-box{
|
||
background-color: #F5F5F9;
|
||
padding: 10rpx 30rpx;
|
||
&-money{
|
||
font-size: 24rpx;
|
||
color: #FA6400;
|
||
}
|
||
}
|
||
}
|
||
.data-loading{
|
||
text-align: center;
|
||
padding: 100rpx;
|
||
.data-loading-txt{
|
||
margin-top: 20rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
|
||
</style> |