zk-driver-wechat-applet/pages/scan/index.vue

<template>
	<view>
		<view class="progress_box">
			<canvas class="progress_bg" canvas-id="cpbg"></canvas>
			<canvas class="progress_bar" canvas-id="cpbar"></canvas>
			<canvas class="progress_line" canvas-id="cpline"></canvas>
			<view class="progress_txt">
				<view class="progress_info">{{ $scan.swapConfirmDTO.vehSoc || '-' }}%</view>
				<view>当前电池SOC</view>
			</view>
		</view>
		<view class="battery-info">
			<view>
				<view>{{swapInfoDTO.mileage || '-'}}km</view>
				<view>累计里程</view>
			</view>
			<view>
				<view>{{ $scan.swapConfirmDTO.vehVol || '-' }}V</view>
				<view>电压</view>
			</view>
			<view>
				<view>{{ swapConfirmDTO.vehCur || '-' }}A</view>
				<view>电流</view>
			</view>
		</view>
		<view class="carinfo">
			<view class="battery-list">
				<view class="icon"><image src="../../static/p1.png"></image></view>
				<view class="info">
					<view class="word">车牌号</view>
					<view class="number">{{ swapConfirmDTO.plate || '-' }}</view>
				</view>
			</view>
			<view class="battery-list">
				<view class="icon"><image src="../../static/p2.png"></image></view>
				<view class="info">
					<view class="word">当前车辆电池SOC</view>
					<view class="number">{{ swapConfirmDTO.vehSoc || '-' }}%</view>
				</view>
			</view>
			<view class="battery-list">
				<view class="icon"><image src="../../static/p3.png"></image></view>
				<view class="info">
					<view class="word">换电电池SOC</view>
					<view class="number">{{ swapConfirmDTO.swapSoc || '-' }}%</view>
				</view>
			</view>
			<view class="battery-list">
				<view class="icon"><image src="../../static/p4.png"></image></view>
				<view class="info">
					<view class="word">预估换电费用</view>
					<view class="number">{{ swapConfirmDTO.expense || '-' }}元</view>
				</view>
			</view>
			<view class="battery-list">
				<view class="icon"><image src="../../static/p5.png"></image></view>
				<view class="info">
					<view class="word">服务费</view>
					<view class="number">{{ swapConfirmDTO.serviceCharge || '-' }}元</view>
				</view>
			</view>
		</view>
		<button type="primary" @click="goto('/pages/monitoring/index')" class="submit" :disabled="swapConfirmDTO.swapState">确认换电</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrcode:null,
				// swapConfirmDTO:this.$scan.swapConfirmDTO,
				// swapInfoDTO:this.$scan.SwapInfoDTO,
				process_txt:0,
			}
		},
		beforeCreate() {
			if(!uni.getStorageSync("token")){
				uni.reLaunch({
					url:'/pages/public/login?item=scan'
				})
			}
		},
		mounted() {
			this.drawProgressbg();
			this.drawCircle(this.process_txt); //参数为1-100
			this.drawLine();
			this.$scan.InitWs()
		},
		methods: {
			// InitWs(){
			// 	console.log(this.$scan)
			// 	this.$scan.InitWs()			
			// 	setTimeout(()=>{
			// 		this.swapConfirmDTO=this.$scan.swapConfirmDTO
			// 		this.swapInfoDTO=this.$scan.swapInfoDTO
			// 		this.process_txt=Math.ceil(this.swapConfirmDTO.vehSoc)
			// 	},1000)
			// },
			//判断websocket是否链接上
			// InitWs(){
			// 	if(this.$storage.get("stationCode")){
			// 		this.$http.getStationExchange({stationCode:this.$storage.get("stationCode")}).then(res=>{
			// 			if(res.code === 0 && res.data){
			// 				let msg = {
			// 					type: "subscribeExchange",
			// 					payLoad: {
			// 						exchangeNo: res.data
			// 					}
			// 				}
			// 				if(this.$ws.socketTask ==null){
			// 					this.$ws.connect()
			// 					this.$ws.onSocketOpen=()=>{
			// 						this.getWsData()
			// 						this.$ws.sendmessage(msg)
			// 					}
			// 				}	
			// 			}else{
			// 				this.$utils.msg(res.msg)
			// 			}
			// 		})		
			// 	}else{
			// 		this.$utils.msg('未获取到换电站编号')
			// 	}
			// },
			// // //获取websocket数据
			// getWsData(){
			// 	this.$ws.onSocketMsg=(res)=>{
			// 		let data=JSON.parse(res.data)
			// 		if(data.type === 'subscribe'){
			// 			console.log(data.state)
			// 		}else if(data.type === 'swapInfo' && data.state === 0){
			// 			this.swapConfirmDTO=data.swapConfirmDTO
			// 		}
			// 		else{
			// 			this.$utils.msg('订阅失败')
			// 		}
			// 	}
			// },
			goto(url){
				if(uni.getStorageSync("token")){
					if(this.$storage.get("exchangeNo")){
						let msg = {
							type: "startExchange",
							payLoad: {
								exchangeNo: this.$storage.get("exchangeNo")
							}
						}
						this.$ws.sendmessage(msg)
					}
					uni.navigateTo({
						url:url
					})
				}else{
					uni.reLaunch({
						url:'/pages/public/login?item=scan'
					})
				}
				
			},
			drawProgressbg(){
				// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
				var ctx = uni.createCanvasContext('cpbg', this);
				ctx.setLineWidth(14); // 设置圆环的宽度
				ctx.setStrokeStyle('#dadada'); // 设置圆环的颜色
				ctx.setLineCap('round'); // 设置圆环端点的形状
				ctx.setLineCap('square'); // 设置圆环端点的形状
				ctx.beginPath(); //开始一个新的路径
				ctx.arc(110, 110, 70, 0 * Math.PI, 2 * Math.PI, false);
				//设置一个原点(110,110)，半径为100的圆的路径到当前路径
				ctx.stroke(); //对当前路径进行描边
				ctx.draw();
			},
			drawCircle(step){
				var ctx = uni.createCanvasContext('cpbar', this);
				// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
				var gradient = ctx.createLinearGradient(0, 0, 130, 0);
			
				let increase = 0.05;
				let end = (step / 100) * 2 * Math.PI - Math.PI / 2; // 最后的角度
				let current = -Math.PI / 2; // 起始角度
				let timer = setInterval(() => {
					gradient.addColorStop('0', '#58be6b');
					gradient.addColorStop('1.0', '#58be6b');
					ctx.setLineWidth(12);
					ctx.setStrokeStyle(gradient);
					ctx.setLineCap('square');
					ctx.beginPath();
					// 参数step 为绘制的百分比
					if (current < end) {
						current = current + increase;
					}
					if (current >= end) {
						current = end;
						clearInterval(timer);
					}
					ctx.arc(110, 110, 70, -Math.PI / 2, current, false);
					ctx.stroke();
					ctx.draw();
				}, 20);
			},
			drawLine(){
				var context = uni.createCanvasContext("cpline",this);
				var r = 70;
				var x0 = 110;
				var y0 = 110;
				var x;
				var y;
				var lineWidth = 12;
				
				for (let i = 0; i < 60; i++) {
				  context.beginPath();
				  context.setLineWidth(lineWidth);
				  context.setStrokeStyle("#FFFFFF");
					
				  x = x0 - r * Math.sin(((6 * (i + 1) - 3) * Math.PI) / 180);
				  y = y0 - r * Math.cos(((6 * (i + 1) - 3) * Math.PI) / 180);
				
				  // console.log('x0:' + x0 + '   y0:' + y0 + '    x:' + x + '    y:' + y);
				  context.moveTo(x, y);
				  context.arc(
					x0,
					y0,
					r,
					((270 - 6 * (i + 1) + 3) * Math.PI) / 180,
					((270 - 6 * i) * Math.PI) / 180,
					false
				  );
				  context.stroke();
				  context.closePath();
				}
				context.stroke();
				context.draw();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.progress_box {
		position: relative;
		width: 400rpx;
		height: 400rpx;
		display: flex;
		margin: 0 auto;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.progress_bg {
		position: absolute;
		width: 220px;
		height: 220px;
	}
	.progress_bar {
		position: absolute;
		width: 220px;
		height: 220px;
	}
	.progress_line {
		position: absolute;
		width: 220px;
		height: 220px;
	}
	.progress_txt {
		position: absolute;
		font-size: 28upx;
		color: #999999;
	}
	.progress_info {
		font-size: 36upx;
		padding-left: 16upx;
		letter-spacing: 2upx;
		font-size: 52upx;
		color: #333333;
	}
	.progress_dot {
		width: 16upx;
		height: 16upx;
		border-radius: 50%;
		background-color: #fb9126;
	}
	.battery-info{
		display: flex;
		justify-content: space-between;
		padding: 0 80rpx;
		text-align: center;
		line-height: 36rpx;
		view > view:first-child{
			font-weight: bold;
		}
		view > view:last-child{
			color: #939da7;
			font-size: 26rpx;
		}
	}
	.carinfo{
		padding-left: 45rpx;
		width: 100%;
		box-sizing: border-box;
		margin-top: 90rpx;
		.battery-list{
			display: flex;
			width: 100%;
			margin-top: 36rpx;
			.icon{
				width: 55rpx;
				padding-top: 5rpx;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
			.info{
				display: flex;
				flex: 1;
				border-bottom:#e5e5e5 solid 1px;
				justify-content: space-between;
				font-size: 28rpx;
				padding-bottom: 36rpx;
				padding-right: 40rpx;
				box-sizing: border-box;
				.word{
					color: #86909c;
				}
				.number{
					color: #333333;
					font-weight: bold;
				}
			}
		}
	}
	.submit{
		width: 600rpx;
		height: 88rpx;
		margin:35rpx auto;
		font-size: 36rpx;
		background-color: #58be6b;
		color: #fff;
		border-radius: 44rpx;
	}
</style>