skyeyesystem/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/index.js

3140 lines
108 KiB
JavaScript
Raw Normal View History

2026-01-25 16:02:00 +08:00
import { lodLayer, viewer } from '@/components/dt-scene/index.vue'
// 新增空间态势统计
// 台风列表
import SceneInfo from '@/mixin/scene-info'
import { mapMutations, mapGetters } from 'vuex'
import * as DT from 'dt-sdk'
import moment from 'moment'
import { connectWebSocket, disconnectWebSocket } from '@/utils/web-socket'
import { ICON_MODE } from '@/enum'
import { AmapImageryProvider, TencentImageryProvider } from '@/utils/map-provider'
import { getResourceList } from '@/api/home'
import { removeRefreshToken, removeToken } from '@/utils/auth'
import { getWeatherInfo } from '@/api/user'
import {
flyTaskUavCommand,
getRadarListData,
getTaskItemDetail,
getTaskListData,
getUavListData,
reRunTask, stopTaskFly, getExecJobs
2026-01-25 16:02:00 +08:00
} from '@/api/task'
import UavTarget from './uavTarget'
import PicturesUpload from '../pictures-upload/index.vue'
import RightSlide from '@/components/RightSlide.vue'
import LeftSlide from '@/components/LeftSlide.vue'
let handler = undefined
let broadcastChannel = null
let broadcastChannelInterval = null
let radarViewer = null
let radarLayer = null
let radarHandler = null
let messageHandler = null
let socketInstance = null
let stompClientInstance = null
let entityCollection = new DT.Cesium.AssociativeArray()
let linePicture = {}
let currentPicture = null
let renderTaskInfo = {}
let pictureHandler = null
let historyPictureList = [] // 存放无人机详情相关历史图片
let taskUavCollection = {}
let taskPlanAreaCollection = {}
let radarSceneEntity = {}
let sceneEntity = {}
let taskListResource = []
export default {
name: 'TwinSituation',
props: {
visible: Boolean,
sceneComplete: Boolean,
},
components: {
PicturesUpload,
RightSlide,
LeftSlide,
},
mixins: [SceneInfo],
data() {
return {
visibleLocale: false,
loadingCount: 0,
sceneCompleteLocale: false,
activeTabs: [],
resourceList: {
visible: true,
activeTabId: 1,
data: [
// {
// signal: 50,
// nickName: '无人机1',
// battery: 80,
// flyHeight: 80,
// lon: 115.76,
// lat: 40.38,
// id: 2
// }
2026-01-25 16:02:00 +08:00
],
typeDict: {
1: '无人机',
2: '消防车',
3: '成员'
}
},
taskList: {
visible: true,
data: [
2026-01-28 14:32:29 +08:00
// {
// status: 1,
// name: '巡查任务',
// statusName: '巡查中',
// beginTime: '2026-01-23 12:14:45'
// }
]
2026-01-25 16:02:00 +08:00
},
weatherInfo2: {
visible: true,
shrink: false,
wendu: '-',
shidu: '-',
quality: '-',
pm25: '-',
pm10: '-',
weekData: [],
chart: {
data: [
{
type: 'line',
name: '温度',
symbol: 'none',
areaStyle: {
color: '#81d3f8'
},
style: {
color: '#81d3f8',
},
lineStyle: { color: '#066893', },
data: [
]
}
],
tooltip: { show: false },
legend: [{ show: false }],
title: [{ show: false }],
grid: [{ left: 0, top: 0, right: 0, bottom: 0, borderWidth: 0 }],
xAxis: [
{
type: 'value',
min: 0,
// max: 5,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
}
],
yAxis: [
{
type: 'value',
min: 0,
max: 60,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true
},
splitLine: {
show: false
},
}
]
}
},
radarInfo: {
visible: true,
},
availableList: [
{
id: 1,
name: '成员2'
},
{
id: 2,
name: '成员3'
}
],
detailInfo: {
visible: false,
id: 1,
jobId: undefined,
baseInfo: {},
taskList: [
],
pictureList: [
]
},
detailUav: {
visible: false,
2026-01-25 16:02:00 +08:00
id: 1,
baseInfo: {
url: require('@/assets/img/uav.png'),
status: true,
battery: 80,
flyHeight: 120,
flyWidth: 120,
longitude: 123.232312,
latitude: 23.232312,
},
2026-02-02 16:06:28 +08:00
activeNames: ['3', '4'],
2026-01-25 16:02:00 +08:00
activeTab: 'DEV',
basicsInfo: {
name: '无人机1',
group: '小组1'
},
taskList: [
{
id: 1,
executeIcon: 'ri-dv-line',
executeName: '无人机1',
typeIcon: 'el-icon-camera',
taskName: '拍照任务',
uavCompletion: 30,
isFinish: false,
taskProgressName: '30%',
executeClass: '2',
taskTime: '2024-12-28 14:00:00'
},
{
id: 6,
executeIcon: 'ri-dv-line',
executeName: '无人机1',
typeIcon: 'el-icon-camera',
taskName: '拍照任务',
uavCompletion: 100,
isFinish: true,
taskProgressName: '完成',
executeClass: '2',
taskTime: '2024-12-27 15:00:00'
},
],
statusInfo: {
dev: [
2026-02-02 16:06:28 +08:00
// { name: '是否开机', value: '是', unit: '' },
2026-01-25 16:02:00 +08:00
{ name: '时钟锁定', value: '是', unit: '' },
2026-02-02 16:06:28 +08:00
// { name: 'GPU温度', value: '正常', unit: '' },
{ name: 'CPU温度', value: '', unit: '℃' },
{ name: '射频温度', value: '', unit: '℃' },
{ name: '天线温度', value: '', unit: '℃' },
{ name: '硬盘温度', value: '', unit: '℃' },
{ name: 'FPGA温度', value: '', unit: '℃' },
{ name: '硬盘容量', value: '', unit: '%' },
{ name: '内存容量', value: '', unit: 'MB' },
2026-01-25 16:02:00 +08:00
],
gps: [
2026-02-02 16:06:28 +08:00
// { name: '定位状态', value: '正常', unit: '' },
// { name: '定向状态', value: '正常', unit: '' },
2026-01-25 16:02:00 +08:00
{ name: 'rtk状态', value: '无效', unit: '' },
2026-02-02 16:06:28 +08:00
{ name: '卫星个数', value: '', unit: '' },
2026-01-25 16:02:00 +08:00
{ name: '惯导状态', value: '位置+速度+航向', unit: '' },
{ name: '年月日', value: moment().format('YYYY-MM-DD'), unit: '' },
2026-02-02 16:06:28 +08:00
{ name: '经度', value: '', unit: '°' },
{ name: '维度', value: '', unit: '°' },
{ name: '高度', value: '', unit: 'm' },
2026-01-25 16:02:00 +08:00
],
imu: [
2026-02-02 16:06:28 +08:00
{ name: '配置状态', value: '', unit: '' },
{ name: '天线方位角', value: '', unit: '°' },
{ name: '天线俯仰角', value: '', unit: '°' },
{ name: '东向速度', value: '', unit: 'm/s' },
{ name: '北向速度', value: '', unit: 'm/s' },
{ name: '天向速度', value: '', unit: 'm/s' },
{ name: '俯仰角', value: '', unit: '°' },
{ name: '翻转角', value: '', unit: '°' },
{ name: '偏航角', value: '', unit: '°' },
2026-01-25 16:02:00 +08:00
],
dev2: {
isWork: true,
isLock: true,
cpuTemperature: 40,
spTemperature: 40,
txTemperature: 40,
ypTemperature: 40,
fpgaTemperature: 40,
storage: 80,
memory: 80,
}
},
chart: {
data: [
{
type: 'line',
name: 'channel1False',
symbol: 'none',
style: {
color: '#fff',
},
lineStyle: { color: '#fff', },
data: []
},
{
type: 'line',
name: 'channel1Real',
symbol: 'none',
style: {
color: '#fff',
},
lineStyle: { color: '#1721c5', },
data: []
},
{
type: 'line',
name: 'channel2False',
symbol: 'none',
style: {
color: '#fff',
},
lineStyle: { color: '#32a592', },
data: []
},
{
type: 'line',
name: 'channel2Real',
symbol: 'none',
style: {
color: '#fff',
},
lineStyle: { color: '#d93d9d', },
data: []
}
],
tooltip: { show: false },
legend: [{ show: false }],
title: [{ show: false }],
grid: [{ left: 40, top: 40, right: 40, bottom: 20, borderWidth: 0 }],
xAxis: [
{
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true
},
splitLine: {
show: false
},
}
],
yAxis: [
{
type: 'value',
// max: 1,
// min: -1,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true
},
splitLine: {
show: false
},
}
]
},
backImage: [
{
time: moment().subtract(40, 'minutes').format('YYYY-MM-DD HH:mm:ss'),
url: require('@/assets/img/test.png'),
uavName: '无人机1',
id: 1
},
{
time: moment().subtract(10, 'minutes').format('YYYY-MM-DD HH:mm:ss'),
url: require('@/assets/img/test.png'),
uavName: '无人机1',
id: 2
}
]
},
isSending: false,
rightShow: true,
uploadPictureInfo: {
visible: false,
},
taskLineDetail: {
visible: false,
title: '航线详情',
data: []
},
emptyImg: require('@/assets/img/common/empty.svg')
}
},
computed: {
...mapGetters([
'currentTime',
'iconMode',
'showSatelliteLabel',
'shouldAnimate',
'multiplier',
'showTrack',
'showFrontier',
'showDayNight',
'showLonLatGrid',
'viewMode',
'showRoadNet',
'isFullscreen',
'iconMode',
'showGlobalAtmosphere',
'duringPlay',
'theme',
'showCloud',
'mapType',
'userId',
'imuStatus',
'enableStatus',
'successStatus',
'sarWorkStatus',
'taskFlightMode',
'detectType',
'jobStatus',
'menusChose'
2026-01-25 16:02:00 +08:00
]),
isIconModeLarge() {
return this.iconMode === ICON_MODE.LARGE
}
},
watch: {
visible: {
handler: function (nv) {
if (nv) {
this.visibleLocale = nv
}
},
immediate: true,
},
visibleLocale(nv) {
if (!nv) {
this.$emit('update:visible', false)
}
},
sceneComplete: {
handler: function (nv) {
if (nv && this.visibleLocale) {
}
},
immediate: true,
},
'detailInfo.visible': {
handler: function (nv) {
if (!nv) {
if (this.detailInfo.pictureList.length > 0) {
let jobId = this.detailInfo.pictureList[0].jobId
let uavId = this.detailInfo.pictureList[0].uavId
if (taskUavCollection[jobId]) {
let find = taskUavCollection[jobId].find(item => item.uavId + '' === uavId + '')
if (find) {
find.toggleAllLoaderVisible(true)
}
}
}
historyPictureList.forEach(item => {
item.forEach(child => {
viewer.entities.remove(child)
})
})
historyPictureList = []
}
}
},
'detailUav.visible': {
handler: function (nv) {
this.$emit('sar-change', nv)
},
immediate: true,
2026-01-25 16:02:00 +08:00
}
},
created() {
this.getWeather()
this.getResourceData()
},
mounted() {
// this.$refs.tools.handleMapChange('sat')
// this.createBroadcastChannel()
// TODO 部署打开
// window.open(window.config.homeUrl + 'task', '_blank')
// window.open(window.config.homeUrl + 'monitor', '_blank')
// TODO
// this.resourceClick(this.resourceList.data[0])
this.handleSceneComplete()
this.getTaskList()
// this.startTest()
},
beforeDestroy() {
this.SET_SPLIT_VISIBLE(false)
this.removePictureHandle()
// 移除任务区域
for (let key in taskPlanAreaCollection) {
if (taskPlanAreaCollection[key]) {
taskPlanAreaCollection[key].forEach(item => {
viewer.entities.remove(item)
})
}
}
for (let key in taskUavCollection) {
if (taskUavCollection[key]) {
taskUavCollection[key].forEach(item => {
item.destroy()
})
}
}
for (let key in sceneEntity) {
if (sceneEntity[key]) {
viewer.entities.remove(sceneEntity[key])
}
}
taskUavCollection = {}
// if (lodLayer) {
// lodLayer.removeAll()
// viewer.entities.removeAll()
// }
if (handler) {
handler.removeInputAction(DT.Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
viewer.entities.removeAll()
2026-01-25 16:02:00 +08:00
// if (broadcastChannel) {
// this.closeBroadcastChannel()
// }
linePicture = null
currentPicture = null
renderTaskInfo = null
pictureHandler = null
historyPictureList = null
taskPlanAreaCollection = {}
radarSceneEntity = {}
sceneEntity = {}
taskListResource = []
if (stompClientInstance) {
disconnectWebSocket(stompClientInstance)
socketInstance = null
stompClientInstance = null
}
2026-01-25 16:02:00 +08:00
},
methods: {
...mapMutations('scene-control', [
'SET_SWITCH',
'SET_ANIMATE',
'SET_MULTIPLIER',
'SET_TRACK',
'SET_FRONTIER',
'SET_DAY_NIGHT',
'SET_LON_LAT_GRID',
'SET_VIEW_MODE',
'SET_FULL_SCREEN',
'SET_ROAD_NET',
'SET_INIT_STATE',
'SET_GLOBAL_ATMOSPHERE_SHOW',
'SET_SATELLITE_LABEL',
'SET_INTER_VISIBLE',
'SET_VIEWABLE_VISIBLE',
'SET_CLOUD',
'SET_MAP_TYPE',
'SET_SPLIT_VISIBLE',
]),
...mapMutations('app', ['SET_THEME']),
dealStatusColor(name) {
if (name === '执行中') {
return '#6ae965'
} else if (name === '已完成') {
return '#336dff'
}
},
2026-01-28 14:32:29 +08:00
// startTest() {
// let testHeight = 1000
// window.detectType = {
// 1: '车'
// }
// let task = [
// {
// id: 1,
// name: '测试任务',
// status: 1,
// statusName: '执行中',
// check: true,
// beginTime: moment().format('YYYY-MM-DD HH:mm:ss'),
// pointList: [
// [
// {
// longitude: 115.915457,
// latitude: 40.359459,
// },
// {
// longitude: 115.915457,
// latitude: 40.358999,
// },
// {
// longitude: 115.915874,
// latitude: 40.358999,
// },
// {
// longitude: 115.915874,
// latitude: 40.359459,
// }
// ],
// [
// {
// longitude: 115.915457,
// latitude: 40.355459
// },
// ]
// ],
// uavList: [
// {
// jobId: 1,
// uavId: 2,
// uavName: '无人机1',
// airlineList: [
// {
// startLon: 115.917609,
// startLat: 40.359843,
// startHeight: testHeight,
// endLon: 115.917609,
// endLat: 40.357843,
// endHeight: testHeight,
// id: 1
// },
// {
// startLon: 115.919609,
// startLat: 40.359843,
// startHeight: testHeight,
// endLon: 115.919609,
// endLat: 40.357843,
// endHeight: testHeight,
// id: 2
// }
// ],
// trailList: [
// {
// longitude: 115.917609,
// latitude: 40.359843,
// height: testHeight
// },
// {
// longitude: 115.918609,
// latitude: 40.359843,
// height: testHeight
// },
// {
// longitude: 115.919609,
// latitude: 40.357843,
// height: testHeight
// }
// ],
// startLon: 115.917609,
// startLat: 40.359843,
// startHeight: testHeight,
// payloadList: [
// {
// payloadId: 1,
// payloadName: 'sar',
// imageList: [
// {
// left1Lon: 115.917609,
// left1Lat: 40.359843,
// left2Lon: 115.917609,
// left2Lat: 40.358843,
// right2Lon: 115.918609,
// right2Lat: 40.358843,
// right1Lon: 115.918609,
// right1Lat: 40.359843,
// fileId: 1,
// id: 1,
// relativePath: '1.png',
// itemList: [
// {
// id: 2,
// left1Lon: 115.917609,
// left1Lat: 40.359843,
// left2Lon: 115.917609,
// left2Lat: 40.358843,
// right2Lon: 115.918609,
// right2Lat: 40.358843,
// right1Lon: 115.918609,
// right1Lat: 40.359843,
// type: 1,
// },
// {
// id: 4,
// left1Lon: 115.916609,
// left1Lat: 40.359143,
// left2Lon: 115.916609,
// left2Lat: 40.358943,
// right2Lon: 115.918509,
// right2Lat: 40.358943,
// right1Lon: 115.918509,
// right1Lat: 40.359143,
// type: 1,
// }
// ]
// },
// {
// left1Lon: 115.919609,
// left1Lat: 40.359843,
// left2Lon: 115.919609,
// left2Lat: 40.358843,
// right2Lon: 115.920609,
// right2Lat: 40.358843,
// right1Lon: 115.920609,
// right1Lat: 40.359843,
// fileId: 2,
// relativePath: '1.png',
// itemList: [
// {
// id: 5,
// left1Lon: 115.919609,
// left1Lat: 40.359843,
// left2Lon: 115.919609,
// left2Lat: 40.358843,
// right2Lon: 115.920609,
// right2Lat: 40.358843,
// right1Lon: 115.920609,
// right1Lat: 40.359843,
// type: 1,
// },
// {
// id: 6,
// left1Lon: 115.918609,
// left1Lat: 40.359143,
// left2Lon: 115.918609,
// left2Lat: 40.358943,
// right2Lon: 115.920509,
// right2Lat: 40.358943,
// right1Lon: 115.920509,
// right1Lat: 40.359143,
// type: 1,
// }
// ]
// }
// ],
// }
// ]
// }
// ]
// },
// {
// id: 2,
// name: '测试任务2',
// status: 2,
// check: false,
// statusName: '已完成',
// beginTime: moment().format('YYYY-MM-DD HH:mm:ss'),
// pointList: [
// [
// {
// longitude: 115.905457,
// latitude: 40.359459
// },
// {
// longitude: 115.905457,
// latitude: 40.358999
// },
// {
// longitude: 115.905874,
// latitude: 40.358999
// },
// {
// longitude: 115.905874,
// latitude: 40.359459
// }
// ],
// [
// {
// longitude: 115.905457,
// latitude: 40.355459
// },
// ]
// ],
// uavList: [
// {
// jobId: 2,
// uavId: 3,
2026-01-25 16:02:00 +08:00
2026-01-28 14:32:29 +08:00
// uavName: '无人机1',
// airlineList: [
// {
// startLon: 115.907609,
// startLat: 40.359843,
// startHeight: testHeight,
// endLon: 115.917609,
// endLat: 40.357843,
// endHeight: testHeight,
// id: 1
// },
// {
// startLon: 115.909609,
// startLat: 40.359843,
// startHeight: testHeight,
// endLon: 115.919609,
// endLat: 40.357843,
// endHeight: testHeight,
// id: 2
// }
// ],
// trailList: [
// {
// longitude: 115.907609,
// latitude: 40.359843,
// height: testHeight
// },
// {
// longitude: 115.906609,
// latitude: 40.359843,
// height: testHeight
// },
// {
// longitude: 115.905609,
// latitude: 40.357843,
// height: testHeight
// }
// ],
// startLon: 115.907609,
// startLat: 40.359843,
// startHeight: testHeight,
// payloadList: [
// {
// payloadId: 1,
// payloadName: 'sar',
// imageList: [
// {
// left1Lon: 115.907609,
// left1Lat: 40.359843,
// left2Lon: 115.907609,
// left2Lat: 40.358843,
// right2Lon: 115.908609,
// right2Lat: 40.358843,
// right1Lon: 115.908609,
// right1Lat: 40.359843,
// fileId: 1,
// relativePath: '1.png',
// itemList: [
// {
// id: 1,
// left1Lon: 115.917609,
// left1Lat: 40.359843,
// left2Lon: 115.917609,
// left2Lat: 40.358843,
// right2Lon: 115.918609,
// right2Lat: 40.358843,
// right1Lon: 115.918609,
// right1Lat: 40.359843,
// type: 1,
// },
// {
// id: 2,
// left1Lon: 115.916609,
// left1Lat: 40.359143,
// left2Lon: 115.916609,
// left2Lat: 40.358943,
// right2Lon: 115.918509,
// right2Lat: 40.358943,
// right1Lon: 115.918509,
// right1Lat: 40.359143,
// type: 1,
// }
// ]
// },
// {
// left1Lon: 115.909609,
// left1Lat: 40.359843,
// left2Lon: 115.909609,
// left2Lat: 40.358843,
// right2Lon: 115.910609,
// right2Lat: 40.358843,
// right1Lon: 115.910609,
// right1Lat: 40.359843,
// fileId: 2,
// relativePath: '1.png',
// itemList: [
// {
// id: 1,
// left1Lon: 115.909609,
// left1Lat: 40.359843,
// left2Lon: 115.909609,
// left2Lat: 40.358843,
// right2Lon: 115.910609,
// right2Lat: 40.358843,
// right1Lon: 115.910609,
// right1Lat: 40.359843,
// type: 1,
// },
// {
// id: 2,
// left1Lon: 115.908609,
// left1Lat: 40.359143,
// left2Lon: 115.908609,
// left2Lat: 40.358943,
// right2Lon: 115.910509,
// right2Lat: 40.358943,
// right1Lon: 115.910509,
// right1Lat: 40.359143,
// type: 1,
// }
// ]
// }
// ],
// }
// ]
// }
// ]
// }
// ]
// this.taskList.data = task
// task.forEach(item => {
// // 测试
// if (item.status === 1) {
// this.addUavToScene(item)
// this.addTaskPlanArea(item.pointList, item.id)
// }
// })
2026-01-25 16:02:00 +08:00
2026-01-28 14:32:29 +08:00
// let initPosition = [115.919609, 40.357843, testHeight]
// // 测试推送
// setInterval(() => {
// initPosition[0] += 0.001
// initPosition[1] += 0.001
// let body = [{
// jobId: 1,
// uavId: 2,
// longitude: initPosition[0],
// latitude: initPosition[1],
// height: initPosition[2],
// payloadList: [
// {
// longitude: initPosition[0],
// latitude: initPosition[1],
// altitude: initPosition[2],
// }
// ]
// }]
// this.handleWebsocketStatus({ body: JSON.stringify(body) })
2026-01-25 16:02:00 +08:00
2026-01-28 14:32:29 +08:00
// }, 4000)
2026-01-25 16:02:00 +08:00
2026-01-28 14:32:29 +08:00
// let initPic = {
// left1Lon: 115.917609,
// left1Lat: 40.359843,
// left2Lon: 115.917609,
// left2Lat: 40.358843,
// right2Lon: 115.918609,
// right2Lat: 40.358843,
// right1Lon: 115.918609,
// right1Lat: 40.359843,
// fileId: 4,
// id: 1,
// jobId: 1,
// payloadId: 1,
// uavId: 2,
// relativePath: '1.png',
// itemList: [
// {
// id: 9,
// left1Lon: 115.917609,
// left1Lat: 40.359843,
// left2Lon: 115.917609,
// left2Lat: 40.358843,
// right2Lon: 115.918609,
// right2Lat: 40.358843,
// right1Lon: 115.918609,
// right1Lat: 40.359843,
// type: 1,
// },
// ]
// }
// setInterval(() => {
// initPic.left1Lon += 0.001
// initPic.left1Lat += 0.001
// initPic.left2Lon += 0.001
// initPic.left2Lat += 0.001
// initPic.right2Lon += 0.001
// initPic.right2Lat += 0.001
// initPic.right1Lon += 0.001
// initPic.right1Lat += 0.001
// initPic.fileId += 1
// initPic.itemList.forEach(item => {
// item.left1Lon += 0.001
// item.left1Lat += 0.001
// item.left2Lon += 0.001
// item.left2Lat += 0.001
// item.right2Lon += 0.001
// item.right2Lat += 0.001
// item.right1Lon += 0.001
// item.right1Lat += 0.001
// item.id += 1
// })
// this.handleWebsocketImage({ body: JSON.stringify(initPic) })
// }, 6000)
// },
2026-01-25 16:02:00 +08:00
// 工具栏操作
toggleTools(tool) {
tool.active = !tool.active
switch (tool.type) {
case 'entityName':
this.handleGlobeLabelVisible(tool.active)
break
case 'ability':
this.abilityShow = tool.active
break
}
},
/**
* 菜单点击事件
* @author wangxueshen
* @date 2022-04-29
* @param {any} menu
* @param {any} active
* @returns {any}
*/
menuClick(menu, active) {
const blackList = ['setting', 'timeline']
if (blackList.includes(menu.type)) return
switch (menu.type) {
case 'situation': // 遥感卫星能力展示
this.menus.scenePlay.active = false
break
case 'scenePlay':
this.menus.situation.active = false
break
}
},
handleSceneComplete() {
let that = this
this.$nextTick(() => {
// this.addHandler()
if (this.rightShow) {
//this.createRadar()
}
// this.testLine()
// 移动相机
// viewer.cesiumViewer.scene.camera.moveBackward(10000000)
// 加载湘江流域3Dtiles场景
// loadXJLYSceneasync(DT)
// this.addPictureHandle()
viewer.cesiumViewer.scene.camera.changed.addEventListener(function (ev) {
that.refreshRadar()
})
})
// this.startWebSocket()
this.createWebsocket()
2026-01-25 16:02:00 +08:00
},
toggleRightShow() {
this.rightShow = !this.rightShow
if (this.rightShow) {
this.$nextTick(() => {
this.createRadar()
})
} else {
this.detailInfo.visible = false
this.detailUav.visible = false
}
},
getTaskList() {
getExecJobs({ type: 2, orders: [{ column: 'begin_time', asc: false }] }).then(res => {
2026-01-25 16:02:00 +08:00
if (res.data.code === 200) {
console.log('任务列表', res.data.data)
let data = res.data.data
let list = []
2026-01-25 16:02:00 +08:00
data.forEach(item => {
2026-01-28 14:32:29 +08:00
// item.check = item.status === 1 || item.status === 3
item.check = false
2026-01-25 16:02:00 +08:00
item.statusName = this.jobStatus[item.status + '']
// TODO 临时设置
item.uavList.forEach(child => {
if (!child.trailList) {
child.trailList = []
}
child.jobName = item.name
})
let uav = undefined
let sar = undefined
if (item.uavList.length) {
uav = item.uavList[0].uavName
if (item.uavList[0].payloadList.length) {
sar = item.uavList[0].payloadList[0].payloadName
}
}
2026-01-25 16:02:00 +08:00
list.push({
id: item.id,
beginTime: item.beginTime,
check: item.check,
endTime: item.endTime,
mode: item.mode,
name: item.name,
status: item.status,
statusName: item.statusName,
uav,
sar
2026-01-25 16:02:00 +08:00
})
// TODO
// item.pointList = [item.pointList]
if (item.status === 1 || item.status === 3) {
// this.addJobLine(item, false)
2026-01-28 14:32:29 +08:00
// this.addUavToScene(item)
// this.addTaskPlanArea(item.pointList, item.id, item.name)
2026-01-25 16:02:00 +08:00
}
// 测试
// this.addUavToScene(item)
})
if (data.length) {
this.detailUav.chart.data[0].data = []
this.detailUav.chart.data[1].data = []
this.detailUav.chart.data[2].data = []
this.detailUav.chart.data[3].data = []
this.detailUav.id = data.length ? data[0].id : 1
this.detailUav.visible = data.length ? true : false
}
2026-01-25 16:02:00 +08:00
taskListResource = data
this.taskList.data = list
if (this.taskList.data.length) {
this.taskList.data[0].check = true
if (this.menusChose === '1') {
this.addUavToScene(data[0])
this.addTaskPlanArea(data[0].pointList, data[0].id, data[0].name)
}
}
2026-01-25 16:02:00 +08:00
} else {
this.$message.error(res.data.message)
}
})
},
addTaskPlanArea(data, taskId, taskName) {
taskPlanAreaCollection[taskId] = []
let allPositions = []
let centerLon = 0
let centerLat = 0
data.forEach((item, index) => {
if (item.length > 1) {
let positions = []
item.forEach(child => {
positions.push(DT.Cesium.Cartesian3.fromDegrees(child.longitude, child.latitude))
})
positions.push(DT.Cesium.Cartesian3.fromDegrees(item[0].longitude, item[0].latitude))
allPositions = allPositions.concat(positions)
let entity = viewer.entities.add({
position: positions[0],
label: {
text: `${taskName}任务-规划区域${index + 1}`,
disableDepthTestDistance: 10000,
font: '14px sans-serif',
fillColor: DT.Cesium.Color.RED,
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
verticalOrigin: DT.Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new DT.Cesium.Cartesian2(0, -10),
scaleByDistance: new DT.Cesium.NearFarScalar(0, 1, 1, 0.8),
distanceDisplayCondition: new DT.Cesium.DistanceDisplayCondition(0, 10000),
showBackground: true,
backgroundColor: DT.Cesium.Color.fromCssColorString('rgba(255,255,255,0.6)')
},
polyline: {
positions: positions,
width: 2,
arcType: DT.Cesium.ArcType.NONE,
material: DT.Cesium.Color.RED,
depthFailMaterial: DT.Cesium.Color.RED,
disableDepthTestDistance: 10000,
zIndex: -1
}
})
taskPlanAreaCollection[taskId].push(entity)
} else if (item.length === 1) {
let position = DT.Cesium.Cartesian3.fromDegrees(item[0].longitude, item[0].latitude)
allPositions.push(position)
let entity = viewer.entities.add({
position,
label: {
text: `${taskName}任务-规划区域${index + 1}`,
disableDepthTestDistance: 10000,
font: '14px sans-serif',
fillColor: DT.Cesium.Color.RED,
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
pixelOffset: new DT.Cesium.Cartesian2(10, 0),
showBackground: true,
backgroundColor: DT.Cesium.Color.fromCssColorString('rgba(255,255,255,0.6)')
},
point: {
pixelSize: 4,
color: DT.Cesium.Color.RED,
disableDepthTestDistance: 10000
}
})
taskPlanAreaCollection[taskId].push(entity)
}
})
if (allPositions.length > 0) {
let cat = DT.Cesium.Cartographic.fromCartesian(allPositions[0])
allPositions.push(DT.Cesium.Cartesian3.fromRadians(cat.longitude, cat.latitude, 2000))
// let rotation = DT.Cesium.Matrix3.fromRotationZ(Math.PI / 2)
// let matrix = new DT.Cesium.Matrix4()
// DT.Cesium.Matrix4.fromRotationTranslation(rotation, DT.Cesium.Cartesian3.ZERO, matrix)
viewer.cesiumViewer.camera.flyToBoundingSphere(DT.Cesium.BoundingSphere.fromPoints(allPositions), {
duration: 0.1,
offset: new DT.Cesium.HeadingPitchRange(0, -Math.PI / 2, 0),
// endTransform:matrix,
})
// console.log('相机', viewer.cesiumViewer.camera)
}
},
addUavToScene(info) {
let arr = []
info.uavList.forEach(item => {
let uav = new UavTarget(viewer, item)
arr.push(uav)
})
taskUavCollection[info.id] = arr
console.log('taskUavCollection添加完毕', taskUavCollection)
this.refreshRadar()
},
/**
* 更新雷达图上的实体位置
* @param name
* @param id
* @param position
*/
updateRadarSceneEntityPosition(name, id, position, connected) {
if (connected) {
if (radarSceneEntity[id]) {
radarSceneEntity[id].position = position.clone()
} else {
radarSceneEntity[id] = radarViewer.entities.add({
id: 'uav-' + id,
position: position.clone(),
label: {
text: name,
font: '14px sans-serif',
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
outlineColor: DT.Cesium.Color.BLACK,
outlineWidth: 2,
pixelOffset: new DT.Cesium.Cartesian2(5, -4),
disableDepthTestDistance: 10000
},
billboard: {
image: process.env.BASE_URL + 'static/img/icon_wrj.png',
disableDepthTestDistance: 10000
}
})
}
} else {
if (radarSceneEntity[id]) {
radarViewer.entities.remove(radarSceneEntity[id])
radarSceneEntity[id] = null
}
}
},
/**
* 更新雷达图上的实体位置
* @param name
* @param id
* @param position
*/
updateSceneEntityPosition(name, id, position, connected) {
if (connected) {
if (sceneEntity[id]) {
sceneEntity[id].position = position.clone()
} else {
sceneEntity[id] = viewer.entities.add({
id: 'radar2-' + id,
position: position.clone(),
label: {
text: name + '0000',
font: '14px sans-serif',
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
outlineColor: DT.Cesium.Color.BLACK,
outlineWidth: 2,
pixelOffset: new DT.Cesium.Cartesian2(5, -4),
disableDepthTestDistance: 10000
},
billboard: {
image: process.env.BASE_URL + 'static/img/icon_wrj.png',
disableDepthTestDistance: 10000
}
})
}
} else {
if (sceneEntity[id]) {
viewer.entities.remove(sceneEntity[id])
sceneEntity[id] = null
}
}
},
removeTaskTarget(taskId) {
if (taskPlanAreaCollection[taskId]) {
taskPlanAreaCollection[taskId].forEach(item => {
viewer.entities.remove(item)
})
taskPlanAreaCollection[taskId] = null
}
if (taskUavCollection[taskId]) {
taskUavCollection[taskId].forEach(item => {
item.destroy()
})
taskUavCollection[taskId] = null
}
},
addJobLine(info, isFinish) {
console.log('任务信息', info)
let load = renderTaskInfo[`${info.id}-${info.uavList[0].uavId}`]
if (load) {
return
}
let routes = []
let startHeight = 0
let endHeight = 0
info.uavList[0].airlineList.forEach((item, index) => {
if (index === 0) {
startHeight = item.flightStartHeight
}
if (index === info.uavList[0].airlineList.length - 1) {
endHeight = item.flightEndHeight
}
routes.push([item.flightStartLon, item.flightStartLat, item.flightStartHeight])
routes.push([item.flightEndLon, item.flightEndLat, item.flightEndHeight])
})
routes.unshift([info.uavList[0].startLon, info.uavList[0].startLat, startHeight])
routes.push([info.uavList[0].endLon, info.uavList[0].endLat, endHeight])
let positions = []
let minLon, maxLon, minLat, maxLat
routes.forEach((item, index) => {
if (index === 0) {
minLon = item[0]
maxLon = item[0]
minLat = item[1]
maxLat = item[1]
} else {
minLon = Math.min(minLon, item[0])
maxLon = Math.max(maxLon, item[0])
minLat = Math.min(minLat, item[1])
maxLat = Math.max(maxLat, item[1])
}
positions.push(DT.Cesium.Cartesian3.fromDegrees(item[0], item[1], item[2]))
})
let currentIndex = 0
let currentPosition = positions[0].clone()
if (isFinish) {
currentIndex = positions.length - 1
currentPosition = positions[currentIndex].clone()
}
let pathEntity = new DT.DirectionPath({
id: `${info.id}-${info.uavList[0].uavId}~baseline`,
positions: positions,
dataFit: false,
currentPosition: currentPosition,
currentIndex: currentIndex,
autoStep: false,
equalsEpsilon: 0.01,
stepDistance: 30,
addMark: !isFinish,
leadLineOption: {
width: 4,
dashLength: 20,
color: DT.Cesium.Color.fromCssColorString('#15cfcd'),
image: process.env.BASE_URL + 'static/img/dash.png'
},
passLineOption: {
width: 4,
color: DT.Cesium.Color.fromCssColorString('#15cfcd'),
},
labelConfig: {
font: '21pt Lucida Console',
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
outlineColor: DT.Cesium.Color.BLACK,
outlineWidth: 2,
pixelOffset: new DT.Cesium.Cartesian2(5, -4),
scale: 0.5,
show: true,
style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
text: info.uavList[0].uavName,
verticalOrigin: DT.Cesium.VerticalOrigin.CENTER,
disableDepthTestDistance: 10000
},
billboardConfig: {
image: process.env.BASE_URL + 'static/img/icon_wrj.png',
disableDepthTestDistance: 10000
// enableRotation: true
},
enableRepeatAdjust: false,
})
let pathEntity2 = new DT.DirectionPath({
id: `${info.id}-${info.uavList[0].uavId}~baseline`,
positions: positions,
dataFit: false,
currentPosition: currentPosition,
currentIndex: currentIndex,
autoStep: false,
equalsEpsilon: 0.01,
stepDistance: 30,
addMark: !isFinish,
leadLineOption: {
width: 4,
dashLength: 20,
color: DT.Cesium.Color.fromCssColorString('#15cfcd'),
image: process.env.BASE_URL + 'static/img/dash.png'
},
passLineOption: {
width: 4,
color: DT.Cesium.Color.fromCssColorString('#15cfcd'),
},
labelConfig: {
font: '21pt Lucida Console',
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
outlineColor: DT.Cesium.Color.BLACK,
outlineWidth: 2,
pixelOffset: new DT.Cesium.Cartesian2(5, -4),
scale: 0.5,
show: true,
style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
text: info.uavList[0].uavName,
verticalOrigin: DT.Cesium.VerticalOrigin.CENTER,
disableDepthTestDistance: 10000
},
billboardConfig: {
image: process.env.BASE_URL + 'static/img/icon_wrj.png',
disableDepthTestDistance: 10000
// enableRotation: true
},
enableRepeatAdjust: false,
})
console.log('调用添加方法了吗')
lodLayer.add(pathEntity)
radarLayer.add(pathEntity2)
// 添加图片
renderTaskInfo[`${info.id}-${info.uavList[0].uavId}`] = {
entity: pathEntity,
entity2: pathEntity2,
picture: {}
}
info.uavList.forEach(uav => {
uav.payloadList.forEach(payload => {
payload.imageList.forEach(image => {
this.addMarkPicture2(image)
})
})
})
// 适当扩大视角范围
let lonDiff = (maxLon - minLon) / 2
let latDiff = (maxLat - minLat) / 2
minLon -= lonDiff
maxLon += lonDiff
minLat -= latDiff
maxLat += latDiff
let boundingPosition = [
DT.Cesium.Cartesian3.fromDegrees(minLon, minLat),
DT.Cesium.Cartesian3.fromDegrees(minLon, maxLat),
DT.Cesium.Cartesian3.fromDegrees(maxLon, minLat),
DT.Cesium.Cartesian3.fromDegrees(maxLon, maxLat),
]
// console.log('最小最大', minLon, maxLon, minLat, maxLat)
viewer.cesiumViewer.camera.flyToBoundingSphere(DT.Cesium.BoundingSphere.fromPoints(boundingPosition), { duration: 0.1 })
},
removeJobLine(jobId, uavId) {
let load = renderTaskInfo[`${jobId}-${uavId}`]
if (load) {
if (load.entity) {
lodLayer.remove(load.entity)
radarLayer.remove(load.entity2)
}
if (load.picture) {
for (let key in load.picture) {
if (load.picture[key].pictureEntity) {
viewer.entities.remove(load.picture[key].pictureEntity)
}
if (load.picture[key].markArr) {
load.picture[key].markArr.forEach(item => {
viewer.entities.remove(item)
})
}
}
}
}
renderTaskInfo[`${jobId}-${uavId}`] = null
},
showUpload() {
this.uploadPictureInfo.visible = true
},
makeTaskUavFly(info, index) {
this.$confirm('确定执行吗', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(res => {
flyTaskUavCommand({ id: info.id }).then(res => {
if (res.data.code === 200) {
info.status = 1
info.check = false
info.statusName = this.jobStatus[info.status + '']
this.toggleTaskSceneShow(info, index)
this.taskList.data.forEach((child, childIndex) => {
if (child.check && child.status === 2) {
this.toggleTaskSceneShow(child, childIndex)
}
})
this.$message.success('起飞成功')
} else {
this.$message.error(res.data.message)
}
})
})
},
toggleTaskSceneShow(info, index) {
// console.log('切换的info', info)
// console.log('无人机详情面板', this.detailInfo)
if (info.check) {
if (this.detailInfo.visible) {
let isDetail = false
taskListResource[index].uavList.forEach(uav => {
uav.payloadList.forEach(payload => {
if (payload.payloadId === this.detailInfo.baseInfo.id) {
isDetail = true
}
})
})
if (isDetail) {
this.detailInfo.visible = false
this.detailUav.visible = false
}
}
info.check = false;
taskListResource[index].check = false
// if (currentPicture && currentPicture.jobId === info.id + '') {
// currentPicture = null
// }
this.removeTaskTarget(info.id);
} else {
this.addUavToScene(taskListResource[index])
this.addTaskPlanArea(taskListResource[index].pointList, info.id, info.name)
info.check = true
}
// console.log('变换后的数据', this.taskList.data)
},
stopTask(info, index) {
this.$confirm('确定结束任务吗', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(res => {
stopTaskFly({ id: info.id }).then(res => {
if (res.data.code === 200) {
// info.status = 2
this.getTaskList()
2026-01-25 16:02:00 +08:00
this.$message.success('任务已结束!')
this.removeTaskTarget(info.id)
2026-01-25 16:02:00 +08:00
} else {
this.$message.error(res.data.message)
}
})
})
},
/**
* 重新执行
* @param info
*/
reRunTask(info) {
if (info.status !== 2) return
this.$confirm('确定重新执行吗', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(res => {
reRunTask({ id: info.id }).then(res => {
if (res.data.code === 200) {
console.log('重新运行结果', res)
this.$message.success('任务重新执行成功')
let data = res.data.data
data.check = data.status === 1
data.statusName = this.jobStatus[data.status + '']
data.uavList.forEach(child => {
if (!child.trailList) {
child.trailList = []
}
child.jobName = data.name
})
this.taskList.data.unshift({
id: data.id,
beginTime: data.beginTime,
check: data.check,
endTime: data.endTime,
mode: data.mode,
name: data.name,
status: data.status,
statusName: data.statusName,
})
taskListResource.unshift(data)
// this.addUavToScene(data)
// this.addTaskPlanArea(data.pointList, data.id, data.name)
} else {
this.$message.error(res.data.message)
}
})
})
},
getWeather() {
getWeatherInfo().then(res => {
if (res.data.code === 200) {
let data = res.data.data
this.weatherInfo2.wendu = data.wendu
this.weatherInfo2.shidu = data.shidu
this.weatherInfo2.quality = data.quality
this.weatherInfo2.pm25 = data.pm25
this.weatherInfo2.pm10 = data.pm10
let list = data.forecast.slice(0, 5)
let chart = []
list.forEach((item, index) => {
let low = item.low.split(' ')[1]
let high = item.high.split(' ')[1]
item.temperatureRange = [low, high]
// chart.push([item.week, parseFloat(high)])
chart.push([index, parseFloat(high)])
})
this.weatherInfo2.weekData = list
this.weatherInfo2.chart.data[0].data = chart
console.log('数据', this.weatherInfo2.chart.data)
if (this.$refs.chart) {
this.$refs.chart.updateData(this.weatherInfo2.chart.data)
}
} else {
this.$message.error(res.data.message)
}
})
},
/**
* @description 添加地面站点击事件
* @author wzw
* @date 2022年3月30日
*/
addHandler() {
let that = this
handler = new DT.Cesium.ScreenSpaceEventHandler(
viewer.cesiumViewer.scene.canvas
)
handler.setInputAction(event => {
let evt = viewer.cesiumViewer.scene.pick(event.position)
// 卫星和地面站的点击事件
if (evt && evt.primitive && evt.primitive.entityId) {
let id = evt.primitive.entityId
// 点击的是地面站
if (id.includes('station')) {
// 激活实体详情面板
if (!this.visible.entityDetail) {
this.visible.entityDetail = true
}
let data = undefined
for (let i = 0; i < this.sceneInfo.stationList.length; i++) {
if ('station-' + this.sceneInfo.stationList[i].staId === id) {
data = JSON.parse(JSON.stringify(this.sceneInfo.stationList[i]))
break
}
}
}
// 点击的是卫星
if (id.includes('satellite')) {
// 激活实体详情面板
if (!this.visible.entityDetail) {
this.visible.entityDetail = true
}
let satId = id.split('-')[1]
let satelliteInfo = this.sceneInfo.satelliteList.find(
item => item.satId === +satId
)
let info = JSON.parse(JSON.stringify(satelliteInfo))
this.showSatelliteInfo(info)
}
}
// 覆盖范围属于那个卫星的提示框
if (evt && evt.id && evt.id.id.includes('area')) {
let position1
let feature = viewer.cesiumViewer.scene.pick(event.position)
if (feature) {
position1 = viewer.cesiumViewer.scene.pickPosition(event.position)
} else {
let ray = viewer.cesiumViewer.scene.camera.getPickRay(
event.position
)
position1 = viewer.cesiumViewer.scene.globe.pick(
ray,
viewer.cesiumViewer.scene
)
}
let cartographic = viewer.cesiumViewer.scene.globe.ellipsoid.cartesianToCartographic(
position1
)
let id = evt.id.id
let isExist = that.eventTips.findIndex(item => {
return item.id === id
})
if (isExist !== -1) {
that.eventTips[isExist].showAnimation = false
that.eventTips[isExist].position = [
DT.Cesium.Math.toDegrees(cartographic.longitude),
DT.Cesium.Math.toDegrees(cartographic.latitude),
500
]
Reflect.deleteProperty(that.eventTips[isExist], 'disappearTime')
Reflect.deleteProperty(that.eventTips[isExist], 'animationTime')
} else {
that.eventTips.push({
id,
name: evt.id.name,
show: true,
showAnimation: false,
position: [
DT.Cesium.Math.toDegrees(cartographic.longitude),
DT.Cesium.Math.toDegrees(cartographic.latitude),
500
]
})
}
} else {
that.eventTips.forEach(item => {
item.animationTime = moment().format('YYYY-MM-DD HH:mm:ss')
item.disappearTime = moment()
.add(2, 's')
.format('YYYY-MM-DD HH:mm:ss')
})
}
}, DT.Cesium.ScreenSpaceEventType.LEFT_CLICK)
},
/*********************业务代码**********************/
//#region 测试代码
testLine() {
let lineData = [
{
lon: 116.538201,
lat: 40.141529
},
{
lon: 116.538216,
lat: 40.143778
},
{
lon: 116.546478,
lat: 40.143742
},
{
lon: 116.546193,
lat: 40.141043
},
{
lon: 116.546097,
lat: 40.137875
},
{
lon: 116.537818,
lat: 40.138056
},
{
lon: 116.537725,
lat: 40.134348
}
]
let cartesian3Positions = []
let minLon, maxLon, minLat, maxLat
lineData.forEach((item, index) => {
if (index === 0) {
minLon = item.lon
maxLon = item.lon
minLat = item.lat
maxLat = item.lat
} else {
minLon = Math.min(minLon, item.lon)
maxLon = Math.max(maxLon, item.lon)
minLat = Math.min(minLat, item.lat)
maxLat = Math.max(maxLat, item.lat)
}
cartesian3Positions.push(DT.Cesium.Cartesian3.fromDegrees(item.lon, item.lat))
})
let pathEntity = new DT.DirectionPath({
positions: cartesian3Positions,
dataFit: false,
// currentPosition:current,
autoStep: false,
equalsEpsilon: 0.01,
stepDistance: 30,
leadLineOption: {
width: 4,
dashLength: 20,
color: DT.Cesium.Color.fromCssColorString('#15cfcd'),
image: process.env.BASE_URL + 'static/img/dash.png'
},
passLineOption: {
width: 4,
color: DT.Cesium.Color.fromCssColorString('#15cfcd'),
},
labelConfig: {
font: '21pt Lucida Console',
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
outlineColor: DT.Cesium.Color.BLACK,
outlineWidth: 2,
pixelOffset: new DT.Cesium.Cartesian2(5, -4),
scale: 0.5,
show: true,
style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
text: '无人机',
verticalOrigin: DT.Cesium.VerticalOrigin.CENTER,
disableDepthTestDistance: 10000
},
billboardConfig: {
image: process.env.BASE_URL + 'static/img/icon_wrj.png',
disableDepthTestDistance: 10000
// enableRotation: true
},
enableRepeatAdjust: false,
})
lodLayer.add(pathEntity)
// 适当扩大视角范围
let lonDiff = (maxLon - minLon) / 2
let latDiff = (maxLat - minLat) / 2
minLon -= lonDiff
maxLon += lonDiff
minLat -= latDiff
maxLat += latDiff
let boundingPosition = [
DT.Cesium.Cartesian3.fromDegrees(minLon, minLat),
DT.Cesium.Cartesian3.fromDegrees(minLon, maxLat),
DT.Cesium.Cartesian3.fromDegrees(maxLon, minLat),
DT.Cesium.Cartesian3.fromDegrees(maxLon, maxLat),
]
// console.log('最小最大', minLon, maxLon, minLat, maxLat)
viewer.cesiumViewer.camera.flyToBoundingSphere(DT.Cesium.BoundingSphere.fromPoints(boundingPosition), { duration: 0.1 })
this.addMarkPicture()
},
addMarkPicture() {
// const layer=viewer.imageryLayers.addImageryProvider( new Cesium.SingleTileImageryProvider({
// url: "图片url",
// }));
let cby_bg_data = [
116.540165, 40.138266,
116.540190, 40.137485,
116.541745, 40.137458,
116.541714, 40.138282,
];
let entity = viewer.entities.add({
id: 'picture-1',
name: '背景',
polygon: {
// hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data),
hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(cby_bg_data),
perPositionHeight: true,
material: new DT.Cesium.ImageMaterialProperty({
image: process.env.BASE_URL + 'static/img/pic.png',
}),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5),
outline: true,
outlineColor: DT.Cesium.Color.WHITE,
outlineWidth: 2, //很多电脑当宽度>1时没用
}
});
let markPosition = DT.Cesium.Cartesian3.fromDegrees(116.540265, 40.138066, 1)
let markArr = [
116.540265, 40.138066, 1,
116.540265, 40.137866, 1,
116.540845, 40.137866, 1,
116.540845, 40.138066, 1,
116.540265, 40.138066, 1,
]
let markLine = viewer.entities.add({
id: 'picture-text-1',
show: false,
position: markPosition,
label: {
text: '标注点',
font: '12px sans-serif',
fillColor: DT.Cesium.Color.RED,
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
verticalOrigin: DT.Cesium.VerticalOrigin.TOP,
disableDepthTestDistance: 10000,
showBackground: false,
backgroundColor: DT.Cesium.Color.BLACK,
style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
},
polyline: {
positions: DT.Cesium.Cartesian3.fromDegreesArrayHeights(markArr),
// positions: DT.Cesium.Cartesian3.fromDegreesArray(markArr),
width: 1,
material: DT.Cesium.Color.RED,
depthFailMaterial: DT.Cesium.Color.RED,
zIndex: 3,
}
})
linePicture['picture-1'] = {
picEntity: entity,
mark: markLine
}
let handler = new DT.Cesium.ScreenSpaceEventHandler(
viewer.cesiumViewer.scene.canvas
)
handler.setInputAction(({ position }) => {
let pick = viewer.cesiumViewer.scene.pick(position)
if (currentPicture) {
currentPicture.picEntity.polygon.outlineColor = DT.Cesium.Color.WHITE
currentPicture.picEntity.show = true
currentPicture.mark.show = false
}
currentPicture = null
if (pick && pick.id && pick.id.id && pick.id.id.indexOf('picture') !== -1) {
currentPicture = linePicture['picture-1']
currentPicture.picEntity.polygon.outlineColor = DT.Cesium.Color.RED
currentPicture.mark.show = true
} else {
}
}, DT.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
handler.setInputAction(({ position }) => {
console.log('右键', currentPicture)
if (currentPicture) {
let show = !currentPicture.picEntity.show
console.log('触发显隐', show)
currentPicture.picEntity.show = show
currentPicture.mark.show = show
console.log('触发显隐', currentPicture.picEntity, currentPicture.mark)
}
}, DT.Cesium.ScreenSpaceEventType.RIGHT_CLICK)
},
//#endregion
getResourceData() {
getRadarListData().then(res => {
if (res.data.code === 200) {
let data = res.data.data
data.forEach((item, index) => {
item.battery = 80
item.flyHeight = '-'
item.lon = '-'
item.lat = '-'
})
this.resourceList.data = data
console.log('雷达列表', res.data.data)
} else {
this.$message.error(res.data.message)
}
})
// getUavListData().then(res => {
// if (res.data.code === 200) {
// let data = res.data.data
// data.forEach((item, index) => {
// item.battery = 80
// item.flyHeight = '-'
// item.lon = '-'
// item.lat = '-'
// })
// this.resourceList.data = data
// console.log('无人机列表', res.data.data)
// } else {
// this.$message.error(res.data.message)
// }
// })
},
/**
* 获取装备信号强度css类
* @param strength
* @returns {string}
*/
getDeviceSignalClass(strength) {
if (strength < 20) {
return 'device-status__disconnect'
} else if (strength < 60) {
return 'device-status__weak'
} else {
return 'device-status__normal'
}
},
/**
* 车航程css
* @param value
* @returns {string}
*/
getCarDistanceClass(value) {
if (value < 50) {
return 'battery-danger'
} else if (value < 200) {
return 'battery-weak'
} else {
return 'battery-normal'
}
},
/**
* 获取装备电池css类
* @param strength
* @returns {string}
*/
getDeviceBatteryClass(strength) {
if (strength < 20) {
return 'battery-danger'
} else if (strength < 60) {
return 'battery-weak'
} else {
return 'battery-normal'
}
},
flyToTarget(lon, lat, alt = 1000) {
let longitude = parseFloat(lon)
let latitude = parseFloat(lat)
let height = parseFloat(alt)
if (typeof longitude === 'number' && typeof latitude === 'number') {
let position = DT.Cesium.Cartesian3.fromDegrees(longitude, latitude, height * 3)
viewer.cesiumViewer.scene.camera.flyTo({
destination: position,
duration: 1
})
}
},
/**
* 切换资源列表分组
* @param tab
*/
resourceTabClick(tab) {
if (this.resourceList.activeTabId !== tab.id) {
this.resourceList.activeTabId = tab.id
}
},
//#region 无人机详情代码
resourceClick(info) {
console.log('点击的信息', info)
this.detailInfo.visible = false
// TODO 测试
// this.resourceClickTest(info)
getTaskListData({ payloadId: info.id }).then(res => {
if (res.data.code === 200) {
console.log('任务详情----------------', res.data.data)
let tasklist = res.data.data
this.detailInfo.jobId = undefined
if (tasklist.length > 0) {
// 有正在执行的任务
// 判断当前任务是否显示
let findIndex = -1
taskListResource.forEach((item, index) => {
if (item.status === 1) {
item.uavList.forEach(uav => {
let find = uav.payloadList.find(payload => payload.payloadId === info.id)
if (find) {
findIndex = index
}
})
}
})
if (findIndex > -1) {
this.detailInfo.jobId = this.taskList.data[findIndex].id
if (!this.taskList.data[findIndex].check) {
// 打开任务信息
this.toggleTaskSceneShow(this.taskList.data[findIndex], findIndex)
}
}
} else {
// 没有正在执行的任务
}
this.detailInfo.baseInfo = JSON.parse(JSON.stringify(info))
this.detailInfo.taskList = tasklist
let pictureList = []
tasklist.forEach((item, index) => {
item.uavList.forEach(child => {
child.payloadList.forEach(loader => {
if (loader.payloadId === info.id) {
loader.imageList.forEach(pic => {
pictureList.push(Object.assign({
jobId: item.id,
url: window.config.imagePath + pic.relativePath,
taskName: item.name,
uavName: child.uavName,
uavId: child.uavId,
payloadId: loader.payloadId,
loaderName: loader.payloadName,
status: item.status + '',
}, pic))
})
}
})
})
})
this.detailInfo.pictureList = pictureList
this.detailInfo.visible = true
} else {
this.$message.error(res.data.message)
}
})
},
showUavMore() {
console.log('_++++++++++++++++++', this.detailInfo.baseInfo)
this.detailUav.id = this.detailInfo.baseInfo.id
this.detailUav.basicsInfo.name = this.detailInfo.baseInfo.name
this.detailUav.baseInfo.longitude = this.detailInfo.baseInfo.lon
this.detailUav.baseInfo.latitude = this.detailInfo.baseInfo.lat
this.detailUav.baseInfo.flyHeight = this.detailInfo.baseInfo.flyHeight
this.detailUav.visible = true
},
lockHistoryPicture(data) {
console.log('跟踪图片', data)
if (data.status === '2') {
let id = `${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}`
let target = historyPictureList[id]
if (!target) {
let cby_bg_data = [
data.left1Lon, data.left1Lat,
data.left2Lon, data.left2Lat,
data.right2Lon, data.right2Lat,
data.right1Lon, data.right1Lat,
]
let entity = viewer.entities.add({
id: `${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}-history`,
name: '背景',
polygon: {
// hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data),
hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(cby_bg_data),
perPositionHeight: true,
material: new DT.Cesium.ImageMaterialProperty({
image: window.config.imagePath + data.relativePath,
// image: process.env.BASE_URL + 'static/img/ttt.tif',
// image: process.env.BASE_URL + 'static/img/pic.png',
}),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5),
outline: true,
outlineColor: DT.Cesium.Color.WHITE,
outlineWidth: 2, //很多电脑当宽度>1时没用
}
})
let markLineArr = [entity]
data.itemList.forEach((item) => {
let markId = `${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}-${item.id}~mark`
let markPosition = DT.Cesium.Cartesian3.fromDegrees(item.left1Lon, item.left1Lat, 1)
let markArr = [
item.left1Lon, item.left1Lat, 1,
item.left2Lon, item.left2Lat, 1,
item.right2Lon, item.right2Lat, 1,
item.right1Lon, item.right1Lat, 1,
item.left1Lon, item.left1Lat, 1,
]
let markLine = viewer.entities.add({
id: markId,
show: true,
position: markPosition,
label: {
text: this.detectType[item.type],
font: '12px sans-serif',
fillColor: DT.Cesium.Color.RED,
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
verticalOrigin: DT.Cesium.VerticalOrigin.TOP,
disableDepthTestDistance: 10000,
showBackground: false,
backgroundColor: DT.Cesium.Color.BLACK,
style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
},
polyline: {
positions: DT.Cesium.Cartesian3.fromDegreesArrayHeights(markArr),
// positions: DT.Cesium.Cartesian3.fromDegreesArray(markArr),
width: 1,
material: DT.Cesium.Color.RED,
depthFailMaterial: DT.Cesium.Color.RED,
zIndex: 3,
}
})
markLineArr.push(markLine)
console.log('推进去的', markLine)
})
historyPictureList[`${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}`] = markLineArr
console.log('最后生成的1', `${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}`)
console.log('最后生成的2', historyPictureList)
} else {
target.forEach(item => {
item.show = true
})
}
}
let boundingPosition = [
DT.Cesium.Cartesian3.fromDegrees(data.left1Lon, data.left1Lat),
DT.Cesium.Cartesian3.fromDegrees(data.left2Lon, data.left2Lat),
DT.Cesium.Cartesian3.fromDegrees(data.right2Lon, data.right2Lat),
DT.Cesium.Cartesian3.fromDegrees(data.right1Lon, data.right1Lat),
]
// console.log('最小最大', minLon, maxLon, minLat, maxLat)
viewer.cesiumViewer.camera.flyToBoundingSphere(DT.Cesium.BoundingSphere.fromPoints(boundingPosition), { duration: 0.1 })
},
toggleHistoryPicture(data) {
console.log('切换整体信息', data)
if (taskUavCollection[data.jobId]) {
let find = taskUavCollection[data.jobId].find(item => item.uavId + '' === data.uavId + '')
console.log('找到了无人机对象吗吗', find)
if (find) {
find.toggleLoaderPictureVisible(data.payloadId, data.fileId)
}
}
// if (data.status + '' === '2') {
// let id = `${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}`
// let target = historyPictureList[id]
// if (!target) {
// let cby_bg_data=[
// data.left1Lon, data.left1Lat,
// data.left2Lon, data.left2Lat,
// data.right2Lon, data.right2Lat,
// data.right1Lon, data.right1Lat,
// ]
// let entity = viewer.entities.add({
// id: `${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}-history`,
// name: '背景',
// polygon: {
// // hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data),
// hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(cby_bg_data),
// perPositionHeight: true,
// material: new DT.Cesium.ImageMaterialProperty({
// image: window.config.imagePath + data.relativePath,
// // image: process.env.BASE_URL + 'static/img/ttt.tif',
// // image: process.env.BASE_URL + 'static/img/pic.png',
// }),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5),
// outline: true,
// outlineColor: DT.Cesium.Color.WHITE,
// outlineWidth: 2, //很多电脑当宽度>1时没用
// }
// })
// let markLineArr = [entity]
// data.itemList.forEach((item) => {
// let markId = `${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}-${item.id}~mark`
// let markPosition = DT.Cesium.Cartesian3.fromDegrees(item.left1Lon, item.left1Lat, 1)
// let markArr = [
// item.left1Lon, item.left1Lat, 1,
// item.left2Lon, item.left2Lat, 1,
// item.right2Lon, item.right2Lat, 1,
// item.right1Lon, item.right1Lat, 1,
// item.left1Lon, item.left1Lat, 1,
// ]
// let markLine = viewer.entities.add({
// id: markId,
// show: true,
// position: markPosition,
// label: {
// text: this.detectType[item.type],
// font: '12px sans-serif',
// fillColor: DT.Cesium.Color.RED,
// horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
// verticalOrigin: DT.Cesium.VerticalOrigin.TOP,
// disableDepthTestDistance: 10000,
// showBackground: false,
// backgroundColor: DT.Cesium.Color.BLACK,
// style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
// },
// polyline: {
// positions: DT.Cesium.Cartesian3.fromDegreesArrayHeights(markArr),
// // positions: DT.Cesium.Cartesian3.fromDegreesArray(markArr),
// width: 1,
// material: DT.Cesium.Color.RED,
// depthFailMaterial: DT.Cesium.Color.RED,
// zIndex: 3,
// }
// })
// markLineArr.push(markLine)
// console.log('推进去的', markLine)
// })
// historyPictureList[`${data.jobId}-${data.uavId}-${data.payloadId}-${data.fileId}`] = markLineArr
// // console.log('最后生成的', target.picture[`${data.fileId}-picture`])
// } else {
// let show = !target[0].show
// target.forEach(item => {
// item.show = show
// })
// }
// } else if (data.status + '' === '1') {
// console.log('切换有任务对象吗', taskUavCollection[data.jobId])
// if (taskUavCollection[data.jobId]) {
// let find = taskUavCollection[data.jobId].find(item => item.uavId + '' === data.uavId + '')
// console.log('找到了无人机对象吗吗', find)
// if (find) {
// find.toggleLoaderPictureVisible(data.payloadId,data.fileId)
// }
// }
// // let findId = `${data.jobId}-${data.uavId}`
// // let find = renderTaskInfo[findId]
// // let findShow = !find.picture[`${data.fileId}-picture`].pictureEntity.show
// // find.picture[`${data.fileId}-picture`].pictureEntity.show = findShow
// // find.picture[`${data.fileId}-picture`].markArr.forEach((item) => {
// // item.show = findShow
// // })
// }
},
//#endregion
//#region tab通信相关代码
createBroadcastChannel() {
this.closeBroadcastChannel()
broadcastChannel = new BroadcastChannel('channel')
broadcastChannel.onmessage = this.handleChannelMessage;
broadcastChannelInterval = setInterval(() => {
this.sendMessageByBroadcastChannel({ type: 'heartbeat', form: 'home' })
}, 5000)
},
handleChannelMessage(data) {
console.log('home收到消息', data)
switch (data.data.type) {
case 'heartbeat':
let fromTab = data.data.from
let find = this.activeTabs.find(item => item.name === fromTab)
if (find) {
find.lastTime = new Date().getTime()
} else {
this.activeTabs.push({
name: fromTab,
lastTime: new Date().getTime(),
})
}
break
case 'viewMode':
console.log('收到viewmode消息')
if (this.viewMode !== data.data.value) {
this.SET_VIEW_MODE(data.data.value)
}
break
case 'showDayNight':
console.log('收到showDayNight消息')
if (this.showDayNight !== data.data.value) {
// this.SET_DAY_NIGHT(data.data.value)
}
break
case 'showFrontier':
console.log('收到showFrontier消息')
if (this.showFrontier !== data.data.value) {
this.SET_FRONTIER(data.data.value)
}
break
case 'showLonLatGrid':
console.log('收到showLonLatGrid消息')
if (this.showLonLatGrid !== data.data.value) {
this.SET_LON_LAT_GRID(data.data.value)
}
break
case 'isFullscreen':
console.log('收到isFullscreen消息')
if (this.isFullscreen !== data.data.value) {
this.SET_FULL_SCREEN(data.data.value)
}
break
case 'mapType':
console.log('收到mapType消息')
if (this.mapType !== data.data.value) {
this.SET_MAP_TYPE(data.data.value)
}
break
}
},
sendMessageByBroadcastChannel(msg) {
if (broadcastChannel) {
broadcastChannel.postMessage(msg)
}
},
closeBroadcastChannel() {
if (broadcastChannel) {
broadcastChannel.close()
broadcastChannel = null
}
if (broadcastChannelInterval) {
window.clearInterval(broadcastChannelInterval)
broadcastChannelInterval = null
}
},
//#endregion
//#region 雷达
createRadar() {
let position = viewer.cesiumViewer.scene.camera.position.clone()
let position2 = DT.Cesium.Cartographic.fromCartesian(position)
let calHeight = Math.min(position2.height * 2, 1000000)
calHeight = Math.max(calHeight, 10000)
let radarPosition = DT.Cesium.Cartesian3.fromRadians(position2.longitude, position2.latitude, calHeight)
let tilingScheme, satMap, vectorMap, roadMap, arcgisMap
tilingScheme = new DT.Cesium.WebMercatorTilingScheme()
// 开发环境或者内网生产环境,访问内网地图服务
/******************天地图************************/
let token = window.config.tdtToken
// 服务域名
let tdtUrl = 'https://t{s}.tianditu.gov.cn/';
// 服务负载子域
let subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
let tdtImgMap = new DT.Cesium.UrlTemplateImageryProvider({
url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
subdomains: subdomains,
tilingScheme: new DT.Cesium.WebMercatorTilingScheme(),
maximumLevel: 18
});
let tdtVecMap = new DT.Cesium.UrlTemplateImageryProvider({
url: tdtUrl + 'DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + token,
subdomains: subdomains,
tilingScheme: new DT.Cesium.WebMercatorTilingScheme(),
maximumLevel: 18
});
// 叠加国界服务
let tdtIboMap = new DT.Cesium.UrlTemplateImageryProvider({
url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,
subdomains: subdomains,
tilingScheme: new DT.Cesium.WebMercatorTilingScheme(),
maximumLevel: 10
});
// 影像注记
let tdtImageMarkMap = new DT.Cesium.UrlTemplateImageryProvider({
url: tdtUrl + 'DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' + token,
subdomains: subdomains,
tilingScheme: new DT.Cesium.WebMercatorTilingScheme(),
// maximumLevel : 10
});
// 叠加地形服务
let terrainUrls = new Array();
for (let i = 0; i < subdomains.length; i++) {
// let url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?T=elv_c&tk=' + token;
let url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?tk=' + token;
terrainUrls.push(url);
}
/**********************************************************/
/********************天地图另一种方式********************/
// 影像地图
let tdtImgMap2 = new DT.Cesium.WebMapTileServiceImageryProvider({
url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + token,
layer: 'tdtImgLayer',
style: 'default',
format: 'image/jpeg',
subdomains: subdomains,
tileMatrixSetID: 'GoogleMapsCompatible',
maximumLevel: 18
})
// 影像标记
let tdtImgMark2 = new DT.Cesium.WebMapTileServiceImageryProvider({
url: 'http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + token,
layer: 'tdtCiaLayer',
style: 'default',
format: 'image/jpeg',
tileMatrixSetID: 'GoogleMapsCompatible',
})
// 矢量地图
let tdtVecMap2 = new DT.Cesium.WebMapTileServiceImageryProvider({
url: 'http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + token,
layer: 'tdtVecLayer',
style: 'default',
format: 'image/jpeg',
tileMatrixSetID: 'GoogleMapsCompatible'
})
// 矢量标注
let tdtVecMark2 = new DT.Cesium.WebMapTileServiceImageryProvider({
url: 'http://t0.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + token,
layer: 'tdtCvaLayer',
style: 'default',
format: 'image/jpeg',
tileMatrixSetID: 'GoogleMapsCompatible',
})
/***************************************/
radarViewer = new DT.Viewer(this.$refs.radarCanvas, {
imageryProvider: tdtVecMap2, // tdtImgMap2
sceneMode: 2,
mapProjection: new DT.Cesium.WebMercatorProjection(),
mapMode2D: DT.Cesium.MapMode2D.INFINITE_SCROLL,
})
// 海图地图
let seaMap = new DT.Cesium.UrlTemplateImageryProvider({
url: process.env.BASE_URL + 'map/sea/{z}/{x}/{y}.png',
tilingScheme: tilingScheme,
minimumLevel: 2,
maximumLevel: 18
})
radarViewer.cesiumViewer.imageryLayers.addImageryProvider(seaMap, 1)
// viewer.cesiumViewer.imageryLayers.get(4).show = false
// radarViewer.cesiumViewer.imageryLayers.addImageryProvider(tdtImgMark2, 1)
// radarViewer.cesiumViewer.imageryLayers.addImageryProvider(tdtVecMap2, 2)
radarViewer.cesiumViewer.imageryLayers.addImageryProvider(tdtVecMark2, 1)
// radarViewer.cesiumViewer.imageryLayers.get(2).show = false
// radarViewer.cesiumViewer.imageryLayers.get(3).show = false
let vtxf_dpr = window.devicePixelRatio
while (vtxf_dpr >= 2.0) {
vtxf_dpr /= 2.0
}
radarViewer.cesiumViewer.resolutionScale = vtxf_dpr
radarLayer = new DT.LODSceneLayer()
radarViewer.addLayer(radarLayer)
// radarViewer.cesiumViewer.scene.screenSpaceCameraController.enableTranslate = false
// radarViewer.cesiumViewer.scene.screenSpaceCameraController.enableRotate = false
// radarViewer.cesiumViewer.scene.screenSpaceCameraController.enableZoom = false
// radarViewer.cesiumViewer.scene.screenSpaceCameraController.enableTilt = false
// radarViewer.cesiumViewer.scene.screenSpaceCameraController.tiltEventTypes = []
// 去掉版权
radarViewer.cesiumViewer._innerCreditContainer.style.display = 'none'
radarViewer.cesiumViewer.scene.camera.flyTo({
destination: radarPosition,
duration: 0
})
radarHandler = new DT.Cesium.ScreenSpaceEventHandler(
radarViewer.cesiumViewer.scene.canvas
)
this.$nextTick(() => {
this.refreshRadar()
})
// radarHandler.setInputAction(event => {
// let car = radarViewer.cesiumViewer.scene.globe.pick(radarViewer.cesiumViewer.scene.camera.getPickRay(event.position),radarViewer.cesiumViewer.scene);
// let updateCartographic = DT.Cesium.Cartographic.fromCartesian(car)
// let sourceCamera = DT.Cesium.Cartographic.fromCartesian(viewer.cesiumViewer.scene.camera.position.clone())
// viewer.cesiumViewer.scene.camera.flyTo({
// destination: DT.Cesium.Cartesian3.fromRadians(updateCartographic.longitude, updateCartographic.latitude, sourceCamera.height),
// duration: 1
// })
// }, DT.Cesium.ScreenSpaceEventType.LEFT_CLICK)
},
refreshRadar() {
if (!radarViewer) return
let position = viewer.cesiumViewer.scene.camera.position.clone()
// let rayCross = viewer.cesiumViewer.scene.camera.position.clone()
// let ray = new DT.Cesium.Ray(viewer.cesiumViewer.scene.camera.position, viewer.cesiumViewer.scene.camera.direction )
// if (ray) {
// let rayCrossTemp = viewer.cesiumViewer.scene.globe.pick(ray, viewer.cesiumViewer.scene)
// if (rayCrossTemp) {
// rayCross = rayCrossTemp
// console.log('焦点-----------------', rayCross)
// }
// }
let position2 = DT.Cesium.Cartographic.fromCartesian(position)
// let position3 = DT.Cesium.Cartographic.fromCartesian(rayCross)
let calHeight = Math.min(position2.height * 2, 10000000)
// let calHeight = position2.height * 2
calHeight = Math.max(calHeight, 1000)
let radarPosition = DT.Cesium.Cartesian3.fromRadians(position2.longitude, position2.latitude, calHeight)
radarViewer.cesiumViewer.scene.camera.flyTo({
destination: radarPosition,
duration: 1
})
},
dealMapChange(map) {
return
switch (map) {
case 'sat':
// viewer.cesiumViewer.camera.flyHome()
radarViewer.cesiumViewer.imageryLayers.get(0).show = true
radarViewer.cesiumViewer.imageryLayers.get(1).show = true
radarViewer.cesiumViewer.imageryLayers.get(2).show = false
radarViewer.cesiumViewer.imageryLayers.get(3).show = false
break
case 'vec':
radarViewer.cesiumViewer.imageryLayers.get(0).show = false
radarViewer.cesiumViewer.imageryLayers.get(1).show = false
radarViewer.cesiumViewer.imageryLayers.get(2).show = true
radarViewer.cesiumViewer.imageryLayers.get(3).show = true
break
}
},
//#endregion
//#region socket
createWebsocket() {
let options = {
url: window.config.socket + '/ws',
topic: [
{
name: '/topic/status',
callback: this.handleWebsocketStatus
},
{
name: '/topic/wave',
callback: this.handleWebsocketWave
},
{
name: '/topic/image',
callback: this.handleWebsocketImage
},
{
name: '/topic/jobStatus',
callback: this.handleWebsocketState
},
2026-02-03 16:17:32 +08:00
{
name: '/topic/gmti',
callback: this.handleWebsocketGmti
},
2026-01-25 16:02:00 +08:00
],
success: () => {
console.log('自身websocket链接成功2')
}
}
let { socket, stompClient } = connectWebSocket(options)
socketInstance = socket
stompClientInstance = stompClient
},
2026-02-03 16:17:32 +08:00
handleWebsocketGmti(info) {
console.log('Gmti信息', JSON.parse(info.body))
2026-02-03 16:17:32 +08:00
},
2026-01-25 16:02:00 +08:00
handleWebsocketStatus(info) {
2026-01-28 19:26:20 +08:00
console.log('SAR状态信息', info.body)
2026-01-25 16:02:00 +08:00
let data = JSON.parse(info.body)
// console.log('SAR状态信息',data)
data.forEach(item => {
// 更新场景无人机位置和轨迹
if (item.jobId && item.payloadList && item.payloadList[0].connected) {
// 有任务
// 更新任务路线
if (taskUavCollection[item.jobId]) {
let find = taskUavCollection[item.jobId].find(child => child.uavId + '' === item.uavId + '')
if (find) {
let position = DT.Cesium.Cartesian3.fromDegrees(item.payloadList[0].longitude, item.payloadList[0].latitude, item.payloadList[0].altitude)
find.updateCurrentPosition(position)
}
}
// 位置信息更新到列表
let findTask = taskListResource.find(item => item.jobId === item.jobId)
if (findTask) {
let uav = findTask.uavList.find(uav => uav.uavId === item.uavId)
uav.trailList.push({
lon: item.payloadList[0].longitude,
lat: item.payloadList[0].latitude,
height: item.payloadList[0].altitude
})
}
} else {
// 无任务
}
// 更新资源列表设备状态
item.payloadList.forEach(child => {
let find = this.resourceList.data.find(el => el.id === child.sarId)
if (find) {
let position = DT.Cesium.Cartesian3.fromDegrees(child.longitude, child.latitude, item.payloadList[0].altitude)
find.lon = child.longitude.toFixed(2)
find.lat = child.latitude.toFixed(2)
find.flyHeight = Math.round(child.altitude * 10) / 10
find.status = child.connected
if (find.status) {
this.updateRadarSceneEntityPosition(find.name, child.sarId, position, child.connected)
this.updateSceneEntityPosition(find.name, child.sarId, position, child.connected)
}
}
// 更新详情
if (find && find.status && this.detailInfo.visible && this.detailInfo.id === child.sarId) {
this.detailInfo.baseInfo.lon = child.longitude.toFixed(2)
this.detailInfo.baseInfo.lat = child.latitude.toFixed(2)
this.detailInfo.baseInfo.flyHeight = Math.round(child.altitude * 10) / 10
}
// 更新无人机详细数据
if (find && find.status && this.detailUav.visible && this.detailUav.id === child.sarId) {
this.updateUavInfo(child)
}
})
})
},
updateUavInfo(data) {
this.detailUav.baseInfo.flyHeight = Math.round(data.altitude * 10) / 10
this.detailUav.baseInfo.longitude = data.longitude.toFixed(3)
this.detailUav.baseInfo.latitude = data.latitude.toFixed(3)
this.detailUav.baseInfo.status = data.connected
this.detailUav.statusInfo.dev = [
2026-02-02 16:06:28 +08:00
// { name: '是否开机', value: this.sarWorkStatus[data.dIsBoot], unit: '' },
2026-01-25 16:02:00 +08:00
{ name: '时钟锁定', value: this.successStatus[data.clockLock], unit: '' },
2026-02-02 16:06:28 +08:00
// { name: 'GPU温度', value: '正常', unit: '' },
2026-01-25 16:02:00 +08:00
{ name: 'CPU温度', value: data.cpuC, unit: '℃' },
{ name: '射频温度', value: data.rfC, unit: '℃' },
{ name: '天线温度', value: data.antC, unit: '℃' },
{ name: '硬盘温度', value: data.diskC, unit: '℃' },
{ name: 'FPGA温度', value: data.fpgaC, unit: '℃' },
{ name: '硬盘容量', value: data.diskUtilization, unit: '%' },
{ name: '内存容量', value: data.memoryCapacity, unit: 'MB' },
]
this.detailUav.statusInfo.gps = [
2026-02-02 16:06:28 +08:00
// { name: '定位状态', value: '正常', unit: '' },
// { name: '定向状态', value: '正常', unit: '' },
2026-01-25 16:02:00 +08:00
{ name: 'rtk状态', value: data.rtkStatusLabel, unit: '' },
{ name: '卫星个数', value: data.satelliteNum, unit: '' },
{ name: '惯导状态', value: this.imuStatus[data.imuStatus], unit: '' },
{ name: '年月日', value: data.date, unit: '' },
{ name: '经度', value: data.longitude, unit: '°' },
{ name: '维度', value: data.latitude, unit: '°' },
{ name: '高度', value: data.altitude, unit: 'm' },
]
this.detailUav.statusInfo.imu = [
{ name: '配置状态', value: '正常', unit: '' },
{ name: '天线方位角', value: data.antennaAzimuth, unit: '°' },
{ name: '天线俯仰角', value: data.antennaPitch, unit: '°' },
{ name: '东向速度', value: data.eastVelocity, unit: 'm/s' },
{ name: '北向速度', value: data.northVelocity, unit: 'm/s' },
{ name: '天向速度', value: data.skyVelocity, unit: 'm/s' },
{ name: '俯仰角', value: data.anglePitch, unit: '°' },
{ name: '翻转角', value: data.angleRoll, unit: '°' },
{ name: '偏航角', value: data.angleYaw, unit: '°' },
]
// 更新场景中数据
// this.updateSceneUav(data)
},
updateSceneUav(data) {
let position = DT.Cesium.Cartesian3.fromDegrees(data.longitude, data.latitude, data.altitude)
let entity = viewer.entities.getById('uav-' + data.id)
if (entity) {
entity.position = position
} else {
entity = viewer.entities.add({
id: 'uav-' + data.id,
position: position,
label: {
text: '无人机' + data.id,
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
outlineColor: DT.Cesium.Color.BLACK,
outlineWidth: 2,
pixelOffset: new DT.Cesium.Cartesian2(5, -4),
disableDepthTestDistance: 10000
},
billboard: {
image: process.env.BASE_URL + 'static/img/icon_wrj.png',
disableDepthTestDistance: 10000
}
})
}
},
handleWebsocketWave(info) {
console.log('SAR波形', JSON.parse(info.body))
let data = JSON.parse(info.body)
2026-02-02 16:06:28 +08:00
console.log('id对比', this.detailUav.id, data.payloadId);
if (this.detailUav.visible && this.detailUav.id === data.jobId) {
2026-01-25 16:02:00 +08:00
let channel1False = []
let channel1Real = []
let channel2False = []
let channel2Real = []
data.channel1False.forEach((item, index) => {
channel1False.push([index, item / 32768])
})
data.channel1Real.forEach((item, index) => {
channel1Real.push([index, item / 32768])
})
data.channel2False.forEach((item, index) => {
channel2False.push([index, item / 32768])
})
data.channel2Real.forEach((item, index) => {
channel2Real.push([index, item / 32768])
})
this.detailUav.chart.data[0].data = channel1False
this.detailUav.chart.data[1].data = channel1Real
this.detailUav.chart.data[2].data = channel2False
this.detailUav.chart.data[3].data = channel2Real
2026-02-02 16:06:28 +08:00
console.log(this.detailUav.chart.data, 'ssssssssssssssss');
2026-01-25 16:02:00 +08:00
if (this.detailUav.activeNames.includes('4')) {
if (this.$refs.uavDetailChart) {
this.$refs.uavDetailChart.updateData(this.detailUav.chart.data)
}
}
}
},
handleWebsocketImage(info) {
// console.log('SAR图像', info.body)
let data = JSON.parse(info.body)
console.log('SAR图像2', data)
2026-02-03 16:17:32 +08:00
this.addMarkPicture2(data)
2026-01-25 16:02:00 +08:00
// console.log('灭有匹配到吗taskUavCollection', taskUavCollection, taskUavCollection[data.jobId])
if (taskUavCollection[data.jobId]) {
let find = taskUavCollection[data.jobId].find(item => item.uavId + '' === data.uavId + '')
// console.log('找到添加图片的对象', find)
if (find) {
find.appendLoaderPicture(data)
}
}
// 更新列表里的数据
let find = taskListResource.find(item => item.id === data.jobId)
if (find) {
let findUav = find.uavList.find(item => item.uavId === data.uavId)
// TODO 需要匹配载荷ID
if (findUav && findUav.payloadList && findUav.payloadList.length > 0) {
let findIndex = findUav.payloadList[0].imageList.findIndex(target => target.airlineId === data.airlineId)
if (findIndex > -1) {
findUav.payloadList[0].imageList.splice(findIndex, 1, data)
} else {
findUav.payloadList[0].imageList.unshift(data)
}
}
}
if (this.detailInfo.visible && this.detailInfo.baseInfo.id === data.payloadId) {
let findIndex = this.detailInfo.pictureList.findIndex(target => target.airlineId === data.airlineId)
let obj = Object.assign({
jobId: data.jobId,
url: window.config.imagePath + data.relativePath,
taskName: data.jobName,
uavName: data.uavName,
uavId: data.uavId,
payloadId: data.payloadId,
loaderName: data.payloadName,
airlineId: data.airlineId,
}, data)
if (findIndex > -1) {
this.detailInfo.pictureList.splice(findIndex, 1, obj)
} else {
this.detailInfo.pictureList.unshift(obj)
}
}
},
addMarkPicture2(data) {
// const layer=viewer.imageryLayers.addImageryProvider( new Cesium.SingleTileImageryProvider({
// url: "图片url",
// }));
// if (this.tempAdd) return
// this.tempAdd = true
let id = `${data.jobId}-${data.uavId}`
let target = renderTaskInfo[id]
if (target) {
let cby_bg_data = [
data.left1Lon, data.left1Lat,
data.left2Lon, data.left2Lat,
data.right2Lon, data.right2Lat,
data.right1Lon, data.right1Lat,
]
let entity = viewer.entities.add({
id: `${data.jobId}-${data.uavId}~${data.fileId}-picture`,
name: '背景',
polygon: {
// hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data),
hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(cby_bg_data),
perPositionHeight: true,
material: new DT.Cesium.ImageMaterialProperty({
image: window.config.imagePath + data.relativePath,
// image: process.env.BASE_URL + 'static/img/ttt.tif',
// image: process.env.BASE_URL + 'static/img/pic.png',
}),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5),
outline: true,
outlineColor: DT.Cesium.Color.WHITE,
outlineWidth: 2, //很多电脑当宽度>1时没用
}
})
let markLineArr = []
if (data.itemList) {
data.itemList.forEach((item) => {
let markId = `${data.jobId}-${data.uavId}-${data.fileId}-${item.id}~mark`
let markPosition = DT.Cesium.Cartesian3.fromDegrees(item.left1Lon, item.left1Lat, 1)
let markArr = [
item.left1Lon, item.left1Lat, 1,
item.left2Lon, item.left2Lat, 1,
item.right2Lon, item.right2Lat, 1,
item.right1Lon, item.right1Lat, 1,
item.left1Lon, item.left1Lat, 1,
]
let markLine = viewer.entities.add({
id: markId,
show: false,
position: markPosition,
label: {
text: this.detectType[item.type],
font: '12px sans-serif',
fillColor: DT.Cesium.Color.RED,
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
verticalOrigin: DT.Cesium.VerticalOrigin.TOP,
disableDepthTestDistance: 10000,
showBackground: false,
backgroundColor: DT.Cesium.Color.BLACK,
style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
},
polyline: {
positions: DT.Cesium.Cartesian3.fromDegreesArrayHeights(markArr),
// positions: DT.Cesium.Cartesian3.fromDegreesArray(markArr),
width: 1,
material: DT.Cesium.Color.RED,
depthFailMaterial: DT.Cesium.Color.RED,
zIndex: 3,
}
})
markLineArr.push(markLine)
})
}
target.picture[`${data.fileId}-picture`] = {
pictureEntity: entity,
markArr: markLineArr
}
}
},
addPictureHandle() {
console.log('双击事件执行了吗', new Date().getTime())
if (pictureHandler) {
this.removePictureHandle()
}
pictureHandler = new DT.Cesium.ScreenSpaceEventHandler(
viewer.cesiumViewer.scene.canvas
)
pictureHandler.setInputAction(({ position }) => {
let pick = viewer.cesiumViewer.scene.pick(position)
console.log('双击前有吗', currentPicture)
if (currentPicture) {
currentPicture.uav.toggleLoaderPictureActive(
currentPicture.payloadId,
currentPicture.filedId,
false
)
}
currentPicture = null
if (pick && pick.id && pick.id.id && pick.id.id.indexOf('picture') !== -1) {
let findIdArr = pick.id.id.split('-')[0].split('~')
if (taskUavCollection[findIdArr[0]]) {
let uav = taskUavCollection[findIdArr[0]].find(item => item.uavId + '' === findIdArr[1])
if (uav) {
currentPicture = {
uav: uav,
jobId: findIdArr[0],
uavId: findIdArr[1],
payloadId: findIdArr[2],
filedId: findIdArr[3],
}
currentPicture.uav.toggleLoaderPictureActive(
currentPicture.payloadId,
currentPicture.filedId,
true
)
}
}
} else {
}
}, DT.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
pictureHandler.setInputAction(({ position }) => {
console.log('右键', currentPicture)
if (currentPicture) {
currentPicture.uav.toggleLoaderPictureVisible(currentPicture.payloadId, currentPicture.filedId)
}
}, DT.Cesium.ScreenSpaceEventType.RIGHT_CLICK)
},
removePictureHandle() {
if (pictureHandler) {
pictureHandler.removeInputAction(DT.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
pictureHandler.removeInputAction(DT.Cesium.ScreenSpaceEventType.RIGHT_CLICK)
pictureHandler = null
}
},
handleWebsocketState(info) {
console.log('整体状态变更', JSON.parse(info.body))
let data = JSON.parse(info.body)
// TODO 待测试
// airlineId airlineStatus jobId jobStatus payloadStatus payloadId uavId
let findIndex = this.taskList.data.findIndex(item => item.id === data.jobId)
if (findIndex !== -1) {
// 从未执行到准备中
if (this.taskList.data[findIndex].status === 0 && data.jobStatus === 1) {
// this.taskList.data[findIndex].check = true
this.taskList.data[findIndex].statusName = this.jobStatus[data.jobStatus + '']
taskListResource[findIndex].statusName = this.jobStatus[data.jobStatus + '']
this.toggleTaskSceneShow(this.taskList.data[findIndex], findIndex)
}
// 从准备中到执行中
if (this.taskList.data[findIndex].status === 3 && data.jobStatus === 1) {
// this.taskList.data[findIndex].check = true
this.taskList.data[findIndex].statusName = this.jobStatus[data.jobStatus + '']
taskListResource[findIndex].statusName = this.jobStatus[data.jobStatus + '']
// this.toggleTaskSceneShow(this.taskList.data[findIndex], findIndex)
}
if (this.taskList.data[findIndex].status === 2 && data.jobStatus === 1) {
// this.taskList.data[findIndex].check = true
// this.taskList.data[findIndex].statusName = '执行中'
// taskListResource[findIndex].statusName = '执行中'
// this.toggleTaskSceneShow(this.taskList.data[findIndex], findIndex)
}
// 从执行中变为执行完毕
if (this.taskList.data[findIndex].status === 1 && data.jobStatus === 2) {
// 移除任务相关信息
// console.log('任务变更', this.jobStatus, this.jobStatus[data.jobStatus + ''])
// this.taskList.data[findIndex].statusName = this.jobStatus[data.jobStatus + '']
// taskListResource[findIndex].statusName = this.jobStatus[data.jobStatus + '']
taskListResource.splice(findIndex, 1)
this.getTaskList()
this.removeTaskTarget(data.jobId)
2026-01-25 16:02:00 +08:00
}
if (data.jobStatus === 1 && this.detailUav.id === data.jobId) {
2026-02-02 16:06:28 +08:00
this.updateUavInfo(data.sarStatus)
}
2026-01-25 16:02:00 +08:00
this.taskList.data[findIndex].status = data.jobStatus
taskListResource[findIndex].status = data.jobStatus
console.log('整体状态变更1', findIndex, this.taskList.data[findIndex])
}
},
handleWebsocket(res) {
let data = JSON.parse(res.body)
console.log('websocket数据66666', data)
this.updatePeople(data)
},
stopTempWebSocket() {
if (socketInstance) {
disconnectWebSocket(socketInstance)
socketInstance = null
stompClientInstance = null
}
},
updatePeople(data) {
let entity = lodLayer.getEntityById(data.userid)
let updatePosition = DT.Cesium.Cartesian3.fromDegrees(
data.lon,
data.lat,
Math.min(data.high, 1000)
)
if (entity) {
entity.position = updatePosition
} else {
entity = new DT.BillboardEntity({
id: data.userid,
position: updatePosition,
labelConfig: {
text: data.username,
font: '12px Microsoft YaHei',
verticalOrigin: DT.Cesium.VerticalOrigin.CENTER,
outlineColor: DT.Cesium.Color.BLACK,
outlineWidth: 2,
style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
pixelOffset: new DT.Cesium.Cartesian2(10, 0),
// distanceDisplayCondition: new DT.Cesium.DistanceDisplayCondition(
// 0,
// 10000000
// )
},
billboardConfig: {
image: process.env.BASE_URL + 'data/images/people.png',
disableDepthTestDistance: Number.POSITIVE_INFINITY,
width: 24,
height: 24
}
})
lodLayer.add(entity)
entityCollection.set(data.userid, entity)
}
},
//#endregion
// 打开状态和波形信息展示
openSarStatusDetail(data) {
this.detailUav.chart.data[0].data = []
this.detailUav.chart.data[1].data = []
this.detailUav.chart.data[2].data = []
this.detailUav.chart.data[3].data = []
this.detailUav.id = data.id
this.detailUav.visible = true
},
2026-01-25 16:02:00 +08:00
//#region
handleUavDetailCollapse(actives) {
console.log('展开的', actives)
if (actives.includes('4')) {
if (this.$refs.uavDetailChart) {
this.$nextTick(() => {
this.$refs.uavDetailChart.chartInstance.resize()
})
}
}
},
//#endregion
//#region 航线详情
openTaskLineDetail(info) {
this.taskLineDetail.visible = false
console.log(taskListResource, 555);
2026-01-25 16:02:00 +08:00
let find = taskListResource.find(item => item.id === info.id)
console.log('信息', find)
if (find && find.uavList) {
let line = []
find.uavList.forEach(item => {
if (item.airlineList) {
item.airlineList.forEach(airline => {
line.push({
startLon: airline.startLon,
startLat: airline.startLat,
startHeight: airline.startHeight,
startAlt: airline.startHeight + item.startAltitude,
endLon: airline.endLon,
endLat: airline.endLat,
endHeight: airline.endHeight,
endAlt: airline.endHeight + item.startAltitude,
})
})
}
})
this.taskLineDetail.title = find.name + '-航线详情'
this.taskLineDetail.data = line
this.taskLineDetail.visible = true
}
}
//#endregion
}
}