From 3a2cc1ddc5c5fb3f863eae478e13afb34d71e18f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=89=E6=B5=A9=E8=8C=B9?=
 <oncwnuLslB1QkZmG_6L-1aBuubMg@git.weixin.qq.com>
Date: Tue, 30 Sep 2025 00:54:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=96=B0=E5=A2=9E=E4=B8=BB=E9=A1=B5?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E8=B0=83=E7=94=A8MQTT=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     |   5 +-
 src/pages.json                  |  12 +-
 src/pages/environment/index.vue |   4 +-
 src/pages/index/index.vue       | 244 ++++++++++++++++++++++++++------
 src/utils/sendMqtt.js           |   4 +-
 5 files changed, 216 insertions(+), 53 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3c3147c..3ec2bdf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -114,7 +114,10 @@ page {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  padding-bottom: 60px;
+  // padding-bottom: 60px
+  // #ifdef H5
+  margin-bottom: 50px;
+  // #endif
 }
 
 /* 非tabbar页面内容区域 */
diff --git a/src/pages.json b/src/pages.json
index 05d563f..b0bc4db 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,5 +1,11 @@
 {
 	"pages": [
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/environment/index",
 			"style": {
@@ -35,12 +41,6 @@
 				"navigationStyle": "custom"
 			}
 		},
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "移动式检修车间"
-			}
-		},
 		{
 			"path": "pages/system/index",
 			"style": {
diff --git a/src/pages/environment/index.vue b/src/pages/environment/index.vue
index dae543e..295c42b 100644
--- a/src/pages/environment/index.vue
+++ b/src/pages/environment/index.vue
@@ -111,14 +111,14 @@
       </view>
       <view class="control-info">
         <text class="last-update">最后更新: {{ lastUpdate }}</text>
-            <view class="connection-info">
+            <!-- <view class="connection-info">
               <text class="connection-status" :class="connectionStatus.isConnected ? 'connected' : 'disconnected'">
                 {{ connectionStatus.isConnected ? 'MQTT已连接' : 'MQTT未连接' }}
               </text>
               <button v-if="!connectionStatus.isConnected" class="reconnect-btn" @click="manualReconnect">
                 重连
               </button>
-            </view>
+            </view> -->
         <text class="temperature-range">温度控制: {{ temperatureRange.min }}°C - {{ temperatureRange.max }}°C</text>
         <text class="humidity-range">湿度控制: {{ humidityRange.min }}% - {{ humidityRange.max }}%</text>
       </view>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 1c634b0..d458b3c 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,24 +1,46 @@
 <template>
   <view class="index-page">
-    <!-- 固定头部 -->
-    <view class="fixed-header">
-      <text class="header-title">移动式检修车间</text>
-    </view>
-    
     <!-- 内容区域 -->
-    <view class="non-tabbar-content">
-      <view class="content">
-        <image class="logo" src="/static/logo.png"></image>
-        <view class="text-area">
-          <text class="title">{{ title }}</text>
+    <view class="content">
+      <!-- 上部区域：Logo和标题 -->
+      <view class="top-section">
+        <!-- Logo区域 -->
+        <view class="logo-container">
+          <view class="logo-circle">
+            <view class="logo-inner">
+              <view class="s-shape s-blue">S</view>
+              <view class="s-shape s-green">S</view>
+            </view>
+          </view>
+        </view>
+        
+        <!-- 应用名称 -->
+        <view class="app-title">
+          <text class="title-text">上动物联</text>
+        </view>
+      </view>
+      
+      <!-- 下部区域：按钮和版本号 -->
+      <view class="bottom-section">
+        <!-- 进入系统按钮 -->
+        <view class="action-container">
+          <button class="enter-button" @click="navigateToTabBar">
+            <text class="button-text">进入系统 →</text>
+          </button>
+        </view>
+        
+        <!-- 版本号 -->
+        <view class="version-container">
+          <text class="version-text">版本 1.0.0</text>
         </view>
-        <button class="nav-button" @click="navigateToTabBar">进入检修系统</button>
       </view>
     </view>
   </view>
 </template>
 
 <script>
+import { manualReconnect } from '@/utils/sendMqtt.js'
+
 export default {
   data() {
     return {
@@ -28,25 +50,84 @@ export default {
   onLoad() {},
   methods: {
     navigateToTabBar() {
-      // 跳转到tabbar的第一个页面（环境参数页面）
-      uni.switchTab({
-        url: '/pages/environment/index',
-        fail: (err) => {
-          console.error('跳转到tabbar失败:', err);
-          // 如果失败，尝试使用redirectTo
-          uni.redirectTo({
-            url: '/pages/environment/index'
-          });
-        }
-      });
+      console.log('🔧 用户点击进入系统，开始MQTT重连...')
+      
+      // 立即显示连接提示
+      uni.showLoading({
+        title: '正在连接MQTT...',
+        // mask: true
+      })
+      
+      // 调用MQTT重连函数
+      try {
+        manualReconnect()
+        console.log('✅ MQTT重连函数已调用')
+        
+        // 延迟跳转，给MQTT连接一些时间
+        setTimeout(() => {
+          // 更新loading文本
+          uni.showLoading({
+            title: '正在跳转系统...',
+            // mask: true
+          })
+          uni.hideLoading()
+          // 跳转到tabbar的第一个页面（环境参数页面）
+          uni.switchTab({
+            url: '/pages/environment/index',
+            success: () => {
+              console.log('✅ 成功跳转到环境参数页面')
+              uni.showToast({
+                title: '系统连接成功',
+                icon: 'success',
+                duration: 1000
+              })
+            },
+            fail: (err) => {
+              console.error('❌ 跳转到tabbar失败:', err);
+              // 如果失败，尝试使用redirectTo
+              uni.redirectTo({
+                url: '/pages/environment/index',
+                success: () => {
+                  console.log('✅ 使用redirectTo成功跳转')
+                  uni.showToast({
+                    title: '系统连接成功',
+                    icon: 'success',
+                    duration: 1000
+                  })
+                },
+                fail: (redirectErr) => {
+                  console.error('❌ redirectTo也失败:', redirectErr)
+                  uni.showToast({
+                    title: '页面跳转失败',
+                    icon: 'error',
+                    duration: 1000
+                  })
+                }
+              });
+            }
+          })
+          
+        }, 300) // 1秒后开始跳转
+        
+      } catch (error) {
+        console.error('❌ MQTT重连失败:', error)
+        uni.hideLoading()
+        uni.showToast({
+          title: 'MQTT连接失败',
+          icon: 'error',
+          duration: 1000
+        })
+      }
     }
   },
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 .index-page {
   height: 100vh;
+  width: 100vw;
+  background-color: #ffffff;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -56,35 +137,114 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 40rpx;
+  justify-content: space-between;
   flex: 1;
-  overflow-y: auto;
+  padding: 40rpx;
+  position: relative;
 }
 
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-bottom: 50rpx;
-}
-
-.text-area {
+/* 上部区域 */
+.top-section {
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 120rpx;
+}
+
+/* Logo区域 */
+.logo-container {
+  margin-bottom: 60rpx;
+}
+
+.logo-circle {
+  width: 160rpx;
+  height: 160rpx;
+  background-color: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
   justify-content: center;
-  margin-bottom: 50rpx;
+  position: relative;
 }
 
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
+.logo-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.nav-button {
-  background-color: #3f51b5;
+.s-shape {
+  position: absolute;
+  font-size: 70rpx;
+  font-weight: bold;
+  font-family: 'Arial', sans-serif;
+  line-height: 1;
+}
+
+.s-blue {
+  color: #2196f3;
+  transform: rotate(-20deg) translateX(-12rpx) translateY(-2rpx);
+  z-index: 2;
+}
+
+.s-green {
+  color: #4caf50;
+  transform: rotate(20deg) translateX(12rpx) translateY(2rpx);
+  z-index: 1;
+}
+
+/* 应用名称 */
+.app-title {
+  margin-bottom: 0;
+}
+
+.title-text {
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #000000;
+  text-align: center;
+}
+
+/* 下部区域 */
+.bottom-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 60rpx;
+}
+
+/* 进入系统按钮 */
+.action-container {
+  margin-bottom: 40rpx;
+}
+
+.enter-button {
+  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 100%);
+  border: none;
+  border-radius: 12rpx;
+  padding: 20rpx 50rpx;
+  box-shadow: 0 2rpx 8rpx rgba(25, 118, 210, 0.2);
+  min-width: 200rpx;
+}
+
+.button-text {
   color: #ffffff;
-  padding: 20rpx 40rpx;
-  border-radius: 10rpx;
   font-size: 32rpx;
-  margin-top: 50rpx;
+  font-weight: 500;
+}
+
+/* 版本号 */
+.version-container {
+  /* 移除绝对定位，让它跟随下部区域布局 */
+}
+
+.version-text {
+  font-size: 24rpx;
+  color: #999999;
+  text-align: center;
 }
 </style>
diff --git a/src/utils/sendMqtt.js b/src/utils/sendMqtt.js
index 0aa6b3e..8eacb9b 100644
--- a/src/utils/sendMqtt.js
+++ b/src/utils/sendMqtt.js
@@ -73,7 +73,7 @@ const createMqtt = () => {
 			// 显示连接loading
 			uni.showLoading({
 				title: 'MQTT连接中...',
-				mask: true
+				// mask: true
 			});
 			
 			client = mqtt.connect(mqtturl, options);
@@ -242,7 +242,7 @@ const manualReconnect = () => {
 	closeMqtt();
 	setTimeout(() => {
 		createMqtt();
-	}, 1000);
+	}, 300);
 };
 
 export {