zk-driver-wechat-applet/components/scan-info/scan-info.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 || 0 }}%</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="swapSubmit" class="submit" :disabled="swapConfirmDTO.swapState==2"
			:loading="swapConfirmDTO.swapState==2">
			{{swapConfirmDTO.swapState==1?'确认换电':'换电进行中'}}</button>
	</view>
</template>

<script>
	export default {
		name: "scan-info",
		props: ['swapConfirmDTO', 'swapInfoDTO', 'exchangeNo'],
		data() {
			return {
				percent: 0,
				currentAngle: null,
				angleTimer: null,
				r:80
			}
		},
		beforeCreate() {
			if (!uni.getStorageSync("token")) {
				uni.reLaunch({
					url: '/pages/public/login?item=scan'
				})
			}
		},
		mounted() {
			this.drawProgressbg();
			this.$bus.$on('OndrawCircle', this.drawCircle) //参数为1-100
			// this.drawCircle(10)
			this.drawLine();
		},
		methods: {
			swapSubmit() {
				let that = this
				if (uni.getStorageSync("token")) {
					if (this.exchangeNo) {
						let msg = {
							type: "startExchange",
							payLoad: {
								exchangeNo: this.exchangeNo
							}
						}
						this.$bus.$emit('sendMsg2', {
							data: JSON.stringify(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, this.r, 0 * Math.PI, 2 * Math.PI, false);
				//设置一个原点(110,110)，半径为100的圆的路径到当前路径
				ctx.stroke(); //对当前路径进行描边
				ctx.draw();
			},
			drawCircle(step) {
				//清除上一次的定时器
				if (this.angleTimer != null) {
					clearInterval(this.angleTimer)
					this.angleTimer = null
				}
				let ctx = uni.createCanvasContext('cpbar', this);
				// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
				let gradient = ctx.createLinearGradient(0, 0, 130, 0);

				ctx.setLineCap('square');
				let interval = 0.05;
				let end = (step / 100) * 2 * Math.PI - Math.PI / 2; // 最后的角度
				let current = this.currentAngle == null ? -Math.PI / 2 : this.currentAngle; // 起始角度 上次结束或者-90
				this.currentAngle = end //保存上次的角度

				if (end > current) {
					//递增情况
					this.angleTimer = setInterval(() => {
						gradient.addColorStop('0', '#58be6b');
						gradient.addColorStop('1.0', '#58be6b');
						ctx.setLineWidth(12);
						ctx.setStrokeStyle(gradient);
						ctx.beginPath();
						if (current < end) {
							current += interval
						}
						if (current >= end) {
							current = end
							clearInterval(this.angleTimer)
							this.angleTimer = null
						}
						ctx.arc(110, 110, this.r, -Math.PI / 2, current, false)
						ctx.stroke()
						ctx.draw()
					}, 20)

				} else if (end < current) {
					//递减情况
					this.angleTimer = setInterval(() => {
						ctx.beginPath();
						gradient.addColorStop('0', '#58be6b');
						gradient.addColorStop('1.0', '#58be6b');
						ctx.setLineWidth(12);
						ctx.setStrokeStyle(gradient);
						if (current > end) {
							current -= interval
						}
						if (current <= end) {
							current = end
							clearInterval(this.angleTimer)
							this.angleTimer = null
						}
						ctx.arc(110, 110, this.r, -Math.PI / 2, current, false)
						ctx.stroke()
						ctx.draw()
					}, 20)
				} else {return}//相等
			},
			drawLine() {
				var context = uni.createCanvasContext("cpline", this);
				var r = this.r;
				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");
					let n = 0
					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;
		z-index: 99;
	}

	.progress_line {
		position: absolute;
		z-index: 999;
		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>