.

App.vue

@@ -14,18 +14,6 @@
 		globalData: {},
 		onLaunch: function() {
 			console.log('App Launch')
-			// #ifdef H5
-			this.mqtt = new mqttUtil();
-			// #endif
-
-			// 监听mqtt连接命令
-			uni.$on("mqtt-link", (userId) => {
-				this.mqttLink(userId);
-			});
-			// 监听mqtt连接订阅命令
-			uni.$on("mqtt-subscribes", topics => {
-				this.mqttSubscribes();
-			});
 		},
 		onShow: function() {
 			console.log('App Show')
@@ -45,9 +33,25 @@
 					this.dc.setStations(this.indexData.device.stations);
 					this.dc.setFlapValves(this.indexData.device.flapValves);
 					this.dc.setValves(this.indexData.selectItem.id, this.indexData.device.waterOutlets);
+
+					const obj = this.dc.topic;
+					if (obj.newV && obj.newV.length) {
+						this.mqttSubscribes(obj.newV); //订阅主题
+					}
+					if (obj.oldV && obj.oldV.length) {
+						this.mqttUnsubscribes(obj.oldV); //取消订阅主题
+					}
+
+					this.indexData.setStorage(3, {
+						userId: this.indexData.userId,
+						landId: this.indexData.selectItem.id,
+						stations: this.dc.stations,
+						flapValves: this.dc.flapValves,
+						waterOutlets: this.dc.valves,
+					});
 				}
 				uni.hideLoading();
-				// console.error("indexDataHandler_2:", {
+				// console.error("indexDataHandler:", {
 				// 	e: e,
 				// 	data: data,
 				// 	indexData: this.indexData,
@@ -58,14 +62,18 @@
 			mqttLink(userId) {
 				this.mqtt.link(userId);
 			},
-			//Mqtt连接
+			//Mqtt订阅
 			mqttSubscribes(topics) {
 				this.mqtt.subscribes(topics);
 			},
-			//Mqtt连接
+			//Mqtt取消订阅
 			mqttUnsubscribes(topics) {
 				this.mqtt.unsubscribes(topics);
 			},
+			//Mqtt断开连接
+			mqttEnd() {
+				this.mqtt.over();
+			},
 			//Mqtt消息回调
 			mqttMsgHandler(topic, data) {
 				console.error("mqttMsgHandler:", {
@@ -73,11 +81,6 @@
 					data: data,
 				});
 			},
-			//Mqtt断开连接
-			mqttEnd() {
-				this.mqtt.over();
-			},
-
 		}
 	}
 </script>

pages/index.vue

@@ -12,6 +12,7 @@
 			</view>
 		</block>
 	</uni-nav-bar>
+
 	<!-- 内容 -->
 	<view class="content">
 		<!-- 顶部搜索框 -->
@@ -98,7 +99,7 @@
 									</view>
 									<view class="fixed" style="width:calc(100% - 30%); justify-content: flex-end;">
 										<view class="iconfont icon-xh icon"
-											:class="[ mqtt.connected ? 'xh_green':'xh_red' ]">
+											:class="[ mqtt.connected ? 'font-green':'font-red' ]">
 										</view>
 										<view @click.stop="">
 											<u-button type="success" size="small" text="一键刷新" />
@@ -150,6 +151,11 @@
 						</u-collapse-item>
 					</u-collapse>
 				</view>
+
+				<!-- <button @click="mqttLink">mqttLink</button>
+				<button @click="mqttEnd">mqttEnd</button>
+				<button @click="mqttSubscribes">订阅</button> -->
+
 				<!-- 阀门列表 -->
 				<view class="card">
 					<u-collapse accordion>
@@ -246,15 +252,14 @@
 												<u-col span="6">
 													<view class="valve">
 														<view>
-															<u-button>全开</u-button>
+															<view class="btn v-btn2 fixed">
-															<!-- <view class="btn v-btn2 fixed">
 																<text>全开</text>
 																<text class="load-text">(超时)</text>
 																<view
 																	v-if="!item2.device.custom.btnControllable.openAll"
 																	class="iconfont icon-suoding icon">
 																</view>
-															</view> -->
+															</view>
 														</view>
 														<view class="btn-img">
 															<view class="text">
@@ -381,14 +386,7 @@
 		<!-- 角度 -->
 		<custom-angle-slider ref="refAngleSlider" mode="bottom" @close="" @confirm="angleSliderConfirm" />
 	</view>
-	<button @click="mqttLink">mqttLink</button>
+
-	<button @click="mqttEnd">mqttEnd</button>
-	<button @click="mqttGet">获取信息</button>
-	<view>
-		<p>connected:{{mqtt.connected}}</p>
-		<!-- <p>reconnecting:{{mqtt.client.reconnecting}}</p>
-		<p>结果：{{mqtt.client && (mqtt.client.connected && !mqtt.client.reconnecting)}}</p> -->
-	</view>
 </template>
 
 <script>
@@ -411,13 +409,11 @@
 			// uni.$emit("mqtt-link", this.user.userId);
 			// getApp().mqttLink(this.user.userId);
 
-
 			uni.$off("notify-update-land");
 			uni.$on("notify-update-land", (data) => {
 				console.error("index监听地块更新：", data)
 				this.isLandChange = true;
 			});
-
 		},
 		onShow() {
 			// #ifdef APP-PLUS
@@ -428,7 +424,7 @@
 		},
 		onPageScroll(e) { // 页面滚动触发事件的处理函数
 			// console.log(e.scrollTop); // 输出滚动位置的垂直距离
-			if (e.scrollTop >= 100) {
+			if (e.scrollTop >= 75) {
 				this.isSticky = true;
 			} else {
 				this.isSticky = false;
@@ -441,9 +437,12 @@
 			mqttEnd() {
 				getApp().mqttEnd();
 			},
-			mqttGet() {
+			mqttSubscribes() {
 				console.error("mqtt：", this.mqtt)
+				let topics = ["jsy/iot/push/1H8ngznmV50GzutYS8rIk01pd8"]
+				getApp().mqttSubscribes(topics);
 			},
+
 			//打开地块
 			openLand() {
 				this.$refs.refLand.open();
@@ -845,10 +844,10 @@
 	}
 
 	.font-green {
-		color: #39ac4f
+		color: #39ac4f !important;
 	}
 
 	.font-red {
-		color: #e60012
+		color: #e60012 !important;
 	}
 </style>

pages/login.vue

@@ -334,7 +334,14 @@
 		}
 		// 保存用户基本信息
 		store.dispatch("GetInfo").then(result => {
-			toIndex();
+			if (result.code == 200) {
+				toIndex(result.user.userId);
+			} else {
+				uni.showToast({
+					title: result.msg,
+					icon: "none"
+				})
+			}
 		})
 		//获取用户权限
 		store
@@ -352,9 +359,14 @@
 	}
 
 	// 跳转去首页
-	function toIndex() {
+	function toIndex(userId) {
 		uni.switchTab({
-			url: '/pages/index'
+			url: '/pages/index',
+			success: () => {
+				// getApp().mqttLink(userId);
+			},
+			fail: () => {},
+			complete: () => {}
 		});
 	}
 

static/scss/app.css

@@ -77,6 +77,10 @@
 	background-color: #39ac4f;
 	color: #fff;
 }
+.btn.activeing {
+	background-color: #39ac4f;
+	color: #fff;
+}
 
 /* 字体颜色 */
 .font-red {