gy-app-shop/pages/home/wisdomElectricity/energyAnalysis/index.vue

657 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>