增加了登录验证

src/api/index.js

@@ -177,13 +177,14 @@ export async function getVideoList(params = {}) {
     page: params.page || 1, pageSize: params.pageSize || 9
   })
   if (res.code === 200 && res.data && res.data.records) {
-    return wrapResult({
-      total: res.data.total, page: res.data.current,
-      list: res.data.records.map(r => ({
-        id: r.deviceNo, name: r.subjectName + (r.room ? `(${r.room})` : ''),
-        ai: false, status: r.streamUrl ? 'online' : 'offline', streamUrl: r.streamUrl
-      }))
-    })
+    return res.data.records
+    // return wrapResult({
+    //   total: res.data.total, page: res.data.current,
+    //   list: res.data.records.map(r => ({
+    //     id: r.deviceNo, name: r.subjectName + (r.room ? `(${r.room})` : ''),
+    //     ai: false, status: r.streamUrl ? 'online' : 'offline', streamUrl: r.streamUrl
+    //   }))
+    // })
   }
   throw new Error(res.message || '接口异常')
 }
@@ -219,6 +220,13 @@ export async function getMqttConfig() {
   throw new Error(res.message || '接口异常')
 }
 
+// ======================== 验证码接口 ========================
+export async function getCaptcha(id = 0) {
+  const res = await request.get('/auth/captcha', { params: { id } })
+  if (res.code === 200 && res.data) return res.data
+  throw new Error(res.message || '获取验证码失败')
+}
+
 // ======================== 登录接口 ========================
 export async function loginApi(params) {
   const res = await request.post('/auth/bigLogin', params)

src/components/LabStats/EnvSensing.vue

@@ -6,18 +6,13 @@
     <div class="panel-content">
       <div class="sensor-scroll-wrap" ref="scrollWrap" @mouseenter="paused=true" @mouseleave="paused=false">
         <div ref="scrollInner" class="sensor-scroll-inner">
-          <div class="sensor-item" v-for="(item, idx) in displayList" :key="idx">
+          <div class="sensor-item"
+          v-for="(item, idx) in displayList" :key="idx">
             <div class="lab-name">{{ item.lab }}<span class="lab-unit">{{ item.dept }}</span></div>
             <div class="sensor-values">
-              <span class="sensor-val" v-for="(minItem,minIndex) in item.sensorList" :key="minIndex">{{ minItem.deviceName }}:{{ minItem.deviceValue?minItem.deviceValue:'-' }}{{ minItem.unit }}</span>
-              <!--<span class="sensor-val">湿度:{{ item.humidity }}%</span>-->
-              <!--<span class="sensor-val">TVOC {{ item.tvoc }}mg/m³</span>-->
-              <!--<span class="sensor-val" :class="{ alarm: item.co2.warn }">-->
-                <!--<span v-if="item.co2.warn" class="alarm-icon">⚠</span>CO₂ {{ item.co2.value }}ppm-->
-              <!--</span>-->
-              <!--<span class="sensor-val" :class="{ alarm: item.o2.warn }">-->
-                <!--<span v-if="item.o2.warn" class="alarm-icon">⚠</span>O₂ {{ item.o2.value }}%-->
-              <!--</span>-->
+              <span class="sensor-val" 
+               :class="minItem.hasException?'redClass':''"
+              v-for="(minItem,minIndex) in item.sensorList" :key="minIndex">{{ minItem.deviceName }} : {{ minItem.deviceValue?minItem.deviceValue:'-' }}{{ minItem.unit }}</span>
             </div>
           </div>
         </div>
@@ -110,6 +105,11 @@ export default {
   min-height: 0;
 }
 
+.redClass{
+  background: rgba(255,0,0,0.2)!important ;
+  border: 1px solid rgba(255,0,0,0.7)!important;
+  color:red!important;
+}
 .sensor-item {
   padding: 10px 12px;
   margin-bottom: 6px;

src/views/Login.vue

@@ -37,7 +37,14 @@
                 placeholder="请输入验证码"
                 clearable
               />
-              <div class="captcha-img" @click="refreshCaptcha">{{ captchaText }}</div>
+              <img
+                v-if="captchaImage"
+                :src="captchaImage"
+                class="captcha-img"
+                title="点击刷新验证码"
+                @click="refreshCaptcha"
+              />
+              <div v-else class="captcha-img captcha-loading" @click="refreshCaptcha">加载中...</div>
             </div>
           </el-form-item>
           <el-form-item>
@@ -58,7 +65,7 @@
 
 <script>
 import md5 from 'js-md5'
-import { loginApi } from '@/api'
+import { loginApi, getCaptcha } from '@/api'
 
 export default {
   name: 'Login',
@@ -75,36 +82,50 @@ export default {
         captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
       },
       loading: false,
-      captchaText: '0000'
+      captchaImage: '',
+      captchaUuid: '',
+      needCaptcha: true
     }
   },
+  mounted() {
+    this.refreshCaptcha()
+  },
   methods: {
-    refreshCaptcha() {
-      // 模拟验证码，固定为0000
-      this.captchaText = '0000'
+    async refreshCaptcha() {
+      this.captchaImage = ''
+      try {
+        const data = await getCaptcha()
+        this.needCaptcha = data.captcha
+        if (data.captcha) {
+          this.captchaImage = 'data:image/jpeg;base64,' + data.image
+          this.captchaUuid = data.uuid
+        }
+      } catch (e) {
+        this.$message.error('获取验证码失败')
+      }
     },
     handleLogin() {
       this.$refs.loginForm.validate(async (valid) => {
         if (!valid) return
 
-        // 验证码校验
-        if (this.form.captcha !== '0000') {
-          this.$message.error('验证码错误')
-          return
-        }
-
         this.loading = true
         try {
           const params = {
             account: this.form.username,
             password: md5(this.form.password)
           }
+          if (this.needCaptcha) {
+            params.code = this.form.captcha
+            params.uuid = this.captchaUuid
+          }
           const res = await loginApi(params)
           this.$store.dispatch('login', { token: res.data.token, userInfo: {} })
           this.$message.success('登录成功')
           this.$router.push('/lab-status')
         } catch (err) {
-          this.$message.error('登录失败，请重试')
+          this.$message.error(err.message || '登录失败，请重试')
+          this.refreshCaptcha()
+          this.form.captcha = ''
         } finally {
           this.loading = false
         }
@@ -208,21 +229,26 @@ export default {
   .captcha-img {
     width: 120px;
     height: 44px;
-    line-height: 44px;
-    text-align: center;
-    background: rgba(30, 144, 255, 0.15);
     border: 1px solid rgba(30, 144, 255, 0.3);
     border-radius: 4px;
-    color: $accent-cyan;
-    font-size: 20px;
-    letter-spacing: 8px;
     cursor: pointer;
     user-select: none;
+    object-fit: cover;
+    display: block;
+    flex-shrink: 0;
 
     &:hover {
-      background: rgba(30, 144, 255, 0.25);
+      border-color: rgba(30, 144, 255, 0.6);
     }
   }
+
+  .captcha-loading {
+    line-height: 44px;
+    text-align: center;
+    background: rgba(30, 144, 255, 0.15);
+    color: $text-secondary;
+    font-size: 13px;
+  }
 }
 
 .login-btn {