调整

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

@@ -0,0 +1,762 @@
+<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>
+				<a  @click="openPopover" >过滤</a>
+			</div>
+			<h1 class="mui-title">能源中心</h1>
+			<a v-if="!isback" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+		</header>
+		<div id="popover" class="mui-popover">
+			<div class="popover-form">
+				<div class="title">查询日期</div>
+				<div class="selectBtn" @click="selectData2" >
+					{{queryDate2}}
+					<i class="mui-icon mui-icon-arrowdown" style=" float: right;"></i>
+				</div>
+				
+				<div class="title">功率</div>
+				<div class="returnCheckbox">
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>总功率</label>
+						<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"  v-model="showlist1" value="A相功率" type="checkbox"  >
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<label>B相功率</label>
+						<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"  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="checkbox2" v-model="showlist2" value="A相电流" type="checkbox" checked>
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<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="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="checkbox3" v-model="showlist3" value="A相电压" type="checkbox" checked>
+					</div>
+					<div class="mui-input-row mui-checkbox mui-left">
+						<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="checkbox3"  v-model="showlist3" value="C相电压" type="checkbox" checked>
+					</div>
+				</div>
+			</div>	
+			<div class="popover-btn">
+				<div class="popover-btn1" @click="init(true)">重置</div>
+				<div class="popover-btn2" @click="submitBtn()">确定</div>
+			</div>
+		</div>
+		<div class="mui-content">
+			<div class="returnHead">
+				<div class="returnUnit">
+					<div class="returnUnit-item">百万</div>
+					<div class="returnUnit-item">拾万</div>
+					<div class="returnUnit-item">万</div>
+					<div class="returnUnit-item">千</div>
+					<div class="returnUnit-item">百</div>
+					<div class="returnUnit-item">拾</div>
+					<div class="returnUnit-item">1</div>
+					<div class="returnUnit-item colorRed">0.1</div>
+					<span style="min-width: 14px;">&nbsp;</span>
+				</div>
+				<div class="returnData">
+					<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>度</span>
+				</div>
+				<div class="returnRadio">
+					<div class="mui-input-row mui-radio mui-left">
+						<label>总用电量</label>
+						<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"  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"  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"  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"  value="4" v-model="selectType" @click="ck(4)" type="radio">
+					</div>
+					<div class="mui-input-row mui-radio mui-left" v-if="false">
+						<label>查询其他月份</label>
+						<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"
+				
+				 @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"
+				 :class="{
+				 					 active:queryDate!=nowDate
+				 }"
+				 @click="ckDate(1)" ></i>
+			</div>
+			<dl class="returnChart returnChartBlue">
+				<dt><span>功率监测(KW)</span></dt>
+				<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 * as echarts from 'echarts'
+	
+	import 'echarts/lib/chart/line'
+	import {
+		currentTimeStamp,
+		parseUnixTime,
+		beforeTimeStamp
+	} from '$project/utils'
+	export default {
+		name: 'MasterHealthArchives',
+		components: {
+			Common,
+			Loading,
+		
+		},
+		data() {
+			return {
+				isLoading: true,
+				showTop:[0,0,0,0,0,0,0,0],
+				nowDate:"",
+				 timeList:[],
+				queryDate:"",
+				queryDate2:"",
+				selectType:"0",
+				energyCenterElectricityObj:{},
+				energyCenterMapObj:{},
+				isback:false,
+				showlist1:[],
+				showlist2:[],
+				showlist3:[],
+			}
+		},
+		mounted() {
+			
+			
+		},
+		created() {
+		if(this.$route.query.isback){
+			this.isback=true;
+		}
+			
+			
+			
+ 		},
+		methods: {
+			openPopover(){
+				mui('#popover').popover('toggle');
+				mui(".mui-scroll-wrapper").scroll()
+				this.queryDate2=this.queryDate;
+				
+			},
+			submitBtn(){
+				this.queryDate=this.queryDate2;
+				
+				 this.getEnergyCenterMap();
+				 this.getEnergyCenterElectricity();
+				 
+				mui('#popover').popover('toggle');
+				mui(".mui-scroll-wrapper").scroll()
+			},
+			init(bl){
+				this.nowDate=parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
+				this.queryDate=parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
+				this.queryDate2=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()
+				}
+				this.getEnergyCenterMap();
+				this.getEnergyCenterElectricity();
+			},
+			//选择日期
+			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();
+				});
+			},
+			//选择日期
+			selectData2() {
+				mui('#popover').popover('toggle');
+				mui(".mui-scroll-wrapper").scroll()
+				var _this = this;
+				var picker = new mui.DtPicker({
+					"type": "date",
+					"beginYear": 2020,
+					"endYear": 2040,
+					"endDate": new Date(),
+					"value": _this.queryDate2
+				});
+				picker.show(function(rs) {
+					_this.queryDate2 = rs.text;
+			
+					mui('#popover').popover('toggle');
+					mui(".mui-scroll-wrapper").scroll()
+					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){
+				 this.timeList=[];
+				 for(var i in  this.energyCenterMapObj){
+					
+					 this.timeList.push(i)
+				 }
+				var list1=[];
+				var list2=[];
+				var list3=[];
+				var sz1=['总功率','A相功率','B相功率','C相功率'];
+				var sz2=['A相电流','B相电流','C相电流'];
+				var sz3=['A相电压','B相电压','C相电压'];
+				this.setSz(sz1,['totalPower','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);
+				
+			
+			},
+			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',
+						  symbol: 'none',
+						       sampling: 'lttb',
+						// stack: 'Total',
+						 data:[]
+					}
+					list.push(ap)
+					for(var i in energyCenterMapObj){
+						var obj=energyCenterMapObj[i][sz2[j]];
+						if(obj){
+							ap.data.push(obj.toFixed(0));
+						}
+						
+					}
+				}
+				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(bl){
+				this.isLoading=false;
+				if(!bl){
+					this.init()
+				}else{
+					mui.toast("请登录后查看");
+					window.location.href = '../home/#/select';
+					
+				}
+				
+			},
+			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: '15%',
+								containLabel: true
+							  },
+							 
+							  xAxis: {
+								type: 'category',
+								boundaryGap: false,
+								data: this.timeList,
+								axisLabel:{
+								    textStyle:{
+								      color:colorName
+								    }
+								  },
+								  axisLine:{
+									  show:true,
+								      lineStyle:{
+								        color:colorName
+								      }
+								    },
+							  },
+							  yAxis: {
+								type: 'value',
+								
+								  axisLabel:{
+								      textStyle:{
+								        color:colorName
+								      }
+								    },  axisLine:{
+									  show:true,
+								      lineStyle:{
+								        color:colorName
+								      }
+								    },
+							  },
+							    dataZoom: [
+							      {
+							        type: 'inside',
+							        start: 0,
+							        end: 100
+							      },
+							      {
+							        start: 0,
+							        end: 100
+							      }
+							    ],
+							  series: seriesdata
+							};
+					myChart.setOption(option);
+			}
+		}
+	}
+</script>
+
+
+<style scoped >
+	.selectBtn{
+		    background-color: #f2f5fa;
+		    line-height: 20px;
+		    font-size: 16px;
+		    padding: 5px 5px 5px 15px;
+		    color: #333333;
+	}
+	.popover-form{
+		padding: 20px;
+	}
+	.popover-btn{
+		display: flex;
+		height: 48px;
+		
+	}
+	.popover-btn1{
+		width: 100px;
+		border: 1px solid #eee;
+		text-align: center;
+		line-height: 50px;
+	}
+	.popover-btn2{
+		flex: 1;
+		background-color: #1677FF ;
+		text-align: center;
+		line-height: 50px;
+		color:#fff;
+	}
+	.select select{
+		background-color: #eee;
+		margin-top: 6px;
+	}
+	.mui-popover .title{
+		margin-top: 12px ;
+	}
+	.returnCheckbox {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	
+	.returnCheckbox .mui-input-row {
+		width:33%;
+	}
+	
+	.mui-checkbox.mui-left input[type=checkbox]{
+		left: 0;
+	}
+
+	.mui-checkbox.mui-left label {
+		padding-left:24px;
+	}
+	.mui-checkbox input[type=checkbox]:before{
+		content: '\e413';
+	}
+	
+	
+	.mui-checkbox input[type=checkbox]:checked:before{
+		content: '\e443';
+	}
+	
+	.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
+		font-size: 20px;
+	}
+	.mui-checkbox input[type=checkbox], .mui-radio input[type=radio]{
+		top:11px;
+	}
+	.mui-popover {
+		position: fixed;
+		background-color: #fff;
+		z-index: 999;
+		left: 0 !important;
+		right: 0 !important;
+		top: 44px !important;
+		border-top: 1px solid #eee;
+		border-radius: 0;
+		width: 100%;
+		box-shadow: none;
+	}
+
+	.mui-backdrop {
+		top: 44px;
+	}
+
+	.barRight {
+		float: right;
+		display: flex;
+		align-items: center;
+		height: 44px;
+	}
+
+	.barRight a {
+		margin-left: 3px;
+	}
+
+	.barRight i {
+		font-size: 16px;
+	}
+
+	.returnScreen {
+		margin-top: 14px;
+		background-color: #fff;
+		display: flex;
+		justify-content: space-between;
+		padding: 12px;
+	}
+
+	.returnScreen i {
+		color: #D4D6D9;
+	}
+
+	.returnScreen .active {
+		color: #1677FF;
+	}
+
+	.returnTime {
+		display: flex;
+		align-items: center;
+	}
+
+	.returnTime p {
+		font-size: 18px;
+		margin-right: 6px;
+	}
+
+	.returnChart {
+	/* 	//padding: 0 16px; */
+		background-color: #fff;
+	}
+
+	.returnChart dt {
+		padding: 16px 16px;
+	}
+
+	.returnChart dt span {
+		position: relative;
+		padding-left: 15px;
+		font-size: 18px;
+	}
+
+	.returnChart dt span:before {
+		content: '';
+		position: absolute;
+		width: 4px;
+		height: 14px;
+		background-color: #1677FF;
+		border-radius: 2px;
+		left: 0;
+		top: 2px;
+	}
+
+	.returnChart dd {
+		padding-bottom: 16px;
+		margin: 0;
+	}
+
+	.returnHead {
+		padding: 20px;
+		background-color: #fff;
+	}
+
+	.returnUnit {
+		display: flex;
+		align-items: center;
+	}
+
+	.returnData {
+		display: flex;
+		align-items: center;
+	}
+
+	.returnUnit .returnUnit-item {
+		width: 36px;
+		text-align: center;
+		line-height: 48px;
+		margin-right: 1px;
+	}
+
+	.returnData .returnData-item {
+		height: 48px;
+		width: 36px;
+		background-color: #101010;
+		text-align: center;
+		line-height: 48px;
+		color: #fff;
+		font-size: 36px;
+		margin-right: 1px;
+	}
+
+	.returnData span {
+		margin-left: 5px;
+	}
+
+	.colorRed {
+		color: #900005;
+	}
+
+	.bgRed {
+		background-color: #900005 !important;
+	}
+
+	.returnRadio {
+		display: flex;
+		flex-wrap: wrap;
+		margin-top: 12px;
+	}
+
+	.returnRadio .mui-input-row {
+		width: 50%;
+	}
+
+	.mui-radio.mui-left input[type=radio] {
+		left: 0;
+	}
+
+	.mui-radio.mui-left label {
+		padding-left: 24px;
+	}
+
+	.returnChartBlue {
+		background-image: linear-gradient(0deg, #034373, #007BD3);
+		margin-top: 0;
+	}
+
+	.returnChartBlue dt span {
+		color: #fff;
+	}
+
+	.returnChartBlue dt span:before {
+		content: '';
+		position: absolute;
+		width: 4px;
+		height: 14px;
+		background-color: #fff;
+		border-radius: 2px;
+		left: 0;
+		top: 2px;
+	}
+	
+</style>
+<style src="$project/assets/css/mui.picker.min.css"></style>