From 038d2df078483acbdfcf211f139b0bec5a62ecce Mon Sep 17 00:00:00 2001 From: brunoGao Date: Tue, 26 Aug 2025 21:52:19 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=91=8A=E8=AD=A6=E4=BF=A1=E6=81=AFUI?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=B8=8E=E4=B8=AD=E6=96=87=E5=8C=96=20v1.3.6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修复健康数据弹窗白色文字不可见问题 - 优化健康数据弹窗样式，采用现代化设计 - 告警类型、状态、严重级别中英文映射 - 添加彩色标签系统，提升视觉识别度 - 增强用户体验与界面美观度 --- ljwx-admin/src/views/alert/info/index.vue | 164 ++++++++++++++++++---- 1 file changed, 134 insertions(+), 30 deletions(-) diff --git a/ljwx-admin/src/views/alert/info/index.vue b/ljwx-admin/src/views/alert/info/index.vue index 7449d3e..a47b2d5 100644 --- a/ljwx-admin/src/views/alert/info/index.vue +++ b/ljwx-admin/src/views/alert/info/index.vue @@ -27,6 +27,99 @@ const { hasAuth } = useAuth(); const { dictTag } = useDict(); +// 告警类型中英文映射 +const alertTypeMap = { + 'Heartrate Low': '心率过低', + 'Heartrate High': '心率过高', + 'Blood Pressure Low': '血压过低', + 'Blood Pressure High': '血压过高', + 'Temperature Low': '体温过低', + 'Temperature High': '体温过高', + 'Blood Oxygen Low': '血氧过低', + 'Blood Oxygen High': '血氧过高', + 'Stress High': '压力过高', + 'Step Low': '步数不足', + 'Location Alert': '位置告警', + 'Device Offline': '设备离线', + 'Data Abnormal': '数据异常' +}; + +// 告警状态中英文映射 +const alertStatusMap = { + 'pending': '待处理', + 'processing': '处理中', + 'responded': '已处理', + 'resolved': '已解决', + 'closed': '已关闭' +}; + +// 严重级别中英文映射 +const severityLevelMap = { + 'low': '低', + 'medium': '中', + 'high': '高', + 'critical': '紧急' +}; + +// 获取告警类型标签颜色 +const getAlertTypeColor = (type: string) => { + const colorMap: Record = { + 'Heartrate Low': '#ff4d4f', + 'Heartrate High': '#ff7875', + 'Blood Pressure Low': '#faad14', + 'Blood Pressure High': '#fa8c16', + 'Temperature Low': '#1890ff', + 'Temperature High': '#ff4d4f', + 'Blood Oxygen Low': '#722ed1', + 'Blood Oxygen High': '#9254de', + 'Stress High': '#f5222d', + 'Step Low': '#52c41a', + 'Location Alert': '#13c2c2', + 'Device Offline': '#666', + 'Data Abnormal': '#fa541c' + }; + return colorMap[type] || '#666'; +}; + +// 增强的字典标签函数，支持告警类型、状态、严重级别中文映射 +const enhancedDictTag = (code: string, value: string | null) => { + if (!value) return null; + + if (code === 'alert_type' && alertTypeMap[value as keyof typeof alertTypeMap]) { + const chineseValue = alertTypeMap[value as keyof typeof alertTypeMap]; + const color = getAlertTypeColor(value); + return {chineseValue}; + } + + if (code === 'alert_status' && alertStatusMap[value as keyof typeof alertStatusMap]) { + const chineseValue = alertStatusMap[value as keyof typeof alertStatusMap]; + const statusColors: Record = { + 'pending': '#faad14', + 'processing': '#1890ff', + 'responded': '#52c41a', + 'resolved': '#52c41a', + 'closed': '#666' + }; + const color = statusColors[value] || '#666'; + return {chineseValue}; + } + + if (code === 'severity_level' && severityLevelMap[value as keyof typeof severityLevelMap]) { + const chineseValue = severityLevelMap[value as keyof typeof severityLevelMap]; + const levelColors: Record = { + 'low': '#52c41a', + 'medium': '#faad14', + 'high': '#fa8c16', + 'critical': '#ff4d4f' + }; + const color = levelColors[value] || '#666'; + return {chineseValue}; + } + + // 否则使用原来的字典标签 + return dictTag(code, value); +}; + const editingData: Ref = ref(null); const customerId = authStore.userInfo?.customerId; @@ -67,7 +160,7 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi title: $t('page.health.alert.info.alertType'), align: 'center', minWidth: 100, - render: row => dictTag('alert_type', row.alertType) + render: row => enhancedDictTag('alert_type', row.alertType) }, { @@ -75,7 +168,7 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi title: $t('page.health.alert.info.alertStatus'), align: 'center', minWidth: 100, - render: row => dictTag('alert_status', row.alertStatus) + render: row => enhancedDictTag('alert_status', row.alertStatus) }, { key: 'alertDesc' as any as any, @@ -123,45 +216,56 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi }; const renderHealthInfo = () => { - if (fetchLoading.value) return
⏳ 数据加载中...
; - if (fetchError.value) return
❌ {fetchError.value}
; - if (!healthInfo.value) return
📋 暂无数据
; + if (fetchLoading.value) return
⏳ 数据加载中...
; + if (fetchError.value) return
❌ {fetchError.value}
; + if (!healthInfo.value) return
📋 暂无数据
; - const d = healthInfo.value; // #简化变量名 + const d = healthInfo.value; return ( -
-
- 💓 心率: - {formatValue(d.heartRate, ' bpm')} +
+
+ 🏥 健康数据详情
-
- 🩸 血压: - {formatValue(d.pressureHigh)}/{formatValue(d.pressureLow)} mmHg + +
+ 💓 心率: + {formatValue(d.heartRate, ' bpm')}
-
- 🌡️ 体温: - {formatValue(d.temperature, '°C')} + +
+ 🩸 血压: + {formatValue(d.pressureHigh)}/{formatValue(d.pressureLow)} mmHg
-
- 🫁 血氧: - {formatValue(d.bloodOxygen, '%')} + +
+ 🌡️ 体温: + {formatValue(d.temperature, '°C')}
-
- 😰 压力: - {formatValue(d.stress)} + +
+ 🫁 血氧: + {formatValue(d.bloodOxygen, '%')}
-
- 👟 步数: - {formatValue(d.step)} + +
+ 😰 压力: + {formatValue(d.stress)}
-
-
📍 位置信息:
-
+ +
+ 👟 步数: + {formatValue(d.step)} +
+ +
+
📍 位置信息:
+
{d.latitude && d.longitude ? `${d.latitude.toFixed(6)}°, ${d.longitude.toFixed(6)}°` : '无位置数据'} {d.altitude > 0 ? ` (海拔${d.altitude}m)` : ''}
-
+ +
📅 {d.timestamp ? new Date(d.timestamp).toLocaleString('zh-CN') : '时间未知'}
@@ -187,7 +291,7 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi title: $t('page.health.alert.info.severityLevel'), align: 'center', minWidth: 100, - render: row => dictTag('severity_level', row.severityLevel) + render: row => enhancedDictTag('severity_level', row.severityLevel) }, { key: 'alertTimestamp' as any as any,