818 lines
29 KiB
Vue
818 lines
29 KiB
Vue
<template>
|
||
<Grid class="scene-editing-page" :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.queryParams.keyword" placeholder="输入关键词搜索..." @search="onSearch" />
|
||
<Flex>
|
||
<AntOriginSelect
|
||
v-model="ys.queryParams.force"
|
||
:dataSource="() => ({ data: ys.forceOptions })"
|
||
width="100px"
|
||
:allowClear="false"
|
||
/>
|
||
<AntOriginSelect
|
||
v-model="ys.queryParams.type"
|
||
:dataSource="() => ({ data: ys.typeOptions })"
|
||
class="flex-1"
|
||
:allowClear="false"
|
||
/>
|
||
</Flex>
|
||
<div class="flex-1" style="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.detail.image || '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png'" />
|
||
<div class="name">
|
||
{{ right.detail.name }}
|
||
<a-button v-if="hasDetail" type="text-primary" icon="edit" @click="handleOpenMcModal"></a-button>
|
||
</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>{{ right.detail.position.deduceTypeName }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">类型：</span>
|
||
<span>{{ right.detail.position.logisticType | logisticTypeFormat }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">方向：</span>
|
||
<span>{{ right.detail.position.direction | numberFormat }}°</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">速度：</span>
|
||
<span>{{ right.detail.position.speed }} 公里/时</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">经度：</span>
|
||
<span class="flex-1">{{ right.detail.position.lng | lonFormat }}</span>
|
||
<a-button v-if="hasDetail" type="text-primary" icon="edit" @click="handleOpenLonlatModal"></a-button>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">纬度：</span>
|
||
<span class="flex-1">{{ right.detail.position.lat | latFormat }}</span>
|
||
<a-button v-if="hasDetail" type="text-primary" icon="edit" @click="handleOpenLonlatModal"></a-button>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">高度/深度：</span>
|
||
<span class="flex-1">{{ right.detail.position.height | numberFormat }} 米(海拔)</span>
|
||
<a-button v-if="hasDetail" type="text-primary" icon="edit" @click="handleOpenHdModal()"></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.detail.personStatistic.total }} 人</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">当前人数：</span>
|
||
<span>{{ right.detail.personStatistic.current }} 人</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">死亡人数：</span>
|
||
<span>{{ right.detail.personStatistic.death }} 人</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">受伤人数：</span>
|
||
<span>{{ right.detail.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.detail.foodInfo.startNum }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">野战食物当前量(份)：</span>
|
||
<span>{{ right.detail.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.detail.waterInfo.startNum }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">用水当前量(吨)：</span>
|
||
<span>{{ right.detail.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.detail.oilInfo.startNum }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">油料当前量(份)：</span>
|
||
<span>{{ right.detail.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.detail.medicalInfo.startNum }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">药材当前量(份)：</span>
|
||
<span>{{ right.detail.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.detail.ammunition.lightArms }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">压制武器弹药量(吨)：</span>
|
||
<span>{{ right.detail.ammunition.suppressing }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">反坦克武器弹药量(吨)：</span>
|
||
<span>{{ right.detail.ammunition.antiTank }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">防空反导武器弹药量(吨)：</span>
|
||
<span>{{ right.detail.ammunition.antiAircraft }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">布扫雷装备弹药量(吨)：</span>
|
||
<span>{{ right.detail.ammunition.mineLaying }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">爆破器材弹药量(吨)：</span>
|
||
<span>{{ right.detail.ammunition.explosiveDevice }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">烟火装备弹药量(吨)：</span>
|
||
<span>{{ right.detail.ammunition.smokeDevice }}</span>
|
||
</div>
|
||
<div class="zt-item flex ai-c">
|
||
<span style="min-width: 100px">防化消耗弹药量(吨)：</span>
|
||
<span>{{ right.detail.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'" class="zzxd-wrapper flex-v">
|
||
<div class="zzxd-header flex ai-c jc-sb">
|
||
<div class="zzxd-title">作战行动</div>
|
||
<div>
|
||
<a-button type="text-primary" icon="menu"></a-button>
|
||
<a-button type="text-primary" icon="plus" @click="handleOpenAddActionModal"></a-button>
|
||
<a-button type="text-primary" icon="edit" @click="handleOpenEditActionModal"></a-button>
|
||
<a-button type="text-primary" icon="delete" @click="handleDeleteAction"></a-button>
|
||
</div>
|
||
</div>
|
||
<div class="flex-1" style="overflow-y: auto">
|
||
<div
|
||
v-for="item in right.detail.actionList"
|
||
:key="item.id"
|
||
class="action-item flex"
|
||
@click="right.checkedAction = item"
|
||
>
|
||
<div class="action-icon">
|
||
<div class="action-line"></div>
|
||
<a-radio
|
||
:checked="right.checkedAction && right.checkedAction.id === item.id"
|
||
style="margin-right: 0"
|
||
></a-radio>
|
||
</div>
|
||
<div class="flex-1">
|
||
<div class="action-title">{{ item.typeName || '- -' }}</div>
|
||
<div class="action-time">开始时间：{{ item.beginDateTime }}</div>
|
||
<div class="action-time">结束时间：{{ item.endDateTime }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div v-if="right.radioType === 'dzsx'">
|
||
<div>
|
||
<a-collapse>
|
||
<a-collapse-panel v-for="item in right.detail.equipmentList" :key="item.id" :header="item.name">
|
||
<a-collapse>
|
||
<a-collapse-panel header="无损伤">
|
||
<div v-for="(value, label) in item.equipmentParts" :key="label">
|
||
<span>{{ label }}：{{ value }}</span>
|
||
</div>
|
||
</a-collapse-panel>
|
||
</a-collapse>
|
||
</a-collapse-panel>
|
||
</a-collapse>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</ModuleWrapper>
|
||
<a-modal
|
||
v-model="mcModal.visible"
|
||
title="编辑单元名称"
|
||
:maskClosable="false"
|
||
width="400px"
|
||
:destroyOnClose="true"
|
||
@ok="handleSubmilMc"
|
||
>
|
||
<a-row>
|
||
<a-col :span="6">
|
||
<span>名称</span>
|
||
</a-col>
|
||
<a-col :span="18">
|
||
<a-input v-model="mcModal.mc" style="width: 100%" />
|
||
</a-col>
|
||
</a-row>
|
||
</a-modal>
|
||
<a-modal
|
||
v-model="lonlatModal.visible"
|
||
title="修改单元经纬度"
|
||
:maskClosable="false"
|
||
width="600px"
|
||
:destroyOnClose="true"
|
||
@ok="handleSubmilLonlat"
|
||
>
|
||
<LonLatInput :lon.sync="lonlatModal.lon" :lat.sync="lonlatModal.lat" />
|
||
</a-modal>
|
||
<a-modal
|
||
v-model="hdModal.visible"
|
||
title="设置单元高度/深度"
|
||
:maskClosable="false"
|
||
width="400px"
|
||
:destroyOnClose="true"
|
||
@ok="handleSubmilHd"
|
||
>
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<span>高度/深度</span>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-input-number v-model="hdModal.hd" :min="0" style="width: 100%" />
|
||
</a-col>
|
||
</a-row>
|
||
</a-modal>
|
||
<a-modal
|
||
v-model="actionModal.visible"
|
||
:title="actionModal.title"
|
||
:maskClosable="false"
|
||
:destroyOnClose="true"
|
||
@ok="handleSubmilAction"
|
||
>
|
||
<a-form-model
|
||
:model="actionModal.formData"
|
||
layout="horizontal"
|
||
:labelCol="{ span: 6 }"
|
||
:wrapperCol="{ span: 15 }"
|
||
>
|
||
<a-form-model-item v-for="item in actionModal.formItems" :key="item.prop" v-bind="item">
|
||
<component
|
||
:is="item.component || 'a-input'"
|
||
v-model="actionModal.formData[item.prop]"
|
||
v-bind="item.options"
|
||
/>
|
||
</a-form-model-item>
|
||
</a-form-model>
|
||
</a-modal>
|
||
</Grid>
|
||
</template>
|
||
|
||
<script>
|
||
import LonLatInput from './components/LonLatInput.vue'
|
||
|
||
export default {
|
||
name: 'SimulationSceneSceneEditing',
|
||
components: {
|
||
LonLatInput,
|
||
},
|
||
filters: {
|
||
logisticTypeFormat(v) {
|
||
return {
|
||
1: '信息对抗分队',
|
||
2: '边防作战分队',
|
||
3: '防化保障分队',
|
||
4: '火力打击分队',
|
||
5: '餐饮保障分队',
|
||
6: '运输保障分队',
|
||
7: '医疗分队',
|
||
8: '工兵分队',
|
||
}[v]
|
||
},
|
||
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: {
|
||
forceOptions: [
|
||
{ title: '红方', id: 1 },
|
||
{ title: '蓝方', id: 2 },
|
||
],
|
||
typeOptions: [
|
||
{ title: '飞机', id: 1 },
|
||
{ title: '地面设施与兵力', id: 2 },
|
||
{ title: '舰船', id: 3 },
|
||
{ title: '潜艇', id: 4 },
|
||
{ title: '作战分队', id: 5 },
|
||
{ title: '保障分队', id: 6 },
|
||
],
|
||
queryParams: {
|
||
keyword: '',
|
||
force: 1,
|
||
type: 1,
|
||
},
|
||
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',
|
||
detail: {
|
||
position: {},
|
||
personStatistic: {},
|
||
foodInfo: {},
|
||
waterInfo: {},
|
||
oilInfo: {},
|
||
medicalInfo: {},
|
||
ammunition: {},
|
||
actionList: [],
|
||
// equipmentList: [],
|
||
},
|
||
checkedAction: null,
|
||
},
|
||
mcModal: {
|
||
visible: false,
|
||
mc: '',
|
||
},
|
||
lonlatModal: {
|
||
visible: false,
|
||
lon: 0,
|
||
lat: 0,
|
||
},
|
||
hdModal: {
|
||
visible: false,
|
||
hd: 0,
|
||
},
|
||
actionModal: {
|
||
visible: false,
|
||
formItems: [
|
||
{ label: '事件名称', prop: 'typeName' },
|
||
{
|
||
label: '事件类型',
|
||
prop: 'typeType',
|
||
component: 'AntOriginSelect',
|
||
options: {
|
||
dataSource: () => ({
|
||
data: [
|
||
{ id: '1', title: '阵地进攻' },
|
||
{ id: '2', title: '机动进攻' },
|
||
{ id: '3', title: '城镇进攻' },
|
||
{ id: '4', title: '山地进攻' },
|
||
{ id: '5', title: '阵地防御' },
|
||
{ id: '6', title: '机动防御' },
|
||
{ id: '7', title: '城镇防御' },
|
||
{ id: '8', title: '山地防御' },
|
||
],
|
||
}),
|
||
},
|
||
},
|
||
{ label: '开始时间', prop: 'beginDateTime', component: 'a-date-picker', options: { showTime: true } },
|
||
{ label: '结束时间', prop: 'endDateTime', component: 'a-date-picker', options: { showTime: true } },
|
||
{ label: '目标经度', prop: 'lon', component: 'a-input-number' },
|
||
{ label: '目标纬度', prop: 'lat', component: 'a-input-number' },
|
||
],
|
||
formData: {},
|
||
},
|
||
}
|
||
},
|
||
computed: {
|
||
hasDetail() {
|
||
return Boolean(this.right.detail.id)
|
||
},
|
||
},
|
||
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.blue.fight },
|
||
{ id: '2-2', name: '保障力量', selectable: false, children: res.data.blue.guarantee },
|
||
{ id: '2-3', name: '指挥力量', selectable: false, children: res.data.blue.command },
|
||
],
|
||
},
|
||
]
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
},
|
||
handleSelectTree(selectedKeys, { node }) {
|
||
this.right.detail = node.dataRef
|
||
this.right.checkedAction = null
|
||
},
|
||
onSearch(e) {
|
||
console.log('----', e, e.target.value)
|
||
},
|
||
|
||
handleOpenMcModal() {
|
||
this.mcModal.mc = this.right.detail.name
|
||
this.mcModal.visible = true
|
||
},
|
||
async handleSubmilMc() {
|
||
try {
|
||
this.$http({
|
||
url: `/scenario/power/modifyUnit/${this.scenarioId}`,
|
||
method: 'post',
|
||
data: {
|
||
id: this.right.detail.id,
|
||
name: this.mcModal.mc,
|
||
},
|
||
})
|
||
this.$message.success('编辑单元名称成功')
|
||
this.right.detail.name = this.mcModal.mc
|
||
this.mcModal.visible = false
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
},
|
||
|
||
handleOpenLonlatModal() {
|
||
this.lonlatModal.lon = Number(this.right.detail.position.lng) || 0
|
||
this.lonlatModal.lat = Number(this.right.detail.position.lat) || 0
|
||
this.lonlatModal.visible = true
|
||
},
|
||
async handleSubmilLonlat() {
|
||
try {
|
||
this.$http({
|
||
url: `/scenario/power/modifyUnit/${this.scenarioId}`,
|
||
method: 'post',
|
||
data: {
|
||
id: this.right.detail.id,
|
||
position: {
|
||
lng: this.lonlatModal.lon,
|
||
lat: this.lonlatModal.lat,
|
||
},
|
||
},
|
||
})
|
||
this.$message.success('修改单元经纬度成功')
|
||
this.right.detail.position.lng = '' + this.lonlatModal.lon
|
||
this.right.detail.position.lat = '' + this.lonlatModal.lat
|
||
this.lonlatModal.visible = false
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
},
|
||
|
||
handleOpenHdModal() {
|
||
this.hdModal.hd = Number(this.right.detail.position.height) || 0
|
||
this.hdModal.visible = true
|
||
},
|
||
async handleSubmilHd() {
|
||
try {
|
||
this.$http({
|
||
url: `/scenario/power/modifyUnit/${this.scenarioId}`,
|
||
method: 'post',
|
||
data: {
|
||
id: this.right.detail.id,
|
||
position: {
|
||
height: this.hdModal.hd,
|
||
},
|
||
},
|
||
})
|
||
this.$message.success('修改单元高度/深度成功')
|
||
this.right.detail.position.height = this.hdModal.hd
|
||
this.hdModal.visible = false
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
},
|
||
|
||
handleOpenAddActionModal() {
|
||
this.actionModal.title = '添加事件信息'
|
||
this.actionModal.formData = {}
|
||
this.actionModal.visible = true
|
||
},
|
||
handleOpenEditActionModal() {
|
||
this.actionModal.title = '修改事件信息'
|
||
this.actionModal.formData = { ...this.right.checkedAction }
|
||
this.actionModal.visible = true
|
||
},
|
||
async handleSubmilAction() {
|
||
try {
|
||
await this.$http({
|
||
url: '/save',
|
||
method: 'post',
|
||
data: this.actionModal.formData,
|
||
})
|
||
this.$message.success(`${this.actionModal.title}成功`)
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
},
|
||
async handleDeleteAction() {
|
||
try {
|
||
await this.$confirm('确认删除所选事件吗？')
|
||
await this.$http({
|
||
url: '/delete',
|
||
method: 'delete',
|
||
params: { id: this.right.checkedAction.id },
|
||
})
|
||
this.$message.success(`删除事件成功`)
|
||
} catch (error) {
|
||
this.$message.success(`删除事件失败`)
|
||
console.log(error)
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</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;
|
||
}
|
||
}
|
||
.zzxd-wrapper {
|
||
height: 100%;
|
||
.zzxd-header {
|
||
padding: 5px 0;
|
||
border-bottom: 1px solid #00baff22;
|
||
.zzxd-title {
|
||
color: #00baff;
|
||
}
|
||
}
|
||
}
|
||
.action-item {
|
||
cursor: pointer;
|
||
padding: 5px 0;
|
||
.action-icon {
|
||
padding: 5px 16px;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
.action-line {
|
||
position: absolute;
|
||
right: 50%;
|
||
top: 21px;
|
||
width: 1px;
|
||
height: 100%;
|
||
background-color: #00baff;
|
||
}
|
||
}
|
||
}
|
||
.action-item:last-of-type {
|
||
.action-line {
|
||
display: none;
|
||
}
|
||
}
|
||
.action-item:hover {
|
||
background-color: #bae7ff44;
|
||
}
|
||
</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>
|