482 lines
19 KiB
Vue
482 lines
19 KiB
Vue
<template>
|
||
<div class="scene-editing-page" v-grid-box="{ columns: ['320px', 1, '320px'], rows: [45, 30, 25], gap: '0px' }">
|
||
<ModuleWrapper title="作战/保障力量" style="grid-column: 1 / 2; grid-row: 1 / 2">
|
||
<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 title="装备元素" style="grid-column: 1 / 2; grid-row: 2 / 4">
|
||
<div class="normal flex-c" style="padding: 5px">
|
||
<a-input-search v-model="ys.keyword" placeholder="输入关键词搜索..." @search="onSearch" />
|
||
<div style="height: 0; flex: 1; overflow-y: auto">
|
||
<a-row>
|
||
<template v-for="item in ys.ysList">
|
||
<a-col :key="item.id" :span="24">{{ item.title }}</a-col>
|
||
<a-col v-for="it in item.children" :key="it.id" :span="12" class="flex-c ai-c">
|
||
<img class="ys-image" :src="it.image" alt="" />
|
||
<span>{{ it.title }}</span>
|
||
</a-col>
|
||
</template>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
</ModuleWrapper>
|
||
<div
|
||
class="cesium-container"
|
||
id="cesium-container"
|
||
style="grid-column: 2 / 3; grid-row: 1 / 7; overflow: hidden"
|
||
></div>
|
||
<ModuleWrapper style="grid-column: 3 / 4; grid-row: 1 / 4">
|
||
<template #title>
|
||
<a-radio-group v-model="right.radioType" button-style="solid">
|
||
<a-radio-button value="jcsx">基础属性</a-radio-button>
|
||
<a-radio-button value="zzxd">作战行动</a-radio-button>
|
||
<a-radio-button value="dzsx">单装属性</a-radio-button>
|
||
</a-radio-group>
|
||
</template>
|
||
<div class="normal" style="padding: 15px 0">
|
||
<div style="height: 100%; padding: 0 15px; overflow-y: auto">
|
||
<div v-if="right.radioType === 'jcsx'">
|
||
<a-collapse class="simulation-collapse" :defaultActiveKey="['1', '2', '3', '4', '5', '6', '7', '8', '9']">
|
||
<a-collapse-panel class="simulation-collapse-item" key="1" header="基础信息">
|
||
<img class="image" :src="right.jcsx.image || '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png'" />
|
||
<div class="name">{{ right.jcsx.name }}</div>
|
||
<div class="zt-item flex ai-c jc-sb">
|
||
<span style="min-width: 100px">推演方：</span>
|
||
<a-select
|
||
style="width: 120px"
|
||
class="simulation-select"
|
||
defaultValue="1"
|
||
dropdownClassName="simulation-select-dropdown"
|
||
>
|
||
<a-select-option value="1">红方</a-select-option>
|
||
<a-select-option value="2">蓝方</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">类型：</span>
|
||
<span></span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">方向：</span>
|
||
<span></span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">速度：</span>
|
||
<span>{{ right.jcsx.position.speed }} 公里/时</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">经度：</span>
|
||
<span class="flex-1">{{ right.jcsx.position.lng | lonFormat }}</span>
|
||
<a-button
|
||
type="text-primary"
|
||
icon="edit"
|
||
@click="handleOpenLonlatModal(right.jcsx.position.lng, right.jcsx.position.lat)"
|
||
></a-button>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">纬度：</span>
|
||
<span class="flex-1">{{ right.jcsx.position.lat | latFormat }}</span>
|
||
<a-button
|
||
type="text-primary"
|
||
icon="edit"
|
||
@click="handleOpenLonlatModal(right.jcsx.position.lng, right.jcsx.position.lat)"
|
||
></a-button>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">高度/深度：</span>
|
||
<span class="flex-1">{{ right.jcsx.position.height | numberFormat }} 米(海拔)</span>
|
||
<a-button type="text-primary" icon="edit"></a-button>
|
||
</div>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel class="simulation-collapse-item" key="2" header="人员状态属性">
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">人员编制数：</span>
|
||
<span>{{ right.jcsx.personStatistic.total }} 人</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">当前人数：</span>
|
||
<span>{{ right.jcsx.personStatistic.current }} 人</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">死亡人数：</span>
|
||
<span>{{ right.jcsx.personStatistic.death }} 人</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">受伤人数：</span>
|
||
<span>{{ right.jcsx.personStatistic.injured }} 人</span>
|
||
</div>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel class="simulation-collapse-item" key="3" header="野战食品状态属性">
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">野战食物初始量(份)：</span>
|
||
<span>{{ right.jcsx.foodInfo.startNum }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">野战食物当前量(份)：</span>
|
||
<span>{{ right.jcsx.foodInfo.currentNum }}</span>
|
||
</div>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel class="simulation-collapse-item" key="4" header="用水状态属性">
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">用水初始量(吨)：</span>
|
||
<span>{{ right.jcsx.waterInfo.startNum }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">用水当前量(吨)：</span>
|
||
<span>{{ right.jcsx.waterInfo.currentNum }}</span>
|
||
<span></span>
|
||
</div>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel class="simulation-collapse-item" key="5" header="油料状态属性">
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">油料初始量(份)：</span>
|
||
<span>{{ right.jcsx.oilInfo.startNum }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">油料当前量(份)：</span>
|
||
<span>{{ right.jcsx.oilInfo.currentNum }}</span>
|
||
</div>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel class="simulation-collapse-item" key="6" header="药材状态属性">
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">药材初始量(份)：</span>
|
||
<span>{{ right.jcsx.medicalInfo.startNum }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">药材当前量(份)：</span>
|
||
<span>{{ right.jcsx.medicalInfo.currentNum }}</span>
|
||
</div>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel class="simulation-collapse-item" key="7" header="武器弹药状态属性">
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">轻武器弹药量(吨)：</span>
|
||
<span>{{ right.jcsx.ammunition.lightArms }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">压制武器弹药量(吨)：</span>
|
||
<span>{{ right.jcsx.ammunition.suppressing }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">反坦克武器弹药量(吨)：</span>
|
||
<span>{{ right.jcsx.ammunition.antiTank }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">防空反导武器弹药量(吨)：</span>
|
||
<span>{{ right.jcsx.ammunition.antiAircraft }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">布扫雷装备弹药量(吨)：</span>
|
||
<span>{{ right.jcsx.ammunition.mineLaying }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">爆破器材弹药量(吨)：</span>
|
||
<span>{{ right.jcsx.ammunition.explosiveDevice }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">烟火装备弹药量(吨)：</span>
|
||
<span>{{ right.jcsx.ammunition.smokeDevice }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">防化消耗弹药量(吨)：</span>
|
||
<span>{{ right.jcsx.ammunition.antiChemical }}</span>
|
||
</div>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel class="simulation-collapse-item" key="8" header="保障标准信息">
|
||
<div class="zt-item flex ai-c jc-sb">
|
||
<span style="min-width: 100px">保障分配类型：</span>
|
||
<a-select
|
||
style="width: 120px"
|
||
class="simulation-select"
|
||
defaultValue="1"
|
||
dropdownClassName="simulation-select-dropdown"
|
||
>
|
||
<a-select-option value="1">自动分配</a-select-option>
|
||
<a-select-option value="2">手动分配</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
</a-collapse-panel>
|
||
<a-collapse-panel class="simulation-collapse-item" key="9" header="保障配置">
|
||
<div class="zt-item flex ai-c jc-sb">
|
||
<a-button type="primary">兵力编组</a-button>
|
||
<a-button type="primary">关注</a-button>
|
||
</div>
|
||
</a-collapse-panel>
|
||
</a-collapse>
|
||
</div>
|
||
<div v-if="right.radioType === 'zzxd'">作战行动</div>
|
||
<div v-if="right.radioType === 'dzsx'">单装属性</div>
|
||
</div>
|
||
</div>
|
||
</ModuleWrapper>
|
||
<a-modal v-model="lonlatModal.visible" title="修改单元经纬度">
|
||
<LonLatInput :lon.sync="lonlatModal.lon" :lat.sync="lonlatModal.lat" />
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import LonLatInput from './components/LonLatInput.vue'
|
||
|
||
export default {
|
||
name: 'SimulationSceneSceneEditing',
|
||
components: {
|
||
LonLatInput,
|
||
},
|
||
filters: {
|
||
numberFormat(v) {
|
||
if (typeof v === 'number' && v) {
|
||
return +v.toFixed(2)
|
||
} else {
|
||
return v
|
||
}
|
||
},
|
||
lonFormat(v) {
|
||
const originValue = Number(v)
|
||
if (originValue) {
|
||
let result = ''
|
||
result += originValue > 0 ? '东经 ' : '西经 '
|
||
const num = Math.abs(originValue)
|
||
const d = Math.floor(num)
|
||
result += `${d}°`
|
||
const m = Math.floor(num * 60) % 60
|
||
result += `${m}′`
|
||
const s = Math.floor(num * 3600) % 60
|
||
result += `${s}″`
|
||
return result
|
||
} else {
|
||
return '0°0′0″'
|
||
}
|
||
},
|
||
latFormat(v) {
|
||
const originValue = Number(v)
|
||
if (originValue) {
|
||
let result = ''
|
||
result += originValue > 0 ? '北纬 ' : '南纬 '
|
||
const num = Math.abs(originValue)
|
||
const d = Math.floor(num)
|
||
result += `${d}°`
|
||
const m = Math.floor(num * 60) % 60
|
||
result += `${m}′`
|
||
const s = Math.floor(num * 3600) % 60
|
||
result += `${s}″`
|
||
return result
|
||
} else {
|
||
return '0°0′0″'
|
||
}
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
cesium: null,
|
||
scenarioId: null,
|
||
zb: { zbTreeData: [], selectedKeys: [] },
|
||
ys: {
|
||
keyword: '',
|
||
ysList: [
|
||
{
|
||
id: '1',
|
||
title: '红方',
|
||
children: [
|
||
{ id: '1-1', title: '反坦克导弹', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
{ id: '1-2', title: '红箭10反坦克导弹', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
{ id: '1-3', title: '装甲突击车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
{ id: '1-4', title: 'VT5坦克', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
{ id: '1-5', title: '餐饮车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
{ id: '1-6', title: '物资运输车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
{ id: '1-7', title: '油罐车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
{ id: '1-8', title: '雷达车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
],
|
||
},
|
||
{
|
||
id: '2',
|
||
title: '蓝方',
|
||
children: [
|
||
{ id: '2-1', title: '反坦克导弹', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
{ id: '2-2', title: '红箭10反坦克导弹', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
{ id: '2-3', title: '装甲突击车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
{ id: '2-4', title: 'VT5坦克', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
{ id: '2-5', title: '餐饮车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
{ id: '2-6', title: '物资运输车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
{ id: '2-7', title: '油罐车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
{ id: '2-8', title: '雷达车', image: '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png' },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
right: {
|
||
radioType: 'jcsx',
|
||
jcsx: {
|
||
position: {},
|
||
personStatistic: {},
|
||
foodInfo: {},
|
||
waterInfo: {},
|
||
oilInfo: {},
|
||
medicalInfo: {},
|
||
ammunition: {},
|
||
},
|
||
},
|
||
lonlatModal: {
|
||
visible: false,
|
||
lon: 0,
|
||
lat: 0,
|
||
},
|
||
}
|
||
},
|
||
mounted() {
|
||
this.cesium = new window.MyCesium('cesium-container')
|
||
this.scenarioId = 2733
|
||
this.getZbTree()
|
||
},
|
||
methods: {
|
||
async getZbTree() {
|
||
try {
|
||
const res = await this.$http({
|
||
url: `/scenario/power/${this.scenarioId}`,
|
||
method: 'get',
|
||
})
|
||
this.zb.zbTreeData = [
|
||
{
|
||
id: '1',
|
||
name: '红方',
|
||
selectable: false,
|
||
children: [
|
||
{ id: '1-1', name: '作战力量', selectable: false, children: res.data.red.fight },
|
||
{ id: '1-2', name: '保障力量', selectable: false, children: res.data.red.guarantee },
|
||
{ id: '1-3', name: '指挥力量', selectable: false, children: res.data.red.command },
|
||
],
|
||
},
|
||
{
|
||
id: '2',
|
||
name: '蓝方',
|
||
selectable: false,
|
||
children: [
|
||
{ id: '2-1', name: '作战力量', selectable: false, children: res.data.red.fight },
|
||
{ id: '2-2', name: '保障力量', selectable: false, children: res.data.red.guarantee },
|
||
{ id: '2-3', name: '指挥力量', selectable: false, children: res.data.red.command },
|
||
],
|
||
},
|
||
]
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
},
|
||
handleSelectTree(selectedKeys, { node }) {
|
||
this.right.jcsx = node.dataRef
|
||
},
|
||
onSearch(e) {
|
||
console.log('----', e, e.target.value)
|
||
},
|
||
handleOpenLonlatModal(lon, lat) {
|
||
this.lonlatModal.lon = lon
|
||
this.lonlatModal.lat = lat
|
||
this.lonlatModal.visible = true
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.scene-editing-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;
|
||
}
|
||
}
|
||
.ys-image {
|
||
width: 74px;
|
||
height: 62px;
|
||
object-fit: cover;
|
||
margin: 16px 0 8px;
|
||
}
|
||
.simulation-collapse::v-deep {
|
||
background-color: transparent;
|
||
color: #bbdded;
|
||
font-size: 16px;
|
||
line-height: 30px;
|
||
border: none;
|
||
}
|
||
.simulation-collapse-item::v-deep {
|
||
.ant-collapse-content {
|
||
background-color: transparent;
|
||
color: #bbdded;
|
||
border-top-color: #00baff66;
|
||
> .ant-collapse-content-box {
|
||
padding: 15px 0 5px;
|
||
}
|
||
}
|
||
}
|
||
.simulation-collapse > .simulation-collapse-item::v-deep {
|
||
border: none;
|
||
> .ant-collapse-header {
|
||
padding: 0;
|
||
color: #00baff;
|
||
font-size: 16px;
|
||
line-height: 38px;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row-reverse;
|
||
justify-content: space-between;
|
||
.ant-collapse-arrow {
|
||
position: initial;
|
||
font-size: 16px;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
}
|
||
.image {
|
||
width: 100%;
|
||
padding: 20px;
|
||
background-color: #0c3040;
|
||
}
|
||
.name {
|
||
color: #00baff;
|
||
text-decoration: underline;
|
||
font-size: 16px;
|
||
}
|
||
.simulation-select::v-deep {
|
||
.ant-select-selection {
|
||
background-color: #10475f;
|
||
border: solid 1px #1d5777;
|
||
color: #bbdded;
|
||
}
|
||
.ant-select-arrow {
|
||
color: #bbdded;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="less">
|
||
.simulation-select-dropdown {
|
||
background-color: #10475f;
|
||
border: solid 1px #1d5777;
|
||
.ant-select-dropdown-menu-item {
|
||
color: #bbdded;
|
||
}
|
||
.ant-select-dropdown-menu-item-selected {
|
||
background-color: #bbdded33;
|
||
color: #ffffff;
|
||
font-weight: normal;
|
||
}
|
||
.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
|
||
background-color: #bbdded33;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
</style>
|