jp-xpgj-GA-file/src/projects/business/views/Other/Energy/Info.vue

<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 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: 32px;">&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>kW·h</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">
						<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: false,
				showTop:[0,0,0,0,0,0,0,0],
				nowDate:"",
				 timeList:[],
				queryDate:"",
				queryDate2:"",
				selectType:"0",
				energyCenterElectricityObj:{},
				energyCenterMapObj:{},
				
				showlist1:[],
				showlist2:[],
				showlist3:[],
			}
		},
		mounted() {
			
			
		},
		created() {
	
			this.init()
			
			
 		},
		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,['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);
				
			
			},
			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);
						}
						
					}
				}
				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: '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>