JP-ChargeTeam51/pages/record/details.vue

<template>
	<view class="time-head">
		<ujp-navbar title="充电详情">
			<view slot="right" style="margin-right: 10px;" @click="openModalBl=true">

				<view class="iconfont qr-code">
					&#xe60d;
				</view>
			</view>
		</ujp-navbar>
		<u-modal v-model="openModalBl" @confirm="confirmPhoneBl" confirm-text="拨打电话" confirm-color="#606266"
			:show-cancel-button="true" ref="uModal" :asyncClose="true" title="客服电话" :content="consumerPhone"
			:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>

		<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.dueFee != null ? chargeDetail.dueFee.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 style="color:#ef7041">{{discountRatio10(chargeDetail.serviceDiscountRatio)}}折</span>
				</view>


				<view class="details-row">
					<p>优惠券抵扣</p><span style="color:#ef7041">{{userCouponObj? userCouponObj.useText : '未使用'}}</span>
				</view>
				

				<view class="details-row" v-if="chargeDetail.userCardId">
					<p>会员活动</p><span style="color:#ef7041">充电月卡</span>
				</view>
				
				<view class="details-row" v-if="chargeDetail.discountAmount">
					<p>实际减免</p><span style="color:#ef7041">-{{chargeDetail.discountAmount.toFixed(2)}}元</span>
				</view>
				<view class="details-row">
					<p>实付款</p>
					<span style="color:#ef7041;font-size: 20px;" ><b>{{chargeDetail.actualFee != null ? chargeDetail.actualFee.toFixed(2) : '0.00'}}元</b></span>
				</view>

				<view style=" border-top: dashed  1px #777;    margin-top: 10px;">
					<view class="details-row"><p>开始时间</p><span style="color:#777777">{{chargeDetail.startTime}}</span></view>
					<view class="details-row"><p>结束时间</p><span  style="color:#777777">{{chargeDetail.endTime}}</span></view>
					
				</view>		
				
		
			</view>
		</view>
		<view class="details" style="margin-bottom: 60px;">
			<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="buttonClass" >
			<u-button  size="medium" class="detailsBtn-btn  " :customStyle="customStyle" type="info" shape="circle"
				@click="openModalBl=true">
				<view class="iconfont ">
					&#xe60d;
				</view>
				联系客服</u-button>
			<u-button class="detailsBtn-btn " size="medium"  type="success" shape="circle"
				@click="gotoUrl('pages/user/message')">填写反馈意见</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,
				consumerPhone: "",
				openModalBl: false,
				customStyle:{
					color: '#00B962'
				}
			}
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id;
				this.getchargingDetail();
			}

			if (this.carhelp.get("getElderModeClass") == "长辈模式") {
				this.elderStatus = true;
			} else {
				this.elderStatus = false;
			}

			var consumerPhone = this.carhelp.getConfig().consumerPhone
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (consumerPhone) {
				this.consumerPhone = consumerPhone
			}
		},
		methods: {
			confirmPhoneBl() {
				this.openModalBl = false;
				uni.makePhoneCall({
					phoneNumber: this.consumerPhone //仅为示例
				});

			},
			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;
			}
		}
	}

	.qr-code {
		font-size: 24px;
		color: #666666;
		// position: absolute;
		right: 16px;
	}
	.buttonClass{
		    text-align: center;
			position: fixed;
			bottom: 0px;
			    width: 100%;
				    background: #fff;
				    padding: 10px 0;
		.detailsBtn-btn{
					margin:0 16px;
		}
	}
</style>