首页， 图标等功能开发

apis/pagejs/energyManage.js

@@ -0,0 +1,90 @@
+import request from '@/apis/utils/request'
+
+//物业设备状态(首页头部
+export function deviceStatus(data) {
+	var url='mobile/employee/deviceStatus';
+	return request({
+		method: 'post',
+		data: data,
+		url: url
+	})
+}
+
+//物业拥有的设备的单位
+export function deviceCompanyList(data) {
+	var url='mobile/employee/deviceCompanyList';
+	return request({
+		method: 'post',
+		data: data,
+		url: url
+	})
+}
+
+//用电量物业
+export function homePageKwh(data) {
+	var url='mobile/employee/homePageKwh';
+	return request({
+		method: 'post',
+		data: data,
+		url: url
+	})
+}
+
+//用电量物业
+export function companyKwhList (data) {
+	var url='mobile/employee/companyKwhList';
+	return request({
+		method: 'post',
+		data: data,
+		url: url
+	})
+}
+//用电量物业
+export function alarmRecord(data) {
+	var url='mobile/employee/alarmRecord';
+	return request({
+		method: 'post',
+		data: data,
+		url: url
+	})
+}
+//用电量物业
+export function alarmConfiguration(data) {
+	var url='mobile/employee/alarmConfiguration';
+	return request({
+		method: 'post',
+		data: data,
+		url: url
+	})
+}
+
+//用电量物业
+export function alarmRecordDetails (data) {
+	var url='mobile/employee/alarmRecordDetails';
+	return request({
+		method: 'post',
+		data: data,
+		url: url
+	})
+}
+
+
+//能源管理物业
+export function homePageManage(data) {
+	var url='mobile/energyManage/homePageManage';
+	return request({
+		method: 'post',
+		data: data,
+		url: url
+	})
+}
+
+//能源管理物业子表
+export function homePageManageChildMeter(data) {
+	var url='mobile/energyManage/homePageManageChildMeter';
+	return request({
+		method: 'post',
+		data: data,
+		url: url
+	})
+}

pages/equipmentDataMonitoring/equipmentElectricity.vue

@@ -10,8 +10,11 @@
 			</view>
 
 		</view>
+		<u-picker-select title="日期选择" v-model="tabsFrom.show2" :defaultTime="tabsFrom.show2Index" :endYear="endYear"
+			mode="time" :params="params" :noselect="false" @confirm="selector2confirm" @cancel="selector2cancel"
+			@reset="selector2reset"></u-picker-select>
 		<!-- 标签 -->
-		<view class="tabs-box" v-if="companyList.length >= 2">
+		<view class="tabs-box" >
 			<view class="tabs" :style="{width: companyList.length>4 ? '' : '100%'}">
 				<u-tabs :list="merchantList1" :is-scroll="false" inactive-color="#999999" active-color="#666666"
 					:current="current" @change="change"></u-tabs>
@@ -41,9 +44,9 @@
 		
 
 		<!-- 全部标签 -->
-		<view class="main" v-for="(item, index) in kWhList" :key="item.index" v-if="current==0"
+		<view class="main"   v-show="current==0" >
+			<view class="item" v-for="(item, index) in kWhList" :key="item.index" v-if="current==0"
 			@click="toElectronicMonitoring(item)">
-			<view class="item">
 				<view class="item-content">
 					<view class="equipment">
 						<view class="equipment1 ">
@@ -93,7 +96,10 @@
 					<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
 				</view>
 			</view>
+			
 		</view>
+		<u-divider v-show="current==0" :isnone="kWhList.length==0" nonetext="暂无数据" border-color="#CFD2D5">已经到底了</u-divider>
+		
 		<!-- 子项标签 -->
 
 		<view class="statistics-manage" v-if="current==1" >
@@ -102,10 +108,10 @@
 			<!-- 图表 -->
 			<view class="chart">
 				<view class="u-subsection">
-					<u-subsection :list="list" :current="0" font-size="24"></u-subsection>
+					<u-subsection :list="list"  :current="homePageManageType" @change="sectionChange" font-size="24"></u-subsection>
 				</view>
-				<view class="chat-box">
-					<img src="@/assets/img/chat@13x.png" alt="" />
+				<view class="chat-box" id="barEcharts">
+				
 				</view>
 			</view>
 
@@ -262,13 +268,33 @@
 
 <script>
 	import * as API from '@/apis/pagejs/index.js'
-
+	import * as API2 from '@/apis/pagejs/energyManage.js'
+	import * as echarts from 'echarts';
+	import {
+		parseUnixTime,
+		beforeTimeStamp,
+		getWeek
+	} from '@/apis/utils'
+	
+	
 	export default {
 		data() {
 			return {
 				companyList: [], // 商户
 				merchantList1: [],
 				merchantList2: [],
+				myLineChart: null, // 图表
+				myBarChart: null,
+				myPieChart: null,
+				homePageManageType: 0,
+				homePageManageObj: {
+					childKwh: 0,
+					differenceKwh: 0,
+					parkKwh: 0
+				},
+				meterList: [],
+				meterListShow:{},
+				queryDate: '',
 				kWhList: [], //设备
 				companyId: '',
 				popShow: false,
@@ -279,23 +305,51 @@
 				recordsTotal: 0,
 				windowHeight: '',
 				checked:false,
-				list: [{
-						name: '上月'
-					},
-					{
-						name: '当月'
-					},
-					{
-						name: '当日'
-					}, {
-						name: '当年'
-					}, {
-						name: '合计'
-					},
-					{
-						name: '指定月份'
+				list: [{
+						name: '上月',
+						value: "2"
+					},
+					{
+						name: '当月',
+						value: "1"
+					},
+					{
+						name: '当日',
+						value: "4"
+					}, {
+						name: '当年',
+
+						value: "3"
+					}, {
+						name: '合计',
+
+						value: "0"
+					},
+					{
+						name: '指定月份',
+						value: "10"
 					}
 				],
+				endYear: '',
+				params: {
+					year: true,
+					month: true,
+					day: true,
+					hour: false,
+					minute: false,
+					second: false
+				},
+				value: '2',
+				clickType: -1,
+				tabsFrom: {
+					show1: false,
+					show1Index: 0,
+					show2Index: '',
+					show2: false,
+					show1Text: "全部类型",
+					show2Text: "全部时间",
+					
+				},
 			}
 		},
 		onReady() {
@@ -305,6 +359,9 @@
 					// console.log(this.windowHeight)
 				}
 			});
+			this.endYear = new Date().getFullYear();
+			this.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
+			
 
 			this.getCompanyInfoList();
 		},
@@ -327,40 +384,7 @@
 
 				this.getList(true);
 			},
-			getCompanyKwhList(list) {
-				uni.showLoading({
-					title: "加载中",
-					mask: true,
-				})
-				API.companyKwhList({
-					companyId: list.id
-				}).then((response) => {
-
-					var wkh = response.data;
-					var num = 0;
-					if (list.remoteReadingMeterList.length != 0) {
-						num = list.remoteReadingMeterList.length;
-					}
-					var wkhList = {
-						id: list.id,
-						name: list.name,
-						listNum: num,
-						thisDayKwh: wkh.thisDayTotalKwh,
-						thisMonthKwh: wkh.thisMonthTotalKwh,
-						lastMonthKwh: wkh.lastMonthTotalKwh,
-					};
-					this.companyKwhList.push(wkhList);
-
-					if (this.companyKwhList.length == this.companyList.length) {
-						uni.hideLoading();
-					}
-				}).catch(error => {
-					uni.showToast({
-						title: error,
-						icon: "none"
-					})
-				})
-			},
+			
 			getCompanyInfoList() {
 				this.companyKwhList = [];
 
@@ -370,10 +394,10 @@
 
 					var mList1 = [];
 					var mList2 = [];
-					// mList1.push({
-					// 	id: '',
-					// 	name: '全部'
-					// });
+					mList1.push({
+						id: '',
+						name: '全部'
+					});
 
 					for (var i = 0; i < list.length; i++) {
 						if (i >= 3) {
@@ -382,7 +406,7 @@
 							mList1.push(list[i]);
 						}
 
-						// this.getCompanyKwhList(list[i]);
+						
 					}
 
 					this.merchantList1 = mList1;
@@ -412,7 +436,7 @@
 				}
 				var data = {
 					pageIndex: this.pageIndex,
-					pageSize: 8,
+					pageSize: 20,
 					companyId: this.companyId
 				};
 				API.homePageKwh(data).then((res) => {
@@ -437,15 +461,222 @@
 				this.companyId = item.id;
 				this.popShow = false;
 
-				this.getList(true);
+				//this.getList(true);
+				this.merchantChangeApi()
+				
+			},
+			// 设备数据监测
+			getHomePageManage() {
+				
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				API2.homePageManage({
+					queryDate:this.queryDate,
+					companyId: this.companyId,
+					type: this.list[this.homePageManageType].value
+				}).then((response) => {
+					uni.hideLoading();
+					this.meterList = response.data.meterList;
+					if(!this.meterListShow.id){
+						this.meterListShow.id=1
+						this.recursionList(this.meterList)
+					}
+					
+					this.homePageManageObj = response.data;
+					this.getBarCharts()
+					
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
+			},
+			sectionChange(index) {
+				this.clickType = index;
+				this.homePageManageType = index;
+				if (index == 5) {
+					this.tabsFrom.show2 = true;
+					this.params.day = false;
+				} else {
+					this.list[5].name = '指定月份'
+					this.getHomePageManage()
+				}
+				
+				
+			},
+			recursionList(list){
+				if(list){
+					for(var i in list){
+						var obj=list[i]
+					
+						this.meterListShow[obj.id]=false
+						this.recursionList(obj.childMeterList)
+					}
+				}
+			},
+			ifBtnShow(item){
+				return this.meterListShow[item.id]
+			},
+			showBtn(item){
+				var key=this.meterListShow[item.id];
+				
+				this.$set(this.meterListShow,item.id,!key)
+				console.log("showBtn,",key)
+				
+				this.$forceUpdate()
+			},
+			selector2reset(e) {
+				console.log(e)
+				this.tabsFrom.show2Text = '全部时间'
+				this.tabsFrom.show2Index = '';
+			
+				if (e.day) {
+					this.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
+					
+					this.getHomePageManage();
+				} else {
+				
+					this.homePageManageType = this.clickType;
+					if (this.homePageManageType != 5) {
+						this.list[5].name = '指定月份';
+					}
+					this.getHomePageManage();
+				}
+			},
+			selector2cancel() {
+				if(this.clickType != -1) {
+					this.homePageManageType = this.clickType;
+				}
+			},
+			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.queryDateMethod(this.tabsFrom.show2Index, true)
+				} else {
+					this.queryDateMethod(this.tabsFrom.show2Index, false)
+				}
+			},
+			queryDateMethod(queryTime, day) {
+			
+				if (day) {
+					this.queryDate = queryTime;
+					//this.FormData2.type =day?"9":"10"
+					//this.value="-1"
+			
+				
+					//this.getHomePageManage();
+				} else {
+			
+					this.queryDate = queryTime + "-01";
+					
+					this.homePageManageType = "5";
+					this.list[5].name = queryTime;
+			
+					this.getHomePageManage();
+				}
+			},
+			getBarCharts() {
+				if (!this.myBarChart) {
+					this.myBarChart = echarts.init(document.getElementById('barEcharts'),null,{
+						width:uni.upx2px(690),height:uni.upx2px(480)
+					});
+				}
+				var thismax=Math.max(this.homePageManageObj.parkKwh,this.homePageManageObj.differenceKwh,this.homePageManageObj.childKwh) 
+				
+				var option = {
+					  
+					polar: {
+						  center:['35%','50%'],
+						radius:[20, '70%']
+					},
+					angleAxis: {
+						max: parseInt(thismax+thismax/10)+3 ,
+						startAngle: 75
+					},
+					 
+					 legend: {
+						 x:"65%",
+						 y: '0',
+						  
+			
+					    data: ['园区电量', '表计电量', '电损量'],
+						orient :'vertical'
+					  },
+					radiusAxis: {
+						type: 'category',
+						data: ['']
+					},
+					tooltip: {},
+					series: [
+						{
+							name:'园区电量',
+							type: 'bar',
+							data: [
+								this.homePageManageObj.parkKwh,
+							
+							],
+							coordinateSystem: 'polar',
+							label: {
+								show: true,
+								position: 'middle',
+								formatter: '{c}度'
+							}
+						},
+						{
+							name:'表计电量',
+							type: 'bar',
+							data: [
+							
+								this.homePageManageObj.childKwh
+								
+							],
+							coordinateSystem: 'polar',
+							label: {
+								show: true,
+								position: 'middle',
+								formatter: '{c}度'
+							}
+						},
+						{
+							name:'电损量',
+							type: 'bar',
+							data: [
+								
+								this.homePageManageObj.differenceKwh
+							],
+							coordinateSystem: 'polar',
+							label: {
+								show: true,
+								position: 'middle',
+								formatter: '{c}度'
+							}
+						}
+					]
+				};
+				console.log(option)
+				this.myBarChart.setOption(option);
+			},
+			merchantChangeApi() {
+			
+				
+				if (this.companyId) {
+			
+					this.getHomePageManage();
+				}
 			},
 			change(index) {
 				this.current = index;
 				this.companyId = this.merchantList1[index].id;
 
-				// if (index != 0) {
-				this.getList(true);
-				// }
+				this.merchantChangeApi()
 			},
 			backStatistics() {
 				uni.navigateBack()
@@ -484,7 +715,7 @@
 		background-color: #fff;
 		display: flex;
 		align-items: center;
-		padding: 32rpx 0;
+		
 		padding-right: 32rpx;
 		justify-content: space-between;
 		border-bottom: 1px solid rgba(232, 232, 232, 1);