ws连接状态

pages/home/home.vue

@@ -6,12 +6,16 @@
 					<u-cell-group :border="false" >
 						<u-cell
 							@click="showPopup('popupLane')"
-							:title="currentLane.name"
 							value="切换"
 							center
 							:isLink="true"
 							arrowDirection="down"
-						></u-cell>
+						>
+						<span slot="title" class="lane-line">
+							{{currentLane.name}}
+							<span :class="isConnect?'status_1':'status_0'"></span>
+						</span>
+						</u-cell>
 				</u-cell-group>
 				</view>
 				
@@ -100,6 +104,7 @@
 					name:'',
 					id:''
 				},
+				isConnect:false,
 				laneOption:[],
 			}
 		},
@@ -124,6 +129,7 @@
 			//连接车道ws
 			connectSocket(){
 				console.log(this.wsUrl);
+				this.isConnect = false
 				if(!this.wsUrl) return
 				if(this.ws){
 					this.ws.close(); // 组件销毁前关闭连接
@@ -133,6 +139,7 @@
 
 				// 监听连接成功
 				this.ws.onopen = () => {
+					this.isConnect = true
 					console.log('WebSocket 连接已建立');
 				};
 
@@ -198,7 +205,6 @@
 			//车道确定
 			onConfirm(value) {
 				console.log(value);
-				
 				if (value.value && value.value !== this.currentLane.id) {
 					this.currentLane.name = value.text
 					this.currentLane.id = value.value
@@ -343,4 +349,21 @@
   color: #409eff;
   font-weight: bold;
 }
+.lane-line{
+	display: flex;
+	gap: 20rpx;
+	align-items: center;
+}
+.status_1{
+	width: 32rpx;
+	height: 32rpx;
+	border-radius: 50%;
+	background: #19be6b;
+}
+.status_0{
+	width: 32rpx;
+	height: 32rpx;
+	border-radius: 50%;
+	background: #fa3534;
+}
 </style>