459 lines
12 KiB
Vue
459 lines
12 KiB
Vue
<style lang='scss' scoped>
|
||
.realTime{
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #f9f9f9;
|
||
&-header{
|
||
width: 100%;
|
||
background-color: #1C9BFF;
|
||
}
|
||
&-header-picker{
|
||
display: flex;
|
||
align-items: center;
|
||
color: #fff;
|
||
background-color: rgba(256,256,256,0.1);
|
||
padding: $paddingTB $paddingLR;
|
||
}
|
||
&-header-info{
|
||
display: flex;
|
||
height: 200rpx;
|
||
padding: 20rpx 0;
|
||
&-total{
|
||
color: #fff;
|
||
width: 50%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-right: 1px solid rgba($color: #fff, $alpha: 0.2);
|
||
&-number{
|
||
font-size: 46rpx;
|
||
font-weight: bolder;
|
||
}
|
||
}
|
||
&-month{
|
||
width: 50%;
|
||
text-align: center;
|
||
color: #fff;
|
||
&-box{
|
||
padding-left: 50rpx;
|
||
display: flex;
|
||
padding-bottom: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
&-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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.realTime-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-header{
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 20rpx 0;
|
||
border-top: 1px solid #eee;
|
||
border-bottom: 1px solid #eee;
|
||
&-box{
|
||
width: 33.3%;
|
||
text-align: center;
|
||
}
|
||
&-box-month{
|
||
width: 25%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
&-table{
|
||
width: 100%;
|
||
&-row{
|
||
display: flex;
|
||
padding-top: 20rpx;
|
||
&:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
&-value{
|
||
width: 33.3%;
|
||
text-align: center;
|
||
}
|
||
&-value-month{
|
||
width: 25%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
/* &-calendar{
|
||
background-color: #F5F5F9;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
&-box{
|
||
width: 104rpx;
|
||
text-align: center;
|
||
padding: 6rpx 0;
|
||
&-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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.monthDetail-popup{
|
||
width: 600rpx;
|
||
padding: 30rpx;
|
||
.monthDetail-header{
|
||
display: flex;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1px solid #eee;
|
||
&-box{
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.monthDetail-list{
|
||
|
||
}
|
||
.monthDetail-box{
|
||
display: flex;
|
||
&-value{
|
||
flex: 1;
|
||
text-align: center;
|
||
padding-top: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|
||
<template>
|
||
<view class="realTime">
|
||
<view class="realTime-header">
|
||
<view class="realTime-header-picker flex-between" @click="projectPickShow = true">
|
||
<view class="">
|
||
<tuiIcon name="xiangmu" class="pr10" color="#fff"></tuiIcon>
|
||
<text>德润物联智慧园区项目</text>
|
||
</view>
|
||
<u-icon size="22" name="arrow-down-fill" color="#fff" ></u-icon>
|
||
</view>
|
||
<view class="realTime-header-info">
|
||
<view class="realTime-header-info-total">
|
||
<view class="realTime-header-info-total-number">20256</view>
|
||
<view class="">总用水量(t)</view>
|
||
</view>
|
||
<view class="realTime-header-info-month">
|
||
<view class="realTime-header-info-month-box pt10">
|
||
<view class="">
|
||
<tuiIcon name="shuiliang" color="#fff"></tuiIcon>
|
||
<text class="pr20">本月水量</text>
|
||
</view>
|
||
<view>137t</view>
|
||
</view>
|
||
<view class="realTime-header-info-month-box">
|
||
<view class="">
|
||
<tuiIcon name="shuiliang" color="#fff"></tuiIcon>
|
||
<text class="pr20">上月水量</text>
|
||
</view>
|
||
<view>265t</view>
|
||
</view>
|
||
<view class="realTime-header-info-month-box">
|
||
<view class="">
|
||
<tuiIcon name="shuiliang" color="#fff"></tuiIcon>
|
||
<text class="pr20">今年水量</text>
|
||
</view>
|
||
<view>7265t</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="realTime-content">
|
||
<view class="realTime-picker">
|
||
<view class="realTime-picker-date-type">
|
||
<view class="realTime-picker-date-type-box" :style="{color: currentDateType=='day'?'#1C9AFF':''}" @click="switchDateTypeFn('day')">日</view>
|
||
<view class="picker-line"></view>
|
||
<view class="realTime-picker-date-type-box" :style="{color: currentDateType=='month'?'#1C9AFF':''}" @click="switchDateTypeFn('month')">月</view>
|
||
<view class="picker-line"></view>
|
||
<view class="realTime-picker-date-type-box" :style="{color: currentDateType=='year'?'#1C9AFF':''}" @click="switchDateTypeFn('year')">年</view>
|
||
</view>
|
||
|
||
<view class="realTime-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="realTime-date" v-if="currentDateType=='day'">
|
||
<view class="realTime-date-title">用水量分析</view>
|
||
<lineScroll :chartData="chartData" width="630" height="400" extraLineType="curve"></lineScroll>
|
||
<view class="realTime-date-table-header">
|
||
<view class="realTime-date-table-header-box">类别</view>
|
||
<view class="realTime-date-table-header-box">水量(t)</view>
|
||
<view class="realTime-date-table-header-box">水费(元)</view>
|
||
</view>
|
||
<view class="realTime-date-table">
|
||
<view class="realTime-date-table-row" v-for="(item,index) in dayWaterMoneyList" :key="index">
|
||
<view class="realTime-date-table-row-value">{{item.typeName}}</view>
|
||
<view class="realTime-date-table-row-value">{{item.waterValue}}</view>
|
||
<view class="realTime-date-table-row-value">{{item.waterMoney}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="realTime-date" v-if="currentDateType=='month'">
|
||
<view class="realTime-date-money-title">
|
||
<view>用水量分析</view>
|
||
<!-- <view class="realTime-date-money-title-detail" @click="goMonthDetailFn">
|
||
<text class="pr10">详情</text>
|
||
<text>></text>
|
||
</view> -->
|
||
</view>
|
||
<columnScroll :chartData="chartData" width="630" height="400" ></columnScroll>
|
||
<view class="realTime-date-table-header">
|
||
<view class="realTime-date-table-header-box-month">日期</view>
|
||
<view class="realTime-date-table-header-box-month">水量(t)</view>
|
||
<view class="realTime-date-table-header-box-month">水费(元)</view>
|
||
<view class="realTime-date-table-header-box-month"></view>
|
||
</view>
|
||
<view class="realTime-date-table">
|
||
<view class="realTime-date-table-row" v-for="(item,index) in monthWaterMoneyList" :key="index">
|
||
<view class="realTime-date-table-row-value-month">{{item.day}}</view>
|
||
<view class="realTime-date-table-row-value-month">{{item.waterMonthValueTotal}}</view>
|
||
<view class="realTime-date-table-row-value-month">{{item.waterMonthMoneyTotal}}</view>
|
||
<view class="realTime-date-table-row-value-month" @click="openMonthDetailFn(item)">
|
||
<text>详情</text>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="realTime-date" v-if="currentDateType=='year'">
|
||
<view class="realTime-date-title">用水量分析</view>
|
||
<ring :chartData="ringChartData" width="630" height="400" ></ring>
|
||
<view class="realTime-date-year-table">
|
||
<view class="realTime-date-year-box" v-for="(item,index) in 12" :key="index">
|
||
<view class="">{{item+1}}月</view>
|
||
<view class="realTime-date-year-box-money">9.87吨</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-select v-model="projectPickShow" :list="projectPickList"></u-select>
|
||
<u-popup v-model="monthDetailShow" mode="center">
|
||
<view class="monthDetail-popup">
|
||
<view class="monthDetail-title pb10">2021-01-28</view>
|
||
<view class="monthDetail-header">
|
||
<view class="monthDetail-header-box">类别</view>
|
||
<view class="monthDetail-header-box">水量(t)</view>
|
||
<view class="monthDetail-header-box">水费(元)</view>
|
||
</view>
|
||
<view class="monthDetail-list" v-if="monthDetailData">
|
||
<view class="monthDetail-box" v-for="(item,index) in monthDetailData.waterMonthValueList" :key="index">
|
||
<view class="monthDetail-box-value">A区</view>
|
||
<view class="monthDetail-box-value">26</view>
|
||
<view class="monthDetail-box-value">1300</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
let _self = this;
|
||
import lineScroll from "@/components/uchartComponents/line-scroll.vue";
|
||
import columnScroll from "@/components/uchartComponents/column-scroll.vue"
|
||
import ring from "@/components/uchartComponents/ring.vue"
|
||
export default {
|
||
data() {
|
||
return {
|
||
monthDetailShow:false,
|
||
monthDetailData:null,
|
||
|
||
currentDateType:"day",
|
||
currentDayValue:"",
|
||
currentMonthValue:"",
|
||
currentYearValue:"",
|
||
|
||
projectPickShow:false,
|
||
projectPickList:[{
|
||
label:"德润物联智慧园区项目",
|
||
value:"hcwl"
|
||
}],
|
||
dayWaterMoneyList:[{
|
||
typeName:"A区",
|
||
waterValue:128,
|
||
waterMoney:200
|
||
},{
|
||
typeName:"B区",
|
||
waterValue:168,
|
||
waterMoney:300
|
||
}],
|
||
monthWaterMoneyList:[{
|
||
day:1,
|
||
waterMonthValueTotal:50,
|
||
waterMonthMoneyTotal:200,
|
||
waterMonthValueList:[{
|
||
label:"A区",
|
||
value:31,
|
||
money:22
|
||
},{
|
||
label:"B区",
|
||
value:2,
|
||
money:26
|
||
}]
|
||
},{
|
||
day:1,
|
||
waterMonthValueTotal:50,
|
||
waterMonthMoneyTotal:200,
|
||
waterMonthValueList:[{
|
||
label:"A区",
|
||
value:31,
|
||
money:22
|
||
},{
|
||
label:"B区",
|
||
value:2,
|
||
money:26
|
||
}]
|
||
}],
|
||
|
||
chartData:null,
|
||
ringChartData:null
|
||
}
|
||
},
|
||
components:{lineScroll,columnScroll,ring},
|
||
onLoad() {
|
||
_self = this;
|
||
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');
|
||
this.getServerData();
|
||
|
||
},
|
||
methods: {
|
||
openMonthDetailFn(item){
|
||
this.monthDetailData = item;
|
||
this.monthDetailShow = true;
|
||
},
|
||
onDayPickerConfirmFn(e){
|
||
// this.dayPickerValue = e.detail.value;
|
||
// currentDayValue:"",
|
||
// currentMonthValue:"",
|
||
// currentYearValue:""
|
||
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;
|
||
}
|
||
},
|
||
switchDateTypeFn(dateType){
|
||
console.log(dateType,"dateType");
|
||
this.currentDateType = dateType;
|
||
},
|
||
getServerData(){
|
||
uni.request({
|
||
url: 'https://www.ucharts.cn/data.json',
|
||
data:{
|
||
},
|
||
success: function(res) {
|
||
console.log(res.data.data)
|
||
let LineA={categories:[],series:[]};
|
||
//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
|
||
LineA.categories=res.data.data.LineA.categories;
|
||
LineA.series=res.data.data.LineA.series;
|
||
_self.chartData = LineA;
|
||
// _self.textarea = JSON.stringify(res.data.data.LineA);
|
||
// _self.showLineA("canvasLineA",LineA);
|
||
console.log(_self.ringChartData,"ringChartData");
|
||
_self.ringChartData = {};
|
||
_self.ringChartData ={
|
||
series:[],
|
||
};
|
||
_self.ringChartData.series=res.data.data.Ring.series;
|
||
// 自定义文案示例，需设置format字段
|
||
for(let i = 0 ;i < _self.ringChartData.series.length;i++){
|
||
_self.ringChartData.series[i].format=()=>{return _self.ringChartData.series[i].name+_self.ringChartData.series[i].data};
|
||
}
|
||
|
||
},
|
||
fail: () => {
|
||
// _self.tips="网络错误，小程序端请检查合法域名";
|
||
},
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|