fix: 页面调整

src/main/resources/static/index.html

@@ -288,15 +288,35 @@
                                                     
                                                     <!-- 详细蓝牙列表 (折叠展示) -->
                                                     <div v-if="badge.bluetooth && badge.bluetooth.length > 0" class="mt-2 bg-light rounded p-2" style="font-size: 0.75rem;">
-                                                        <div v-for="(ble, idx) in badge.bluetooth.slice(0, 4)" :key="idx" class="d-flex justify-content-between text-muted">
+                                                        <div v-for="(ble, idx) in badge.bluetooth.slice(0, 4)" :key="idx" class="d-flex justify-content-between text-muted align-items-center mb-1">
-                                                            <span>MAC: {{ ble.mac }}</span>
+                                                            <span class="font-monospace" style="font-size: 0.7rem;">{{ ble.mac }}</span>
-                                                            <span>RSSI: {{ ble.rssi }} dBm</span>
+                                                            <div class="d-flex align-items-center" :title="ble.rssi + ' dBm'">
+                                                                <div class="progress me-1" style="width: 30px; height: 4px; background-color: #e9ecef;">
+                                                                    <div class="progress-bar" role="progressbar" 
+                                                                         :style="{ width: getRssiPercentage(ble.rssi) + '%', backgroundColor: getRssiColor(ble.rssi) }">
+                                                                    </div>
+                                                                </div>
+                                                                <span style="width: 25px; text-align: right;">{{ ble.rssi }}</span>
+                                                            </div>
                                                         </div>
                                                         <div v-if="badge.bluetooth.length > 4" class="text-center text-primary" style="font-size: 0.7rem;">
                                                             +{{ badge.bluetooth.length - 4 }} 更多...
                                                         </div>
                                                     </div>
 
+                                                    <!-- 语音播报下发 -->
+                                                    <div class="mt-2 pt-2 border-top">
+                                                        <div class="input-group input-group-sm">
+                                                            <input type="text" class="form-control form-control-sm" 
+                                                                   v-model="ttsInputs[badge.id]" 
+                                                                   placeholder="输入语音播报内容..." 
+                                                                   @keyup.enter="sendTTS(badge.id)">
+                                                            <button class="btn btn-outline-primary" type="button" @click="sendTTS(badge.id)">
+                                                                <i class="fas fa-bullhorn"></i>
+                                                            </button>
+                                                        </div>
+                                                    </div>
+
                                                     <!-- 按键事件提示 -->
                                                     <div v-if="badge.lastButtonEvent" class="mt-2 alert alert-warning p-1 mb-0 text-center" style="font-size: 0.75rem;">
                                                         <i class="fas fa-hand-pointer me-1"></i>
@@ -416,7 +436,8 @@
                     // 实时数据存储
                     badges: {}, // Map: id -> badge data
                     counters: {}, // Map: id -> counter data
-                    logs: []
+                    logs: [],
+                    ttsInputs: {} // Map: badgeId -> input string
                 }
             },
             mounted() {
@@ -640,6 +661,63 @@
                         action = `长按 ${keyNum}号键`;
                     }
                     return action;
+                },
+                // RSSI 可视化
+                getRssiPercentage(rssi) {
+                    // 假设 -100dBm 为 0%，-50dBm 为 100%
+                    const min = -100;
+                    const max = -50;
+                    if (rssi >= max) return 100;
+                    if (rssi <= min) return 0;
+                    return ((rssi - min) / (max - min)) * 100;
+                },
+                getRssiColor(rssi) {
+                    if (rssi >= -60) return '#28a745'; // Green
+                    if (rssi >= -75) return '#ffc107'; // Yellow
+                    if (rssi >= -85) return '#fd7e14'; // Orange
+                    return '#dc3545'; // Red
+                },
+                // 发送 TTS
+                async sendTTS(phone) {
+                    const content = this.ttsInputs[phone];
+                    if (!content || !content.trim()) {
+                        alert('请输入播报内容');
+                        return;
+                    }
+                    
+                    try {
+                        const formData = new FormData();
+                        formData.append('phone', phone);
+                        formData.append('content', content);
+                        // Flag 9 = 0x08 (TTS) | 0x01 (紧急/指令) -> 混合模式，确保立刻播报
+                        formData.append('flag', 9); 
+                        
+                        const res = await fetch('/api/v1/device/command/text', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        const result = await res.json();
+                        if (result.code === 200) {
+                            // 清空输入框
+                            this.ttsInputs[phone] = '';
+                            // 记录日志到界面以便反馈
+                            this.addLog({ source: 'SYSTEM', message: `向 ${phone} 下发语音: ${content}` });
+                        } else {
+                            alert('下发失败: ' + result.message);
+                        }
+                    } catch (e) {
+                        alert('网络异常: ' + e.message);
+                    }
+                },
+                // 内部日志辅助
+                addLog(data) {
+                     const now = new Date().toLocaleTimeString();
+                     this.logs.unshift({
+                        time: now,
+                        source: data.source,
+                        data: data.message || JSON.stringify(data)
+                     });
+                     if (this.logs.length > 50) this.logs.pop();
                 }
             }
         }).mount('#app')