155 lines
3.5 KiB
Vue
155 lines
3.5 KiB
Vue
<style lang='scss' scoped>
|
|
.monthDetail{
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: $paddingTB $paddingLR;
|
|
background-color: #F9F9F9;
|
|
&-header{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
&-title{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
&-unit{
|
|
color: #666666;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
&-table{
|
|
|
|
margin-top: 20rpx;
|
|
&-header{
|
|
display: flex;
|
|
background-color: #fff;
|
|
color: #1C9AFF;
|
|
box-shadow: $box-shadow;
|
|
&-th{
|
|
width: 20%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100rpx;
|
|
}
|
|
}
|
|
&-row{
|
|
display: flex;
|
|
text-align: center;
|
|
background-color: #fff;
|
|
box-shadow: $box-shadow;
|
|
margin-top: 24rpx;
|
|
&:last-child{
|
|
margin-bottom: 30rpx;
|
|
}
|
|
&-tr{
|
|
width: 20%;
|
|
display: flex;
|
|
flex-direction:column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100rpx;
|
|
.value{
|
|
color: #FA6400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="monthDetail">
|
|
<view class="monthDetail-header">
|
|
<view class="monthDetail-header-title">
|
|
<tuiIcon name="riqi" color="#1296DB"></tuiIcon>
|
|
<picker mode="date" fields="month" @change="onDayPickerConfirmFn">
|
|
<text class="text-bold pl20">{{month}}</text>
|
|
<u-icon name="arrow-down"></u-icon>
|
|
</picker>
|
|
</view>
|
|
<view class="monthDetail-header-unit">度/元</view>
|
|
</view>
|
|
<view class="monthDetail-table">
|
|
<view class="monthDetail-table-header">
|
|
<view class="monthDetail-table-header-th" v-for="(item,index) in headerList" :key="index">{{item}}</view>
|
|
</view>
|
|
<view class="monthDetail-table-row" v-for="(item,index) in dayElectricityList" :key="index">
|
|
<view class="monthDetail-table-row-tr" v-if="item.name==0">合计</view>
|
|
<view class="monthDetail-table-row-tr" v-else>{{item.name}}日</view>
|
|
<view class="monthDetail-table-row-tr" v-for="(val,i) in item.ruleRateVoList" :key="i">
|
|
<view class="">{{toDecimal(val.pw)}}</view>
|
|
<view class="value">{{toDecimal(val.rate)}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
deviceId:'',
|
|
month:'',
|
|
dayElectricityList:[],
|
|
headerList:['日期','总','峰','谷','平']
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.deviceId = option.deviceId;
|
|
this.month = option.month;
|
|
if(this.month){
|
|
this.getServerData()
|
|
}else{
|
|
this.$u.toast('请选择日期!');
|
|
}
|
|
},
|
|
methods: {
|
|
getServerData(){
|
|
this.$get('/app/smart/power/analysis', {deviceId: this.deviceId, date: this.month}).then(res=>{
|
|
if(res.code == 200) {
|
|
let data = res.data;
|
|
// 抽离头部
|
|
this.headerList = ['日期'];
|
|
data?.powerRateVo[0].ruleRateVoList.forEach(item=>{
|
|
this.headerList.push(item.ruleName)
|
|
})
|
|
// 计算每日总数据
|
|
data.powerRateVo.forEach((item,index)=>{
|
|
if(item.name!=0){
|
|
let pw = 0;
|
|
let rate = 0;
|
|
item.ruleRateVoList.forEach((val,i)=>{
|
|
pw+=val.pw;
|
|
rate+=val.rate;
|
|
})
|
|
data.powerRateVo[index].ruleRateVoList.unshift({
|
|
pw,
|
|
rate,
|
|
ruleName: "总"
|
|
})
|
|
}
|
|
})
|
|
this.dayElectricityList = data.powerRateVo
|
|
}else{
|
|
this.$u.toast(res.msg);
|
|
}
|
|
})
|
|
},
|
|
onDayPickerConfirmFn(e){
|
|
this.month = e.target.value;
|
|
this.getServerData()
|
|
},
|
|
// 保留3位小数
|
|
toDecimal(x) {
|
|
var f = parseFloat(x);
|
|
if (isNaN(f)) {
|
|
return;
|
|
}
|
|
f = Math.round(x*1000)/1000;
|
|
return f;
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|