diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts index a7e955b..c0fce49 100644 --- a/src/shims-vue.d.ts +++ b/src/shims-vue.d.ts @@ -11,6 +11,7 @@ declare global { d3kit: any; $earth: any; $uia: any; + $viewer: any; _CONFIG: any; $flyTo: any; guid: any; diff --git a/src/store/modules/earthMap.ts b/src/store/modules/earthMap.ts index e3994f4..579e137 100644 --- a/src/store/modules/earthMap.ts +++ b/src/store/modules/earthMap.ts @@ -24,8 +24,13 @@ export const useEarthMapStore = defineStore({ /////////////////////// cameraData: {},//请求的电线杆数据 nodeConfigByRef: new Map(),// 区域节点By Ref划分 - + nodeCheckedByRef: new Map(),// + statusByNodeId: new Map(),// areaByNodeId: new Map(), + hostDeviceMapById: new Map(),//获取主机信息 + alarmInfoMap: new Map(), + radarAlarmDataMap: new Map(), + imgByRef: new Map(), }), getters: { diff --git a/src/utils/earthMap/clone.ts b/src/utils/earthMap/clone.ts new file mode 100644 index 0000000..b09e7b2 --- /dev/null +++ b/src/utils/earthMap/clone.ts @@ -0,0 +1,70 @@ +/** + * 克隆 + * 用于EarthComp.vue + */ + +export function cloneModel(modelObject) { + if (modelObject.czmObject.xbsjType === 'Model') { + const modelConfig = { + ref: '', + name: modelObject.name, + czmObject: { + name: modelObject.czmObject.name, + xbsjType: modelObject.czmObject.xbsjType, + url: modelObject.czmObject.url, + // "color": [0.52, 0.6, 0.58, 1], + minimumPixelSize: modelObject.czmObject.minimumPixelSize, + // maximumScale: 0.02, + scale: modelObject.czmObject.scale, + xbsjScale: [...modelObject.czmObject.xbsjScale], + xbsjPosition: [...modelObject.czmObject.xbsjPosition], + xbsjRotation: [...modelObject.czmObject.xbsjRotation], + viewDistance: 150, + distanceDisplayCondition: [1.0, 30000.0], + }, + }; + const index = modelObject.parent.children.push(modelConfig); + return index; + // const model = new window.XE.Obj.Model(window.$earth) + // model.xbsjFromJSON(modelConfig) + // const leaf = new window.XE.SceneTree.Leaf(model) + // window.$earth.sceneTree.root.push(leaf) + } else { + const objConfig3 = { + ref: '', + name: modelObject.name, + czmObject: { + customProp: modelObject.czmObject.customProp, + name: modelObject.czmObject.name, + xbsjType: modelObject.czmObject.xbsjType, + imageUrl: modelObject.czmObject.imageUrl, + position: [...modelObject.czmObject.position], + scale: modelObject.czmObject.scale, + pinBuilder: { + extText: modelObject.czmObject.pinBuilder.extText, + extTextFont: '30px 楷体', + extTextPixelOffset: [30, -20], + fillColor: [1, 1, 1, 0.9], + outlineColor: [0, 0, 0, 0.9], + }, + far: 1073741824, + }, + }; + const index = modelObject.parent.children.push(objConfig3); + return index; + } + + // return model +} + +export function cloneShamNode(oldRef, id, title) { + const shamNode = window.$earth.sceneTree.$refs['node_' + oldRef]; + const newShamNode = { + ref: 'node_' + id, + title: title, + expand: false, + children: [], + }; + // that.currentModel = response.result + shamNode.parent.children.push(newShamNode); +} \ No newline at end of file diff --git a/src/utils/earthMap/createRealTimeObj.ts b/src/utils/earthMap/createRealTimeObj.ts new file mode 100644 index 0000000..d9b7e8c --- /dev/null +++ b/src/utils/earthMap/createRealTimeObj.ts @@ -0,0 +1,43 @@ +/** + * 加载地图实时资源（无人机、车辆、人员、巡逻路线等） + * 用于EarthComp.vue + */ +import getAllModelInfo from '@/utils/earthMap/getAllModelInfo'; +import getPatrolRouteInfo from '@/utils/earthMap/getPatrolRouteInfo'; +export default async function createRealTimeObj(earthUI = null) { + let models = { + expand: true, + title: '地图实况', + children: [ + { + expand: false, + title: '巡逻路线', + children: [], + }, + { + expand: false, + title: '执勤巡逻', + children: [], + }, + { + expand: false, + title: '预警/报警', + children: [], + }, + { + expand: false, + title: 'AIS', + children: [], + }, + ], + }; + try { + await getAllModelInfo(models); + await getPatrolRouteInfo(models); + //添加对象到场景树 + // window.$earth.sceneTree.root.children.push(models); + window.$earth.sceneTree.root.children.splice(1, 0, models); + } catch (e) { + console.log(e); + } + } \ No newline at end of file diff --git a/src/utils/earthMap/earth.ts b/src/utils/earthMap/earth.ts index 2bf35ed..9c9a59a 100644 --- a/src/utils/earthMap/earth.ts +++ b/src/utils/earthMap/earth.ts @@ -68,6 +68,39 @@ function setBimStyle(bim: unknown, }, }); } +// 根据经纬度获取高度 +async function getHeigthByLonLat(lon = 88.8296258, lat = 27.4061859) { + var positions = [window.Cesium.Cartographic.fromDegrees(lon, lat)]; + // var promise = Cesium.sampleTerrain(this._viewer.terrainProvider, 13, positions); + var promise = window.Cesium.sampleTerrainMostDetailed(window.$viewer.terrainProvider, positions); + return new Promise((resolve, reject) => { + window.Cesium.when(promise, function (updatedPositions) { + // updatedPositions[0].height ? updatedPositions[0].height : 0; + resolve(updatedPositions); + }); + }); + /* var terCartographic = new Cesium.Cartographic(1.5503694435245020004000376611976, 0.47832817936864542131039019315313, 0) + var terHigh = this._viewer.scene.globe.getHeight(terCartographic); + return terHigh; */ +} + +function getRandomArr(arr, count) { + //从数组随机抽取元素 + var shuffled = arr.slice(0), + i = arr.length, + min = i - count, + temp, + index; + while (i-- > min) { + //打乱数组 + index = Math.floor((i + 1) * Math.random()); + temp = shuffled[index]; + shuffled[index] = shuffled[i]; + shuffled[i] = temp; + } + return shuffled.slice(min); +} + export default { degreeToRadianInLngLatHeight, @@ -76,7 +109,9 @@ export default { radianToDegree, getDistance, setBimStyle, + getHeigthByLonLat, + getRandomArr } -export{ +export { radianToDegreeInLngLatHeight } \ No newline at end of file diff --git a/src/utils/earthMap/earthDraw.ts b/src/utils/earthMap/earthDraw.ts index 38d4a2e..a349f24 100644 --- a/src/utils/earthMap/earthDraw.ts +++ b/src/utils/earthMap/earthDraw.ts @@ -25,6 +25,8 @@ const earthUI = window.$uia // 获取地图ui对象 //绘画图形初始化 export async function drawInit() { + + console.log("加载绘画资源"); // console.log("sceneId",userStore.userInfo?.sceneId); /** * listBySceneId 查询 SceneId以及SceneId为空的列表 diff --git a/src/utils/earthMap/getAllModelInfo.ts b/src/utils/earthMap/getAllModelInfo.ts new file mode 100644 index 0000000..ee59f5e --- /dev/null +++ b/src/utils/earthMap/getAllModelInfo.ts @@ -0,0 +1,220 @@ +/** + * 用于EarthComp.vue + */ +import { defHttp } from '/@/utils/http/axios'; +import { useUserStore } from '/@/store/modules/user'; +import { useEarthMapStore } from '/@/store/modules/earthMap'; +import { earthMapUrl } from '@/api/earth/earthMap' +import earthUtils from '@/utils/earthMap/earth'; + +let userStore = useUserStore(); +let store = useEarthMapStore(); +export default function getAllModelInfo(models) { + return new Promise((resolve, reject) => { + //模型位置 + + defHttp.get({ url: earthMapUrl.queryAllModelInfo }, { isTransformResponse: false }).then(async (res) => { + if (res.success) { + res.result.forEach((data, index) => { + let childrenConfig: any = {}, + objConfig: any = {}, + pathConfig: any = {}, + viewshedConfig: any = {}, + pinConfig: any = {}; + let positions: any = [], + rotations: any = []; + switch (data.modelType) { + case 1: //无人机 + childrenConfig = { + expand: false, + title: '无人机_' + (index + 1) + '号', + children: [], + }; + objConfig = { + ref: data.eventSerialNum, + czmObject: { + name: '无人机', + xbsjType: 'Model', + url: window._CONFIG['staticDomainURL'] + '/uav.gltf', + minimumPixelSize: 1000, + maximumScale: 20, + xbsjPosition: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height), + distanceDisplayCondition: [10.0, 25000.0], + }, + }; + childrenConfig.children.push(objConfig); + // 加载视域 + viewshedConfig = { + ref: 'viewshed_' + data.eventSerialNum, + czmObject: { + xbsjType: 'Viewshed', + name: '视域', + position: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height), + rotation: earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll), + near: 1.0, + far: 1500, + enabled: false, + show: false, + }, + }; + childrenConfig.children.push(viewshedConfig); + //加载历史轨迹 + data.msModelTrajectoryList.forEach((data, index) => { + positions.push(earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height)); + rotations.push(earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll)); + }); + pathConfig = { + ref: 'path_' + data.eventSerialNum, + czmObject: { + xbsjType: 'Path', + name: '轨迹', + positions: positions, + rotations: rotations, + enabled: false, + show: true, + loop: false, + showDirection: false, + playing: true, + loopPlay: true, + alwaysAlongThePath: true, + currentSpeed: 30, + }, + }; + childrenConfig.children.push(pathConfig); + /* // 显示当前坐标 + pinConfig = { + "ref": "pin_" + data.eventSerialNum, + "czmObject": { + "xbsjType": "Pin", + "name": "当前位置", + "position": earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height), + "evalString": "const width = 430;\nconst height = 70;\nfunction createLabelCanvas(p) {\n if (p._labelDiv) {\n p._earth.czm.viewer.container.removeChild(p._labelDiv);\n p._labelDiv = undefined;\n }\n const labelDiv = document.createElement('div');\n labelDiv.style = 'width:'+width+'px;height: '+height+'px;position: absolute; pointer-events: none;'\n\n p._earth.czm.viewer.container.appendChild(labelDiv);\n p._labelDiv = labelDiv;\n\n var dis = XE.MVVM.watch(() => {\n labelDiv.style.display = p.enabled ? 'block' : 'none';\n });\n\n p.disposers.push(() => {\n if (p._labelDiv) {\n p._earth.czm.viewer.container.removeChild(p._labelDiv);\n p._labelDiv = undefined;\n }\n dis();\n });\n\n const labelCanvas = document.createElement('canvas');\n labelCanvas.style = 'width: 100%;height: 100%;';\n\n labelCanvas.width = width;\n labelCanvas.height = height;\n labelDiv.appendChild(labelCanvas);\n return labelCanvas;\n}\n\nfunction createDrawFunc(p) {\n const labelCanvas = createLabelCanvas(p);\n const ctx = labelCanvas.getContext('2d');\n\n function draw(w) {\n ctx.clearRect(0, 0, width, height);\n\n ctx.save();\n ctx.lineWidth = 2;\n ctx.strokeStyle = 'rgb(31, 255,255)';\n ctx.beginPath();\n ctx.moveTo(width, height);\n ctx.lineTo(width-height, 22);\n ctx.lineTo(0, 22);\n ctx.stroke();\n ctx.restore();\n ctx.font = \"15px console\"; \n ctx.fillStyle = 'rgb(255, 255, 0)';\n ctx.fillText('" + + "经度：" + data.lon + "/" + "纬度：" + data.lat + "/" + "高度：" + data.height + "', 0, 20);\n ctx.restore();\n }\n\n p._dDraw = draw;\n}\n\ncreateDrawFunc(p);\n\nlet d = 0;\nlet c = 0;\np._dDraw(c);\nconst preUpdateListener = p._earth.czm.scene.preUpdate.addEventListener(() => {\n if (d !== c) {\n c += (d - c) * 0.1;\n if (Math.abs(c - d) < 0.1) {\n c = d;\n }\n p._dDraw(c);\n }\n});\np.disposers.push(() => preUpdateListener && preUpdateListener());\n\nconst container = p._earth.czm.viewer.container;\nconst unwatch = XE.MVVM.watch(() => [...p.winPos], winPos => {\n if (p._labelDiv) {\n p._labelDiv.style.left = (winPos[0] - p._labelDiv.clientWidth) + 'px';\n p._labelDiv.style.bottom = winPos[3]+'px';\n } \n});\np.disposers.push(() => {\n unwatch && unwatch();\n});", + "isDivImage": true, + "pinBuilder": {}, + "far": 25000 + } + }; + childrenConfig.children.push(pinConfig); */ + //加入树 + models.children[1].children.push(childrenConfig); + break; + case 2: //执勤人员 + childrenConfig = { + expand: false, + title: '执勤人员_' + (index + 1) + '号', + children: [], + }; + objConfig = { + ref: data.eventSerialNum, + czmObject: { + xbsjType: 'GroundImage', + name: '执勤人员', + playing: true, + width: 90, + height: 90, + position: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, 0), + imageUrls: [window._CONFIG['staticDomainURL'] + '/xunluo_point1.png', window._CONFIG['staticDomainURL'] + '/xunluo_point2.png'], + }, + }; + childrenConfig.children.push(objConfig); + //加载历史轨迹 + data.msModelTrajectoryList.forEach((data, index) => { + positions.push(earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height)); + rotations.push(earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll)); + }); + pathConfig = { + ref: 'path_' + data.eventSerialNum, + czmObject: { + xbsjType: 'Path', + name: '轨迹', + positions: positions, + rotations: rotations, + enabled: false, + show: true, + loop: false, + showDirection: false, + playing: true, + loopPlay: true, + alwaysAlongThePath: true, + currentSpeed: 30, + }, + }; + childrenConfig.children.push(pathConfig); + //加入树 + models.children[1].children.push(childrenConfig); + break; + case 3: //可疑人员 + childrenConfig = { + expand: false, + title: '可疑人员_' + (index + 1) + '号', + children: [], + }; + objConfig = { + ref: data.eventSerialNum, + czmObject: { + xbsjType: 'GroundImage', + name: '可疑人员', + playing: true, + width: 90, + height: 90, + position: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, 0), + imageUrls: [window._CONFIG['staticDomainURL'] + '/keyi_point1.png', window._CONFIG['staticDomainURL'] + '/keyi_point2.png'], + }, + }; + childrenConfig.children.push(objConfig); + //加载历史轨迹 + data.msModelTrajectoryList.forEach((data, index) => { + positions.push(earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height)); + rotations.push(earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll)); + }); + pathConfig = { + ref: 'path_' + data.eventSerialNum, + czmObject: { + xbsjType: 'Path', + name: '轨迹', + positions: positions, + rotations: rotations, + enabled: false, + show: true, + loop: false, + showDirection: false, + playing: true, + loopPlay: true, + alwaysAlongThePath: true, + currentSpeed: 30, + }, + }; + childrenConfig.children.push(pathConfig); + //加入树 + models.children[2].children.push(childrenConfig); + break; + case 11: //传感器 + objConfig = { + ref: data.eventSerialNum, + czmObject: { + name: data.eventSerialNum, + xbsjType: 'Model', + url: window._CONFIG['staticDomainURL'] + '/zalan.gltf', + minimumPixelSize: 1000, + maximumScale: 0.01, + // xbsjPosition: [window.Cesium.Math.toRadians(data.lon), window.Cesium.Math.toRadians(data.lat), data.height], + xbsjPosition: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height), + xbsjRotation: earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll), + distanceDisplayCondition: [10.0, 25000.0], + customProp: data.eventSerialNum, + color: [0.08235294117647059, 1, 0, 1], + luminanceAtZenith: 2, + }, + }; + //加入树 + models.children[0].children[0].children.push(objConfig); + break; + default: + } + }); + resolve(models); + } + }); + }); +} \ No newline at end of file diff --git a/src/utils/earthMap/getLabelInfo.ts b/src/utils/earthMap/getLabelInfo.ts new file mode 100644 index 0000000..2d21bf6 --- /dev/null +++ b/src/utils/earthMap/getLabelInfo.ts @@ -0,0 +1,165 @@ +/** + * 加载雷达和微波 + * 用于EarthComp.vue + */ +import { defHttp } from '/@/utils/http/axios'; +import { addPin } from '@/utils/earthMap/earthObj'; +import { useUserStore } from '/@/store/modules/user'; +import { useEarthMapStore } from '/@/store/modules/earthMap'; +import { earthMapUrl } from '@/api/earth/earthMap' +import hidePng from '@/assets/earthMap/hide.png'; +import { setLabelStatus } from '@/utils/earthMap/setLabelStatus'; +import { nextTick } from 'vue'; +import $ from 'jquery'; + +let userStore = useUserStore(); +let store = useEarthMapStore(); +export default async function getLabelInfo(models, type) { + console.log("加载雷达和微波"); + return new Promise((resolve, reject) => { + //请求地图标志信息 + defHttp.get({ url: earthMapUrl.queryLabelList }, { isTransformResponse: false }).then(async (res) => { + // console.log("请求地图标志信息",res); + if (res.success) { + const labelItems = await setLabel(res.result, models, type); + resolve(labelItems); + } + }); + }); +} + +async function setLabel(res, models, type) { + const args = { pageNo: 1, pageSize: 999 }; + await defHttp + .get( + { + url: earthMapUrl.queryDeviceInfoList, + params: args, + }, + { isTransformResponse: false } + ) + .then((reponse) => { + if (reponse.success) { + // console.log("queryDeviceInfoList",reponse); + const hostDeviceList = reponse.result.records; + for (const hostDevice of hostDeviceList) { + store.hostDeviceMapById.set(hostDevice.id, hostDevice); + } + return store.hostDeviceMapById; + } else { + console.error('获取主机信息错误', reponse); + } + }) + .catch(() => { + throw '获取主机信息错误'; + }); + //根据经纬度算出该点地形高度 + let posArr: any = [], + updatedPositions: any = []; + res.forEach((data, index) => { + updatedPositions.push(window.Cesium.Cartographic.fromDegrees(data.mapLabel.labelLon, data.mapLabel.labelLat, data.mapLabel.labelHeight)); + }); + const labelItems: any = []; + //设置标志 + res.forEach((data, index) => { + const item: any = data.mapLabel; + labelItems.push(item.id); + const objConfig3 = { + ref: item.id, + name: item.lineId, + czmObject: { + customProp: '{"labelAttr":' + item.labelAttr + ',"labelCode":"' + item.labelCode + '","deviceId":"' + data.deviceId + '"}', + name: item.labelName, + xbsjType: 'Pin', + imageUrl: window._CONFIG['staticDomainURL'] + '/' + item.labelImgUrl, + position: [updatedPositions[index].longitude, updatedPositions[index].latitude, Number(item.labelHeight)], + scale: item.labelAttr == 4 ? 1 : 0.7, + pinBuilder: { + extText: item.labelName, + extTextFont: '30px 楷体', + extTextPixelOffset: item.labelAttr == 4 ? [30, -20] : [15, -20], + fillColor: [1, 1, 1, 0.9], + outlineColor: [0, 0, 0, 0.9], + }, + far: 25000, + }, + }; + if (item.labelAttr == 4) { + // console.log("雷达",item); + store.statusByNodeId.set(item.id, 1); + addLabelNodeToTree(item, models, objConfig3, type); + } else { + // console.log("微波",item); + store.statusByNodeId.set(item.id, -10); + addLabelNodeToTree(item, models, objConfig3, type); + const device = store.hostDeviceMapById.get(data.deviceId); + if (device) { + //参数3 2为查询状态 + setLabelStatus(device, item.labelCode, item.id, 2); + } + } + }); + return labelItems; +} + +function addLabelNodeToTree(item, models, objConfig3, type) { + //微波 + if (item.labelAttr == 10) { + if (type == 2) { + let childs1 = models.children; + for (const child of childs1) { + if ('node_' + item.lineId == child.ref) { + child.children[2].children.push(objConfig3); + } + } + } else { + const parentNode = store.nodeConfigByRef.get('node_' + item.lineId); + if (!parentNode) { + return; + } + let childs2 = parentNode.children; + childs2[2].children.push(objConfig3); + } + } + //雷达 + else if (item.labelAttr == 4) { + if (type == 2) { + let childs1 = models.children; + for (const child of childs1) { + if ('node_' + item.lineId == child.ref) { + child.children[1].children.push(objConfig3); + } + } + } else { + const parentNode = store.nodeConfigByRef.get('node_' + item.lineId); + if (!parentNode) { + return; + } + let childs2 = parentNode.children; + childs2[1].children.push(objConfig3); + } + } + //雷达（已弃用） + else if (item.labelAttr == 4) { + console.log('leida'); + + if (type == 2) { + let childs3 = models.children; + for (const child of childs3) { + for (const element of child.children[1].children) { + if ('nodeSecondary_' + item.lineId == element.ref) { + element.children.push(objConfig3); + } + } + } + } else { + const parentNode1 = store.nodeConfigByRef.get('nodeSecondary_' + item.lineId); + // console.log("nodeSecondary_",parentNode1); + if (!parentNode1) { + return; + } + const childs4 = parentNode1.children; + childs4.push(objConfig3); + } + } +} \ No newline at end of file diff --git a/src/utils/earthMap/getLineInfo.ts b/src/utils/earthMap/getLineInfo.ts index 8a091c1..7dc1c05 100644 --- a/src/utils/earthMap/getLineInfo.ts +++ b/src/utils/earthMap/getLineInfo.ts @@ -14,7 +14,7 @@ import $ from 'jquery'; let userStore = useUserStore(); let store = useEarthMapStore(); export default function getLineInfo(models, type) { - console.log("请求线路信息"); + console.log("加载区域"); return new Promise((resolve, reject) => { //请求线路信息 diff --git a/src/utils/earthMap/getPatrolRouteInfo.ts b/src/utils/earthMap/getPatrolRouteInfo.ts new file mode 100644 index 0000000..84af527 --- /dev/null +++ b/src/utils/earthMap/getPatrolRouteInfo.ts @@ -0,0 +1,48 @@ +/** + * 执勤巡逻路线 + * 用于EarthComp.vue + */ +import { defHttp } from '/@/utils/http/axios'; +import { useUserStore } from '/@/store/modules/user'; +import { useEarthMapStore } from '/@/store/modules/earthMap'; +import { earthMapUrl } from '@/api/earth/earthMap' +import earthUtils from '@/utils/earthMap/earth'; + +let userStore = useUserStore(); +let store = useEarthMapStore(); + +export default function getPatrolRouteInfo(models) { + return new Promise((resolve, reject) => { + //执勤巡逻路线 + defHttp.get({ url: earthMapUrl.queryPatrolRouteInfo }, { isTransformResponse: false }).then(async (res) => { + if (res.success) { + res.result.forEach((data, index) => { + //将路线上的点拼成坐标数组 + let positions: any = []; + data.msLineConstList.forEach((data, index) => { + positions.push(earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height)); + }); + const objConfig = { + ref: data.lineCode, + czmObject: { + name: data.lineName, + xbsjType: 'Polyline', + width: 2, + material: { + type: 'XbsjODLineMaterial', + XbsjODLineMaterial: { + bgColor: [0.5, 0.5, 0.5, 1], + color: [0, 1, 0.11, 1], + totoalFrameCount: 200, + }, + }, + positions: positions, + }, + }; + models.children[0].children.push(objConfig); + }); + resolve(models); + } + }); + }); +} \ No newline at end of file diff --git a/src/utils/earthMap/guid.ts b/src/utils/earthMap/guid.ts index 4d344a3..3a29853 100644 --- a/src/utils/earthMap/guid.ts +++ b/src/utils/earthMap/guid.ts @@ -1,5 +1,5 @@ // 随机数 -export function guid() { +export default function guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8; diff --git a/src/utils/earthMap/handleNodeType.ts b/src/utils/earthMap/handleNodeType.ts index 85c372e..09fdd44 100644 --- a/src/utils/earthMap/handleNodeType.ts +++ b/src/utils/earthMap/handleNodeType.ts @@ -1,3 +1,6 @@ +/** + * 用于EarthComp.vue + */ export default class HandleNodeType { #sn; #sensorCallback; @@ -59,4 +62,9 @@ export default class HandleNodeType { this.#default ? this.#default() : null; } } -} \ No newline at end of file +} + + //调用方法 +export function handleNodeType(sn) { + return new HandleNodeType(sn); +}; \ No newline at end of file diff --git a/src/utils/earthMap/keyControlInit.ts b/src/utils/earthMap/keyControlInit.ts index e13a791..9bace4b 100644 --- a/src/utils/earthMap/keyControlInit.ts +++ b/src/utils/earthMap/keyControlInit.ts @@ -1,5 +1,6 @@ /** * 重点监控区域初始化 + * 用于EarthComp.vue */ import { h, computed, defineComponent, ref, onMounted, onBeforeMount, getCurrentInstance, onBeforeUnmount, nextTick, watch } from 'vue' import { defHttp } from '/@/utils/http/axios'; @@ -31,7 +32,8 @@ interface FireFenceItem { -export async function keyControlInit() { +export default async function keyControlInit() { + console.log("重点监控区域初始化"); // const { proxy }: any = getCurrentInstance(); defHttp.get({ url: '/military/dtKeyControlArea/list', diff --git a/src/utils/earthMap/listenMouseHandler.ts b/src/utils/earthMap/listenMouseHandler.ts new file mode 100644 index 0000000..f10ad01 --- /dev/null +++ b/src/utils/earthMap/listenMouseHandler.ts @@ -0,0 +1,437 @@ +/** + * 监听鼠标事件 + * 用于EarthComp.vue + * + */ +import { nextTick } from 'vue'; +import { defHttp } from '/@/utils/http/axios'; +import $ from 'jquery'; +import { useUserStore } from '/@/store/modules/user'; +import { useEarthMapStore } from '/@/store/modules/earthMap'; +import { earthMapUrl } from '@/api/earth/earthMap' +import { useMessage } from '/@/hooks/web/useMessage'; +import { CircleScan } from '@/utils/earthMap/radarEntity'; +import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth'; +import $mitt from '@/utils/earthMap/mitt'; + +let userStore = useUserStore(); +let store = useEarthMapStore(); +const { createMessage } = useMessage(); + +export default function listenMouseHandler(that) { + + const handler = new window.Cesium.ScreenSpaceEventHandler(window.$viewer.scene.canvas); + that._handler = handler; + //取消双击旋转事件 + window.$viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); + /* MOUSE事件（有性能问题，慎用！） */ + + /* 鼠标左键事件 */ + { + handler.setInputAction((click: any) => { + if (typeof that._pin !== 'undefined') { + // 销毁指示线 + that._pin.destroy(); + } + + let pickedFeature = window.$viewer.scene.pick(click.position); + console.log('点击:', pickedFeature); + + if (pickedFeature && pickedFeature.id) { + // 三维模型 + if (pickedFeature.id.xbsjType && pickedFeature.id.xbsjType === 'Model') { + //点击电线杆触发弹窗 + store.cameraData.forEach((data) => { + if (!$.isEmptyObject(data.msCameraSiteList)) { + if (!data.msCameraSiteList) { + return; + } + data.msCameraSiteList.forEach((data) => { + if (pickedFeature.id.customProp === data.id) { + if ($('.cameraModal ul').length > 0) { + $('.cameraModal ul').remove(); + } + $('.cameraModal').append(''); + if (!data.msCameraSettingList) return; + // 将监控相机列表传入弹窗组件中 + that.cameraList = data.msCameraSettingList; + // 将监控点位置传入弹窗组件中 + that.monitorPosition = pickedFeature.id._primitive.xbsjPosition; + data.msCameraSettingList.forEach((data, index) => { + let camera_img = + data.type == '4' + ? window._CONFIG['staticDomainURL'] + '/qiuji.png' + : data.type == '3' + ? window._CONFIG['staticDomainURL'] + '/qiangji.png' + : window._CONFIG['staticDomainURL'] + '/qiangji.png'; + let cameraStatus = data.status == '1' ? 'successStatus' : data.status == '2' ? 'offlineStatus' : 'errorStatus'; + let rtspUrl = data.cameraCode; + // 'rtsp://' + data.user + ':' + data.password + '@' + data.ip + window._CONFIG['cameraMain'] + $('.cameraModal ul').append( + '
  • ' + + data.cameraName + + '
    • ' + ); + }); + let cameraModal: any = document.getElementById('cameraModal') + cameraModal.style.left = click.position.x + -45 + 'px'; + cameraModal.style.top = click.position.y + -180 + 'px'; + that.cameraModalShow = true; + } + }); + } + }); + } + // 船只模型 + if (pickedFeature.id.xbsjType && pickedFeature.id.name.includes('船') && pickedFeature.id.xbsjType === 'Model') { + that.AISInfoWindowShow = true; + // 赋值船只场景id + that.ship_guid = pickedFeature.id.guid; + } + //雷达扫描范围 + if ( + pickedFeature.id._xbsjOwner && + pickedFeature.id._xbsjOwner.customProp && + JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelAttr == '4' + ) { + let labelCode = JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelCode; + console.log(pickedFeature.id._xbsjOwner); + if (pickedFeature.id._xbsjOwner.addViewShedReturn) { + //显示/不显示雷达扫码效果 + // pickedFeature.id._xbsjOwner.addViewShedReturn.show = !pickedFeature.id._xbsjOwner.addViewShedReturn.show; + // console.log("pickedFeature.id._xbsjOwner.addViewShedReturn",pickedFeature.id._xbsjOwner.addViewShedReturn); + + //清空当前雷达，并将该方法指向undefined(清空) + pickedFeature.id._xbsjOwner.addViewShedReturn.clear(); + pickedFeature.id._xbsjOwner.addViewShedReturn = undefined; + } else { + defHttp.get({ url: earthMapUrl.radarList, params: { radarCode: labelCode } }, { isTransformResponse: false }).then((res) => { + if (res.success) { + if (res.result.records.length > 0) { + let data = res.result.records[0]; + let rgb; + if (data.customProp) { + rgb = JSON.parse(data.customProp).color; + } + let radarRadius = data.workingRadius; + let radarRange = data.elevation; + let radarShifting = data.angularRadian; + let left = Number(radarShifting) - Number(radarRange) / 2; + //参数：经纬度、半径、起始角度（正北方向）、结束角度 + console.log('雷达扫描范围', data); + + //弧度转角度 + let degreePosition = radianToDegreeInLngLatHeight( + pickedFeature.id._xbsjOwner.position[0], + pickedFeature.id._xbsjOwner.position[1], + 0.1 + ); + //创建雷达扫描 深度 + // window.$viewer.scene.globe.depthTestAgainstTerrain = true; + let rader = new CircleScan(window.$viewer); + rader.add(degreePosition, null, radarRadius, 10000); + pickedFeature.id._xbsjOwner.addViewShedReturn = rader; + + // 雷达扫描2 + // let rader2 = window.$viewer.entities.add({ + // position: Cesium.Cartesian3.fromDegrees(113.528333, 22.156109), + // name: '雷达扫描', + // ellipse: { + // semiMajorAxis: 5000.0, + // semiMinorAxis: 5000.0, + // material: new Cesium.RadarScanMaterialProperty({ + // color: new Cesium.Color(1.0, 1.0, 0.0, 0.7), + // speed: 20.0, + // }), + // height: 20.0, + // heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, + // outline: true, + // outlineColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0) + // } + // }) + + // pickedFeature.id._xbsjOwner.addViewShedReturn= addViewShedRadar( + // pickedFeature.id._xbsjOwner.position, + // radarRadius, + // left, + // Number(radarRange) / 2 + Number(radarShifting), + // [rgb.r / 255, rgb.g / 255, rgb.b / 255, rgb.a] + // ); + } + } + }); + } + } + } else { + //关闭所有气泡窗 + that.cameraModalShow = false; + that.poiModalShow = false; + } + }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK); + } + /* 鼠标右键事件 */ + { + handler.setInputAction((click) => { + // 判断点击位置是否有实体 + //返回具有 `primitive` 属性的对象，该属性包含场景中特定窗口坐标处的第一个（顶部）图元，如果该位置没有任何内容，则返回未定义的对象。其他属性可能会根据基元的类型进行设置，并可用于进一步识别拾取的对象。 + let pickedFeature = window.$viewer.scene.pick(click.position); + // console.log("pick",pickedFeature); + + let entity = pickedFeature && pickedFeature.id; + console.log('pick', pickedFeature); + console.log('entity', entity); + if (entity == undefined) { + return; + } + if (typeof pickedFeature !== 'undefined' && pickedFeature.id.xbsjType == 'Model') { + //点击电线杆触发弹窗 + store.cameraData.forEach((data) => { + if (!$.isEmptyObject(data.msCameraSiteList)) { + if (!data.msCameraSettingList) { + return; + } + data.msCameraSiteList.forEach((data) => { + if (pickedFeature.id.customProp === data.id) { + window.$uia.contextMenu.pop([ + { + text: '监控视域分析属性', + func: () => { + let testConfig = { + ref: 'testView', + name: '雷达视域分析', + position: [1.514482876761954, 0.8497520519403554, -0.7553906497788317], + rotation: [4.535844766941594, 0.32288591161895097, 0], + near: 1, + far: 400, + fovH: Math.PI / 3, + fovV: Math.PI / 6, + show: false, + }; + let Viewshed = new window.XE.Obj.Viewshed(window.$earth); + Viewshed.xbsjFromJSON(testConfig); + window.$uia.showPropertyWindow(Viewshed); + }, + }, + ]); + } + }); + } + }); + } + //巡检监控视频 + else if (typeof pickedFeature !== 'undefined' && entity._name == '视频图元') { + // console.log(pickedFeature) + // console.log("entity",entity) + window.$uia.contextMenu.pop([ + { + text: '编辑', + func: () => { + $mitt.emit('addRoamPathVideoClose'); + // store.commit('customPrimitive', entity.xbsjGuid); + store.customPrimitive = entity.xbsjGuid; + // 打开对应的创建巡检视频窗口 + nextTick(() => { + that.addRoamVideoShow = true; + }); + }, + }, + { + text: '删除', + func: () => { + window.$uia.confirm('确认删除?', () => { + defHttp + .delete( + { + url: '/military/msAreaCustomPrimitive/delete', + params: { id: entity.id }, + }, + { isTransformResponse: false, joinParamsToUrl: true } + ) + .then((response) => { + if (response.code == 200) { + let customPrimitiveList = store.customPrimitiveList; + // console.log("a",customPrimitiveList); + customPrimitiveList.forEach((element, index) => { + const model = window.$earth.getObject(element); + // console.log("model.id",model.id); + // console.log("entity.id",entity.id); + if (model.id == entity.id) { + let customPrimitive = customPrimitiveList.splice(index, 1)[0]; + model.destroy(); + } + }); + // store.dispatch('asyncCustomPrimitive', customPrimitiveList); + store.customPrimitiveList = customPrimitiveList; + + // notification.close("RoamVideoSet"); + // sessionStorage.setItem("RoamVideoSet", "false"); + } else { + createMessage.error('修改失败', 2); + console.error('删除失败', response); + } + }) + .catch((res) => { + console.error('错误', res); + }); + }); + }, + }, + ]); + } + //绘画图形 + else if (typeof pickedFeature !== 'undefined' && entity.name == '绘画') { + // console.log("entity", entity); + window.$uia.contextMenu.pop([ + { + text: '编辑', + func: () => { + window.$uia.showPropertyWindow(entity); + //记录编辑前信息 + let oldEntity = { + depthTest: entity.depthTest, //深度检测 + color: [...entity.color], //颜色 + outline: { + color: [...entity.outline.color], //边框颜色 + show: entity.outline.show, //边框显示 + width: entity.outline.width, //边框宽度 + }, + positions: [...entity.positions], + }; + nextTick(() => { + // 主要ui窗口 + const mainUI = window.$uia._vm.$refs.mainUI; + // 所有打开的ui窗口Ref值 + const windowsAttrList = Object.keys(mainUI.$refs); + // 寻找当前窗体的工具对象 + const modelToolKey = windowsAttrList.filter((f) => f.indexOf(entity.guid) > -1)[0]; + const modelTool = mainUI.$refs[modelToolKey][0]; + // 当前窗体的元素 + const el = modelTool.$el; + // this.cloneEl(el) + // 样式 + el.style.width = '380px'; //宽度 + el.children[2].style.padding = '0px'; + el.children[2].style.transition = 'none'; + el.children[2].children[0].children[0].style.minWidth = '370px'; + // 关闭名称input + el.children[2].children[0].children[0].children[0].style.display = 'none'; + // 关闭创建按钮 + el.children[2].children[0].children[0].children[1].children[0].children[1].style.display = 'none'; + // 关闭贴地 + el.children[2].children[0].children[0].children[2].children[0].style.display = 'none'; + // 关闭拉伸 + el.children[2].children[0].children[0].children[3].children[0].style.display = 'none'; + el.children[2].children[0].children[0].children[3].children[1].style.display = 'none'; + el.children[2].children[0].children[0].children[3].children[2].style.display = 'none'; + el.children[2].children[0].children[0].children[3].children[3].style.marginLeft = '8px'; + // 右上角关闭 + const cancelTopRightBtn = el.children[1].children[1]; + // 取消按钮元素 + const cancelBtn = el.children[3].children[0]; + // 确认按钮元素 + const okBtn = el.children[3].children[1]; + // 取消按钮 + cancelTopRightBtn.onclick = cancelBtn.onclick = function () { + //恢复原来设置 + // console.log("oldEntity", oldEntity); + // console.log("entity", entity); + // entity.xbsjFromJSON(oldEntity) + // entity = JSON.parse(oldEntity) + entity.depthTest = oldEntity.depthTest; + entity.color = oldEntity.color; + entity.outline = oldEntity.outline; + entity.positions = oldEntity.positions; + entity.editing = false; + }; + okBtn.onclick = function () { + let params = { + id: entity.customProp?.id, + drawData: JSON.stringify(entity), + }; + // console.log("submit", entity); + defHttp + .post( + { + url: '/military/dtMapDraw/edit', + params: params, + }, + { isTransformResponse: false } + ) + .then(() => { + createMessage.success('编辑成功', 2); + }) + .catch(() => { + createMessage.error('编辑失败', 2); + }); + }; + }); + }, + }, + { + text: '删除', + func: () => { + window.$uia.confirm('确认删除?', () => { + defHttp + .delete( + { + url: '/military/dtMapDraw/delete', + params: { id: entity.customProp?.id }, + }, + { isTransformResponse: false, joinParamsToUrl: true } + ) + .then((response) => { + if (response.code == 200) { + let shapeList = store.shapeList; + shapeList.forEach((element, index) => { + const model = window.$earth.getObject(element); + if (model.id == entity.customProp?.id) { + let shape = shapeList.splice(index, 1)[0]; + model.destroy(); + } + }); + store.shapeList = shapeList; + } else { + createMessage.error('删除失败', 2); + console.error('删除失败', response); + } + }) + .catch((res) => { + console.error('错误', res); + }); + }); + }, + }, + ]); + } + }, window.Cesium.ScreenSpaceEventType.RIGHT_CLICK); //右键事件 + } + /* picked事件 */ + { + /* let canvasbox = window.$viewer.canvas, pickPosition = {}, cameraModal = this.$refs.cameraModal;//操作cameraModal组件 + canvasbox.onclick = e => { + pickPosition.x = e.offsetX; + pickPosition.y = e.offsetY; + var picked = window.$viewer.scene.pick(pickPosition); + console.log("picked", picked); + if (picked !== undefined && picked.id !== undefined) { + console.log(e) + } else { + that.cameraModalShow = false; + } + } */ + } +} \ No newline at end of file diff --git a/src/utils/earthMap/listenMouseHandlerSence.ts b/src/utils/earthMap/listenMouseHandlerSence.ts index ea5d555..59b8adc 100644 --- a/src/utils/earthMap/listenMouseHandlerSence.ts +++ b/src/utils/earthMap/listenMouseHandlerSence.ts @@ -1,5 +1,5 @@ /** - * 监听鼠标事件（用于场景管理） + * 监听鼠标事件（用于后台 场景管理） * 用于EarthComp.vue * */ @@ -16,7 +16,7 @@ const cursorCss = ref("grab"); let position: any = null; let rotation: any = null; let fov: any = null; -export function listenMouseHandlerSence(enablePointer = false, that) { +export default function listenMouseHandlerSence(enablePointer = false, that) { viewer = window.$earth.czm.viewer; window.viewer = viewer; window.$earth.interaction.picking.enabled = true; @@ -53,6 +53,8 @@ export function listenMouseHandlerSence(enablePointer = false, that) { //destroy方法有问题无法成功销毁，故选择trycatch try { + console.log("pin",pin); + pin && pin.destroy(); pin = undefined } catch (error) { @@ -70,7 +72,7 @@ export function listenMouseHandlerSence(enablePointer = false, that) { rotation = [window.$earth.camera.rotation[0], window.$earth.camera.rotation[1], window.$earth.camera.rotation[2]]; fov = window.$earth.camera.fov; that.$emit("checkPosition", position, cposition, rotation, fov); - + }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK ); diff --git a/src/utils/earthMap/radarEntity.ts b/src/utils/earthMap/radarEntity.ts index d78cccc..8321b60 100644 --- a/src/utils/earthMap/radarEntity.ts +++ b/src/utils/earthMap/radarEntity.ts @@ -1,7 +1,7 @@ /** * 地图相关方法 * 雷达扫描(viewer) - * + * 用于EarthComp.vue */ class CircleScan { diff --git a/src/utils/earthMap/sceneTreePopContextMenu.ts b/src/utils/earthMap/sceneTreePopContextMenu.ts new file mode 100644 index 0000000..4dcde7c --- /dev/null +++ b/src/utils/earthMap/sceneTreePopContextMenu.ts @@ -0,0 +1,918 @@ +/** + * 图层管理-模型右键菜单 + * 用于EarthComp.vue + */ +import { defHttp } from '/@/utils/http/axios'; +import { cloneModel, cloneShamNode } from '@/utils/earthMap/clone'; +import { useUserStore } from '/@/store/modules/user'; +import { useEarthMapStore } from '/@/store/modules/earthMap'; +import { setLabelStatus, setAllLabelStatus } from '@/utils/earthMap/setLabelStatus'; +import { earthMapUrl } from '@/api/earth/earthMap' +import { useMessage } from '/@/hooks/web/useMessage'; +import { handleNodeType } from '@/utils/earthMap/handleNodeType'; +import setIconByRef from '@/utils/earthMap/setIconByRef'; +import { nextTick } from 'vue'; +import _ from 'lodash'; +import $mitt from '@/utils/earthMap/mitt'; +import $ from 'jquery'; + +let userStore = useUserStore(); +let store = useEarthMapStore(); +const { createMessage } = useMessage(); +export default function sceneTreePopContextMenu({ item, vueObject }, earthUI, that) { + let earth = window.$earth; + let XE = window.XE; + let sceneTree = earthUI.tools.sceneTree; + let sceneTreeComp = sceneTree._comp; + // 转换方法 + let transform = window.Cesium.Math; + //右键之后设置当前 node + item._inner.sn.isSelected = true; + const el = vueObject.$el; + let baseItems: any = [ + { + text: '克隆', + keys: '', + func: () => { + let sn: any = null; + if (item._inner.sn.ref.startsWith('node_')) { + const objectId = item._inner.sn.ref.split('_')[1]; + sn = earth.sceneTree.$refs[objectId]; + } else { + sn = item._inner.sn; + } + if (sn) { + let newSn: any = null; + let newSnData: any = null; + let index = 0; + if (sn.czmObject.xbsjType !== 'Polyline') { + index = cloneModel(sn); + newSn = sn.parent.children[index - 1]; + newSnData = newSn.czmObject; + if (newSnData.xbsjType === 'Model') { + nextTick(() => { + const divs = $('#earthContainer>div>div>div:nth-child(5)') + .children('div') + .eq(1) + .children() + .eq(0) + .children() + .eq(0) + .children() + .each((index, element) => { + if (index <= 1) { + return; + } + const paddingLeft = $(element).children().eq(0).css('padding-left'); + if (paddingLeft === '10px') { + $(element).css('display', 'none'); + } + }); + }); + } + } + // 保存数据到数据库中 + handleNodeType(sn) + // 传感器 + .sensor(() => { + // debugger + // 设置 ref 属性 防止数据库中 eventSerialNum 重复 + newSn.ref += '_copy'; + // 发送请求 保存到数据库中 + let saveSensorModelParameter = { + eventSerialNum: newSn.ref, + lon: transform.toDegrees(newSnData.xbsjPosition[0]).toFixed(5), + lat: transform.toDegrees(newSnData.xbsjPosition[1]).toFixed(5), + height: newSnData.xbsjPosition[2].toFixed(2), + yaw: transform.toDegrees(newSnData.xbsjRotation[0]).toFixed(2), + pitch: transform.toDegrees(newSnData.xbsjRotation[1]).toFixed(2), + roll: transform.toDegrees(newSnData.xbsjRotation[2]).toFixed(2), + isShow: 1, + modelType: '11', + eventType: 1, + }; + defHttp.post( + { + url: earthMapUrl.SaveSensorModel, + params: saveSensorModelParameter, + }, + { isTransformResponse: false } + ).then((res) => { + if (res.success) { + createMessage.success('克隆成功'); + } else { + newSn.parent.children.splice(index, 1); + createMessage.error('克隆成功:' + res.message); + } + }); + }) + // 标志点 微波雷达回调 + .markerPosition(() => { + newSn.title += '_copy'; + let pinImage = newSnData.imageUrl; + const staticDomainURL = window._CONFIG['staticDomainURL'] + '/'; + // 去除 image 地址中的 staticDomainURL 链接 + let imageUri = pinImage.substring(pinImage.indexOf(staticDomainURL) + staticDomainURL.length, pinImage.length); + const jsonObj = JSON.parse(newSnData.customProp); + const labelAttr = jsonObj.labelAttr; + let savePinModelParameter = { + mapLabel: { + labelName: newSnData.name, + labelLon: transform.toDegrees(newSnData.position[0]).toFixed(5), + labelLat: transform.toDegrees(newSnData.position[1]).toFixed(5), + labelHeight: newSnData.position[2].toFixed(2), + labelImgUrl: imageUri, + // 1 启用， 0 禁用 + labelStatus: 1, + // 标记属性-> 3: 标记位置 + labelAttr: labelAttr, + labelCode: '', + lineId: newSn.name, + }, + deviceId: jsonObj.deviceId, + }; + defHttp.post( + { + url: earthMapUrl.saveMapLabel, + params: savePinModelParameter, + }, { isTransformResponse: false } + ).then((res) => { + if (res.success) { + // 修改 ref 成 数据库返回的 id + newSn.ref = res.result; + setIconByRef(newSn.ref, newSn.ref); + newSn.czmObject.pinBuilder.extText = newSnData.name; + jsonObj.labelCode = ''; + newSn.czmObject.customProp = JSON.stringify(jsonObj); + // 保存成功 + createMessage.success('克隆成功'); + } else { + newSn.parent.children.splice(index, 1); + createMessage.error('克隆失败' + res.message); + } + }) + .catch((err) => { + newSn.parent.children.splice(index, 1); + createMessage.error('克隆失败'); + }); + }) + //区域回调 + .polylineCallBack(() => { + // debugger + const currentModel = new window.XE.Obj.Polyline(window.$earth); + const submitData: any = {}; + const poistions = sn.czmObject.positions; + if (poistions.length <= 0) { + return; + } + submitData.name = sn.czmObject.name + '_copy'; + submitData.lineCode = currentModel.guid; + submitData.isLoop = Number(sn.czmObject.loop); + submitData.isDepthCheck = Number(sn.czmObject.depthTest); + submitData.width = sn.czmObject.width; + submitData.interpolation = sn.czmObject.arcType; + submitData.positions = JSON.stringify(poistions); + switch (sn.czmObject.material.type) { + // 实线 + case 'XbsjColorMaterial': + submitData.materialType = 0; + submitData.color = JSON.stringify(sn.czmObject.material.XbsjColorMaterial.color); + submitData.intervalColor = null; + submitData.dashLength = 0; + submitData.dashStyle = 0; + break; + // 虚线 + case 'XbsjPolylineDashMaterial': + submitData.materialType = 1; + submitData.color = JSON.stringify(sn.czmObject.material.XbsjPolylineDashMaterial.color); + submitData.intervalColor = JSON.stringify(sn.czmObject.material.XbsjPolylineDashMaterial.gapColor); + submitData.dashLength = sn.czmObject.material.XbsjPolylineDashMaterial.dashLength; + submitData.dashStyle = sn.czmObject.material.XbsjPolylineDashMaterial.dashPattern; + break; + // 箭头线 + case 'XbsjPolylineArrowMaterial': + submitData.materialType = 2; + submitData.color = JSON.stringify(sn.czmObject.material.XbsjPolylineArrowMaterial.color); + submitData.intervalColor = null; + submitData.dashLength = 0; + submitData.dashStyle = 0; + break; + // 轨迹线 + case 'XbsjODLineMaterial': + submitData.materialType = 3; + submitData.color = JSON.stringify(sn.czmObject.material.XbsjODLineMaterial.color); + submitData.intervalColor = null; + submitData.dashLength = 0; + submitData.dashStyle = 0; + submitData.cycleFrame = sn.czmObject.material.XbsjODLineMaterial.totoalFrameCount; + break; + } + defHttp + .post( + { + url: earthMapUrl.saveMapLine, + params: submitData, + }, + { isTransformResponse: false } + ) + .then((response) => { + if (response.success) { + currentModel.name = submitData.name; + currentModel.loop = submitData.isLoop; + currentModel.depthTest = submitData.isDepthCheck; + currentModel.width = submitData.width; + currentModel.arcType = submitData.interpolation; + currentModel.positions = JSON.parse(submitData.positions); + switch (sn.czmObject.material.type) { + // 实线 + case 'XbsjColorMaterial': + currentModel.material.type = 'XbsjColorMaterial'; + currentModel.material.color = submitData.color; + break; + // 虚线 + case 'XbsjPolylineDashMaterial': + currentModel.material.type = 'XbsjPolylineDashMaterial'; + currentModel.material.color = submitData.color; + currentModel.material.XbsjPolylineDashMaterial.gapColor = submitData.intervalColor; + currentModel.material.XbsjPolylineDashMaterial.dashLength = submitData.dashLength; + currentModel.material.XbsjPolylineDashMaterial.dashPattern = submitData.dashStyle; + break; + // 箭头线 + case 'XbsjPolylineArrowMaterial': + currentModel.material.type = 'XbsjPolylineArrowMaterial'; + currentModel.material.XbsjPolylineArrowMaterial.color = submitData.color; + break; + // 轨迹线 + case 'XbsjODLineMaterial': + currentModel.material.type = 'XbsjODLineMaterial'; + currentModel.material.XbsjODLineMaterial.color = submitData.color; + currentModel.material.XbsjODLineMaterial.totoalFrameCount = submitData.cycleFrame; + break; + } + const leaf = new XE.SceneTree.Leaf(currentModel); + leaf.ref = response.result; + sn.parent.children.push(leaf); + } else { + throw '克隆区域数据出错'; + } + }) + .catch((e) => { + currentModel.destroy(); + createMessage.error('克隆区域数据出错', 3); + }); + }) + //监控点 + .modelCallback(() => { + createMessage.warning('监控点不支持克隆'); + }) + .run(); + } + }, + }, + { + text: '删除', + keys: '', + func: () => { + earthUI.confirm('确认删除图层?', () => { + try { + // debugger + let sn: any = null; + const ref = item._inner.sn.ref; + // update:-- 判断方式要修改 + if (ref.startsWith('node_')) { + const objectId = item._inner.sn.ref.split('_')[1]; + sn = earth.sceneTree.$refs[objectId]; + } else { + sn = item._inner.sn; + } + let id = sn.ref; + // 删除数据库中的数据 + handleNodeType(sn) + // 传感器 + .sensor(() => { + // 发送请求 删除数据库中的数据 + handlerModelDelete(earthMapUrl.deleteSensor, { eventSerialNum: id }); + }) + // 标志点 + .markerPosition(() => { + if (sn.czmObject.addViewShedReturn) { + window.$earth.czm.viewer.entities.remove(sn.czmObject.addViewShedReturn); + } + if (sn.czmObject.customProp) { + let prop = JSON.parse(sn.czmObject.customProp); + if (prop.labelAttr == 4) { + defHttp.delete( + { + url: '/military/RadarConfig/deleteByRadarCode', + params: { radarCode: prop.labelCode }, + }, + { isTransformResponse: false, joinParamsToUrl: true } + ); + } + } + handlerModelDelete(earthMapUrl.deleteMapLabel, { + id: id, + }); + }) + // 线 + .modelCallback(() => { + handlerModelDelete(earthMapUrl.deleteSite, { id: id }).then(() => { + sn.destroy(); + const node = item._inner.sn; + const childList = node.parent.children; + childList.splice(childList.indexOf(node), 1); + node.destroy(); + }); + }) + .polylineCallBack(() => { + const childList = item._inner.sn.children; + + for (const child of childList) { + if (child.children.length > 0) { + createMessage.warning('存在下级数据无法删除'); + throw '存在下级数据无法删除'; + } + } + handlerModelDelete(earthMapUrl.deleteMapLine, { id: id }).then(() => { + const nodeRef = 'node_' + id; + const node = window.$earth.sceneTree.$refs[nodeRef]; + const childList = node.parent.children; + childList.splice(childList.indexOf(node), 1); + node.destroy(); + }); + }) + .run(); + const index = sn.parent.children.indexOf(sn); + sn.parent.children.splice(index, 1); + } catch (error) { } + }); + }, + }, + ]; + const bf = { + text: '布防/撤防', + keys: '', + func: () => { + const xbsjObject = item._inner.sn; + if (!xbsjObject || !xbsjObject.czmObject) return; + const jsonObj = JSON.parse(xbsjObject.czmObject.customProp); + const deviceId = jsonObj.deviceId; + if (!deviceId) { + console.error('主机设备为空'); + return; + } + const labelCode = jsonObj.labelCode; + if (!labelCode) { + console.error('设备编码为null'); + return; + } + const device = store.hostDeviceMapById.get(deviceId); + const ref = xbsjObject.ref; + if (device.deviceType_dictText.indexOf('微波探测器') > -1) { + if (ref && ref.length > 0) { + const state = store.statusByNodeId.get(ref); + if (state == 1) { + setLabelStatus(device, labelCode, ref, 0).then((response) => { + setIconByRef(ref, el); + }); + } else if (state == 0) { + setLabelStatus(device, labelCode, ref, 1).then((response) => { + setIconByRef(ref, el); + }); + } else { + createMessage.error('设备不在线'); + } + } + } else if (device.deviceType_dictText.indexOf('雷达') > -1) { + // console.log("leida"); + //处理单个雷达布防撤防 + //参数 + // { + // "regionIdList": [ + // 2 + // ], // 周界防区区域ID列表（雷达设备列表的ID） + // "regionStatus": 0, // 布防状态 0 - 未布防 1 - 布防 + // "defenceRule": { // 布防规则 + // "startTime": "yyyy-MM-dd HH:mm:ss", // 布防开始时间 每日循环情况下只包含时分秒，格式："HH:mm:ss" 非每日循环情况下包含年月日、时分秒，格式："yyyy-MM-dd HH:mm:ss" + // "endTime": "yyyy-MM-dd HH:mm:ss", // 布防结束时间 每日循环情况下只包含时分秒，格式："HH:mm:ss" 非每日循环情况下包含年月日、时分秒，格式："yyyy-MM-dd HH:mm:ss" + // "dailyCycle": true // 每日循环布防 true - 是 false - 否 + // } + // } + // putAction(this.url.perimeterControl,{}) + } + }, + }; + const selectRef = item._inner.sn.ref; + if (selectRef.startsWith('wbList') || selectRef.startsWith('nodeSecondary_')) { + baseItems = [ + { + text: '一键布防', + keys: '', + func: () => { + setAllLabelStatus(selectRef, item, true); + }, + }, + { + text: '一键撤防', + keys: '', + func: () => { + setAllLabelStatus(selectRef, item, false); + }, + }, + ]; + earthUI.contextMenu.pop(baseItems); + return; + } else if (selectRef.startsWith('monitor') || selectRef.startsWith('ldList')) { + earthUI.contextMenu.pop([]); + return; + } else if (item.level <= 2) { + if (!item._inner.sn.ref.startsWith('node_')) { + earthUI.contextMenu.pop([]); + return; + } else { + baseItems.splice(0, 1); + } + } else { + if (selectRef.startsWith('camera')) { + // baseItems = [bf] + // earthUI.contextMenu.pop(baseItems) + return; + } else if (!selectRef.startsWith('node_')) { + //站点 + baseItems.unshift({ + type: 'divider', + }); + baseItems.unshift(bf); + } + } + let num = 2; + //判断定位的位置 + if ( + item.level <= 2 || + selectRef.startsWith('monitor') || + selectRef.startsWith('wbList') || + selectRef.startsWith('ldList') || + //站点 + selectRef.startsWith('node_') + ) + num = 0; + baseItems.splice(num, 0, { + text: '定位', + keys: '', + func: () => { + // const czmObject = item._inner.sn.czmObject + // czmObject.flyTo() + const ref = item._inner.sn.ref; + let czmObject: any = null; + if (ref.startsWith('node_')) { + const objectId = ref.split('_')[1]; + const sn = earth.sceneTree.$refs[objectId]; + czmObject = sn.czmObject; + } else { + const sn = item._inner.sn; + czmObject = sn.czmObject; + } + + czmObject.flyTo(); + }, + }); + baseItems.push( + ...[ + { + type: 'divider', + }, + { + text: '属性', + func: () => { + $mitt.emit('windowCancel'); + // 属性面板 + const mainUI = earthUI._vm.$refs.mainUI; + const areaCode = getAreaCode(item); + let sn: any = null; + if (item._inner.sn.ref.startsWith('node_')) { + const objectId = item._inner.sn.ref.split('_')[1]; + sn = earth.sceneTree.$refs[objectId]; + // window.XE.MVVM.watch(() => { + // item._inner.sn.title = sn.title + // }) + + sn.czmObject.distanceDisplayCondition = [1.0, 30000.0]; + if (sn.czmObject.xbsjType == 'Model') { + const lineId = item.parent.parent._inner.sn.ref.split('_')[1]; + + that.czmObject = sn.czmObject; + that.node = item; + that.type = 'jkd'; + that.lineId = lineId; + that.areaCode = areaCode; + that.areaByNodeIdModel = store.areaByNodeId; + + nextTick(() => { + that.addModelWinShow = true; + }); + + + return; + } + } else { + sn = item._inner.sn; + if (sn.czmObject.xbsjType == 'Pin') { + const jsonObj = JSON.parse(sn.czmObject.customProp); + + const lineId = jsonObj.labelAttr == 4 ? item.parent._inner.sn.ref.split('_')[1] : item.parent.parent._inner.sn.ref.split('_')[1]; + + that.czmObject = sn.czmObject; + that.node = item; + that.type = jsonObj.labelAttr == 4 ? 'ld' : 'wb'; + that.lineId = lineId; + that.areaCode = areaCode; + that.eidtId = sn.ref; + that.areaByNodeIdModel = store.areaByNodeId; + (that.el = el), + nextTick(() => { + that.addModelWinShow = true; + }); + + + return; + } + } + let index = sn.parent.children.indexOf(sn); + let tempData = sn.czmObject.toAllJSON(); + // 设置属性面板的确定按钮方法 + // 显示属性面板 + earthUI.showPropertyWindow(sn.czmObject); + nextTick(() => { + // 模型窗口 + const windowsAttrList = Object.keys(mainUI.$refs); + // 找到该模型设置属性窗口 + const modelToolKey = windowsAttrList.filter((f) => f.indexOf(sn.czmObject.guid || sn.guid) > -1)[0]; + const modelTool = mainUI.$refs[modelToolKey][0]; + // 对应处理方法 + handleNodeType(sn) + // 感应器 + .sensor(() => { + // 禁用模型名称编辑 + modelTool.$el.getElementsByClassName('xbsj-flatten')[0].children[0].children[1].setAttribute('disabled', 'disabled'); + }) + .default(() => { + // 启用模型名称编辑 + modelTool.$el.getElementsByClassName('xbsj-flatten')[0].children[0].children[1].removeAttribute('disabled'); + }) + .run(); + + // modelTool + modelTool.ok = () => { + // 确定时清除这个事件 + $mitt.off('windowCancel'); + // 保存前端数据 + const modelToolObj = modelTool._czmObj; + if (!modelToolObj) { + return; + } + modelToolObj.positionEditing = false; + if (modelToolObj.isCreating) { + modelToolObj.isCreating = false; + const sceneObject = new XE.SceneTree.Leaf(modelToolObj); + earthUI.addSceneObject(sceneObject); + } + + // 保存到数据库 + propertiesWindowConfirm(modelTool, sn, index); + // 关闭属性面板 + modelTool.close(); + }; + modelTool.cancel = () => { + // 清除这个事件 + $mitt.off('windowCancel'); + // 关闭属性面板 + modelTool.close(); + let t = modelTool._czmObj; + // 如果是创建的话，需要删除 + t && t.positionEditing === false && t.isCreating && t.isCreating === false && t.destroy(); + // 恢复之前的数据 + t && t.xbsjFromJSON(tempData); + }; + $mitt.on('windowCancel', modelTool.cancel); + // 下面的代码，是切换属性面板里选项窗口， 必须 + // 否侧 ok cancel 等方法执行是原本的方法而不是已经修改的方法 + modelTool.tabShow = '3'; + modelTool.tabShow = '1'; + }); + }, + }, + ] + ); + // 右键菜单-重命名 + // 先销毁之前的 on-change-title 事件 + vueObject.$off('on-change-title', handleChangeTitle); + // 重命名时 on-change-title 事件 + vueObject.$on('on-change-title', handleChangeTitle); + + // 弹出右键菜单 + earthUI.contextMenu.pop(baseItems); +} + + +// 右键菜单删除按钮的删除方法 +export function handlerModelDelete(url, params) { + return defHttp + .delete( + { + url: url, + params: params, + }, + { isTransformResponse: false, joinParamsToUrl: true } + ) + .then((res) => { + if (res.success) { + createMessage.success('删除成功'); + } else { + createMessage.error('删除失败'); + console.log('asdasdasd'); + } + }); +} + + +export function getAreaCode(item) { + const currentRef = item._inner.sn.ref; + if (!store.areaByNodeId.has(currentRef)) { + if (item.parent) { + return getAreaCode(item.parent); + } + } else { + return store.areaByNodeId.get(currentRef); + } +} + + +// 重命名 on-change-title 事件 使用 lodash.debounce 函数(防抖) +export const handleChangeTitle = _.debounce(function (options) { + const sn = options.item._inner.sn; + const newTitle = options.title; + + // 修改模型属性后，提交到后台。先判断模型的节点，调用不同的接口 + handleNodeType(sn) + // 感应器 + .sensor(() => { + // 不支持修改名称 + createMessage.warning('不支持修改感应器的名称'); + }) + // 传感器标志线 + .modelCallback(() => { + // 发送请求 保存模型属性 + let editCameraSiteModelParameter = { + id: sn.ref, + sitename: newTitle, + }; + defHttp.put( + { + url: earthMapUrl.updateSite, + params: editCameraSiteModelParameter, + }, + { isTransformResponse: false } + ).then((res) => { + if (res.success) { + createMessage.success('修改成功'); + } else { + createMessage.error('修改失败'); + } + }) + .catch((error) => { + createMessage.error('修改失败'); + }); + }) + .markerPosition(() => { + // 发送请求 保存模型属性 + let editPinModelParameter = { + id: sn.ref, + labelName: newTitle, + }; + defHttp + .put( + { + url: earthMapUrl.updateMapLabel, + params: editPinModelParameter, + }, + { isTransformResponse: false } + ) + .then((res) => { + if (res.success) { + // 修改扩展文本 + sn.czmObject.pinBuilder.extText = newTitle; + createMessage.success('修改成功'); + } else { + createMessage.error('修改失败'); + } + }) + .catch((error) => { + createMessage.error('修改失败'); + }); + }) + .run(); +}, 150); + +// 属性面板确定按钮方法 +export function propertiesWindowConfirm(propertiesWindow, sn, index) { + // 属性面板 所修改的模型 + let model: any = null; + if (sn.ref && !sn.ref.startsWith('node_')) { + model = sn; + } else { + model = sn.parent.children[index]; + } + + let modelData = model.czmObject; + // 转换方法 + let transform = window.Cesium.Math; + + // 修改模型属性后，提交到后台。先判断模型的节点，调用不同的接口 + handleNodeType(sn) + // 传感器 + .sensor(() => { + // 发送请求 保存模型属性 + let editSensorParams = { + eventSerialNum: model.ref, + lon: transform.toDegrees(modelData.xbsjPosition[0]).toFixed(5), + lat: transform.toDegrees(modelData.xbsjPosition[1]).toFixed(5), + height: modelData.xbsjPosition[2].toFixed(2), + yaw: transform.toDegrees(modelData.xbsjRotation[0]).toFixed(2), + pitch: transform.toDegrees(modelData.xbsjRotation[1]).toFixed(2), + roll: transform.toDegrees(modelData.xbsjRotation[2]).toFixed(2), + isShow: 1, + // 传感器类型 + modelType: '11', + // 事件类型 + eventType: 1, + }; + defHttp + .put( + { + url: earthMapUrl.updateSensor, + params: editSensorParams, + }, + { isTransformResponse: false } + ) + .then((res) => { + if (res.success) { + createMessage.success('修改成功'); + } else { + createMessage.error('修改失败: ' + res.message); + } + }); + }) + // 站点 + .modelCallback(() => { + let startNum = modelData.url.lastIndexOf('/') + 1; + let modelName = ''; + if (startNum > 0) { + modelName = modelData.url.substring(startNum, modelData.url.length); + } + // 发送请求 保存模型属性 + let editCameraSiteModelParameter = { + id: model.ref, + longitude: transform.toDegrees(modelData.xbsjPosition[0]).toFixed(6), + latitude: transform.toDegrees(modelData.xbsjPosition[1]).toFixed(6), + height: modelData.xbsjPosition[2], + yaw: transform.toDegrees(modelData.xbsjRotation[0]).toFixed(6), + pitch: transform.toDegrees(modelData.xbsjRotation[1]).toFixed(6), + roll: transform.toDegrees(modelData.xbsjRotation[2]).toFixed(6), + modelUrl: modelName, + sitename: modelData.name, + }; + defHttp + .put( + { + url: earthMapUrl.updateSite, + params: editCameraSiteModelParameter, + }, + { isTransformResponse: false } + ) + .then((res) => { + if (res.success) { + modelData.pinBuilder.extText = modelData.name; + createMessage.success('修改成功'); + } else { + createMessage.error('修改失败'); + } + }); + }) + // 标志点 + .markerPosition(() => { + let pinImage = modelData.imageUrl; + const staticDomainURL = window._CONFIG['staticDomainURL'] + '/'; + // 去除 image 地址中的 staticDomainURL 链接 + let imageUri = pinImage.substring(pinImage.indexOf(staticDomainURL) + staticDomainURL.length, pinImage.length); + let editPinModelParameter = { + id: model.ref, + labelName: modelData.name, + labelLon: transform.toDegrees(modelData.position[0]).toFixed(5), + labelLat: transform.toDegrees(modelData.position[1]).toFixed(5), + labelHeight: modelData.position[2].toFixed(2), + labelImgUrl: imageUri, + }; + defHttp + .put( + { + url: earthMapUrl.updateMapLabel, + params: editPinModelParameter, + }, + { isTransformResponse: false } + ) + .then((res) => { + if (res.success) { + modelData.pinBuilder.extText = modelData.name; + createMessage.success('修改成功'); + } else { + createMessage.error('修改失败'); + } + }) + .catch((error) => { + createMessage.error('修改失败'); + }); + }) + .polylineCallBack(() => { + const submitData: any = {}; + const poistions = modelData.positions; + if (poistions.length <= 0) { + return; + } + submitData.id = model.ref; + submitData.name = modelData.name; + if (!modelData.customProp) { + submitData.lineCode = modelData.guid; + } + + submitData.isLoop = Number(modelData.loop); + submitData.isDepthCheck = Number(modelData.depthTest); + submitData.width = modelData.width; + submitData.interpolation = modelData.arcType; + submitData.positions = JSON.stringify(poistions); + switch (modelData.material.type) { + // 实线 + case 'XbsjColorMaterial': + submitData.materialType = 0; + // material.XbsjColorMaterial = {} + submitData.color = JSON.stringify(modelData.material.XbsjColorMaterial.color); + submitData.intervalColor = null; + submitData.dashLength = 0; + submitData.dashStyle = 0; + break; + // 虚线 + case 'XbsjPolylineDashMaterial': + submitData.materialType = 1; + submitData.color = JSON.stringify(modelData.material.XbsjPolylineDashMaterial.color); + submitData.intervalColor = JSON.stringify(modelData.material.XbsjPolylineDashMaterial.gapColor); + submitData.dashLength = modelData.material.XbsjPolylineDashMaterial.dashLength; + submitData.dashStyle = modelData.material.XbsjPolylineDashMaterial.dashPattern; + // material.XbsjPolylineDashMaterial = {} + // material.XbsjPolylineDashMaterial.dashLength = data.dashLength + // material.XbsjPolylineDashMaterial.dashPattern = data.dashStyle + break; + // 箭头线 + case 'XbsjPolylineArrowMaterial': + submitData.materialType = 2; + // material.XbsjPolylineArrowMaterial = {} + submitData.color = JSON.stringify(modelData.material.XbsjPolylineArrowMaterial.color); + submitData.intervalColor = null; + submitData.dashLength = 0; + submitData.dashStyle = 0; + break; + // 轨迹线 + case 'XbsjODLineMaterial': + submitData.materialType = 3; + submitData.color = JSON.stringify(modelData.material.XbsjODLineMaterial.color); + submitData.intervalColor = null; + submitData.dashLength = 0; + submitData.dashStyle = 0; + submitData.cycleFrame = modelData.material.XbsjODLineMaterial.totoalFrameCount; + + // material.XbsjODLineMaterial = {} + // material.XbsjODLineMaterial.color = JSON.parse(data.color) + // material.XbsjODLineMaterial.totoalFrameCount = data.cycleFrame + break; + } + defHttp + .put( + { + url: earthMapUrl.updateMapLine, + params: submitData, + }, + { isTransformResponse: false } + ) + .then((res) => { + if (res.success) { + createMessage.success('修改成功！', 2); + sn.title = submitData.name; + window.$earth.sceneTree.$refs['node_' + sn.ref].title = submitData.name; + } else { + createMessage.error('修改失败', 2); + } + }) + .catch((error) => { + createMessage.error('修改失败', 2); + }); + }) + .run(); +} \ No newline at end of file diff --git a/src/utils/earthMap/setIconByRef.ts b/src/utils/earthMap/setIconByRef.ts new file mode 100644 index 0000000..7d158c2 --- /dev/null +++ b/src/utils/earthMap/setIconByRef.ts @@ -0,0 +1,36 @@ +/** + * 设置按钮颜色状态 + * 用于EarthComp.vue + */ +import { defHttp } from '/@/utils/http/axios'; +import { useUserStore } from '/@/store/modules/user'; +import { useEarthMapStore } from '/@/store/modules/earthMap'; + +import circleDot2 from '@/assets/earthMap/circleDot2.png'; +import circleDot1 from '@/assets/earthMap/circleDot1.png'; +import circleDot3 from '@/assets/earthMap/circleDot3.png'; +let userStore = useUserStore(); +let store = useEarthMapStore(); + +export default function setIconByRef(ref, el) { + const status = store.statusByNodeId.get(ref); + if (status != undefined && status != null) { + let img = store.imgByRef.get(ref); + const icon = el.children[0].children[2]; + if (!img) { + img = document.createElement('img'); + store.imgByRef.set(ref, img); + } + if (icon.nodeName == 'I') { + icon.replaceWith(img); + } + if (status == 1) { + img.src = circleDot2; + } else if (status == 0) { + img.src = circleDot1; + } else { + img.src = circleDot3; + } + img.setAttribute('style', 'width:16px;height:16px;margin-top:7px'); + } +} \ No newline at end of file diff --git a/src/utils/earthMap/setLabelStatus.ts b/src/utils/earthMap/setLabelStatus.ts new file mode 100644 index 0000000..8005cdb --- /dev/null +++ b/src/utils/earthMap/setLabelStatus.ts @@ -0,0 +1,225 @@ +/** + * 用于EarthComp.vue + */ +import { defHttp } from '/@/utils/http/axios'; +import { useUserStore } from '/@/store/modules/user'; +import { useEarthMapStore } from '/@/store/modules/earthMap'; +import { earthMapUrl } from '@/api/earth/earthMap' + +let userStore = useUserStore(); +let store = useEarthMapStore(); + +export function setLabelStatus(device, labelCode, id, code) { + const args = { + device: device, + code: code, // 命令码：0-撤防 1-布防 2-状态查询 3-其他预留 + deviceType: 2, // 设备类型：1-探测主机 2-探测器 3-串口设备 4-预留 + deviceSn: labelCode, // 设备条码 + }; + // console.log("device",device); + + if (device.deviceType_dictText.indexOf('微波探测器') > -1) { + // console.log("微波探测器"); + + return defHttp.post({ url: '/military/netty/microwaveDetector/maintenance', params: args }, { isTransformResponse: false }) + .then((response) => { + if (response.success) { + const status = response; + store.statusByNodeId.set(id, status); + } else { + store.statusByNodeId.set(id, -10); + } + return response; + }) + .catch((error) => { + store.statusByNodeId.set(id, -10); + return error; + }) + + } else if (device.deviceType_dictText.indexOf('雷达') > -1) { + store.statusByNodeId.set(id, 1); + //雷达周界防区列表 + return defHttp + .get({ url: earthMapUrl.perimeterRegionList, params: { regionType: 2 } }, { isTransformResponse: false }) + .then( + (res) => { + // console.log(res); + if (res.success) { + // (未测试) + res.result.forEach((element) => { + if (element.id == id) { + // this.statusByNodeId.set(id, element.isOnline) + } + }); + } else { + store.statusByNodeId.set(id, 1); + } + return res; + }, + (err) => { + store.statusByNodeId.set(id, 1); + return err; + } + ) + .catch((err) => { + store.statusByNodeId.set(id, 1); + return err; + }); + } + return Promise.resolve("未知错误"); +} + +export function setAllLabelStatus(selectRef, item, wbUnifiedResponse) { + + //监控点 + if (selectRef.startsWith('monitor')) { + let grandsons: any = []; + const childs = item.children; + for (const child of childs) { + const grandson1 = child.children; + if (grandson1 && grandson1.length > 0) { + grandsons = grandsons.concat(grandson1); + } + } + for (const grandson of grandsons) { + const xbsjObject = grandson._inner.sn; + const ref = xbsjObject.ref; + if (ref.startsWith('camera_')) { + const state = store.statusByNodeId.get(ref); + if (state == 1) { + store.statusByNodeId.set(ref, 0); + const img = store.imgByRef.get(ref); + img.src = require('@/assets/earthMap/circleDot1.png'); + } else if (state == 0) { + store.statusByNodeId.set(ref, 1); + const img = store.imgByRef.get(ref); + img.src = require('@/assets/earthMap/circleDot1.png'); + } + } + } + } + //微波 + else if (selectRef.startsWith('wbList')) { + const parentNode = item.parent; + let areaCode = null; + if (parentNode) { + const falseNodeRef = item.parent._inner.sn.ref; + const nodeRef = falseNodeRef.split('_')[1]; + const trueNode = window.$earth.sceneTree.$refs[nodeRef]; + areaCode = trueNode.czmObject.customProp; + } + const childs1 = item.children; + if (!childs1 || childs1.length < 0) { + return; + } + const length = childs1.length; + let index = -1; + for (const child of childs1) { + index++; + let xbsjObject = child._inner.sn; + let jsonObj = JSON.parse(xbsjObject.czmObject.customProp); + let deviceId = jsonObj.deviceId; + let device = store.hostDeviceMapById.get(deviceId); + if (!device) { + console.error('主机设备为null'); + continue; + } + const args = { + device: device, + isDefence: wbUnifiedResponse, + defenceArea: areaCode, + detectorList: null, + }; + defHttp + .post( + { + url: earthMapUrl.setDefenseArea, + params: args, + }, + { isTransformResponse: false } + ) + // postAction(this.url.setDefenseArea, args) + .then((response) => { + if (!response.success) { + return; + } else { + for (let i = index; i < length; i++) { + const child1 = childs1[i]; + const xbsjObject1 = child1._inner.sn; + const ref1 = xbsjObject1.ref; + if (ref1 && ref1.length > 0) { + const state1 = store.statusByNodeId.get(ref1); + if (state1 == 0 && wbUnifiedResponse) { + store.statusByNodeId.set(ref1, 1); + const img1 = store.imgByRef.get(ref1); + if (!img1) return; + img1.src = require('@/assets/earthMap/circleDot2.png'); + } else if (state1 == 1 && !wbUnifiedResponse) { + store.statusByNodeId.set(ref1, 0); + const img1 = store.imgByRef.get(ref1); + if (!img1) return; + img1.src = require('@/assets/earthMap/circleDot1.png'); + } + } + } + } + console.log(response); + }); + break; + } + } else if (selectRef.startsWith('nodeSecondary')) { + const childs1 = item.children; + if (!childs1 || childs1.length < 0) { + return; + } + for (const child of childs1) { + let xbsjObject = child._inner.sn; + let jsonObj = JSON.parse(xbsjObject.czmObject.customProp); + let deviceId = jsonObj.deviceId; + let device = store.hostDeviceMapById.get(deviceId); + if (!device) { + console.error('主机设备为null'); + continue; + } + let regionIdList: any = []; + if (item.children.length > 0) { + item.children.forEach((element) => { + regionIdList.push(element._inner.sn.ref); + }); + } + const args = { + regionIdList: regionIdList, // 周界防区区域ID列表（雷达设备列表的ID） + regionStatus: wbUnifiedResponse ? 1 : 0, // 布防状态 0 - 未布防 1 - 布防 + defenceRule: { + // 布防规则 + startTime: 'yyyy-MM-dd HH:mm:ss', // 布防开始时间 每日循环情况下只包含时分秒，格式："HH:mm:ss" 非每日循环情况下包含年月日、时分秒，格式："yyyy-MM-dd HH:mm:ss" + endTime: 'yyyy-MM-dd HH:mm:ss', // 布防结束时间 每日循环情况下只包含时分秒，格式："HH:mm:ss" 非每日循环情况下包含年月日、时分秒，格式："yyyy-MM-dd HH:mm:ss" + dailyCycle: true, // 每日循环布防 true - 是 false - 否 + }, + }; + // putAction(this.url.perimeterControl,{}) + console.log(device, store.statusByNodeId, xbsjObject); + let ref1 = xbsjObject.ref; + let state1 = store.statusByNodeId.get(ref1); + //一键布防撤防测试使用 + if (wbUnifiedResponse) { + state1 = 0; + } else { + state1 = 1; + } + if (state1 == 0 && wbUnifiedResponse) { + store.statusByNodeId.set(ref1, 1); + const img1 = store.imgByRef.get(ref1); + if (!img1) return; + img1.src = require('@/assets/earthMap/circleDot2.png'); + } else if (state1 == 1 && !wbUnifiedResponse) { + store.statusByNodeId.set(ref1, 0); + const img1 = store.imgByRef.get(ref1); + if (!img1) return; + console.log(img1); + img1.src = require('@/assets/earthMap/circleDot1.png'); + } + // break + } + } +} \ No newline at end of file diff --git a/src/utils/earthMap/websocket.ts b/src/utils/earthMap/websocket.ts index 07d4276..f5acd01 100644 --- a/src/utils/earthMap/websocket.ts +++ b/src/utils/earthMap/websocket.ts @@ -1,14 +1,22 @@ +/** + * WebSocket + * 用于EarthComp.vue + */ import _ from 'lodash'; +import $ from 'jquery'; import { useUserStore } from '/@/store/modules/user'; +import { useEarthMapStore } from '/@/store/modules/earthMap'; import { defHttp } from '/@/utils/http/axios'; import $mitt from '@/utils/earthMap/mitt'; import { useMessage } from "/@/hooks/web/useMessage"; import earthUtils from '@/utils/earthMap/earth'; import alarmImg from '@/assets/earthMap/alarm.gif'; -const { createMessage } = useMessage(); +import { earthMapUrl } from '@/api/earth/earthMap' +const { createMessage } = useMessage(); let userStore = useUserStore(); +let store = useEarthMapStore(); let websock: any = []; function initWebSocket(configName) { if ('WebSocket' in window) { @@ -73,7 +81,7 @@ const loreadAlarmInfo = _.debounce( ); // -async function websocketonmessage(e) { +async function websocketonmessage(e, that) { //接收后端数据 var data = eval('(' + e.data + ')'); const cesium = window.Cesium; @@ -96,7 +104,7 @@ async function websocketonmessage(e) { //显示报警位置 window.$earth.sceneTree.$refs[data.labelCode].czmObject.color = [1, 0.09803921568627451, 0, 1]; } else if (data.msgTxt != undefined && data.dealStatus == 3) { - this.$notification.open({ + that.$notification.open({ key: 'fenceInfo', message: '围栏信息通知', description: data.msgTxt + '！', @@ -114,13 +122,13 @@ async function websocketonmessage(e) { //4.提示音 if (data.dealStatus !== 2 && data.dealStatus !== 0) { - await this.$refs.audio.play(); + await that.$refs.audio.play(); setTimeout(() => { - this.$refs.audio.pause(); //N秒后暂停播放 + that.$refs.audio.pause(); //N秒后暂停播放 }, data.alarmNum * 1000); } } else if (data.cmd == 'new_microwave_warn_info' || data.cmd == 'new_radar_warn_info' || data.cmd == 'new_video_warn_info') { - if (this.alarmInfoMap.has(data.serialNum)) { + if (store.alarmInfoMap.has(data.serialNum)) { return; } const evalString = ` @@ -197,7 +205,7 @@ async function websocketonmessage(e) { pin.xbsjFromJSON(pinConfig); scanline.xbsjFromJSON(scanlineConfig); // 判断现在相机的高度来显示报警相关模型 - if (this._earth.camera.position[2] < 100) { + if (window.$earth.camera.position[2] < 100) { // 隐藏 pin, 显示 scanline pin._div.hidden = true; scanline.show = true; @@ -207,20 +215,20 @@ async function websocketonmessage(e) { scanline.show = false; } scanline.flyTo(); - this.alarmInfoMap.set(data.serialNum, { pin: pin, scanline: scanline, timestamp: Date.now() }); + store.alarmInfoMap.set(data.serialNum, { pin: pin, scanline: scanline, timestamp: Date.now() }); //报警弹窗 - this.videoWindowProps.title = `实时报警窗口（${data.cameraName}）`; - this.videoWindowProps.videoUrl = data.cameraCode; //相机编码 - this.videoWindowProps.isAlarm = true; - this.videoWindowProps.visible = true; - this.videoWindowProps.playRecord = false; + that.videoWindowProps.title = `实时报警窗口（${data.cameraName}）`; + that.videoWindowProps.videoUrl = data.cameraCode; //相机编码 + that.videoWindowProps.isAlarm = true; + that.videoWindowProps.visible = true; + that.videoWindowProps.playRecord = false; - this.videoWindowProps.warnEvent.happenTime = data.happenTime; - this.videoWindowProps.warnEvent.happenLoc = `${Number(data.lon).toFixed(6)},${Number(data.lat).toFixed(6)}`; - this.videoWindowProps.warnEvent.warnNum = 1; - this.videoWindowProps.warnEvent.warnLevel = filterDictTextByCache('ms_warn_level', data.warnLevel); - this.videoWindowProps.warnEvent.warnType = filterDictTextByCache('ms_warn_type', data.warnType); - this.videoWindowProps.warnEvent.warnContent = data.warnContent; + that.videoWindowProps.warnEvent.happenTime = data.happenTime; + that.videoWindowProps.warnEvent.happenLoc = `${Number(data.lon).toFixed(6)},${Number(data.lat).toFixed(6)}`; + that.videoWindowProps.warnEvent.warnNum = 1; + that.videoWindowProps.warnEvent.warnLevel = filterDictTextByCache('ms_warn_level', data.warnLevel); + that.videoWindowProps.warnEvent.warnType = filterDictTextByCache('ms_warn_type', data.warnType); + that.videoWindowProps.warnEvent.warnContent = data.warnContent; //若警示界面打开着，则刷新列表 if ($('.infoList').css('visibility') == 'visible') { @@ -228,19 +236,19 @@ async function websocketonmessage(e) { } //提示音 - await this.$refs.audio.play(); + await that.$refs.audio.play(); setTimeout(() => { - this.$refs.audio.pause(); //N秒后暂停播放 + that.$refs.audio.pause(); //N秒后暂停播放 }, 3 * 1000); } else if (data.cmd == 'earthMap_model_realtime_info') { console.log(data); - console.log(this.radarAlarmDataMap); + console.log(store.radarAlarmDataMap); // 雷达轨迹报警数据 const alarmContent = data.content; - if (this.radarAlarmDataMap.has(data.eventSerialNum)) { + if (store.radarAlarmDataMap.has(data.eventSerialNum)) { // 存在雷达报警数据 - let radarAlarmData = this.radarAlarmDataMap.get(data.eventSerialNum); + let radarAlarmData = store.radarAlarmDataMap.get(data.eventSerialNum); let targetMap = radarAlarmData.target; if (targetMap.has(data.modelId)) { // 存在目标数据 @@ -313,7 +321,7 @@ async function websocketonmessage(e) { const updateTime = Date.now(); radarAlarmData.timestamp = updateTime; // 更新 pin 的时间 - let alarm = this.alarmInfoMap.get(data.eventSerialNum); + let alarm = store.alarmInfoMap.get(data.eventSerialNum); if (alarm) { alarm.timestamp = updateTime; } @@ -371,23 +379,23 @@ async function websocketonmessage(e) { }; let targetMap = new Map(); targetMap.set(data.modelId, target); - this.radarAlarmDataMap.set(data.eventSerialNum, { + store.radarAlarmDataMap.set(data.eventSerialNum, { target: targetMap, timestamp: Date.now(), }); - if (!this.alarmInfoMap.has(data.eventSerialNum)) { + if (!store.alarmInfoMap.has(data.eventSerialNum)) { // 不存在告警信息(小灯或扫描线)时发送 // 事件编号到后台使其重新发送websocket报警数据 await new Promise((r) => setTimeout(r, 500)); - if (!this.alarmInfoMap.has(data.eventSerialNum)) { + if (!store.alarmInfoMap.has(data.eventSerialNum)) { console.log('发送websocket报警数据'); - this.loreadAlarmInfo(this.url.sendRadarAlarmByWebSocket, data.eventSerialNum); + loreadAlarmInfo(earthMapUrl.sendRadarAlarmByWebSocket, data.eventSerialNum); } } } - if (this.videoWindowProps.visible) { - this.videoWindowProps.warnEvent.warnNum = this.radarAlarmDataMap.get(data.eventSerialNum).target.size; + if (that.videoWindowProps.visible) { + that.videoWindowProps.warnEvent.warnNum = store.radarAlarmDataMap.get(data.eventSerialNum).target.size; } // console.debug('雷达轨迹报警数据', this.radarAlarmDataMap); } else if (data.cmd == '') { @@ -400,9 +408,9 @@ function websocketclose(e) { console.log('connection closed (' + e.code + ')'); createMessage.warn('websocket连接已断开', 3); } -function websocketdosend(configName) { +function websocketdosend(configName,that) { //发送数据 - this.spinning = !this.spinning; //加载状态 + that.spinning = !that.spinning; //加载状态 console.log('this.websock[configName]', websock[configName]); let message = { topic: 'Show_Single_Video', diff --git a/src/views/earthMap/edit/EarthComp.vue b/src/views/earthMap/edit/EarthComp.vue index dc69b7d..ef8ea59 100644 --- a/src/views/earthMap/edit/EarthComp.vue +++ b/src/views/earthMap/edit/EarthComp.vue @@ -107,10 +107,10 @@ import AISInfoWindow from '@/components/earthMap/AISInfoWindow.vue'; import { getRealTime } from '@/utils/date'; import $mitt from '@/utils/earthMap/mitt'; - - import { guid } from '@/utils/earthMap/guid'; + import guid from '@/utils/earthMap/guid'; import HandleNodeType from '@/utils/earthMap/handleNodeType'; - import { keyControlInit } from '@/utils/earthMap/keyControlInit'; + import { handleNodeType } from '@/utils/earthMap/handleNodeType'; + import { getRandomArr, getHeigthByLonLat } from '@/utils/earthMap/earth'; import redFlag from '@/assets/earthMap/redFlag.png'; import { addModel, addPin, addViewShedRadar, addShipGroundImg, addShipTrack } from '@/utils/earthMap/earthObj'; import { drawAllShips } from '@/utils/earthMap/shipDraw'; @@ -120,10 +120,20 @@ import { useMessage } from '/@/hooks/web/useMessage'; import { CircleScan } from '@/utils/earthMap/radarEntity'; import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth'; - import { listenMouseHandlerSence } from '@/utils/earthMap/listenMouseHandlerSence'; + import listenMouseHandlerSence from '@/utils/earthMap/listenMouseHandlerSence'; + import listenMouseHandler from '@/utils/earthMap/listenMouseHandler'; import getLineInfo from '@/utils/earthMap/getLineInfo'; import getCameraInfo from '@/utils/earthMap/getCameraInfo'; + import getLabelInfo from '@/utils/earthMap/getLabelInfo'; + import { setLabelStatus, setAllLabelStatus } from '@/utils/earthMap/setLabelStatus'; + import keyControlInit from '@/utils/earthMap/keyControlInit'; + import createRealTimeObj from '@/utils/earthMap/createRealTimeObj'; + import sceneTreePopContextMenu from '@/utils/earthMap/sceneTreePopContextMenu'; import { drawInit } from '@/utils/earthMap/earthDraw'; + import { cloneModel, cloneShamNode } from '@/utils/earthMap/clone'; + import { initWebSocket, websocketonopen, websocketonerror, loreadAlarmInfo, + websocketclose, websocketonmessage, websocketdosend, websock,} from '@/utils/earthMap/websocket'; + import setIconByRef from '@/utils/earthMap/setIconByRef'; import dwPng from '@/assets/images/rotationXYZ.png'; import rotationXYZ from '@/assets/images/rotationXYZ.png'; @@ -293,13 +303,13 @@ */ userStore = useUserStore(); store = useEarthMapStore(); - + setLabelStatus: any = setLabelStatus + setIconByRef: any = setIconByRef earthTitle = '态势监控一张图'; realTime = '……'; // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！ - _earth = undefined; - _earthUI = undefined; - _viewer = undefined; + // _earth = undefined; + // _viewer = undefined; _pin = undefined; _handler = undefined; // sceneTree= require('@/assets/earthMap/resjson/sc.json'), @@ -355,14 +365,14 @@ // 雷达重新发送报警信息 sendRadarAlarmByWebSocket: '/military/warn/sendRadarAlarmByWebSocket', }; - cameraData: any = {}; + // cameraData: any = {}; cameraModalShow = false; poiModalShow = false; radioBtnShow = true; glmId: any = []; spinning = false; earthChangeSpin = false; - websock: any = []; + // websock: any = []; timer: any = null; // 保活定时器 timer2: any = null; // 时间定时器 // 报警清除-定时器 @@ -391,15 +401,15 @@ sceneTreeOldRefValue = ''; sceneInfo: any = null; // 区域节点By Ref划分 - nodeConfigByRef = new Map(); - nodeCheckedByRef = new Map(); - areaByNodeId = new Map(); - statusByNodeId = new Map(); - imgByRef = new Map(); - radarAlarmDataMap = new Map(); + // nodeConfigByRef = new Map(); + // nodeCheckedByRef = new Map(); + // areaByNodeId = new Map(); + // statusByNodeId = new Map(); + // imgByRef = new Map(); + // radarAlarmDataMap = new Map(); wbUnifiedResponse = false; - hostDeviceMapById = new Map(); - alarmInfoMap = new Map(); + // hostDeviceMapById = new Map(); + // alarmInfoMap = new Map(); toolbarShow = false; //addModelWin @@ -452,13 +462,13 @@ // 添加地图上的鼠标监听事件 - pin: any = undefined; - viewer: any = undefined; - // 鼠标样式 - cursorCss = "grab"; - position: any = null; - rotation: any = null; - fov: any = null; + // pin: any = undefined; + // viewer: any = undefined; + // // 鼠标样式 + // cursorCss = "grab"; + // position: any = null; + // rotation: any = null; + // fov: any = null; mounted() { let that = this; //随机数 @@ -546,20 +556,22 @@ child.czmObject.show = parentChecked; } } - this.nodeCheckedByRef.set(ref, parentChecked); + this.store.nodeCheckedByRef.set(ref, parentChecked); this.showOrHideChild(child, earthUI, parentChecked); } } } } + // 告警模型显示/隐藏 showAlarmPin(show) { - this.alarmInfoMap.forEach((item, _index) => { + this.store.alarmInfoMap.forEach((item, _index) => { item.pin.show = show; item.pin._div.hidden = !show; item.scanline.show = !show; }); } + cameraPositionChange = _.debounce( (that) => { let height = window.$earth.camera.position[2]; @@ -592,6 +604,7 @@ this.PropsDrawInitShow = true; this.PropsKeyControlInitShow = true; } + //创建地球 XbsjEarthUI.create('earthContainer').then(async (earthUI: any) => { // 设置全局变量，可调试 window.$uia = earthUI; @@ -661,19 +674,18 @@ }; // 修改图层管理中，右键菜单的显示 sceneTree._comp.popContextMenu = ({ item, vueObject }) => { - that.sceneTreePopContextMenu({ item, vueObject }, earthUI); + sceneTreePopContextMenu({ item, vueObject }, earthUI, this); }; earthUI.tools.featureProperty.disabled = true; //禁用对象属性面板 - this._earthUI = earthUI; - this._earth = earthUI.earth; - this._earth.interaction.picking.enabled = true; // 全局打开点击事件权限 - this._earth.czm.viewer.scene.globe.depthTestAgainstTerrain = true; //开启深度检测 - this._earth.terrainEffect.subSurfaceEnabled = false; //开启地表透明模式 + window.$earth = earthUI.earth; + window.$earth.interaction.picking.enabled = true; // 全局打开点击事件权限 + window.$earth.czm.viewer.scene.globe.depthTestAgainstTerrain = true; //开启深度检测 + window.$earth.terrainEffect.subSurfaceEnabled = false; //开启地表透明模式 - this._viewer = earthUI.earth.czm.viewer; - this._viewer.scene.fxaa = true; //图像改善 - this._viewer.scene.globe.baseColor = Cesium.Color.BLACK; + // this._viewer = earthUI.earth.czm.viewer; + window.$viewer.scene.fxaa = true; //图像改善 + window.$viewer.scene.globe.baseColor = window.Cesium.Color.BLACK; //加载场景资源 // console.log("this.sceneTree",this.sceneTree); @@ -688,37 +700,38 @@ window._CONFIG['earthMapURL'] + window._CONFIG['terrain']; - this._earth.sceneTree.root = { + window.$earth.sceneTree.root = { expand: true, title: '场景树', children: [this.sceneTree], }; // 监控相机数据 - XE.MVVM.watch(this._earth.camera, 'position', () => { + XE.MVVM.watch(window.$earth.camera, 'position', () => { this.cameraPositionChange(this); }); //加载地图实时资源（无人机、车辆、人员、巡逻路线等） - // this.createRealTimeObj(earthUI) + // createRealTimeObj(earthUI) //监听鼠标事件 - if (this.PropsListenMouseHandlerOpen) this.listenMouseHandler(earthUI); + if (this.PropsListenMouseHandlerOpen) listenMouseHandler(that); //监听鼠标事件（场景管理） if (this.listenMouseHandlerSenceOpen) listenMouseHandlerSence(this.enablePointer,this); //监听mitt - if (this.PropsListenMittHandlerOpen) this.listenMittHandler(earthUI); + if (this.PropsListenMittHandlerOpen) this.listenMittHandler(); // 飞入方法 await this.fly(); //加载地图线路资源 - if (this.PropsCreateBBHLineOpen) await this.createBBHLine(earthUI); + if (this.PropsCreateBBHLineOpen) await this.createBBHLine(); //创建工具栏 this.toolbarShow = true; }); } + //飞入方法 async fly() { if(this.$attrs.onCustomFly){ @@ -754,10 +767,10 @@ rotation = [res[0].rotationX, res[0].rotationY, res[0].rotationZ]; viewDistance = res[0].viewDistance; duration = res[0].duration; - this._earth.camera.flyTo(position, viewDistance, rotation, duration); + window.$earth.camera.flyTo(position, viewDistance, rotation, duration); // 地图复原事件 window.$flyTo = this.flyTo = () => { - this._earth.camera.flyTo(position, viewDistance, rotation, duration); + window.$earth.camera.flyTo(position, viewDistance, rotation, duration); }; }); } @@ -789,42 +802,19 @@ position[2] = data.altitude; //鼠标事件 pin.onmouseover = () => { - this._viewer._container.style.cursor = 'pointer'; + window.$viewer._container.style.cursor = 'pointer'; }; pin.onmouseout = () => { - this._viewer._container.style.cursor = 'default'; + window.$viewer._container.style.cursor = 'default'; }; pin.onclick = function () { - this._earth.camera.flyTo(position, viewDistance, rotation, duration); + window.$earth.camera.flyTo(position, viewDistance, rotation, duration); }; } - //设置按钮颜色状态 - setIconByRef(ref, el) { - const status = this.statusByNodeId.get(ref); - if (status != undefined && status != null) { - let img = this.imgByRef.get(ref); - const icon = el.children[0].children[2]; - if (!img) { - img = document.createElement('img'); - this.imgByRef.set(ref, img); - } - if (icon.nodeName == 'I') { - icon.replaceWith(img); - } - if (status == 1) { - img.src = circleDot2; - } else if (status == 0) { - img.src = circleDot1; - } else { - img.src = circleDot3; - } - img.setAttribute('style', 'width:16px;height:16px;margin-top:7px'); - } - } /* 使用async/await 处理异步方法顺序执行。成功的操作放到try里，失败的放在catch里 */ - async createBBHLine(earthUI = null) { + async createBBHLine() { // console.log('MyScene', this.userStore.userInfo?.sceneId); let labelItems: any = undefined; let type = 1; //** @@ -859,7 +849,7 @@ // 加载雷达和微波 // console.log("加载雷达和微波"); - if (this.PropsGetLabelInfoShow) labelItems = await this.getLabelInfo(models, type); + if (this.PropsGetLabelInfoShow) labelItems = await getLabelInfo(models, type); //加载绘画资源 if (this.PropsDrawInitShow) await drawInit(); @@ -922,41 +912,41 @@ } const child = nodeObject.children[index]; let customProp = JSON.parse(child.czmObject.customProp); - if (that.hostDeviceMapById.has(customProp.deviceId)) { - let device = that.hostDeviceMapById.get(customProp.deviceId); + if (that.store.hostDeviceMapById.has(customProp.deviceId)) { + let device = that.store.hostDeviceMapById.get(customProp.deviceId); // 设置状态 - that.setLabelStatus(device, customProp.labelCode, child.ref, 2); + setLabelStatus(device, customProp.labelCode, child.ref, 2); } // 设置图标 - that.setIconByRef(child.ref, eventTarget); + setIconByRef(child.ref, eventTarget); } }); } if (nodeObject.czmObject && nodeObject.czmObject.xbsjType == 'Pin') { - that.setIconByRef(ref, el); + setIconByRef(ref, el); } // ref不为空并且大于0时 设置为input的id属性 if (ref && ref.length > 0) { inputEl.id = ref; } // 首次展开添加元素默认为true，显示展示的对象 - if (that.nodeCheckedByRef.size <= 0) { + if (that.store.nodeCheckedByRef.size <= 0) { // item.checkStatus = 'checked' inputEl.checked = true; //***设置样式为选中 */ setClassChecked(setClassEl1, setClassEl2, item); - that.nodeCheckedByRef.set(ref, true); + that.store.nodeCheckedByRef.set(ref, true); } else { // 之后的展开根据ref获取应该显示的状态是选中还是非选中 - let checked = that.nodeCheckedByRef.get(ref); + let checked = that.store.nodeCheckedByRef.get(ref); if (checked == undefined) { checked = true; if (ref && ref.length > 0 && ref.startsWith('node_')) { // 分割ref const refSplit = ref.split('_'); // 取出真实对象 - const readyNode = earthUI.earth.sceneTree.$refs[refSplit[1]]; + const readyNode = window.$uia.earth.sceneTree.$refs[refSplit[1]]; if (readyNode && readyNode.czmObject) { checked = readyNode.czmObject.show; } @@ -966,14 +956,14 @@ } } inputEl.checked = checked; - that.nodeCheckedByRef.set(ref, checked); + that.store.nodeCheckedByRef.set(ref, checked); setClassEl(setClassEl, setClassEl2, checked, item); } else { setClassEl(setClassEl, setClassEl2, checked, item); } } // 显示隐藏样式监听 - classMutationObserver(setClassEl1, setClassEl2, that.nodeCheckedByRef, ref); + classMutationObserver(setClassEl1, setClassEl2, that.store.nodeCheckedByRef, ref); // input disabled属性监听 disabledMutationObserver(inputEl); /**调整触发顺序，阻止默认的input change事件，并绑定自己的change事件 */ @@ -987,7 +977,7 @@ // 获取ref const ref = el.id; // 点击元素的earthSdk对象 - const clickNode = earthUI.earth.sceneTree.$refs[ref]; + const clickNode = window.$uia.earth.sceneTree.$refs[ref]; // 真实的earthSdk对象 let readyNode: any = null; // 当ref大于0，并且以node_开头时，此为虚假的对象 @@ -995,12 +985,12 @@ // 分割ref const refSplit = ref.split('_'); // 取出真实对象 - readyNode = earthUI.earth.sceneTree.$refs[refSplit[1]]; + readyNode = window.$uia.earth.sceneTree.$refs[refSplit[1]]; } else if (ref && ref.length > 0 && ref.startsWith('nodeSecondary_')) { // 分割ref const refSplit = ref.split('_'); // 取出真实对象 - readyNode = earthUI.earth.sceneTree.$refs[refSplit[1]]; + readyNode = window.$uia.earth.sceneTree.$refs[refSplit[1]]; let guid = readyNode.czmObject.pinXbsjGuid; let pin = window.$earth.getObject(guid); pin.show = !pin.show; @@ -1009,7 +999,7 @@ readyNode = clickNode; } // 控制子节点的状态同步 - that.showOrHideChild(clickNode, earthUI, el.checked); + that.showOrHideChild(clickNode, window.$uia, el.checked); if (readyNode != null) { // 隐藏对象 if (!el.checked) { @@ -1037,7 +1027,7 @@ setClassChecked(setClassEl1, setClassEl2, item); } // 记录当前节点状态 - that.nodeCheckedByRef.set(ref, el.checked); + that.store.nodeCheckedByRef.set(ref, el.checked); }, true ); @@ -1051,1056 +1041,20 @@ labelItems.forEach((itemId) => { if (window.$earth.sceneTree.$refs[itemId]) { window.$earth.sceneTree.$refs[itemId].czmObject.onmouseover = () => { - this._viewer._container.style.cursor = 'pointer'; + window.$viewer._container.style.cursor = 'pointer'; }; window.$earth.sceneTree.$refs[itemId].czmObject.onmouseout = () => { - this._viewer._container.style.cursor = 'default'; + window.$viewer._container.style.cursor = 'default'; }; } }); }); // 隐藏图层管理 "地图场景" 一栏 // document.getElementsByClassName('XbsjVritualTreeItem').item(0).style.display = 'none' - this._earth.sceneTree.root.children.splice(1, 0, models); + window.$earth.sceneTree.root.children.splice(1, 0, models); } - async createRealTimeObj(earthUI = null) { - let that = this; - let models = { - expand: true, - title: '地图实况', - children: [ - { - expand: false, - title: '巡逻路线', - children: [], - }, - { - expand: false, - title: '执勤巡逻', - children: [], - }, - { - expand: false, - title: '预警/报警', - children: [], - }, - { - expand: false, - title: 'AIS', - children: [], - }, - ], - }; - try { - await this.getAllModelInfo(models); - await this.getPatrolRouteInfo(models); - //添加对象到场景树 - // this._earth.sceneTree.root.children.push(models); - this._earth.sceneTree.root.children.splice(1, 0, models); - } catch (e) { - console.log(e); - } - } - - //加载区域 - - //加载相机 - - // 加载雷达和微波 - async getLabelInfo(models, type) { - return new Promise((resolve, reject) => { - //请求地图标志信息 - defHttp.get({ url: this.url.queryLabelList }, { isTransformResponse: false }).then(async (res) => { - // console.log("请求地图标志信息",res); - - if (res.success) { - const labelItems = await this.setLabel(res.result, models, type); - resolve(labelItems); - } - }); - }); - } - //地图标志信息 - async setLabel(res, models, type) { - // console.log("res",res); - const that = this; - const args = { pageNo: 1, pageSize: 999 }; - await defHttp - .get( - { - url: this.url.queryDeviceInfoList, - params: args, - }, - { isTransformResponse: false } - ) - .then((reponse) => { - if (reponse.success) { - // console.log("queryDeviceInfoList",reponse); - const hostDeviceList = reponse.result.records; - for (const hostDevice of hostDeviceList) { - that.hostDeviceMapById.set(hostDevice.id, hostDevice); - } - return that.hostDeviceMapById; - } else { - console.error('获取主机信息错误', reponse); - } - }) - .catch(() => { - throw '获取主机信息错误'; - }); - //根据经纬度算出该点地形高度 - let posArr: any = [], - updatedPositions: any = []; - res.forEach((data, index) => { - updatedPositions.push(window.Cesium.Cartographic.fromDegrees(data.mapLabel.labelLon, data.mapLabel.labelLat, data.mapLabel.labelHeight)); - }); - const labelItems: any = []; - //设置标志 - res.forEach((data, index) => { - const item: any = data.mapLabel; - labelItems.push(item.id); - const objConfig3 = { - ref: item.id, - name: item.lineId, - czmObject: { - customProp: '{"labelAttr":' + item.labelAttr + ',"labelCode":"' + item.labelCode + '","deviceId":"' + data.deviceId + '"}', - name: item.labelName, - xbsjType: 'Pin', - imageUrl: window._CONFIG['staticDomainURL'] + '/' + item.labelImgUrl, - position: [updatedPositions[index].longitude, updatedPositions[index].latitude, Number(item.labelHeight)], - scale: item.labelAttr == 4 ? 1 : 0.7, - pinBuilder: { - extText: item.labelName, - extTextFont: '30px 楷体', - extTextPixelOffset: item.labelAttr == 4 ? [30, -20] : [15, -20], - fillColor: [1, 1, 1, 0.9], - outlineColor: [0, 0, 0, 0.9], - }, - far: 25000, - }, - }; - if (item.labelAttr == 4) { - // console.log("雷达",item); - that.statusByNodeId.set(item.id, 1); - that.addLabelNodeToTree(item, models, objConfig3, type); - } else { - // console.log("微波",item); - that.statusByNodeId.set(item.id, -10); - that.addLabelNodeToTree(item, models, objConfig3, type); - const device = that.hostDeviceMapById.get(data.deviceId); - if (device) { - //参数3 2为查询状态 - that.setLabelStatus(device, item.labelCode, item.id, 2); - } - } - }); - return labelItems; - } - - addLabelNodeToTree(item, models, objConfig3, type) { - const that = this; - //微波 - if (item.labelAttr == 10) { - if (type == 2) { - let childs1 = models.children; - for (const child of childs1) { - if ('node_' + item.lineId == child.ref) { - child.children[2].children.push(objConfig3); - } - } - } else { - const parentNode = that.nodeConfigByRef.get('node_' + item.lineId); - if (!parentNode) { - return; - } - let childs2 = parentNode.children; - childs2[2].children.push(objConfig3); - } - } - //雷达 - else if (item.labelAttr == 4) { - if (type == 2) { - let childs1 = models.children; - for (const child of childs1) { - if ('node_' + item.lineId == child.ref) { - child.children[1].children.push(objConfig3); - } - } - } else { - const parentNode = that.nodeConfigByRef.get('node_' + item.lineId); - if (!parentNode) { - return; - } - let childs2 = parentNode.children; - childs2[1].children.push(objConfig3); - } - } - //雷达（已弃用） - else if (item.labelAttr == 4) { - console.log('leida'); - - if (type == 2) { - let childs3 = models.children; - for (const child of childs3) { - for (const element of child.children[1].children) { - if ('nodeSecondary_' + item.lineId == element.ref) { - element.children.push(objConfig3); - } - } - } - } else { - const parentNode1 = that.nodeConfigByRef.get('nodeSecondary_' + item.lineId); - // console.log("nodeSecondary_",parentNode1); - if (!parentNode1) { - return; - } - const childs4 = parentNode1.children; - childs4.push(objConfig3); - } - } - } - - setLabelStatus(device, labelCode, id, code) { - const args = { - device: device, - code: code, // 命令码：0-撤防 1-布防 2-状态查询 3-其他预留 - deviceType: 2, // 设备类型：1-探测主机 2-探测器 3-串口设备 4-预留 - deviceSn: labelCode, // 设备条码 - }; - // console.log("device",device); - - if (device.deviceType_dictText.indexOf('微波探测器') > -1) { - // console.log("微波探测器"); - - return ( - defHttp - .post({ url: '/military/netty/microwaveDetector/maintenance', params: args }, { isTransformResponse: false }) - // postAction('netty/microwaveDetector/maintenance', args) - .then((response) => { - // console.log('response',response); - - if (response.success) { - const status = response; - this.statusByNodeId.set(id, status); - } else { - this.statusByNodeId.set(id, -10); - } - return response; - }) - .catch((error) => { - // console.log('error',error); - this.statusByNodeId.set(id, -10); - return error; - }) - ); - } else if (device.deviceType_dictText.indexOf('雷达') > -1) { - this.statusByNodeId.set(id, 1); - //雷达周界防区列表 - return defHttp - .get({ url: this.url.perimeterRegionList, params: { regionType: 2 } }, { isTransformResponse: false }) - .then( - (res) => { - // console.log(res); - if (res.success) { - // (未测试) - res.result.forEach((element) => { - if (element.id == id) { - // this.statusByNodeId.set(id, element.isOnline) - } - }); - } else { - this.statusByNodeId.set(id, 1); - } - return res; - }, - (err) => { - this.statusByNodeId.set(id, 1); - return err; - } - ) - .catch((err) => { - this.statusByNodeId.set(id, 1); - return err; - }); - } - } - - getAllModelInfo(models) { - return new Promise((resolve, reject) => { - //模型位置 - - defHttp.get({ url: this.url.queryAllModelInfo }, { isTransformResponse: false }).then(async (res) => { - if (res.success) { - res.result.forEach((data, index) => { - let childrenConfig: any = {}, - objConfig: any = {}, - pathConfig: any = {}, - viewshedConfig: any = {}, - pinConfig: any = {}; - let positions: any = [], - rotations: any = []; - switch (data.modelType) { - case 1: //无人机 - childrenConfig = { - expand: false, - title: '无人机_' + (index + 1) + '号', - children: [], - }; - objConfig = { - ref: data.eventSerialNum, - czmObject: { - name: '无人机', - xbsjType: 'Model', - url: window._CONFIG['staticDomainURL'] + '/uav.gltf', - minimumPixelSize: 1000, - maximumScale: 20, - xbsjPosition: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height), - distanceDisplayCondition: [10.0, 25000.0], - }, - }; - childrenConfig.children.push(objConfig); - // 加载视域 - viewshedConfig = { - ref: 'viewshed_' + data.eventSerialNum, - czmObject: { - xbsjType: 'Viewshed', - name: '视域', - position: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height), - rotation: earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll), - near: 1.0, - far: 1500, - enabled: false, - show: false, - }, - }; - childrenConfig.children.push(viewshedConfig); - //加载历史轨迹 - data.msModelTrajectoryList.forEach((data, index) => { - positions.push(earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height)); - rotations.push(earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll)); - }); - pathConfig = { - ref: 'path_' + data.eventSerialNum, - czmObject: { - xbsjType: 'Path', - name: '轨迹', - positions: positions, - rotations: rotations, - enabled: false, - show: true, - loop: false, - showDirection: false, - playing: true, - loopPlay: true, - alwaysAlongThePath: true, - currentSpeed: 30, - }, - }; - childrenConfig.children.push(pathConfig); - /* // 显示当前坐标 - pinConfig = { - "ref": "pin_" + data.eventSerialNum, - "czmObject": { - "xbsjType": "Pin", - "name": "当前位置", - "position": earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height), - "evalString": "const width = 430;\nconst height = 70;\nfunction createLabelCanvas(p) {\n if (p._labelDiv) {\n p._earth.czm.viewer.container.removeChild(p._labelDiv);\n p._labelDiv = undefined;\n }\n const labelDiv = document.createElement('div');\n labelDiv.style = 'width:'+width+'px;height: '+height+'px;position: absolute; pointer-events: none;'\n\n p._earth.czm.viewer.container.appendChild(labelDiv);\n p._labelDiv = labelDiv;\n\n var dis = XE.MVVM.watch(() => {\n labelDiv.style.display = p.enabled ? 'block' : 'none';\n });\n\n p.disposers.push(() => {\n if (p._labelDiv) {\n p._earth.czm.viewer.container.removeChild(p._labelDiv);\n p._labelDiv = undefined;\n }\n dis();\n });\n\n const labelCanvas = document.createElement('canvas');\n labelCanvas.style = 'width: 100%;height: 100%;';\n\n labelCanvas.width = width;\n labelCanvas.height = height;\n labelDiv.appendChild(labelCanvas);\n return labelCanvas;\n}\n\nfunction createDrawFunc(p) {\n const labelCanvas = createLabelCanvas(p);\n const ctx = labelCanvas.getContext('2d');\n\n function draw(w) {\n ctx.clearRect(0, 0, width, height);\n\n ctx.save();\n ctx.lineWidth = 2;\n ctx.strokeStyle = 'rgb(31, 255,255)';\n ctx.beginPath();\n ctx.moveTo(width, height);\n ctx.lineTo(width-height, 22);\n ctx.lineTo(0, 22);\n ctx.stroke();\n ctx.restore();\n ctx.font = \"15px console\"; \n ctx.fillStyle = 'rgb(255, 255, 0)';\n ctx.fillText('" + - "经度：" + data.lon + "/" + "纬度：" + data.lat + "/" + "高度：" + data.height + "', 0, 20);\n ctx.restore();\n }\n\n p._dDraw = draw;\n}\n\ncreateDrawFunc(p);\n\nlet d = 0;\nlet c = 0;\np._dDraw(c);\nconst preUpdateListener = p._earth.czm.scene.preUpdate.addEventListener(() => {\n if (d !== c) {\n c += (d - c) * 0.1;\n if (Math.abs(c - d) < 0.1) {\n c = d;\n }\n p._dDraw(c);\n }\n});\np.disposers.push(() => preUpdateListener && preUpdateListener());\n\nconst container = p._earth.czm.viewer.container;\nconst unwatch = XE.MVVM.watch(() => [...p.winPos], winPos => {\n if (p._labelDiv) {\n p._labelDiv.style.left = (winPos[0] - p._labelDiv.clientWidth) + 'px';\n p._labelDiv.style.bottom = winPos[3]+'px';\n } \n});\np.disposers.push(() => {\n unwatch && unwatch();\n});", - "isDivImage": true, - "pinBuilder": {}, - "far": 25000 - } - }; - childrenConfig.children.push(pinConfig); */ - //加入树 - models.children[1].children.push(childrenConfig); - break; - case 2: //执勤人员 - childrenConfig = { - expand: false, - title: '执勤人员_' + (index + 1) + '号', - children: [], - }; - objConfig = { - ref: data.eventSerialNum, - czmObject: { - xbsjType: 'GroundImage', - name: '执勤人员', - playing: true, - width: 90, - height: 90, - position: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, 0), - imageUrls: [window._CONFIG['staticDomainURL'] + '/xunluo_point1.png', window._CONFIG['staticDomainURL'] + '/xunluo_point2.png'], - }, - }; - childrenConfig.children.push(objConfig); - //加载历史轨迹 - data.msModelTrajectoryList.forEach((data, index) => { - positions.push(earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height)); - rotations.push(earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll)); - }); - pathConfig = { - ref: 'path_' + data.eventSerialNum, - czmObject: { - xbsjType: 'Path', - name: '轨迹', - positions: positions, - rotations: rotations, - enabled: false, - show: true, - loop: false, - showDirection: false, - playing: true, - loopPlay: true, - alwaysAlongThePath: true, - currentSpeed: 30, - }, - }; - childrenConfig.children.push(pathConfig); - //加入树 - models.children[1].children.push(childrenConfig); - break; - case 3: //可疑人员 - childrenConfig = { - expand: false, - title: '可疑人员_' + (index + 1) + '号', - children: [], - }; - objConfig = { - ref: data.eventSerialNum, - czmObject: { - xbsjType: 'GroundImage', - name: '可疑人员', - playing: true, - width: 90, - height: 90, - position: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, 0), - imageUrls: [window._CONFIG['staticDomainURL'] + '/keyi_point1.png', window._CONFIG['staticDomainURL'] + '/keyi_point2.png'], - }, - }; - childrenConfig.children.push(objConfig); - //加载历史轨迹 - data.msModelTrajectoryList.forEach((data, index) => { - positions.push(earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height)); - rotations.push(earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll)); - }); - pathConfig = { - ref: 'path_' + data.eventSerialNum, - czmObject: { - xbsjType: 'Path', - name: '轨迹', - positions: positions, - rotations: rotations, - enabled: false, - show: true, - loop: false, - showDirection: false, - playing: true, - loopPlay: true, - alwaysAlongThePath: true, - currentSpeed: 30, - }, - }; - childrenConfig.children.push(pathConfig); - //加入树 - models.children[2].children.push(childrenConfig); - break; - case 11: //传感器 - objConfig = { - ref: data.eventSerialNum, - czmObject: { - name: data.eventSerialNum, - xbsjType: 'Model', - url: window._CONFIG['staticDomainURL'] + '/zalan.gltf', - minimumPixelSize: 1000, - maximumScale: 0.01, - // xbsjPosition: [window.Cesium.Math.toRadians(data.lon), window.Cesium.Math.toRadians(data.lat), data.height], - xbsjPosition: earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height), - xbsjRotation: earthUtils.degreeToRadianInLngLatHeight(data.yaw, data.pitch, data.roll), - distanceDisplayCondition: [10.0, 25000.0], - customProp: data.eventSerialNum, - color: [0.08235294117647059, 1, 0, 1], - luminanceAtZenith: 2, - }, - }; - //加入树 - models.children[0].children[0].children.push(objConfig); - break; - default: - } - }); - resolve(models); - } - }); - }); - } - - getPatrolRouteInfo(models) { - return new Promise((resolve, reject) => { - //执勤巡逻路线 - defHttp.get({ url: this.url.queryPatrolRouteInfo }, { isTransformResponse: false }).then(async (res) => { - if (res.success) { - res.result.forEach((data, index) => { - //将路线上的点拼成坐标数组 - let positions: any = []; - data.msLineConstList.forEach((data, index) => { - positions.push(earthUtils.degreeToRadianInLngLatHeight(data.lon, data.lat, data.height)); - }); - const objConfig = { - ref: data.lineCode, - czmObject: { - name: data.lineName, - xbsjType: 'Polyline', - width: 2, - material: { - type: 'XbsjODLineMaterial', - XbsjODLineMaterial: { - bgColor: [0.5, 0.5, 0.5, 1], - color: [0, 1, 0.11, 1], - totoalFrameCount: 200, - }, - }, - positions: positions, - }, - }; - models.children[0].children.push(objConfig); - }); - resolve(models); - } - }); - }); - } - - // /* 左键事件 */ - listenMouseHandlerSence(enablePointer,that){ - this.viewer = window.$earth.czm.viewer; - window.viewer = this.viewer; - window.$earth.interaction.picking.enabled = true; - window.$earth.interaction.picking.clickedColor = [1, 0, 0, 1]; - - const handler = new window.Cesium.ScreenSpaceEventHandler( - this.viewer.scene.canvas - ); - window.CesiumGlobalHandler = handler; - // 取消双击旋转事件 - this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction( - window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK - ); - - if (enablePointer) { - this.viewer.cesiumWidget.screenSpaceEventHandler.setInputAction((event) => { - let cartesian = this.viewer.scene.globe.pick(this.viewer.camera.getPickRay(event.position), this.viewer.scene); - if (!cartesian) { - return; - } - // 世界坐标转换为弧度 - let ellipsoid = this.viewer.scene.globe.ellipsoid; - let cartographic = ellipsoid.cartesianToCartographic(cartesian); - // 弧度转换为经纬度 - let pointLon = window.Cesium.Math.toDegrees(cartographic.longitude); // 经度 - let pointLat = window.Cesium.Math.toDegrees(cartographic.latitude); // 纬度 - let pointAlt = cartographic.height; // 高度 - - console.log("点击的的经纬度坐标是：", { - "经度：": pointLon, - "纬度：": pointLat - }); - - this.pin && this.pin.destroy(); - this.pin = new window.XE.Obj.Pin(window.$earth); - this.pin.position = [cartographic.longitude, cartographic.latitude, pointAlt]; - this.pin.imageUrl = dwPng; - - let cposition = [window.$earth.camera.position[0], window.$earth.camera.position[1], window.$earth.camera.position[2]]; - if (this.pin) { - this.position = [this.pin.position[0], this.pin.position[1], this.pin.position[2]]; - } - this.rotation = [window.$earth.camera.rotation[0], window.$earth.camera.rotation[1], window.$earth.camera.rotation[2]]; - this.fov = window.$earth.camera.fov; - this.$emit("checkPosition", this.position, cposition, this.rotation, this.fov); - }, - window.Cesium.ScreenSpaceEventType.LEFT_CLICK - ); - } - - // /* 左键事件 */ - handler.setInputAction((event) => { - handler.removeInputAction(window.Cesium.ScreenSpaceEventType.MOUSE_MOVE) - // modelDw.value = false; - if (clearId != null) { - clearTimeout(clearId); - clearId = null; - } - this.cursorCss = `grabbing`; - }, window.Cesium.ScreenSpaceEventType.LEFT_DOWN); - handler.setInputAction((event) => { - if (clearId != null) { - clearTimeout(clearId); - clearId = null; - } - this.cursorCss = `grab`; - }, window.Cesium.ScreenSpaceEventType.LEFT_UP); - handler.setInputAction((event) => { - if (clearId != null) { - clearTimeout(clearId); - clearId = null; - } - this.cursorCss = `url(${rotationXYZ}),grab`; - }, window.Cesium.ScreenSpaceEventType.MIDDLE_DOWN); - handler.setInputAction((event) => { - if (clearId != null) { - clearTimeout(clearId); - clearId = null; - } - this.cursorCss = `grab`; - }, window.Cesium.ScreenSpaceEventType.MIDDLE_UP); - let clearId: any = null; - handler.setInputAction((event) => { - if (event > 0) { - this.cursorCss = `zoom-in`; - } else { - this.cursorCss = `zoom-out`; - } - - clearId = setTimeout(() => { - clearTimeout(clearId); - this.cursorCss = `grab` - }, 2000); - }, window.Cesium.ScreenSpaceEventType.WHEEL); - } - - listenMouseHandler(earthUI = null) { - let that: any = this; - this._handler = new window.Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas); - - //取消双击旋转事件 - this._viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); - /* MOUSE事件（有性能问题，慎用！） */ - - /* 鼠标左键事件 */ - { - this._handler.setInputAction((click: any) => { - if (typeof this._pin !== 'undefined') { - // 销毁指示线 - this._pin.destroy(); - } - - let pickedFeature = this._viewer.scene.pick(click.position); - console.log('点击:', pickedFeature); - - if (pickedFeature && pickedFeature.id) { - // 三维模型 - if (pickedFeature.id.xbsjType && pickedFeature.id.xbsjType === 'Model') { - //点击电线杆触发弹窗 - this.cameraData.forEach((data) => { - if (!$.isEmptyObject(data.msCameraSiteList)) { - if (!data.msCameraSiteList) { - return; - } - data.msCameraSiteList.forEach((data) => { - if (pickedFeature.id.customProp === data.id) { - if ($('.cameraModal ul').length > 0) { - $('.cameraModal ul').remove(); - } - $('.cameraModal').append(''); - if (!data.msCameraSettingList) return; - // 将监控相机列表传入弹窗组件中 - this.cameraList = data.msCameraSettingList; - // 将监控点位置传入弹窗组件中 - this.monitorPosition = pickedFeature.id._primitive.xbsjPosition; - data.msCameraSettingList.forEach((data, index) => { - let camera_img = - data.type == '4' - ? window._CONFIG['staticDomainURL'] + '/qiuji.png' - : data.type == '3' - ? window._CONFIG['staticDomainURL'] + '/qiangji.png' - : window._CONFIG['staticDomainURL'] + '/qiangji.png'; - let cameraStatus = data.status == '1' ? 'successStatus' : data.status == '2' ? 'offlineStatus' : 'errorStatus'; - let rtspUrl = data.cameraCode; - // 'rtsp://' + data.user + ':' + data.password + '@' + data.ip + window._CONFIG['cameraMain'] - $('.cameraModal ul').append( - '
  • ' + - data.cameraName + - '
    • ' - ); - }); - cameraModal.style.left = click.position.x + -45 + 'px'; - cameraModal.style.top = click.position.y + -180 + 'px'; - this.cameraModalShow = true; - } - }); - } - }); - } - // 船只模型 - if (pickedFeature.id.xbsjType && pickedFeature.id.name.includes('船') && pickedFeature.id.xbsjType === 'Model') { - this.AISInfoWindowShow = true; - // 赋值船只场景id - this.ship_guid = pickedFeature.id.guid; - } - //雷达扫描范围 - if ( - pickedFeature.id._xbsjOwner && - pickedFeature.id._xbsjOwner.customProp && - JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelAttr == '4' - ) { - let labelCode = JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelCode; - console.log(pickedFeature.id._xbsjOwner); - if (pickedFeature.id._xbsjOwner.addViewShedReturn) { - //显示/不显示雷达扫码效果 - // pickedFeature.id._xbsjOwner.addViewShedReturn.show = !pickedFeature.id._xbsjOwner.addViewShedReturn.show; - // console.log("pickedFeature.id._xbsjOwner.addViewShedReturn",pickedFeature.id._xbsjOwner.addViewShedReturn); - - //清空当前雷达，并将该方法指向undefined(清空) - pickedFeature.id._xbsjOwner.addViewShedReturn.clear(); - pickedFeature.id._xbsjOwner.addViewShedReturn = undefined; - } else { - defHttp.get({ url: this.url.radarList, params: { radarCode: labelCode } }, { isTransformResponse: false }).then((res) => { - if (res.success) { - if (res.result.records.length > 0) { - let data = res.result.records[0]; - let rgb; - if (data.customProp) { - rgb = JSON.parse(data.customProp).color; - } - let radarRadius = data.workingRadius; - let radarRange = data.elevation; - let radarShifting = data.angularRadian; - let left = Number(radarShifting) - Number(radarRange) / 2; - //参数：经纬度、半径、起始角度（正北方向）、结束角度 - console.log('雷达扫描范围', data); - - //弧度转角度 - let degreePosition = radianToDegreeInLngLatHeight( - pickedFeature.id._xbsjOwner.position[0], - pickedFeature.id._xbsjOwner.position[1], - 0.1 - ); - //创建雷达扫描 深度 - // this._viewer.scene.globe.depthTestAgainstTerrain = true; - let rader = new CircleScan(this._viewer); - rader.add(degreePosition, null, radarRadius, 10000); - pickedFeature.id._xbsjOwner.addViewShedReturn = rader; - - // 雷达扫描2 - // let rader2 = this._viewer.entities.add({ - // position: Cesium.Cartesian3.fromDegrees(113.528333, 22.156109), - // name: '雷达扫描', - // ellipse: { - // semiMajorAxis: 5000.0, - // semiMinorAxis: 5000.0, - // material: new Cesium.RadarScanMaterialProperty({ - // color: new Cesium.Color(1.0, 1.0, 0.0, 0.7), - // speed: 20.0, - // }), - // height: 20.0, - // heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, - // outline: true, - // outlineColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0) - // } - // }) - - // pickedFeature.id._xbsjOwner.addViewShedReturn= addViewShedRadar( - // pickedFeature.id._xbsjOwner.position, - // radarRadius, - // left, - // Number(radarRange) / 2 + Number(radarShifting), - // [rgb.r / 255, rgb.g / 255, rgb.b / 255, rgb.a] - // ); - } - } - }); - } - } - } else { - //关闭所有气泡窗 - that.cameraModalShow = false; - that.poiModalShow = false; - } - }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK); - } - /* 鼠标右键事件 */ - { - this._handler.setInputAction((click) => { - // 判断点击位置是否有实体 - //返回具有 `primitive` 属性的对象，该属性包含场景中特定窗口坐标处的第一个（顶部）图元，如果该位置没有任何内容，则返回未定义的对象。其他属性可能会根据基元的类型进行设置，并可用于进一步识别拾取的对象。 - let pickedFeature = this._viewer.scene.pick(click.position); - // console.log("pick",pickedFeature); - - let entity = pickedFeature && pickedFeature.id; - console.log('pick', pickedFeature); - console.log('entity', entity); - if (entity == undefined) { - return; - } - if (typeof pickedFeature !== 'undefined' && pickedFeature.id.xbsjType == 'Model') { - //点击电线杆触发弹窗 - this.cameraData.forEach((data) => { - if (!$.isEmptyObject(data.msCameraSiteList)) { - if (!data.msCameraSettingList) { - return; - } - data.msCameraSiteList.forEach((data) => { - if (pickedFeature.id.customProp === data.id) { - window.$uia.contextMenu.pop([ - { - text: '监控视域分析属性', - func: () => { - let testConfig = { - ref: 'testView', - name: '雷达视域分析', - position: [1.514482876761954, 0.8497520519403554, -0.7553906497788317], - rotation: [4.535844766941594, 0.32288591161895097, 0], - near: 1, - far: 400, - fovH: Math.PI / 3, - fovV: Math.PI / 6, - show: false, - }; - let Viewshed = new window.XE.Obj.Viewshed(window.$earth); - Viewshed.xbsjFromJSON(testConfig); - window.$uia.showPropertyWindow(Viewshed); - }, - }, - ]); - } - }); - } - }); - } - //巡检监控视频 - else if (typeof pickedFeature !== 'undefined' && entity._name == '视频图元') { - // console.log(pickedFeature) - // console.log("entity",entity) - window.$uia.contextMenu.pop([ - { - text: '编辑', - func: () => { - $mitt.emit('addRoamPathVideoClose'); - // store.commit('customPrimitive', entity.xbsjGuid); - this.store.customPrimitive = entity.xbsjGuid; - // 打开对应的创建巡检视频窗口 - this.$nextTick(() => { - this.addRoamVideoShow = true; - }); - // window.$uia.showPropertyWindow( - // {}, - // { - // component: addroamVideo, - // } - // ); - }, - }, - { - text: '删除', - func: () => { - window.$uia.confirm('确认删除?', () => { - // console.log('confirmed') - - // axios({ - // method: 'delete', - // url: '/military/msAreaCustomPrimitive/delete', - // params: { id: entity.id }, - // }) - defHttp - .delete( - { - url: '/military/msAreaCustomPrimitive/delete', - params: { id: entity.id }, - }, - { isTransformResponse: false, joinParamsToUrl: true } - ) - .then((response) => { - if (response.code == 200) { - let customPrimitiveList = this.store.customPrimitiveList; - // console.log("a",customPrimitiveList); - customPrimitiveList.forEach((element, index) => { - const model = window.$earth.getObject(element); - // console.log("model.id",model.id); - // console.log("entity.id",entity.id); - if (model.id == entity.id) { - let customPrimitive = customPrimitiveList.splice(index, 1)[0]; - model.destroy(); - } - }); - // store.dispatch('asyncCustomPrimitive', customPrimitiveList); - this.store.customPrimitiveList = customPrimitiveList; - - // notification.close("RoamVideoSet"); - // sessionStorage.setItem("RoamVideoSet", "false"); - } else { - createMessage.error('修改失败', 2); - console.error('删除失败', response); - } - }) - .catch((res) => { - console.error('错误', res); - }); - }); - }, - }, - ]); - } - //绘画图形 - else if (typeof pickedFeature !== 'undefined' && entity.name == '绘画') { - // console.log("entity", entity); - window.$uia.contextMenu.pop([ - { - text: '编辑', - func: () => { - window.$uia.showPropertyWindow(entity); - //记录编辑前信息 - let oldEntity = { - depthTest: entity.depthTest, //深度检测 - color: [...entity.color], //颜色 - outline: { - color: [...entity.outline.color], //边框颜色 - show: entity.outline.show, //边框显示 - width: entity.outline.width, //边框宽度 - }, - positions: [...entity.positions], - }; - this.$nextTick(() => { - // 主要ui窗口 - const mainUI = window.$uia._vm.$refs.mainUI; - // 所有打开的ui窗口Ref值 - const windowsAttrList = Object.keys(mainUI.$refs); - // 寻找当前窗体的工具对象 - const modelToolKey = windowsAttrList.filter((f) => f.indexOf(entity.guid) > -1)[0]; - const modelTool = mainUI.$refs[modelToolKey][0]; - // 当前窗体的元素 - const el = modelTool.$el; - // this.cloneEl(el) - // 样式 - el.style.width = '380px'; //宽度 - el.children[2].style.padding = '0px'; - el.children[2].style.transition = 'none'; - el.children[2].children[0].children[0].style.minWidth = '370px'; - // 关闭名称input - el.children[2].children[0].children[0].children[0].style.display = 'none'; - // 关闭创建按钮 - el.children[2].children[0].children[0].children[1].children[0].children[1].style.display = 'none'; - // 关闭贴地 - el.children[2].children[0].children[0].children[2].children[0].style.display = 'none'; - // 关闭拉伸 - el.children[2].children[0].children[0].children[3].children[0].style.display = 'none'; - el.children[2].children[0].children[0].children[3].children[1].style.display = 'none'; - el.children[2].children[0].children[0].children[3].children[2].style.display = 'none'; - el.children[2].children[0].children[0].children[3].children[3].style.marginLeft = '8px'; - // 右上角关闭 - const cancelTopRightBtn = el.children[1].children[1]; - // 取消按钮元素 - const cancelBtn = el.children[3].children[0]; - // 确认按钮元素 - const okBtn = el.children[3].children[1]; - // 取消按钮 - cancelTopRightBtn.onclick = cancelBtn.onclick = function () { - //恢复原来设置 - // console.log("oldEntity", oldEntity); - // console.log("entity", entity); - // entity.xbsjFromJSON(oldEntity) - // entity = JSON.parse(oldEntity) - entity.depthTest = oldEntity.depthTest; - entity.color = oldEntity.color; - entity.outline = oldEntity.outline; - entity.positions = oldEntity.positions; - entity.editing = false; - }; - okBtn.onclick = function () { - let params = { - id: entity.customProp?.id, - drawData: JSON.stringify(entity), - }; - // console.log("submit", entity); - defHttp - .post( - { - url: '/military/dtMapDraw/edit', - params: params, - }, - { isTransformResponse: false } - ) - .then((response) => { - createMessage.success('编辑成功', 2); - }) - .catch((response) => { - createMessage.error('编辑失败', 2); - }); - }; - }); - }, - }, - { - text: '删除', - func: () => { - window.$uia.confirm('确认删除?', () => { - defHttp - .delete( - { - url: '/military/dtMapDraw/delete', - params: { id: entity.customProp?.id }, - }, - { isTransformResponse: false, joinParamsToUrl: true } - ) - .then((response) => { - if (response.code == 200) { - let shapeList = this.store.shapeList; - shapeList.forEach((element, index) => { - const model = window.$earth.getObject(element); - if (model.id == entity.customProp?.id) { - let shape = shapeList.splice(index, 1)[0]; - model.destroy(); - } - }); - this.store.shapeList = shapeList; - } else { - createMessage.error('删除失败', 2); - console.error('删除失败', response); - } - }) - .catch((res) => { - console.error('错误', res); - }); - }); - }, - }, - ]); - } - }, window.Cesium.ScreenSpaceEventType.RIGHT_CLICK); //右键事件 - } - /* picked事件 */ - { - /* let canvasbox = this._viewer.canvas, pickPosition = {}, cameraModal = this.$refs.cameraModal;//操作cameraModal组件 - canvasbox.onclick = e => { - pickPosition.x = e.offsetX; - pickPosition.y = e.offsetY; - var picked = this._viewer.scene.pick(pickPosition); - console.log("picked", picked); - if (picked !== undefined && picked.id !== undefined) { - console.log(e) - } else { - that.cameraModalShow = false; - } - } */ - } - } - - listenMittHandler(earthUI = null) { + listenMittHandler() { let that = this; { $mitt.on('winShow', function (e: any) { @@ -2108,7 +1062,7 @@ }); //其他页面调用本页面的methods方法 $mitt.on('listenMouseHandler', function () { - that.listenMouseHandler(); + listenMouseHandler(that); }); $mitt.on('removeHandler', function () { that.removeHandler(); @@ -2117,7 +1071,7 @@ that.createBBHLine(); }); $mitt.on('createRealTimeObj', function () { - that.createRealTimeObj(); + createRealTimeObj(); }); $mitt.on('radioChangeBtnShow', function (callback) { that.radioChangeBtnShow(callback); @@ -2195,1589 +1149,6 @@ chrome.call('close'); } - /* websocket-start */ - initWebSocket(configName) { - if ('WebSocket' in window) { - let url = ''; - switch (configName) { - case 'domianURL': //接收后台模型数据 - // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https - // const userStore = useUserStore() - // const orgCode = userStore.userInfo?.orgCode; - // let userId = store.getters.userInfo.id; - let userId = this.userStore.userInfo?.id; - url = window._CONFIG[configName].replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId; - // url = 'ws://127.0.0.1:5004' - this.websock[configName] = new WebSocket(url); - this.websock[configName].onopen = this.websocketonopen; - this.websock[configName].onerror = this.websocketonerror; - this.websock[configName].onmessage = this.websocketonmessage; - this.websock[configName].onclose = this.websocketclose; - break; - case 'clientURL': //调用客户端监控视频窗口 - url = window._CONFIG['clientURL']; - this.websock[configName] = new WebSocket(url); - this.websock[configName].onopen = this.websocketonopen; - this.websock[configName].onerror = this.websocketonerror; - this.websock[configName].onclose = this.websocketclose; - break; - default: - console.log('websocket初始化失败'); - } - // console.log('url', url) - } else { - console.log('当前浏览器不支持websocket，请更换浏览器！'); - } - } - websocketonopen(e) { - console.log('WebSocket连接成功'); - } - websocketonerror(e) { - console.log('WebSocket连接发生错误'); - } - loreadAlarmInfo = _.debounce( - (url, eventSerialNum) => { - defHttp - .get( - { - url: url, - params: eventSerialNum, - }, - { isTransformResponse: false } - ) - // getAction(url, {eventSerialNum: eventSerialNum}) - .then((res) => { - if (!res.success) { - console.log('重新发送websocket报警数据失败!'); - } else { - console.log('重新发送websocket报警数据成功!'); - } - }); - }, - 2000, - { maxWait: 3000, trailing: true } - ); - async websocketonmessage(e) { - //接收后端数据 - var data = eval('(' + e.data + ')'); - const cesium = window.Cesium; - // Cesium Math - const math = cesium.Math; - // earth - const earth = window.$earth; - //处理订阅信息 - if (data.cmd == 'new_warn_info') { - //有新增的预警信息 - //1.调起客户端窗体 - // chrome.call("formactive"); - //2.若警示界面打开着，则刷新列表 - if ($('.infoList').css('visibility') == 'visible') { - $mitt.emit('getWarnData'); - } - //3.弹出监控窗口或围栏信息 - if (data.msgTxt != undefined && data.dealStatus == 1) { - $mitt.emit('listenerVideoNum', data.msgTxt); - //显示报警位置 - window.$earth.sceneTree.$refs[data.labelCode].czmObject.color = [1, 0.09803921568627451, 0, 1]; - } else if (data.msgTxt != undefined && data.dealStatus == 3) { - this.$notification.open({ - key: 'fenceInfo', - message: '围栏信息通知', - description: data.msgTxt + '！', - duration: 0, - }); - } else if (data.dealStatus == 2) { - //消除单个报警位置 - window.$earth.sceneTree.$refs[data.labelCode].czmObject.color = [0.08235294117647059, 1, 0, 1]; - } else if (data.dealStatus == 0) { - //消除所有报警位置 - window.$earth.sceneTree.$refs.sensor.children.forEach((data, index) => { - data.czmObject.color = [0.08235294117647059, 1, 0, 1]; - }); - } - - //4.提示音 - if (data.dealStatus !== 2 && data.dealStatus !== 0) { - await this.$refs.audio.play(); - setTimeout(() => { - this.$refs.audio.pause(); //N秒后暂停播放 - }, data.alarmNum * 1000); - } - } else if (data.cmd == 'new_microwave_warn_info' || data.cmd == 'new_radar_warn_info' || data.cmd == 'new_video_warn_info') { - if (this.alarmInfoMap.has(data.serialNum)) { - return; - } - const evalString = ` - if(p._div){ - return - } - let left=p.winPos[0]; - let bottom=p.winPos[3]; - const div = document.createElement('div'); - div.style="position: absolute;left:"+left+"px;bottom:"+bottom+"px " - const img = document.createElement('img'); - img.src="${alarmImg}"; - img.style="width:60px;height:60px" - div.appendChild(img); - div.onclick=()=>{ - p.flyTo() - } - p._div = div; - const root=document.getElementById('earthContainer'); - root.appendChild(div); - XE.MVVM.watch(p.winPos,() => { - left=p.winPos[0]-30; - bottom=p.winPos[3]; - div.style="position: absolute;left:"+left+"px;bottom:"+bottom+"px " - }) - `; - const pinConfig = { - name: 'Pin1', - xbsjType: 'Pin', - position: [math.toRadians(data.lon), math.toRadians(data.lat), 0], - evalString: evalString, - // imageUrl: alarmImg, - isDivImage: true, - show: false, - far: 3000, - }; - // scanline - const scanlineConfig = { - name: 'AlarmScanline', - xbsjType: 'Scanline', - position: [math.toRadians(data.lon), math.toRadians(data.lat), 0], - playing: true, - radius: 30, - timeDuration: 0.5, - color: [1, 0, 0, 1], - show: false, - }; - const pin = new window.XE.Obj.Pin(window.$earth); - const scanline = new window.XE.Obj.Scanline(window.$earth); - //1、获取到世界坐标 - let start = cesium.Cartesian3.fromDegrees(data.lon, data.lat, 0); - let height = await window.$earth.czm.viewer.scene.clampToHeightMostDetailed([start]).then(function (clampedCartesians) { - //2、获取到经纬高度 - let ellipsoid = window.$earth.czm.viewer.scene.globe.ellipsoid; - let cartographic = ellipsoid.cartesianToCartographic(clampedCartesians[0]); - return cartographic.height; - }); - if (height > 0) { - pinConfig.position[2] = height; - } else if (window.$earth.sceneTree.$refs.terrain.czmObject.show) { - height = await cesium.sampleTerrainMostDetailed(earth._viewer.terrainProvider, [start]).then((updatedPositions) => { - return updatedPositions[0].height ? updatedPositions[0].height : 0; - }); - pinConfig.position[2] = height; - } else { - pinConfig.position[2] = 0; - } - - // 保存报警类型到对象上 - let customProp = {}; - customProp.alarmType = data.cmd; - pinConfig.customProp = JSON.stringify(customProp); - scanlineConfig.customProp = JSON.stringify(customProp); - pin.xbsjFromJSON(pinConfig); - scanline.xbsjFromJSON(scanlineConfig); - // 判断现在相机的高度来显示报警相关模型 - if (this._earth.camera.position[2] < 100) { - // 隐藏 pin, 显示 scanline - pin._div.hidden = true; - scanline.show = true; - } else { - // 隐藏 scanline, 显示 pin - pin._div.hidden = false; - scanline.show = false; - } - scanline.flyTo(); - this.alarmInfoMap.set(data.serialNum, { pin: pin, scanline: scanline, timestamp: Date.now() }); - //报警弹窗 - this.videoWindowProps.title = `实时报警窗口（${data.cameraName}）`; - this.videoWindowProps.videoUrl = data.cameraCode; //相机编码 - this.videoWindowProps.isAlarm = true; - this.videoWindowProps.visible = true; - this.videoWindowProps.playRecord = false; - - this.videoWindowProps.warnEvent.happenTime = data.happenTime; - this.videoWindowProps.warnEvent.happenLoc = `${Number(data.lon).toFixed(6)},${Number(data.lat).toFixed(6)}`; - this.videoWindowProps.warnEvent.warnNum = 1; - this.videoWindowProps.warnEvent.warnLevel = filterDictTextByCache('ms_warn_level', data.warnLevel); - this.videoWindowProps.warnEvent.warnType = filterDictTextByCache('ms_warn_type', data.warnType); - this.videoWindowProps.warnEvent.warnContent = data.warnContent; - - //若警示界面打开着，则刷新列表 - if ($('.infoList').css('visibility') == 'visible') { - $mitt.emit('getWarnData'); - } - - //提示音 - await this.$refs.audio.play(); - setTimeout(() => { - this.$refs.audio.pause(); //N秒后暂停播放 - }, 3 * 1000); - } else if (data.cmd == 'earthMap_model_realtime_info') { - console.log(data); - console.log(this.radarAlarmDataMap); - // 雷达轨迹报警数据 - const alarmContent = data.content; - - if (this.radarAlarmDataMap.has(data.eventSerialNum)) { - // 存在雷达报警数据 - let radarAlarmData = this.radarAlarmDataMap.get(data.eventSerialNum); - let targetMap = radarAlarmData.target; - if (targetMap.has(data.modelId)) { - // 存在目标数据 - let targetData = targetMap.get(data.modelId); - let pathModel = targetData.path; - let groundImageModel = targetData.groundImage; - //更新目标数据 - // 更新报警数据 - let positionRadian = earthUtils.degreeToRadianInLngLatHeight(alarmContent.lon, alarmContent.lat, 0); - // 更新路径 - pathModel.positions.push(positionRadian); - groundImageModel.position = positionRadian; - if (pathModel.positions.length > 1) { - pathModel.show = true; - groundImageModel.show = true; - } - } else { - // 不存在目标数据 - // 创建目标数据 - let positionRadian = earthUtils.degreeToRadianInLngLatHeight(alarmContent.lon, alarmContent.lat, 0); - // 路径 - let pathModel = new window.XE.Obj.Path(window.$earth); - let pathConfig = { - name: 'path', - xbsjType: 'Path', - positions: [positionRadian], - loop: false, - playing: true, - width: 2, - color: [1, 0, 0, 1], - show: false, - showDirection: false, - currentSpeed: 30, - alwaysAlongThePath: true, - material: { - type: 'Color', - color: [1, 0, 0, 1], - }, - }; - pathModel.xbsjFromJSON(pathConfig); - // 地面图片 - let groundImageModel = new window.XE.Obj.GroundImage(window.$earth); - let imageUrls: any = []; - if (data.mainTarget) { - imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point1.png'); - imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point2.png'); - } else { - imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point3.png'); - imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point4.png'); - } - let groundImageConfig = { - name: 'groundImage', - xbsjType: 'GroundImage', - position: positionRadian, - width: 3, - height: 3, - playing: true, - imageUrls: imageUrls, - show: false, - }; - groundImageModel.xbsjFromJSON(groundImageConfig); - // 保存目标数据 - let targetData = { - path: pathModel, - groundImage: groundImageModel, - }; - targetMap.set(data.modelId, targetData); - } - // 更新时间 - const updateTime = Date.now(); - radarAlarmData.timestamp = updateTime; - // 更新 pin 的时间 - let alarm = this.alarmInfoMap.get(data.eventSerialNum); - if (alarm) { - alarm.timestamp = updateTime; - } - } else { - // 不存在报警数据 - // 路径 - let pathModel = new window.XE.Obj.Path(window.$earth); - let pathConfig = { - name: 'path', - xbsjType: 'Path', - positions: [earthUtils.degreeToRadianInLngLatHeight(alarmContent.lon, alarmContent.lat, 0)], - loop: false, - playing: true, - width: 2, - color: [1, 0, 0, 1], - show: false, - showDirection: false, - currentSpeed: 30, - alwaysAlongThePath: true, - material: { - type: 'Color', - color: [1, 0, 0, 1], - }, - }; - // 地面图片 - let groundImage = new window.XE.Obj.GroundImage(window.$earth); - let imageUrls: any = []; - if (data.mainTarget) { - imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point1.png'); - imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point2.png'); - } else { - imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point3.png'); - imageUrls.push(window._CONFIG['staticDomainURL'] + '/keyi_point4.png'); - } - let groundImageConfig = { - name: 'groundImage', - xbsjType: 'GroundImage', - playing: true, - width: 3, - height: 3, - position: earthUtils.degreeToRadianInLngLatHeight(alarmContent.lon, alarmContent.lat, 0), - imageUrls: imageUrls, - show: false, - }; - // 创建路径 - groundImage.xbsjFromJSON(groundImageConfig); - // 创建地面图片 - pathModel.xbsjFromJSON(pathConfig); - - // 保存数据到map中 - let target = { - path: pathModel, - groundImage: groundImage, - mainTarget: alarmContent.mainTarget, - }; - let targetMap = new Map(); - targetMap.set(data.modelId, target); - this.radarAlarmDataMap.set(data.eventSerialNum, { - target: targetMap, - timestamp: Date.now(), - }); - - if (!this.alarmInfoMap.has(data.eventSerialNum)) { - // 不存在告警信息(小灯或扫描线)时发送 - // 事件编号到后台使其重新发送websocket报警数据 - await new Promise((r) => setTimeout(r, 500)); - if (!this.alarmInfoMap.has(data.eventSerialNum)) { - console.log('发送websocket报警数据'); - this.loreadAlarmInfo(this.url.sendRadarAlarmByWebSocket, data.eventSerialNum); - } - } - } - if (this.videoWindowProps.visible) { - this.videoWindowProps.warnEvent.warnNum = this.radarAlarmDataMap.get(data.eventSerialNum).target.size; - } - // console.debug('雷达轨迹报警数据', this.radarAlarmDataMap); - } else if (data.cmd == '') { - earth.sceneTree.$refs[data.eventSerialNum].destroy(); - } else if (data.cmd == 'eventPublish') { - window.getEventData(); - } - } - websocketclose(e) { - console.log('connection closed (' + e.code + ')'); - createMessage.warn('websocket连接已断开', 3); - } - websocketdosend(configName) { - //发送数据 - this.spinning = !this.spinning; //加载状态 - console.log('this.websock[configName]', this.websock[configName]); - let that = this; - let message = { - topic: 'Show_Single_Video', - msg: '192.168.1.65', - }; - //readyState：0:正在连接中，1:已建立连接，2:连接正在关闭，3:连接已关闭或连接失败 - if (that.websock[configName].readyState == 1) { - that.websock[configName].send(JSON.stringify(message)); - that.spinning = !that.spinning; //加载状态 - console.log('已发送'); - } else { - //重新连接websocket - this.initWebSocket('clientURL'); - setTimeout(function () { - if (that.websock[configName].readyState == 1) { - that.websock[configName].send(JSON.stringify(message)); - } - that.spinning = !that.spinning; //加载状态 - }, 3000); - } - } - /* websocket-end */ - getRandomArr(arr, count) { - //从数组随机抽取元素 - var shuffled = arr.slice(0), - i = arr.length, - min = i - count, - temp, - index; - while (i-- > min) { - //打乱数组 - index = Math.floor((i + 1) * Math.random()); - temp = shuffled[index]; - shuffled[index] = shuffled[i]; - shuffled[i] = temp; - } - return shuffled.slice(min); - } - // 根据经纬度获取高度 - async getHeigthByLonLat(lon = 88.8296258, lat = 27.4061859) { - var positions = [window.Cesium.Cartographic.fromDegrees(lon, lat)]; - // var promise = Cesium.sampleTerrain(this._viewer.terrainProvider, 13, positions); - var promise = window.Cesium.sampleTerrainMostDetailed(this._viewer.terrainProvider, positions); - return new Promise((resolve, reject) => { - window.Cesium.when(promise, function (updatedPositions) { - // updatedPositions[0].height ? updatedPositions[0].height : 0; - resolve(updatedPositions); - }); - }); - /* var terCartographic = new Cesium.Cartographic(1.5503694435245020004000376611976, 0.47832817936864542131039019315313, 0) - var terHigh = this._viewer.scene.globe.getHeight(terCartographic); - return terHigh; */ - } - cloneModel(modelObject) { - if (modelObject.czmObject.xbsjType === 'Model') { - const modelConfig = { - ref: '', - name: modelObject.name, - czmObject: { - name: modelObject.czmObject.name, - xbsjType: modelObject.czmObject.xbsjType, - url: modelObject.czmObject.url, - // "color": [0.52, 0.6, 0.58, 1], - minimumPixelSize: modelObject.czmObject.minimumPixelSize, - // maximumScale: 0.02, - scale: modelObject.czmObject.scale, - xbsjScale: [...modelObject.czmObject.xbsjScale], - xbsjPosition: [...modelObject.czmObject.xbsjPosition], - xbsjRotation: [...modelObject.czmObject.xbsjRotation], - viewDistance: 150, - distanceDisplayCondition: [1.0, 30000.0], - }, - }; - const index = modelObject.parent.children.push(modelConfig); - return index; - // const model = new window.XE.Obj.Model(window.$earth) - // model.xbsjFromJSON(modelConfig) - // const leaf = new window.XE.SceneTree.Leaf(model) - // window.$earth.sceneTree.root.push(leaf) - } else { - const objConfig3 = { - ref: '', - name: modelObject.name, - czmObject: { - customProp: modelObject.czmObject.customProp, - name: modelObject.czmObject.name, - xbsjType: modelObject.czmObject.xbsjType, - imageUrl: modelObject.czmObject.imageUrl, - position: [...modelObject.czmObject.position], - scale: modelObject.czmObject.scale, - pinBuilder: { - extText: modelObject.czmObject.pinBuilder.extText, - extTextFont: '30px 楷体', - extTextPixelOffset: [30, -20], - fillColor: [1, 1, 1, 0.9], - outlineColor: [0, 0, 0, 0.9], - }, - far: 1073741824, - }, - }; - const index = modelObject.parent.children.push(objConfig3); - return index; - } - - // return model - } - cloneShamNode(oldRef, id, title) { - const shamNode = window.$earth.sceneTree.$refs['node_' + oldRef]; - const newShamNode = { - ref: 'node_' + id, - title: title, - expand: false, - children: [], - }; - // that.currentModel = response.result - shamNode.parent.children.push(newShamNode); - } - getAreaCode(item) { - const currentRef = item._inner.sn.ref; - if (!this.areaByNodeId.has(currentRef)) { - if (item.parent) { - return this.getAreaCode(item.parent); - } - } else { - return this.areaByNodeId.get(currentRef); - } - } - setAllLabelStatus(selectRef, item, wbUnifiedResponse) { - const that = this; - //监控点 - if (selectRef.startsWith('monitor')) { - let grandsons: any = []; - const childs = item.children; - for (const child of childs) { - const grandson1 = child.children; - if (grandson1 && grandson1.length > 0) { - grandsons = grandsons.concat(grandson1); - } - } - for (const grandson of grandsons) { - const xbsjObject = grandson._inner.sn; - const ref = xbsjObject.ref; - if (ref.startsWith('camera_')) { - const state = that.statusByNodeId.get(ref); - if (state == 1) { - that.statusByNodeId.set(ref, 0); - const img = that.imgByRef.get(ref); - img.src = require('@/assets/earthMap/circleDot1.png'); - } else if (state == 0) { - that.statusByNodeId.set(ref, 1); - const img = that.imgByRef.get(ref); - img.src = require('@/assets/earthMap/circleDot1.png'); - } - } - } - } - //微波 - else if (selectRef.startsWith('wbList')) { - const parentNode = item.parent; - let areaCode = null; - if (parentNode) { - const falseNodeRef = item.parent._inner.sn.ref; - const nodeRef = falseNodeRef.split('_')[1]; - const trueNode = window.$earth.sceneTree.$refs[nodeRef]; - areaCode = trueNode.czmObject.customProp; - } - const childs1 = item.children; - if (!childs1 || childs1.length < 0) { - return; - } - const length = childs1.length; - let index = -1; - for (const child of childs1) { - index++; - let xbsjObject = child._inner.sn; - let jsonObj = JSON.parse(xbsjObject.czmObject.customProp); - let deviceId = jsonObj.deviceId; - let device = that.hostDeviceMapById.get(deviceId); - if (!device) { - console.error('主机设备为null'); - continue; - } - const args = { - device: device, - isDefence: wbUnifiedResponse, - defenceArea: areaCode, - detectorList: null, - }; - defHttp - .post( - { - url: this.url.setDefenseArea, - params: args, - }, - { isTransformResponse: false } - ) - // postAction(this.url.setDefenseArea, args) - .then((response) => { - if (!response.success) { - return; - } else { - for (let i = index; i < length; i++) { - const child1 = childs1[i]; - const xbsjObject1 = child1._inner.sn; - const ref1 = xbsjObject1.ref; - if (ref1 && ref1.length > 0) { - const state1 = that.statusByNodeId.get(ref1); - if (state1 == 0 && wbUnifiedResponse) { - that.statusByNodeId.set(ref1, 1); - const img1 = that.imgByRef.get(ref1); - if (!img1) return; - img1.src = require('@/assets/earthMap/circleDot2.png'); - } else if (state1 == 1 && !wbUnifiedResponse) { - that.statusByNodeId.set(ref1, 0); - const img1 = that.imgByRef.get(ref1); - if (!img1) return; - img1.src = require('@/assets/earthMap/circleDot1.png'); - } - } - } - } - console.log(response); - }); - break; - } - } else if (selectRef.startsWith('nodeSecondary')) { - const childs1 = item.children; - if (!childs1 || childs1.length < 0) { - return; - } - for (const child of childs1) { - let xbsjObject = child._inner.sn; - let jsonObj = JSON.parse(xbsjObject.czmObject.customProp); - let deviceId = jsonObj.deviceId; - let device = that.hostDeviceMapById.get(deviceId); - if (!device) { - console.error('主机设备为null'); - continue; - } - let regionIdList: any = []; - if (item.children.length > 0) { - item.children.forEach((element) => { - regionIdList.push(element._inner.sn.ref); - }); - } - const args = { - regionIdList: regionIdList, // 周界防区区域ID列表（雷达设备列表的ID） - regionStatus: wbUnifiedResponse ? 1 : 0, // 布防状态 0 - 未布防 1 - 布防 - defenceRule: { - // 布防规则 - startTime: 'yyyy-MM-dd HH:mm:ss', // 布防开始时间 每日循环情况下只包含时分秒，格式："HH:mm:ss" 非每日循环情况下包含年月日、时分秒，格式："yyyy-MM-dd HH:mm:ss" - endTime: 'yyyy-MM-dd HH:mm:ss', // 布防结束时间 每日循环情况下只包含时分秒，格式："HH:mm:ss" 非每日循环情况下包含年月日、时分秒，格式："yyyy-MM-dd HH:mm:ss" - dailyCycle: true, // 每日循环布防 true - 是 false - 否 - }, - }; - // putAction(this.url.perimeterControl,{}) - console.log(device, that.statusByNodeId, xbsjObject); - let ref1 = xbsjObject.ref; - let state1 = that.statusByNodeId.get(ref1); - //一键布防撤防测试使用 - if (wbUnifiedResponse) { - state1 = 0; - } else { - state1 = 1; - } - if (state1 == 0 && wbUnifiedResponse) { - that.statusByNodeId.set(ref1, 1); - const img1 = that.imgByRef.get(ref1); - if (!img1) return; - img1.src = require('@/assets/earthMap/circleDot2.png'); - } else if (state1 == 1 && !wbUnifiedResponse) { - that.statusByNodeId.set(ref1, 0); - const img1 = that.imgByRef.get(ref1); - if (!img1) return; - console.log(img1); - img1.src = require('@/assets/earthMap/circleDot1.png'); - } - // break - } - } - } - - // 图层管理-模型右键菜单 - sceneTreePopContextMenu({ item, vueObject }, earthUI) { - let that: any = this; - let earth = window.$earth; - let XE = window.XE; - let sceneTree = earthUI.tools.sceneTree; - let sceneTreeComp = sceneTree._comp; - // 转换方法 - let transform = window.Cesium.Math; - //右键之后设置当前 node - item._inner.sn.isSelected = true; - const el = vueObject.$el; - let baseItems = [ - { - text: '克隆', - keys: '', - func: () => { - let sn: any = null; - if (item._inner.sn.ref.startsWith('node_')) { - const objectId = item._inner.sn.ref.split('_')[1]; - sn = earth.sceneTree.$refs[objectId]; - } else { - sn = item._inner.sn; - } - if (sn) { - let newSn: any = null; - let newSnData: any = null; - let index = 0; - if (sn.czmObject.xbsjType !== 'Polyline') { - index = that.cloneModel(sn); - newSn = sn.parent.children[index - 1]; - newSnData = newSn.czmObject; - if (newSnData.xbsjType === 'Model') { - that.$nextTick(() => { - const divs = $('#earthContainer>div>div>div:nth-child(5)') - .children('div') - .eq(1) - .children() - .eq(0) - .children() - .eq(0) - .children() - .each((index, element) => { - if (index <= 1) { - return; - } - const paddingLeft = $(element).children().eq(0).css('padding-left'); - if (paddingLeft === '10px') { - $(element).css('display', 'none'); - } - }); - }); - } - } - // 保存数据到数据库中 - that - .handleNodeType(sn) - // 传感器 - .sensor(() => { - // debugger - // 设置 ref 属性 防止数据库中 eventSerialNum 重复 - newSn.ref += '_copy'; - // 发送请求 保存到数据库中 - let saveSensorModelParameter = { - eventSerialNum: newSn.ref, - lon: transform.toDegrees(newSnData.xbsjPosition[0]).toFixed(5), - lat: transform.toDegrees(newSnData.xbsjPosition[1]).toFixed(5), - height: newSnData.xbsjPosition[2].toFixed(2), - yaw: transform.toDegrees(newSnData.xbsjRotation[0]).toFixed(2), - pitch: transform.toDegrees(newSnData.xbsjRotation[1]).toFixed(2), - roll: transform.toDegrees(newSnData.xbsjRotation[2]).toFixed(2), - isShow: 1, - modelType: '11', - eventType: 1, - }; - defHttp - .post( - { - url: this.url.SaveSensorModel, - params: saveSensorModelParameter, - }, - { isTransformResponse: false } - ) - // postAction(this.url.SaveSensorModel, saveSensorModelParameter) - .then((res) => { - if (res.success) { - createMessage.success('克隆成功'); - } else { - newSn.parent.children.splice(index, 1); - createMessage.error('克隆成功:' + res.message); - } - }); - }) - // 标志点 微波雷达回调 - .markerPosition(() => { - // debugger - newSn.title += '_copy'; - let pinImage = newSnData.imageUrl; - const staticDomainURL = window._CONFIG['staticDomainURL'] + '/'; - // 去除 image 地址中的 staticDomainURL 链接 - let imageUri = pinImage.substring(pinImage.indexOf(staticDomainURL) + staticDomainURL.length, pinImage.length); - const jsonObj = JSON.parse(newSnData.customProp); - const labelAttr = jsonObj.labelAttr; - let savePinModelParameter = { - mapLabel: { - labelName: newSnData.name, - labelLon: transform.toDegrees(newSnData.position[0]).toFixed(5), - labelLat: transform.toDegrees(newSnData.position[1]).toFixed(5), - labelHeight: newSnData.position[2].toFixed(2), - labelImgUrl: imageUri, - // 1 启用， 0 禁用 - labelStatus: 1, - // 标记属性-> 3: 标记位置 - labelAttr: labelAttr, - labelCode: '', - lineId: newSn.name, - }, - deviceId: jsonObj.deviceId, - }; - defHttp - .post( - { - url: this.url.saveMapLabel, - params: savePinModelParameter, - }, - { isTransformResponse: false } - ) - // postAction(this.url.saveMapLabel, savePinModelParameter) - .then((res) => { - if (res.success) { - // 修改 ref 成 数据库返回的 id - newSn.ref = res.result; - that.setIconByRef(newSn.ref, newSn.ref); - newSn.czmObject.pinBuilder.extText = newSnData.name; - jsonObj.labelCode = ''; - newSn.czmObject.customProp = JSON.stringify(jsonObj); - // 保存成功 - createMessage.success('克隆成功'); - } else { - newSn.parent.children.splice(index, 1); - createMessage.error('克隆失败' + res.message); - } - }) - .catch((err) => { - newSn.parent.children.splice(index, 1); - createMessage.error('克隆失败'); - }); - }) - //区域回调 - .polylineCallBack(() => { - // debugger - const currentModel = new window.XE.Obj.Polyline(window.$earth); - const submitData: any = {}; - const poistions = sn.czmObject.positions; - if (poistions.length <= 0) { - return; - } - submitData.name = sn.czmObject.name + '_copy'; - submitData.lineCode = currentModel.guid; - submitData.isLoop = Number(sn.czmObject.loop); - submitData.isDepthCheck = Number(sn.czmObject.depthTest); - submitData.width = sn.czmObject.width; - submitData.interpolation = sn.czmObject.arcType; - submitData.positions = JSON.stringify(poistions); - switch (sn.czmObject.material.type) { - // 实线 - case 'XbsjColorMaterial': - submitData.materialType = 0; - submitData.color = JSON.stringify(sn.czmObject.material.XbsjColorMaterial.color); - submitData.intervalColor = null; - submitData.dashLength = 0; - submitData.dashStyle = 0; - break; - // 虚线 - case 'XbsjPolylineDashMaterial': - submitData.materialType = 1; - submitData.color = JSON.stringify(sn.czmObject.material.XbsjPolylineDashMaterial.color); - submitData.intervalColor = JSON.stringify(sn.czmObject.material.XbsjPolylineDashMaterial.gapColor); - submitData.dashLength = sn.czmObject.material.XbsjPolylineDashMaterial.dashLength; - submitData.dashStyle = sn.czmObject.material.XbsjPolylineDashMaterial.dashPattern; - break; - // 箭头线 - case 'XbsjPolylineArrowMaterial': - submitData.materialType = 2; - submitData.color = JSON.stringify(sn.czmObject.material.XbsjPolylineArrowMaterial.color); - submitData.intervalColor = null; - submitData.dashLength = 0; - submitData.dashStyle = 0; - break; - // 轨迹线 - case 'XbsjODLineMaterial': - submitData.materialType = 3; - submitData.color = JSON.stringify(sn.czmObject.material.XbsjODLineMaterial.color); - submitData.intervalColor = null; - submitData.dashLength = 0; - submitData.dashStyle = 0; - submitData.cycleFrame = sn.czmObject.material.XbsjODLineMaterial.totoalFrameCount; - break; - } - defHttp - .post( - { - url: this.url.saveMapLine, - params: submitData, - }, - { isTransformResponse: false } - ) - // postAction(this.url.saveMapLine, submitData) - .then((response) => { - if (response.success) { - currentModel.name = submitData.name; - currentModel.loop = submitData.isLoop; - currentModel.depthTest = submitData.isDepthCheck; - currentModel.width = submitData.width; - currentModel.arcType = submitData.interpolation; - currentModel.positions = JSON.parse(submitData.positions); - switch (sn.czmObject.material.type) { - // 实线 - case 'XbsjColorMaterial': - currentModel.material.type = 'XbsjColorMaterial'; - currentModel.material.color = submitData.color; - break; - // 虚线 - case 'XbsjPolylineDashMaterial': - currentModel.material.type = 'XbsjPolylineDashMaterial'; - currentModel.material.color = submitData.color; - currentModel.material.XbsjPolylineDashMaterial.gapColor = submitData.intervalColor; - currentModel.material.XbsjPolylineDashMaterial.dashLength = submitData.dashLength; - currentModel.material.XbsjPolylineDashMaterial.dashPattern = submitData.dashStyle; - break; - // 箭头线 - case 'XbsjPolylineArrowMaterial': - currentModel.material.type = 'XbsjPolylineArrowMaterial'; - currentModel.material.XbsjPolylineArrowMaterial.color = submitData.color; - break; - // 轨迹线 - case 'XbsjODLineMaterial': - currentModel.material.type = 'XbsjODLineMaterial'; - currentModel.material.XbsjODLineMaterial.color = submitData.color; - currentModel.material.XbsjODLineMaterial.totoalFrameCount = submitData.cycleFrame; - break; - } - const leaf = new XE.SceneTree.Leaf(currentModel); - leaf.ref = response.result; - sn.parent.children.push(leaf); - } else { - throw '克隆区域数据出错'; - } - }) - .catch((e) => { - currentModel.destroy(); - createMessage.error('克隆区域数据出错', 3); - }); - }) - //监控点 - .modelCallback(() => { - createMessage.warning('监控点不支持克隆'); - }) - .run(); - } - }, - }, - { - text: '删除', - keys: '', - func: () => { - earthUI.confirm('确认删除图层?', () => { - try { - // debugger - let sn: any = null; - const ref = item._inner.sn.ref; - // update:-- 判断方式要修改 - if (ref.startsWith('node_')) { - const objectId = item._inner.sn.ref.split('_')[1]; - sn = earth.sceneTree.$refs[objectId]; - } else { - sn = item._inner.sn; - } - let id = sn.ref; - // 删除数据库中的数据 - that - .handleNodeType(sn) - // 传感器 - .sensor(() => { - // 发送请求 删除数据库中的数据 - that.handlerModelDelete(this.url.deleteSensor, { eventSerialNum: id }); - }) - // 标志点 - .markerPosition(() => { - if (sn.czmObject.addViewShedReturn) { - window.$earth.czm.viewer.entities.remove(sn.czmObject.addViewShedReturn); - } - if (sn.czmObject.customProp) { - let prop = JSON.parse(sn.czmObject.customProp); - if (prop.labelAttr == 4) { - defHttp.delete( - { - url: '/military/RadarConfig/deleteByRadarCode', - params: { radarCode: prop.labelCode }, - }, - { isTransformResponse: false, joinParamsToUrl: true } - ); - // deleteAction("/military/RadarConfig/deleteByRadarCode", {radarCode: prop.labelCode}).then(res => { - // // console.log(res,'delete'); - // }) - } - } - this.handlerModelDelete(this.url.deleteMapLabel, { - id: id, - }); - }) - // 线 - .modelCallback(() => { - that.handlerModelDelete(this.url.deleteSite, { id: id }).then(() => { - sn.destroy(); - const node = item._inner.sn; - const childList = node.parent.children; - childList.splice(childList.indexOf(node), 1); - node.destroy(); - }); - }) - .polylineCallBack(() => { - const childList = item._inner.sn.children; - - for (const child of childList) { - if (child.children.length > 0) { - createMessage.warning('存在下级数据无法删除'); - throw '存在下级数据无法删除'; - } - } - that.handlerModelDelete(this.url.deleteMapLine, { id: id }).then(() => { - const nodeRef = 'node_' + id; - const node = $earth.sceneTree.$refs[nodeRef]; - const childList = node.parent.children; - childList.splice(childList.indexOf(node), 1); - node.destroy(); - }); - }) - .run(); - const index = sn.parent.children.indexOf(sn); - sn.parent.children.splice(index, 1); - } catch (error) {} - }); - }, - }, - ]; - const bf = { - text: '布防/撤防', - keys: '', - func: () => { - const xbsjObject = item._inner.sn; - if (!xbsjObject || !xbsjObject.czmObject) return; - const jsonObj = JSON.parse(xbsjObject.czmObject.customProp); - const deviceId = jsonObj.deviceId; - if (!deviceId) { - console.error('主机设备为空'); - return; - } - const labelCode = jsonObj.labelCode; - if (!labelCode) { - console.error('设备编码为null'); - return; - } - const device = that.hostDeviceMapById.get(deviceId); - const ref = xbsjObject.ref; - if (device.deviceType_dictText.indexOf('微波探测器') > -1) { - if (ref && ref.length > 0) { - const state = that.statusByNodeId.get(ref); - if (state == 1) { - that.setLabelStatus(device, labelCode, ref, 0).then((response) => { - that.setIconByRef(ref, el); - }); - } else if (state == 0) { - that.setLabelStatus(device, labelCode, ref, 1).then((response) => { - that.setIconByRef(ref, el); - }); - } else { - createMessage.error('设备不在线'); - } - } - } else if (device.deviceType_dictText.indexOf('雷达') > -1) { - // console.log("leida"); - //处理单个雷达布防撤防 - //参数 - // { - // "regionIdList": [ - // 2 - // ], // 周界防区区域ID列表（雷达设备列表的ID） - // "regionStatus": 0, // 布防状态 0 - 未布防 1 - 布防 - // "defenceRule": { // 布防规则 - // "startTime": "yyyy-MM-dd HH:mm:ss", // 布防开始时间 每日循环情况下只包含时分秒，格式："HH:mm:ss" 非每日循环情况下包含年月日、时分秒，格式："yyyy-MM-dd HH:mm:ss" - // "endTime": "yyyy-MM-dd HH:mm:ss", // 布防结束时间 每日循环情况下只包含时分秒，格式："HH:mm:ss" 非每日循环情况下包含年月日、时分秒，格式："yyyy-MM-dd HH:mm:ss" - // "dailyCycle": true // 每日循环布防 true - 是 false - 否 - // } - // } - // putAction(this.url.perimeterControl,{}) - } - }, - }; - const selectRef = item._inner.sn.ref; - if (selectRef.startsWith('wbList') || selectRef.startsWith('nodeSecondary_')) { - baseItems = [ - { - text: '一键布防', - keys: '', - func: () => { - that.setAllLabelStatus(selectRef, item, true); - }, - }, - { - text: '一键撤防', - keys: '', - func: () => { - that.setAllLabelStatus(selectRef, item, false); - }, - }, - ]; - earthUI.contextMenu.pop(baseItems); - return; - } else if (selectRef.startsWith('monitor') || selectRef.startsWith('ldList')) { - earthUI.contextMenu.pop([]); - return; - } else if (item.level <= 2) { - if (!item._inner.sn.ref.startsWith('node_')) { - earthUI.contextMenu.pop([]); - return; - } else { - baseItems.splice(0, 1); - } - } else { - if (selectRef.startsWith('camera')) { - // baseItems = [bf] - // earthUI.contextMenu.pop(baseItems) - return; - } else if (!selectRef.startsWith('node_')) { - //站点 - baseItems.unshift({ - type: 'divider', - }); - baseItems.unshift(bf); - } - } - let num = 2; - //判断定位的位置 - if ( - item.level <= 2 || - selectRef.startsWith('monitor') || - selectRef.startsWith('wbList') || - selectRef.startsWith('ldList') || - //站点 - selectRef.startsWith('node_') - ) - num = 0; - baseItems.splice(num, 0, { - text: '定位', - keys: '', - func: () => { - // const czmObject = item._inner.sn.czmObject - // czmObject.flyTo() - const ref = item._inner.sn.ref; - let czmObject: any = null; - if (ref.startsWith('node_')) { - const objectId = ref.split('_')[1]; - const sn = earth.sceneTree.$refs[objectId]; - czmObject = sn.czmObject; - } else { - const sn = item._inner.sn; - czmObject = sn.czmObject; - } - - czmObject.flyTo(); - }, - }); - baseItems.push( - ...[ - { - type: 'divider', - }, - { - text: '属性', - func: () => { - $mitt.emit('windowCancel'); - // 属性面板 - const mainUI = earthUI._vm.$refs.mainUI; - const areaCode = that.getAreaCode(item); - let sn: any = null; - if (item._inner.sn.ref.startsWith('node_')) { - const objectId = item._inner.sn.ref.split('_')[1]; - sn = earth.sceneTree.$refs[objectId]; - // window.XE.MVVM.watch(() => { - // item._inner.sn.title = sn.title - // }) - - sn.czmObject.distanceDisplayCondition = [1.0, 30000.0]; - if (sn.czmObject.xbsjType == 'Model') { - const lineId = item.parent.parent._inner.sn.ref.split('_')[1]; - - this.czmObject = sn.czmObject; - this.node = item; - this.type = 'jkd'; - this.lineId = lineId; - this.areaCode = areaCode; - this.areaByNodeIdModel = that.areaByNodeId; - // this.addModelWinShow = true - this.$nextTick(() => { - this.addModelWinShow = true; - }); - - - return; - } - } else { - sn = item._inner.sn; - if (sn.czmObject.xbsjType == 'Pin') { - const jsonObj = JSON.parse(sn.czmObject.customProp); - - const lineId = jsonObj.labelAttr == 4 ? item.parent._inner.sn.ref.split('_')[1] : item.parent.parent._inner.sn.ref.split('_')[1]; - - this.czmObject = sn.czmObject; - this.node = item; - this.type = jsonObj.labelAttr == 4 ? 'ld' : 'wb'; - this.lineId = lineId; - this.areaCode = areaCode; - this.eidtId = sn.ref; - this.areaByNodeIdModel = that.areaByNodeId; - // setLabelStatus: that.setLabelStatus, 已经有了 - // setIconByRef: that.setIconByRef, - (this.el = el), - this.$nextTick(() => { - this.addModelWinShow = true; - }); - - - return; - } - } - let index = sn.parent.children.indexOf(sn); - let tempData = sn.czmObject.toAllJSON(); - // 设置属性面板的确定按钮方法 - // 显示属性面板 - earthUI.showPropertyWindow(sn.czmObject); - that.$nextTick(() => { - // 模型窗口 - const windowsAttrList = Object.keys(mainUI.$refs); - // 找到该模型设置属性窗口 - const modelToolKey = windowsAttrList.filter((f) => f.indexOf(sn.czmObject.guid || sn.guid) > -1)[0]; - const modelTool = mainUI.$refs[modelToolKey][0]; - // 对应处理方法 - that - .handleNodeType(sn) - // 感应器 - .sensor(() => { - // 禁用模型名称编辑 - modelTool.$el.getElementsByClassName('xbsj-flatten')[0].children[0].children[1].setAttribute('disabled', 'disabled'); - }) - .default(() => { - // 启用模型名称编辑 - modelTool.$el.getElementsByClassName('xbsj-flatten')[0].children[0].children[1].removeAttribute('disabled'); - }) - .run(); - - // modelTool - modelTool.ok = () => { - // 确定时清除这个事件 - $mitt.off('windowCancel'); - // 保存前端数据 - const modelToolObj = modelTool._czmObj; - if (!modelToolObj) { - return; - } - modelToolObj.positionEditing = false; - if (modelToolObj.isCreating) { - modelToolObj.isCreating = false; - const sceneObject = new XE.SceneTree.Leaf(modelToolObj); - earthUI.addSceneObject(sceneObject); - } - - // 保存到数据库 - that.propertiesWindowConfirm(modelTool, sn, index); - // 关闭属性面板 - modelTool.close(); - }; - modelTool.cancel = () => { - // 清除这个事件 - $mitt.off('windowCancel'); - // 关闭属性面板 - modelTool.close(); - let t = modelTool._czmObj; - // 如果是创建的话，需要删除 - t && t.positionEditing === false && t.isCreating && t.isCreating === false && t.destroy(); - // 恢复之前的数据 - t && t.xbsjFromJSON(tempData); - }; - $mitt.on('windowCancel', modelTool.cancel); - // 下面的代码，是切换属性面板里选项窗口， 必须 - // 否侧 ok cancel 等方法执行是原本的方法而不是已经修改的方法 - modelTool.tabShow = '3'; - modelTool.tabShow = '1'; - }); - }, - }, - ] - ); - // 右键菜单-重命名 - // 先销毁之前的 on-change-title 事件 - vueObject.$off('on-change-title', that.handleChangeTitle); - // 重命名时 on-change-title 事件 - vueObject.$on('on-change-title', that.handleChangeTitle); - - // 弹出右键菜单 - earthUI.contextMenu.pop(baseItems); - } - - // 重命名 on-change-title 事件 使用 lodash.debounce 函数(防抖) - handleChangeTitle = _.debounce(function (options) { - const sn = options.item._inner.sn; - const newTitle = options.title; - - // 修改模型属性后，提交到后台。先判断模型的节点，调用不同的接口 - this.handleNodeType(sn) - // 感应器 - .sensor(() => { - // 不支持修改名称 - createMessage.warning('不支持修改感应器的名称'); - }) - // 传感器标志线 - .modelCallback(() => { - // 发送请求 保存模型属性 - let editCameraSiteModelParameter = { - id: sn.ref, - sitename: newTitle, - }; - defHttp - .put( - { - url: this.url.updateSite, - params: editCameraSiteModelParameter, - }, - { isTransformResponse: false } - ) - // putAction(this.url.updateSite, editCameraSiteModelParameter) - .then((res) => { - if (res.success) { - createMessage.success('修改成功'); - } else { - createMessage.error('修改失败'); - } - }) - .catch((error) => { - createMessage.error('修改失败'); - }); - }) - .markerPosition(() => { - // 发送请求 保存模型属性 - let editPinModelParameter = { - id: sn.ref, - labelName: newTitle, - }; - defHttp - .put( - { - url: this.url.updateMapLabel, - params: editPinModelParameter, - }, - { isTransformResponse: false } - ) - // putAction(this.url.updateMapLabel, editPinModelParameter) - .then((res) => { - if (res.success) { - // 修改扩展文本 - sn.czmObject.pinBuilder.extText = newTitle; - createMessage.success('修改成功'); - } else { - createMessage.error('修改失败'); - } - }) - .catch((error) => { - createMessage.error('修改失败'); - }); - }) - .run(); - }, 150); - - // 右键菜单删除按钮的删除方法 - handlerModelDelete(url, params) { - return defHttp - .delete( - { - url: url, - params: params, - }, - { isTransformResponse: false, joinParamsToUrl: true } - ) - .then((res) => { - if (res.success) { - createMessage.success('删除成功'); - } else { - createMessage.error('删除失败'); - console.log('asdasdasd'); - } - }); - } - - // 属性面板确定按钮方法 - propertiesWindowConfirm(propertiesWindow, sn, index) { - // 属性面板 所修改的模型 - let model: any = null; - if (sn.ref && !sn.ref.startsWith('node_')) { - model = sn; - } else { - model = sn.parent.children[index]; - } - - let modelData = model.czmObject; - // 转换方法 - let transform = window.Cesium.Math; - - // 修改模型属性后，提交到后台。先判断模型的节点，调用不同的接口 - this.handleNodeType(sn) - // 传感器 - .sensor(() => { - // 发送请求 保存模型属性 - let editSensorParams = { - eventSerialNum: model.ref, - lon: transform.toDegrees(modelData.xbsjPosition[0]).toFixed(5), - lat: transform.toDegrees(modelData.xbsjPosition[1]).toFixed(5), - height: modelData.xbsjPosition[2].toFixed(2), - yaw: transform.toDegrees(modelData.xbsjRotation[0]).toFixed(2), - pitch: transform.toDegrees(modelData.xbsjRotation[1]).toFixed(2), - roll: transform.toDegrees(modelData.xbsjRotation[2]).toFixed(2), - isShow: 1, - // 传感器类型 - modelType: '11', - // 事件类型 - eventType: 1, - }; - defHttp - .put( - { - url: this.url.updateSensor, - params: editSensorParams, - }, - { isTransformResponse: false } - ) - .then((res) => { - if (res.success) { - createMessage.success('修改成功'); - } else { - createMessage.error('修改失败: ' + res.message); - } - }); - }) - // 站点 - .modelCallback(() => { - let startNum = modelData.url.lastIndexOf('/') + 1; - let modelName = ''; - if (startNum > 0) { - modelName = modelData.url.substring(startNum, modelData.url.length); - } - // 发送请求 保存模型属性 - let editCameraSiteModelParameter = { - id: model.ref, - longitude: transform.toDegrees(modelData.xbsjPosition[0]).toFixed(6), - latitude: transform.toDegrees(modelData.xbsjPosition[1]).toFixed(6), - height: modelData.xbsjPosition[2], - yaw: transform.toDegrees(modelData.xbsjRotation[0]).toFixed(6), - pitch: transform.toDegrees(modelData.xbsjRotation[1]).toFixed(6), - roll: transform.toDegrees(modelData.xbsjRotation[2]).toFixed(6), - modelUrl: modelName, - sitename: modelData.name, - }; - defHttp - .put( - { - url: this.url.updateSite, - params: editCameraSiteModelParameter, - }, - { isTransformResponse: false } - ) - // putAction(this.url.updateSite, editCameraSiteModelParameter) - .then((res) => { - if (res.success) { - modelData.pinBuilder.extText = modelData.name; - createMessage.success('修改成功'); - } else { - createMessage.error('修改失败'); - } - }); - }) - // 标志点 - .markerPosition(() => { - let pinImage = modelData.imageUrl; - const staticDomainURL = window._CONFIG['staticDomainURL'] + '/'; - // 去除 image 地址中的 staticDomainURL 链接 - let imageUri = pinImage.substring(pinImage.indexOf(staticDomainURL) + staticDomainURL.length, pinImage.length); - let editPinModelParameter = { - id: model.ref, - labelName: modelData.name, - labelLon: transform.toDegrees(modelData.position[0]).toFixed(5), - labelLat: transform.toDegrees(modelData.position[1]).toFixed(5), - labelHeight: modelData.position[2].toFixed(2), - labelImgUrl: imageUri, - }; - defHttp - .put( - { - url: this.url.updateMapLabel, - params: editPinModelParameter, - }, - { isTransformResponse: false } - ) - // putAction(this.url.updateMapLabel, editPinModelParameter) - .then((res) => { - if (res.success) { - modelData.pinBuilder.extText = modelData.name; - createMessage.success('修改成功'); - } else { - createMessage.error('修改失败'); - } - }) - .catch((error) => { - createMessage.error('修改失败'); - }); - }) - .polylineCallBack(() => { - const submitData: any = {}; - const poistions = modelData.positions; - if (poistions.length <= 0) { - return; - } - submitData.id = model.ref; - submitData.name = modelData.name; - if (!modelData.customProp) { - submitData.lineCode = modelData.guid; - } - - submitData.isLoop = Number(modelData.loop); - submitData.isDepthCheck = Number(modelData.depthTest); - submitData.width = modelData.width; - submitData.interpolation = modelData.arcType; - submitData.positions = JSON.stringify(poistions); - switch (modelData.material.type) { - // 实线 - case 'XbsjColorMaterial': - submitData.materialType = 0; - // material.XbsjColorMaterial = {} - submitData.color = JSON.stringify(modelData.material.XbsjColorMaterial.color); - submitData.intervalColor = null; - submitData.dashLength = 0; - submitData.dashStyle = 0; - break; - // 虚线 - case 'XbsjPolylineDashMaterial': - submitData.materialType = 1; - submitData.color = JSON.stringify(modelData.material.XbsjPolylineDashMaterial.color); - submitData.intervalColor = JSON.stringify(modelData.material.XbsjPolylineDashMaterial.gapColor); - submitData.dashLength = modelData.material.XbsjPolylineDashMaterial.dashLength; - submitData.dashStyle = modelData.material.XbsjPolylineDashMaterial.dashPattern; - // material.XbsjPolylineDashMaterial = {} - // material.XbsjPolylineDashMaterial.dashLength = data.dashLength - // material.XbsjPolylineDashMaterial.dashPattern = data.dashStyle - break; - // 箭头线 - case 'XbsjPolylineArrowMaterial': - submitData.materialType = 2; - // material.XbsjPolylineArrowMaterial = {} - submitData.color = JSON.stringify(modelData.material.XbsjPolylineArrowMaterial.color); - submitData.intervalColor = null; - submitData.dashLength = 0; - submitData.dashStyle = 0; - break; - // 轨迹线 - case 'XbsjODLineMaterial': - submitData.materialType = 3; - submitData.color = JSON.stringify(modelData.material.XbsjODLineMaterial.color); - submitData.intervalColor = null; - submitData.dashLength = 0; - submitData.dashStyle = 0; - submitData.cycleFrame = modelData.material.XbsjODLineMaterial.totoalFrameCount; - - // material.XbsjODLineMaterial = {} - // material.XbsjODLineMaterial.color = JSON.parse(data.color) - // material.XbsjODLineMaterial.totoalFrameCount = data.cycleFrame - break; - } - defHttp - .put( - { - url: this.url.updateMapLine, - params: submitData, - }, - { isTransformResponse: false } - ) - .then((res) => { - if (res.success) { - createMessage.success('修改成功！', 2); - sn.title = submitData.name; - window.$earth.sceneTree.$refs['node_' + sn.ref].title = submitData.name; - } else { - createMessage.error('修改失败', 2); - } - }) - .catch((error) => { - createMessage.error('修改失败', 2); - }); - }) - .run(); - } /** * 保存更改的ref到模型和后台数据中; @@ -3789,7 +1160,7 @@ // 当数值改变时且旧值不等于空时，更新模型的ref if (newRef !== oldRef && oldRef !== '') { // 修改后台的数据 - this.handleNodeType(model) + handleNodeType(model) .sensor(() => { defHttp .put( @@ -3827,7 +1198,7 @@ const now = Date.now(); const timeout = 5 * 60 * 1000; // 遍历报警数据 - this.alarmInfoMap.forEach((value, key) => { + this.store.alarmInfoMap.forEach((value, key) => { // 获取当前时间与报警时间的时间差 const timeDiff = now - value.timestamp; // 如果时间差大于5分钟，则清除报警 @@ -3847,27 +1218,24 @@ pathModel && pathModel.destroy(); groundImageModel && groundImageModel.destroy(); } - radarAlarmDataMap.delete(eventNum); + this.store.radarAlarmDataMap.delete(eventNum); } } clearAlarmModel(eventNum) { - let alarmInfoMap = this.alarmInfoMap; - let radarAlarmDataMap = this.radarAlarmDataMap; - if (alarmInfoMap.has(eventNum)) { - let alarmData = alarmInfoMap.get(eventNum); + // let alarmInfoMap = this.store.alarmInfoMap; + // let radarAlarmDataMap = this.store.radarAlarmDataMap; + if (this.store.alarmInfoMap.has(eventNum)) { + let alarmData = this.store.alarmInfoMap.get(eventNum); // 清除报警 alarmData.pin && alarmData.pin._div.remove(); alarmData.pin && alarmData.pin.destroy(); alarmData.scanline && alarmData.scanline.destroy(); - this.alarmInfoMap.delete(eventNum); + this.store.alarmInfoMap.delete(eventNum); } - this.clearRadarAlarmModel(radarAlarmDataMap, eventNum); + this.clearRadarAlarmModel(this.store.radarAlarmDataMap, eventNum); } - //调用方法 - handleNodeType(sn) { - return new HandleNodeType(sn); - } + // 获取当前实时时间 getRealTime() { this.timer2 = setInterval(() => { @@ -3879,8 +1247,8 @@ // vue程序销毁时，需要清理相关资源 console.log('vue程序销毁'); - this._earth = this._earth && this._earth.destroy(); - this.websocketclose(); + window.$earth = window.$earth && window.$earth.destroy(); + websocketclose(null); //清除定时器 clearInterval(this.timer); clearInterval(this.timer2); @@ -3889,18 +1257,18 @@ // 资源销毁 destroy() { // vue程序销毁时，需要清理相关资源 - console.log('vue程序销毁', this._earth); + console.log('vue程序销毁', window.$earth); - // this.websocketclose(); + // websocketclose(); //清除定时器 clearInterval(this.timer); clearInterval(this.timer2); clearInterval(this.alarmTrackClearTimer); // window.$uia.tools.sceneTree.destroy() - // this._earth = this._earth && this._earth.destroy(); + // window.$earth = window.$earth && window.$earth.destroy(); //利用store.xbsjEarthUI 重新赋值 window.XbsjEarthUI window.XbsjEarthUI = this.store.xbsjEarthUI; - this._earth = undefined; + window.$earth = undefined; } }