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

<template>
	<view>
		<scan-info 
			:swapInfoDTO="swapInfoDTO" 
			:swapConfirmDTO="swapConfirmDTO" 
			:exchangeNo="exchangeNo"
			v-show="pageState===2">
		</scan-info>
		<view class="swapinfo" v-show="pageState===1">
			<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="swapInfoDTO.swapNum" unit="次"></sub-title>
					<sub-title descript="解锁状态" :value="swapInfoDTO.lockState?'已解锁':'未解锁'"></sub-title>
					<sub-title descript="上电状态" :value="swapInfoDTO.powerOnState?'已下电':'未下电'"></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,
			}
		},
		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 || this.swapState === 2) {
					return 1
				} else {
					return 2
				}
			}
		},
		methods: {
			//切换tab
			getTab(num) {
				if (num === 2) {
					this.currentTab = 2
				} else if (num === 3) {
					this.currentTab = 3
				} else {
					this.currentTab = 1
				}
			},
			//判断websocket是否链接上
			InitWs(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.step = data.swapStepList.length - 1
						this.currentDescript = data.swapStepList.slice(-1)[0].description,
						this.currentTime = data.swapStepList.slice(-1)[0].seqTime,
						this.plate = data.swapConfirmDTO.plate
						this.swapStepList = data.swapStepList
						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)
				}
			},
			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>