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

<template>
	<view>
		<scan-info :swapInfoDTO="swapInfoDTO" :swapConfirmDTO="swapConfirmDTO" :exchangeNo="exchangeNo"
			v-show="pageState===1">
		</scan-info>
		<view class="swapinfo" v-show="pageState===2">
			<view class="header">
				<view @click="getTab(1)" :class="{'active':currentTab===1}">换电流程</view>
				<view @click="getTab(2)" :class="{'active':currentTab===2}">车辆信息</view>
				<view @click="getTab(3)" :class="{'active':currentTab===3}">电池信息</view>
			</view>
			<view class="changeProcess" v-show="currentTab===1">
				<view class="changeCurrent">
					<view class="info">
						<view>
							<image src="../../static/icon7.png"></image>
						</view>
						<view>{{currentDescript || '-'}}</view>
					</view>
					<view class="times">
						{{currentTime || '-'}} | {{plate || '-'}}
					</view>
				</view>
				<view class="timeline">
					<view class="timeinfo">
						<view class="list" v-for="(item,index) in swapStepList" :key="index">
							<view>{{$moment(item.seqTime).format("YYYY-MM-DD")}}</view>
							<view>{{$moment(item.seqTime).format("HH:mm:ss")}}</view>
						</view>
					</view>
					<view class="line">
						<uni-steps :options="swapStepList" :active="step" direction="column"></uni-steps>
					</view>
				</view>
			</view>
			<view class="changeCar" v-show="currentTab===2">
				<view class="ban">
					<image src="../../static/car-info.png"></image>
				</view>
				<view class="info-box">
					<sub-title descript="车牌" :value="swapInfoDTO.plate"></sub-title>
					<sub-title descript="VIN码" :value="swapInfoDTO.vin"></sub-title>
					<sub-title descript="累计里程" :value="swapInfoDTO.mileage" unit="km"></sub-title>
					<sub-title descript="累计换电" :value="times" unit="次"></sub-title>
					<sub-title descript="解锁状态" :value="swapInfoDTO.lockState===1?'已解锁':'已上锁'"></sub-title>
					<sub-title descript="上电状态" :value="swapInfoDTO.powerOnState===0?'已下电':'未下电'"></sub-title>
				</view>
			</view>
			<view class="changeBattery" v-show="currentTab===3">
				<view class="ban">
					<image src="../../static/battery-info.png"></image>
				</view>
				<view class="info-box">
					<sub-title descript="车辆电池编号" :value="swapInfoDTO.vehSn"></sub-title>
					<sub-title descript="车辆电池SOC" :value="swapInfoDTO.vehSoc" unit="%"></sub-title>
					<sub-title descript="换电电池编号" :value="swapInfoDTO.swapSn"></sub-title>
					<sub-title descript="换电电池SOC" :value="swapInfoDTO.swapSoc" unit="%"></sub-title>
					<sub-title descript="换电量" :value="swapInfoDTO.swapCapacity" unit="(kW/h)"></sub-title>
					<sub-title descript="累计里程" :value="swapInfoDTO.mileage" unit="km"></sub-title>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swapStepList: [],
				step: 0,
				currentDescript: '',
				currentTime: '',
				plate: '',
				swapInfoDTO: null,
				swapConfirmDTO: null,
				currentTab: 1, //当前tab
				swapState: -1,
				ws: null,
				timer: null,
				exchangeNo: null,
				times: 0, //累计换电次数
			}
		},
		mounted() {

		},
		onLoad(options) {
			this.InitWs(options.exchangeNo, options.stationCode)
			this.exchangeNo = options.exchangeNo
		},
		onUnload() {
			console.log('onUnload')
			clearInterval(this.timer)
			this.timer = null
			this.ws.close()
			uni.redirectTo({
				url: '/pages/index/index'
			})
		},
		computed: {
			pageState() {
				if (this.swapState === -1) {
					return 0
				} else if (this.swapState === 1) {
					return 1
				} else {
					return 2
				}
			}
		},
		methods: {
			//切换tab
			getTab(num) {
				if (num === 2) {
					this.currentTab = 2
					this.$http.getExchangeTimes(this.swapInfoDTO.vin).then(res => {
						this.times = res.data
					})
				} else if (num === 3) {
					this.currentTab = 3
				} else {
					this.currentTab = 1
				}
			},
			//判断websocket是否链接上
			InitWs(exchangeNo, stationCode) {
				if (exchangeNo && stationCode) {
					if (this.ws != null) {
						this.ws.close()
						this.ws = null
					}
					if (this.timer != null) {
						clearInterval(this.timer)
						this.timer = null
					}
					let users = this.$storage.getJson("users");
					let token = this.$storage.getJson("token");
					if (users == null || token == null) {
						navigateTo("public/login");
						return false;
					}
					this.ws = uni.connectSocket({
						url: this.$config.web_socket_url + stationCode + '/' + token,
						header: {
							'content-type': 'application/json'
						},
						complete: () => {}
					})
					this.ws.onOpen(() => {
						let msg = {
							type: "subscribeExchange",
							payLoad: {
								exchangeNo: exchangeNo
							}
						}
						this.ws.send({
							data: JSON.stringify(msg)
						})
						this.$bus.$on('sendMsg2', this.sendExchangeMsg)
					})
					this.ws.onMessage((res) => {
						let data = JSON.parse(res.data)
						console.log(data)
						if (data.type === 'subscribe') {
							if (data.state === 0) {
								console.log('订阅成功')
							} else {
								this.$utils.msg('订阅失败')
							}
						} else if (data.type === 'swapInfo') {
							this.swapConfirmDTO = data.swapConfirmDTO
							this.swapInfoDTO = data.swapInfoDTO
							this.swapState = data.swapConfirmDTO.swapState
							this.currentDescript = data.swapStepList.slice(-1)[0].description,
								this.currentTime = data.swapStepList.slice(-1)[0].seqTime,
								this.plate = data.swapConfirmDTO.plate
							this.swapStepList.push(...data.swapStepList)
							this.step = this.swapStepList.length - 1
							this.$bus.$emit('OndrawCircle', Math.ceil((data.swapConfirmDTO.vehSoc) * 1))
						} else if (data.type === 'startReply') {
							if (data.state === 0) {
								this.swapState = 2
								console.log('站控已启动')
							} else {
								this.$utils.msg('站控启动失败')
							}
						}
					})
					// 监听WebSocket关闭事件
					this.ws.onClose(() => {
						console.log('WebSocket连接已关闭！');
					})
					this.ws.onError(() => {
						console.log("WebSocket连接错误")
					})
					if (this.timer == null) {
						this.timer = setInterval(() => {
							if (this.ws.readyState != 1) {
								clearInterval(this.timer)
								this.timer = null
								this.ws.close()
								this.InitWs(exchangeNo, stationCode)
							}
						}, 2000)
					}
				}else{
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
			},
			sendExchangeMsg(msg) {
				this.ws.send(msg)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swapinfo {

		//顶部
		.header {
			display: flex;
			padding: 30rpx;
			width: 690rpx;
			color: #86909c;
			font-size: 32rpx;
			justify-content: space-around;

			.active {
				color: #1d2129;
				font-weight: bold;
				position: relative;
			}

			.active::after {
				content: '';
				background-image: url('@/static/line.png');
				background-size: 100% 100%;
				width: 52rpx;
				height: 9rpx;
				position: absolute;
				bottom: -25rpx;
				left: 32%;
			}
		}

		//换电流程
		.changeProcess {
			.timeline {
				padding: 0 58rpx;
				display: flex;
				margin-top: 60rpx;

				.timeinfo {
					display: flex;
					flex-direction: column;
					text-align: right;

					.list {
						display: flex;
						flex-direction: column;
						width: 100%;
						height: 102rpx;
						color: #c9cdd4;
						font-size: 28rpx;

						view:first-child {
							color: #86909c;
						}
					}
				}

				.line {
					flex: 1;
				}
			}

			.changeCurrent {
				width: 690rpx;
				margin: 30rpx auto;
				height: 180rpx;
				background-image: url('@/static/change-bg.png');
				background-size: 100% 100%;
				padding: 25rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.info {
					display: flex;
					color: #fff;
					font-size: 30rpx;
					font-weight: bold;
					line-height: 36rpx;

					image {
						width: 60rpx;
						height: 60rpx;
						padding-right: 25rpx;
					}

					view:last-child {
						padding-top: 12rpx;
					}
				}

				.times {
					color: #ededed;
					text-indent: 10rpx;
				}
			}
		}

		//换电流程车和电池信息
		.changeCar,
		.changeBattery {
			.ban {
				width: 547rpx;
				height: 298rpx;
				margin: 70rpx auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info-box {
				width: 587rpx;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>