diff --git a/src/assets/images/icon_alarm.png b/src/assets/images/icon_alarm.png new file mode 100644 index 0000000..aad5349 Binary files /dev/null and b/src/assets/images/icon_alarm.png differ diff --git a/src/assets/images/icon_boundary.png b/src/assets/images/icon_boundary.png new file mode 100644 index 0000000..6446b2c Binary files /dev/null and b/src/assets/images/icon_boundary.png differ diff --git a/src/assets/images/icon_warning.png b/src/assets/images/icon_warning.png new file mode 100644 index 0000000..cedc829 Binary files /dev/null and b/src/assets/images/icon_warning.png differ diff --git a/src/assets/images/select_alarm.png b/src/assets/images/select_alarm.png new file mode 100644 index 0000000..d219857 Binary files /dev/null and b/src/assets/images/select_alarm.png differ diff --git a/src/assets/images/select_boundary.png b/src/assets/images/select_boundary.png new file mode 100644 index 0000000..4d04789 Binary files /dev/null and b/src/assets/images/select_boundary.png differ diff --git a/src/assets/images/select_speed.png b/src/assets/images/select_speed.png new file mode 100644 index 0000000..4e5442e Binary files /dev/null and b/src/assets/images/select_speed.png differ diff --git a/src/assets/images/select_warning.png b/src/assets/images/select_warning.png new file mode 100644 index 0000000..388c119 Binary files /dev/null and b/src/assets/images/select_warning.png differ diff --git a/src/assets/images/unselect_alarm.png b/src/assets/images/unselect_alarm.png new file mode 100644 index 0000000..33a0e18 Binary files /dev/null and b/src/assets/images/unselect_alarm.png differ diff --git a/src/assets/images/unselect_boundary.png b/src/assets/images/unselect_boundary.png new file mode 100644 index 0000000..5472c6d Binary files /dev/null and b/src/assets/images/unselect_boundary.png differ diff --git a/src/assets/images/unselect_speed.png b/src/assets/images/unselect_speed.png new file mode 100644 index 0000000..e94227d Binary files /dev/null and b/src/assets/images/unselect_speed.png differ diff --git a/src/assets/images/unselect_warning.png b/src/assets/images/unselect_warning.png new file mode 100644 index 0000000..23b9e23 Binary files /dev/null and b/src/assets/images/unselect_warning.png differ diff --git a/src/components/map/controls/VehicleLabelSystem.vue b/src/components/map/controls/VehicleLabelSystem.vue index 1f55815..790f08b 100644 --- a/src/components/map/controls/VehicleLabelSystem.vue +++ b/src/components/map/controls/VehicleLabelSystem.vue @@ -11,7 +11,8 @@ const props = defineProps({ map: Object, vehicles: Object }); - +// 导入图片 +const select_icon = '../../../assets/images/select_icon.png'; // 存储标签覆盖物 const vehicleLabels = ref({}); // 添加标签更新时间记录 @@ -129,17 +130,13 @@ function createLabelContent(vehicleId, speed, alertInfo = {}) {
- - - -
@@ -155,7 +152,7 @@ function createLabelContent(vehicleId, speed, alertInfo = {}) { activeTabContent = `
- + Select 冲突预警
${warningMessage}
@@ -169,7 +166,10 @@ function createLabelContent(vehicleId, speed, alertInfo = {}) { const alarmMessage = alertInfo?.description || '与其他车辆存在冲突风险!'; activeTabContent += `
-
冲突告警
+
+ Select + 冲突告警 +
${alarmMessage}
`; @@ -182,7 +182,10 @@ function createLabelContent(vehicleId, speed, alertInfo = {}) { const actualValue = alertInfo?.actualValue || vehicle.actualValue || speed; activeTabContent += `
-
超速告警
+
+ Select + 超速告警 +
规定速度: ${limitValue}km/h
当前速度: ${actualValue.toFixed(1)}km/h
@@ -197,7 +200,10 @@ function createLabelContent(vehicleId, speed, alertInfo = {}) { const boundaryMessage = alertInfo?.description || '车辆已进入禁行区域!'; activeTabContent += `
-
越界告警
+
+ Select + 越界告警 +
${boundaryMessage}
`; @@ -345,7 +351,7 @@ defineExpose({ } .label-container { - background: linear-gradient(to top,#93B0DB,#497CC9); + background: linear-gradient(to top,#616D80,#2D405C); border-radius: 6px; color: #fff; padding: 10px; @@ -377,11 +383,11 @@ defineExpose({ .vehicle-id { font-weight: bold; - font-size: 15px; + font-size: 16px; } .vehicle-speed { - font-size: 10px; + font-size: 12px; color: rgba(255, 255, 255, 0.65); font-weight: bold; } @@ -391,12 +397,12 @@ defineExpose({ display: flex; gap: 5px; margin-bottom: 8px; + justify-content: space-around; + align-items: center; } .tab-button { - background-color: rgba(80, 80, 80, 0.5); border: none; - border-radius: 4px; width: 24px; height: 24px; display: flex; @@ -404,9 +410,10 @@ defineExpose({ justify-content: center; cursor: pointer; padding: 0; + background: transparent; } -.tab-button.active { +/* .tab-button.active { background-color: rgba(52, 152, 219, 0.7); } @@ -423,33 +430,50 @@ defineExpose({ .tab-button.disabled .tab-icon { opacity: 0.5; filter: grayscale(100%); -} +} */ /* 标签图标样式 */ -.tab-icon { +/* .tab-icon { width: 13px; height: 13px; background-size: contain; background-position: center; background-repeat: no-repeat; -} +} */ .warning-icon { - background-image: url('data:image/svg+xml;utf8,'); + background-image: url(../../../assets/images/select_warning.png); + background-size: cover; +} +.unwarning-icon { + background-image: url(../../../assets/images/unselect_warning.png); + background-size: 100% 100%; } .alarm-icon { - background-image: url('data:image/svg+xml;utf8,'); + background-image: url(../../../assets/images/select_alarm.png); + background-size: cover; +} +.unalarm-icon { + background-image: url(../../../assets/images/unselect_alarm.png); + background-size: 100% 100%; } - .speed-icon { - background-image: url('data:image/svg+xml;utf8,'); + background-image: url(../../../assets/images/select_speed.png); + background-size: cover; +} +.unspeed-icon { + background-image: url(../../../assets/images/unselect_speed.png); + background-size: 100% 100%; } - .boundary-icon { - background-image: url('data:image/svg+xml;utf8,'); + background-image: url(../../../assets/images/select_boundary.png); + background-size: cover; +} +.unboundary-icon { + background-image: url(../../../assets/images/unselect_boundary.png); + background-size: 100% 100%; } - .tab-pane { display: none; } @@ -460,23 +484,23 @@ defineExpose({ /* 告警消息样式 */ .alert-message { - font-size: 10px; + font-size: 12px; font-weight: Medium; line-height: 1.4; padding: 5px; border-radius: 2px; - background-color: rgba(82, 122, 181, 1); + background-color: rgba(138, 149, 166, 0.51); } /* 具体告警提示 */ .alert{ - font-size: 10px; + font-size: 14px; font-weight: bold; margin: 5px; } /* 超速信息样式 */ .speed-info { - font-size: 8px; + font-size: 12px; line-height: 1.4; } diff --git a/src/views/platform/index.vue b/src/views/platform/index.vue index 1fe249b..ec0f8d3 100644 --- a/src/views/platform/index.vue +++ b/src/views/platform/index.vue @@ -301,11 +301,11 @@ watch(() => mapRef.value?.map, (newMap) => { /* 告警统计卡片 */ .alarm-stats-card { position: absolute; - top: 182px; + top: 177px; left: 28px; width: 246px; - height: 142px; - background: linear-gradient(to top,#94B0DB,#4F81CC,#3D629A); + height: 147px; + // background: linear-gradient(to top,#94B0DB,#4F81CC,#3D629A); border-radius: 9px; box-shadow: 0 10px 15px rgba(2, 2, 2, 0.25); color: #fff; @@ -319,28 +319,30 @@ watch(() => mapRef.value?.map, (newMap) => { display: flex; justify-content: space-between; align-items: center; - padding: 6px 10px; /* 减小内边距 */ - // background-color: rgba(0, 0, 0, 0.2); + padding: 4px 10px; /* 减小内边距 */ + background-color: #343744; border-bottom: 0.5px solid rgba(222, 213, 213, 0.53); } .stats-title { - font-size: 15px; + font-size: 16px; font-weight: bold; color: rgba(255, 255, 255, 1); } .stats-time { - font-size: 10px; + font-size: 12px; color: rgba(255, 255, 255, 0.65); font-family: 'PingFang SC', monospace; } .stats-content { + width: 246px; + height: 116px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; - // background-color: rgba(255, 255, 255, 0.05); + background-color: #424851; padding: 1px; } @@ -351,6 +353,8 @@ watch(() => mapRef.value?.map, (newMap) => { display: flex; flex-direction: row; /* 改为水平布局 */ align-items: center; + width: 123px; + height: 58px; // background-color: rgba(41, 44, 56, 0.95); transition: all 0.3s ease; @@ -384,23 +388,25 @@ watch(() => mapRef.value?.map, (newMap) => { .stats-text { display: flex; flex-direction: column; - width: 40px; + width: 56px; height: 37px; + justify-content: center; } .stats-count { - font-size: 15px; + font-size: 16px; font-weight: bold; - width: 18px; + width: 20px; height: 20px; color: rgba(255, 255, 255, 1); } .stats-label { - font-size: 10px; + font-size: 14px; + font-weight: bold; color: rgba(255, 255, 255, 1); margin-top: 2px; - width: 40px; + width: 56px; height: 20px; }