diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/MapControls/二级标题栏bg-1.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/MapControls/二级标题栏bg-1.png index ce7705f..2452b55 100644 Binary files a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/MapControls/二级标题栏bg-1.png and b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/MapControls/二级标题栏bg-1.png differ diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/MapControls/二级标题栏bg-2.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/MapControls/二级标题栏bg-2.png index b652506..5afc28b 100644 Binary files a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/MapControls/二级标题栏bg-2.png and b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/MapControls/二级标题栏bg-2.png differ diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/Tooltip/弹窗bg.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/Tooltip/弹窗bg.png new file mode 100644 index 0000000..428db6e Binary files /dev/null and b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/Tooltip/弹窗bg.png differ diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/danger.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/danger.png new file mode 100644 index 0000000..a6c023e Binary files /dev/null and b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/danger.png differ diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/加载gif.gif b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/加载gif.gif new file mode 100644 index 0000000..b46717c Binary files /dev/null and b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/加载gif.gif differ diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/完成里程.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/完成里程.png index 2bb1890..c20a47d 100644 Binary files a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/完成里程.png and b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/完成里程.png differ diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/标题栏bg1.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/标题栏bg1.png new file mode 100644 index 0000000..2158b43 Binary files /dev/null and b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/标题栏bg1.png differ diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/通用卡片bg.png b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/通用卡片bg.png new file mode 100644 index 0000000..dd8074a Binary files /dev/null and b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/通用卡片bg.png differ diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/index.vue index ed722b7..f37cc63 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/index.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/index.vue @@ -10,7 +10,7 @@ - + @@ -64,6 +64,16 @@ const isLocationOpen = ref(true) const toggleLocation = () => { isLocationOpen.value = !isLocationOpen.value } + +// 定义对外事件 +const emit = defineEmits(['start-dispatch']) + +/** + * 处理力量调度启动事件,向上传递给父组件 + */ +const handleStartDispatch = (payload) => { + emit('start-dispatch', payload) +} diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue index fd2fe50..e921b1a 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue @@ -218,7 +218,7 @@ function onAfterLeave(el) { inset: 0; border-style: solid; border-width: vh(25) vw(30); - border-image-source: url('../../assets/images/面板bg.png'); + border-image-source: url('../../assets/images/通用卡片bg.png'); border-image-slice: 25 30 25 30 fill; border-image-width: vh(25) vw(30); border-image-repeat: stretch; diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/MapTooltip.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/MapTooltip.vue index aa815c8..a0505d5 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/MapTooltip.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/MapTooltip.vue @@ -268,7 +268,7 @@ const handleClose = () => { .map-tooltip__background { position: relative; padding: vh(14) vw(18); - background: url('../../assets/images/Tooltip/tooltipBg.png') no-repeat; + background: url('../../assets/images/Tooltip/弹窗bg.png') no-repeat; background-size: 100% 100%; border-radius: vw(8); box-shadow: 0 vw(8) vw(24) rgba(0, 0, 0, 0.5); diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/PanelHeader.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/PanelHeader.vue index 1f14361..a9c1b87 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/PanelHeader.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/PanelHeader.vue @@ -31,12 +31,12 @@ defineProps({ justify-content: space-between; width: vw(400); height: vh(43); - background-image: url('../../assets/images/SketchPng2800be582615dbc26e07b4d56d3fc22a0517aa84065b4d6502827c05f18ca17d.png'); + background-image: url('../../assets/images/标题栏bg1.png'); background-position: 0 -1px; background-repeat: no-repeat; background-size: vw(400) vh(45); padding: 0 vw(20); - margin-bottom: vh(20); + margin-bottom: vw(10); &__content { display: flex; diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js index 08cb31a..ef51416 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js @@ -6,6 +6,7 @@ import { cesiumDataConfig } from '../config/cesiumData' import soldierIcon from '../assets/images/SketchPngfbec927027ff9e49207749ebaafd229429315341fda199251b6dfb1723ff17fb.png' import deviceIcon from '../assets/images/SketchPng860d54f2a31f5f441fc6a88081224f1e98534bf6d5ca1246e420983bdf690380.png' import emergencyBaseIcon from '../assets/images/应急基地.png' +import emergencyCenterIcon from '../assets/images/应急中心.png' // 默认高度偏移(米)- 与 WuRenJi 保持一致 const DEFAULT_HEIGHT_OFFSET = 100 @@ -625,10 +626,15 @@ export function useMapMarkers() { false ) + // 根据养护站名称选择图标 + const stationIcon = station.stationName === '忠县公路交通应急物资储备中心' + ? emergencyCenterIcon + : emergencyBaseIcon + const entity = viewer.entities.add({ position: result.position, billboard: { - image: emergencyBaseIcon, + image: stationIcon, width: 48, height: 48, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/config/modelCompare.config.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/config/modelCompare.config.js index 2ade4d6..06fd4d3 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/config/modelCompare.config.js +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/config/modelCompare.config.js @@ -42,7 +42,9 @@ export const AFTER_3DTILES_CONFIG = { name: '灾后3D模型', // 3D Tiles 服务 URL - url: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/model/S107/terra_b3dms/tileset.json', + // url: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/model/S107/terra_b3dms/tileset.json', + url: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/model/ylzg/zxyj1119/terra_b3dms/tileset.json', + // 默认可见性(初始化时灾后模型默认显示) visible: true, diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue index 9ad0ada..fe1c06f 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue @@ -26,6 +26,20 @@
+ + + + + + + @@ -36,7 +50,7 @@
- +
+ + +
+ 加载中 +
@@ -107,6 +130,7 @@ import RightPanel from "./components/RightPanel/index.vue"; import PersonnelDetail from "./components/Popups/PersonnelDetail.vue"; import EmergencyCenterDetail from "./components/Popups/EmergencyCenterDetail.vue"; import MapTooltip from "./components/shared/MapTooltip.vue"; +import SceneLabel from "./components/SceneLabel.vue"; import { useDisasterData } from "./composables/useDisasterData"; import { useDualMapCompare } from "./composables/useDualMapCompare"; import { useMapMarkers } from "./composables/useMapMarkers"; @@ -117,6 +141,7 @@ import { request } from "@shared/utils/request"; // 标记点图标 import emergencyCenterIcon from "./assets/images/应急中心.png"; +import dangerIcon from "./assets/images/danger.png"; import soldierIcon from "./assets/images/SketchPngfbec927027ff9e49207749ebaafd229429315341fda199251b6dfb1723ff17fb.png"; import deviceIcon from "./assets/images/SketchPng860d54f2a31f5f441fc6a88081224f1e98534bf6d5ca1246e420983bdf690380.png"; import emergencyBaseIcon from "./assets/images/应急基地.png"; @@ -160,6 +185,9 @@ const { tooltipState: mapTooltip, showTooltip, hideTooltip, updateTooltipPositio // 当前显示 tooltip 的实体(用于相机移动时更新位置) const currentTooltipEntity = ref(null); +// 加载动画状态 +const showLoading = ref(false); + // 3D Tiles加载功能 const { load3DTileset, waitForTilesetReady } = use3DTiles(); @@ -190,7 +218,12 @@ const setupMapClickHandler = (viewer) => { } else if (type === 'device') { showMarkerTooltip(viewer, entity, click.position, deviceIcon); } else if (type === 'emergencyBase' || type === 'station') { - showMarkerTooltip(viewer, entity, click.position, emergencyBaseIcon); + // 对于养护站,根据名称判断使用哪个图标 + const stationName = entity.properties.name?.getValue() || ''; + const icon = stationName === '忠县公路交通应急物资储备中心' + ? emergencyCenterIcon + : emergencyBaseIcon; + showMarkerTooltip(viewer, entity, click.position, icon); } } } else { @@ -274,11 +307,26 @@ const showMarkerTooltip = (viewer, entity, screenPosition, icon) => { { label: '距离', value: properties.distance?.getValue() || '-' } ); } else if (type === 'station') { - title = '养护站'; - fields.push( - { label: '名称', value: properties.name?.getValue() || '-' }, - { label: '距离', value: `${properties.distance?.getValue() || 0}公里` } - ); + const stationName = properties.name?.getValue() || ''; + const distance = properties.distance?.getValue() || 0; + + // 如果是应急中心,显示应急中心信息 + if (stationName === '忠县公路交通应急物资储备中心') { + title = '应急中心'; + fields.push( + { label: '名称', value: '忠县应急中心' }, + { label: '行政等级', value: '国道' }, + { label: '隶属单位', value: '交通公路部门' }, + { label: '位置信息', value: `目前为止距离现场${distance}公里` } + ); + } else { + // 其他养护站显示 tooltip + title = '养护站'; + fields.push( + { label: '名称', value: stationName || '-' }, + { label: '距离', value: `${distance}公里` } + ); + } } // 显示 Tooltip,使用实体的屏幕坐标 @@ -357,9 +405,9 @@ onMounted(() => { 0 ), billboard: { - image: emergencyCenterIcon, + image: dangerIcon, width: 36, - height: 40, + height: 36, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, disableDepthTestDistance: Number.POSITIVE_INFINITY, @@ -614,6 +662,22 @@ const handleMapTooltipClose = () => { mapTooltip.value.visible = false; }; +/** + * 处理力量调度启动事件 + * 显示加载动画,3秒后自动隐藏 + */ +const handleStartDispatch = (payload) => { + console.log('[index.vue] 启动力量调度:', payload); + + // 显示加载动画 + showLoading.value = true; + + // 3秒后自动隐藏加载动画 + setTimeout(() => { + showLoading.value = false; + }, 3000); +}; + /** * 在指定屏幕坐标显示地图 Tooltip * @@ -745,7 +809,7 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => { --sa-gap: calc(16 / 1920 * var(--cq-inline-100, 100vw)); --sa-padding: calc(16 / 1920 * var(--cq-inline-100, 100vw)); --sa-header-height: calc( - 121 / 1080 * var(--cq-block-100, 100vh) + 131 / 1080 * var(--cq-block-100, 100vh) ); // Header 高度 --sa-min-width: 1280px; --sa-min-height: 720px; @@ -908,6 +972,29 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => { z-index: 4; // 高于控件层 pointer-events: none; // 容器不拦截事件,点击穿透到地图 } + + // 加载动画层 - 一键启动后显示 + &__loading-layer { + position: absolute; + top: calc(var(--sa-header-height) + vh(20)); + left: 0; + right: 0; + // bottom: 0; + z-index: 5; // 高于 Tooltip 层 + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; // 不阻止点击穿透 + } + + // 加载 GIF 图片 + &__loading-gif { + width: auto; + height: auto; + max-width: 80%; + max-height: 60%; + object-fit: contain; + } } // Tooltip 内容字段样式