自定义,实例右键点击菜单,sdk右键菜单默认关闭,二维影像的渲染

This commit is contained in:
zyl
2025-11-20 18:27:55 +08:00
parent 28853d1004
commit bf0b2c0633
14 changed files with 207 additions and 56 deletions

View File

@ -1,7 +1,7 @@
server:
host: 127.0.0.1
port: 8848
path: C:\Users\MSI\AppData\Roaming\dzsp_shijingjun_offline_Y_save
path: C:\Users\Administrator\AppData\Roaming\dzsp_shijingjun_offline_Y_save
poi:
global:
enabled: false

Binary file not shown.

View File

@ -39,6 +39,12 @@ export const TsApi = {
data
})
},
updateTsSource: async (data: any) => {
return await request.post({
url: '/tsSource/update',
data
})
},
///tsSource/addModelSource
addTsModelSource: async (data: any) => {
return await request.post({

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M5.25 0L5.25 2.25L4.5 2.25L4.5 3.75L10.5 3.75L10.5 9.75001L4.5 9.75001L4.5 12L3.75 12L3.75 9.75001L1.5 9.75001L1.5 3.75L3.75 3.75L3.75 2.25L3 2.25L3 0L5.25 0ZM3.75 4.5L2.25 4.5L2.25 9.00001L3.75 9.00001L3.75 4.5ZM9.75 4.5L4.5 4.5L4.5 9.00001L9.75 9.00001L9.75 4.5ZM0.75 4.5L0.75 9.00001L0 9.00001L0 4.5L0.75 4.5ZM12 4.5L12 9.00001L11.25 9.00001L11.25 4.5L12 4.5ZM5.625 5.5965L7.125 6.7215L5.625 7.8465L5.625 5.5965ZM4.5 0.75L3.75 0.75L3.75 1.5L4.5 1.5L4.5 0.75Z" fill="#00FFFF" ></path></svg>

After

Width:  |  Height:  |  Size: 641 B

View File

@ -186,7 +186,7 @@ const initTreeCallBack = () => {
});
if ((window as any).earth_ts) {
for (let i = 0; i < layers.length; i++) {
// initMapData(layers[i].sourceType, layers[i].detail, null)
initMapData(layers[i].sourceType, layers[i].detail, null)
}
}
})

View File

@ -0,0 +1,112 @@
<template>
<div class="MouseRight">
<div v-for="item in menus" class="item" @click="item.fun">
<svg-icon :name="item.icon||item.key" :size="14"></svg-icon>
{{ item.name }}
</div>
</div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import {TsApi} from "../../../api/ts";
import {ElMessage} from "element-plus";
import {useRightOperate} from './rightOperate'
let {delNode, addEvent} = useRightOperate()
const eventBus = inject("bus");
let setOrReset = ref(1)
let setView = (flag) => {
// let cusView = window['YJ'].Global.getCurrentView(window['earth_ts'])
let node = window['treeObj'].getNodeByParam("id", window['selectedIdTs'], null);
let {
id,
sourceName,
sourceType,
sourcePath,
parentId,
isShow,
detail,
params,
planId,
} = node
let entity = window['_entityMap'].get(id)
if (flag)
entity.setCustomView()
else
entity.resetCustomView()
const detailobj = {...JSON.parse(detail ?? '{}'), customView: flag ? entity.customView : null};
let obj = {
id,
sourceName,
sourceType,
sourcePath,
parentId,
treeIndex: node.getIndex(),
isShow: isShow ? 1 : 0,
detail: JSON.stringify(detailobj),
params,
planId
}
TsApi.updateTsSource(obj).then(res => {
if (res.code == 200) {
ElMessage({type: "success", message: "操作成功"})
}
})
}
let deleteNode = () => {
let node = window['treeObj'].getNodeByParam("id", window['selectedIdTs'], null);
delNode(node, eventBus)
}
let addEventTs = () => {
let node = window['treeObj'].getNodeByParam("id", window['selectedIdTs'], null);
addEvent(node, eventBus)
}
let menus = ref([
{name: "添加态势事件", key: "addEventTs", fun: addEventTs},
{},
{
name: '删除', key: "delModel", fun: deleteNode
}
])
eventBus.on("initMenus", () => {
let customView = null
let entity = window['_entityMap'].get(window['selectedIdTs'])
customView = Boolean(entity.customView && entity.customView.orientation)
setOrReset.value = customView ? 0 : 1
menus.value[1] =
{
name: setOrReset.value ? "视角设定" : "重置视角", key: setOrReset.value ? "setView" : "resetView", fun: () => {
setView(setOrReset.value)
}
}
})
</script>
<style lang="scss" scoped>
.MouseRight {
position: absolute;
z-index: 999;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
//width: 110px;
padding: 5px;
display: none;
.item {
padding: 0 5px;
font-size: 15px;
&:hover {
color: #0ff;
cursor: pointer;
}
}
}
</style>

View File

@ -137,7 +137,10 @@ onMounted(() => {
for (let i = 0; i < doms.length; i++) {
doms[i].style.lineHeight = "19px"
}*/
let panelHeight = window['tsObj']._Store.getDomElement(".chart", 0).getBoundingClientRect().height
let panel = window['tsObj']._Store.getDomElement(".chart", 0)
if (!panel)
return
let panelHeight = panel.getBoundingClientRect().height
// 转为字符串并按 "." 分割
const [whole, decimalStr] = String(panelHeight).split('.');

View File

@ -10,7 +10,7 @@
@click="itemClicks(item)"
>
<div class="itemIcon">
<svg-icon :name="item.key" :size="14"></svg-icon>
<svg-icon :name="item.icon||item.key" :size="14"></svg-icon>
</div>
<div class="itemText">
{{ t(`rightMenu.${item.key}`) }}

View File

@ -128,6 +128,8 @@ export const useRightOperate = () => {
}
let detail = JSON.parse(res.data.detail)
let mapParams = {...detail, ...res.data.params}
if (res.data.sourceType)
sourceType = res.data.sourceType
initMapData(sourceType, mapParams, entity => {
entity.flyTo()
@ -205,11 +207,12 @@ export const useRightOperate = () => {
},
addEvent: {
key: 'addEvent',
icon: 'addEventTs',
callback: addEvent
}
})
return {
rightMenus
rightMenus, delNode, addEvent
}
}

View File

@ -39,6 +39,7 @@
<deduction :TSOBJ="tsOBJ"></deduction>
<newEvent></newEvent>
<addDirectory class="adddirectoryBox absolute zIndex999"></addDirectory>
<mouseRight></mouseRight>
<!-- 方案描述编辑框 -->
<!--<div class="dialogBox">-->
@ -110,13 +111,14 @@
<script setup lang="ts">
//@ts-nocheck
import {ref, reactive, onMounted, nextTick, onUnmounted} from "vue";
import {ref, reactive, onMounted, nextTick, onUnmounted,} from "vue";
import {useRouter, useRoute} from "vue-router";
import Cabin from "./cabin.vue"
import Element from "./element.vue"
import NewEvent from "./newEvent.vue"
import Deduction from "./deduction.vue";
import AddDirectory from './components/tsdirectory.vue'
import MouseRight from './components/MouseRight.vue'
import {TS} from "./sdk";
import * as domain from "domain";
import {TsApi} from "../../api/ts";
@ -246,6 +248,8 @@ onMounted(async () => {
// getAuthInfo()
await YJ.on({host: baseURL})
createEarth()
window.addEventListener('click', handleClick)
// window.addEventListener('contextmenu', handleClick)
})
const createEarth = async () => {
(window as any).earth_ts = await new YJ.YJEarth('earthContainer', {navigationHelpButton: false})
@ -296,10 +300,20 @@ const timer = setInterval(() => {
}).replace(/\//g, '-');
stamp.value = formattedDate
}, 1000)
onUnmounted(() => {
clearInterval(timer)
window.removeEventListener('click', handleClick)
// window.removeEventListener('contextmenu', handleClick)
})
// 定义可复用的回调函数
const handleClick = (e) => {
console.log('点击事件触发', e)
let dom = $('.MouseRight')[0]
if (dom) dom.style.display = "none"
}
</script>
<style lang="scss" scoped>

View File

@ -1,6 +1,6 @@
import {TsApi} from "../../api/ts";
import {useTreeNode} from '@/views/components/tree/hooks/treeNode'
import {rightClick} from "../components/tree/entityClick";
import {bus} from "../../utils/bus"
const {cusAddNodes, getSelectedNode} = useTreeNode()
@ -40,6 +40,11 @@ export function initMapData(type, data, cb: any = null) {
cb && cb(entityObject)
})
break
case 'layer':
data.host = baseURL
entityObject = new YJ.Obj.Layer(window['earth_ts'], data)
cb && cb(entityObject)
break
case "guiji":
entityObject = new YJ.Obj.TrajectoryMotionObject(
@ -69,13 +74,20 @@ export function initMapData(type, data, cb: any = null) {
}
//鼠标右键点击事件
entityObject.onRightClick = () => {
entityObject.onRightClick = (event) => {
// rightClick(getOptions());
console.log("鼠标右键点击事件")
console.log("鼠标右键点击事件", options.id, event)
let id = options.id;
let node = window.treeObj.getNodeByParam("id", id, null);
if (node) window.treeObj.selectNode(node);
YJ.Global.splitScreen.setActiveId([id]);
window['selectedIdTs'] = id
// YJ.Global.splitScreen.setActiveId([id]);
$('.MouseRight')[0].style.display = "block"
$('.MouseRight')[0].style.top = event.position.y + "px"
$('.MouseRight')[0].style.left = event.position.x + "px"
bus.emit("initMenus")
};
return options

View File

@ -41,6 +41,7 @@ export const showRightMenuTs = (event: any, treeObj: any, selectedNodes, nodeTyp
try {
arr = [...nodeType[selectedNodes[0].sourceType].rightMenus]
console.log("rightMenus", nodeType[selectedNodes[0].sourceType].rightMenus)
if (!['tileset', 'directory', 'layer', 'terrain',].includes(selectedNodes[0].sourceType))
arr.push('addEvent')
} catch (e) {
console.log('e', e, selectedNodes[0].sourceType)

View File

@ -169,8 +169,8 @@ function leftClick(options) {
if (info.rtmp && info.rtmp.length) {
let isExistent = false
let isNoExistent = false
for(let i=0;i<info.rtmp.length;i++) {
if(!(window as any)._winMap.has(info.rtmp[i].id)) {
for (let i = 0; i < info.rtmp.length; i++) {
if (!(window as any)._winMap.has(info.rtmp[i].id)) {
isNoExistent = true;
(window as any)._winMap.set(info.rtmp[i].id, info.rtmp[i].id);
ipcRenderer.send("openFFPlay", {
@ -179,7 +179,7 @@ function leftClick(options) {
name: info.rtmp[i].name,
});
ipcRenderer.once(
"openFFPlayOut_"+info.rtmp[i].id,
"openFFPlayOut_" + info.rtmp[i].id,
(e, err, id) => {
if (err) {
ElMessage({
@ -187,23 +187,22 @@ function leftClick(options) {
type: "error",
});
}
if(id) {
if (id) {
(window as any)._winMap.delete(id);
}
}
);
}
else {
} else {
isExistent = true
}
}
if(isNoExistent) {
if (isNoExistent) {
ElMessage({
message: "视频流打开中请稍后",
type: "success",
});
}
if(isExistent) {
if (isExistent) {
ElMessage({
message: "视频已打开",
type: "info",
@ -220,7 +219,7 @@ function rightClick(options) {
let node = window.treeObj.getNodeByParam("id", id, null);
if (node) window.treeObj.selectNode(node);
// 自定义,实例右键点击菜单
// YJ.Global.splitScreen.setActiveId([id]);
YJ.Global.splitScreen.setActiveId([id]);
}
let a = new Map()

View File

@ -2,7 +2,7 @@
<Headers></Headers>
<div id="earthContainer" class="fullSize"></div>
<Tree class="tree" ref="tree"></Tree>
<component :is="currentComponent" ref="dynamicComponentRef" />
<component :is="currentComponent" ref="dynamicComponentRef"/>
<richText></richText>
<addDirectory ref="adddirectoryBox" class="adddirectoryBox absolute zIndex999"></addDirectory>
<editDirectory ref="editdirectoryBox" class="editdirectoryBox absolute zIndex999"></editDirectory>
@ -12,7 +12,7 @@
<!--底部菜单-->
<bottomMenu class="absolute zIndex9" ref="bottomMenuRef"></bottomMenu>
<input type="file" id="fileInputlink" style="display: none" multiple accept=".jpeg,.png,.jpg,.mp4,.pdf"
@input="uploadFile" />
@input="uploadFile"/>
<!-- 多点视线分析 -->
<!-- <Visibility ref="visibility"></Visibility> -->
@ -49,8 +49,8 @@
</template>
<script setup lang="ts">
import { inject, shallowRef, ref } from 'vue'
import { AuthApi } from '@/api/setting/auth'
import {inject, shallowRef, ref} from 'vue'
import {AuthApi} from '@/api/setting/auth'
import {
$sendElectronChanel,
$recvElectronChanel,
@ -102,13 +102,13 @@ import GoodsSearchCircle from '../components/propertyBox/GoodsSearchCircle.vue'
import GoodsSearchPolgon from '../components/propertyBox/GoodsSearchPolgon.vue'
import flat from '../components/propertyBox/flat.vue'
import terrain from '../components/propertyBox/terrain.vue'
import { useRightOperate } from '../components/tree/components/hooks/rightOperate'
import {useRightOperate} from '../components/tree/components/hooks/rightOperate'
import selectImg from '../components/selectImg/index.vue'
import tufuSelect from '../components/headers/components/tufu_select.vue'
import imagePop from '../components/propertyBox/imagePop.vue'
import model from '../components/propertyBox/model.vue'
import waterSurface from '../components/propertyBox/waterSurface.vue'
import { addMapSource } from '../../common/addMapSource'
import {addMapSource} from '../../common/addMapSource'
import modelSetting from '../components/propertyBox/modelSetting.vue'
import modelObject from '../components/propertyBox/modelObject.vue'
import particleEffects from '../components/propertyBox/particleEffects.vue'
@ -124,10 +124,10 @@ import photo from '../components/propertyBox/photo.vue'
import addDevice from '../components/propertyBox/addDevice.vue'
import addMaterials from '../components/propertyBox/addMaterials.vue'
import { GisApi } from '@/api/gisApi'
import { sysChange as utilsSysChange } from '@/utils/sysChange'
import {GisApi} from '@/api/gisApi'
import {sysChange as utilsSysChange} from '@/utils/sysChange'
const { rightMenus } = useRightOperate()
const {rightMenus} = useRightOperate()
const firstMenuRef = ref(null)
const bottomMenuRef = ref(null)
const eventBus: any = inject('bus')
@ -455,30 +455,30 @@ const createEarth = async () => {
window.earth = await new YJ.YJEarth('earthContainer')
let openLeftClick = await new YJ.Global.openLeftClick(window.earth)
let openRightClick = await new YJ.Global.openRightClick(window.earth)
// YJ.Global.MouseRightMenu(window.earth, true, (text, object) => {
// switch (text) {
// case 'rotateAround':
// YJ.Global.rotateAround(window.earth, object.position)
// break
// case 'textBox':
// let id = new YJ.Tools().randomString()
// let name = '文本框'
// addMapSource({
// type: 'textBox',
// id: id,
// sourceName: name,
// opt: {
// id: id,
// position: object.position
// }
// })
// break
// case 'attribute':
// let node = window.treeObj.getNodeByParam('id', object.id, null)
// rightMenus.edit.callback(eventBus, node)
// break
// }
// })
/* YJ.Global.MouseRightMenu(window.earth, true, (text, object) => {
switch (text) {
case 'rotateAround':
YJ.Global.rotateAround(window.earth, object.position)
break
case 'textBox':
let id = new YJ.Tools().randomString()
let name = '文本框'
addMapSource({
type: 'textBox',
id: id,
sourceName: name,
opt: {
id: id,
position: object.position
}
})
break
case 'attribute':
let node = window.treeObj.getNodeByParam('id', object.id, null)
rightMenus.edit.callback(eventBus, node)
break
}
})*/
tree.value.initTreeCallBack()
utilsSysChange(eventBus)
@ -539,16 +539,16 @@ const getStatus = (time) => {
const currentTimestamp = Date.now()
if (timestamp > currentTimestamp) {
; (window as any).checkAuthIsValid = true
;(window as any).checkAuthIsValid = true
} else {
; (window as any).checkAuthIsValid = false
;(window as any).checkAuthIsValid = false
}
}
onMounted(async () => {
let baseURL = localStorage.getItem('ip')
getAuthInfo()
await YJ.on({ host: baseURL, token: localStorage.getItem('Authorization') })
await YJ.on({host: baseURL, token: localStorage.getItem('Authorization')})
createEarth()
})