-
MAC: {{ ble.mac }}
-
RSSI: {{ ble.rssi }} dBm
+
+{{ badge.bluetooth.length - 4 }} 更多...
+
+
+
-
-
{{ counter.id }}
-
{{ formatTime(counter.lastUpdate) }}
+
+
+
{{ counter.id }}
+
+ RSSI:
+ {{ counter.RSSI }} dBm
+
+
+
+ {{ formatTime(counter.lastUpdate) }}
+ v{{ counter.version }}
+
-
+
+
-
{{ counter.inCount }}
-
In
+
{{ counter.inCount }}
+
今日进入
-
{{ counter.outCount }}
-
Out
+
{{ counter.outCount }}
+
今日离开
-
{{ counter.inCount - counter.outCount }}
-
Stay
+
{{ counter.inCount - counter.outCount }}
+
当前滞留
+
+
+
+ {{ formatCounterTime(counter.latestData.time) }}
+
+ Rx:{{counter.latestData.rxBat}}% / Tx:{{counter.latestData.txBat}}%
+
+
@@ -416,7 +454,8 @@
// 实时数据存储
badges: {}, // Map: id -> badge data
counters: {}, // Map: id -> counter data
- logs: []
+ logs: [],
+ ttsInputs: {} // Map: badgeId -> input string
}
},
mounted() {
@@ -473,10 +512,42 @@
}
}
- // 2. 处理计数器数据 (识别 type=counter)
- else if (data.type === 'counter' && data.id) {
- this.counters[data.id] = {
- ...data,
+ // 2. 处理计数器数据 (识别 type=counter OR 含有 uuid 字段的复杂JSON)
+ else if ((data.type === 'counter' && data.id) || (data.uuid && data.data && Array.isArray(data.data))) {
+ // 统一 ID 字段
+ const id = data.id || data.uuid;
+
+ // 尝试解析复杂 JSON 结构
+ let totalIn = data.inCount || 0;
+ let totalOut = data.outCount || 0;
+ let latestData = null;
+
+ if (data.data && Array.isArray(data.data)) {
+ // 累加 data 数组中的流量，或者取最新一条（取决于业务逻辑，这里假设是累积值或者我们显示最新状态）
+ // 通常计数器上报的是当次时间段内的增量或者当前的累计值。
+ // 这里假设我们需要展示最新的累积值，或者自行累加。
+ // 简化处理：显示最新一条数据的 in/out，或者如果后端没做累加，前端简单累加
+ // 由于示例数据看起来像是一段时间的记录，我们取最后一条作为"最新状态"
+
+ // 找出时间最近的一条
+ const sortedData = [...data.data].sort((a, b) => b.time.localeCompare(a.time));
+ if (sortedData.length > 0) {
+ latestData = sortedData[0];
+ // 如果 JSON 里的 in/out 是累计值，直接使用；如果是增量，需要累加。
+ // 根据示例 "in": 22，看起来像累计值。
+ totalIn = latestData.in || 0; // Fix: use || 0 to avoid undefined
+ totalOut = latestData.out || 0; // Fix: use || 0 to avoid undefined
+ }
+ }
+
+ this.counters[id] = {
+ id: id,
+ // 优先使用外层字段，没有则使用解析出的字段
+ inCount: totalIn,
+ outCount: totalOut,
+ RSSI: data.RSSI,
+ version: data.version,
+ latestData: latestData,
lastUpdate: now
};
}
@@ -615,7 +686,11 @@
// 辅助函数
formatTime(date) {
if (!date) return '';
- return new Date(date).toLocaleTimeString();
+ try {
+ return new Date(date).toLocaleTimeString();
+ } catch (e) {
+ return '';
+ }
},
getBatteryColor(level) {
if (level > 60) return 'text-success';
@@ -640,6 +715,75 @@
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
+ },
+ getRssiColorClass(rssi) {
+ if (!rssi) return 'text-muted';
+ if (rssi >= -60) return 'text-success';
+ if (rssi >= -75) return 'text-warning';
+ if (rssi >= -85) return 'text-warning'; // Orange-ish
+ return 'text-danger';
+ },
+ formatCounterTime(str) {
+ // 20250501093000 -> 09:30:00
+ if (!str || str.length < 14) return str;
+ return str.substring(8, 10) + ':' + str.substring(10, 12) + ':' + str.substring(12, 14);
+ },
+ // 发送 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')