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

<template>
	<view>
		<scan-info 
			:swapInfoDTO="swapInfoDTO" 
			:swapConfirmDTO="swapConfirmDTO" 
			@sendExchangeMsg="sendExchangeMsg"
			: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="车牌" :values="swapInfoDTO.plate"></sub-title>
					<sub-title descript="VIN码" :values="swapInfoDTO.vin"></sub-title>
					<sub-title descript="累计里程" :values="swapInfoDTO.mileage" unit="km"></sub-title>
					<sub-title descript="累计换电" :values="times" unit="次"></sub-title>
					<sub-title descript="解锁状态" :values="swapInfoDTO.lockState===1?'已解锁':'已上锁'"></sub-title>
					<sub-title descript="上电状态" :values="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="车辆电池编号" :values="swapInfoDTO.vehSn"></sub-title>
					<sub-title descript="车辆电池SOC" :values="swapInfoDTO.vehSoc" unit="%"></sub-title>
					<view class="list">
						<view>换电电池编号：</view>
						<zb-tooltip :content="swapInfoDTO.swapSn"  placement="top" ref="tooltip13" color="#58be6b">
							<view v-if="swapInfoDTO" @click="showBattery">{{swapInfoDTO.swapSn | fiterBattery}}</view>
						</zb-tooltip>
					</view>
					<sub-title descript="换电电池SOC" :values="swapInfoDTO.swapSoc" unit="%"></sub-title>
					<sub-title descript="换电量" :values="swapInfoDTO.swapCapacity" unit="(kW/h)"></sub-title>
					<sub-title descript="累计里程" :values="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, //累计换电次数,
				getStationCode:null,
			}
		},
		mounted() {
			this.$bus.$on('sendMsg2', this.sendExchangeMsg)
			if(this.getStationCode && this.exchangeNo){
				this.InitWs(this.exchangeNo, this.getStationCode)
			}
		},
		onLoad(options) {
			if (options.exchangeNo && options.stationCode) {
				this.getStationCode=options.stationCode
				this.exchangeNo = options.exchangeNo
			} else {
				this.$utils.msg('参数丢失!')
			}

		},
		filters:{
			fiterBattery:function(val){
				if(!val){
					return '-'
				}else{
					return val.substring(0,4)+'****'+val.substring(val.length-4)
				}
			},
		},
		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
				}
			}
		},
		watch: {
			pageState(val) {
				if (val === 0) {
					uni.showLoading({
						title: ''
					});
				} else {
					uni.hideLoading();
				}
			}
		},
		methods: {
			//显示电池编号
			showBattery(){
				
			},
			//切换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.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
							data.swapStepList.reverse()
							this.currentDescript = data.swapStepList[0].description,
							this.currentTime = data.swapStepList[0].seqTime,
							this.plate = data.swapConfirmDTO.plate
							this.swapStepList.unshift(...data.swapStepList)
							this.step = 0
							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 {
			padding-bottom: 20rpx;

			.timeline {
				display: flex;
				box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(226, 226, 226, 0.25);
				border-radius: 24rpx;
				background-color: #fff;
				margin: 30rpx;
				padding: 29rpx;
				opacity: 1;

				.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 {
			width: 690rpx;
			margin: 30rpx 30rpx;
			padding: 15rpx 0rpx;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(226, 226, 226, 0.25);
			border-radius: 24rpx;
			opacity: 1;
			background-color: #fff;

			.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;
				.list {
					width: 100%;
					display: flex;
					height: 100rpx;
					justify-content: space-between;
					font-size: 30rpx;
					view:first-child {
						color: #86909c;
					}
					view:last-child {
						color: #1d2129;
					}
				}
			}
		}
	}
</style>