用电监控 ，用电监控图表

apis/pagejs/tenantElectricityMeter.js

@@ -0,0 +1,25 @@
+import request from '@/apis/utils/request'
+export function electricityMeterList(data) {
+ 	var url='/mobile/tenantElectricityMeter/electricityMeterList';
+ 	return request({
+ 		method: 'post',
+ 		data: data,
+ 		url: url
+ 	})
+ }
+ export function electricityStatistics(data) {
+ 	var url='/mobile/tenantElectricityMeter/electricityStatistics';
+ 	return request({
+ 		method: 'post',
+ 		data: data,
+ 		url: url
+ 	})
+ }
+ export function timeSlotStatistics(data) {
+ 	var url='/mobile/tenantElectricityMeter/timeSlotStatistics';
+ 	return request({
+ 		method: 'post',
+ 		data: data,
+ 		url: url
+ 	})
+ }

apis/utils/index.js

@@ -2,6 +2,12 @@ export const currentTimeStamp = () => new Date().getTime()
 
 export const unixTimeStamp = (val) => new Date(val).getTime()
 
+export const getWeek=(time)=>{
+	var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
+	var day = time.getDay();
+	var week = weeks[day];
+	return week
+}
 export const nextMonth=(year,month,day,bl)=>{
 	if(day){
 		

pages/mine/electronicMonitoring.vue

@@ -2,58 +2,52 @@
 	<view>
 
 		<view class="background">
+			<u-picker  v-model="tabsFrom.show1" mode="selector" :range="tabsFrom.selector1"  range-key="label" @confirm="selector1confirm" ></u-picker>
+			
 			<u-picker-select title="日期选择" v-model="tabsFrom.show2"
 			 :defaultTime="tabsFrom.show2Index" :endYear="endYear"
-			 mode="time" :params="params"  @confirm="selector2confirm" @reset="selector2reset" ></u-picker-select>
+			 mode="time" :params="params" :noselect="false"  @confirm="selector2confirm" @reset="selector2reset" ></u-picker-select>
+			
+			<u-navbar :background="background"
+			@titleCk="titleCk" :title-icon="electricityMeterList.length>1?'arrow-down':''"
+			 back-icon-color="#fff" :title="title" title-color="#fff">
+				
 			
-			<u-navbar :background="background" back-icon-color="#fff" title="联通公司" title-color="#fff">
+				
 				<view class="u-nav-slot" slot="right" @click="tabsFrom.show2=true,params.day=true">
 					<image class="img" src="@/assets/img/riLine-calendar-todo-line 1.svg" mode=""></image>
 				</view>
 			</u-navbar>
+			
 			<!-- 日期 -->
 			<view class="date-box">
-				<view class="item item-today">
-					<view class="date">
-						26
-					</view>
-					<view class="week ">
-						今天
-					</view>
-					<view class="dot">
-						
-					</view>
-				</view>
-				<view class="item">
+				
+				<view class="item" v-for="(item,i) in topDate" 
+				:class="{
+					'item-today':item.queryDate==FormData.queryDate
+				}"
+				@click="queryDate(item.queryDate,true)"
+				:key="i">
 					<view class="date">
-						27
+						{{item.num}}
 					</view>
 					<view class="week">
-						周六
+						{{item.week}}
 					</view>
-				</view>
-				<view class="item">
-					<view class="date">
-						28
-					</view>
-					<view class="week">
-						周日
+					<view class="dot" v-if="item.today==0">
+						
 					</view>
+					
 				</view>
-				<view class="item">
+				<view class="item item-today" v-if="0">
 					<view class="date">
-						29
-					</view>
-					<view class="week">
-						周一
+						26
 					</view>
-				</view>
-				<view class="item">
-					<view class="date">
-						30
+					<view class="week ">
+						今天
 					</view>
-					<view class="week">
-						周二
+					<view class="dot">
+						
 					</view>
 				</view>
 			</view>
@@ -69,7 +63,7 @@
 					<view class="item-text">
 						百万
 					</view>
-					<view class="item-number">
+					<view class="item-number" v-text="showTop[0]">
 						0
 					</view>
 				</view>
@@ -77,7 +71,7 @@
 					<view class="item-text">
 						拾万
 					</view>
-					<view class="item-number">
+					<view class="item-number" v-text="showTop[1]" >
 						0
 					</view>
 				</view>
@@ -85,7 +79,7 @@
 					<view class="item-text">
 						万
 					</view>
-					<view class="item-number">
+					<view class="item-number" v-text="showTop[2]">
 						0
 					</view>
 				</view>
@@ -93,7 +87,7 @@
 					<view class="item-text">
 						千
 					</view>
-					<view class="item-number">
+					<view class="item-number" v-text="showTop[3]">
 						0
 					</view>
 				</view>
@@ -101,7 +95,7 @@
 					<view class="item-text">
 						百
 					</view>
-					<view class="item-number">
+					<view class="item-number" v-text="showTop[4]">
 						0
 					</view>
 				</view>
@@ -109,7 +103,7 @@
 					<view class="item-text">
 						拾
 					</view>
-					<view class="item-number">
+					<view class="item-number" v-text="showTop[5]">
 						7
 					</view>
 				</view>
@@ -117,7 +111,7 @@
 					<view class="item-text">
 						1
 					</view>
-					<view class="item-number">
+					<view class="item-number" v-text="showTop[6]">
 						7
 					</view>
 				</view>
@@ -125,7 +119,7 @@
 					<view class="item-text">
 						0.1
 					</view>
-					<view class="item-number decimal">
+					<view class="item-number decimal" v-text="showTop[7]">
 						7
 					</view>
 				</view>
@@ -152,134 +146,38 @@
 				</view>
 			</view>
 			<view class="chart">
-				<image class="img" src="@/assets/img/chart@1x.png" mode=""></image>
-			</view>
-		</view>
-		<!-- 异常波动 -->
-		<view class="abnormal"  v-if="false">
-			<view class="headline">
-				<view class="title">
-					
-					<view class="text">
-						异常波动
-					</view>
-				</view>
-				<view class="more">
-					查看全部
-					<u-icon name="arrow-right" size="24" color="#d4d4d4"></u-icon>
-				</view>
-			</view>
-
-			<view class="details">
-				<view class="item">
-					<view class="name">
-						温度异常报警
-					</view>
-					<view class="time">
-						2024-01-25 15:00:00
-					</view>
-				</view>
-
-				<view class="item">
-					<view class="name">
-						三厢功率因数异常报警
-					</view>
-					<view class="time">
-						2024-01-05 20:00:00
-					</view>
+				<view id="pieEcharts" style="min-height:240px;">
+				
 				</view>
 			</view>
-
-
 		</view>
+		
 
-		<!-- 能源监测 -->
-		<view class="energy-inspection"  v-if="false">
-			<view class="title">
-				<view class="icon">
-
-				</view>
-				<view class="text">
-					能源监测
-
-				</view>
-			</view>
-			<view class="grid">
-				<u-grid :col="3" :border="false">
-					<u-grid-item>
-						<view class="icon icon2">
-							<image class="img" src="@/assets/img/Image@1.png" mode=""></image>
-						</view>
-						<view class="grid-text">三相电流</view>
-					</u-grid-item>
-					<u-grid-item>
-						<view class="icon icon2">
-							<image class="img" src="@/assets/img/Image@2.png" mode=""></image>
-						</view>
-						<view class="grid-text">三相电压</view>
-					</u-grid-item>
-					<u-grid-item>
-						<view class="icon icon3">
-							<image class="img" src="@/assets/img/Image@3.png" mode=""></image>
-						</view>
-						<view class="grid-text">三相温度</view>
-					</u-grid-item>
-					<u-grid-item>
-						<view class="icon icon4">
-							<image class="img" src="@/assets/img/Image@4.png" mode=""></image>
-						</view>
-						<view class="grid-text">三相有功功率</view>
-					</u-grid-item>
-					<u-grid-item>
-						<view class="icon icon5">
-							<image class="img" src="@/assets/img/Image@5.png" mode=""></image>
-						</view>
-						<view class="grid-text">三相功率因数</view>
-					</u-grid-item>
-					<u-grid-item>
-						<view class="icon icon6">
-							<image class="img" src="@/assets/img/Image@5.png" mode=""></image>
-						</view>
-						<view class="grid-text">平均功率因数</view>
-					</u-grid-item>
-				</u-grid>
-			</view>
-		</view>
-		<!-- 数据分析 -->
-		<view class="data-analysis"  v-if="false">
-			<view class="title">
-				<view class="icon">
 		
-				</view>
-				<view class="text">
-					数据分析
 		
-				</view>
-			</view>
-			<view class="grid">
-				<u-grid :col="3" :border="false">
-					<u-grid-item>
-						<view class="icon icon7">
-							<image class="img" src="@/assets/img/Image@7.png" mode=""></image>
-						</view>
-						<view class="grid-text">同比分析</view>
-					</u-grid-item>
-					<u-grid-item>
-						<view class="icon icon8">
-							<image class="img" src="@/assets/img/Image@8.png" mode=""></image>
-						</view>
-						<view class="grid-text">环比分析</view>
-					</u-grid-item>	
-				</u-grid>
-			</view>
-		</view>
 	</view>
 </template>
 
 <script>
+	import {
+		parseUnixTime,
+		beforeTimeStamp,
+		getWeek
+	} from '@/apis/utils'
+	import * as API from '@/apis/pagejs/tenantElectricityMeter.js'
+	import * as echarts from "echarts";
+	
 	export default {
 		data() {
 			return {
+				title:"查询中",
+					myChart:null,
+				showTop: [0, 0, 0, 0, 0, 0, 0, 0],
+				topDate:[],
+				electricityMeterList:[],
+				FormData:{
+					
+				},
 				endYear:'',
 				params: {
 					year: true,
@@ -337,20 +235,242 @@
 						name: '去年用电量',
 						disabled: false
 					}, {
-						id:5,
+						id:10,
 						name: '指定月份',
 						disabled: false
 					}
 				],
 				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
-				value: 'orange',
+				value: '0',
 			};
 		},
 		onLoad() {
 			this.endYear=new Date().getFullYear()
+			this.getElectricityMeterList();
+			this.FormData.queryDate=parseUnixTime(new Date(), '{y}-{m}-{d}')
+			this.FormData.type=0
+			for(var i =4;i>=0;i--){
+				var time=new Date(beforeTimeStamp(i,new Date()));
+				 this.topDate.push({
+					 num:time.getDate(),
+					 week:i==0?'今日':getWeek(time),
+					 today:i,
+					 queryDate:parseUnixTime(time, '{y}-{m}-{d}')
+				 })
+			}
 			
+			console.log( this.topDate)
 		},
 		methods: {
+			titleCk(){
+				if(this.electricityMeterList.length>1){
+					this.tabsFrom.show1=true
+				}
+			},
+			
+			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.value="0"
+				this.FormData.type=0
+				this.getTimeSlotStatistics()
+				this.getElectricityStatistics()
+				
+				
+			},
+			
+			queryDate(queryTime,day){
+				this.FormData.queryDate=queryTime;
+				this.FormData.type =day?"9":"10"
+				this.value="-1"
+				if(day){
+					this.getTimeSlotStatistics()
+					
+				}
+				
+				this.getElectricityStatistics()
+				
+			},
+			getElectricityStatistics(){
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				var obj={
+					...this.FormData
+				}		
+					if(obj.type==10){
+						obj.queryDate+="-01"
+					}
+							
+				API.electricityStatistics(obj).then((response) => {
+					uni.hideLoading();
+					this.showTop = [0, 0, 0, 0, 0, 0, 0, 0]
+					var electricity = response.data.kwhMap.kwh;
+					
+					if (electricity) {
+						var sz = electricity.split(".")
+						var str1 = sz[0];
+						var str2 = [];
+						if (sz.length > 1) {
+							str2 = sz[1];
+							this.showTop[7] = str2[0];
+						}
+						var j = 0;
+						for (var i in str1) {
+							if (i != undefined) {
+								this.showTop[6 - str1.length + j + 1] = str1[i]
+							}
+							j++;
+						}
+						this.$forceUpdate()
+					}
+					//this.electricityMeterList=response.data.meterList
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
+			},
+			getTimeSlotStatistics(){
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+							
+							
+				API.timeSlotStatistics(this.FormData).then((response) => {
+					uni.hideLoading();
+					this.hourMap=response.data.hourMap
+					this.getPle(this.hourMap)
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
+			},
+			getPle(list){
+				 // list={
+					//   "0-2点": 200,
+					//   "2-4点": 1210,
+					//   "4-6点": 2310,
+					//   "6-8点": 20,
+					//   "8-10点": 230,
+					//   "10-12点": 30,
+					//   "12-14点": 440,
+					//   "14-16点": 120,
+					//   "16-18点": 230,
+					//   "18-20点": 20,
+					//   "20-22点": 20,
+					//   "22-24点": 10
+					// }
+				if (!this.myChart) {
+					this.myChart = echarts.init(document.getElementById('pieEcharts'),null,{
+						width:uni.upx2px(700),height:uni.upx2px(480)
+					});
+				}
+				this.myChart.clear();
+				var data1=[];
+				var data2=[];
+				for(var i in list){
+					data1.push(i)
+					data2.push(list[i])
+				}
+			
+				var headitemby=""
+				var showkey = "";
+				var option = {
+					 tooltip: {
+					    trigger: 'axis'
+					  },
+					grid: {
+						top: '6%',
+						left: '3%',
+						right: '8%',
+						bottom: '8%',
+						containLabel: true
+					},
+					  xAxis: {
+					    type: 'category',
+					    data: data1,
+						
+						axisLabel: {
+							rotate:40,
+							interval:0,
+							textStyle: {
+								color: "#333"
+							}
+						},
+					  },
+					  yAxis: {
+					    type: 'value',
+						
+					  },
+					  series: [
+					    {
+						  name: '合计',
+					      data: data2,
+					      type: 'bar'
+					    }
+					  ]
+				}
+				console.log(option)
+				this.myChart.setOption(option);
+				
+				
+			},
+			getElectricityMeterList(){
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+							
+				
+							
+				API.electricityMeterList().then((response) => {
+					uni.hideLoading();
+					this.electricityMeterList=response.data.meterList
+					if(this.electricityMeterList.length){
+						this.FormData.meterId=this.electricityMeterList[0].id
+						this.title=this.electricityMeterList[0].name
+						// {
+						// 		label: '全部类型',
+						// 		value: '',
+						// 	}
+						this.tabsFrom.selector1=[]
+						this.tabsFrom.selector1=this.electricityMeterList.map(item=>{
+							return {
+								label:item.name,
+								value:item.id
+							}
+						})
+						this.getTimeSlotStatistics()
+						this.getElectricityStatistics()
+					}else{
+						uni.showModal({
+							title:"提示",
+							content:"未绑定电表,请联系管理员！",
+							showCancel:false,
+							success() {
+								uni.navigateBack()
+							}
+						})
+					}
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
+			},
 			selector2confirm(e){
 				this.tabsFrom.show2Text=e.year+"年"+e.month+"月"
 				
@@ -358,7 +478,12 @@
 				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){
 				console.log(e)
@@ -372,9 +497,12 @@
 			// 选中任一radio时，由radio-group触发
 			radioGroupChange(e) {
 				 console.log(e);
-				 if(e==5){
+				 this.FormData.type=e
+				 if(e==10){
 					 this.tabsFrom.show2=true
 					 this.params.day=false
+				 }else{
+					 this.getElectricityStatistics()
 				 }
 			}
 		}
@@ -441,13 +569,22 @@
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
-
+			    align-items: center;
 			.date {
 				font-size: 40rpx;
 
 
 			}
-
+			.dot{
+				width: 10rpx;
+				height: 10rpx;
+				background-color: rgba(255,150,0,1);
+				border-radius: 999px;
+				
+				bottom: -5rpx;
+				left: 50%;
+				transform: translateX(-50%);
+			}
 		}
 
 		.item-today {
@@ -460,18 +597,11 @@
 			.week {
 				color: rgba(16, 16, 16, 1);
 			}
-			.dot{
-				width: 10rpx;
-				height: 10rpx;
-				background-color: rgba(255,150,0,1);
-				border-radius: 999px;
-				position: absolute;
-				bottom: -5rpx;
-				left: 50%;
-				transform: translateX(-50%);
-			}
+			
 		}
+		
 	}
+	
 
 	// 用电量
 	.electricity-consumption {

uni_modules/uview-ui/components/u-navbar/u-navbar.vue

@@ -9,7 +9,7 @@
 					</view>
 					<view class="u-icon-wrap u-back-text u-line-1" v-if="backText" :style="[backTextStyle]">{{ backText }}</view>
 				</view>
-				<view class="u-navbar-content-title" v-if="title" :style="[titleStyle]">
+				<view class="u-navbar-content-title" v-if="title" :style="[titleStyle]"  @click="titleCk" >
 					<view
 					    class="u-title u-line-1"
 					    :style="{
@@ -18,9 +18,10 @@
 							fontWeight: titleBold ? 'bold' : 'normal'
 						}">
 						{{ title }}
+						<u-icon v-if="titleIcon" :name="titleIcon"></u-icon>
 					</view>
 				</view>
-				<view class="u-navbar-content-title" v-if="titleLong" >
+				<view class="u-navbar-content-title" v-if="titleLong"   @click="titleCk" >
 					<view
 					    class="u-title u-line-1"
 					    :style="{
@@ -29,6 +30,8 @@
 							fontWeight: titleBold ? 'bold' : 'normal'
 						}">
 						{{ titleLong }}
+						<u-icon v-if="titleIcon" :name="titleIcon"></u-icon>
+						
 					</view>
 				</view>
 				<view class="u-slot-content">
@@ -103,6 +106,10 @@
 				type: String,
 				default: ''
 			},
+			titleIcon: {
+				type: String,
+				default: ''
+			},
 			// 返回的文字的 样式
 			backTextStyle: {
 				type: Object,
@@ -239,6 +246,9 @@
 		},
 		created() {},
 		methods: {
+			titleCk(){
+				this.$emit("titleCk")
+			},
 			navberBack(){
 				
 				const pages=getCurrentPages()

uni_modules/uview-ui/components/u-picker-select/u-picker-select.vue

@@ -13,7 +13,7 @@
 				</view>
 			</view>
 		</view>
-		<view class="u-datetime-picker">
+		<view class="u-datetime-picker" v-if="noselect">
 			<view class="u-picker-header" @touchmove.stop.prevent="">
 				
 				<view class="headesParamsSelect" :class="{
@@ -130,6 +130,10 @@
 				default () {
 					return [];
 				}
+			},
+			noselect:{
+				type: Boolean,
+				default: true
 			},
 			// 当mode=selector或者mode=multiSelector时，提供的默认选中的下标
 			defaultSelector: {