ソースを参照

feat: RSSI 信号质量按 好/中/差/极差 分级着色显示

- admin-web 远程控制弹窗 RSSI 值旁显示等级标签并分级着色(绿/黄/橙/红)

- admin-h5 设备详情页 RSSI 显示为 数值(等级) 并按级着色
skyline 3 週間 前
親
コミット
f0d46e553a

+ 22 - 8
admin-h5/src/pages/device/detail.vue

@@ -199,17 +199,27 @@ const formatDuration = (seconds) => {
 }
 
 // ===== 信号值展示 =====
-const rssiDisplay = computed(() => {
-  const rssi = hardwareInfo.value?.network?.rssi
-  return rssi != null ? `${rssi}` : '--'
-})
+// ASU: 0-31,99 表示未知/无信号;好>24,中14~24,差9~14,极差≤9
+const rssiLevelMap = { good: '好', mid: '中', bad: '差', 'very-bad': '极差' }
+
+const getRssiLevel = (rssi) => {
+  if (rssi == null || rssi >= 99) return ''
+  if (rssi > 24) return 'good'
+  if (rssi >= 14) return 'mid'
+  if (rssi >= 9) return 'bad'
+  return 'very-bad'
+}
 
 const rssiClass = computed(() => {
+  const level = getRssiLevel(hardwareInfo.value?.network?.rssi)
+  return level ? `signal-${level}` : ''
+})
+
+const rssiDisplay = computed(() => {
   const rssi = hardwareInfo.value?.network?.rssi
-  if (rssi == null) return ''
-  if (rssi >= 20) return 'signal-good'
-  if (rssi >= 10) return 'signal-mid'
-  return 'signal-bad'
+  if (rssi == null || rssi >= 99) return '--'
+  const label = rssiLevelMap[getRssiLevel(rssi)]
+  return label ? `${rssi} (${label})` : `${rssi}`
 })
 
 const loadHardwareInfo = async () => {
@@ -432,6 +442,10 @@ onMounted(async () => {
 }
 
 .signal-bad {
+  color: #FF9800;
+}
+
+.signal-very-bad {
   color: #F44336;
 }
 

+ 35 - 7
admin-web/src/views/admin/station/device/remote.vue

@@ -226,7 +226,17 @@
 
   .signal-good { color: #67c23a; }
   .signal-mid { color: #e6a23c; }
-  .signal-bad { color: #f56c6c; }
+  .signal-bad { color: #ff9800; }
+  .signal-very-bad { color: #f56c6c; }
+
+  .signal-level-tag {
+    margin-left: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 1px 6px;
+    border-radius: 4px;
+    border: 1px solid currentColor;
+  }
 }
 
 </style>
@@ -321,7 +331,7 @@
             </div>
             <div class="signal-item">
               <span class="signal-label">信号质量(RSSI)</span>
-              <span class="signal-value" :class="rssiLevel">{{ state.hardwareInfo.network?.rssi ?? '--' }}</span>
+              <span class="signal-value" :class="rssiLevel">{{ rssiDisplay }}<span v-if="rssiLabel" class="signal-level-tag">{{ rssiLabel }}</span></span>
             </div>
             <div class="signal-item">
               <span class="signal-label">误码率(BER)</span>
@@ -532,13 +542,31 @@ const temperatureDisplay = computed(() => {
   return state.temperatureChip != null ? `${state.temperatureChip}°C` : '--';
 });
 
-// 信号质量等级(rssi 越大信号越好)
+// 信号质量等级(ASU: 0-31,99 表示未知/无信号;好>24,中14~24,差9~14,极差≤9)
+const rssiLevelMap: Record<string, string> = {good: '好', mid: '中', bad: '差', 'very-bad': '极差'};
+
+const getRssiLevel = (rssi: number | null | undefined) => {
+  if (rssi == null || rssi >= 99) return '';
+  if (rssi > 24) return 'good';
+  if (rssi >= 14) return 'mid';
+  if (rssi >= 9) return 'bad';
+  return 'very-bad';
+};
+
 const rssiLevel = computed(() => {
+  const level = getRssiLevel(state.hardwareInfo?.network?.rssi);
+  return level ? `signal-${level}` : '';
+});
+
+const rssiDisplay = computed(() => {
   const rssi = state.hardwareInfo?.network?.rssi;
-  if (rssi == null) return '';
-  if (rssi >= 20) return 'signal-good';
-  if (rssi >= 10) return 'signal-mid';
-  return 'signal-bad';
+  if (rssi == null || rssi >= 99) return '--';
+  return `${rssi}`;
+});
+
+const rssiLabel = computed(() => {
+  const level = getRssiLevel(state.hardwareInfo?.network?.rssi);
+  return level ? rssiLevelMap[level] : '';
 });
 
 const open = (row: any) => {