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">{{ swapConfirmDTO.vehSoc || '-' }}%</view>
				<view>当前电池SOC</view>
			</view>
		</view>
		<view class="battery-info">
			<view>
				<view>{{swapInfoDTO.mileage || '-'}}km</view>
				<view>累计里程</view>
			</view>
			<view>
				<view>{{ 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/powerchange/index')" class="submit"
			:disabled="!swapConfirmDTO.swapState">确认换电</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrcode: null,
				swapConfirmDTO:null,
				swapInfoDTO:null,
				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.InitWs()
		},
		methods: {
			//判断websocket是否链接上
			InitWs() {
				if (this.$storage.get("exchangeNo")) {
					let msg = {
						type: "subscribeExchange",
						payLoad: {
							exchangeNo: this.$storage.get("exchangeNo")
						}
					}
					if (this.$ws.socketTask == null) {
						this.$ws.connect()
						this.$ws.onSocketOpen = () => {
							this.getWsData()
							this.$ws.sendmessage(msg)
						}
					}else{
						this.getWsData()
						this.$ws.sendmessage(msg)
					}
				}else {
					this.$utils.msg('未获取到换电编号')
				}
			},
			// //获取websocket数据
			getWsData() {
				this.$ws.onSocketMsg = (res) => {
					let data = JSON.parse(res.data)
					console.log(data)
					if (data.type === 'subscribe') {
						console.log(data.state)
					} else if (data.type === 'swapInfo' && data.state === 0) {
						this.swapConfirmDTO = data.swapConfirmDTO
						this.swapInfoDTO=data.swapInfoDTO
						this.process_txt=data.swapConfirmDTO.vehSoc
					} 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)
						this.$ws.onSocketMsg = (res) =>{
							let data=JSON.parse(res.data)
							console.log(res.data)
							if (data.type === 'start' && data.state ===0) {
								uni.navigateTo({
									url: url
								})
							}else {
								this.$utils.msg('下发换电指令失败')
							}
						}
					}
				} 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>