bdzl2/bxztApp
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: bdzl2:06c462a57722d408b7cba93c6612ff97e2f25ffd
Branches Tags
bdzl2:main
bdzl2:dev
bdzl2:feat-zc
..
compare: bdzl2:a5bd1d3b1e7370b8fa92a9cff07c10f3952e3330
Branches Tags
bdzl2:dev
bdzl2:feat-zc
bdzl2:main

3 Commits
06c462a577 ... a5bd1d3b1e

Author SHA1 Message Date
Zzc
a5bd1d3b1e feat(screen): 为人员移动添加红色路径线可视化 
- 在 `useEntityAnimation` 可组合项中更新人员路径坐标
- 在 `index.vue` 中实现 `drawRedPathLine` 函数，在地图上渲染红色折线
- 将路径绘制集成到 `handleStartDispatch` 中，以增强态势感知能力
- 调整 `styles` 中加载 GIF 的最大尺寸，以获得更好的显示效果
 2025-11-21 11:09:22 +08:00
Zzc
7367b0c948 feat(screen): 更新3D态势感知常量中的视频源和人员姓名 
- 修正了车辆外部和会议视角的视频网址
- 将人员姓名从占位符更新为张维
 2025-11-21 11:08:15 +08:00
Zzc
586d669e88 feat(screen): 在左侧面板中添加视频源并更新摄像头图标 
- 将摄像头图标更新为 media_dvr_on.png
- 为 3D 态势感知的快速感知功能设置视频源
 2025-11-21 11:06:32 +08:00
5 changed files with 81 additions and 21 deletions
Show Stats Expand all files Collapse all files

BIN
packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/media_dvr_on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

6
packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/index.vue
View File

@ -4,7 +4,7 @@
<CollapsiblePanel title="快速感知" subtitle="「灾害分析」">
<template #title-icon>
<img
src="../../assets/images/摄像头.png"
src="../../assets/images/media_dvr_on.png"
alt="摄像头"
class="camera-icon"
@click.stop="handleCameraClick"
@ -87,8 +87,8 @@ const showVideoModal = ref(false)
const cameraVideoData = ref({
id: 999,
type: 'drone',
title: '现场实时监控',
videoSrc: '', // 预留视频链接，后续补充
title: '快速感知',
videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/快速感知.mp4', // 预留视频链接，后续补充
dateRange: '',
hasAudio: true,
hasMegaphone: false,

24
packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useEntityAnimation.js
View File

@ -18,19 +18,17 @@ export function useEntityAnimation() {
* 这些坐标定义了人员从起点到终点的移动路径
*/
const PERSONNEL_PATH_COORDINATES = [
{ x: -1705480.2641142386, y: 5247435.146513505, z: 3189090.667137187 },
{ x: -1705494.4820981335, y: 5247449.285793587, z: 3189060.452114544 },
{ x: -1705510.0809808762, y: 5247465.767274618, z: 3189023.050648535 },
{ x: -1705511.0338125327, y: 5247476.4118378535, z: 3188998.3643177846 },
{ x: -1705515.8155320068, y: 5247491.504151518, z: 3188970.3225750974 },
{ x: -1705512.9523099929, y: 5247504.710873116, z: 3188943.7936982675 },
{ x: -1705519.7649184526, y: 5247519.060354441, z: 3188915.1883725724 },
{ x: -1705528.241912857, y: 5247539.302819527, z: 3188872.220619207 },
{ x: -1705530.7649293465, y: 5247548.26353356, z: 3188852.4565014304 },
{ x: -1705536.847870567, y: 5247562.107401437, z: 3188816.1164027476 },
{ x: -1705554.2817406887, y: 5247571.234068825, z: 3188789.6105980803 },
{ x: -1705573.026007999, y: 5247580.50225183, z: 3188770.244426234 },
{ x: -1705602.018256302, y: 5247597.236114229, z: 3188743.7470805836 }
{ x: -1706079.1327424292, y: 5247893.165552528, z: 3187993.9339800295 },
{ x: -1706116.7863268533, y: 5247923.177994122, z: 3187929.297700776 },
{ x: -1706131.4939896727, y: 5247956.7916397555, z: 3187865.1250298577 },
{ x: -1706117.7768181972, y: 5247999.865521995, z: 3187795.4584125844 },
{ x: -1706148.232862157, y: 5248029.100250082, z: 3187735.2203392833 },
{ x: -1706129.4638550146, y: 5248073.941490989, z: 3187662.59740559 },
{ x: -1706131.3071046746, y: 5248086.057462914, z: 3187643.216358425 },
{ x: -1706164.2362053818, y: 5248120.213627388, z: 3187577.1867482658 },
{ x: -1706255.3513903276, y: 5248175.916851786, z: 3187422.819624157 },
{ x: -1706300.2731912779, y: 5248172.011305182, z: 3187397.8767570513 },
{ x: -1706343.1007708232, y: 5248165.925888667, z: 3187382.186124808 }
]
/**

6
packages/screen/src/views/3DSituationalAwarenessRefactor/constants.js
View File

@ -17,7 +17,7 @@ export const VIDEO_MONITORS = [
{
id: 1,
type: VIDEO_TYPES.PERSONNEL,
title: '单兵(张三三)设备视角',
title: '单兵(张维)设备视角',
// videoSrc: getVideoUrl('demo/ylzg/单兵视角.mp4'), // 从 OSS 获取视频 URL
videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/单兵视角.mp4',
dateRange: '2025/9/1-2025/12/1', // 日期范围
@ -43,7 +43,7 @@ export const VIDEO_MONITORS = [
type: VIDEO_TYPES.VEHICLE_EXTERNAL,
title: '指挥车外部视角',
// videoSrc: getVideoUrl('demo/ylzg/单兵视角.mp4'), // 暂时使用单兵视角视频
videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/单兵视角.mp4',
videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/指挥车外部视角.mp4',
dateRange: '2025/9/1-2025/12/1',
hasAudio: true,
hasMegaphone: true,
@ -55,7 +55,7 @@ export const VIDEO_MONITORS = [
type: VIDEO_TYPES.VEHICLE_MEETING,
title: '指挥车会议视角',
// videoSrc: getVideoUrl('demo/ylzg/无人机视角.mp4'), // 暂时使用无人机视角视频
videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/无人机视角.mp4',
videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/指挥车会议视角.mp4',
dateRange: '2025/9/1-2025/12/1',
hasAudio: true,
hasMegaphone: true,

66
packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
View File

@ -977,6 +977,63 @@ const handleMapTooltipClose = () => {
mapTooltip.value.visible = false;
};
// 路径线实体引用
const pathLineEntity = ref(null);
/**
* 绘制红色路径线
* @param {Cesium.Viewer} viewer - Cesium viewer 实例
*/
const drawRedPathLine = (viewer) => {
if (!viewer) {
console.warn('[index.vue] drawRedPathLine: viewer 为空');
return;
}
// 如果已存在路径线，先移除
if (pathLineEntity.value) {
viewer.entities.remove(pathLineEntity.value);
pathLineEntity.value = null;
}
// 路径坐标点
const pathCoordinates = [
{ x: -1706079.1327424292, y: 5247893.165552528, z: 3187993.9339800295 },
{ x: -1706116.7863268533, y: 5247923.177994122, z: 3187929.297700776 },
{ x: -1706131.4939896727, y: 5247956.7916397555, z: 3187865.1250298577 },
{ x: -1706117.7768181972, y: 5247999.865521995, z: 3187795.4584125844 },
{ x: -1706148.232862157, y: 5248029.100250082, z: 3187735.2203392833 },
{ x: -1706129.4638550146, y: 5248073.941490989, z: 3187662.59740559 },
{ x: -1706131.3071046746, y: 5248086.057462914, z: 3187643.216358425 },
{ x: -1706164.2362053818, y: 5248120.213627388, z: 3187577.1867482658 },
{ x: -1706255.3513903276, y: 5248175.916851786, z: 3187422.819624157 },
{ x: -1706300.2731912779, y: 5248172.011305182, z: 3187397.8767570513 },
{ x: -1706343.1007708232, y: 5248165.925888667, z: 3187382.186124808 }
];
// 将坐标点转换为 Cartesian3 数组
const positions = pathCoordinates.map(coord =>
new Cesium.Cartesian3(coord.x, coord.y, coord.z)
);
// 创建红色路径线实体
pathLineEntity.value = viewer.entities.add({
polyline: {
positions: positions,
width: 5,
material: Cesium.Color.RED,
clampToGround: true,
// 添加发光效果使路径更醒目
// material: new Cesium.PolylineGlowMaterialProperty({
// glowPower: 0.3,
// color: Cesium.Color.RED
// })
}
});
console.log('[index.vue] 红色路径线已绘制');
};
/**
* 处理力量调度启动事件
* 显示加载动画，3秒后自动隐藏，然后启动人员移动动画
@ -987,6 +1044,11 @@ const handleStartDispatch = (payload) => {
// 显示加载动画
showLoading.value = true;
// 绘制红色路径线
if (mapStore.viewer) {
drawRedPathLine(mapStore.viewer);
}
// 3秒后隐藏加载动画并启动人员移动
setTimeout(() => {
showLoading.value = false;
@ -1463,8 +1525,8 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => {
&__loading-gif {
width: auto;
height: auto;
max-width: 80%;
max-height: 60%;
max-width: 320px;
max-height: 55px;
object-fit: contain;
}
}