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>
		<view class="slogan-4 " v-for="(item,i) in bannerListYXJ" :key="i" v-if="i==0">
			<u-icon name="close-circle-fill" color="#989898" @click="bannerListYXJ=[]"></u-icon>
			<img :src="item.picUrl" @click="gotoUrl2(item.linkUrl)" >
		
		</view>
		<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="time13" v-if="chargeDetail.deviceType==1&&chargeDetail.endSoc">
					启动: {{chargeDetail.startSoc}}%
					</view>
					<view class="time12">{{geth1(chargeDetail.startTime?chargeDetail.startTime:chargeDetail.createTime)}}
					</view>
					<view class="time11">
						{{getday(chargeDetail.startTime?chargeDetail.startTime:chargeDetail.createTime)}}</view>
					
				</view>

				<view class="time2">
					 <view class="time21">
						 {{ getPercent(chargeDetail)}}
					 </view> 
					<view class="time22"></view>
					<view class="time21" style="color: #fff;">-</view>
				</view>
				<view class="time1" style="    text-align: end;">
					<view class="time13"  v-if="chargeDetail.deviceType==1&&chargeDetail.endSoc">
					停止: {{chargeDetail.endSoc}}%
					</view>
					<view class="time12">{{geth1(chargeDetail.endTime)}}</view>
					<view class="time11">{{getday(chargeDetail.endTime)}}</view>
				</view>
			</view>
			
		</view>
		<view class="details showCoupon" v-if="userParkingCoupon" @click="gotoUrl('pages/record/coupon?id='+id)"  >
			<view class="showCoupon1 ">
				<view  class="showCoupon11">
					<span class="showCoupon111" >免费停车优惠卷</span>
				</view>
				<view  class="showCoupon12 padding1"   >{{ minuteConversion(userParkingCoupon.freeMinute,true)}}</view>
				
				
				<view  class="showCoupon13 padding1">充电时间 {{ getPercent(chargeDetail)}}</view>
			</view>
			<view class="showCoupon2 padding2">
				<u-icon name="coupon-fill" size="48" color="#FF3D00"></u-icon>
				<view  class="showCoupon22">
					出示
				</view>
			</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.realityServiceDiscountRatio&&chargeDetail.realityServiceDiscountRatio!=100">
					<p>服务费折扣</p><span style="color:#ef7041">{{discountRatio10(chargeDetail.realityServiceDiscountRatio)}}折</span>
				</view>
				<view class="details-row" 
					v-else-if="!(chargeDetail.quickChargeReduce)&&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?(userCouponObj.useText=='服务费0折'?'免服务费':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" v-if="chargeDetail.dueServiceMoney&&chargeDetail.totalServiceMoney&&chargeDetail.dueServiceMoney!=chargeDetail.totalServiceMoney">
					<p>优惠金额</p><span style="color:#ef7041">{{(chargeDetail.dueServiceMoney-chargeDetail.totalServiceMoney).toFixed(2)}}元</span>
					
				</view>
				<p style="color: rgba(119, 119, 119, 1);font-size: 24rpx;    text-align: end;"
				 v-if="chargeDetail.quickChargeReduce">快充订单满{{chargeDetail.quickChargeDegree}}度服务费{{discountRatio10(chargeDetail.serviceDiscountRatio)}}折</p>
				
				<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 class="details-row">
					<p>支付方式</p>
					<span   ><b>{{chargeDetail.payTypeText}}</b></span>
				</view>
				<view class="details-row" v-if="chargeDetail.payType==1">
					<p>预付款</p>
					<span   ><b>{{chargeDetail.estimateFee != null ? chargeDetail. estimateFee.toFixed(2) : '0.00'}}元</b></span>
				</view>
				<view class="details-row" v-if="chargeDetail.payType==1">
					<p>预付款自动退款</p>
					<span   ><b>{{chargeDetail.estimateFee != null ? (chargeDetail.estimateFee -chargeDetail. actualFee).toFixed(2) : '0.00'}}元</b></span>
				</view>
				
				<view class="details-row" v-if="chargeDetail.payType==2||chargeDetail.payType==3">
					<p>余额</p>
					<span   ><b>{{chargeDetail. balance != null ? chargeDetail. balance.toFixed(2) : '0.00'}}元</b></span>
				</view>
				
				
				
		
			</view>
		</view>
		
		<!-- 优惠券2 -->
		<view v-if="0&&chargeDetail.carNumber"  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">
					<view>1.优惠券时长为：充电时间+30分钟
						<view style="margin-top: 8rpx;">2.充电时填写车牌号生效</view>
					</view>
					
					
				</view>
			</view>
		</view>
		
		
		<view class="piccBanner"
		v-for="(itemJNT,index ) in bannerListJNT" v-show="index==0"
		@click="gotoUrl2(itemJNT.linkUrl)" :key="index" 
		  style="
			text-align: center;
			padding: 0px 16px;">
							
			<image :src="itemJNT.picUrl" style="height: 204rpx;width: 100%;border-radius: 10px;" ></image>
		</view>
		<!-- 常见问题 -->
		<view    class="details common-problem "  style="padding: 20rpx;">
			
			<view class="details-title" style="    margin-bottom: 0px;">
				<h4 class="oldTextjp20px"   >常见问题
					<!-- <span style="float: right;">@click="remarkBl=!remarkBl"
						<u-icon name="arrow-up" v-show="remarkBl"  ></u-icon>
						<u-icon name="arrow-down" v-show="!remarkBl"  ></u-icon>
					</span> -->
				</h4>
			</view>
			<view class="tabs">
				<u-tabs active-color="#333333" inactive-color="#999999" :list="tabList" :is-scroll="false"
					:current="current" @change="change"></u-tabs>
			</view>
			<view class="collapse" v-for="(itemList,i) in newsList" :key="i" v-show="current==i">
				<!-- -->
		
				<u-collapse v-if="itemList.length">
					<u-collapse-item v-for="(item, index) in itemList" :title="(index+1)+'.'+item.title"
						:key="index">
						<!-- 					<textarea maxlength="-1" :auto-height="true" v-model="item.content" readonly ></textarea>
			 -->
						<view v-html="item.content"></view>
					</u-collapse-item>
				</u-collapse>
		
			</view>
		</view>
		
		
		<view class="details" :style="(!electricRecordListBl?'margin-bottom: 60px;':'')+(!remarkBl?'padding: 32rpx 32rpx 0 32rpx;':'')">
			<view class="details-title">
				<h4 class="oldTextjp20px"  @click="remarkBl=!remarkBl" >充电信息
					<span style="float: right;">
						<u-icon name="arrow-up" v-show="remarkBl"  ></u-icon>
						<u-icon name="arrow-down" v-show="!remarkBl"  ></u-icon>
					</span>
				</h4>
			</view>
			<view class="oldTextjp18px" v-show="remarkBl">
				<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  v-show="remarkBl" 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 class="chargeDetailsClass" v-show="remarkBl" style=" border-top: dashed  1px #777;    margin-top: 10px;" v-if="chargeDetails.length">
				<view v-for="(item,i) in chargeDetails" :key="i"  >
					<view class="details-row" style=" margin-top: 18px;" >
						<p>区间充电量({{item.startTime}}-{{item.endTime}})</p>
						<span v-if="item.fixKwh&&item.kwh" >{{(item.kwh+item.fixKwh).toFixed(2) }}度</span>
						<span v-else >{{item.kwh }}度</span>
					</view>
					
					<view class="details-row" style="display: block;" >
						<p>
							<span style="    color: #37393c;">区间定价</span>
							<span style="float: right; color: #333;font-weight: normal;" v-if="item.discountServicePrice||item.discountServicePrice==0" >{{((item.electricityPrice*100+item.discountServicePrice*100)/100).toFixed(2)}}元/度 <span style="text-decoration:line-through;margin-left: 3px;">{{((item.electricityPrice*100+item.servicePrice*100)/100).toFixed(2)}}元/度</span></span>
							
							<span style="float: right; color: #333;font-weight: normal;" v-else >{{((item.electricityPrice*100+item.servicePrice*100)/100).toFixed(2)}}元/度</span>
							
						</p>
						
						<view  class="details-row-grey">
								<view class="details-row-grey-row">
									<span>电费</span>
									<span class="details-row-grey-span" >{{item.electricityPrice.toFixed(2)}}元/度</span>
								</view>
								<template  v-if="item.discountServicePrice||item.discountServicePrice==0" >
									<view class="details-row-grey-row">
										<span>充电服务费</span>
										<span class="details-row-grey-span" >{{item.discountServicePrice.toFixed(2)}}元/度</span>
									</view>
									<view class="details-row-grey-row">
										<span>折前服务费</span>
										<span class="details-row-grey-span details-row-grey-span2" >{{item.servicePrice.toFixed(2)}}元/度</span>
									</view>
								</template>
								<template  v-else >
									<view class="details-row-grey-row">
										<span>充电服务费</span>
										<span class="details-row-grey-span" >{{item.servicePrice.toFixed(2)}}元/度</span>
									</view>
									
								</template>
								
						</view>
						
						<!-- <span class="details-row-sum" style="float:none" v-if="item.discountServicePrice||item.discountServicePrice==0"  >电费{{item.electricityPrice.toFixed(2)}}元/度|服务费{{item.discountServicePrice.toFixed(2)}}元/度(折前{{item.servicePrice.toFixed(2)}}元/度) </span>
						
							<span class="details-row-sum"  v-else >{{item.electricityPrice.toFixed(2)}}元/度(电费)+{{item.servicePrice.toFixed(2)}}元/度(服务费) </span>
							 -->
					</view>
				</view>
				
			</view>	
		</view>
		
		<view class="details" style="padding: 20rpx;margin-bottom: 60px;"  v-show="electricRecordListBl">
			<view id="pieEcharts" style="min-height:180px;">
		
			</view>
			<view style="color:#9e9e9e;margin-top: 4px;">注：充电时间每5分钟获取一次数据</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>
		
		
		<u-modal v-model="showTop" v-if="getBannerInfoTopBl" class="showOss" :show-title="false"
			:show-confirm-button="false">
			<view class="slot-content">
				<swiper class="swiper" circular :indicator-dots="bannerListTop.length!=1" :autoplay="true" :interval="2500"
					:duration="500">
		
					
		
					<swiper-item class="swiperitem" v-for="(item,i) in bannerListTop" :key="i">
		
		
		
						<u-image width="500" height="500" bgColor="#ff000000"
							style="margin: auto;min-height: 250px;" mode="widthFix" @click="clickBannerTopI(i)"
							:src="item.picUrl">
							<view slot="loading" style="height: 200px;">
								<u-loading mode="flower" size="186">
		
								</u-loading>
		
							</view>
		
						</u-image>
		
					</swiper-item>
				</swiper>
		
		
				<u-image width="36px" style="margin: auto; margin-top: 10px;" mode="widthFix" @click="showTop=false"
					src="../../assets/img/if-close-line-circled.png"></u-image>
		
			</view>
		</u-modal>
	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	import * as echarts from "echarts";
	import * as newsApi from '@/apis/news.js'
	import {
		newDate,
		currentTimeStamp,
		parseUnixTime,
		secondsDistance,minuteConversion
		
	} from '@/utils'
	
	export default {
		data() {
			return {
				id: '',
				useFreeCoupon:false,
				useFreeMinute: 0,
				remarkBl:false,
				myChart: null,
				electricRecordList: [],
				chargeDetail: {},
				chargeDetails:[],
				bannerListJNT:[],
				bannerListYXJ:[],
				userParkingCoupon:null,
				userCouponObj: {},
				electricRecordListBl: true,
				elderStatus: false,
				consumerPhone: "",
				openModalBl: false,
				customStyle:{
					color: '#00B962'
				},
				payList: [{},
				{
					name: "先付后退",
					tips: "游客不享受平台优惠活动",
					value: "1",
					select: false,
				}, {
					name: "个人账户支付",
					tips: "可使用折扣卡、优惠券、折扣卷等",
					value: "2",
					select: false,
				}, {
					name: "单位账户支付",
					tips: "账户余额：99999元",
					value: "3",
					select: false,
				}, {
					name: "充电金",
					tips: "账户余额：99999元",
					value: "4",
					select: false,
				}, {
					name: "充电金",
					tips: "账户余额：99999元",
					value: "4",
					select: false,
				}],
				getBannerInfoTopBl: true,
				showTop: false,
				showTopImg: '',
				showTopIndex: 0,
				bannerListTop: [],
				
				tabList: [
					{
						name: '软件使用',
						type: 'CJWT-RJSY'
					},{
						name: '故障',
						type: 'CJWT-GZ'
					},
					
					{
						name: '活动优惠',
						type: 'CJWT-YHHD'
					},
				],
				current: 0,
				newsList: [
					[],
					[],
					[]
				],
				newsType: 'CJWT-RJSY',
			}
		},
		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 = "400-8899-619"
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (consumerPhone) {
				this.consumerPhone = consumerPhone
			}
			this.getBannerInfo("JNT-list-end","bannerListJNT");
			this.getBannerInfo("YXJ-list-end","bannerListYXJ");
			this.getBannerInfoTop("record-end-top");
			this.getNewsList()
			
		},
		methods: {
			change(index) {
				this.current = index;
				this.newsType = this.tabList[index].type;
				if (this.newsList[this.current].length == 0) {
					this.getNewsList(true)
				}
			
			},
			getNewsList(bl) {
			
				if(bl){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}
			
				newsApi.newsInfoContentList({
					pageIndex: 1,
					pageSize: 100,
					shortName: this.newsType
				}).then((res) => {
					
					var newsList = res.data.data;
					this.newsList[this.current] = newsList.reverse()
					
					if(bl){
						uni.hideLoading();
						this.$forceUpdate()
					}
					//this.recordsTotal = res.data.recordsTotal		
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			minuteConversion(a,b){
				return minuteConversion(a,b)
			},
			getBannerInfoTop(code) {
				// var nowtime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')
				// var time = this.carhelp.get("bannerListTop");
				// if ((time && nowtime == time)) {
				// 	this.getBannerInfoTopBl = false;
				// }
				// uni.showLoading({
				// 	title: "加载中",
				// 	mask: true,
				// })
			
				newsApi.getBannerInfo(code).then((res) => {
			
			
					this.bannerListTop = res.data;
			
			
					if (this.bannerListTop.length) {
						this.showTop = true;
						this.showTopImg = this.bannerListTop[0].picUrl;
						this.showTopIndex = 0;
			
					}
					
					//uni.hideLoading()
					//document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 120px;"
				}).catch(error => {
					uni.showToast({
			
						title: error,
						icon: "none"
					})
				})
			},
			clickBannerTopI(i) {
				var mod = this.bannerListTop[i];
				//this.showTop = false;
				this.clickBanner(0, true, mod)
			},
			clickBanner(index, bl, modout) {
				var uurl = "";
				var mod = {}
				if (modout) {
					mod = modout;
				}else{
					mod =this.bannerList[index]
				}
				mod.clickUrl = mod.linkUrl
			
				if (mod.linkPicUrl && !bl) {
			
					this.showOss = true;
					this.showOssImg = mod.linkPicUrl;
					this.showOssIndex = index;
			
				} else if (mod.clickUrl == null) {
			
				} else if (mod.clickUrl.indexOf('http') == 0) {
			
					window.location = mod.clickUrl + uurl;
				} else if (mod.clickUrl.slice(-5) == 'login' && this.userId) {
			
				} else if (mod.clickUrl.indexOf('#/') == 0) {
					if (mod.clickUrl.indexOf("?") == -1) {
						mod.clickUrl += '?';
					}
					var url = mod.clickUrl.split("#")[1]
					//window.location = mod.clickUrl;
					uni.navigateTo({
						url: url + uurl
					})
				} else if (mod.clickUrl == '#' || mod.clickUrl == '') {
			
				} else {
					uni.navigateTo({
						url: mod.clickUrl + uurl
					})
				}
			},
			getBannerInfo(code,list) {
				
				newsApi.getBannerInfo(code).then((res) => {
					if(list){
						this[list] = res.data;
					}else{
						this.bannerList = res.data;
					}
					
					
					//uni.hideLoading()
					//document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 120px;"
				}).catch(error => {
					uni.showToast({
			
						title: error,
						icon: "none"
					})
				})
			},
			confirmPhoneBl() {
				this.openModalBl = false;
				uni.makePhoneCall({
					phoneNumber: this.consumerPhone //仅为示例
				});

			},
			getday(time) {
				if(time){
					return time.substring(0, 10);
				}else {
					return ''
				}
					
				
			},
			geth1(time) {
				if (time) {
			
					return time.substring(11)
				} else
					return ''
			},
			geth(time) {
				if (time) {

					return time.substring(11, 16)
				} else
					return ''
			},
			getPercent(chargingRecord,time,str) {
				if (!chargingRecord.startTime) {
					return '00:00:00'
				}
				var Hour = 0;
				var Fen = 0;
				var S = 0;
				
 					var now = newDate(chargingRecord.startTime).getTime();
					var date = newDate(chargingRecord.endTime).getTime();
					if(time){
						date=date+time*1000*60
					}
					var seconds = parseInt(( date-now ) / 1000);
					
					var ms = seconds;
							
					Hour = parseInt(Math.floor(ms / (60 * 60)));
					Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
					S = parseInt(Math.floor(ms % (60)));
							
				if(str){
					var obj = "";
					if(Hour){
						obj+=Hour+"小时"
					}
					if(Fen){
						obj+=Fen+"分"
					}
					if(S){
						obj+=S+"秒"
					}
								
					return obj;
				}else{
					var obj = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen + ":" + (S > 9 ? "" : "0") + S
								
								
					return obj;
				}
				
			},
			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: {

						top:'24%',
						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;
					if(this.chargeDetail.chargeDetails){
							this.chargeDetails=JSON.parse(this.chargeDetail.chargeDetails)
					}
					// this.useFreeCoupon=res.data.useFreeCoupon;
					// this.useFreeMinute=res.data.useFreeMinute;
					
					this.userParkingCoupon=res.data.userParkingCoupon
					
					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>
	
	.details-row-grey{
		background-color: rgba(245, 245, 245, 1);
		border-radius: 8px;

		padding: 20rpx 36rpx;
		margin-top:16rpx ;
		.details-row-grey-row{
			margin-top:4rpx ;
			.details-row-grey-span{
				float: right;
			}
			.details-row-grey-span2{
				text-decoration: line-through;
			}
			
		}
	}
	.slogan-4 {
		margin-top: 10px;
		display: flex;
		
		/* text-decoration: underline; */
			z-index: 999;
	
		text-align: center;
		position: fixed;
		/* top: 40px; */
		bottom: 180px;
		right: 20px;
	
		line-height: 20px;
		font-size: 16px;
		//background: linear-gradient(95deg, #FF9800, #FF5722);
		//box-shadow: 0 4rpx 24rpx 0 #FF5722;
		//padding-top: 8px;
		color: #fff;
		border-radius: 25px;
		
		    flex-direction: column;
		    align-items: flex-end;
			
		img{
			//height: 160rpx;
			width: 144rpx;
		}
	
	}
	.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;
			    white-space: pre;

			.time1 {
				.time13 {
					font-size: 28rpx;
					font-weight: bold;
					
				}
				.time11 {
					font-size: 24rpx;
				
				}

				.time12 {
					font-size: 36rpx;
					
					color: rgba(0, 185, 98, 1);
					    margin: 4rpx 0;
					font-weight: bold;
					text-align: center;
				}
			}

			.time2 {
				color: #B8B8B8;
				width: 90%;
				// align-items: center;
				// display: flex;
				// justify-content: space-between;
				display: flex;
				    flex-direction: column;
				    justify-content: center;
					align-items: center;
				.time21 {
					//border: 1px solid #B8B8B8;
					//border-radius: 100rpx;
					// line-height: 46rpx;
					// height: 48rpx;
					// width: 48rpx;
					color: rgba(51, 51, 51, 1);
					font-size: 28rpx;
					text-align: center;
				}

				.time22 {
					width: 80%;
					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;
		}
		
	
	}
	.chargeDetailsClass{
		span {
			    color: rgb(51, 51, 51);
			    font-weight: normal;
		}
		.details-row-sum{
			float: right;
			color: #888;
			font-size: 24rpx;
		
		}
	}
	.details,
	.details-time {
		margin: 32rpx;
		padding: 32rpx;
		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{
		    display: flex;
		    text-align: center;
			position: fixed;
			bottom: 0px;
			    width: 100%;
				    background: #fff;
				    padding: 10px 0;
		.detailsBtn-btn{
				//	margin:0 32rpx;
		}
	}
	
	.showCoupon{
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		padding: 0 ;
		.padding1{
			padding-left: 32rpx;
		}
		.padding2{
			padding-right: 32rpx;
		}
		.showCoupon1{
			.showCoupon111{
				padding: 2rpx 24rpx;
				border-radius: 8px 0px 8px 0px;
				background-color: rgba(255, 61, 0, 1);
				color: rgba(255, 255, 255, 1);
			}
			.showCoupon13{
				padding-bottom: 32rpx;
				font-weight: bold;
			}
			.showCoupon12{
				color: red;
				font-size: 48rpx;
				font-weight: bold;
				margin: 16rpx 0 4rpx 0;
			}
		}
		.showCoupon2{
			border-left: 1px solid #CFCFCF;
			padding-left: 32rpx;
			    display: flex;
			    flex-direction: column;
			    align-items: center;
		}
	}
	.showOss {
	
		/deep/.u-model,
		/deep/.u-mode-center-box {
			background-color: transparent;
		}
	}
	.swiper {
		height: 700rpx;
	
		.swiperitem {
			height: 700rpx;
		}
	}
	
	.common-problem {
		//margin: -125px 32rpx 0;
		//box-shadow: 0px 2px 8px 0px #1A095A34;
	
		border-radius: 8px;
		background-color: #fff;
		//padding: 20rpx 24rpx 48rpx 24rpx;
		//margin: 32rpx 40rpx 40rpx 40rpx;
	
		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid rgba(246, 246, 246, 1);
			padding-left: 32rpx;
		}
	
		.tabs {
			width: 400rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid rgba(246, 246, 246, 1);
	
			/deep/.u-tab-bar {
				background-color: #00B962 !important;
			}
		}
	
		.collapse {
			padding: 0 32rpx;
		}
	}
</style>