From 20a3fe0b51654170bd937633ba3e21d82149497e 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: Fri, 31 Oct 2025 18:24:56 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/environment/index.vue | 125 +++++++++---------
 src/pages/index/index.vue       | 219 ++++++++++++++++++++++++--------
 src/utils/api.js                |   9 ++
 src/utils/sendMqtt.js           |  20 +--
 4 files changed, 250 insertions(+), 123 deletions(-)

diff --git a/src/pages/environment/index.vue b/src/pages/environment/index.vue
index 4132873..3866bd3 100644
--- a/src/pages/environment/index.vue
+++ b/src/pages/environment/index.vue
@@ -7,68 +7,68 @@
     
     <!-- 内容区域 -->
     <view class="tabbar-content">
-        <!-- 环境参数详情 -->
-        <view class="parameter-details">
-          <!-- 温度卡片 -->
-          <view class="detail-card temperature-detail-card">
-            <view class="detail-header">
-              <view class="detail-icon-container">
-                <view class="detail-icon temperature-icon">🌡️</view>
-                <text class="detail-label">温度</text>
-              </view>
-              <view class="detail-value-container">
-                <text class="detail-value">{{ temperature }}°C</text>
-                <view class="detail-status" :class="temperature > 0 ? 'active' : 'inactive'"></view>
-              </view>
-            </view>
-            <view class="detail-progress-bar">
-              <view class="detail-progress-fill temperature-progress" :style="{ width: temperatureProgress + '%' }"></view>
-            </view>
-            <!-- <view class="detail-range">
-              <text class="detail-range-text">{{ 0 }}°C - {{ 100 }}°C</text>
-            </view> -->
+      <!-- 环境参数详情 -->
+      <view class="parameter-details">
+      <!-- 温度卡片 -->
+      <view class="detail-card temperature-detail-card" @click="navigateToParameterRecord">
+        <view class="detail-header">
+          <view class="detail-icon-container">
+            <view class="detail-icon temperature-icon">🌡️</view>
+            <text class="detail-label">温度</text>
           </view>
-          
-          <!-- 湿度卡片 -->
-          <view class="detail-card humidity-detail-card">
-            <view class="detail-header">
-              <view class="detail-icon-container">
-                <view class="detail-icon humidity-icon">💧</view>
-                <text class="detail-label">湿度</text>
-              </view>
-              <view class="detail-value-container">
-                <text class="detail-value">{{ humidity }}%</text>
-                <view class="detail-status" :class="humidity > 0 ? 'active' : 'inactive'"></view>
-              </view>
-            </view>
-            <view class="detail-progress-bar">
-              <view class="detail-progress-fill humidity-progress" :style="{ width: humidityProgress + '%' }"></view>
-            </view>
-            <!-- <view class="detail-range">
-              <text class="detail-range-text">{{ 0 }}% - {{ 100 }}%</text>
-            </view> -->
-          </view>
-          
-          <!-- 洁净度卡片 -->
-          <view class="detail-card cleanliness-detail-card">
-            <view class="detail-header">
-              <view class="detail-icon-container">
-                <view class="detail-icon cleanliness-icon">✨</view>
-                <text class="detail-label">洁净度</text>
-              </view>
-              <view class="detail-value-container">
-                <text class="detail-value">{{ cleanliness > 0 ? cleanliness + 'μg/m³' : '-μg/m³' }}</text>
-                <view class="detail-status" :class="cleanliness > 0 ? 'active' : 'inactive'"></view>
-              </view>
-            </view>
-            <view class="detail-progress-bar">
-              <view class="detail-progress-fill cleanliness-progress" :style="{ width: cleanlinessProgress + '%' }"></view>
-            </view>
-            <!-- <view class="detail-range">
-              <text class="detail-range-text">{{ 0 }}% - {{ 100 }}%</text>
-            </view> -->
+          <view class="detail-value-container">
+            <text class="detail-value">{{ temperature }}°C</text>
+            <view class="detail-status" :class="temperature > 0 ? 'active' : 'inactive'"></view>
           </view>
         </view>
+        <view class="detail-progress-bar">
+          <view class="detail-progress-fill temperature-progress" :style="{ width: temperatureProgress + '%' }"></view>
+        </view>
+        <!-- <view class="detail-range">
+          <text class="detail-range-text">{{ 0 }}°C - {{ 100 }}°C</text>
+        </view> -->
+      </view>
+      
+      <!-- 湿度卡片 -->
+      <view class="detail-card humidity-detail-card" @click="navigateToParameterRecord">
+        <view class="detail-header">
+          <view class="detail-icon-container">
+            <view class="detail-icon humidity-icon">💧</view>
+            <text class="detail-label">湿度</text>
+          </view>
+          <view class="detail-value-container">
+            <text class="detail-value">{{ humidity }}%</text>
+            <view class="detail-status" :class="humidity > 0 ? 'active' : 'inactive'"></view>
+          </view>
+        </view>
+        <view class="detail-progress-bar">
+          <view class="detail-progress-fill humidity-progress" :style="{ width: humidityProgress + '%' }"></view>
+        </view>
+        <!-- <view class="detail-range">
+          <text class="detail-range-text">{{ 0 }}% - {{ 100 }}%</text>
+        </view> -->
+      </view>
+      
+      <!-- 洁净度卡片 -->
+      <view class="detail-card cleanliness-detail-card" @click="navigateToParameterRecord">
+        <view class="detail-header">
+          <view class="detail-icon-container">
+            <view class="detail-icon cleanliness-icon">✨</view>
+            <text class="detail-label">洁净度</text>
+          </view>
+          <view class="detail-value-container">
+            <text class="detail-value">{{ cleanliness > 0 ? cleanliness + 'μg/m³' : '-μg/m³' }}</text>
+            <view class="detail-status" :class="cleanliness > 0 ? 'active' : 'inactive'"></view>
+          </view>
+        </view>
+        <view class="detail-progress-bar">
+          <view class="detail-progress-fill cleanliness-progress" :style="{ width: cleanlinessProgress + '%' }"></view>
+        </view>
+        <!-- <view class="detail-range">
+          <text class="detail-range-text">{{ 0 }}% - {{ 100 }}%</text>
+        </view> -->
+      </view>
+    </view>
       
     <!-- 空调设置 -->
     <view class="air-conditioner-settings">
@@ -385,6 +385,13 @@ export default {
       this.loadWsdSettings()
       // 注意：定时器在 onShow 中启动，避免重复启动
     },
+    navigateToParameterRecord() {
+      try {
+        uni.switchTab({ url: '/pages/parameter/index' })
+      } catch (e) {
+        uni.showToast({ title: '页面跳转失败', icon: 'none' })
+      }
+    },
     // 首次进入系统时创建启动事件
     async createStartupEventIfNeeded() {
       // 检查是否已经创建过启动事件
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index f98658b..c612162 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -16,15 +16,32 @@
           <text class="title-text">上动物联</text>
         </view>
       </view>
-      
-      <!-- 下部区域：按钮和版本号 -->
-      <view class="bottom-section">
-        <!-- 进入系统按钮 -->
+
+      <!-- 登录表单：账号、密码 -->
+      <view class="form-section">
+        <!-- <view class="form-item">
+          <text class="form-label">账号</text>
+          <input class="form-input" v-model="username" placeholder="请输入账号" placeholder-class="placeholder" confirm-type="next" />
+        </view> -->
+        <view class="form-item">
+          <text class="form-label">密码</text>
+          <input class="form-input" v-model="password" password placeholder="请输入密码" placeholder-class="placeholder" confirm-type="done" />
+        </view>
         <view class="action-container">
           <button class="enter-button" @click="navigateToTabBar">
             <text class="button-text">进入系统 →</text>
           </button>
         </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">
@@ -37,84 +54,141 @@
 
 <script>
 import { manualReconnect } from '@/utils/sendMqtt.js'
+import { authApi } from '@/utils/api.js'
 
 export default {
   data() {
     return {
       title: 'Hello',
+      username: '',
+      password: '',
+    }
+  },
+  computed: {
+    canLogin() {
+      // return this.username && this.username.trim().length > 0 && this.password && this.password.trim().length > 0
+      return this.password && this.password.trim().length > 0
     }
   },
   onLoad() {},
   methods: {
-    navigateToTabBar() {
-      console.log('🔧 用户点击进入系统，开始MQTT重连...')
-      
-      // 立即显示连接提示
-      uni.showLoading({
-        title: '正在连接MQTT...',
-        // mask: true
-      })
-      
-      // 调用MQTT重连函数
+    async navigateToTabBar() {
+      if (!this.canLogin) {
+        uni.showToast({
+          title: '请输入密码',
+          icon: 'none',
+          duration: 1200
+        })
+        return
+      }
+      console.log('🔒 开始登录...')
+
+      // 先登录
       try {
-        manualReconnect()
-        console.log('✅ MQTT重连函数已调用')
-        
-        // 延迟跳转，给MQTT连接一些时间
-        setTimeout(() => {
-          // 更新loading文本
+        uni.showLoading({ title: '正在登录...' })
+        const loginRes = await authApi.login({
+          username: this.username || 'admin',
+          password: this.password
+        })
+
+        console.log('🔒 登录结果:', loginRes)
+        if (loginRes.success) {
+          // 可选：如果返回 token，保存以备后续请求使用
+          if (loginRes && loginRes.token) {
+            const token = loginRes.token;
+            try {
+              uni.setStorageSync('auth_token', token)
+            } catch (e) {}
+          }
+
+          uni.hideLoading()
+          uni.showToast({ title: '登录成功', icon: 'success', duration: 800 })
+          // 立即显示连接提示
           uni.showLoading({
-            title: '正在跳转系统...',
+            title: '正在连接MQTT...',
             // mask: true
           })
-          uni.hideLoading()
-          // 跳转到tabbar的第一个页面（环境参数页面）
-          uni.switchTab({
-            url: '/pages/environment/index',
-            success: () => {
-              console.log('✅ 成功跳转到环境参数页面')
-              uni.showToast({
-                title: '系统连接成功',
-                icon: 'success',
-                duration: 1000
+      
+          // 调用MQTT重连函数
+          try {
+            manualReconnect()
+            console.log('✅ MQTT重连函数已调用')
+            
+            // 延迟跳转，给MQTT连接一些时间
+            setTimeout(() => {
+              // 更新loading文本
+              uni.showLoading({
+                title: '正在跳转系统...',
+                // mask: true
               })
-            },
-            fail: (err) => {
-              console.error('❌ 跳转到tabbar失败:', err);
-              // 如果失败，尝试使用redirectTo
-              uni.redirectTo({
+              uni.hideLoading()
+              // 跳转到tabbar的第一个页面（环境参数页面）
+              uni.switchTab({
                 url: '/pages/environment/index',
                 success: () => {
-                  console.log('✅ 使用redirectTo成功跳转')
+                  console.log('✅ 成功跳转到环境参数页面')
                   uni.showToast({
                     title: '系统连接成功',
                     icon: 'success',
                     duration: 1000
                   })
                 },
-                fail: (redirectErr) => {
-                  console.error('❌ redirectTo也失败:', redirectErr)
-                  uni.showToast({
-                    title: '页面跳转失败',
-                    icon: 'error',
-                    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
+            })
+          }
+        } else {
+          uni.hideLoading()
+          uni.showToast({
+            title: loginRes?.message || '登录失败',
+            icon: 'none',
+            duration: 1500
           })
-          
-        }, 300) // 1秒后开始跳转
-        
-      } catch (error) {
-        console.error('❌ MQTT重连失败:', error)
+          return
+        }
+      } catch (e) {
         uni.hideLoading()
         uni.showToast({
-          title: 'MQTT连接失败',
-          icon: 'error',
-          duration: 1000
+          title: e?.message || '登录失败',
+          icon: 'none',
+          duration: 1500
         })
+        return
       }
+
+      console.log('🔧 用户点击进入系统，开始MQTT重连...')
     }
   },
 }
@@ -193,6 +267,7 @@ export default {
 /* 进入系统按钮 */
 .action-container {
   margin-bottom: 40rpx;
+  margin-top: 40px;
 }
 
 .enter-button {
@@ -210,6 +285,42 @@ export default {
   font-weight: 500;
 }
 
+/* 表单样式 */
+.form-section {
+  width: 100%;
+  max-width: 640rpx;
+  margin-top: 40rpx;
+}
+
+.form-item {
+  display: flex;
+  align-items: center;
+  background: #f7f8fa;
+  border-radius: 12rpx;
+  padding: 20rpx 24rpx;
+  margin-bottom: 24rpx;
+}
+
+.form-label {
+  width: 120rpx;
+  font-size: 28rpx;
+  color: #333333;
+}
+
+.form-input {
+  flex: 1;
+  font-size: 28rpx;
+  color: #111111;
+}
+
+.placeholder {
+  color: #999999;
+}
+
+.enter-button:disabled {
+  opacity: 0.5;
+}
+
 /* 版本号 */
 
 .version-text {
diff --git a/src/utils/api.js b/src/utils/api.js
index 9333f2b..f8ece34 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -5,6 +5,15 @@
 
 import httpService from './http.js'
 
+// 认证接口
+export const authApi = {
+  // 登录
+  login(data) {
+    // 约定字段：username、password
+    return httpService.post('/api/auth/login', data)
+  }
+}
+
 // 数据历史接口
 export const dataHistoryApi = {
   // 获取历史数据
diff --git a/src/utils/sendMqtt.js b/src/utils/sendMqtt.js
index 982a3cd..90e3bc7 100644
--- a/src/utils/sendMqtt.js
+++ b/src/utils/sendMqtt.js
@@ -282,11 +282,11 @@ const sendMqttData = (data) => {
 				});
 			} else {
 				console.log('✅ MQTT数据发送成功');
-				uni.showToast({
-					title: '数据发送成功',
-					icon: 'success',
-					duration: 1500
-				});
+				// uni.showToast({
+				// 	title: '数据发送成功',
+				// 	icon: 'success',
+				// 	duration: 1500
+				// });
 			}
 		});
 		
@@ -334,11 +334,11 @@ const sendMqttDataRecall = (data) => {
 					duration: 2000
 				});
 			} else {
-				uni.showToast({
-					title: '数据发送成功',
-					icon: 'success',
-					duration: 1500
-				});
+				// uni.showToast({
+				// 	title: '数据发送成功',
+				// 	icon: 'success',
+				// 	duration: 1500
+				// });
 			}
 		});