能源中心

index/business/index.html

@@ -4,7 +4,10 @@
 		<script>
 			//加载开始时间
 			var start_time = (new Date()).getTime();
-			var route_path = window.location.href.split("#")[1].replace(/\?.*/, '')
+			var route_path ="/";
+			if(window.location.href.split("#")[1]){
+				route_path= window.location.href.split("#")[1].replace(/\?.*/, '')	
+			}
 		</script>
 
 		<meta charset="utf-8">

index/home/index.html

@@ -4,7 +4,10 @@
 		<script>
 			//加载开始时间
 			var start_time = (new Date()).getTime();
-			var route_path = window.location.href.split("#")[1].replace(/\?.*/, '')
+			var route_path ="/";
+			if(window.location.href.split("#")[1]){
+				route_path= window.location.href.split("#")[1].replace(/\?.*/, '')	
+			}
 		</script>
 
 		<meta charset="utf-8">

index/parking/index.html

@@ -4,7 +4,10 @@
 		<script>
 			//加载开始时间
 			var start_time = (new Date()).getTime();
-			var route_path = window.location.href.split("#")[1].replace(/\?.*/, '')
+			var route_path ="/";
+			if(window.location.href.split("#")[1]){
+				route_path= window.location.href.split("#")[1].replace(/\?.*/, '')	
+			}
 		</script>
 
 		<meta charset="utf-8">

index/pension/index.html

@@ -4,7 +4,10 @@
 		<script>
 			//加载开始时间
 			var start_time = (new Date()).getTime();
-			var route_path = window.location.href.split("#")[1].replace(/\?.*/, '')
+			var route_path ="/";
+			if(window.location.href.split("#")[1]){
+				route_path= window.location.href.split("#")[1].replace(/\?.*/, '')	
+			}
 		</script>
 
 		<meta charset="utf-8">

src/projects/business/apis/Other/energy.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+import Qs from 'qs';
+
+
+export function energyCenterElectricity(data) {
+	return request({
+		url: '/mobile/electricityMeterApi/energyCenterElectricity',
+		data: Qs.stringify(data),
+		method: 'post',
+	})
+}
+export function energyCenterMap(data) {
+	return request({
+		url: '/mobile/electricityMeterApi/energyCenterMap',
+		data: Qs.stringify(data),
+		method: 'post',
+	})
+}

src/projects/business/views/Other/Energy/Info.vue

@@ -1,5 +1,7 @@
 <template>
 	<div>
+		<common @asynCallBack="asynCallBack"></common>
+		
 		<header class="mui-bar mui-bar-nav">
 			<div class="barRight">
 				<i class="mui-icon-extra mui-icon-extra-filter"></i>
@@ -23,55 +25,55 @@
 				<div class="returnCheckbox">
 					<div class="mui-input-row mui-checkbox mui-left">
 						<label>总功率</label>
-						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+						<input name="checkbox1" v-model="showlist1" value="总功率" type="checkbox"  >
 					</div>
 					<div class="mui-input-row mui-checkbox mui-left">
 						<label>A相功率</label>
-						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+						<input name="checkbox1"  v-model="showlist1" value="A相功率" type="checkbox"  >
 					</div>
 					<div class="mui-input-row mui-checkbox mui-left">
 						<label>B相功率</label>
-						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+						<input name="checkbox1"  v-model="showlist1" value="B相功率" type="checkbox"  >
 					</div>
 					<div class="mui-input-row mui-checkbox mui-left">
 						<label>C相功率</label>
-						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+						<input name="checkbox1"  v-model="showlist1" value="C相功率" type="checkbox"  >
 					</div>
 				</div>
 				<div class="title">电流</div>
 				<div class="returnCheckbox">
 					<div class="mui-input-row mui-checkbox mui-left">
-						<label>A相功率</label>
-						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+						<label>A相电流</label>
+						<input name="checkbox2" v-model="showlist2" value="A相电流" type="checkbox" checked>
 					</div>
 					<div class="mui-input-row mui-checkbox mui-left">
-						<label>B相功率</label>
-						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+						<label>B相电流</label>
+						<input name="checkbox2" v-model="showlist2" value="B相电流" type="checkbox" checked>
 					</div>
 					<div class="mui-input-row mui-checkbox mui-left">
-						<label>C相功率</label>
-						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+						<label>C相电流</label>
+						<input name="checkbox2" v-model="showlist2" value="C相电流" type="checkbox" checked>
 					</div>
 				</div>
 				<div class="title">电压</div>
 				<div class="returnCheckbox">
 					<div class="mui-input-row mui-checkbox mui-left">
-						<label>A相功率</label>
-						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+						<label>A相电压</label>
+						<input name="checkbox3" v-model="showlist3" value="A相电压" type="checkbox" checked>
 					</div>
 					<div class="mui-input-row mui-checkbox mui-left">
-						<label>B相功率</label>
-						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+						<label>B相电压</label>
+						<input name="checkbox3"  v-model="showlist3" value="B相电压" type="checkbox" checked>
 					</div>
 					<div class="mui-input-row mui-checkbox mui-left">
-						<label>C相功率</label>
-						<input name="checkbox1" value="Item 1" type="checkbox" checked>
+						<label>C相电压</label>
+						<input name="checkbox3"  v-model="showlist3" value="C相电压" type="checkbox" checked>
 					</div>
 				</div>
 			</div>	
 			<div class="popover-btn">
-				<div class="popover-btn1">重置</div>
-				<div class="popover-btn2">确定</div>
+				<div class="popover-btn1" @click="init(true)">重置</div>
+				<div class="popover-btn2" @click="setMap(true)">确定</div>
 			</div>
 		</div>
 		<div class="mui-content">
@@ -85,109 +87,375 @@
 					<div class="returnUnit-item">拾</div>
 					<div class="returnUnit-item">1</div>
 					<div class="returnUnit-item colorRed">0.1</div>
+					<span style="min-width: 32px;">&nbsp;</span>
 				</div>
 				<div class="returnData">
-					<div class="returnData-item">0</div>
-					<div class="returnData-item">0</div>
-					<div class="returnData-item">0</div>
-					<div class="returnData-item">0</div>
-					<div class="returnData-item">0</div>
-					<div class="returnData-item">0</div>
-					<div class="returnData-item">0</div>
-					<div class="returnData-item bgRed">2</div>
+					<div class="returnData-item" v-text="showTop[0]"></div>
+				 
+				 <div class="returnData-item"  v-text="showTop[1]" ></div>
+					<div class="returnData-item"  v-text="showTop[2]" ></div>
+					<div class="returnData-item"  v-text="showTop[3]" ></div>
+					<div class="returnData-item"  v-text="showTop[4]" ></div>
+					<div class="returnData-item"  v-text="showTop[5]" ></div>
+					<div class="returnData-item"  v-text="showTop[6]" ></div>
+					<div class="returnData-item bgRed" v-text="showTop[7]" ></div>
 					<span>kW·h</span>
 				</div>
 				<div class="returnRadio">
 					<div class="mui-input-row mui-radio mui-left">
 						<label>总用电量</label>
-						<input name="radio1" type="radio">
+						<input name="radio1" value="0" v-model="selectType" @click="ck(0)" type="radio">
 					</div>
 					<div class="mui-input-row mui-radio mui-left">
 						<label>当月用电量</label>
-						<input name="radio1" type="radio">
+						<input name="radio1"  value="1" v-model="selectType" @click="ck(1)" type="radio">
 					</div>
 					<div class="mui-input-row mui-radio mui-left">
 						<label>上月用电量</label>
-						<input name="radio1" type="radio">
+						<input name="radio1"  value="2" v-model="selectType" @click="ck(2)" type="radio">
 					</div>
 					<div class="mui-input-row mui-radio mui-left">
 						<label>当年用电量</label>
-						<input name="radio1" type="radio">
+						<input name="radio1"  value="3" v-model="selectType" @click="ck(3)" type="radio">
 					</div>
 					<div class="mui-input-row mui-radio mui-left">
 						<label>当日用电量</label>
-						<input name="radio1" type="radio">
+						<input name="radio1"  value="4" v-model="selectType" @click="ck(4)" type="radio">
 					</div>
 					<div class="mui-input-row mui-radio mui-left">
 						<label>查询其他月份</label>
-						<input name="radio1" type="radio">
+						<input name="radio1"  value="9" v-model="selectType" @click="ck(9)" type="radio">
 					</div>
 				</div>
 			</div>
 			<div class="returnScreen">
-				<i class="mui-icon-extra mui-icon-extra-arrowleftcricle active"></i>
-				<div class="returnTime">
-					<p>2022-06-07</p>
+				<i class="mui-icon-extra mui-icon-extra-arrowleftcricle active"
+				
+				 @click="ckDate(0)"></i>
+				<div class="returnTime" @click="selectData">
+					<p>{{queryDate}}</p>
 					<i class="mui-icon mui-icon-arrowdown"></i>
 				</div>
-				<i class="mui-icon-extra mui-icon-extra-arrowrightcricle"></i>
+				<i class="mui-icon-extra mui-icon-extra-arrowrightcricle"
+				 :class="{
+				 					 active:queryDate!=nowDate
+				 }"
+				 @click="ckDate(1)" ></i>
 			</div>
 			<dl class="returnChart returnChartBlue">
 				<dt><span>功率监测(kW)</span></dt>
-				<dd></dd>
+				<dd>
+					<div id="kwPicture" style="width:100%;height: 300px;">
+					
+					</div>
+					
+				</dd>
 			</dl>
 			<dl class="returnChart">
 				<dt><span>电压监测(A)</span></dt>
 				<dd>
-
+					<div id="aPicture" style="width:100%;height: 300px;">
+					
+					</div>
 				</dd>
 			</dl>
 			<dl class="returnChart">
 				<dt><span>电压监测(V)</span></dt>
 				<dd>
-
+					<div id="vPicture" style="width:100%;height: 300px;">
+					
+					</div>
 				</dd>
 			</dl>
 		</div>
+		<loading :visible="isLoading"></loading>
+		
 	</div>
 </template>
 
 <script>
+	require('$project/assets/js/mui.picker.min.js');
+	
+	import * as API from '@/apis/Other/energy'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import echarts from 'echarts'
+	
+	import 'echarts/lib/chart/line'
+	import {
+		currentTimeStamp,
+		parseUnixTime,
+		beforeTimeStamp
+	} from '$project/utils'
 	export default {
+		name: 'MasterHealthArchives',
+		components: {
+			Common,
+			Loading,
+		
+		},
 		data() {
-			return {}
+			return {
+				isLoading: false,
+				showTop:[0,0,0,0,0,0,0,0],
+				nowDate:"",
+				 
+				queryDate:"",
+				selectType:"0",
+				energyCenterElectricityObj:{},
+				energyCenterMapObj:{},
+				
+				showlist1:[],
+				showlist2:[],
+				showlist3:[],
+			}
+		},
+		mounted() {
+			
+			
 		},
-		methods: {}
+		created() {
+	
+			this.init()
+			//this.queryDate='2022-06-08'
+			this.getEnergyCenterMap();
+			this.getEnergyCenterElectricity();
+ 		},
+		methods: {
+			init(bl){
+				this.nowDate=parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
+				this.queryDate=parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
+				this.showlist1=['总功率','A相功率','B相功率','C相功率'];
+			
+				this.showlist2=['A相电流','B相电流','C相电流'];
+				this.showlist3=['A相电压','B相电压','C相电压'];
+				if(bl){
+					mui('#popover').popover('toggle');
+					mui(".mui-scroll-wrapper").scroll()
+				}
+			},
+			//选择日期
+			selectData() {
+				var _this = this;
+				var picker = new mui.DtPicker({
+					"type": "date",
+					"beginYear": 2020,
+					"endYear": 2040,
+					"endDate": new Date(),
+					"value": _this.queryDate
+				});
+				picker.show(function(rs) {
+					_this.queryDate = rs.text;
+
+					_this.getEnergyCenterMap()
+					picker.dispose();
+				});
+			},
+			ckDate(bl){
+				 
+				if(bl&&this.queryDate==this.nowDate){
+					return
+				}
+				let dd = new Date(this.queryDate)
+				if(bl){
+					dd.setDate(dd.getDate() + 1)	
+				}else{
+				 	dd.setDate(dd.getDate() - 1)
+				}
+				let time = dd.getTime()
+				
+				this.queryDate=parseUnixTime(time, '{y}-{m}-{d}');
+				this.getEnergyCenterMap()
+
+			},
+			ck(val){
+				if(val!=this.selectType){
+					this.selectType=val;
+					this.getEnergyCenterElectricity()
+				}
+			},
+			//获取详情
+			getEnergyCenterMap() {
+				this.isLoading = true;
+				API.energyCenterMap({
+					queryDate:this.queryDate
+				}).then(response => {
+					this.isLoading = false;
+			
+					this.energyCenterMapObj = response;
+				
+					this.setMap();
+					
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			setMap(bl){
+				var list1=[];
+				var list2=[];
+				var list3=[];
+				var sz1=['总功率','A相功率','B相功率','C相功率'];
+				var sz2=['A相电流','B相电流','C相电流'];
+				var sz3=['A相电压','B相电压','C相电压'];
+				this.setSz(sz1,['allp','ap','bp','cp'],list1,this.energyCenterMapObj,this.showlist1)
+				this.setSz(sz2,['aa','ba','ca'],list2,this.energyCenterMapObj,this.showlist2)
+				this.setSz(sz3,['av','bv','cv'],list3,this.energyCenterMapObj,this.showlist3)
+				console.log(this.list1)
+				//获取图表数据
+				this.echarts('kwPicture',1,this.showlist1,list1);
+				 
+				//获取图表数据
+				this.echarts('aPicture',0,this.showlist2,list2);
+				//获取图表数据
+				this.echarts('vPicture',0,this.showlist3,list3);
+				if(bl){
+					mui('#popover').popover('toggle');
+					mui(".mui-scroll-wrapper").scroll()
+				}
+			
+			},
+			setSz(sz1,sz2,list,energyCenterMapObj,showList){
+				
+				for(var j in sz1){
+					var k =showList.indexOf(sz1[j]);
+					if(k==-1){
+						continue
+					}
+					var ap={
+						 name: sz1[j],
+						 type: 'line',
+						 stack: 'Total',
+						 data:[]
+					}
+					list.push(ap)
+					for(var i in energyCenterMapObj){
+						var obj=energyCenterMapObj[i][sz2[j]];
+						if(obj){
+							ap.data.push(obj);
+						}
+						
+					}
+				}
+				console.log(list)
+			 
+				
+			},
+			//获取详情
+			getEnergyCenterElectricity() {
+				
+				this.isLoading = true;
+				API.energyCenterElectricity({
+					queryDate:this.queryDate,
+					type:this.selectType
+				}).then(response => {
+					this.isLoading = false;
+					this.showTop=[0,0,0,0,0,0,0,0]
+					this.energyCenterElectricityObj = response;
+					 
+					var electricity=this.energyCenterElectricityObj.electricity;
+					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()
+					}
+				
+					//showTop
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			asynCallBack(){},
+			echarts(className,color,legenddata,seriesdata){
+				var colorName=""
+				if(color=='1'){
+					colorName="#ECEDF0"
+				}else{
+					colorName="#333"
+				}
+				
+				var myChart = echarts.init(document.getElementById(className), 'light');
+				myChart.clear()
+				var option = {
+							
+							  tooltip: {
+								trigger: 'axis',
+								borderColor:"#F0F0F0",
+								borderWidth:1,
+								backgroundColor:"#ffffff",
+								textStyle:{
+									color:"#333"
+								}
+							  },
+							  legend: {
+								data: legenddata,
+								  textStyle: {
+								      color: colorName
+								    }
+							  },
+							  grid: {
+								left: '3%',
+								right: '4%',
+								bottom: '3%',
+								containLabel: true
+							  },
+							 
+							  xAxis: {
+								type: 'category',
+								boundaryGap: false,
+								data: ['01', '02', '03', '04', '05', '06', '07','08', '09', '10', '11', '12', '13', '14','15', '16', '17', '18', '19', '20', '21', '22', '23','24'],
+								axisLabel:{
+								    textStyle:{
+								      color:colorName
+								    }
+								  },
+								  axisLine:{
+									  show:true,
+								      lineStyle:{
+								        color:colorName
+								      }
+								    },
+							  },
+							  yAxis: {
+								type: 'value',
+								  axisLabel:{
+								      textStyle:{
+								        color:colorName
+								      }
+								    },  axisLine:{
+									  show:true,
+								      lineStyle:{
+								        color:colorName
+								      }
+								    },
+							  },
+							  series: seriesdata
+							};
+					myChart.setOption(option);
+			}
+		}
 	}
 </script>
-<script>
-	mui.init();
-
-	mui.plusReady(function() {
-		//				var view = plus.nativeObj.View.getViewById("title");
-		//				
-		//				var bitmap = new plus.nativeObj.Bitmap("back");
-		//				bitmap.loadBase64Data("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAb1BMVEUAAAAAev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8AAACubimgAAAAI3RSTlMAGfUTGfQTGPMSGPIYGhgaGBsXGxcbFxwXHBccFhwWHRYdHWufDPQAAAABYktHRACIBR1IAAAAB3RJTUUH4QETEBwooeTlkQAAAJVJREFUSMft1EkSgkAQRNFGUXFWHBDBibr/HTUwD5B/48Ig1y+io7u6MqUhf5hsNEY+j5hMgZ/FJ8Xc9ovos3T96utjbfqN/Nb0O/m96Uv5g+mP8ifTn+Ur01/ka9Nf5RvTt/I309/lH6Z/yr9Mn+Q71/MT8B34K/E58Enzv8R/K98HvnF8p3lr8F7izce7lbf3kJ/lDQp9HdBhgg3PAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTAxLTE5VDE2OjI4OjQwKzA4OjAwpTDFwQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wMS0xOVQxNjoyODo0MCswODowMNRtfX0AAAAASUVORK5CYII=");
-		//				view.drawBitmap(bitmap, {}, {
-		//					top: "10px",
-		//					left: "10px",
-		//					width: "24px",
-		//					height: "24px"
-		//				});
-		//				
-		//				view.setTouchEventRect({top:"0px",left:"0px",width:"44px",height:"100%"});
-	});
-
-	mui('.mui-scroll-wrapper').scroll();
-	mui('body').on('shown', '.mui-popover', function(e) {
-		//console.log('shown', e.detail.id);//detail为当前popover元素
-	});
-	mui('body').on('hidden', '.mui-popover', function(e) {
-		//console.log('hidden', e.detail.id);//detail为当前popover元素
-	});
-</script>
 
-<style>
+
+<style scoped >
 	.popover-form{
 		padding: 20px;
 	}
@@ -234,7 +502,7 @@
 	}
 	
 	.mui-popover {
-		position: absolute;
+		position: fixed;
 		background-color: #fff;
 		z-index: 999;
 		left: 0 !important;
@@ -292,12 +560,12 @@
 	}
 
 	.returnChart {
-		padding: 0 16px;
+	/* 	//padding: 0 16px; */
 		background-color: #fff;
 	}
 
 	.returnChart dt {
-		padding: 16px 0;
+		padding: 16px 16px;
 	}
 
 	.returnChart dt span {
@@ -319,6 +587,7 @@
 
 	.returnChart dd {
 		padding-bottom: 16px;
+		margin: 0;
 	}
 
 	.returnHead {
@@ -403,4 +672,6 @@
 		left: 0;
 		top: 2px;
 	}
+	
 </style>
+<style src="$project/assets/css/mui.picker.min.css"></style>