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,//机器人模式
			}
		},
		mounted() {

			this.InitWs()

		},

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