NebulaFlashCharge_MP-WEIXIN/Order/pages/charging/index.vue

<template>
	<view style="width: 100vw;height: 100vh;overflow: hidden;">
		<view v-if="pageData" class="charging_body">
			<view class="charging_container">
				<view @click="reload" class="reload">
					<uni-icons type="reload" size="25" color="#bbbbbb"></uni-icons>
					</view>
				<view style="margin-top: 0;" class="charging_title flex">
					<text style="color: #bbbbbb;">订单编号：</text>
					<text class="oneflex flex  jw">
						<text> {{pageData.id}} </text>
					</text>
				</view>
				<view class="charging_title flex">
					<text style="color: #bbbbbb;">电桩编号：</text>
					<text class="oneflex flex  jw">
						<text> {{pageData.connectorId}} </text>
					</text>
				</view>
				<view class="charging_dashboard">
					<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
				</view>
				<view class="charging_information flex">
					<view class="oneflex flex jc ac column charging_information_item">
						<view class="charging_information_item_label">预支付总金额</view>
						<view class="charging_information_item_value">{{ tool.getnum(pageData.payMoneyPre,3) }}元</view>
					</view>
					<view class="segmentation"></view>
					<view class="oneflex flex jc  ac column charging_information_item">
						<view class="charging_information_item_label">预支付可用金额</view>
						<view class="charging_information_item_value">{{tool.getnum(pageData.payMoneyPreAvailable,3)}}元</view>
					</view>
					<view class="segmentation"></view>
					<view class="oneflex flex jc ac column  charging_information_item">
						<view class="charging_information_item_label">预支付阀值</view>
						<view class="charging_information_item_value">{{ tool.getnum(pageData.payMoneyPreFreeze,3) }}元</view>
					</view>
				</view>
				<view class="charging_cars flex jw">
					<view class="charging_cars_item">
						<view class="charging_cars_item_top">
							累计充电时长
							<image src="../../../static/sj.png"></image>
						</view>
						<view class="charging_cars_item_footer">{{ calcTime(pageData.endTime,pageData.startTime)}}</view>
					</view>
					<view class="charging_cars_item">
						<view class="charging_cars_item_top">
							累计充电量
							<image src="../../../static/je1.png"></image>
						</view>
						<view class="charging_cars_item_footer">{{ tool.getnum(pageData.totalPower) }}度</view>
					</view>
				</view>
				<view class="charging_footer">
					<view style="width: 100%;text-align: center; color: #00000073;font-size: 24rpx;margin-bottom: 20rpx;">
						采样更新时间：{{pageData.endTime}}
					</view>
					<view @click="stop" class="charging_footer_button flex ac jc">
						{{pageData.orderStatus==2? '结束充电' : '结束中'}}
					</view>
				</view>
			</view>
		</view>
		<skeleton v-else></skeleton>
	</view>
</template>
<script>
	import skeleton from './skeleton.vue'
	import order from '@/api/order.js'
	import qiunDataCharts from "../../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
	import chargingAnimation from "../../components/chargingAnimation/chargingAnimation.vue"
	export default {
		components: {
			qiunDataCharts,
			chargingAnimation,
			skeleton
		},
		data() {
			return {
				timer:null,
				time:'',
				pageData:null,
				chartData: {
					series: [{
						name: "充电状态",
						color: "rgba(92, 130, 250, 1)",
						data: 0
						
					}]
				},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					padding: undefined,
					title: {
						name: "0%",
						fontSize: 35,
						color: "#476FFA"
					},
					subtitle: {
						name: "充电中",
						fontSize: 15,
						color: "#476FFA"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 20,
							backgroundColor: "#E9E9E9",
							customColor: ['#1890FF'],
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				}
			};
		},
		onUnload() { 
			uni.$emit('orderUpdate');
			// 
			 let routes = getCurrentPages(); 
			 if(routes[routes.length-2]['route']=='ChargingStation/pages/placeOrder/result/index'){
				 uni.reLaunch({
				 	url: '/pages/index/index'
				 })
			 }
			 // 
			 clearInterval(this.timer)
			 
		}, 
		onReady() {},
		onLoad(e) {
			if(e.id){ 
				this.getDetails(e.id); 
				this.timer = setInterval(()=>{
					this.reload()
				},30000)
			}
		},
		methods: {
			reload(){
				this.getDetails(this.pageData.id)
			},
			calcTime(formerly,now){
				var startTime = new Date(now); // 开始时间
				var endTime = new Date(formerly); // 结束时间 	
				var diff = endTime.getTime() - startTime.getTime(); // 获取差值时间（以毫秒为单位） 
				var seconds = Math.floor(diff / 1000); // 换算出相差的秒数
				var minutes = Math.floor(seconds / 60); // 换算出相差的分钟数
				var hours = Math.floor(minutes / 60); // 换算出相差的小时数
				var days = Math.floor(hours / 24); // 换算出相差的天数
				return  hours % 24 + " 小时 " + minutes % 60 + " 分钟 " 
				
			},
			getDetails(id){
				order.xchargeOrderInfo(id).then(res=>{
					this.pageData = res.data; 
					this.chartData.series[0]['data'] = res.data.soc? Number(res.data.soc) / 100 : 0;
					this.opts.title.name  = res.data.soc?  `${Number(res.data.soc)}%` : '0%';
					this.opts.subtitle.name  = res.data.orderStatus==2?  `充电中` : '正在停止'; 
				})
			},
			stop(){
				if(this.pageData.orderStatus!==2) return ;
				order.stopOrder({id:this.pageData.id}).then(res=>{
					if(res.code==20000){
						uni.navigateBack()
					}
				})
			}
		}
	};
</script>
<style scoped lang="scss">
	@import 'index.scss';
</style>