23 changed files with 648 additions and 2895 deletions
@ -0,0 +1,8 @@ |
|||||
|
// 随机数
|
||||
|
export 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; |
||||
|
return v.toString(16); |
||||
|
}); |
||||
|
} |
||||
@ -0,0 +1,62 @@ |
|||||
|
export default class HandleNodeType { |
||||
|
#sn; |
||||
|
#sensorCallback; |
||||
|
#modelCallback; |
||||
|
#markerPositionCallback; |
||||
|
#polylineCallBack; |
||||
|
#default; |
||||
|
|
||||
|
constructor(sn) { |
||||
|
this.#sn = sn; |
||||
|
} |
||||
|
|
||||
|
sensor(callback) { |
||||
|
this.#sensorCallback = callback; |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
// 模型回调
|
||||
|
modelCallback(callback) { |
||||
|
this.#modelCallback = callback; |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
// 微波雷达回调
|
||||
|
markerPosition(callback) { |
||||
|
this.#markerPositionCallback = callback; |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
// 区域回调
|
||||
|
polylineCallBack(callback) { |
||||
|
this.#polylineCallBack = callback; |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
default(callback) { |
||||
|
this.#default = callback; |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
run() { |
||||
|
// 判断节点的类型
|
||||
|
if (!this.#sn.czmObject) { |
||||
|
return null; |
||||
|
} |
||||
|
// 模型类型
|
||||
|
let tempCondition = this.#sn.czmObject.xbsjType; |
||||
|
switch (tempCondition) { |
||||
|
case 'Model': |
||||
|
this.#modelCallback ? this.#modelCallback() : this.#default(); |
||||
|
break; |
||||
|
case 'Pin': |
||||
|
this.#markerPositionCallback ? this.#markerPositionCallback() : this.#default(); |
||||
|
break; |
||||
|
case 'Polyline': |
||||
|
this.#polylineCallBack ? this.#polylineCallBack() : this.#default(); |
||||
|
break; |
||||
|
default: |
||||
|
this.#default ? this.#default() : null; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,437 @@ |
|||||
|
|
||||
|
import _ from 'lodash'; |
||||
|
import { useUserStore } from '/@/store/modules/user'; |
||||
|
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(); |
||||
|
|
||||
|
let userStore = useUserStore(); |
||||
|
let websock: any = []; |
||||
|
function 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 = userStore.userInfo?.id; |
||||
|
url = window._CONFIG[configName].replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId; |
||||
|
// url = 'ws://127.0.0.1:5004'
|
||||
|
websock[configName] = new WebSocket(url); |
||||
|
websock[configName].onopen = websocketonopen; |
||||
|
websock[configName].onerror = websocketonerror; |
||||
|
websock[configName].onmessage = websocketonmessage; |
||||
|
websock[configName].onclose = websocketclose; |
||||
|
break; |
||||
|
case 'clientURL': //调用客户端监控视频窗口
|
||||
|
url = window._CONFIG['clientURL']; |
||||
|
websock[configName] = new WebSocket(url); |
||||
|
websock[configName].onopen = websocketonopen; |
||||
|
websock[configName].onerror = websocketonerror; |
||||
|
websock[configName].onclose = websocketclose; |
||||
|
break; |
||||
|
default: |
||||
|
console.log('websocket初始化失败'); |
||||
|
} |
||||
|
// console.log('url', url)
|
||||
|
} else { |
||||
|
console.log('当前浏览器不支持websocket，请更换浏览器！'); |
||||
|
} |
||||
|
} |
||||
|
function websocketonopen(e) { |
||||
|
console.log('WebSocket连接成功'); |
||||
|
} |
||||
|
function websocketonerror(e) { |
||||
|
console.log('WebSocket连接发生错误'); |
||||
|
} |
||||
|
const 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 function 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: any = { |
||||
|
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: any = { |
||||
|
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: any = {}; |
||||
|
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(); |
||||
|
} |
||||
|
} |
||||
|
function websocketclose(e) { |
||||
|
console.log('connection closed (' + e.code + ')'); |
||||
|
createMessage.warn('websocket连接已断开', 3); |
||||
|
} |
||||
|
function websocketdosend(configName) { |
||||
|
//发送数据
|
||||
|
this.spinning = !this.spinning; //加载状态
|
||||
|
console.log('this.websock[configName]', websock[configName]); |
||||
|
let message = { |
||||
|
topic: 'Show_Single_Video', |
||||
|
msg: '192.168.1.65', |
||||
|
}; |
||||
|
//readyState：0:正在连接中，1:已建立连接，2:连接正在关闭，3:连接已关闭或连接失败
|
||||
|
if (websock[configName].readyState == 1) { |
||||
|
websock[configName].send(JSON.stringify(message)); |
||||
|
that.spinning = !that.spinning; //加载状态
|
||||
|
console.log('已发送'); |
||||
|
} else { |
||||
|
//重新连接websocket
|
||||
|
initWebSocket('clientURL'); |
||||
|
setTimeout(function () { |
||||
|
if (websock[configName].readyState == 1) { |
||||
|
websock[configName].send(JSON.stringify(message)); |
||||
|
} |
||||
|
that.spinning = !that.spinning; //加载状态
|
||||
|
}, 3000); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export { |
||||
|
initWebSocket, |
||||
|
websocketonopen, |
||||
|
websocketonerror, |
||||
|
loreadAlarmInfo, |
||||
|
websocketclose, |
||||
|
websocketonmessage, |
||||
|
websocketdosend, |
||||
|
websock, |
||||
|
} |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue