XW-AIOT/iot-test-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 页面调整
All checks were successful
iot-test-platform CI/CD / build-and-deploy (push) Successful in 14s
Details

Browse Source
This commit is contained in:
lzh
2025-12-15 15:43:47 +08:00
parent 1b2c50683a
commit 492cca36ed
1 changed files with 82 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/main/resources/static/index.html
View File

@@ -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">
<span>MAC: {{ ble.mac }}</span>
<span>RSSI: {{ ble.rssi }} dBm</span>
<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 class="font-monospace" style="font-size: 0.7rem;">{{ ble.mac }}</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')