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 内容字段样式