系统控制子模块选择想定，保障环境分页，仿真模型树形样式
This commit is contained in:
liaoboping
parent
4a6ca044ad
commit
dbea954613
|
|
@ -17,7 +17,7 @@
|
|||
</ModuleWrapper>
|
||||
<ModuleWrapper title="全部房间" style="grid-column: 1 / 3">
|
||||
<template #extra>
|
||||
<a-button type="primary">新建房间</a-button>
|
||||
<a-button type="primary" @click="handleOpenScenarioModal()">新建房间</a-button>
|
||||
</template>
|
||||
<div class="normal flex-c ai-c" v-loading="room.loading">
|
||||
<Grid class="room-wrapper" :columns="[1, 1, 1, 1, 1]" :rows="[1, 1]">
|
||||
|
|
@ -41,152 +41,59 @@
|
|||
/>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
<ModuleWrapper v-if="!loadedScenario" title="全部想定" style="grid-column: 1 / 3">
|
||||
<div class="normal flex-c ai-c" v-loading="loading">
|
||||
<Grid class="scenario-wrapper" :columns="[1, 1, 1, 1, 1]" :rows="[1, 1]">
|
||||
<div v-for="item in scenarioList" :key="item.id" class="scenario-item">
|
||||
<img
|
||||
class="scenario-image"
|
||||
:src="item.image || '/mockData/68ab3707-2552-4b78-bfc0-cec3502ec62f.png'"
|
||||
alt=""
|
||||
/>
|
||||
<div class="scenario-mask"></div>
|
||||
<div class="scenario-brief">
|
||||
<div class="scenario-name">{{ item.name }}</div>
|
||||
<div class="scenario-author">{{ item.author }}</div>
|
||||
</div>
|
||||
<div class="scenario-reload" title="载入想定" @click="handleLoadSenario(item)">
|
||||
<a-icon type="reload" />
|
||||
</div>
|
||||
<a-modal
|
||||
v-model="scenarioModal.visible"
|
||||
title="选择想定"
|
||||
width="900px"
|
||||
:maskClosable="false"
|
||||
:destroyOnClose="true"
|
||||
@ok="handleConfirmScenario()"
|
||||
>
|
||||
<Grid style="height: 600px" :columns="[1, 1]">
|
||||
<ModuleWrapper title="想定列表">
|
||||
<template #extra>
|
||||
<a-icon type="sync" style="font-size: 30px; color: #00deff" @click="getScenarioListData()" />
|
||||
</template>
|
||||
<div
|
||||
class="normal"
|
||||
v-loading="scenarioModal.scenarioLoading"
|
||||
style="background-color: white; padding: 20px 0; overflow: auto"
|
||||
>
|
||||
<a-tree
|
||||
:treeData="scenarioModal.scenarioList"
|
||||
:replaceFields="{ title: 'name', key: 'id' }"
|
||||
:selectedKeys.sync="scenarioModal.selectedKeys"
|
||||
@select="handleChangeScenarioSelected"
|
||||
>
|
||||
</a-tree>
|
||||
</div>
|
||||
</Grid>
|
||||
<a-pagination
|
||||
v-model="pagination.current"
|
||||
:pageSize.sync="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
@change="getScenarioList"
|
||||
/>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
<ModuleWrapper v-if="loadedScenario" title="想定信息">
|
||||
<template #extra>
|
||||
<a-button type="primary" shape="circle" icon="close" @click="handleCloseSenario()" />
|
||||
</template>
|
||||
<div class="normal flex-c">
|
||||
<div class="flex ai-c jc-sb" style="margin-bottom: 10px">
|
||||
<div class="flex ai-c">
|
||||
<div style="color: #92bacb">运行方式：</div>
|
||||
<a-select style="width: 240px" v-model="runningMode">
|
||||
<a-select-option value="1">人在回路</a-select-option>
|
||||
<a-select-option value="2">人不在回路</a-select-option>
|
||||
</a-select>
|
||||
</ModuleWrapper>
|
||||
<ModuleWrapper title="作战/保障力量">
|
||||
<template #extra>
|
||||
<a-icon type="sync" style="font-size: 30px; color: #00deff" @click="getZzbzllTreeData()" />
|
||||
</template>
|
||||
<div class="normal" v-loading="scenarioModal.zzbzllLoading" style="background-color: white; overflow: auto">
|
||||
<a-tree
|
||||
:treeData="scenarioModal.zzbzllTree"
|
||||
:replaceFields="{ title: 'name', key: 'id' }"
|
||||
:selected="false"
|
||||
:expandedKeys.sync="scenarioModal.expandedKeys"
|
||||
>
|
||||
</a-tree>
|
||||
</div>
|
||||
<div class="flex ai-c">
|
||||
<a-button type="primary" icon="caret-right">开始</a-button>
|
||||
<a-button type="primary" icon="pause">暂停</a-button>
|
||||
<a-button type="primary" icon="stop">中止</a-button>
|
||||
<a-button type="primary" icon="step-backward">快退X1</a-button>
|
||||
<a-button type="primary" icon="step-forward">快进X1</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scenario-info-wrapper flex-c">
|
||||
<a-radio-group v-model="radioType" button-style="solid">
|
||||
<a-radio-button value="xdsj">想定时间</a-radio-button>
|
||||
<a-radio-button value="xdqy">想定区域</a-radio-button>
|
||||
<a-radio-button value="xdsm">想定说明</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-row v-show="radioType === 'xdsj'">
|
||||
<a-col :span="24">
|
||||
<div>想定当前时间：</div>
|
||||
<div>
|
||||
<a-date-picker :value="scenarioDetail.planDate" valueFormat="YYYY-MM-DD" style="width: 100%" />
|
||||
<a-time-picker :value="scenarioDetail.planTime" valueFormat="HH:mm:ss" style="width: 100%" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div>想定开始时间：</div>
|
||||
<div>
|
||||
<a-date-picker :value="scenarioDetail.startDate" valueFormat="YYYY-MM-DD" style="width: 100%" />
|
||||
<a-time-picker :value="scenarioDetail.startTime" valueFormat="HH:mm:ss" style="width: 100%" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div>想定持续时间：</div>
|
||||
<div>
|
||||
<DurationPicker v-model="scenarioDetail.continueTime" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div>想定消耗时间：</div>
|
||||
<div>
|
||||
<DurationPicker v-model="scenarioDetail.wasterTime" />
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div v-show="radioType === 'xdqy'" class="flex-1 flex">
|
||||
<div style="width: 150px">
|
||||
<div>经纬度坐标</div>
|
||||
<div>左上</div>
|
||||
<a-input v-model="scenarioDetail.leftUpLon" style="width: 100%" />
|
||||
<a-input v-model="scenarioDetail.leftUpLat" style="width: 100%" />
|
||||
<div>右上</div>
|
||||
<a-input v-model="scenarioDetail.rightUpLon" style="width: 100%" />
|
||||
<a-input v-model="scenarioDetail.rightUpLat" style="width: 100%" />
|
||||
<div>右下</div>
|
||||
<a-input v-model="scenarioDetail.rightDownLon" style="width: 100%" />
|
||||
<a-input v-model="scenarioDetail.rightDownLat" style="width: 100%" />
|
||||
<div>左下</div>
|
||||
<a-input v-model="scenarioDetail.leftDownLon" style="width: 100%" />
|
||||
<a-input v-model="scenarioDetail.leftDownLat" style="width: 100%" />
|
||||
</div>
|
||||
<div class="flex-1" style="position: relative">
|
||||
<div id="jwd-cesium" style="width: 100%; height: 100%"></div>
|
||||
<div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<a-row v-show="radioType === 'xdsm'" style="flex: 1; padding: 10px 16px; overflow-y: auto">
|
||||
<a-col :span="12" class="flex ai-c">
|
||||
<div>想定名称：</div>
|
||||
<div>{{ scenarioDetail.planName }}</div>
|
||||
</a-col>
|
||||
<a-col :span="12" class="flex ai-c">
|
||||
<div>作者：</div>
|
||||
<div>{{ scenarioDetail.author }}</div>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<div>想定说明：</div>
|
||||
<div class="xdsm-wrapper">
|
||||
<WangEditor v-model="scenarioDetail.planDesc" />
|
||||
<!-- <iframe v-html="scenarioDetail.planDesc" frameborder="0"></iframe> -->
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
<ModuleWrapper v-if="loadedScenario" title="输入输出事件">
|
||||
<template #extra>
|
||||
<a-checkbox v-model="visible">显示</a-checkbox>
|
||||
</template>
|
||||
<div class="io-event-list">
|
||||
<div v-for="item in ioEventList" :key="item.id" class="io-event-item">
|
||||
<span style="margin-right: 20px">{{ item.eventTime }}</span>
|
||||
<span>{{ item.eventDesc }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
</ModuleWrapper>
|
||||
</Grid>
|
||||
</a-modal>
|
||||
</Grid>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'SimulationSceneCentralControl',
|
||||
data() {
|
||||
return {
|
||||
ws: null,
|
||||
|
||||
room: {
|
||||
list: [],
|
||||
loading: false,
|
||||
|
|
@ -196,33 +103,18 @@ export default {
|
|||
total: 0,
|
||||
},
|
||||
},
|
||||
|
||||
scenario: {
|
||||
list: [],
|
||||
scenarioModal: {
|
||||
visible: false,
|
||||
scenarioList: [],
|
||||
scenarioLoading: false,
|
||||
selectedKeys: [],
|
||||
zzbzllTree: [],
|
||||
zzbzllLoading: false,
|
||||
expandedKeys: [],
|
||||
},
|
||||
|
||||
scenarioList: [],
|
||||
loading: false,
|
||||
loadedScenario: '',
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
roomInfo: {
|
||||
roomId: '',
|
||||
},
|
||||
|
||||
runningMode: '1',
|
||||
radioType: 'xdsj',
|
||||
scenarioDetail: {},
|
||||
cesium: null,
|
||||
|
||||
visible: false,
|
||||
ioEventList: [
|
||||
{
|
||||
id: '1',
|
||||
eventTime: '2021-06-26 11:50:35',
|
||||
eventDesc: '加载数据中，请稍后',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -235,22 +127,11 @@ export default {
|
|||
}),
|
||||
},
|
||||
created() {
|
||||
this.initWebsocket()
|
||||
this.getSystemModules()
|
||||
this.getRoomList()
|
||||
this.getScenarioList()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.ws.close()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getSystemModules']),
|
||||
initWebsocket() {
|
||||
this.ws = new window.MyWebsocket('/', (error, data) => {
|
||||
if (error) return
|
||||
console.log('----data----', data)
|
||||
})
|
||||
},
|
||||
async getRoomList() {
|
||||
try {
|
||||
this.loading = true
|
||||
|
|
@ -270,58 +151,103 @@ export default {
|
|||
this.loading = false
|
||||
}
|
||||
},
|
||||
handleJoinRoom(item) {},
|
||||
async getScenarioList() {
|
||||
handleOpenScenarioModal() {
|
||||
this.scenarioModal.visible = true
|
||||
setTimeout(() => {
|
||||
this.getScenarioListData()
|
||||
}, 100)
|
||||
},
|
||||
async getScenarioListData() {
|
||||
try {
|
||||
this.loading = true
|
||||
this.scenarioModal.scenarioLoading = true
|
||||
const res = await this.$http({
|
||||
url: '/baseData/scenario/list',
|
||||
url: `/baseData/scenario/all`,
|
||||
method: 'get',
|
||||
params: {
|
||||
pageNum: this.pagination.current,
|
||||
pageSize: this.pagination.pageSize,
|
||||
},
|
||||
})
|
||||
this.scenarioList = res.data.data
|
||||
this.pagination.total = res.data.totalCount
|
||||
this.scenarioModal.scenarioList = res.data
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
this.scenarioModal.scenarioLoading = false
|
||||
}
|
||||
},
|
||||
async handleLoadSenario(item) {
|
||||
handleChangeScenarioSelected() {
|
||||
this.getZzbzllTreeData()
|
||||
},
|
||||
async getZzbzllTreeData() {
|
||||
try {
|
||||
this.scenarioModal.zzbzllLoading = true
|
||||
const res = await this.$http({
|
||||
url: `/baseData/scenario/${item.id}`,
|
||||
url: `/scenario/power/${this.scenarioModal.selectedKeys[0]}`,
|
||||
method: 'get',
|
||||
})
|
||||
this.scenarioDetail = JSON.parse(res.data.content)
|
||||
console.log('----', this.scenarioDetail)
|
||||
this.loadedScenario = item.id
|
||||
this.$nextTick(() => {
|
||||
this.initCesium()
|
||||
this.scenarioModal.zzbzllTree = [
|
||||
{
|
||||
id: '1',
|
||||
name: '红方',
|
||||
children: [
|
||||
{ id: '1-1', name: '作战力量', children: res.data.red.fight },
|
||||
{ id: '1-2', name: '保障力量', children: res.data.red.guarantee },
|
||||
{ id: '1-3', name: '指挥力量', children: res.data.red.command },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '蓝方',
|
||||
children: [
|
||||
{ id: '2-1', name: '作战力量', children: res.data.blue.fight },
|
||||
{ id: '2-2', name: '保障力量', children: res.data.blue.guarantee },
|
||||
{ id: '2-3', name: '指挥力量', children: res.data.blue.command },
|
||||
],
|
||||
},
|
||||
]
|
||||
this.scenarioModal.expandedKeys = ['1', '1-1', '1-2', '1-3', '2', '2-1', '2-2', '2-3']
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.scenarioModal.zzbzllLoading = false
|
||||
}
|
||||
},
|
||||
async handleConfirmScenario() {
|
||||
const scenarioId = this.scenarioModal.selectedKeys[0]
|
||||
if (!scenarioId) {
|
||||
return this.$message.warning('请先选择想定！')
|
||||
}
|
||||
try {
|
||||
this.$message.info('正在创建新房间，请稍候')
|
||||
const res = await this.$http({
|
||||
url: '/room/scenario/create',
|
||||
method: 'get',
|
||||
params: { id: scenarioId },
|
||||
})
|
||||
this.scenarioModal.visible = false
|
||||
this.clearScenarioModal()
|
||||
const shifou = await new Promise((resolve) => {
|
||||
this.$confirm({
|
||||
content: `创建新房间成功，房间编号${res.data.roomCode}，是否立即进入？`,
|
||||
onOk() {
|
||||
resolve(true)
|
||||
},
|
||||
onCancel() {
|
||||
resolve(false)
|
||||
},
|
||||
})
|
||||
})
|
||||
if (shifou) {
|
||||
this.handleJoinRoom(res.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
initCesium() {
|
||||
const { leftUpLat, rightUpLat, rightDownLat, leftDownLat, leftUpLon, rightUpLon, rightDownLon, leftDownLon } =
|
||||
this.scenarioDetail
|
||||
const centerLon = (leftUpLon + rightUpLon + rightDownLon + leftDownLon) / 4
|
||||
const centerLat = (leftUpLat + rightUpLat + rightDownLat + leftDownLat) / 4
|
||||
this.cesium = new window.MyCesium('jwd-cesium', { center: [centerLon, centerLat] })
|
||||
|
||||
this.cesium.setViewerByAllCorner(
|
||||
[leftUpLon, leftUpLat],
|
||||
[rightUpLon, rightUpLat],
|
||||
[rightDownLon, rightDownLat],
|
||||
[leftDownLon, leftDownLat]
|
||||
)
|
||||
clearScenarioModal() {
|
||||
this.scenarioModal.scenarioList = []
|
||||
this.scenarioModal.selectedKeys = []
|
||||
this.scenarioModal.zzbzllTree = []
|
||||
this.scenarioModal.expandedKeys = []
|
||||
},
|
||||
handleCloseSenario() {
|
||||
this.loadedScenario = ''
|
||||
handleJoinRoom(item) {
|
||||
this.roomInfo.roomId = item.roomId
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,11 +106,11 @@ export default {
|
|||
tableConfig: {
|
||||
table: {},
|
||||
immediate: false,
|
||||
query: () =>
|
||||
query: (queryParams) =>
|
||||
this.$http({
|
||||
url: `/environment/weather/list`,
|
||||
method: 'get',
|
||||
params: { id: this.xd.selectedKeys[0] },
|
||||
params: { id: this.xd.selectedKeys[0], ...queryParams },
|
||||
}),
|
||||
columns: [
|
||||
{ dataIndex: 'serial' },
|
||||
|
|
@ -167,11 +167,11 @@ export default {
|
|||
tableConfig: {
|
||||
table: {},
|
||||
immediate: false,
|
||||
query: () =>
|
||||
query: (queryParams) =>
|
||||
this.$http({
|
||||
url: `/environment/ebe/list`,
|
||||
method: 'get',
|
||||
params: { id: this.xd.selectedKeys[0] },
|
||||
params: { id: this.xd.selectedKeys[0], ...queryParams },
|
||||
}),
|
||||
columns: [
|
||||
{ dataIndex: 'serial' },
|
||||
|
|
|
|||
|
|
@ -1,8 +1,15 @@
|
|||
<template>
|
||||
<Grid class="simulation-model-page" :columns="['320px', 1, '320px']" :rows="[45, 15, 40]" gap="0px">
|
||||
<ModuleWrapper title="作战/保障力量" style="grid-column: 1 / 2; grid-row: 1 / 2">
|
||||
<div class="normal" style="padding: 5px">
|
||||
<a-tree :treeData="zb.zbTreeData"> </a-tree>
|
||||
<div class="normal" style="padding: 5px; overflow-y: auto">
|
||||
<a-tree
|
||||
class="simulation-tree"
|
||||
:treeData="zb.zbTreeData"
|
||||
:selectedKeys.sync="zb.selectedKeys"
|
||||
:replaceFields="{ children: 'children', title: 'name', key: 'id' }"
|
||||
@select="handleSelectTree"
|
||||
>
|
||||
</a-tree>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
<ModuleWrapper style="grid-column: 1 / 2; grid-row: 2 / 4">
|
||||
|
|
@ -57,38 +64,39 @@ export default {
|
|||
zb: {
|
||||
zbTreeData: [
|
||||
{
|
||||
key: '1',
|
||||
title: '红方',
|
||||
id: '1',
|
||||
name: '红方',
|
||||
children: [
|
||||
{
|
||||
key: '1-1',
|
||||
title: '作战力量',
|
||||
id: '1-1',
|
||||
name: '作战力量',
|
||||
children: [
|
||||
{ key: '1-1-1', title: '左翼夺控群火力分队' },
|
||||
{ key: '1-1-2', title: '左翼攻击分队' },
|
||||
{ key: '1-1-3', title: '右翼攻击分队' },
|
||||
{ key: '1-1-4', title: '右翼夺控群反装甲分队' },
|
||||
{ key: '1-1-5', title: '防空火力队' },
|
||||
{ key: '1-1-6', title: '左翼牵制群右翼攻击分队' },
|
||||
{ key: '1-1-7', title: '电子对抗兵队超短波干扰分队' },
|
||||
{ key: '1-1-8', title: '纵深夺控群火力分队' },
|
||||
{ id: '1-1-1', name: '左翼夺控群火力分队' },
|
||||
{ id: '1-1-2', name: '左翼攻击分队' },
|
||||
{ id: '1-1-3', name: '右翼攻击分队' },
|
||||
{ id: '1-1-4', name: '右翼夺控群反装甲分队' },
|
||||
{ id: '1-1-5', name: '防空火力队' },
|
||||
{ id: '1-1-6', name: '左翼牵制群右翼攻击分队' },
|
||||
{ id: '1-1-7', name: '电子对抗兵队超短波干扰分队' },
|
||||
{ id: '1-1-8', name: '纵深夺控群火力分队' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '1-2',
|
||||
title: '保障力量',
|
||||
id: '1-2',
|
||||
name: '保障力量',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
title: '蓝方',
|
||||
id: '2',
|
||||
name: '蓝方',
|
||||
children: [
|
||||
{ key: '1-1', title: '作战力量' },
|
||||
{ key: '1-2', title: '保障力量' },
|
||||
{ id: '1-1', name: '作战力量' },
|
||||
{ id: '1-2', name: '保障力量' },
|
||||
],
|
||||
},
|
||||
],
|
||||
selectedKeys: [],
|
||||
},
|
||||
qd: {
|
||||
qdlx: 'xqqd',
|
||||
|
|
@ -132,6 +140,9 @@ export default {
|
|||
mounted() {
|
||||
this.cesium = new window.MyCesium('cesium-container')
|
||||
},
|
||||
methods: {
|
||||
handleSelectTree() {},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -139,6 +150,18 @@ export default {
|
|||
.simulation-model-page {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user