297 lines
8.3 KiB
Vue
297 lines
8.3 KiB
Vue
<template>
|
|
<Flex fd="co" class="page-scene">
|
|
<Flex ai="c" jc="sb" class="page-scene-header">
|
|
<span class="page-scene-title">场景编辑子系统</span>
|
|
<span class="page-scene-title">推演想定【{{ roomName }}-{{ scenarioName }}】</span>
|
|
<span class="page-scene-title">剩余 {{ roomInfo.remainTimeStr }}</span>
|
|
</Flex>
|
|
<Grid class="page-scene-main flex-1 oh" :columns="['320px', 1, '320px']" :rows="['30px', 1]" gap="0px">
|
|
<div class="tool-wrapper" style="grid-area: 1 / 1 / 2 / 4"></div>
|
|
<div
|
|
ref="scene-cesium-container"
|
|
class="scene-cesium-container"
|
|
id="scene-cesium-container"
|
|
style="grid-area: 2 / 1 / 3 / 4"
|
|
></div>
|
|
<div class="pr zi1" style="grid-area: 2 / 1 / 3 / 2">
|
|
<ModuleWrapper title="作战/保障力量" height="60%">
|
|
<div class="normal" style="padding: 5px; overflow-y: auto">
|
|
<a-tree
|
|
class="simulation-tree"
|
|
:treeData="zzbzllTreeData"
|
|
:selectedKeys.sync="zzbzll.selectedKeys"
|
|
:replaceFields="{ children: 'children', title: 'title', key: 'id' }"
|
|
@select="handleSelectZzbzll"
|
|
>
|
|
</a-tree>
|
|
</div>
|
|
</ModuleWrapper>
|
|
<ModuleWrapper title="日志" height="40%">
|
|
<div class="normal"></div>
|
|
</ModuleWrapper>
|
|
</div>
|
|
<Grid class="pr zi1" :rows="rightRows" gap="0px" style="grid-area: 2 / 3 / 3 / 4">
|
|
<ModuleWrapper title="兵力编组">
|
|
<template #extra>
|
|
<Zoom :max="rightViewer === 'blbz'" @zoom-max="rightViewer = 'blbz'" @zoom-min="rightViewer = ''" />
|
|
</template>
|
|
<div class="normal" style="padding: 5px; overflow-y: auto">
|
|
<a-tree
|
|
class="simulation-tree"
|
|
:treeData="showBlbzCheckedTreeData"
|
|
:selectable="false"
|
|
:replaceFields="{ children: 'children', title: 'title', key: 'id' }"
|
|
>
|
|
</a-tree>
|
|
</div>
|
|
</ModuleWrapper>
|
|
<ModuleWrapper title="基础属性">
|
|
<template #extra>
|
|
<Zoom :max="rightViewer === 'jcsx'" @zoom-max="rightViewer = 'jcsx'" @zoom-min="rightViewer = ''" />
|
|
</template>
|
|
<div class="normal" style="padding: 15px 0">
|
|
<Jcsx
|
|
ref="jcsx"
|
|
v-if="zzbzllSelectedFd"
|
|
:scenarioId="scenarioId"
|
|
:resourceId="zzbzllSelectedFd.id"
|
|
:resourceName="zzbzllSelectedFd.title"
|
|
:resourceType="zzbzllSelectedFd.resourceType"
|
|
:type="zzbzllSelectedFd.type"
|
|
:modelData="jcsxModelData"
|
|
:readonly="true"
|
|
/>
|
|
</div>
|
|
</ModuleWrapper>
|
|
<ModuleWrapper :title="xdrw.resourceTypeMapTitle[zzbzllSelectedFd?.resourceType] || '行动任务'">
|
|
<template #extra>
|
|
<Zoom :max="rightViewer === 'xdrw'" @zoom-max="rightViewer = 'xdrw'" @zoom-min="rightViewer = ''" />
|
|
</template>
|
|
<div class="normal" style="padding: 0">
|
|
<Zzxd
|
|
ref="xdrw"
|
|
v-if="zzbzllSelectedFd"
|
|
:scenarioId="scenarioId"
|
|
:resourceId="zzbzllSelectedFd.id"
|
|
:resourceType="zzbzllSelectedFd.resourceType"
|
|
:actionList="xdrwActionList"
|
|
:readonly="true"
|
|
/>
|
|
</div>
|
|
</ModuleWrapper>
|
|
</Grid>
|
|
</Grid>
|
|
</Flex>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAction } from '@/api/manage'
|
|
import Zoom from './components/Zoom.vue'
|
|
import Jcsx from './components/Jcsx.vue'
|
|
import Zzxd from './components/Zzxd.vue'
|
|
|
|
export default {
|
|
name: 'SubsystemScene',
|
|
components: {
|
|
Zoom,
|
|
Jcsx,
|
|
Zzxd,
|
|
},
|
|
data() {
|
|
return {
|
|
ws: null,
|
|
roomInfo: {
|
|
remainTimeStr: '',
|
|
remainTime: '',
|
|
duringTime: '',
|
|
roomData: [],
|
|
},
|
|
roomId: '',
|
|
roomName: '',
|
|
scenarioId: '',
|
|
scenarioName: '',
|
|
cesium: null,
|
|
zzbzll: {
|
|
selectedKeys: [],
|
|
},
|
|
blbz: {
|
|
treeData: [],
|
|
},
|
|
rightViewer: '',
|
|
xdrw: {
|
|
resourceTypeMapTitle: {
|
|
5: '作战行动',
|
|
6: '保障任务',
|
|
},
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
zzbzllTreeData() {
|
|
return []
|
|
},
|
|
zzbzllSelectedFd() {
|
|
if (this.zzbzll.selectedKeys.length === 0) {
|
|
return null
|
|
}
|
|
return null
|
|
},
|
|
rightRows() {
|
|
switch (this.rightViewer) {
|
|
case 'blbz':
|
|
return [8, 1, 1]
|
|
case 'jcsx':
|
|
return [1, 8, 1]
|
|
case 'xdrw':
|
|
return [1, 1, 8]
|
|
default:
|
|
return [4, 3, 3]
|
|
}
|
|
},
|
|
blbzShowKeys() {
|
|
return []
|
|
},
|
|
showBlbzCheckedTreeData() {
|
|
const target = []
|
|
this.getTree(target, this.blbz.treeData, this.blbzShowKeys)
|
|
return target
|
|
},
|
|
jcsxModelData() {
|
|
return {}
|
|
},
|
|
xdrwActionList() {
|
|
return []
|
|
},
|
|
},
|
|
created() {
|
|
this.roomId = this.$route.params.roomId
|
|
this.roomName = this.$route.params.roomName
|
|
this.scenarioId = this.$route.params.scenarioId
|
|
this.scenarioName = this.$route.params.scenarioName
|
|
this.getBlbzTreeData()
|
|
},
|
|
mounted() {
|
|
this.cesium = new window.MyCesium('scene-cesium-container')
|
|
this.initWebsocket()
|
|
window.addEventListener('beforeunload', (e) => {
|
|
this.closeWebsocket()
|
|
return true
|
|
})
|
|
},
|
|
methods: {
|
|
getTree(target, treeData, showKeys) {
|
|
treeData.forEach((item) => {
|
|
const newChildren = []
|
|
if (item.children && item.children.length > 0) {
|
|
this.getTree(newChildren, item.children, showKeys)
|
|
}
|
|
if (newChildren.length > 0 || showKeys.includes(item.key)) {
|
|
target.push({ ...item, children: newChildren })
|
|
}
|
|
})
|
|
},
|
|
|
|
initWebsocket() {
|
|
this.ws = new window.MyWebsocket(`/ws/${this.scenarioId}/${this.roomId}`, (error, response) => {
|
|
if (error) return this.$message.error(error.message)
|
|
switch (response.cmdType) {
|
|
case 'update_time':
|
|
this.roomInfo.remainTimeStr = response.data.update_time_str
|
|
this.roomInfo.remainTime = response.data.remain_time
|
|
this.roomInfo.duringTime = response.data.during_time
|
|
break
|
|
case 'path_init':
|
|
this.cesium.drawRouteByCoordinates(response.data.points)
|
|
break
|
|
case 'path_update':
|
|
this.cesium.movePlotByCoordinates(response.data.resourceId, response.data.points)
|
|
break
|
|
case 'scenarioInfo':
|
|
this.roomInfo.roomData = response.data
|
|
// this.initPlots()
|
|
break
|
|
default:
|
|
console.log(response.cmdType, JSON.parse(response.data))
|
|
break
|
|
}
|
|
})
|
|
this.ws.send({ cmdType: 'scenarioInfo' })
|
|
},
|
|
closeWebsocket() {
|
|
this.ws && this.ws.close()
|
|
this.ws = null
|
|
},
|
|
|
|
async getBlbzTreeData() {
|
|
try {
|
|
const res = await getAction('/tree/organization')
|
|
this.blbz.treeData = res.data
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
|
|
initPlot(plots) {
|
|
plots.forEach((item) => {
|
|
if (item.lng && item.lat) {
|
|
this.cesium.addPlotByLonLat(item.imgBase64, { lon: +item.lng, lat: +item.lat }, item.id)
|
|
}
|
|
})
|
|
},
|
|
|
|
handleSelectZzbzll(selectedKeys, { node }) {
|
|
this.cesium.setClientByCenter({ longitude: +node.dataRef.lng, latitude: +node.dataRef.lat })
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.page-scene {
|
|
height: 100%;
|
|
color: #ffffff;
|
|
.page-scene-header {
|
|
height: 50px;
|
|
background-color: #0a2a3d;
|
|
padding: 0 20px;
|
|
.page-scene-title {
|
|
color: #00d5fe;
|
|
font-size: 18px;
|
|
font-weight: bolder;
|
|
letter-spacing: 2px;
|
|
}
|
|
}
|
|
.page-scene-main {
|
|
background-color: #022234;
|
|
}
|
|
}
|
|
.scene-cesium-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
::v-deep {
|
|
.distance-legend {
|
|
left: 320px;
|
|
}
|
|
.compass {
|
|
right: 320px;
|
|
}
|
|
.navigation-controls {
|
|
right: 350px;
|
|
}
|
|
}
|
|
.simulation-tree::v-deep {
|
|
color: #a1c2d0;
|
|
li .ant-tree-node-content-wrapper {
|
|
color: #a1c2d0;
|
|
}
|
|
li .ant-tree-node-content-wrapper.ant-tree-node-selected {
|
|
background-color: #bae7ff44;
|
|
}
|
|
li .ant-tree-node-content-wrapper:hover {
|
|
background-color: #bae7ff22;
|
|
}
|
|
}
|
|
</style>
|