Browse Source

1、添加多种数据类型的船型,并实现船只和轨迹的切换

2、添加光电追踪窗口,视频监控依赖在电子地图中无法引入,后续抽离出单独项目后补充
master
Fuyuu 11 months ago
parent
commit
5b1eb38ee5
  1. 2
      .env.development
  2. 16
      build/vite/plugin/index.ts
  3. 93
      electron/electron.js
  4. 2
      electron/preload.js
  5. 1
      index.html
  6. BIN
      src/assets/images/ship.png
  7. BIN
      src/assets/images/ship_a.png
  8. 136
      src/components/earthMap/AISInfoWindow.vue
  9. 253
      src/components/earthMap/ShowHideControl.vue
  10. 81
      src/components/earthMap/TailAfterWindow.vue
  11. 6
      src/store/modules/earthMap.ts
  12. 121
      src/utils/earthMap/earthObj.ts
  13. 11
      src/utils/earthMap/getCameraInfo.ts
  14. 9
      src/utils/earthMap/listenMouseHandler.ts
  15. 196
      src/utils/earthMap/shipDraw.ts
  16. 29
      src/views/earthMap/edit/EarthComp.vue
  17. 531
      src/views/earthMap/edit/EarthCompTest.vue
  18. 1683
      src/views/earthMap/show/EarthComp.vue
  19. 8
      src/views/military/modules/earthMap/camera/MsCameraSiteList.vue

2
.env.development

@ -2,7 +2,7 @@
# @Author: Fuyuu 1805498209@qq.com # @Author: Fuyuu 1805498209@qq.com
# @Date: 2023-11-24 10:15:22 # @Date: 2023-11-24 10:15:22
# @LastEditors: Fuyuu 1805498209@qq.com # @LastEditors: Fuyuu 1805498209@qq.com
# @LastEditTime: 2023-11-24 18:10:19 # @LastEditTime: 2024-01-19 10:20:30
# @FilePath: \dt-admin-pc\.env.development # @FilePath: \dt-admin-pc\.env.development
# @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE # @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
### ###

16
build/vite/plugin/index.ts

@ -1,3 +1,11 @@
/*
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2023-11-30 10:37:07
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-20 10:31:38
* @FilePath: \dt-admin-pc-v2\build\vite\plugin\index.ts
* @Description: ,`customMade`, koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { PluginOption } from 'vite'; import { PluginOption } from 'vite';
import vue from '@vitejs/plugin-vue'; import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx'; import vueJsx from '@vitejs/plugin-vue-jsx';
@ -6,6 +14,7 @@ import purgeIcons from 'vite-plugin-purge-icons';
import windiCSS from 'vite-plugin-windicss'; import windiCSS from 'vite-plugin-windicss';
import VitePluginCertificate from 'vite-plugin-mkcert'; import VitePluginCertificate from 'vite-plugin-mkcert';
import vueSetupExtend from 'vite-plugin-vue-setup-extend'; import vueSetupExtend from 'vite-plugin-vue-setup-extend';
// import requireTransform from 'vite-plugin-require-transform';
import { configHtmlPlugin } from './html'; import { configHtmlPlugin } from './html';
import { configPwaConfig } from './pwa'; import { configPwaConfig } from './pwa';
import { configMockPlugin } from './mock'; import { configMockPlugin } from './mock';
@ -15,8 +24,8 @@ import { configVisualizerConfig } from './visualizer';
import { configThemePlugin } from './theme'; import { configThemePlugin } from './theme';
import { configImageminPlugin } from './imagemin'; import { configImageminPlugin } from './imagemin';
import { configSvgIconsPlugin } from './svgSprite'; import { configSvgIconsPlugin } from './svgSprite';
import OptimizationPersist from 'vite-plugin-optimize-persist' import OptimizationPersist from 'vite-plugin-optimize-persist';
import PkgConfig from 'vite-plugin-package-config' import PkgConfig from 'vite-plugin-package-config';
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) { export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv; const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
@ -32,6 +41,9 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
VitePluginCertificate({ VitePluginCertificate({
source: 'coding', source: 'coding',
}), }),
// requireTransform({
// fileRegex: /.js$|.vue$/,
// }),
]; ];
// vite-plugin-windicss // vite-plugin-windicss

93
electron/electron.js

@ -2,10 +2,10 @@
const path = require('path'); const path = require('path');
const { app, BrowserWindow, ipcMain } = require('electron'); const { app, BrowserWindow, ipcMain } = require('electron');
const isDev = process.env.IS_DEV == "true" ? true : false; const isDev = process.env.IS_DEV == 'true' ? true : false;
// rtsp相关,ffmpeg-static会自动下载对应平台windos,linux,mac(intle),mac(M1版本)的ffmpeg二进制文件 // rtsp相关,ffmpeg-static会自动下载对应平台windos,linux,mac(intle),mac(M1版本)的ffmpeg二进制文件
const ffmpegPath = require('ffmpeg-static') const ffmpegPath = require('ffmpeg-static');
/** /**
stream相关配置及方法 stream相关配置及方法
name = options.name name = options.name
@ -18,8 +18,8 @@ const ffmpegPath = require('ffmpeg-static')
ffmpegPath = options?.ffmpegPath ?? ffmpeg ffmpegPath = options?.ffmpegPath ?? ffmpeg
stop() stop()
*/ */
const Stream = require('node-rtsp-stream') const Stream = require('node-rtsp-stream');
/** /**
* rtsp列表 * rtsp列表
* interface { * interface {
* rtspUrl: { * rtspUrl: {
@ -28,25 +28,24 @@ const ffmpegPath = require('ffmpeg-static')
* } * }
* } * }
*/ */
const rtspOpenders = {} const rtspOpenders = {};
let addPort = 9000 let addPort = 9000;
/** /**
* 开启rtsp * 开启rtsp
* @param rtsp {String} rtsp流地址 * @param rtsp {String} rtsp流地址
*/ */
ipcMain.on('openRtsp', (event, rtsp) => { ipcMain.on('openRtsp', (event, rtsp) => {
/** 判断是否已开启,若已开启,直接返回ws地址, 未开启则先开启再返回 */ /** 判断是否已开启,若已开启,直接返回ws地址, 未开启则先开启再返回 */
if (rtspOpenders[rtsp]) { if (rtspOpenders[rtsp]) {
event.returnValue = { event.returnValue = {
code: 200, code: 200,
msg: '开启成功', msg: '开启成功',
ws: rtspOpenders[rtsp].ws ws: rtspOpenders[rtsp].ws,
} };
} else { } else {
addPort++ addPort++;
const stream = new Stream({ const stream = new Stream({
name: `socket-${addPort}`, name: `socket-${addPort}`,
streamUrl: rtsp, streamUrl: rtsp,
@ -54,27 +53,27 @@ ipcMain.on('openRtsp', (event, rtsp) => {
ffmpegPath: app.isPackaged ? ffmpegPath.replace('app.asar', 'app.asar.unpacked') : ffmpegPath, ffmpegPath: app.isPackaged ? ffmpegPath.replace('app.asar', 'app.asar.unpacked') : ffmpegPath,
ffmpegOptions: { ffmpegOptions: {
'-stats': '', '-stats': '',
'-r': 30 '-r': 30,
} },
}).on('exitWithError', () => { }).on('exitWithError', () => {
stream.stop() stream.stop();
delete rtspOpenders[rtsp] delete rtspOpenders[rtsp];
event.returnValue = { event.returnValue = {
code: 400, code: 400,
msg: '开启失败' msg: '开启失败',
} };
}) });
rtspOpenders[rtsp] = { rtspOpenders[rtsp] = {
ws: `ws://localhost:${addPort}`, ws: `ws://localhost:${addPort}`,
stream: stream stream: stream,
} };
event.returnValue = { event.returnValue = {
code: 200, code: 200,
msg: '开启成功', msg: '开启成功',
ws: rtspOpenders[rtsp].ws ws: rtspOpenders[rtsp].ws,
} };
} }
}) });
/** /**
* 关闭rtsp * 关闭rtsp
@ -82,22 +81,21 @@ ipcMain.on('openRtsp', (event, rtsp) => {
ipcMain.on('closeRtsp', (event, rtsp) => { ipcMain.on('closeRtsp', (event, rtsp) => {
if (rtspOpenders[rtsp]) { if (rtspOpenders[rtsp]) {
// 停止解析 // 停止解析
rtspOpenders[rtsp].stream.stop() rtspOpenders[rtsp].stream.stop();
// 删除该项 // 删除该项
delete rtspOpenders[rtsp] delete rtspOpenders[rtsp];
// 返回结果 // 返回结果
event.returnValue = { event.returnValue = {
code: 200, code: 200,
msg: '关闭成功' msg: '关闭成功',
} };
} else { } else {
event.returnValue = { event.returnValue = {
code: 400, code: 400,
msg: '未找到该rtsp' msg: '未找到该rtsp',
};
} }
} });
})
/////////////////////////////////////////// ///////////////////////////////////////////
@ -107,26 +105,19 @@ function createWindow() {
width: 800, width: 800,
height: 600, height: 600,
webPreferences: { webPreferences: {
//preload: path.join(__dirname, 'preload.js'), preload: path.join(__dirname, 'preload.js'),
javascript: true, javascript: true,
plugins: true, plugins: true,
allowRunningInsecureContent: true, // 允许web端使用node
// 允许web断使用node
nodeIntegration: true, nodeIntegration: true,
contextIsolation: false, contextIsolation: false,
// 同源策略关闭
webSecurity: false,
}, },
}); });
// and load the index.html of the app. // and load the index.html of the app.
// win.loadFile("index.html"); // win.loadFile("index.html");
mainWindow.loadURL( mainWindow.loadURL(isDev ? 'http://localhost:3200' : `file://${path.join(__dirname, '../dist/index.html')}`);
isDev
? 'http://localhost:3200'
: `file://${path.join(__dirname, '../dist/index.html')}`
);
// mainWindow.loadURL('http://127.0.0.1:5500'); // mainWindow.loadURL('http://127.0.0.1:5500');
// Open the DevTools. // Open the DevTools.
@ -139,12 +130,12 @@ function createWindow() {
// initialization and is ready to create browser windows. // initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs. // Some APIs can only be used after this event occurs.
app.whenReady().then(() => { app.whenReady().then(() => {
createWindow() createWindow();
app.on('activate', function () { app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the // On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open. // dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow() if (BrowserWindow.getAllWindows().length === 0) createWindow();
}) });
}); });
// Quit when all windows are closed, except on macOS. There, it's common // Quit when all windows are closed, except on macOS. There, it's common
@ -155,3 +146,19 @@ app.on('window-all-closed', () => {
app.quit(); app.quit();
} }
}); });
// 在主进程中监听 webContents 的 did-create-window 事件
app.on('web-contents-created', (event, webContents) => {
// 监听新窗口创建事件
webContents.on('did-create-window', (Window, details) => {
console.log('Window---', Window);
// 在新窗口创建完成后重新加载预加载脚本
Window.webContents.on('dom-ready', () => {
Window.webContents.executeJavaScript(
`
console.log('window----',window)
`
);
});
});
});

2
electron/preload.js

@ -0,0 +1,2 @@
window.ipcRenderer = require('electron').ipcRenderer;
console.log('再次运行');

1
index.html

@ -16,6 +16,7 @@
<link rel="icon" href="/zgxlogo.png" /> <link rel="icon" href="/zgxlogo.png" />
<!-- 全局配置 --> <!-- 全局配置 -->
<script> <script>
console.log('window', window);
window._CONFIG = {}; window._CONFIG = {};
</script> </script>
</head> </head>

BIN
src/assets/images/ship.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/images/ship_a.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

136
src/components/earthMap/AISInfoWindow.vue

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com * @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-05 14:18:33 * @Date: 2024-01-05 14:18:33
* @LastEditors: Fuyuu 1805498209@qq.com * @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-12 17:55:17 * @LastEditTime: 2024-01-20 14:57:59
* @FilePath: \dt-admin-pc-v2\src\components\earthMap\AISInfoWindow.vue * @FilePath: \dt-admin-pc-v2\src\components\earthMap\AISInfoWindow.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
@ -12,7 +12,7 @@
:title="title" :title="title"
:width="600" :width="600"
:minWidth="600" :minWidth="600"
:height="380" :height="420"
:left="80" :left="80"
:top="70" :top="70"
@cancel="cancel" @cancel="cancel"
@ -25,11 +25,11 @@
<div class="ais_content"> <div class="ais_content">
<div class="content_item"> <div class="content_item">
<div class="item_title">船名:</div> <div class="item_title">船名:</div>
<div class="item_content">顺宏海1026</div> <div class="item_content">{{ AISInfo.name }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">MMSI:</div> <div class="item_title">MMSI:</div>
<div class="item_content">413495860</div> <div class="item_content">{{ AISInfo.mmsi }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">船首向:</div> <div class="item_title">船首向:</div>
@ -45,7 +45,7 @@
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">IMO:</div> <div class="item_title">IMO:</div>
<div class="item_content">458876</div> <div class="item_content">{{ AISInfo.imo }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">航速:</div> <div class="item_title">航速:</div>
@ -53,11 +53,11 @@
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">经度:</div> <div class="item_title">经度:</div>
<div class="item_content">113-26.578E</div> <div class="item_content">{{ AISInfo.longitude }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">纬度:</div> <div class="item_title">纬度:</div>
<div class="item_content">22-08.082N</div> <div class="item_content">{{ AISInfo.latitude }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">状态:</div> <div class="item_title">状态:</div>
@ -96,6 +96,14 @@
<div class="item_title">航行轨迹:</div> <div class="item_title">航行轨迹:</div>
<a-switch v-model:checked="checked" @change="changeTrack" /> <a-switch v-model:checked="checked" @change="changeTrack" />
</div> </div>
<!-- 跟踪船只 -->
<div class="content_item">
<div class="item_title">跟踪船只:</div>
<a-button size="small" type="primary" @click="tailAfter()">
跟踪
<EyeOutlined />
</a-button>
</div>
</div> </div>
</Window> </Window>
</div> </div>
@ -106,8 +114,9 @@
import Window from '@/components/earthMap/components/Window.vue'; import Window from '@/components/earthMap/components/Window.vue';
import { useEarthMapStore } from '/@/store/modules/earthMap'; import { useEarthMapStore } from '/@/store/modules/earthMap';
import $mitt from '@/utils/earthMap/mitt'; import $mitt from '@/utils/earthMap/mitt';
// store import { EyeOutlined } from '@ant-design/icons-vue';
const store = useEarthMapStore(); import { defHttp } from '/@/utils/http/axios';
export default defineComponent({ export default defineComponent({
name: 'AISInfoWindow', name: 'AISInfoWindow',
props: { props: {
@ -122,29 +131,47 @@
}, },
components: { components: {
Window, Window,
EyeOutlined,
}, },
setup() { setup() {
// store
const store = useEarthMapStore();
const { proxy }: any = getCurrentInstance(); const { proxy }: any = getCurrentInstance();
// //
const checked = ref(false); const checked = ref(false);
// store // trackId
let foundData = store.shipDataList.filter((item) => item.guid === proxy.ship_guid); const trackId: any = ref('');
// 线id // id
let track_guid = foundData ? foundData[0].track_guid : null; const radarId: any = ref('');
// 线 // AIS
let trackData = window.$earth.getObject(track_guid); const AISInfo: any = ref({});
// // 线
checked.value = trackData.show; const trackData: any = ref({});
// guid
watch(
() => proxy.ship_guid,
(newVal, _oldVal) => {
console.log(newVal);
},
{ immediate: true }
);
// ais线
function getShipAISInfo() {
// ship_guidtrack_idAIS
trackId.value = window.$earth.getObject(proxy.ship_guid).trackId;
// trackIdid
radarId.value = store.radarShipList.filter((item) => item.trackId === trackId.value)[0].radarId;
// storeais
AISInfo.value = store.aisShipList.filter((item) => item.trackId === trackId.value)[0];
// ship_guid线
let shipName = window.$earth.getObject(proxy.ship_guid).name;
// ais
if (shipName.includes('船_ais')) {
trackData.value = window.$earth.getObject(store.aisShipList.filter((item) => item.trackId === trackId.value)[0].track_guid);
} else if (shipName.includes('船_radar')) {
//
trackData.value = window.$earth.getObject(store.radarShipList.filter((item) => item.trackId === trackId.value)[0].track_guid);
} else if (shipName.includes('船_mix')) {
//
trackData.value = window.$earth.getObject(store.mixShipList.filter((item) => item.trackId === trackId.value)[0].track_guid);
} else {
console.log('未知船只');
}
checked.value = trackData.value.show;
}
// //
function cancel() { function cancel() {
proxy.$parent.AISInfoWindowShow = false; proxy.$parent.AISInfoWindowShow = false;
@ -153,27 +180,62 @@
function changeTrack(e) { function changeTrack(e) {
checked.value = e; checked.value = e;
// 使show // 使show
trackData.show = e; trackData.value.show = e;
// 线
$mitt.emit('trackShowChange', e);
} }
//
function tailAfter() {
//
proxy.$parent.TailAfterWindowShow = true;
// idtrackIdidradarIdtracking0 1
// 使API
// defHttp
// .post(
// {
// url: '/military/tracking/target',
// params: {
// trackId: trackId.value,
// radarId: radarId.value,
// tracking: 1,
// },
// },
// { isTransformResponse: false }
// )
// .then((res) => {
// console.log('', res);
// //
$mitt.on('trackAllChange', (e: boolean) => { // });
console.log('window', window);
}
// 线
$mitt.on('trackChange', (e: boolean) => {
// 线 // 线
checked.value = e; if (trackData.value.name.includes(e)) {
checked.value = false;
}
}); });
//
$mitt.on('shipAllChange', (e: boolean) => { $mitt.on('trackAllChange', (data: any) => {
// if (trackData.value.name.includes(data.type)) {
if (!e) { checked.value = data.status;
cancel()
} }
}) });
// guid
watch(
() => proxy.ship_guid,
(_newVal, _oldVal) => {
// AIS
getShipAISInfo();
},
{ immediate: true }
);
return { return {
checked, checked,
AISInfo,
cancel, cancel,
changeTrack, changeTrack,
tailAfter,
}; };
}, },
}); });

253
src/components/earthMap/ShowHideControl.vue

@ -1,47 +1,126 @@
<template> <template>
<div class="showhideControl"> <div class="showhideControl">
<a-dropdown :trigger="['click']"> <!-- <a-dropdown :trigger="['click']">
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<a-menu-item key="1"> <a-menu-item key="1">
<label for="ship-switch" style="margin-top: 2px">船只模型</label> <label for="ship-switch" style="margin-top: 2px">船只模型</label>
<a-switch id="ship-switch" v-model:checked="shipShow" @change="changeShipShow" checked-children="显示" un-checked-children="隐藏" /> <a-switch id="ship-switch" v-model:checked="shipShow" @change="changeShipShow" checked-children="显示" un-checked-children="隐藏" />
</a-menu-item> </a-menu-item>
<a-menu-item key="1"> <a-menu-item key="2">
<label for="track-switch" style="margin-top: 2px">船只轨迹</label> <label for="track-switch" style="margin-top: 2px">船只轨迹</label>
<a-switch id="track-switch" v-model:checked="trackShow" @change="changeTrackShow" checked-children="显示" un-checked-children="隐藏" /> <a-switch id="track-switch" v-model:checked="trackShow" @change="changeTrackShow" checked-children="显示" un-checked-children="隐藏" />
</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
</template> </template>
<a-button> 地图元素显隐 <CaretUpOutlined /></a-button> <a-button> 地图元素显隐 <CaretUpOutlined /></a-button>
</a-dropdown> </a-dropdown> -->
<!-- <div class="control_item">
<a-switch id="ship-switch" v-model:checked="shipShow" @change="changeShipShow" checked-children="显示船只" un-checked-children="隐藏船只" />
</div> -->
<!-- <div class="control_item">
<a-switch id="track-switch" v-model:checked="trackShow" @change="changeTrackShow" checked-children="显示轨迹" un-checked-children="隐藏轨迹" />
</div> -->
<div class="control_item">
<a-switch
id="ais-switch"
v-model:checked="aisTypeShow"
@change="changeAISType"
checked-children="AIS显示&nbsp;&nbsp;"
un-checked-children="AIS隐藏&nbsp;&nbsp;"
/>
</div>
<div class="control_item">
<a-switch
id="radar-switch"
v-model:checked="radarTypeShow"
@change="changeRadarType"
checked-children="雷达显示"
un-checked-children="雷达隐藏"
/>
</div>
<div class="control_item">
<a-switch id="mix-switch" v-model:checked="mixTypeShow" @change="changeMixType" checked-children="融合显示" un-checked-children="融合隐藏" />
</div>
<div class="control_item">
<a-button size="small" @click="changeTrackStatus(true)">打开轨迹</a-button>
<a-button size="small" @click="changeTrackStatus(false)">关闭轨迹</a-button>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, nextTick, watch } from 'vue'; import { defineComponent, ref, nextTick } from 'vue';
import { CaretUpOutlined } from '@ant-design/icons-vue'; import { CaretUpOutlined } from '@ant-design/icons-vue';
import $mitt from '@/utils/earthMap/mitt'; import $mitt from '@/utils/earthMap/mitt';
export default defineComponent({ export default defineComponent({
setup() { setup() {
// //
const shipShow = ref<boolean>(true); // const shipShow = ref<boolean>(true);
// //
const trackShow = ref<boolean>(true); // const trackShow = ref<boolean>(true);
//
const radarTypeShow = ref<boolean>(true);
//
const mixTypeShow = ref<boolean>(true);
// AIS
const aisTypeShow = ref<boolean>(true);
// //
const shipList = ref([]); const shipList = ref([]);
// ais
const aisShipList = ref([]);
//
const radarShipList = ref([]);
//
const mixShipList = ref([]);
// //
const trackList = ref([]); const trackList = ref([]);
//
const radarTrackList = ref([]);
// ais
const aisTrackList = ref([]);
//
const mixTrackList = ref([]);
// //
function getShipInfo() { function getShipInfo() {
// //
let earthMapElements = window.$earth.getAllObjects(); let earthMapElements = window.$earth.getAllObjects();
// //
let earthMapShips = earthMapElements.filter((item) => item.name && item.name.includes('船')); let earthMapShips = earthMapElements.filter((item) => item.name && item.name.includes('船'));
// ais
let earthMapAisShips = earthMapElements.filter((item) => item.name && item.name.includes('船_ais'));
//
let earthMapRadarShips = earthMapElements.filter((item) => item.name && item.name.includes('船_radar'));
//
let earthMapMixShips = earthMapElements.filter((item) => item.name && item.name.includes('船_mix'));
if (earthMapShips.length > 0) { if (earthMapShips.length > 0) {
// //
shipShow.value = earthMapShips.every((item) => item.show === true); // shipShow.value = earthMapShips.every((item) => item.show === true);
// //
shipList.value = earthMapShips; shipList.value = earthMapShips;
if (earthMapAisShips.length > 0) {
// ais
aisTypeShow.value = earthMapAisShips.every((item) => item.show === true);
// ais
aisShipList.value = earthMapAisShips;
} else {
console.log('当前场景没有ais船只');
}
if (earthMapRadarShips.length > 0) {
//
radarTypeShow.value = earthMapRadarShips.every((item) => item.show === true);
//
radarShipList.value = earthMapRadarShips;
} else {
console.log('当前场景没有雷达船只');
}
if (earthMapMixShips.length > 0) {
//
mixTypeShow.value = earthMapMixShips.every((item) => item.show === true);
//
mixShipList.value = earthMapMixShips;
} else {
console.log('当前场景没有融合船只');
}
} else { } else {
console.log('当前场景没有船只'); console.log('当前场景没有船只');
} }
@ -52,11 +131,29 @@
let earthMapElements = window.$earth.getAllObjects(); let earthMapElements = window.$earth.getAllObjects();
// //
let earthMapTracks = earthMapElements.filter((item) => item.name && item.name.includes('轨迹线')); let earthMapTracks = earthMapElements.filter((item) => item.name && item.name.includes('轨迹线'));
let earthMapRadarTracks = earthMapElements.filter((item) => item.name && item.name.includes('轨迹线_radar'));
let earthMapAisTracks = earthMapElements.filter((item) => item.name && item.name.includes('轨迹线_ais'));
let earthMapMixTracks = earthMapElements.filter((item) => item.name && item.name.includes('轨迹线_mix'));
if (earthMapTracks.length > 0) { if (earthMapTracks.length > 0) {
// //
trackShow.value = earthMapTracks.every((item) => item.show === true); // trackShow.value = earthMapTracks.every((item) => item.show === true);
// //
trackList.value = earthMapTracks; trackList.value = earthMapTracks;
if (earthMapRadarTracks.length > 0) {
radarTrackList.value = earthMapRadarTracks;
} else {
console.log('当前场景没有雷达轨迹线');
}
if (earthMapAisTracks.length > 0) {
aisTrackList.value = earthMapAisTracks;
} else {
console.log('当前场景没有ais轨迹线');
}
if (earthMapMixTracks.length > 0) {
mixTrackList.value = earthMapMixTracks;
} else {
console.log('当前场景没有融合轨迹线');
}
} else { } else {
console.log('当前场景没有轨迹线'); console.log('当前场景没有轨迹线');
} }
@ -66,14 +163,14 @@
if (shipList.value.length > 0) { if (shipList.value.length > 0) {
if (!e) { if (!e) {
// //
trackShow.value = false; // trackShow.value = false;
// //
trackList.value.forEach((item: any) => { trackList.value.forEach((item: any) => {
item.show = false; item.show = false;
}); });
} }
// //
shipShow.value = e; // shipShow.value = e;
shipList.value.forEach((item: any) => { shipList.value.forEach((item: any) => {
// //
item.show = e; item.show = e;
@ -85,34 +182,105 @@
// 线 // 线
function changeTrackShow(e) { function changeTrackShow(e) {
if (trackList.value.length > 0) { if (trackList.value.length > 0) {
if (shipShow.value) { // if (shipShow.value) {
// // //
trackShow.value = e; // trackShow.value = e;
trackList.value.forEach((item: any) => { // trackList.value.forEach((item: any) => {
// //
// item.show = e;
// });
// } else {
// trackShow.value = false;
// console.log('');
// }
} else {
console.log('当前场景没有轨迹线');
}
}
//
function changeRadarType(e) {
if (radarShipList.value.length > 0) {
if (!e) {
//
radarTrackList.value.forEach((item: any) => {
//
item.show = e;
});
$mitt.emit('trackChange', 'radar');
}
//
radarTypeShow.value = e;
radarShipList.value.forEach((item: any) => {
// //
item.show = e; item.show = e;
}); });
} else { } else {
trackShow.value = false; console.log('当前场景没有雷达船只');
console.log('请先打开显示船只模型'); }
} }
//
function changeMixType(e) {
if (mixShipList.value.length > 0) {
if (!e) {
//
mixTrackList.value.forEach((item: any) => {
//
item.show = e;
});
$mitt.emit('trackChange', 'mix');
}
//
mixTypeShow.value = e;
mixShipList.value.forEach((item: any) => {
//
item.show = e;
});
} else { } else {
console.log('当前场景没有船只'); console.log('当前场景没有融合船只');
} }
} }
// AIS
// 线 function changeAISType(e) {
watch(trackShow, (newValue, _oldValue) => { if (aisShipList.value.length > 0) {
// 线 if (!e) {
$mitt.emit('trackAllChange', newValue); //
aisTrackList.value.forEach((item: any) => {
//
item.show = e;
}); });
$mitt.emit('trackChange', 'ais');
// }
watch(shipShow, (newValue, _oldValue) => { //
// 线 aisTypeShow.value = e;
$mitt.emit('shipAllChange', newValue); aisShipList.value.forEach((item: any) => {
//
item.show = e;
}); });
} else {
console.log('当前场景没有AIS船只');
}
}
//
function changeTrackStatus(e) {
if (radarTypeShow.value) {
radarTrackList.value.forEach((item: any) => {
item.show = e;
});
$mitt.emit('trackAllChange', { status: e, type: 'radar' });
}
if (mixTypeShow.value) {
mixTrackList.value.forEach((item: any) => {
item.show = e;
});
$mitt.emit('trackAllChange', { status: e, type: 'mix' });
}
if (aisTypeShow.value) {
aisTrackList.value.forEach((item: any) => {
item.show = e;
});
$mitt.emit('trackAllChange', { status: e, type: 'ais' });
}
}
// mqtt // mqtt
$mitt.on('deviceCmd', () => { $mitt.on('deviceCmd', () => {
nextTick(() => { nextTick(() => {
@ -122,25 +290,19 @@
getTrackInfo(); getTrackInfo();
}); });
}); });
// 线
$mitt.on('trackShowChange', (e: boolean) => {
if (!e) {
//
trackShow.value = e;
} else {
//
trackShow.value = window.$earth
.getAllObjects()
.filter((item) => item.name && item.name.includes('轨迹线'))
.every((item) => item.show === true);
}
});
return { return {
shipShow, // shipShow,
trackShow, // trackShow,
radarTypeShow,
mixTypeShow,
aisTypeShow,
changeShipShow, changeShipShow,
changeTrackShow, changeTrackShow,
changeRadarType,
changeMixType,
changeAISType,
changeTrackStatus,
}; };
}, },
components: { components: {
@ -151,8 +313,11 @@
<style lang="less" scoped> <style lang="less" scoped>
.showhideControl { .showhideControl {
position: absolute; position: absolute;
left: 0; left: 10px;
bottom: 30px; bottom: 30px;
z-index: 99999; z-index: 99999;
.control_item {
margin: 8px 0;
}
} }
</style> </style>

81
src/components/earthMap/TailAfterWindow.vue

@ -0,0 +1,81 @@
<!--
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-18 16:42:29
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-20 18:02:10
* @FilePath: \dt-admin-pc-v2\src\components\earthMap\TailAfterWindow.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="TailAfter">
<Window
:title="title"
:width="1280"
:minWidth="1280"
:height="720"
:left="100"
:top="100"
@cancel="cancel"
:floatright="false"
:showCancelButton="true"
:footervisible="false"
:showcloseButton="true"
id="tailAfterWindow"
>
<div class="mpegPlayer" ref="mpegPlayer"></div>
</Window>
</div>
</template>
<script lang="ts" setup>
import { getCurrentInstance, ref, onMounted, onBeforeUnmount } from 'vue';
import Window from '@/components/earthMap/components/Window.vue';
import MpegPlayer from 'jsmpeg-player';
const props = defineProps({
title: {
type: String,
default: '光电跟踪',
},
});
// ipcRenderer
// import { ipcRenderer } from 'electron';
const ipcRenderer: any = ref(null);
const { proxy }: any = getCurrentInstance();
// DOM
const mpegPlayer = ref();
// rtsp
const videoUrl = ref('rtsp://admin:123456@192.168.1.71:554/');
//
let player: any = ref(null);
//
const open = () => {
const res = ipcRenderer.sendSync('openRtsp', videoUrl.value);
if (res.code === 200) {
player.value = new MpegPlayer.VideoElement(mpegPlayer.value, res.ws);
}
};
//
const close = () => {
ipcRenderer.sendSync('closeRtsp', videoUrl.value);
};
//
function cancel() {
proxy.$parent.TailAfterWindowShow = false;
}
onMounted(() => {
open();
});
onBeforeUnmount(() => {
close();
});
</script>
<style lang="less" scoped>
#tailAfterWindow .xbsj-model-header .xbsj-model-arrow {
right: 25px;
}
.mpegPlayer {
width: 100%;
height: 720px;
background: #000;
}
</style>

6
src/store/modules/earthMap.ts

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com * @Author: Fuyuu 1805498209@qq.com
* @Date: 2023-12-15 16:47:17 * @Date: 2023-12-15 16:47:17
* @LastEditors: Fuyuu 1805498209@qq.com * @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-03 10:47:55 * @LastEditTime: 2024-01-16 09:16:16
* @FilePath: \dt-admin-pc-v2\src\store\modules\earthMap.ts * @FilePath: \dt-admin-pc-v2\src\store\modules\earthMap.ts
* @Description: ,`customMade`, koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: ,`customMade`, koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@ -19,7 +19,9 @@ export const useEarthMapStore = defineStore({
shapeList: <any>[], //绘画数组(区域) shapeList: <any>[], //绘画数组(区域)
shapeShowList: <any>[], //绘画存储(临时) shapeShowList: <any>[], //绘画存储(临时)
keyAreaPos: <number[][]>[], //记录创建防区的点位,重点管控区域 keyAreaPos: <number[][]>[], //记录创建防区的点位,重点管控区域
shipDataList: <any>[], //船只数据列表 aisShipList: <any>[], // ais船只数据列表
radarShipList: <any>[], // 雷达船只数据列表
mixShipList: <any>[], // 融合船只数据列表
xbsjEarthUI: <any>null, //XbsjEarthUI xbsjEarthUI: <any>null, //XbsjEarthUI
/////////////////////// ///////////////////////
cameraData: <any>{},//请求的电线杆数据 cameraData: <any>{},//请求的电线杆数据

121
src/utils/earthMap/earthObj.ts

@ -322,43 +322,101 @@ export const addCustomPrimitive = (
return cp; return cp;
}; };
// 创建船只贴地图片 // 创建船只三角模型
export const addShipGroundImg = (lon: number, lat: number, height: number, imgUrl: string, imgUrl_a: string, rt: number, trackId: number) => { export const addShipTriangle = (options: any = {}) => {
const shipGroundImg = new window.XE.Obj.GroundImage(window.$earth); const shipTriangle = new window.XE.Obj.GroundImage(window.$earth);
const objConfig = { const objConfig = {
name: `${trackId}号船只`, name: options.name, // 实例名称
trackId, imageUrls: [options.imageUrl], // 标识图片资源路径
position: [window.Cesium.Math.toRadians(lon), window.Cesium.Math.toRadians(lat), height], trackId: options.id, // 船只trackid
loopPlay: false, position: options.position, // 位置数组 [经度、纬度、高度]
imageUrls: [imgUrl], rotation: options.rotation, // 偏航角
rotation: -(Math.PI / 180) * rt, loopPlay: false, // 是否轮播
ground: false, ground: false, // 是否贴地
height: 80,
width: 60,
}; };
shipGroundImg.xbsjFromJSON(objConfig); shipTriangle.xbsjFromJSON(objConfig);
//移入事件 //移入事件
shipGroundImg.onmouseover = (e: any) => { shipTriangle.onmouseover = () => {
e.id.imageUrls = [imgUrl_a];
window.$earth.czm.viewer._container.style.cursor = 'pointer'; window.$earth.czm.viewer._container.style.cursor = 'pointer';
}; };
//移出事件 //移出事件
shipGroundImg.onmouseout = (e: any) => { shipTriangle.onmouseout = () => {
e.id.imageUrls = [imgUrl];
window.$earth.czm.viewer._container.style.cursor = 'default'; window.$earth.czm.viewer._container.style.cursor = 'default';
}; };
return shipGroundImg; return shipTriangle;
};
// 创建船只自定义图元
export const addShipPrimitive = (options: any = {}) => {
const shipCp = new window.XE.Obj.CustomPrimitive(window.$earth);
const objConfig = {
_name: options.name, // 实例名称
trackId: options.id, // 船只trackid
xbsjType: 'CustomPrimitive', // 图元类型
position: options.position, // 位置数组 [经度、纬度、高度]
rotation: options.rotation, // 姿态数组 [偏航角、俯仰角、翻转角]
imageUrl: options.imageUrl, // 标识图片资源路径
positions: [0, -1, 0, 0, 1, 0, 0, 1, 2, 0, -1, 2],
sts: [0, 0, 1, 0, 1, 1, 0, 1],
indices: [0, 1, 2, 0, 2, 3], // 索引数组
scale: [1, 5, 4],
renderState: {
cull: {
enabled: true,
},
polygonOffset: {},
scissorTest: {
rectangle: {},
},
depthRange: {},
depthTest: {
enabled: true,
},
colorMask: {},
depthMask: false,
blending: {
enabled: true,
color: {},
equationRgb: 32774,
equationAlpha: 32774,
functionSourceRgb: 770,
functionDestinationRgb: 771,
functionDestinationAlpha: 771,
},
stencilTest: {
frontOperation: {},
backOperation: {},
},
sampleCoverage: {},
},
color: [1, 1, 1, 1], // 颜色
canvasWidth: 500,
canvasHeight: 256,
autoRegisterEditing: true,
};
shipCp.xbsjFromJSON(objConfig);
return shipCp;
}; };
// 创建船只三维模型 // 创建船只三维模型
export const addShipModel = (name: string, options: any = {}) => { // 融合船只-船模型 ais船只-黄色三角 雷达船只-红色三角
export const addShipModel = (options: any = {}, dataType: number) => {
const tileset = new window.XE.Obj.Model(window.$earth); const tileset = new window.XE.Obj.Model(window.$earth);
// 创建一个Model对象 // 创建一个Model对象
const objConfig = { const objConfig = {
name: name, name: options.name, // 实例名称
url: options.url, url: options.modelUrl, // 模型资源路径
id: options.id, trackId: options.id, // 船只trackid
xbsjPosition: options.position, // 位置数组 [经度、纬度、高度] xbsjPosition: options.position, // 位置数组 [经度、纬度、高度]
xbsjRotation: options.rotation, // 姿态数组 [偏航角、俯仰角、翻转角] xbsjRotation: options.rotation, // 姿态数组 [偏航角、俯仰角、翻转角]
xbsjScale: [0.5, 0.5, 0.5], // 缩放比例 xbsjScale: [1, 1, 1], // 缩放比例
show: true, show: true, // 显隐状态
distanceDisplayCondition: [1.0, 30000.0],
scale: 0.5,
minimumPixelSize: 80,
colorBlendAmount: dataType == 3 ? 0.0 : 1.0, // 1.0 模型颜色 0.0 设置纯色
color: dataType == 3 ? [1, 1, 1, 1] : dataType == 2 ? [1, 1, 0.03, 1] : [0.94, 0.13, 0.03, 1],
colorBlendMode: dataType == 3 ? 'ColorBlendMode.HIGHLIGHT' : 'ColorBlendMode.REPLACE',
}; };
tileset.xbsjFromJSON(objConfig); tileset.xbsjFromJSON(objConfig);
//移入事件 //移入事件
@ -371,23 +429,22 @@ export const addShipModel = (name: string, options: any = {}) => {
}; };
return tileset; return tileset;
}; };
// 创建船只轨迹 // 创建船只轨迹
export const addShipTrack = (positions: number[][]) => { export const addShipTrack = (positions: number[][], dataType: number) => {
const shipTrack = new window.XE.Obj.Polyline(window.$earth); const shipTrack = new window.XE.Obj.Polyline(window.$earth);
const objConfig = { const objConfig = {
width: 3.0, width: 2.0, // 线宽
name: '轨迹线', name: `轨迹线_${dataType == 1 ? 'radar' : dataType == 2 ? 'ais' : 'mix'}`, // 实例名称
positions, positions, // 点坐标经纬度数组 [经度、纬度、高度]
material: { material: {
type: 'XbsjODLineMaterial', type: 'XbsjODLineMaterial', // 材质类型
XbsjODLineMaterial: { XbsjODLineMaterial: {
bgColor: [1, 1, 0.03, 1], bgColor: dataType == 1 ? [0.94, 0.13, 0.03, 1] : dataType == 2 ? [1, 1, 0.03, 1] : [0.03, 0.32, 1, 0.85], // 背景颜色
color: [1, 0, 1, 1], color: dataType == 1 ? [1, 1, 0.03, 1] : dataType == 2 ? [0.94, 0.13, 0.03, 1] : [1, 1, 1, 1], // 颜色
glowPower: 0.6, glowPower: 0.6, // 发光程度
}, },
}, },
ground: true, ground: true, // 是否贴地
}; };
shipTrack.xbsjFromJSON(objConfig); shipTrack.xbsjFromJSON(objConfig);
return shipTrack; return shipTrack;

11
src/utils/earthMap/getCameraInfo.ts

@ -6,14 +6,14 @@ import { defHttp } from '/@/utils/http/axios';
import { addPin } from '@/utils/earthMap/earthObj'; import { addPin } from '@/utils/earthMap/earthObj';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { useEarthMapStore } from '/@/store/modules/earthMap'; import { useEarthMapStore } from '/@/store/modules/earthMap';
import { earthMapUrl } from '@/api/earth/earthMap' import { earthMapUrl } from '@/api/earth/earthMap';
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import $ from 'jquery'; import $ from 'jquery';
let userStore = useUserStore(); let userStore = useUserStore();
let store = useEarthMapStore(); let store = useEarthMapStore();
export default function getCameraInfo(models, type) { export default function getCameraInfo(models, type) {
console.log("加载站点"); console.log('加载站点');
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
//请求电线杆信息 //请求电线杆信息
defHttp.get({ url: earthMapUrl.queryCameraInfo }, { isTransformResponse: false }).then(async (res) => { defHttp.get({ url: earthMapUrl.queryCameraInfo }, { isTransformResponse: false }).then(async (res) => {
@ -107,6 +107,7 @@ async function setCamera(res, models, type) {
// gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1]; // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1];
gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1]; gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1];
} }
const modelConfig = { const modelConfig = {
ref: data.id, ref: data.id,
name: lineId, name: lineId,
@ -120,11 +121,7 @@ async function setCamera(res, models, type) {
scale: data.scale, scale: data.scale,
xbsjScale: data.xyzScale ? data.xyzScale.split(',') : [1, 1, 1], xbsjScale: data.xyzScale ? data.xyzScale.split(',') : [1, 1, 1],
xbsjPosition: [window.Cesium.Math.toRadians(data.longitude), window.Cesium.Math.toRadians(data.latitude), data.height], xbsjPosition: [window.Cesium.Math.toRadians(data.longitude), window.Cesium.Math.toRadians(data.latitude), data.height],
xbsjRotation: [ xbsjRotation: [window.Cesium.Math.toRadians(data.yaw), window.Cesium.Math.toRadians(data.pitch), window.Cesium.Math.toRadians(data.roll)],
window.Cesium.Math.toRadians(data.yaw),
window.Cesium.Math.toRadians(data.pitch),
window.Cesium.Math.toRadians(data.roll),
],
viewDistance: 150, viewDistance: 150,
distanceDisplayCondition: [1.0, 30000.0], distanceDisplayCondition: [1.0, 30000.0],
customProp: data.id, customProp: data.id,

9
src/utils/earthMap/listenMouseHandler.ts

@ -8,7 +8,7 @@ import { defHttp } from '/@/utils/http/axios';
import $ from 'jquery'; import $ from 'jquery';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { useEarthMapStore } from '/@/store/modules/earthMap'; import { useEarthMapStore } from '/@/store/modules/earthMap';
import { earthMapUrl } from '@/api/earth/earthMap' import { earthMapUrl } from '@/api/earth/earthMap';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { CircleScan } from '@/utils/earthMap/radarEntity'; import { CircleScan } from '@/utils/earthMap/radarEntity';
import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth'; import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth';
@ -19,7 +19,6 @@ let store = useEarthMapStore();
const { createMessage } = useMessage(); const { createMessage } = useMessage();
export default function listenMouseHandler(that) { export default function listenMouseHandler(that) {
const handler = new window.Cesium.ScreenSpaceEventHandler(window.$viewer.scene.canvas); const handler = new window.Cesium.ScreenSpaceEventHandler(window.$viewer.scene.canvas);
that._handler = handler; that._handler = handler;
//取消双击旋转事件 //取消双击旋转事件
@ -87,7 +86,7 @@ export default function listenMouseHandler(that) {
'</div> </a></li>' '</div> </a></li>'
); );
}); });
let cameraModal: any = document.getElementById('cameraModal') let cameraModal: any = document.getElementById('cameraModal');
cameraModal.style.left = click.position.x + -45 + 'px'; cameraModal.style.left = click.position.x + -45 + 'px';
cameraModal.style.top = click.position.y + -180 + 'px'; cameraModal.style.top = click.position.y + -180 + 'px';
that.cameraModalShow = true; that.cameraModalShow = true;
@ -97,9 +96,9 @@ export default function listenMouseHandler(that) {
}); });
} }
// 船只模型 // 船只模型
if (pickedFeature.id.xbsjType && pickedFeature.id.name.includes('船') && pickedFeature.id.xbsjType === 'Model') { if (pickedFeature.id.xbsjType && pickedFeature.id.name.includes('船')) {
that.AISInfoWindowShow = true; that.AISInfoWindowShow = true;
// 赋值船只场景id // 赋值船只场景id - 唯一标识 可通过该字段获取其余信息
that.ship_guid = pickedFeature.id.guid; that.ship_guid = pickedFeature.id.guid;
} }
//雷达扫描范围 //雷达扫描范围

196
src/utils/earthMap/shipDraw.ts

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com * @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-03 17:42:49 * @Date: 2024-01-03 17:42:49
* @LastEditors: Fuyuu 1805498209@qq.com * @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-09 10:35:50 * @LastEditTime: 2024-01-19 09:44:33
* @FilePath: \dt-admin-pc-v2\src\utils\earthMap\shipDraw.ts * @FilePath: \dt-admin-pc-v2\src\utils\earthMap\shipDraw.ts
* @Description: ,`customMade`, koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: ,`customMade`, koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@ -12,66 +12,186 @@
import { useEarthMapStore } from '/@/store/modules/earthMap'; import { useEarthMapStore } from '/@/store/modules/earthMap';
import { addShipTrack, addShipModel } from '@/utils/earthMap/earthObj'; import { addShipTrack, addShipModel } from '@/utils/earthMap/earthObj';
// 暂存store // 暂存store
const store = useEarthMapStore(); const store = useEarthMapStore();
// 船只数据列表 // 雷达船只数据列表
let shipDataList: any = []; let radarShipList: any = [];
// AIS船只数据列表
let aisShipList: any = [];
// 融合船只数据列表
let mixShipList: any = [];
// 绘制单个船只 // 角度转弧度
const drawShips = function (shipItem) { function toRadians(point) {
// 引入初始图片 return window.Cesium.Math.toRadians(point);
// let imageUrl = new URL(`../../assets/images/ship.png`, import.meta.url).href; }
// 引入高亮图片
// let imageUrl_a = new URL(`../../assets/images/ship_a.png`, import.meta.url).href; // 绘制AIS船只
const drawAISShips = function (shipItem) {
// 模型配置参数
let options = {
id: shipItem.trackId,
name: `${shipItem.trackId}号船_ais`,
modelUrl: window._CONFIG['domianURL'] + '/sys/common/static/greenShip.gltf',
position: [toRadians(shipItem.longitude + 0.00005), toRadians(shipItem.latitude + 0.00005), 0],
rotation: [(Math.PI / 180) * (shipItem.course - 90), 0, 0],
};
// 绘制船只
let shipModel = addShipModel(options, 1);
// 返回船只绘制信息
return shipModel;
};
// 绘制雷达船只
const drawRadarShips = function (shipItem) {
// 模型配置参数 // 模型配置参数
let options = { let options = {
id: shipItem.trackId, id: shipItem.trackId,
url: window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf', name: `${shipItem.trackId}号船_radar`,
modelUrl: window._CONFIG['domianURL'] + '/sys/common/static/yellowShip.gltf',
position: [toRadians(shipItem.longitude), toRadians(shipItem.latitude), 0], position: [toRadians(shipItem.longitude), toRadians(shipItem.latitude), 0],
rotation: [(Math.PI / 180) * (shipItem.course + 90), 0, 0], rotation: [(Math.PI / 180) * (shipItem.course - 90), 0, 0],
}; };
// 绘制船只 // 绘制船只
let shipModel = addShipModel(`${shipItem.trackId}号船`, options); let shipModel = addShipModel(options, 2);
// 返回船只绘制信息
return shipModel;
};
// 绘制融合船只
const drawMixShips = function (shipItem) {
// 模型配置参数
let options = {
id: shipItem.trackId,
name: `${shipItem.trackId}号船_mix`,
modelUrl: window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf',
position: [toRadians(shipItem.longitude + 0.0001), toRadians(shipItem.latitude + 0.0001), 0],
rotation: [(Math.PI / 180) * (shipItem.course - 90), 0, 0],
};
// 绘制船只
let shipModel = addShipModel(options, 3);
// 返回船只绘制信息 // 返回船只绘制信息
return shipModel; return shipModel;
}; };
// 角度转弧度 // 绘制地球上所有雷达船只
function toRadians(point) { export const drawRadarShipsList = function (radarItem) {
return window.Cesium.Math.toRadians(point); // 接收到的单个雷达船只信息
} let radarData = radarItem.radarTrack;
// 获取store中的雷达船只数据列表
radarShipList = store.radarShipList;
// 是否已经存在
let existingShip = radarShipList.find((shipItem) => shipItem.trackId === radarData.trackId);
if (existingShip) {
// 添加新的轨迹点
window.$earth.getObject(existingShip.track_guid).positions.push([toRadians(radarData.longitude), toRadians(radarData.latitude), 0]);
// 获取场景中的船只信息
let shipData = window.$earth.getObject(existingShip.guid);
// 更新位置和航向
shipData.xbsjPosition = [toRadians(radarData.longitude), toRadians(radarData.latitude), 0];
// 航向需要后续调整。。。
shipData.xbsjRotation = [(Math.PI / 180) * (radarData.course - 90), 0, 0];
} else {
// 添加新的雷达船只
radarShipList.push({
name: `${radarData.trackId}号船_radar`, // 名称
trackId: radarData.trackId, // 船只id
guid: drawRadarShips(radarData).xbsjGuid, // 船只场景id
// 根据不同的数据类型绘制不同的轨迹线 轨迹线guid,用于轨迹显隐
track_guid: addShipTrack([[toRadians(radarData.longitude), toRadians(radarData.latitude), 0]], 1).xbsjGuid,
azimuth: radarData.azimuth, // 方位角
course: radarData.course, // 航向
latitude: radarData.latitude, // 纬度
longitude: radarData.longitude, // 经度
radarId: radarData.radarId, // 雷达id
});
// 更新store
store.radarShipList = radarShipList;
}
};
// 绘制地球上所有ais船只(暂无AIS数据,使用雷达数据进行模拟)
export const drawAISShipsList = function (aisItem) {
// 接收到的单个ais船只信息
let aisData = aisItem.radarTrack;
// 获取store中的ais船只数据列表
aisShipList = store.aisShipList;
// 是否已经存在
let existingShip = aisShipList.find((shipItem) => shipItem.trackId === aisData.trackId);
if (existingShip) {
// 添加新的轨迹点
window.$earth
.getObject(existingShip.track_guid)
.positions.push([toRadians(aisData.longitude + 0.00005), toRadians(aisData.latitude + 0.00005), 0]);
// 获取场景中的船只信息
let shipData = window.$earth.getObject(existingShip.guid);
// 更新位置和航向
shipData.xbsjPosition = [toRadians(aisData.longitude + 0.00005), toRadians(aisData.latitude + 0.00005), 0];
// 航向需要后续调整。。。
shipData.xbsjRotation = [(Math.PI / 180) * (aisData.course - 90), 0, 0];
} else {
// 添加新的ais船只
aisShipList.push({
name: `${aisData.trackId}号船_ais`, // 名称
mmsi: aisData.trackId * 66, // MMSI
call_sign: aisData.trackId * 6, // 呼号
imo: aisData.trackId * 5, // IMO
bow_direction: 511.0, // 船首向
track_direction: 342.0, // 航迹向
ship_status: '锚泊', // 状态
ship_length: 85.4, // 船长
ship_width: 19.0, // 船宽
draft: 0.0, // 吃水
ship_type: '货船', // 类型
ship_speed: '20m/s', // 航速
destination: 'JIANGMEN,CN', // 目的地
nationality: 'CN', // 国籍
pre_arrival_time: '2024-01-08 14:40:11', // 预到时间
trackId: aisData.trackId, // 船只id
guid: drawAISShips(aisData).xbsjGuid, // 船只场景id
// 根据不同的数据类型绘制不同的轨迹线 轨迹线guid,用于轨迹显隐
track_guid: addShipTrack([[toRadians(aisData.longitude + 0.00005), toRadians(aisData.latitude + 0.00005), 0]], 2).xbsjGuid,
azimuth: aisData.azimuth, // 方位角
course: aisData.course, // 航向
latitude: aisData.latitude + 0.00005, // 纬度
longitude: aisData.longitude + 0.00005, // 经度
radarId: aisData.radarId, // 雷达Id
});
// 更新store
store.aisShipList = aisShipList;
}
};
// 绘制地球上所有船只和轨迹 // 绘制地球上所有融合船只(暂无融合数据,使用雷达数据进行模拟)
export const drawAllShips = function (message) { export const drawMixShipsList = function (mixItem) {
// 接收到的单个船只信息 // 接收到的单个融合船只信息
let messageData = JSON.parse(JSON.parse(message).radarTrack); let mixData = mixItem.radarTrack;
// 获取store中的船只数据列表 // 获取store中的融合船只数据列表
shipDataList = store.shipDataList; mixShipList = store.mixShipList;
// 是否已经存在 // 是否已经存在
let existingShip = shipDataList.find((shipItem) => shipItem.trackId === messageData.trackId); let existingShip = mixShipList.find((shipItem) => shipItem.trackId === mixData.trackId);
if (existingShip) { if (existingShip) {
// 添加新的轨迹点 // 添加新的轨迹点
window.$earth.getObject(existingShip.track_guid).positions.push([toRadians(messageData.longitude), toRadians(messageData.latitude), 0]); window.$earth.getObject(existingShip.track_guid).positions.push([toRadians(mixData.longitude + 0.0001), toRadians(mixData.latitude + 0.0001), 0]);
// 获取场景中的船只信息 // 获取场景中的船只信息
let shipData = window.$earth.getObject(existingShip.guid); let shipData = window.$earth.getObject(existingShip.guid);
// 更新位置和航向 // 更新位置和航向
shipData.xbsjPosition = [toRadians(messageData.longitude), toRadians(messageData.latitude), 0]; shipData.xbsjPosition = [toRadians(mixData.longitude + 0.0001), toRadians(mixData.latitude + 0.0001), 0];
// 航向需要后续调整。。。 // 航向需要后续调整。。。
shipData.xbsjRotation = [(Math.PI / 180) * (messageData.course + 90), 0, 0]; shipData.xbsjRotation = [(Math.PI / 180) * (mixData.course - 90), 0, 0];
} else { } else {
// 添加新的船只 // 添加新的融合船只
shipDataList.push({ mixShipList.push({
name: `${messageData.trackId}号船只`, // 名称 name: `${mixData.trackId}号船_mix`, // 名称
trackId: messageData.trackId, // 船只id trackId: mixData.trackId, // 船只id
guid: drawShips(messageData).xbsjGuid, // 船只模型id guid: drawMixShips(mixData).xbsjGuid, // 船只场景id
track_guid: addShipTrack([[toRadians(messageData.longitude), toRadians(messageData.latitude), 0]]).xbsjGuid, // 轨迹线guid,用于轨迹显隐 // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid,用于轨迹显隐
azimuth: messageData.azimuth, // 方位角 track_guid: addShipTrack([[toRadians(mixData.longitude + 0.0001), toRadians(mixData.latitude + 0.0001), 0]], 3).xbsjGuid,
course: messageData.course, // 航向 azimuth: mixData.azimuth, // 方位角
latitude: messageData.latitude, // 纬度 course: mixData.course, // 航向
longitude: messageData.longitude, // 经度 latitude: mixData.latitude + 0.0001, // 纬度
longitude: mixData.longitude + 0.0001, // 经度
radarId: mixData.radarId, // 雷达Id
}); });
// 更新store // 更新store
store.shipDataList = shipDataList; store.mixShipList = mixShipList;
} }
}; };

29
src/views/earthMap/edit/EarthComp.vue

@ -86,7 +86,9 @@
></AddModelWin> ></AddModelWin>
<AddRoamVideo v-if="addRoamVideoShow"></AddRoamVideo> <AddRoamVideo v-if="addRoamVideoShow"></AddRoamVideo>
<!-- AIS信息显示窗口 --> <!-- AIS信息显示窗口 -->
<AISInfoWindow v-if="AISInfoWindowShow" :ship_guid="ship_guid" :ship_aisData="ship_aisData"></AISInfoWindow> <AISInfoWindow v-if="AISInfoWindowShow" :ship_guid="ship_guid"></AISInfoWindow>
<!-- 跟踪船只窗口 -->
<TailAfterWindow v-if="TailAfterWindowShow"></TailAfterWindow>
</div> </div>
</template> </template>
@ -108,6 +110,8 @@
import WarnInfoList from '@/components/earthMap/WarnInfoList.vue'; import WarnInfoList from '@/components/earthMap/WarnInfoList.vue';
import AISInfoDetail from '@/components/earthMap/AISInfoDetail.vue'; import AISInfoDetail from '@/components/earthMap/AISInfoDetail.vue';
import AISInfoWindow from '@/components/earthMap/AISInfoWindow.vue'; import AISInfoWindow from '@/components/earthMap/AISInfoWindow.vue';
import TailAfterWindow from '@/components/earthMap/TailAfterWindow.vue';
import { getRealTime } from '@/utils/date'; import { getRealTime } from '@/utils/date';
import $mitt from '@/utils/earthMap/mitt'; import $mitt from '@/utils/earthMap/mitt';
import guid from '@/utils/earthMap/guid'; import guid from '@/utils/earthMap/guid';
@ -115,8 +119,8 @@
import { handleNodeType } from '@/utils/earthMap/handleNodeType'; import { handleNodeType } from '@/utils/earthMap/handleNodeType';
import { getRandomArr, getHeigthByLonLat } from '@/utils/earthMap/earth'; import { getRandomArr, getHeigthByLonLat } from '@/utils/earthMap/earth';
import redFlag from '@/assets/earthMap/redFlag.png'; import redFlag from '@/assets/earthMap/redFlag.png';
import { addModel, addPin, addViewShedRadar, addShipGroundImg, addShipTrack } from '@/utils/earthMap/earthObj'; import { addModel, addPin, addViewShedRadar, addShipTrack } from '@/utils/earthMap/earthObj';
import { drawAllShips } from '@/utils/earthMap/shipDraw'; import { drawAISShipsList, drawMixShipsList, drawRadarShipsList } from '@/utils/earthMap/shipDraw';
import hidePng from '@/assets/earthMap/hide.png'; import hidePng from '@/assets/earthMap/hide.png';
import alarmImg from '@/assets/earthMap/alarm.gif'; import alarmImg from '@/assets/earthMap/alarm.gif';
import VideoFusionWin from './components/VideoFusionWin.vue'; import VideoFusionWin from './components/VideoFusionWin.vue';
@ -231,6 +235,7 @@ import { nextTick } from 'vue';
VideoFusionWin, VideoFusionWin,
AISInfoDetail, AISInfoDetail,
AISInfoWindow, AISInfoWindow,
TailAfterWindow,
}, },
props: { props: {
// //
@ -475,12 +480,12 @@ import { nextTick } from 'vue';
PropsDrawInitShow = this.drawInitShow; PropsDrawInitShow = this.drawInitShow;
PropsKeyControlInitShow = this.keyControlInitShow; PropsKeyControlInitShow = this.keyControlInitShow;
/////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////
//AIS // AIS
AISInfoWindowShow = false; AISInfoWindowShow = false;
// guid //
ship_guid = '123456'; TailAfterWindowShow = false;
// ais // id
ship_aisData = {}; ship_guid = '';
// //
// pin: any = undefined; // pin: any = undefined;
@ -1154,7 +1159,13 @@ import { nextTick } from 'vue';
}); });
// mqtt // mqtt
$mitt.on('deviceCmd', (message: any) => { $mitt.on('deviceCmd', (message: any) => {
drawAllShips(message); let data = JSON.parse(message);
//
drawRadarShipsList(data);
// AIS
drawAISShipsList(data);
//
drawMixShipsList(data);
}); });
} }
} }

531
src/views/earthMap/edit/EarthCompTest.vue

@ -13,8 +13,7 @@
</header> </header>
</div> </div>
<div> <div>
<a-radio-group default-value="satellite" button-style="solid" size="small" @change="radioChange" <a-radio-group default-value="satellite" button-style="solid" size="small" @change="radioChange" class="radioBtn" v-show="radioBtnShow">
class="radioBtn" v-show="radioBtnShow">
<a-radio-button value="satellite"> 卫星影像</a-radio-button> <a-radio-button value="satellite"> 卫星影像</a-radio-button>
<a-radio-button value="vector"> 矢量地图</a-radio-button> <a-radio-button value="vector"> 矢量地图</a-radio-button>
</a-radio-group> </a-radio-group>
@ -30,8 +29,14 @@
<a-button @click="roamPathSet()">视频融合</a-button> <a-button @click="roamPathSet()">视频融合</a-button>
</div> </div>
<!-- 视频融合 --> <!-- 视频融合 -->
<VideoFusionWin v-if="VideoFusionWinShow" :cameraList="cameraList" :monitorPosition="monitorPosition" <VideoFusionWin
:updateModel="toItemObj.updateModel" :isUpdate="toItemObj.isUpdate" :userSave="toItemObj.userSave"> v-if="VideoFusionWinShow"
:cameraList="cameraList"
:monitorPosition="monitorPosition"
:updateModel="toItemObj.updateModel"
:isUpdate="toItemObj.isUpdate"
:userSave="toItemObj.userSave"
>
</VideoFusionWin> </VideoFusionWin>
<!-- 地标弹窗 --> <!-- 地标弹窗 -->
<!-- <div id="poiModal" class="poiModal" v-show="poiModalShow" ref="poiModal"> <!-- <div id="poiModal" class="poiModal" v-show="poiModalShow" ref="poiModal">
@ -50,62 +55,78 @@
</audio> </audio>
<!-- 云台控制弹窗 --> <!-- 云台控制弹窗 -->
<video-window :id="videoWindowProps.id" :visible.sync="videoWindowProps.visible" :title="videoWindowProps.title" <video-window
:videoUrl="videoWindowProps.videoUrl" :cameraIp="videoWindowProps.cameraIp" :id="videoWindowProps.id"
:cameraUser="videoWindowProps.cameraUser" :cameraPwd="videoWindowProps.cameraPwd" :visible.sync="videoWindowProps.visible"
:isAlarm="videoWindowProps.isAlarm" :playRecord="videoWindowProps.playRecord" :title="videoWindowProps.title"
:warnTime="videoWindowProps.warnTime" :warnEvent="videoWindowProps.warnEvent" /> :videoUrl="videoWindowProps.videoUrl"
:cameraIp="videoWindowProps.cameraIp"
:cameraUser="videoWindowProps.cameraUser"
:cameraPwd="videoWindowProps.cameraPwd"
:isAlarm="videoWindowProps.isAlarm"
:playRecord="videoWindowProps.playRecord"
:warnTime="videoWindowProps.warnTime"
:warnEvent="videoWindowProps.warnEvent"
/>
<!-- 左侧操作栏 --> <!-- 左侧操作栏 -->
<Toolbar v-if="toolbarShow" :setLabelStatus="setLabelStatus"></Toolbar> <Toolbar v-if="toolbarShow" :setLabelStatus="setLabelStatus"></Toolbar>
<AddModelWin v-if="addModelWinShow" :setLabelStatus="setLabelStatus" :czmObject="czmObject" :node="node" <AddModelWin
:type="type" :lineId="lineId" :areaCode="areaCode" :areaByNodeId="areaByNodeIdModel" v-if="addModelWinShow"
:setIconByRef="setIconByRef" :el="el" :eidtId="eidtId"></AddModelWin> :setLabelStatus="setLabelStatus"
:czmObject="czmObject"
:node="node"
:type="type"
:lineId="lineId"
:areaCode="areaCode"
:areaByNodeId="areaByNodeIdModel"
:setIconByRef="setIconByRef"
:el="el"
:eidtId="eidtId"
></AddModelWin>
<AddRoamVideo v-if="addRoamVideoShow"></AddRoamVideo> <AddRoamVideo v-if="addRoamVideoShow"></AddRoamVideo>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { toRefs, watch, nextTick, ref, reactive, onMounted, getCurrentInstance, onBeforeUnmount } from 'vue'; import { toRefs, watch, nextTick, ref, reactive, onMounted, getCurrentInstance, onBeforeUnmount } from 'vue';
import sceneTree from '@/assets/earthMap/resjson/sc.json'; import sceneTree from '@/assets/earthMap/resjson/sc.json';
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import earthUtils from '@/utils/earthMap/earth'; import earthUtils from '@/utils/earthMap/earth';
import _ from 'lodash'; import _ from 'lodash';
import $ from 'jquery'; import $ from 'jquery';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { useEarthMapStore } from '/@/store/modules/earthMap'; import { useEarthMapStore } from '/@/store/modules/earthMap';
import Toolbar from '@/components/earthMap/Toolbar.vue'; import Toolbar from '@/components/earthMap/Toolbar.vue';
import AddModelWin from '@/components/earthMap/toolbar/AddModelWin.vue'; import AddModelWin from '@/components/earthMap/toolbar/AddModelWin.vue';
import AddRoamVideo from '@/components/earthMap/toolbar/AddRoamVideo.vue'; import AddRoamVideo from '@/components/earthMap/toolbar/AddRoamVideo.vue';
import VideoSplitScreen from '@/components/earthMap/VideoSplitScreen.vue'; import VideoSplitScreen from '@/components/earthMap/VideoSplitScreen.vue';
import VideoWindow from '@/components/earthMap/VideoWindow.vue'; import VideoWindow from '@/components/earthMap/VideoWindow.vue';
import WarnInfoList from '@/components/earthMap/WarnInfoList.vue'; import WarnInfoList from '@/components/earthMap/WarnInfoList.vue';
import { getRealTime } from '@/utils/date'; import { getRealTime } from '@/utils/date';
import $mitt from '@/utils/earthMap/mitt'; import $mitt from '@/utils/earthMap/mitt';
import { drawInit } from '@/utils/earthMap/earthDraw'; import { drawInit } from '@/utils/earthMap/earthDraw';
import { keyControlInit } from '@/utils/earthMap/keyControlInit'; import { keyControlInit } from '@/utils/earthMap/keyControlInit';
import redFlag from '@/assets/earthMap/redFlag.png'; import redFlag from '@/assets/earthMap/redFlag.png';
import { addModel, addPin, addViewShedRadar, addShipGroundImg, addShipTrack } from '@/utils/earthMap/earthObj'; import { addModel, addPin, addViewShedRadar, addShipTrack } from '@/utils/earthMap/earthObj';
import { drawAllShips } from '@/utils/earthMap/shipDraw'; import { drawAllShips } from '@/utils/earthMap/shipDraw';
import hidePng from '@/assets/earthMap/hide.png'; import hidePng from '@/assets/earthMap/hide.png';
import alarmImg from '@/assets/earthMap/alarm.gif'; import alarmImg from '@/assets/earthMap/alarm.gif';
import VideoFusionWin from './components/VideoFusionWin.vue'; import VideoFusionWin from './components/VideoFusionWin.vue';
import { useMessage } from "/@/hooks/web/useMessage"; import { useMessage } from '/@/hooks/web/useMessage';
import circleDot2 from '@/assets/earthMap/circleDot2.png'; import circleDot2 from '@/assets/earthMap/circleDot2.png';
import circleDot1 from '@/assets/earthMap/circleDot1.png'; import circleDot1 from '@/assets/earthMap/circleDot1.png';
import circleDot3 from '@/assets/earthMap/circleDot3.png'; import circleDot3 from '@/assets/earthMap/circleDot3.png';
const userStore = useUserStore(); const userStore = useUserStore();
const store = useEarthMapStore(); const store = useEarthMapStore();
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const audio = ref() // const audio = ref(); //
const props = defineProps({ const props = defineProps({});
}); class HandleNodeType {
class HandleNodeType {
#sn; #sn;
#sensorCallback; #sensorCallback;
#modelCallback; #modelCallback;
@ -166,33 +187,33 @@ class HandleNodeType {
this.#default ? this.#default() : null; this.#default ? this.#default() : null;
} }
} }
} }
function setClassEl(setClassEl1, setClassEl2, checked) { function setClassEl(setClassEl1, setClassEl2, checked) {
if (checked) { if (checked) {
setClassChecked(setClassEl1, setClassEl2); setClassChecked(setClassEl1, setClassEl2);
} else { } else {
setClassNoChecked(setClassEl1, setClassEl2); setClassNoChecked(setClassEl1, setClassEl2);
} }
} }
function setClassChecked(setClassEl1, setClassEl2) { function setClassChecked(setClassEl1, setClassEl2) {
// node.checkStatus = 'checked' // node.checkStatus = 'checked'
// node.disabled = '' // node.disabled = ''
//*** */ //*** */
setClassEl1.className = 'xbsj-checkbox-wrapper xbsj-checkbox-wrapper-checked xbsj-checkbox-default'; setClassEl1.className = 'xbsj-checkbox-wrapper xbsj-checkbox-wrapper-checked xbsj-checkbox-default';
setClassEl2.className = 'xbsj-checkbox xbsj-checkbox-checked'; setClassEl2.className = 'xbsj-checkbox xbsj-checkbox-checked';
} }
function setClassNoChecked(setClassEl1, setClassEl2) { function setClassNoChecked(setClassEl1, setClassEl2) {
// node.checkStatus = '' // node.checkStatus = ''
// node.disabled = 'disabled' // node.disabled = 'disabled'
// //
setClassEl1.className = 'xbsj-checkbox-wrapper xbsj-checkbox-wrapper-disabled xbsj-checkbox-default'; setClassEl1.className = 'xbsj-checkbox-wrapper xbsj-checkbox-wrapper-disabled xbsj-checkbox-default';
setClassEl2.className = 'xbsj-checkbox xbsj-checkbox-disabled'; setClassEl2.className = 'xbsj-checkbox xbsj-checkbox-disabled';
} }
function classMutationObserver(el, el1, checkedStauts, id) { function classMutationObserver(el, el1, checkedStauts, id) {
// or // or
const config = { attributes: true, childList: false, subtree: false }; const config = { attributes: true, childList: false, subtree: false };
const callback1 = function (mutationsList, observer) { const callback1 = function (mutationsList, observer) {
@ -218,9 +239,9 @@ function classMutationObserver(el, el1, checkedStauts, id) {
const observer1 = new MutationObserver(callback1); const observer1 = new MutationObserver(callback1);
// //
observer1.observe(el, config); observer1.observe(el, config);
} }
function disabledMutationObserver(el) { function disabledMutationObserver(el) {
const config = { attributes: true, childList: false, subtree: false }; const config = { attributes: true, childList: false, subtree: false };
const callback1 = function (mutationsList, observer) { const callback1 = function (mutationsList, observer) {
const el1 = mutationsList[0]; const el1 = mutationsList[0];
@ -231,23 +252,22 @@ function disabledMutationObserver(el) {
const observe1 = new MutationObserver(callback1); const observe1 = new MutationObserver(callback1);
// //
observe1.observe(el, config); observe1.observe(el, config);
} }
//
let _earth: any = undefined;
let _viewer: any = undefined;
let earthTitle = '态势监控一张图'; //
const realTime: any = ref('……'); let _earth: any = undefined;
// EarthCesiumvue使线 let _viewer: any = undefined;
_earthUI = undefined; let earthTitle = '态势监控一张图';
_pin = undefined; const realTime: any = ref('……');
let _handler: any = undefined; // EarthCesiumvue使线
sceneTree: any = sceneTree;
_earthUI = undefined;
_pin = undefined;
let _handler: any = undefined;
sceneTree: any = sceneTree;
let url: any = { let url: any = {
queryLabelList: 'military/msMapLabel/queryLabelAndDeviceList', queryLabelList: 'military/msMapLabel/queryLabelAndDeviceList',
queryLineList: 'military/msMapLine/list', queryLineList: 'military/msMapLine/list',
queryCameraInfo: 'military/camera/site/getCameraInfoForEarth', queryCameraInfo: 'military/camera/site/getCameraInfoForEarth',
@ -295,20 +315,20 @@ let url: any = {
perimeterControl: '/third/api/perimeterControl', perimeterControl: '/third/api/perimeterControl',
// //
sendRadarAlarmByWebSocket: '/military/warn/sendRadarAlarmByWebSocket', sendRadarAlarmByWebSocket: '/military/warn/sendRadarAlarmByWebSocket',
}; };
let cameraData: any = {}; let cameraData: any = {};
const cameraModalShow = ref(false); const cameraModalShow = ref(false);
poiModalShow = false; poiModalShow = false;
let radioBtnShow = ref(true); let radioBtnShow = ref(true);
glmId: any = []; glmId: any = [];
let spinning = ref(false); let spinning = ref(false);
let earthChangeSpin = ref(false); let earthChangeSpin = ref(false);
let websock: any = []; let websock: any = [];
let timer: any = null; // let timer: any = null; //
let timer2: any = null; // let timer2: any = null; //
// - // -
let alarmTrackClearTimer: any = null; let alarmTrackClearTimer: any = null;
let videoWindowProps: any = ref({ let videoWindowProps: any = ref({
visible: false, visible: false,
isAlarm: false, isAlarm: false,
id: '', id: '',
@ -327,62 +347,59 @@ let videoWindowProps: any = ref({
warnType: 0, warnType: 0,
warnContent: '', warnContent: '',
}, },
}); });
// - ref // - ref
let sceneTreeOldRefValue = ''; let sceneTreeOldRefValue = '';
let sceneInfo: any = null; let sceneInfo: any = null;
// By Ref // By Ref
nodeConfigByRef = new Map(); nodeConfigByRef = new Map();
let nodeCheckedByRef = new Map(); let nodeCheckedByRef = new Map();
let areaByNodeId = new Map(); let areaByNodeId = new Map();
let statusByNodeId = new Map(); let statusByNodeId = new Map();
let imgByRef = new Map(); let imgByRef = new Map();
let radarAlarmDataMap = new Map(); let radarAlarmDataMap = new Map();
wbUnifiedResponse = false; wbUnifiedResponse = false;
let hostDeviceMapById = new Map(); let hostDeviceMapById = new Map();
let alarmInfoMap = new Map(); let alarmInfoMap = new Map();
toolbarShow = false; toolbarShow = false;
//addModelWin //addModelWin
addModelWinShow = false; addModelWinShow = false;
czmObject: any = null; czmObject: any = null;
node: any = null; node: any = null;
type = ''; type = '';
lineId = ''; lineId = '';
areaCode = ''; areaCode = '';
areaByNodeIdModel = ''; areaByNodeIdModel = '';
el: any = null; el: any = null;
eidtId: any = null; eidtId: any = null;
//addroamVideo //addroamVideo
addRoamVideoShow = false; addRoamVideoShow = false;
// //
const VideoFusionWinShow = ref(false); const VideoFusionWinShow = ref(false);
// //
toItemObj: any = { toItemObj: any = {
updateModel: {}, updateModel: {},
isUpdate: true, isUpdate: true,
userSave: {}, userSave: {},
}; };
// //
domKey: any = ''; domKey: any = '';
// //
cameraList: any = []; cameraList: any = [];
// //
monitorPosition: any = []; monitorPosition: any = [];
onMounted(async () => {
window.XE.ready()
.then(() => {
onMounted(async () => {
window.XE.ready().then(() => {
// //
return window.XE.HTML.loadJS('/earthsdk/XbsjEarth-Plugins/plottingSymbol/plottingSymbol.js'); return window.XE.HTML.loadJS('/earthsdk/XbsjEarth-Plugins/plottingSymbol/plottingSymbol.js');
}).then(async () => { })
.then(async () => {
// //
await initMap() await initMap();
// //
window.guid = guid; window.guid = guid;
// //
@ -394,8 +411,9 @@ onMounted(async () => {
return false; return false;
}; };
return true return true;
}).then(() => { })
.then(() => {
// DOM jq // DOM jq
nextTick(() => { nextTick(() => {
{ {
@ -414,7 +432,7 @@ onMounted(async () => {
}); });
} }
}); });
return true return true;
}) })
.then(() => { .then(() => {
// //
@ -428,20 +446,19 @@ onMounted(async () => {
radarAlarmTimeOutCheck(); radarAlarmTimeOutCheck();
}, 6 * 1000); }, 6 * 1000);
} }
return true return true;
});
}); });
}) //
function initMap() {
//
function initMap() {
_earth = new window.XE.Earth('earthContainer'); _earth = new window.XE.Earth('earthContainer');
window.$earth = _earth; window.$earth = _earth;
window.$viewer = _viewer = window.$earth.czm.viewer; window.$viewer = _viewer = window.$earth.czm.viewer;
} }
// //
async function fly() { async function fly() {
let position, rotation, viewDistance, duration; let position, rotation, viewDistance, duration;
const sceneId = userStore.userInfo?.sceneId; const sceneId = userStore.userInfo?.sceneId;
await defHttp await defHttp
@ -476,16 +493,15 @@ async function fly() {
_earth.camera.flyTo(position, viewDistance, rotation, duration); _earth.camera.flyTo(position, viewDistance, rotation, duration);
}; };
}); });
} }
/** /**
* 保存更改的ref到模型和后台数据中; * 保存更改的ref到模型和后台数据中;
* @param {Object} model 当前模型 * @param {Object} model 当前模型
* @param {string} newRef 新的ref * @param {string} newRef 新的ref
* @param {string} oldRef 旧的ref * @param {string} oldRef 旧的ref
*/ */
const changeRef = _.debounce(function (model, newRef, oldRef) { const changeRef = _.debounce(function (model, newRef, oldRef) {
// ref // ref
if (newRef !== oldRef && oldRef !== '') { if (newRef !== oldRef && oldRef !== '') {
// //
@ -520,32 +536,28 @@ const changeRef = _.debounce(function (model, newRef, oldRef) {
}) })
.run(); .run();
} }
}, 150); }, 150);
function handleNodeType(sn) { function handleNodeType(sn) {
return new HandleNodeType(sn); return new HandleNodeType(sn);
} }
// //
function guid() { function guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (Math.random() * 16) | 0, var r = (Math.random() * 16) | 0,
v = c == 'x' ? r : (r & 0x3) | 0x8; v = c == 'x' ? r : (r & 0x3) | 0x8;
return v.toString(16); return v.toString(16);
}); });
} }
// //
function roamPathSet() { function roamPathSet() {
// //
VideoFusionWinShow.value = true; VideoFusionWinShow.value = true;
// //
cameraModalShow.value = false; cameraModalShow.value = false;
} }
function listenMittHandler(earthUI = null) {
function listenMittHandler(earthUI = null) {
$mitt.on('winShow', function (e: any) { $mitt.on('winShow', function (e: any) {
VideoFusionWinShow.value = e; VideoFusionWinShow.value = e;
}); });
@ -599,21 +611,18 @@ function listenMittHandler(earthUI = null) {
$mitt.on('deviceCmd', (message: any) => { $mitt.on('deviceCmd', (message: any) => {
drawAllShips(message); drawAllShips(message);
}); });
}
} // /
function showAlarmPin(show) {
// /
function showAlarmPin(show) {
alarmInfoMap.forEach((item, _index) => { alarmInfoMap.forEach((item, _index) => {
item.pin.show = show; item.pin.show = show;
item.pin._div.hidden = !show; item.pin._div.hidden = !show;
item.scanline.show = !show; item.scanline.show = !show;
}); });
} }
// on-change-title 使 lodash.debounce () // on-change-title 使 lodash.debounce ()
const handleChangeTitle = _.debounce(function (options) { const handleChangeTitle = _.debounce(function (options) {
const sn = options.item._inner.sn; const sn = options.item._inner.sn;
const newTitle = options.title; const newTitle = options.title;
@ -680,10 +689,10 @@ const handleChangeTitle = _.debounce(function (options) {
}); });
}) })
.run(); .run();
}, 150); }, 150);
// //
function handlerModelDelete(url, params) { function handlerModelDelete(url, params) {
// return deleteAction(url, params).then((res) => { // return deleteAction(url, params).then((res) => {
return defHttp return defHttp
.delete( .delete(
@ -700,16 +709,16 @@ function handlerModelDelete(url, params) {
createMessage.error('删除失败'); createMessage.error('删除失败');
} }
}); });
} }
// //
function getRealTime() { function getRealTime() {
timer2 = setInterval(() => { timer2 = setInterval(() => {
realTime.value = getRealTime(); realTime.value = getRealTime();
}, 1000); }, 1000);
} }
const cameraPositionChange = _.debounce( const cameraPositionChange = _.debounce(
(that) => { (that) => {
let height = window.$earth.camera.position[2]; let height = window.$earth.camera.position[2];
if (height < 100) { if (height < 100) {
@ -722,9 +731,9 @@ const cameraPositionChange = _.debounce(
}, },
500, 500,
{ maxWait: 1000 } { maxWait: 1000 }
); );
// //
function setIconByRef(ref, el) { function setIconByRef(ref, el) {
const status = statusByNodeId.get(ref); const status = statusByNodeId.get(ref);
if (status != undefined && status != null) { if (status != undefined && status != null) {
let img = imgByRef.get(ref); let img = imgByRef.get(ref);
@ -745,9 +754,9 @@ function setIconByRef(ref, el) {
} }
img.setAttribute('style', 'width:16px;height:16px;margin-top:7px'); img.setAttribute('style', 'width:16px;height:16px;margin-top:7px');
} }
} }
function getRandomArr(arr, count) { function getRandomArr(arr, count) {
// //
var shuffled = arr.slice(0), var shuffled = arr.slice(0),
i = arr.length, i = arr.length,
@ -762,9 +771,9 @@ function getRandomArr(arr, count) {
shuffled[i] = temp; shuffled[i] = temp;
} }
return shuffled.slice(min); return shuffled.slice(min);
} }
function setLoginPoint(data: any) { function setLoginPoint(data: any) {
let position = [data.lon, data.lat, 0]; let position = [data.lon, data.lat, 0];
let rotation = [data.rotationX, data.rotationY, data.rotationZ]; let rotation = [data.rotationX, data.rotationY, data.rotationZ];
let viewDistance = data.viewDistance; let viewDistance = data.viewDistance;
@ -799,11 +808,10 @@ function setLoginPoint(data: any) {
pin.onclick = function () { pin.onclick = function () {
_earth.camera.flyTo(position, viewDistance, rotation, duration); _earth.camera.flyTo(position, viewDistance, rotation, duration);
}; };
} }
// //
function getCameraInfo(models, type) { function getCameraInfo(models, type) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
//线 //线
defHttp.get({ url: url.queryCameraInfo }, { isTransformResponse: false }).then(async (res) => { defHttp.get({ url: url.queryCameraInfo }, { isTransformResponse: false }).then(async (res) => {
@ -815,10 +823,9 @@ function getCameraInfo(models, type) {
} }
}); });
}); });
} }
function getPatrolRouteInfo(models) { function getPatrolRouteInfo(models) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
//线 //线
defHttp.get({ url: url.queryPatrolRouteInfo }, { isTransformResponse: false }).then(async (res) => { defHttp.get({ url: url.queryPatrolRouteInfo }, { isTransformResponse: false }).then(async (res) => {
@ -852,15 +859,14 @@ function getPatrolRouteInfo(models) {
} }
}); });
}); });
} }
function removeHandler() { function removeHandler() {
_handler.removeInputAction(window.Cesium.ScreenSpaceEventType.MOUSE_MOVE); // _handler.removeInputAction(window.Cesium.ScreenSpaceEventType.MOUSE_MOVE); //
_handler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_CLICK); // _handler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_CLICK); //
} }
function radioChange(e) { function radioChange(e) {
loadingStatus(); loadingStatus();
if (`${e.target.value}` == 'satellite') { if (`${e.target.value}` == 'satellite') {
window.$earth.sceneTree.$refs.satellite.czmObject.show = true; window.$earth.sceneTree.$refs.satellite.czmObject.show = true;
@ -869,29 +875,28 @@ function radioChange(e) {
window.$earth.sceneTree.$refs.vector.czmObject.show = true; window.$earth.sceneTree.$refs.vector.czmObject.show = true;
window.$earth.sceneTree.$refs.satellite.czmObject.show = false; window.$earth.sceneTree.$refs.satellite.czmObject.show = false;
} }
} }
function radioChangeBtnShow(callback) { function radioChangeBtnShow(callback) {
radioBtnShow.value = !radioBtnShow.value; radioBtnShow.value = !radioBtnShow.value;
callback(radioBtnShow.value); // callback(radioBtnShow.value); //
} }
function loadingStatus() { function loadingStatus() {
earthChangeSpin.value = !earthChangeSpin.value; // earthChangeSpin.value = !earthChangeSpin.value; //
setTimeout(() => { setTimeout(() => {
earthChangeSpin.value = !earthChangeSpin.value; //3 earthChangeSpin.value = !earthChangeSpin.value; //3
}, 3000); }, 3000);
} }
function keepAlive() { function keepAlive() {
defHttp.get({ url: url.keepAlive }, { isTransformResponse: false }).then((res) => { }); defHttp.get({ url: url.keepAlive }, { isTransformResponse: false }).then((res) => {});
} }
function closeClient() { function closeClient() {
chrome.call('close'); chrome.call('close');
} }
function setLabelStatus(device, labelCode, id, code) { function setLabelStatus(device, labelCode, id, code) {
const args = { const args = {
device: device, device: device,
code: code, // 0- 1- 2- 3- code: code, // 0- 1- 2- 3-
@ -954,8 +959,8 @@ function setLabelStatus(device, labelCode, id, code) {
return err; return err;
}); });
} }
} }
function getAllModelInfo(models) { function getAllModelInfo(models) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// //
@ -1148,9 +1153,9 @@ function getAllModelInfo(models) {
} }
}); });
}); });
} }
// //
function showOrHideChild(clickNode, earthUI, parentChecked) { function showOrHideChild(clickNode, earthUI, parentChecked) {
const childs = clickNode.children; const childs = clickNode.children;
if (childs && childs.length > 0) { if (childs && childs.length > 0) {
for (const child of childs) { for (const child of childs) {
@ -1184,12 +1189,10 @@ function showOrHideChild(clickNode, earthUI, parentChecked) {
} }
} }
} }
} }
/* websocket-start */ /* websocket-start */
function initWebSocket(configName) { function initWebSocket(configName) {
if ('WebSocket' in window) { if ('WebSocket' in window) {
let url = ''; let url = '';
switch (configName) { switch (configName) {
@ -1220,14 +1223,14 @@ function initWebSocket(configName) {
} else { } else {
console.log('当前浏览器不支持websocket,请更换浏览器!'); console.log('当前浏览器不支持websocket,请更换浏览器!');
} }
} }
function websocketonopen(e) { function websocketonopen(e) {
console.log('WebSocket连接成功'); console.log('WebSocket连接成功');
} }
function websocketonerror(e) { function websocketonerror(e) {
console.log('WebSocket连接发生错误'); console.log('WebSocket连接发生错误');
} }
let loreadAlarmInfo = _.debounce( let loreadAlarmInfo = _.debounce(
(url, eventSerialNum) => { (url, eventSerialNum) => {
defHttp defHttp
.get( .get(
@ -1248,8 +1251,8 @@ let loreadAlarmInfo = _.debounce(
}, },
2000, 2000,
{ maxWait: 3000, trailing: true } { maxWait: 3000, trailing: true }
); );
async function websocketonmessage(e) { async function websocketonmessage(e) {
// //
var data = eval('(' + e.data + ')'); var data = eval('(' + e.data + ')');
const cesium = window.Cesium; const cesium = window.Cesium;
@ -1571,12 +1574,12 @@ async function websocketonmessage(e) {
} else if (data.cmd == 'eventPublish') { } else if (data.cmd == 'eventPublish') {
window.getEventData(); window.getEventData();
} }
} }
function websocketclose(e) { function websocketclose(e) {
console.log('connection closed (' + e.code + ')'); console.log('connection closed (' + e.code + ')');
createMessage.warn('websocket连接已断开', 3); createMessage.warn('websocket连接已断开', 3);
} }
function websocketdosend(configName) { function websocketdosend(configName) {
// //
spinning.value = !spinning.value; // spinning.value = !spinning.value; //
console.log('websock[configName]', websock[configName]); console.log('websock[configName]', websock[configName]);
@ -1599,11 +1602,10 @@ function websocketdosend(configName) {
spinning.value = !spinning.value; // spinning.value = !spinning.value; //
}, 3000); }, 3000);
} }
} }
/* websocket-end */ /* websocket-end */
function radarAlarmTimeOutCheck() { function radarAlarmTimeOutCheck() {
const now = Date.now(); const now = Date.now();
const timeout = 5 * 60 * 1000; const timeout = 5 * 60 * 1000;
// //
@ -1616,8 +1618,8 @@ function radarAlarmTimeOutCheck() {
clearAlarmModel(key); clearAlarmModel(key);
} }
}); });
} }
function clearRadarAlarmModel(radarAlarmDataMap, eventNum) { function clearRadarAlarmModel(radarAlarmDataMap, eventNum) {
if (radarAlarmDataMap.has(eventNum)) { if (radarAlarmDataMap.has(eventNum)) {
let alarmData = radarAlarmDataMap.get(eventNum); let alarmData = radarAlarmDataMap.get(eventNum);
for (let target of alarmData.target) { for (let target of alarmData.target) {
@ -1629,8 +1631,8 @@ function clearRadarAlarmModel(radarAlarmDataMap, eventNum) {
} }
radarAlarmDataMap.delete(eventNum); radarAlarmDataMap.delete(eventNum);
} }
} }
function clearAlarmModel(eventNum) { function clearAlarmModel(eventNum) {
// let alarmInfoMapCopy = alarmInfoMap; // let alarmInfoMapCopy = alarmInfoMap;
// let radarAlarmDataMapCopy = radarAlarmDataMap; // let radarAlarmDataMapCopy = radarAlarmDataMap;
if (alarmInfoMap.has(eventNum)) { if (alarmInfoMap.has(eventNum)) {
@ -1642,11 +1644,10 @@ function clearAlarmModel(eventNum) {
alarmInfoMap.delete(eventNum); alarmInfoMap.delete(eventNum);
} }
clearRadarAlarmModel(radarAlarmDataMap, eventNum); clearRadarAlarmModel(radarAlarmDataMap, eventNum);
} }
// //
async function getHeigthByLonLat(lon = 88.8296258, lat = 27.4061859) { async function getHeigthByLonLat(lon = 88.8296258, lat = 27.4061859) {
var positions = [window.Cesium.Cartographic.fromDegrees(lon, lat)]; var positions = [window.Cesium.Cartographic.fromDegrees(lon, lat)];
// var promise = Cesium.sampleTerrain(this._viewer.terrainProvider, 13, positions); // var promise = Cesium.sampleTerrain(this._viewer.terrainProvider, 13, positions);
var promise = window.Cesium.sampleTerrainMostDetailed(_viewer.terrainProvider, positions); var promise = window.Cesium.sampleTerrainMostDetailed(_viewer.terrainProvider, positions);
@ -1659,9 +1660,9 @@ async function getHeigthByLonLat(lon = 88.8296258, lat = 27.4061859) {
/* var terCartographic = new Cesium.Cartographic(1.5503694435245020004000376611976, 0.47832817936864542131039019315313, 0) /* var terCartographic = new Cesium.Cartographic(1.5503694435245020004000376611976, 0.47832817936864542131039019315313, 0)
var terHigh = this._viewer.scene.globe.getHeight(terCartographic); var terHigh = this._viewer.scene.globe.getHeight(terCartographic);
return terHigh; */ return terHigh; */
} }
function cloneModel(modelObject: any) { function cloneModel(modelObject: any) {
if (modelObject.czmObject.xbsjType === 'Model') { if (modelObject.czmObject.xbsjType === 'Model') {
const modelConfig = { const modelConfig = {
ref: '', ref: '',
@ -1713,8 +1714,8 @@ function cloneModel(modelObject: any) {
} }
// return model // return model
} }
function cloneShamNode(oldRef, id, title) { function cloneShamNode(oldRef, id, title) {
const shamNode = window.$earth.sceneTree.$refs['node_' + oldRef]; const shamNode = window.$earth.sceneTree.$refs['node_' + oldRef];
const newShamNode = { const newShamNode = {
ref: 'node_' + id, ref: 'node_' + id,
@ -1724,8 +1725,8 @@ function cloneShamNode(oldRef, id, title) {
}; };
// that.currentModel = response.result // that.currentModel = response.result
shamNode.parent.children.push(newShamNode); shamNode.parent.children.push(newShamNode);
} }
function getAreaCode(item) { function getAreaCode(item) {
const currentRef = item._inner.sn.ref; const currentRef = item._inner.sn.ref;
if (!areaByNodeId.has(currentRef)) { if (!areaByNodeId.has(currentRef)) {
if (item.parent) { if (item.parent) {
@ -1734,9 +1735,9 @@ function getAreaCode(item) {
} else { } else {
return areaByNodeId.get(currentRef); return areaByNodeId.get(currentRef);
} }
} }
function setAllLabelStatus(selectRef, item, wbUnifiedResponse) { function setAllLabelStatus(selectRef, item, wbUnifiedResponse) {
// //
if (selectRef.startsWith('monitor')) { if (selectRef.startsWith('monitor')) {
let grandsons: any = []; let grandsons: any = [];
@ -1801,7 +1802,8 @@ function setAllLabelStatus(selectRef, item, wbUnifiedResponse) {
{ {
url: url.setDefenseArea, url: url.setDefenseArea,
params: args, params: args,
}, { isTransformResponse: false } },
{ isTransformResponse: false }
) )
.then((response) => { .then((response) => {
if (!response.success) { if (!response.success) {
@ -1886,12 +1888,10 @@ function setAllLabelStatus(selectRef, item, wbUnifiedResponse) {
// break // break
} }
} }
} }
// //
onBeforeUnmount(() => { onBeforeUnmount(() => {
// vue // vue
_earth = _earth && _earth.destroy(); _earth = _earth && _earth.destroy();
websocketclose(null); websocketclose(null);
@ -1899,6 +1899,5 @@ onBeforeUnmount(() => {
clearInterval(timer); clearInterval(timer);
clearInterval(timer2); clearInterval(timer2);
clearInterval(alarmTrackClearTimer); clearInterval(alarmTrackClearTimer);
}) });
</script> </script>

1683
src/views/earthMap/show/EarthComp.vue

File diff suppressed because it is too large

8
src/views/military/modules/earthMap/camera/MsCameraSiteList.vue

@ -2,7 +2,7 @@
视频监控点位管理 视频监控点位管理
目录位置三维地图管理 -> 视频监控点位管理 目录位置三维地图管理 -> 视频监控点位管理
功能概述所在场景下的防区的监控杆位置名称 功能概述所在场景下的防区的监控杆位置名称 已弃用
--> -->
<template> <template>
<div> <div>
@ -251,9 +251,11 @@
{ {
url: '/military/msMapLine/list', url: '/military/msMapLine/list',
params: { params: {
sceneId: userStore.userInfo?.sceneId + "*" sceneId: userStore.userInfo?.sceneId + '*',
}, },
},{ isTransformResponse: false }) },
{ isTransformResponse: false }
)
.then((res) => { .then((res) => {
if (res.success) { if (res.success) {
lineSelect.value = res.result.records; lineSelect.value = res.result.records;

Loading…
Cancel
Save