app-station-control-frontend_v1/pages/equipment-monitoring/index.vue

<template>
	<view class="content">
		<view class="header">
			<!-- <view class="header_left">
				{{isSlecte?'机器人':'储充设备'}}
			</view> -->
			<view class="tabar_btn">
				<view class="btn" :class="isSlecte?'active':''" @click="isSlecte=true">
					机器人
				</view>
				<view class="btn" :class="!isSlecte?'active':''" @click="isSlecte=false">
					储充设备
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main_one" v-if="isSlecte">
				<automatic :robotInfoVo="robotInfoVo" :robotcode='robotcode'></automatic>
			</view>
			<view class="main_two" v-if="!isSlecte">
				<manual :storeInfoLists="storeInfoLists"></manual>
			</view>
		</view>
	</view>
</template>

<script>
	import automatic from "./components/automatic.vue"
	import manual from "./components/manual.vue"
	export default {
		components: {
			manual,
			automatic
		},
		data() {
			return {
				isSlecte: true, //切换页面
				getStationCode: null, //这个暂时没有
				ws: null, //websuokit 链接器
				timer: null, //记录链接的方法   方便清除
				storeInfoLists: [], //储充设备数据
				robotInfoVo: {}, //机器人数据
				robotcode: 0, //机器人模式
				heartbeatTimer: null,
				onMessageTime: null,
			}
		},
		mounted() {
			this.onMessageTime = new Date();
			this.InitWs()
			this.heartbeatTimer = setInterval(() => {
				let newDate = new Date();
				if (newDate - this.onMessageTime > 3000) {
					if (this.ws != null) {
						this.ws.close()
						this.ws = null
					}
				}
			}, 3000)

		},

		onUnload() {
			console.log('onUnload')
			if(this.timer!=null){
				clearInterval(this.timer)
				this.timer = null
			}
			if(this.ws!=null){
				this.ws.close()
				this.ws=null
			}
			if(this.heartbeatTimer!=null){
				this.heartbeatTimer.close()
				this.heartbeatTimer=null
			}
		},
		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: {

			//判断websocket是否链接上
			InitWs() {
				let token = this.$storage.getJson("token");
				let users = this.$storage.getJson("users");
				// if (users == null || token == null) {
				// 	uni.navigateTo("public/login");
				// 	return false;
				// }
				if (this.ws != null) {
					this.ws.close()
					this.ws = null
				}
				if (this.timer != null) {
					clearInterval(this.timer)
					this.timer = null
				}
				console.log(this.$config.web_socket_url, 'this.$config.web_socket_url')
				this.ws = uni.connectSocket({
					url: this.$config.web_socket_url + token,
					header: {
						'content-type': 'application/json'
					},
					complete: () => {}
				})
				this.ws.onOpen(() => {
					// uni.showLoading({
					// 	title: '数据加载中...'
					// });
					let wsMessage = {
						type: 'page',
						payload: 'equipment-monitoring'
					}
					let data = JSON.stringify(wsMessage)
					this.ws.send({
						data
					})
				})
				this.ws.onMessage((res) => {
					this.onMessageTime = new Date();
					let data = JSON.parse(res.data)
					// console.log(data,'resws')
					if (res) {
						uni.hideLoading()
					}
					console.log(data)
					//请求成功 开始赋值
					if (data.robotInfoVo) {
						this.robotInfoVo = data.robotInfoVo;
						this.robotcode = data.batChooseMode;
						// console.log(this.robotcode,'robotInfoVos99999')
					}
					if (data.storeInfoList) {
						data.storeInfoList.forEach(item=>{
						if(item.chgType == 0){
							item.showCodeNum = 0 //仓内充电  显示电池
						}else{
							if(!item.batInfoOneVo.sn && item.batInfoTwoVo.sn){ //A枪不存在数据B枪有数据
								item.showCodeNum = 2
							}else{
								item.showCodeNum = 1 
							}
						}
						})
						this.storeInfoLists = data.storeInfoList;
					}
				})
				// 监听WebSocket关闭事件
				this.ws.onClose(() => {
					console.log('WebSocket连接已关闭！');
				})
				this.ws.onError(() => {
					console.log("WebSocket连接错误")
				})
				if(this.timer == null){
					//检查断开重连
					this.timer = setInterval(() => {
						if(this.ws==null){
							console.log('ws为null,检查断开重连')
							this.InitWs()
						}else if(this.ws.readyState != 1){
							this.ws.close()
							this.ws = null
							console.log('未连接成功，检查断开重连')
							this.InitWs()
						}
					}, 2000)
				}

			},
			// sendExchangeMsg(msg) {
			// 	this.ws.send(msg)
			// },
			jumpError(title) {
				uni.redirectTo({
					url: '/pages/public/404?error=' + title
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		color: white;
		font-size: 24px;

		.header {
			display: flex;
			justify-content: space-between;
			// margin-bottom: 16px;

			.header_left {
				font-size: 16px;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: rgba(255, 255, 255, 0.85);
				text-shadow: 0px 0px 4px #0027D8;
			}

			.tabar_btn {
				display: flex;

				.btn {
					width: 100px;
					height: 48px;
					background: #263042;
					border-radius: 0px 2px 2px 0px;
					font-size: 16px;
					text-align: center;
					line-height: 48px;
				}

				.active {
					background: #91FDB9;
					border-radius: 2px 0px 0px 2px;
					color: black;
				}
			}
		}

		.main {
			display: flex;
			width: 100%;
			height: 650px;

			.main_one,
			.main_two {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>