|
@@ -6,6 +6,8 @@
|
|
<!-- <u-picker title="设备选择" v-model="equipmentShow"
|
|
<!-- <u-picker title="设备选择" v-model="equipmentShow"
|
|
mode="multiSelector" :default-selector='[0, 1]' :range="multiSelector">
|
|
mode="multiSelector" :default-selector='[0, 1]' :range="multiSelector">
|
|
</u-picker> -->
|
|
</u-picker> -->
|
|
|
|
+ <u-picker v-model="tabsFrom.show1" mode="selector" :range="tabsFrom.selector1" range-key="label"
|
|
|
|
+ @confirm="selector1confirm"></u-picker>
|
|
<u-select v-model="equipmentShow" mode="mutil-column-auto" :list="equipmentList" @confirm="confirm">
|
|
<u-select v-model="equipmentShow" mode="mutil-column-auto" :list="equipmentList" @confirm="confirm">
|
|
|
|
|
|
</u-select>
|
|
</u-select>
|
|
@@ -24,7 +26,9 @@
|
|
<u-icon name="arrow-left" color="#fff" size="36"></u-icon>
|
|
<u-icon name="arrow-left" color="#fff" size="36"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="title">
|
|
<view class="title">
|
|
- {{title}}<u-icon v-if="false" name="arrow-down" color="#fff" size="24" @click="equipmentShow=true"></u-icon>
|
|
|
|
|
|
+ {{tabsFrom.title}}
|
|
|
|
+ <!-- <u-icon name="arrow-down" color="#fff" size="24" @click="equipmentShow=true"></u-icon> -->
|
|
|
|
+ <u-icon name="arrow-down" color="#fff" size="24" @click="tabsFrom.show1=true"></u-icon>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="right" @click="tabsFrom.show2=true">
|
|
<!-- <view class="right" @click="tabsFrom.show2=true">
|
|
<image class="img" src="@/assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
|
|
<image class="img" src="@/assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
|
|
@@ -162,14 +166,14 @@
|
|
<!-- 各时段用电量 -->
|
|
<!-- 各时段用电量 -->
|
|
<view class="electricity-chart">
|
|
<view class="electricity-chart">
|
|
<view class="title">
|
|
<view class="title">
|
|
-
|
|
|
|
|
|
+
|
|
<view class="text">
|
|
<view class="text">
|
|
<view class="icon">
|
|
<view class="icon">
|
|
-
|
|
|
|
- </view> 各时段用电量 (度)
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+ </view> 各时段用电量 (度)
|
|
|
|
+
|
|
</view>
|
|
</view>
|
|
- <view @click="tabsFrom.show2=true,params.day=true" >
|
|
|
|
|
|
+ <view @click="tabsFrom.show2=true,params.day=true">
|
|
{{queryDay}}<u-icon name="arrow-down"></u-icon>
|
|
{{queryDay}}<u-icon name="arrow-down"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -331,8 +335,7 @@
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
kWhList: [],
|
|
kWhList: [],
|
|
- title: '',
|
|
|
|
- queryDay:'',
|
|
|
|
|
|
+ queryDay: '',
|
|
showTop: [0, 0, 0, 0, 0, 0, 0, 0],
|
|
showTop: [0, 0, 0, 0, 0, 0, 0, 0],
|
|
FormData: {
|
|
FormData: {
|
|
queryDate: '',
|
|
queryDate: '',
|
|
@@ -356,17 +359,14 @@
|
|
children: [{
|
|
children: [{
|
|
value: 2,
|
|
value: 2,
|
|
label: '荆鹏集团01',
|
|
label: '荆鹏集团01',
|
|
-
|
|
|
|
},
|
|
},
|
|
{
|
|
{
|
|
value: 3,
|
|
value: 3,
|
|
label: '荆鹏集团02',
|
|
label: '荆鹏集团02',
|
|
-
|
|
|
|
},
|
|
},
|
|
{
|
|
{
|
|
value: 4,
|
|
value: 4,
|
|
label: '荆鹏集团03',
|
|
label: '荆鹏集团03',
|
|
-
|
|
|
|
}
|
|
}
|
|
]
|
|
]
|
|
},
|
|
},
|
|
@@ -386,7 +386,6 @@
|
|
{
|
|
{
|
|
value: 8,
|
|
value: 8,
|
|
label: '荆州院子03',
|
|
label: '荆州院子03',
|
|
-
|
|
|
|
}
|
|
}
|
|
]
|
|
]
|
|
}
|
|
}
|
|
@@ -424,71 +423,87 @@
|
|
backgroundColor: '#1677FF',
|
|
backgroundColor: '#1677FF',
|
|
},
|
|
},
|
|
list: [{
|
|
list: [{
|
|
- id:0,
|
|
|
|
- name: '总用电量',
|
|
|
|
- disabled: false
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- id:4,
|
|
|
|
- name: '当日用电量',
|
|
|
|
- disabled: false
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- id:1,
|
|
|
|
- name: '当月用电量',
|
|
|
|
- disabled: false
|
|
|
|
- }, {
|
|
|
|
- id:3,
|
|
|
|
- name: '当年用电量',
|
|
|
|
- disabled: false
|
|
|
|
- }, {
|
|
|
|
- id:5,
|
|
|
|
- name: '去年用电量',
|
|
|
|
- disabled: false
|
|
|
|
- }, {
|
|
|
|
- id:10,
|
|
|
|
- name: '指定月份',
|
|
|
|
- disabled: false
|
|
|
|
- }
|
|
|
|
- ],
|
|
|
|
- value: '0',
|
|
|
|
|
|
+ id: 4,
|
|
|
|
+ name: '当日用电量',
|
|
|
|
+ disabled: false
|
|
|
|
+ }, {
|
|
|
|
+ id: 1,
|
|
|
|
+ name: '当月用电量',
|
|
|
|
+ disabled: false
|
|
|
|
+ }, {
|
|
|
|
+ id: 2,
|
|
|
|
+ name: '上月用电量',
|
|
|
|
+ disabled: false
|
|
|
|
+ }, {
|
|
|
|
+ id: 3,
|
|
|
|
+ name: '当年用电量',
|
|
|
|
+ disabled: false
|
|
|
|
+ }, {
|
|
|
|
+ id: 0,
|
|
|
|
+ name: '总用电量',
|
|
|
|
+ disabled: false
|
|
|
|
+ }, {
|
|
|
|
+ id: 10,
|
|
|
|
+ name: '指定月份',
|
|
|
|
+ disabled: false
|
|
|
|
+ }],
|
|
|
|
+ value: '2',
|
|
};
|
|
};
|
|
},
|
|
},
|
|
onLoad(op) {
|
|
onLoad(op) {
|
|
- if(op.id) {
|
|
|
|
|
|
+ if (op.id) {
|
|
this.FormData.meterId = op.id;
|
|
this.FormData.meterId = op.id;
|
|
this.FormData2.meterId = op.id;
|
|
this.FormData2.meterId = op.id;
|
|
|
|
+ this.tabsFrom.title = op.name;
|
|
}
|
|
}
|
|
this.endYear = new Date().getFullYear();
|
|
this.endYear = new Date().getFullYear();
|
|
this.FormData.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
|
|
this.FormData.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
|
|
this.FormData2.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
|
|
this.FormData2.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
|
|
- this.FormData.type = 0;
|
|
|
|
-
|
|
|
|
- this.getTimeSlotStatistics();
|
|
|
|
|
|
+ this.FormData.type = 2;
|
|
|
|
+
|
|
this.getElectricityStatistics();
|
|
this.getElectricityStatistics();
|
|
|
|
+ this.getTimeSlotStatistics();
|
|
this.getList();
|
|
this.getList();
|
|
},
|
|
},
|
|
|
|
+ onReady() {
|
|
|
|
+ this.getBarCharts(false);
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
- queryDate(queryTime,day){
|
|
|
|
-
|
|
|
|
- if(day){
|
|
|
|
- this.FormData2.queryDate=queryTime;
|
|
|
|
|
|
+ selector1confirm(e) {
|
|
|
|
+
|
|
|
|
+ var index = e[0];
|
|
|
|
+ this.tabsFrom.show1Index = index;
|
|
|
|
+ this.tabsFrom.show1Text = this.tabsFrom.selector1[index].label;
|
|
|
|
+ this.tabsFrom.title = this.tabsFrom.selector1[index].label;
|
|
|
|
+
|
|
|
|
+ this.FormData.meterId = this.tabsFrom.selector1[index].value;
|
|
|
|
+ this.FormData.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
|
|
|
|
+ this.FormData2.meterId = this.tabsFrom.selector1[index].value;
|
|
|
|
+ this.FormData2.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
|
|
|
|
+
|
|
|
|
+ this.FormData.type = 2;
|
|
|
|
+ this.value = '2';
|
|
|
|
+
|
|
|
|
+ this.getTimeSlotStatistics();
|
|
|
|
+ this.getElectricityStatistics();
|
|
|
|
+ },
|
|
|
|
+ queryDate(queryTime, day) {
|
|
|
|
+
|
|
|
|
+ if (day) {
|
|
|
|
+ this.FormData2.queryDate = queryTime;
|
|
//this.FormData2.type =day?"9":"10"
|
|
//this.FormData2.type =day?"9":"10"
|
|
//this.value="-1"
|
|
//this.value="-1"
|
|
-
|
|
|
|
- this.getTimeSlotStatistics()
|
|
|
|
-
|
|
|
|
- }else{
|
|
|
|
-
|
|
|
|
- this.FormData.queryDate=queryTime+"-01";
|
|
|
|
- this.FormData.type ="10"
|
|
|
|
|
|
+
|
|
|
|
+ this.getTimeSlotStatistics();
|
|
|
|
+
|
|
|
|
+ } else {
|
|
|
|
+
|
|
|
|
+ this.FormData.queryDate = queryTime + "-01";
|
|
|
|
+ this.FormData.type = "10";
|
|
//this.value="-1"
|
|
//this.value="-1"
|
|
-
|
|
|
|
- this.getElectricityStatistics()
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+ this.getElectricityStatistics();
|
|
}
|
|
}
|
|
-
|
|
|
|
-
|
|
|
|
},
|
|
},
|
|
getList() {
|
|
getList() {
|
|
uni.showLoading({
|
|
uni.showLoading({
|
|
@@ -502,11 +517,13 @@
|
|
API.homePageKwh(data).then((res) => {
|
|
API.homePageKwh(data).then((res) => {
|
|
uni.hideLoading()
|
|
uni.hideLoading()
|
|
this.kWhList = res.data.data;
|
|
this.kWhList = res.data.data;
|
|
- for (var i = 0; i < this.kWhList.length; i++) {
|
|
|
|
- if(this.kWhList[i].id == this.FormData.meterId) {
|
|
|
|
- this.title = this.kWhList[i].name;
|
|
|
|
|
|
+ this.tabsFrom.selector1 = [];
|
|
|
|
+ this.tabsFrom.selector1 = this.kWhList.map(item => {
|
|
|
|
+ return {
|
|
|
|
+ label: item.name,
|
|
|
|
+ value: item.id
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
+ })
|
|
}).catch(error => {
|
|
}).catch(error => {
|
|
uni.showToast({
|
|
uni.showToast({
|
|
title: error,
|
|
title: error,
|
|
@@ -514,13 +531,13 @@
|
|
})
|
|
})
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- getTimeSlotStatistics(){
|
|
|
|
|
|
+ getTimeSlotStatistics() {
|
|
uni.showLoading({
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
title: "加载中",
|
|
mask: true,
|
|
mask: true,
|
|
})
|
|
})
|
|
-
|
|
|
|
- this.queryDay=parseUnixTime(new Date(this.FormData2.queryDate), '{y}年{m}月{d}日');
|
|
|
|
|
|
+
|
|
|
|
+ this.queryDay = parseUnixTime(new Date(this.FormData2.queryDate), '{y}年{m}月{d}日');
|
|
API.timeSlotStatistics(this.FormData2).then((response) => {
|
|
API.timeSlotStatistics(this.FormData2).then((response) => {
|
|
uni.hideLoading();
|
|
uni.hideLoading();
|
|
this.hourMap = response.data.hourMap;
|
|
this.hourMap = response.data.hourMap;
|
|
@@ -532,22 +549,22 @@
|
|
})
|
|
})
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- getElectricityStatistics(){
|
|
|
|
|
|
+ getElectricityStatistics() {
|
|
uni.showLoading({
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
title: "加载中",
|
|
mask: true,
|
|
mask: true,
|
|
})
|
|
})
|
|
- var obj={
|
|
|
|
|
|
+ var obj = {
|
|
...this.FormData
|
|
...this.FormData
|
|
- }
|
|
|
|
|
|
+ }
|
|
// if(obj.type==10){
|
|
// if(obj.type==10){
|
|
// obj.queryDate+="-01"
|
|
// obj.queryDate+="-01"
|
|
// }
|
|
// }
|
|
API.electricityStatistics(obj).then((response) => {
|
|
API.electricityStatistics(obj).then((response) => {
|
|
uni.hideLoading();
|
|
uni.hideLoading();
|
|
this.showTop = [0, 0, 0, 0, 0, 0, 0, 0]
|
|
this.showTop = [0, 0, 0, 0, 0, 0, 0, 0]
|
|
- var electricity = response.data.kwhMap.kwh+"";
|
|
|
|
-
|
|
|
|
|
|
+ var electricity = response.data.kwhMap.kwh + "";
|
|
|
|
+
|
|
if (electricity) {
|
|
if (electricity) {
|
|
var sz = electricity.split(".")
|
|
var sz = electricity.split(".")
|
|
var str1 = sz[0];
|
|
var str1 = sz[0];
|
|
@@ -575,19 +592,25 @@
|
|
},
|
|
},
|
|
getBarCharts(list) {
|
|
getBarCharts(list) {
|
|
if (!this.myChart) {
|
|
if (!this.myChart) {
|
|
- this.myChart = echarts.init(document.getElementById('barEcharts'),null,{
|
|
|
|
- width:uni.upx2px(700),height:uni.upx2px(480)
|
|
|
|
|
|
+ this.myChart = echarts.init(document.getElementById('barEcharts'), null, {
|
|
|
|
+ width: uni.upx2px(700),
|
|
|
|
+ height: uni.upx2px(480)
|
|
});
|
|
});
|
|
}
|
|
}
|
|
this.myChart.clear();
|
|
this.myChart.clear();
|
|
- var data1=[];
|
|
|
|
- var data2=[];
|
|
|
|
- for(var i in list){
|
|
|
|
- data1.push(i)
|
|
|
|
- data2.push(list[i])
|
|
|
|
|
|
+ var data1 = ['0-2点', '3-4点', '5-6点', '7-8点', '9-10点', '11-12点', '13-14点', '15-16点',
|
|
|
|
+ '17-18点', '19-20点', '21-22点', '23-24点'];
|
|
|
|
+ var data2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
|
|
|
+ if(list) {
|
|
|
|
+ data1 = [];
|
|
|
|
+ data2 = [];
|
|
|
|
+ for (var i in list) {
|
|
|
|
+ data1.push(i)
|
|
|
|
+ data2.push(list[i])
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-
|
|
|
|
- var headitemby=""
|
|
|
|
|
|
+
|
|
|
|
+ var headitemby = ""
|
|
var showkey = "";
|
|
var showkey = "";
|
|
var option = {
|
|
var option = {
|
|
tooltip: {
|
|
tooltip: {
|
|
@@ -603,44 +626,41 @@
|
|
bottom: '8%',
|
|
bottom: '8%',
|
|
containLabel: true
|
|
containLabel: true
|
|
},
|
|
},
|
|
- xAxis: {
|
|
|
|
- type: 'category',
|
|
|
|
- data: data1,
|
|
|
|
-
|
|
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: 'category',
|
|
|
|
+ data: data1,
|
|
|
|
+
|
|
axisLabel: {
|
|
axisLabel: {
|
|
- rotate:40,
|
|
|
|
- interval:0,
|
|
|
|
|
|
+ rotate: 40,
|
|
|
|
+ interval: 0,
|
|
textStyle: {
|
|
textStyle: {
|
|
color: "#333"
|
|
color: "#333"
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- },
|
|
|
|
- yAxis: {
|
|
|
|
- type: 'value',
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- series: [
|
|
|
|
- {
|
|
|
|
- name: '合计',
|
|
|
|
- data: data2,
|
|
|
|
- type: 'bar'
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ type: 'value',
|
|
|
|
+ },
|
|
|
|
+ series: [{
|
|
|
|
+ name: '合计',
|
|
|
|
+ data: data2,
|
|
|
|
+ type: 'bar'
|
|
|
|
+ }]
|
|
}
|
|
}
|
|
console.log(option)
|
|
console.log(option)
|
|
this.myChart.setOption(option);
|
|
this.myChart.setOption(option);
|
|
},
|
|
},
|
|
selector2confirm(e) {
|
|
selector2confirm(e) {
|
|
- this.tabsFrom.show2Text=e.year+"年"+e.month+"月"
|
|
|
|
-
|
|
|
|
- this.tabsFrom.show2Index=e.year+"-"+e.month
|
|
|
|
- if(e.day){
|
|
|
|
- this.tabsFrom.show2Text+=e.day+"日"
|
|
|
|
- this.tabsFrom.show2Index+='-'+e.day
|
|
|
|
-
|
|
|
|
- this.queryDate(this.tabsFrom.show2Index,true)
|
|
|
|
- }else{
|
|
|
|
- this.queryDate(this.tabsFrom.show2Index,false)
|
|
|
|
|
|
+ this.tabsFrom.show2Text = e.year + "年" + e.month + "月"
|
|
|
|
+
|
|
|
|
+ this.tabsFrom.show2Index = e.year + "-" + e.month
|
|
|
|
+ if (e.day) {
|
|
|
|
+ this.tabsFrom.show2Text += e.day + "日"
|
|
|
|
+ this.tabsFrom.show2Index += '-' + e.day
|
|
|
|
+
|
|
|
|
+ this.queryDate(this.tabsFrom.show2Index, true)
|
|
|
|
+ } else {
|
|
|
|
+ this.queryDate(this.tabsFrom.show2Index, false)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
selector2reset(e) {
|
|
selector2reset(e) {
|
|
@@ -656,10 +676,10 @@
|
|
radioGroupChange(e) {
|
|
radioGroupChange(e) {
|
|
console.log(e)
|
|
console.log(e)
|
|
this.FormData.type = e;
|
|
this.FormData.type = e;
|
|
- if(e==10) {
|
|
|
|
|
|
+ if (e == 10) {
|
|
this.tabsFrom.show2 = true;
|
|
this.tabsFrom.show2 = true;
|
|
this.params.day = false;
|
|
this.params.day = false;
|
|
- }else{
|
|
|
|
|
|
+ } else {
|
|
this.getElectricityStatistics();
|
|
this.getElectricityStatistics();
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -929,14 +949,14 @@
|
|
padding: 40rpx 0rpx;
|
|
padding: 40rpx 0rpx;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
-
|
|
|
|
|
|
+
|
|
.title {
|
|
.title {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
padding: 0 12rpx;
|
|
padding: 0 12rpx;
|
|
margin-bottom: 40rpx;
|
|
margin-bottom: 40rpx;
|
|
-
|
|
|
|
|
|
+
|
|
.icon {
|
|
.icon {
|
|
width: 36rpx;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
height: 36rpx;
|
|
@@ -944,7 +964,7 @@
|
|
border: 6px solid rgba(182, 212, 255, 1);
|
|
border: 6px solid rgba(182, 212, 255, 1);
|
|
border-radius: 100px;
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.text {
|
|
.text {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -953,11 +973,11 @@
|
|
margin-left: 16rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.chart {
|
|
.chart {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 440rpx;
|
|
height: 440rpx;
|
|
-
|
|
|
|
|
|
+
|
|
.img {
|
|
.img {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 440rpx;
|
|
height: 440rpx;
|