JP-ChargeTeam51/pages/record/details.vue

<template>
	<view class="time-head">
		<ujp-navbar title="充电详情"></ujp-navbar>
		<view class="details-time">
			<view class="time">
				<view class="time1">
					<view class="time11">{{getday(chargeDetail.startTime?chargeDetail.startTime:chargeDetail.createTime)}}</view>
					<view class="time12">{{geth(chargeDetail.startTime?chargeDetail.startTime:chargeDetail.createTime)}}</view>
				</view>
				
				<view class="time2">
					<view class="time21">起</view>
					<view class="time22"></view>
					<view class="time21">止</view>
				</view>
				<view class="time1">
					<view class="time11">{{getday(chargeDetail.endTime)}}</view>
					<view class="time12">{{geth(chargeDetail.endTime)}}</view>
				</view>
			</view>
			<view  class="oldTextjp18px" >
				<view class="details-row"><p>充电时长</p><span>{{chargeDetail.chargingMinute != null ? getPercent(chargeDetail.chargingMinute) : '0秒'}}</span></view>
				<view class="details-row"><p>充电度数</p><span>{{chargeDetail.electricQuantity != null ? chargeDetail.electricQuantity/10000 : '0.000'}}度</span></view>
			</view>
		</view>
		<view class="details" style="padding: 20rpx;"  v-show="electricRecordListBl">
			<view id="pieEcharts" style="min-height:240px;">
			
			</view>
			<view style="color:#9e9e9e;margin-top: 4px;">注：充电时间每5分钟获取一次数据</view>
		</view>
		<view class="details">
			<view class="details-title">
				<h4 class="oldTextjp20px" oldstyle="font-size: 20px;">费用信息</h4>
			</view>
			<view class="oldTextjp18px" oldstyle="font-size: 18px;">
				<view class="details-row"><p>订单总额</p><span>{{chargeDetail.actualFee != null ? chargeDetail.actualFee.toFixed(2) : '0.00'}}元</span></view>
				
				
				<view class="details-row"><p>电费</p><span>{{chargeDetail.totalElecMoney != null ? chargeDetail.totalElecMoney.toFixed(2) : '0.00'}}元</span></view>
 			
				<view class="details-row" ><p>服务费</p><span>{{chargeDetail.totalServiceMoney != null ? chargeDetail.totalServiceMoney.toFixed(2) : '0.00'}}元</span></view>
				<view class="details-row" v-if="chargeDetail.serviceDiscountRatio&&chargeDetail.serviceDiscountRatio!=100" ><p>折前服务费</p><span>{{(chargeDetail.dueServiceMoney?chargeDetail.dueServiceMoney:0).toFixed(2)}}元</span></view>
								
								<view class="details-row" v-if="chargeDetail.serviceDiscountRatio&&chargeDetail.serviceDiscountRatio!=100" ><p>服务费折扣</p><span>{{chargeDetail.serviceDiscountRatio/10}}折</span></view>
								
				<!-- 				<view class="details-row" v-if="chargeDetail.discountAmount" ><p>服务费</p><span>{{chargeDetail.totalServiceMoney != null ? (chargeDetail.totalServiceMoney*100-chargeDetail.discountAmount*100)/100 : '0.00'}}元({{chargeDetail.totalServiceMoney}}-{{chargeDetail.discountAmount}})</span></view>
				 -->				
								<view class="details-row"><p>优惠券抵扣</p><span style="color:red">{{userCouponObj? userCouponObj.useText : '未使用'}}</span></view>
								<view class="details-row" v-if="chargeDetail.discountAmount" ><p>实际减免</p><span >-{{chargeDetail.discountAmount.toFixed(2)}}元</span></view>
							
							<view class="details-row" v-if="chargeDetail.userCardId"><p>会员活动</p><span >充电服务费月卡</span></view>
		<!-- 		
				<view class="details-row"><p>开始时间</p><span>{{chargeDetail.startTime}}</span></view>
				<view class="details-row"><p>结束时间</p><span>{{chargeDetail.endTime}}</span></view>
				
		 -->	</view>
		</view>
		<view class="details">
			<view class="details-title">
				<h4 class="oldTextjp20px" >更多信息</h4>
			</view>
			<view class="oldTextjp18px" >
				<view class="details-row"><p>结束原因</p><span>{{chargeDetail.remark}}</span></view>
				<view class="details-row"><p>订单状态</p><span>{{chargeDetail.statusText}}</span></view>
				<view class="details-row" v-if="false"><p>更新时间</p><span>{{chargeDetail.updateTime}}</span></view>
				<view class="details-row" ><p>充电站点</p><span>{{chargeDetail.stationName}}</span></view>
				<view class="details-row"><p>充电桩编号</p><span>{{chargeDetail.deviceName}}</span></view>
				<view class="details-row"><p>充电车辆</p><span>{{chargeDetail.carNumber}}</span></view>
				
			</view>
		</view>
		<view class="" style="padding: 0px 20px;">
			<u-button class="detailsBtn-btn oldTextjp18px" oldstyle="font-size: 16px;" type="success" shape="circle"  @click="toHome">返回主页</u-button>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	import * as echarts from "echarts";
	export default {
		data() {
			return {
				id: '',
				myChart:null,
				electricRecordList:[],
				chargeDetail: {},
				userCouponObj:{},
				electricRecordListBl:true,
				elderStatus: false,
			}
		},
		onLoad(op) {
			if(op.id) {
				this.id = op.id;
				this.getchargingDetail();
			}
			
			if(this.carhelp.get("getElderModeClass") == "长辈模式") {
				this.elderStatus = true;
			} else {
				this.elderStatus = false;
			}
		},
		methods: {
			getday(time){
				if(time){
					return time.substring(5,10).replace('-','月')+'日'
				}else
				return''
			},
			geth(time){
				if(time){
					
					return time.substring(11,16)
				}else
				return''
			},
			getPercent(estimateMinute) {
				var value="";
				 
				var ms =estimateMinute
				if (ms > 0) {
					var Hour = parseInt(Math.floor(ms / 60 ));
					var Fen = parseInt(Math.floor(ms % 60 ));	
				//	value = Hour + "小时"  + Fen+"分钟"
					if(Hour){
						value += Hour + "小时" 
					}
						
					if(Fen){
						value += Fen+"分钟"
					}
				}else{
					value="0分钟"
				}
			
				return value;
			},
			toHome() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			getPie(data){
				
				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('pieEcharts'));
					// this.myChart.on("dataZoom", (res) => {
					// 	showkey = "";
					// 	this.headitemby = "";
					// });
				}
				var timeList=[]
				var seriesList1=[]
				var seriesList2=[]
				var seriesList3=[]
				//var sz2 = ['soc', 'power', 'ampere', 'voltage','temperature'];
				console.log(data)
				var dataInterval=[0,10,20,30,40,50,60,70,80,90,100]
				for(var i in data){
					var item=data[i]
					timeList.push(this.geth(item.recordTime));
					seriesList1.push(item.soc?item.soc:'')
					seriesList2.push(item.power?(item.power/1000).toFixed(1):'')
					//seriesList3.push(item.temperature?item.temperature:0)
					seriesList3.push(item.temperature?item.temperature:'')
				}
				
				var spaceNum=5
				let maxA = Math.max(...seriesList2); // 最大值A
				 let maxint = Math.ceil(maxA / spaceNum); //最大平均值（向上取整）= 最大值A / 间隔数
				 let maxB = maxint * spaceNum; // 最大值B = 最大平均值 * 间隔数  （注：最大值B>最大值A）
				  var max= Math.max(maxB, 10); // 为了防止maxB数据为0时，Y轴不显示，给个默认最大值10
				var interval=max/spaceNum;
				 

				
				const colors = ['#ea9832', '#429fc8', '#b13331'];
				 
				var option = {
				  color: colors,
				  tooltip: {
					formatter: (value) => {
						console.log(value)
						var name = value[0].axisValue;
						var style = "float: right;margin-left: 3px;"
						var text1 = ""
						var ulist=['%','kW','℃','','','']
						for (var i in value) {
							var u = ulist[i];
							if(value[i].data==''){
								continue
							}
							text1 += "<p>" + value[i].marker + value[i].seriesName + '<span style="' + style +
								'">' + value[i].data + u + '</span></p>';
						}
						return `<p>${name}</p>` + text1
					},
					 trigger: 'axis',
				  },
				  grid: {
					
				   
				    left: '8%',
				    right: '10%',
				    bottom: '10%',
				  //  containLabel: true
				  },
				 
				  legend: {
				    data: ['SOC', '功率', '温度']
				  },
				  xAxis: [
				    {
				      type: 'category',
				      axisTick: {
				        alignWithLabel: true
				      },
				
					  splitNumber: 2,
				      // prettier-ignore
				      data:timeList
				    }
				  ],
				  yAxis: [
				    {
				      type: 'value',
					
				      name: '℃/SOC',
							//data: [0,10,20,30,40,50,60,70,80,90,100],
						max:100,
						min:0,
						minInterval:10,
				      position: 'right',
				      alignTicks: true,
				      axisLine: {
				        show: true,
				        lineStyle: {
				          color: colors[0]
				        }
				      },
				      axisLabel: {
						  
						   formatter: '{value}'
				        
				      }
				    },
				    {
						
				      type: 'value',
				      name: 'kW',
				      position: 'left',
				      alignTicks: true,
						interval:interval,
						max:max,
						min:0,
				      axisLine: {
				        show: true,
				        lineStyle: {
				          color: colors[1]
				        }
				      },
				      axisLabel: {
				        formatter: '{value}'
				      }
				    }
					
				  ],
				  series: [
				    {
				      name: 'SOC',
				      type: 'line',
					  symbolSize:3,
				      data: seriesList1
				    },
				    {
				      name: '功率',
				      type: 'line',
					   symbolSize:3,
				      yAxisIndex: 1,
				      data: seriesList2
				    },
				    {
				      name: '温度',
				      type: 'line',
					   symbolSize:3,
				      yAxisIndex: 0,
				      data: seriesList3
				    }
				  ]
				};
				console.log(option)
				
				this.myChart.setOption(option);
				
			},
			getchargingDetail() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				API.chargingDetail(this.id).then((res) => {
					uni.hideLoading();
					
					this.chargeDetail = res.data.chargingRecord;
					this.userCouponObj = res.data.userCoupon;
					this.electricRecordList=res.data.electricRecordList
					
					if(res.data.electricRecordList&&res.data.electricRecordList.length){
						
						this.getPie(res.data.electricRecordList);
						
					}else{
						this.electricRecordListBl=false
					}
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.time-head{
		background: linear-gradient(
		180deg, rgba(0,185,98,1) 0%,rgba(246,248,248,1) 240px);
		padding-bottom: 20px;
	}
	.details-time{
		background: linear-gradient(180deg, #b7ebcf 0%,rgba(255,255,255,1) 33%);
		.time{
			display: flex;
			justify-content: space-between;
			  border-bottom: 1px solid  #E8E8E8;
			  padding-bottom: 20rpx;
			  .time1{
				  .time11{
					  font-size: 28rpx;
					 margin-bottom: 4rpx;
				  }
				  .time12{
				  		  font-size: 48rpx;
						  color: #101010;
						  font-weight: bold;
						  text-align: center;
				  }
			  }
			.time2{
				color: #B8B8B8;
				align-items: center;
				display: flex;
				justify-content: space-between;
				.time21{
					 border: 1px solid #B8B8B8;
					     border-radius: 100rpx;
					line-height: 46rpx;
					height: 48rpx;
					    width: 48rpx;
					    text-align: center;
				}
				.time22{
					width:200rpx;
					border-top: 1px solid #CFCFCF ;
					
				}
			}
		}
	}
	
	.oldTextClassF{
		.oldTextjp18px{
			font-size: 36rpx !important;
		}
		.oldTextjp20px{
			font-size: 40rpx !important;
		}
	}
	
	.detailsBtn{
		margin: 16px;
		.detailsBtn-btn{
			border-color:#00B962!important;
			border-radius: 8px!important;
			background: none!important;
			color:#00B962!important;
		}
	}
	.details-title{
		margin-bottom: 16px;
		h4{
			font-weight: bold;
			font-size: 16px;
			position: relative;
			padding-left:10px;
			&::after{
				content: '';
				position: absolute;
				height: 12px;
				width: 4px;
				background-color: #27B148;
				left: 0;
				top:5px;
			}
		}
	}
	.details-row{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
		
		p{
			color:#333;
			width: 180rpx;
			min-width: 80px;
		}
		span{
			color:#101010;
			font-weight: bold;
		}
	}
	.details,.details-time{
		margin: 32rpx;
		padding: 40rpx;
		background-color: #fff;
		border-radius: 8px;
	box-shadow: 0px 2px 6px 0px #00b96226;
	border: 1px solid rgba(255, 255, 255, 1);
	.details-head{
			display: flex;
			align-items: center;
			justify-content: center;
			h4{
				font-size: 18px;
				font-weight: normal;
				margin-left: 4px;
			}
		}
		.details-price{
			margin-top: 28px;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			h3{
				font-size: 36px;
				color:#FF6200;
				line-height: 36px;
				margin: 0  4px;
				font-weight: normal;
			}
			span{
				font-size: 20px;
				color:#FF6200;
			}
		}
		.details-main{
			text-align: center;
			margin-bottom: 20px;
			p{
				color:#777;
				margin-top: 4px;
			}
		}
	}
</style>