jp-housekeep-electric/pages/equipmentDataMonitoring/3PhaseCurrentDetails.vue

<template>
	<view>
		<u-navbar :title="title"  title-color="#101010" >
			
			<view class="slot" slot="right" @click="show=true">
				<image class="img" src="@/assets/img/riLine-calendar-todo-line 2.svg" mode=""></image>
			</view>
		</u-navbar>
		
	
		 <u-picker-select  :noselect="false"
		 @confirm="selector2confirm" @reset="selector2reset"  :defaultTime="queryDate"
		 title="日期选择" v-model="show" mode="time" :params="params"   ></u-picker-select>
		  <view class="main">
		  	<view class="title">
		  		
				<view class="text">
					
					<view class="icon">
						
					</view>
					<span>
						{{typeName}}监测 <span v-if="typeN">（单位{{typeN}}）</span>
						
					</span>
				
				</view>
				<view  v-if="type=='A'" @click="gotoUrl('/pages/abnormal/abnormalContrastDetails?id='+meterNo)">
					三项电流情况<u-icon name="arrow-right"></u-icon>
				</view>
		  	</view>
			<view class="chat">
				<view id="barEcharts" style="min-height:440rpx;" >
				
				</view>
			</view>
			
			<!-- 表格 -->
			<view class="table">
				
				<table bg-color="#f1f2f5" border-color="#f1f2f5" color="#101010" padding="20rpx 0">
					
						<tr>
							<th></th>
							<th>实时{{typeKey}}</th>
							<th>最大{{typeKey}}</th>
							<th>最小{{typeKey}}</th>
						</tr>
						
						<template v-if="type=='AF'">
							<tr>
								<td></td>
								<td>{{currentMap.AL1}}</td>
								<td>{{currentMap.AL2}}</td>
								<td>{{currentMap.AL3}}</td>
							</tr>
						</template>
						<template v-else >
							<tr v-if="type=='P'">
								<td class="tableft">总功率</td>
								<td>{{queryDate==nowDate?currentMap.AL1:'\\'}}</td>
								<td>{{currentMap.AL2}}</td>
								<td>{{currentMap.AL3}}</td>
							</tr>
							
							<tr>
								<td>A相</td>
								<td>{{queryDate==nowDate?currentMap.A1:'\\'}}</td>
								<td>{{currentMap.A2}}</td>
								<td>{{currentMap.A3}}</td>
							</tr>
							<tr>
								<td>B相</td>
								<td>{{queryDate==nowDate?currentMap.B1:'\\'}}</td>
								<td>{{currentMap.B2}}</td>
								<td>{{currentMap.B3}}</td>
							</tr>
							<tr>
										<td>C相</td>
										<td>{{queryDate==nowDate?currentMap.C1:'\\'}}</td>
										<td>{{currentMap.C2}}</td>
										<td>{{currentMap.C3}}</td>
							</tr>
						</template>
						
						
					</table>
					<view  class="text2" style="text-align: center;padding-top: 8rpx;" >
						{{queryDate}}
					</view>
			</view>
		  </view>
		  
		  
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/electricityMeter.js'
	import * as echarts from 'echarts';
	import {
		currentTimeStamp,
		parseUnixTime,
		beforeTimeStamp
	} from '@/apis/utils'
	
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				meterNo:'',
				type:'',
				isLoading: true,
				nowDate:"",
				queryDate:"",
				graphMap:{},
				currentMap:{},
				timeList:[],
				typeName:'',
				typeN:'',
				typeKey:'',
				title:"",
			}
		},
		computed:{
			
		},
		onLoad(op){
			this.meterNo=op.id
			this.type=op.type
			this.typeName=op.typeName
			this.title=op.title
			if(this.type=='P'){
				this.typeKey='功率'
				this.typeN='kW'
			}else if(this.type=='A'){
				this.typeKey='电流'
				this.typeN='A'
			}else if(this.type=='V'){
				this.typeKey='电压'
				this.typeN='V'
			}else if(this.type=='T'){
				this.typeKey='温度'
				this.typeN='℃'
			}else if(this.type=='F'){
				this.typeKey='功率因数'
				this.typeN=''
			}else if(this.type=='AF'){
				this.typeKey='功率因数'
				this.typeN=''
			}
			
			
			
			this.nowDate=parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
			this.queryDate=parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
			
			
			this.getPowerDetection()
		},
		methods: {
			selector2reset(e){
				this.queryDate=parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
				this.getPowerDetection()
			},
			selector2confirm(e){
				this.queryDate=e.year+"-"+e.month+'-'+e.day	
				this.getPowerDetection()
			},
			getPowerDetection(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.powerDetection({
					queryDate:this.queryDate,
					meterId:this.meterNo,
					type:this.type
				}).then(response => {
						uni.hideLoading();
							
					this.currentMap = response.data.currentMap;
					this.graphMap= response.data.graphMap
					this.setMap();
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			
			setMap(){
				this.timeList=[]
				for(var i in  this.graphMap){
					var mod=this.graphMap[i];
					var time=mod.createTime	
					mod.createTime=time.replace("-","/").replace("-","/")
					this.timeList.push(i)
				}
				// sz1=['总功率','A相功率','B相功率','C相功率'];
							
				// sz2=['A相电流','B相电流','C相电流'];
				// sz3=['A相电压','B相电压','C相电压'];
				// sz4=['A相功率因数','B相功率因数','C相功率因数'];
				// sz5=['平均功率因数'];
				
				var sz1=['总功率','A相功率','B相功率','C相功率'];
				var sz2=['A相电流','B相电流','C相电流'];
				var sz3=['A相电压','B相电压','C相电压'];
				var sz4=['A相功率因数','B相功率因数','C相功率因数'];
				var sz5=['平均功率因数'];
				var sz6=['A相温度','B相温度','C相温度'];
				var list=[];
				
				if(this.type=='T'){
					//this.typeName='功率'
					
					
					this.setSz(sz6,['temperature1','temperature2','temperature3'],list,this.graphMap)
					
					this.echarts('barEcharts',1,sz6,list);
					
				}
				
				if(this.type=='AF'){
					//this.typeName='功率'
					
					
					this.setSz(sz5,['averPowerFactor'],list,this.graphMap)
					
					this.echarts('barEcharts',1,sz5,list);
					
				}
				if(this.type=='F'){
					//this.typeName='功率'
					
					
					this.setSz(sz4,['af','bf','cf'],list,this.graphMap)
					
					this.echarts('barEcharts',1,sz4,list);
					
				}if(this.type=='P'){
					//this.typeName='功率'
					
					
					this.setSz(sz1,['totalPower','ap','bp','cp'],list,this.graphMap)
					
					this.echarts('barEcharts',1,sz1,list);
					
				}else if(this.type=='A'){
					//this.typeName='电流'
							this.setSz(sz2,['aa','ba','ca'],list,this.graphMap)
					this.echarts('barEcharts',0,sz2,list);
					
				}else if(this.type=='V'){
					//this.typeName='电压'
					this.setSz(sz3,['av','bv','cv'],list,this.graphMap)
					
					this.echarts('barEcharts',0,sz3,list);
					
				}
				
			},
			setSz(sz1,sz2,list,energyCenterMapObj,k){
				var sz1c=['#ceba07','#32CD32','#FF5733']
				var sz2c=['#54a1d5','#ceba07','#32CD32','#FF5733']
				
				for(var j in sz1){
					
					var ap={
						 name: sz1[j],
						 type: 'line',
						  symbol: 'none',
						  //      sampling: 'lttb',
						// stack: 'Total',
						 data:[]
					}
					if(sz1.length==3){
						ap.itemStyle={
								color:sz1c[j]
							}
					}
					if(sz1.length==4){
						ap.itemStyle={
								color:sz2c[j]
							}
					}
					list.push(ap)
					
					
					for(var i in energyCenterMapObj){
						var time=this.queryDate.replace("-","/").replace("-","/")
						
						var obj=energyCenterMapObj[i][sz2[j]];
					
						var time = new Date(time+' '+i).getTime()
							
						ap.data.push([time,obj]);
						
						
					}
				}
			 
			 
				
			},	echarts(className,color,legenddata,seriesdata){
				var colorName="#333"
				// 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: {
								top: 40,
								left: 8,
								right: 8,
								bottom: 10,
								containLabel: true
							  },
							 
							  xAxis: {
								
								type: 'time',
								splitNumber: 4,
								boundaryGap: false,
								
								axisLabel:{
									 
								    textStyle:{
								      color:colorName
								    }
								  },
								  axisLine:{
									  show:true,
								      lineStyle:{
								        color:colorName
								      }
								    },
							  },
							  yAxis: {
								type: 'value',
								//name: '单位('+this.typeN+')',
								  axisLabel:{
									
								      textStyle:{
								        color:colorName
								      }
								    },  axisLine:{
									  show:true,
								      lineStyle:{
								        color:colorName
								      }
								    },
							  },
							    // dataZoom: [
							    //   {
							    //     type: 'inside',
							    //     start: 0,
							    //     end: 100
							    //   },
							    //   {
							    //     start: 0,
							    //     end: 100
							    //   }
							    // ],
							  series: seriesdata
							};
							console.log(option);
					myChart.setOption(option);
			}
		}
		
		
		
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.slot{
		    background: #fff;
		display: flex;
		align-items: center;
		.img{
			width: 48rpx;
			height: 48rpx;
			margin-right: 4rpx;
		}
	}
     .main{
		 padding: 32rpx;
		 .title{
			display: flex;
			justify-content: space-between;
				
			 .icon{
				 width: 8rpx;
				 height: 32rpx;
				 	margin-right: 8rpx;
				 background-color: rgba(22,119,255,1);
			 }
			
			 .text{
				  display: flex;
				  align-items: center;
				 color: rgb(16,16,16);
				 font-size: 36rpx;
				 margin-left: 12rpx;
				 font-weight: bold;
			 }
		 }
		 .chat{
			 width: 100%;
			 height: 480rpx;
			 margin-top: 32rpx;
			 .img{
				 width: 100%;
				 height: 100%;
			 }
		 }
		 // 表格
		 .table{
			 margin-top: 60rpx;
			 border-radius: 8px;
			 
			 z-index: 999;
			 table{
				 background-color:#f1f2f5 ;
				 color: #101010;
				 padding:20rpx 10rpx;
				 
				     width: 100%;
					td{
						text-align: right;
					}
			 }
		 }
	 }
</style>