想定预设
This commit is contained in:
liaoboping
parent
8c3765c03d
commit
50bdd453fb
149
src/views/subsystem/scene/components/BlbzModal.vue
Normal file
149
src/views/subsystem/scene/components/BlbzModal.vue
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-model="_visible"
|
||||
:title="'兵力编组-' + (fdData && (fdData.resourceName || fdData.title))"
|
||||
width="900px"
|
||||
:maskClosable="false"
|
||||
:destroyOnClose="true"
|
||||
@ok="$emit('ok')"
|
||||
>
|
||||
<Grid :columns="['300px', 1]" :rows="[1, 1]" style="height: 600px">
|
||||
<ModuleWrapper title="组织机构" style="grid-area: 1 / 1 / 3 / 2">
|
||||
<template #extra>
|
||||
<a-button type="text-primary" icon="sync" style="font-size: 20px" @click="getZzjgTreeData()"></a-button>
|
||||
</template>
|
||||
<a-tree
|
||||
class="simulation-tree"
|
||||
:treeData="zzjg.treeData"
|
||||
:checkable="true"
|
||||
v-model="_checkedKeys"
|
||||
:selectedKeys.sync="zzjg.selectedKeys"
|
||||
@select="() => ($refs['zzry-table'].commitAction('query'), $refs['zzzb-table'].commitAction('query'))"
|
||||
>
|
||||
</a-tree>
|
||||
</ModuleWrapper>
|
||||
<ModuleWrapper title="组织人员">
|
||||
<AntQueryTable
|
||||
ref="zzry-table"
|
||||
height="100%"
|
||||
:queryConfig="zzry.queryConfig"
|
||||
:tableConfig="zzry.tableConfig"
|
||||
:pageConfig="zzry.pageConfig"
|
||||
:showTool="zzry.showTool"
|
||||
>
|
||||
</AntQueryTable>
|
||||
</ModuleWrapper>
|
||||
<ModuleWrapper title="组织机构">
|
||||
<AntQueryTable
|
||||
ref="zzzb-table"
|
||||
height="100%"
|
||||
:queryConfig="zzzb.queryConfig"
|
||||
:tableConfig="zzzb.tableConfig"
|
||||
:pageConfig="zzzb.pageConfig"
|
||||
:showTool="zzzb.showTool"
|
||||
>
|
||||
</AntQueryTable>
|
||||
</ModuleWrapper>
|
||||
</Grid>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
visible: { type: Boolean, required: true },
|
||||
fdData: { type: Object, required: true },
|
||||
value: { type: Array, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
zzjg: {
|
||||
treeData: [],
|
||||
selectedKeys: [],
|
||||
},
|
||||
zzry: {
|
||||
queryConfig: false,
|
||||
tableConfig: {
|
||||
table: {},
|
||||
immediate: false,
|
||||
query: () => getAction(`/baseData/fightPowerHierarchy/staff/${this.zzjg.selectedKeys[0]}`),
|
||||
columns: [
|
||||
{ dataIndex: 'serial' },
|
||||
{ title: '岗位', dataIndex: 'name', width: 'auto', minWidth: 150 },
|
||||
{ title: '岗位数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
|
||||
],
|
||||
},
|
||||
pageConfig: false,
|
||||
showTool: false,
|
||||
},
|
||||
zzzb: {
|
||||
queryConfig: false,
|
||||
tableConfig: {
|
||||
table: {},
|
||||
immediate: false,
|
||||
query: () => getAction(`/baseData/fightPowerHierarchy/weapon/${this.blbzModal.selectedKeys[0]}`),
|
||||
columns: [
|
||||
{ dataIndex: 'serial' },
|
||||
{ title: '装备名称', dataIndex: 'name', width: 'auto', minWidth: 150 },
|
||||
{ title: '装备数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
|
||||
],
|
||||
},
|
||||
pageConfig: false,
|
||||
showTool: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_visible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(v) {
|
||||
this.$emit('update:visible', v)
|
||||
},
|
||||
},
|
||||
_checkedKeys: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(v) {
|
||||
this.$emit('input', v)
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
visible(v) {
|
||||
if (v) {
|
||||
this.getZzjgTreeData()
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getZzjgTreeData() {
|
||||
try {
|
||||
const res = await getAction('/tree/organization')
|
||||
this.zzjg.treeData = res.data
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.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>
|
||||
|
|
@ -1,262 +1,190 @@
|
|||
<template>
|
||||
<div>
|
||||
<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="modelData.image || '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png'" />
|
||||
<div class="name">
|
||||
{{ modelData.team.teamName }}
|
||||
<a-button v-if="hasDetail" type="text-primary" icon="edit" @click="handleOpenMcModal"></a-button>
|
||||
</div>
|
||||
<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>
|
||||
<div class="zt-item flex ai-c">
|
||||
<div class="jcsx-wrapper" v-loading.dark="loading">
|
||||
<a-collapse class="simulation-collapse" expand-icon-position="left" :defaultActiveKey="defaultActiveKey">
|
||||
<div v-if="modelData" style="padding: 5px 0">
|
||||
<Flex ai="c" jc="c" class="name">{{ resourceName }}</Flex>
|
||||
<Flex ai="c">
|
||||
<span style="min-width: 100px">推演方：</span>
|
||||
<span>{{ modelData.team.type | forceFormat }}</span>
|
||||
</div>
|
||||
<!-- <div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">类型：</span>
|
||||
<span>{{ modelData.position.logisticType | logisticTypeFormat }}</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">方向：</span>
|
||||
<span>{{ modelData.position.direction | numberFormat }}°</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">速度：</span>
|
||||
<span>{{ modelData.position.speed }} 公里/时</span>
|
||||
</div> -->
|
||||
<div class="zt-item flex ai-c">
|
||||
<span
|
||||
:style="{
|
||||
height: '20px',
|
||||
width: '28px',
|
||||
marginLeft: '10px',
|
||||
backgroundColor: ['red', 'blue'][modelData.team.type],
|
||||
}"
|
||||
></span>
|
||||
</Flex>
|
||||
<Flex ai="c">
|
||||
<span style="min-width: 100px">经度：</span>
|
||||
<span class="flex-1">{{ modelData.team.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">
|
||||
</Flex>
|
||||
<Flex ai="c">
|
||||
<span style="min-width: 100px">纬度：</span>
|
||||
<span class="flex-1">{{ modelData.team.lat | latFormat }}</span>
|
||||
<a-button v-if="hasDetail" type="text-primary" icon="edit" @click="handleOpenLonlatModal"></a-button>
|
||||
</div>
|
||||
<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>
|
||||
<!-- <div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">高度/深度：</span>
|
||||
<span class="flex-1">{{ modelData.position.height | numberFormat }} 米(海拔)</span>
|
||||
<a-button v-if="hasDetail" type="text-primary" icon="edit" @click="handleOpenHdModal()"></a-button>
|
||||
</div>
|
||||
<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-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>{{ modelData.person.total }} 人</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">当前人数：</span>
|
||||
<span>{{ modelData.person.current }} 人</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">死亡人数：</span>
|
||||
<span>{{ modelData.person.death }} 人</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">受伤人数：</span>
|
||||
<span>{{ modelData.person.injured }} 人</span>
|
||||
</Flex>
|
||||
</div>
|
||||
<a-collapse-panel v-if="resourceType === 6" key="1" header="可保障的作战分队" class="simulation-collapse-item">
|
||||
<template #extra>
|
||||
<a-button type="text-primary" icon="plus" @click.stop="handleOpenResourceModal"> </a-button>
|
||||
<AntFormModal
|
||||
:visible.sync="resourceModal.visible"
|
||||
title="关联分队"
|
||||
:formItems="resourceModal.formItems"
|
||||
:formRules="resourceModal.formRules"
|
||||
:formData="resourceModal.formData"
|
||||
:onSubmit="submitResource"
|
||||
@success="submitResourceSuccess"
|
||||
/>
|
||||
</template>
|
||||
<div v-for="item in modelData.battleSuppliers" :key="item.battleResourceId">
|
||||
{{ item.battleResourceName }}
|
||||
</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>{{ modelData.foodInfo.startNum }}</span>
|
||||
<a-collapse-panel v-for="item in showList" :key="item.key" :header="item.header" class="simulation-collapse-item">
|
||||
<div v-for="it in item.children" :key="it.label" class="flex ai-c">
|
||||
<span style="min-width: 100px">{{ it.label }}：</span>
|
||||
<span>{{ it.value }} {{ it.unit }}</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">野战食物当前量(份)：</span>
|
||||
<span>{{ modelData.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>{{ modelData.waterInfo.startNum }}</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">用水当前量(吨)：</span>
|
||||
<span>{{ modelData.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>{{ modelData.oilInfo.startNum }}</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">油料当前量(份)：</span>
|
||||
<span>{{ modelData.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>{{ modelData.medicalInfo.startNum }}</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">药材当前量(份)：</span>
|
||||
<span>{{ modelData.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>{{ modelData.ammunition.lightArms }}</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">压制武器弹药量(吨)：</span>
|
||||
<span>{{ modelData.ammunition.suppressing }}</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">反坦克武器弹药量(吨)：</span>
|
||||
<span>{{ modelData.ammunition.antiTank }}</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">防空反导武器弹药量(吨)：</span>
|
||||
<span>{{ modelData.ammunition.antiAircraft }}</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">布扫雷装备弹药量(吨)：</span>
|
||||
<span>{{ modelData.ammunition.mineLaying }}</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">爆破器材弹药量(吨)：</span>
|
||||
<span>{{ modelData.ammunition.explosiveDevice }}</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">烟火装备弹药量(吨)：</span>
|
||||
<span>{{ modelData.ammunition.smokeDevice }}</span>
|
||||
</div>
|
||||
<div class="zt-item flex ai-c">
|
||||
<span style="min-width: 100px">防化消耗弹药量(吨)：</span>
|
||||
<span>{{ modelData.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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction } from '@/api/manage'
|
||||
import LonLatInput from './LonLatInput.vue'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
scenarioId: { type: [String, Number], required: true },
|
||||
modelData: { type: Object, default: () => ({}) },
|
||||
scenarioId: { type: [Number, String], required: true },
|
||||
resourceId: { type: [Number, String], required: true },
|
||||
resourceName: { type: String, required: true },
|
||||
resourceType: { type: Number, required: true },
|
||||
type: { type: [Number, String], required: true },
|
||||
},
|
||||
components: {
|
||||
LonLatInput,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cesium: null,
|
||||
mcModal: {
|
||||
loading: false,
|
||||
modelData: null,
|
||||
defaultActiveKey: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
|
||||
resourceModal: {
|
||||
visible: false,
|
||||
mc: '',
|
||||
},
|
||||
lonlatModal: {
|
||||
visible: false,
|
||||
lon: 0,
|
||||
lat: 0,
|
||||
},
|
||||
hdModal: {
|
||||
visible: false,
|
||||
hd: 0,
|
||||
formItems: [
|
||||
{
|
||||
label: '作战分队',
|
||||
prop: 'battleResourceId',
|
||||
required: true,
|
||||
component: 'AntOriginSelect',
|
||||
options: {
|
||||
dataSource: () =>
|
||||
postAction('/scenario/resource/', { scenarioId: this.scenarioId }).then((res) => {
|
||||
console.log(res.data, this.modelData.battleSuppliers)
|
||||
return {
|
||||
data: res.data.filter(
|
||||
(item) =>
|
||||
item.resourceType === 5 &&
|
||||
(this.modelData.battleSuppliers || []).findIndex((i) => i.battleResourceId === item.id) === -1
|
||||
),
|
||||
}
|
||||
}),
|
||||
readonly: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '保障分队',
|
||||
prop: 'supplierResourceName',
|
||||
customRender: (t) => t,
|
||||
},
|
||||
],
|
||||
formRules: {},
|
||||
formData: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasDetail() {
|
||||
return Boolean(this.modelData.id)
|
||||
showList() {
|
||||
const result = []
|
||||
if (this.modelData && this.modelData.person) {
|
||||
result.push({
|
||||
key: '2',
|
||||
header: '人员状态属性',
|
||||
children: [
|
||||
{ label: '人员编制数', value: this.modelData.person.total, unit: '人' },
|
||||
{ label: '当前人数', value: this.modelData.person.current, unit: '人' },
|
||||
{ label: '死亡人数', value: this.modelData.person.death, unit: '人' },
|
||||
{ label: '受伤人数', value: this.modelData.person.injured, unit: '人' },
|
||||
],
|
||||
})
|
||||
}
|
||||
if (this.modelData && this.modelData.food) {
|
||||
result.push({
|
||||
key: '3',
|
||||
header: '野战食品状态属性',
|
||||
children: [
|
||||
{ label: '初始数量', value: this.modelData.food.total, unit: '' },
|
||||
{ label: '当前数量', value: this.modelData.food.current, unit: '' },
|
||||
],
|
||||
})
|
||||
}
|
||||
if (this.modelData && this.modelData.water) {
|
||||
result.push({
|
||||
key: '4',
|
||||
header: '用水状态属性',
|
||||
children: [
|
||||
{ label: '初始数量', value: this.modelData.water.total, unit: '' },
|
||||
{ label: '当前数量', value: this.modelData.water.current, unit: '' },
|
||||
],
|
||||
})
|
||||
}
|
||||
if (this.modelData && this.modelData.fuel) {
|
||||
result.push({
|
||||
key: '5',
|
||||
header: '油料状态属性',
|
||||
children: [
|
||||
{ label: '初始数量', value: this.modelData.fuel.total, unit: '' },
|
||||
{ label: '当前数量', value: this.modelData.fuel.current, unit: '' },
|
||||
],
|
||||
})
|
||||
}
|
||||
if (this.modelData && this.modelData.medical) {
|
||||
result.push({
|
||||
key: '6',
|
||||
header: '药材状态属性',
|
||||
children: [
|
||||
{ label: '初始数量', value: this.modelData.medical.total, unit: '' },
|
||||
{ label: '当前数量', value: this.modelData.medical.current, unit: '' },
|
||||
],
|
||||
})
|
||||
}
|
||||
if (this.modelData && this.modelData.ammunition) {
|
||||
result.push({
|
||||
key: '7',
|
||||
header: '武器弹药状态属性',
|
||||
children: [
|
||||
{ label: '初始数量', value: this.modelData.ammunition.total, unit: '' },
|
||||
{ label: '当前数量', value: this.modelData.ammunition.current, unit: '' },
|
||||
],
|
||||
})
|
||||
}
|
||||
return result
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
resourceId: {
|
||||
handler() {
|
||||
this.getModalData()
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
logisticTypeFormat(v) {
|
||||
return {
|
||||
1: '信息对抗分队',
|
||||
2: '边防作战分队',
|
||||
3: '防化保障分队',
|
||||
4: '火力打击分队',
|
||||
5: '餐饮保障分队',
|
||||
6: '运输保障分队',
|
||||
7: '医疗分队',
|
||||
8: '工兵分队',
|
||||
}[v]
|
||||
},
|
||||
forceFormat(v) {
|
||||
return ['红方', '蓝方'][v]
|
||||
},
|
||||
numberFormat(v) {
|
||||
if (typeof v === 'number' && v) {
|
||||
return +v.toFixed(2)
|
||||
} else {
|
||||
return v
|
||||
}
|
||||
},
|
||||
lonFormat(v) {
|
||||
const originValue = Number(v)
|
||||
if (originValue) {
|
||||
|
|
@ -293,83 +221,45 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
handleOpenMcModal() {
|
||||
this.mcModal.mc = this.modelData.team.teamName
|
||||
this.mcModal.visible = true
|
||||
},
|
||||
async handleSubmilMc() {
|
||||
async getModalData() {
|
||||
try {
|
||||
this.$http({
|
||||
url: `/scenario/power/modifyUnit/${this.scenarioId}`,
|
||||
method: 'post',
|
||||
data: {
|
||||
id: this.modelData.id,
|
||||
name: this.mcModal.mc,
|
||||
},
|
||||
this.loading = true
|
||||
const res = await getAction('/statistic/info', {
|
||||
type: this.type,
|
||||
resourceId: this.resourceId,
|
||||
scenarioId: this.scenarioId,
|
||||
})
|
||||
this.$message.success('编辑单元名称成功')
|
||||
this.modelData.team.teamName = this.mcModal.mc
|
||||
this.mcModal.visible = false
|
||||
this.modelData = res.data
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
handleOpenLonlatModal() {
|
||||
this.lonlatModal.lon = Number(this.modelData.position.lng) || 0
|
||||
this.lonlatModal.lat = Number(this.modelData.position.lat) || 0
|
||||
this.lonlatModal.visible = true
|
||||
},
|
||||
async handleSubmilLonlat() {
|
||||
try {
|
||||
this.$http({
|
||||
url: `/scenario/power/modifyUnit/${this.scenarioId}`,
|
||||
method: 'post',
|
||||
data: {
|
||||
id: this.modelData.id,
|
||||
position: {
|
||||
lng: this.lonlatModal.lon,
|
||||
lat: this.lonlatModal.lat,
|
||||
},
|
||||
},
|
||||
})
|
||||
this.$message.success('修改单元经纬度成功')
|
||||
this.modelData.position.lng = '' + this.lonlatModal.lon
|
||||
this.modelData.position.lat = '' + this.lonlatModal.lat
|
||||
this.lonlatModal.visible = false
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
handleOpenResourceModal() {
|
||||
this.resourceModal.formData = {
|
||||
supplierResourceId: this.resourceId,
|
||||
supplierResourceName: this.resourceName,
|
||||
}
|
||||
this.resourceModal.visible = true
|
||||
},
|
||||
|
||||
handleOpenHdModal() {
|
||||
this.hdModal.hd = Number(this.modelData.position.height) || 0
|
||||
this.hdModal.visible = true
|
||||
submitResource(formData) {
|
||||
return postAction('/battleSupplier/save', formData)
|
||||
},
|
||||
async handleSubmilHd() {
|
||||
try {
|
||||
this.$http({
|
||||
url: `/scenario/power/modifyUnit/${this.scenarioId}`,
|
||||
method: 'post',
|
||||
data: {
|
||||
id: this.modelData.id,
|
||||
position: {
|
||||
height: this.hdModal.hd,
|
||||
},
|
||||
},
|
||||
})
|
||||
this.$message.success('修改单元高度/深度成功')
|
||||
this.modelData.position.height = this.hdModal.hd
|
||||
this.hdModal.visible = false
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
submitResourceSuccess() {
|
||||
this.getModalData()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jcsx-wrapper {
|
||||
height: 100%;
|
||||
padding: 0 15px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.simulation-collapse::v-deep {
|
||||
background-color: transparent;
|
||||
color: #bbdded;
|
||||
|
|
@ -394,10 +284,10 @@ export default {
|
|||
color: #00baff;
|
||||
font-size: 16px;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// flex-direction: row-reverse;
|
||||
// justify-content: space-between;
|
||||
.ant-collapse-arrow {
|
||||
position: initial;
|
||||
font-size: 16px;
|
||||
|
|
@ -405,15 +295,10 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.image {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background-color: #0c3040;
|
||||
}
|
||||
.name {
|
||||
color: #00baff;
|
||||
text-decoration: underline;
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.simulation-select::v-deep {
|
||||
.ant-select-selection {
|
||||
|
|
|
|||
29
src/views/subsystem/scene/components/Zoom.vue
Normal file
29
src/views/subsystem/scene/components/Zoom.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-button
|
||||
v-if="max"
|
||||
type="text-primary"
|
||||
icon="fullscreen-exit"
|
||||
:style="{ fontSize: size }"
|
||||
@click="$emit('zoom-min')"
|
||||
></a-button>
|
||||
<a-button
|
||||
v-else
|
||||
type="text-primary"
|
||||
icon="fullscreen"
|
||||
:style="{ fontSize: size }"
|
||||
@click="$emit('zoom-max')"
|
||||
></a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
max: { type: Boolean, required: true },
|
||||
size: { type: String, default: '20px' },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -1,125 +1,174 @@
|
|||
<template>
|
||||
<Flex fd="co" class="zzxd-wrapper">
|
||||
<Flex v-loading.dark="loading" fd="co" class="zzxd-wrapper">
|
||||
<Flex class="zzxd-header" ai="c" jc="sb">
|
||||
<div class="zzxd-title">作战行动</div>
|
||||
<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>
|
||||
<a-button type="text-primary" icon="edit" v-if="checkedAction" @click="handleOpenEditModal"></a-button>
|
||||
<a-button type="text-danger" icon="delete" v-if="checkedAction" @click="handleDelete"></a-button>
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-button type="text-primary" icon="plus"></a-button>
|
||||
<a-menu slot="overlay" @click="handleOpenAddModal">
|
||||
<a-menu-item v-for="(text, key) in actionTypeMapText" :key="key">
|
||||
<a-button type="text-primary">{{ text }}</a-button>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
<AntFormModal
|
||||
:visible.sync="AEModal.visible"
|
||||
:title="AEModal.title"
|
||||
width="900px"
|
||||
:formItems="AEModal.formItems"
|
||||
:formRules="AEModal.formRules"
|
||||
:formData="AEModal.formData"
|
||||
:onSubmit="submitAE"
|
||||
@success="submitAESuccess"
|
||||
></AntFormModal>
|
||||
</div>
|
||||
<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>
|
||||
</Flex>
|
||||
<div class="flex-1 scroller-y">
|
||||
<div v-for="item in actionList" :key="item.id" class="action-item flex" @click="checkedAction = item">
|
||||
<Flex
|
||||
v-for="item in actionList"
|
||||
:key="item.id"
|
||||
:class="{
|
||||
'action-item': true,
|
||||
checked: checkedAction && checkedAction.id === item.id,
|
||||
}"
|
||||
@click="checkedAction = item"
|
||||
>
|
||||
<div class="action-icon">
|
||||
<div class="action-line"></div>
|
||||
<a-radio :checked="checkedAction && 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 class="action-title">【{{ actionTypeMapText[item.type] }}】{{ item.name || '- -' }}</div>
|
||||
<div class="action-destination">目的地：{{ item.toLng }}, {{ item.toLat }}</div>
|
||||
<div class="action-time">{{ item.startTime }} ~ {{ item.endTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</div>
|
||||
</Flex>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
actionList: { type: Array, default: () => [] },
|
||||
scenarioId: { type: [Number, String], required: true },
|
||||
resourceId: { type: [Number, String], required: true },
|
||||
resourceType: { type: [Number, String], required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
actionList: [],
|
||||
checkedAction: null,
|
||||
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: '食品保障' }
|
||||
],
|
||||
}),
|
||||
},
|
||||
actionTypeMapText: {
|
||||
1: '移动任务',
|
||||
2: '作战任务',
|
||||
// 3: '整备任务',
|
||||
},
|
||||
allFormItems: [
|
||||
{ label: '分队id', prop: 'resourceId' },
|
||||
{ label: '任务类型', prop: 'type' },
|
||||
{ label: '任务内容', prop: 'name' },
|
||||
{
|
||||
label: '开始时间',
|
||||
prop: 'startTime',
|
||||
component: 'a-date-picker',
|
||||
options: {
|
||||
showTime: true,
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
{ 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' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '结束时间',
|
||||
prop: 'endTime',
|
||||
component: 'a-date-picker',
|
||||
options: {
|
||||
showTime: true,
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
},
|
||||
},
|
||||
{ label: '持续时间', prop: 'duringTime', component: 'DurationInput' },
|
||||
{ label: '目的地经度', prop: 'toLng', component: 'LongitudeInput' },
|
||||
{ label: '目的地纬度', prop: 'toLat', component: 'LatitudeInput' },
|
||||
],
|
||||
actionTypeMapFormItemProps: {
|
||||
1: ['resourceId', 'type', 'name', 'startTime', 'endTime', 'toLng', 'toLat'],
|
||||
2: ['resourceId', 'type', 'name', 'startTime', 'duringTime', 'toLng', 'toLat'],
|
||||
3: ['resourceId', 'type', 'name', 'startTime', 'duringTime', 'toLng', 'toLat'],
|
||||
},
|
||||
AEModal: {
|
||||
title: '',
|
||||
visible: false,
|
||||
formItems: [],
|
||||
formRules: {},
|
||||
formData: {},
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
resourceId: {
|
||||
handler() {
|
||||
this.getActionList()
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleOpenAddActionModal() {
|
||||
this.actionModal.title = '添加事件信息'
|
||||
this.actionModal.formData = {}
|
||||
this.actionModal.visible = true
|
||||
},
|
||||
handleOpenEditActionModal() {
|
||||
this.actionModal.title = '修改事件信息'
|
||||
this.actionModal.formData = { ...this.checkedAction }
|
||||
this.actionModal.visible = true
|
||||
},
|
||||
async handleSubmilAction() {
|
||||
async getActionList() {
|
||||
try {
|
||||
await this.$http({
|
||||
url: '/save',
|
||||
method: 'post',
|
||||
data: this.actionModal.formData,
|
||||
this.loading = true
|
||||
const res = await postAction('/scenarioTask/taskList', {
|
||||
scenarioId: this.scenarioId,
|
||||
resourceId: this.resourceId,
|
||||
})
|
||||
this.$message.success(`${this.actionModal.title}成功`)
|
||||
this.actionList = res.data
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
handleOpenAddModal({ key: taskType }) {
|
||||
this.AEModal.formItems = this.actionTypeMapFormItemProps[taskType].map((p) =>
|
||||
this.allFormItems.find((i) => i.prop === p)
|
||||
)
|
||||
this.AEModal.formData = { taskType, resourceId: this.resourceId, scenarioId: this.scenarioId }
|
||||
this.AEModal.title = `新增${this.actionTypeMapText[taskType]}`
|
||||
this.AEModal.visible = true
|
||||
},
|
||||
async handleOpenEditModal() {
|
||||
try {
|
||||
const taskType = this.checkedAction.taskType
|
||||
const id = this.checkedAction.id
|
||||
const res = await getAction(`/scenarioTask/${id}`)
|
||||
this.AEModal.formItems = this.actionTypeMapFormItemProps[taskType].map((p) =>
|
||||
this.allFormItems.find((i) => i.prop === p)
|
||||
)
|
||||
this.AEModal.formData = res.data
|
||||
this.AEModal.title = `修改${this.actionTypeMapText[taskType]}`
|
||||
this.AEModal.visible = true
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
async handleDeleteAction() {
|
||||
submitAE(formData) {
|
||||
return postAction('/scenarioTask/save', formData)
|
||||
},
|
||||
submitAESuccess() {
|
||||
this.getActionList()
|
||||
},
|
||||
async handleDelete() {
|
||||
try {
|
||||
await this.$confirm('确认删除所选事件吗？')
|
||||
await this.$http({
|
||||
url: '/delete',
|
||||
method: 'delete',
|
||||
params: { id: this.checkedAction.id },
|
||||
})
|
||||
this.$message.success(`删除事件成功`)
|
||||
await this.$confirm('确认删除所选任务吗？')
|
||||
const id = this.checkedAction.id
|
||||
await getAction(`/scenarioTask/remove/${id}`)
|
||||
this.$message.success(`删除任务成功`)
|
||||
this.getActionList()
|
||||
} catch (error) {
|
||||
this.$message.success(`删除事件失败`)
|
||||
this.$message.success(`删除任务失败`)
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
|
|
@ -130,8 +179,10 @@ export default {
|
|||
<style lang="less" scoped>
|
||||
.zzxd-wrapper {
|
||||
height: 100%;
|
||||
padding: 0 0 15px;
|
||||
.zzxd-header {
|
||||
padding: 5px 0;
|
||||
margin: 0 15px;
|
||||
border-bottom: 1px solid #00baff22;
|
||||
.zzxd-title {
|
||||
color: #00baff;
|
||||
|
|
@ -160,7 +211,22 @@ export default {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
.action-item.checked {
|
||||
background-color: #bae7ff22;
|
||||
}
|
||||
.action-item.checked:hover,
|
||||
.action-item:hover {
|
||||
background-color: #bae7ff44;
|
||||
}
|
||||
.action-title {
|
||||
font-size: 18px;
|
||||
color: #00baff;
|
||||
}
|
||||
.action-destination {
|
||||
font-size: 14px;
|
||||
}
|
||||
.action-time {
|
||||
font-size: 12px;
|
||||
color: #cccccc;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<template #extra>
|
||||
<a-button type="text-primary" icon="sync" style="font-size: 20px" @click="getZzbzllTreeData()"></a-button>
|
||||
</template>
|
||||
<div class="normal" style="padding: 5px; overflow-y: auto">
|
||||
<div v-loading.dark="zzbzll.loading" class="normal" style="padding: 5px; overflow-y: auto">
|
||||
<a-tree
|
||||
class="simulation-tree"
|
||||
:treeData="zzbzll.treeData"
|
||||
|
|
@ -61,73 +61,42 @@
|
|||
</ModuleWrapper>
|
||||
<ModuleWrapper height="55%">
|
||||
<template #title>
|
||||
<a-radio-group v-model="model.type" button-style="solid" @change="getModelListData">
|
||||
<a-radio-group v-model="fd.type" button-style="solid" @change="getFdListData">
|
||||
<a-radio-button :value="5">作战分队</a-radio-button>
|
||||
<a-radio-button :value="6">保障分队</a-radio-button>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
<Flex class="normal" fd="co" style="padding: 5px">
|
||||
<Flex v-loading.dark="fd.loading" class="normal" fd="co" style="padding: 5px">
|
||||
<Flex class="flex-1 scroller-y" fw="w" ac="fs">
|
||||
<Flex v-for="item in model.listData" :key="item.id" class="model-item" fd="co" ai="c">
|
||||
<img class="model-image" :src="item.imgBase64" :draggable="true" @dragend="dragend(item, $event)" />
|
||||
<span class="model-name">{{ item.name }}</span>
|
||||
<Flex v-for="item in fd.listData" :key="item.id" class="fd-item" fd="co" ai="c">
|
||||
<img class="fd-image" :src="item.imgBase64" :draggable="true" @dragend="dragend(item, $event)" />
|
||||
<span class="fd-name">{{ item.name }}</span>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</ModuleWrapper>
|
||||
</div>
|
||||
<div class="pr zi1" style="grid-area: 2 / 3 / 3 / 4">
|
||||
<ModuleWrapper title="兵力编组" height="30%">
|
||||
<Grid class="pr zi1" :rows="rightRows" gap="0px" style="grid-area: 2 / 3 / 3 / 4">
|
||||
<ModuleWrapper title="兵力编组" height="100%">
|
||||
<template #extra>
|
||||
<a-button type="text-primary" icon="plus" @click="handleOpenBlbzModal()"></a-button>
|
||||
<a-modal
|
||||
v-model="blbzModal.visible"
|
||||
:title="'兵力编组-' + (blbz.modelData && (blbz.modelData.resourceName || blbz.modelData.title))"
|
||||
width="900px"
|
||||
:maskClosable="false"
|
||||
:destroyOnClose="true"
|
||||
@ok="handleSubmitBlbz()"
|
||||
>
|
||||
<Grid :columns="['300px', 1]" :rows="[1, 1]" style="height: 600px">
|
||||
<ModuleWrapper title="组织机构" style="grid-row: 1 / 3">
|
||||
<a-tree
|
||||
class="simulation-tree"
|
||||
:treeData="blbzModal.treeData"
|
||||
:checkable="true"
|
||||
v-model="blbzModal.checkedKeys"
|
||||
:selectedKeys.sync="blbzModal.selectedKeys"
|
||||
@select="
|
||||
() => ($refs['zzry-table'].commitAction('query'), $refs['zzzb-table'].commitAction('query'))
|
||||
"
|
||||
>
|
||||
</a-tree>
|
||||
</ModuleWrapper>
|
||||
<ModuleWrapper title="组织人员">
|
||||
<AntQueryTable
|
||||
ref="zzry-table"
|
||||
height="100%"
|
||||
:queryConfig="blbzModal.zzry.queryConfig"
|
||||
:tableConfig="blbzModal.zzry.tableConfig"
|
||||
:pageConfig="blbzModal.zzry.pageConfig"
|
||||
:showTool="blbzModal.zzry.showTool"
|
||||
>
|
||||
</AntQueryTable>
|
||||
</ModuleWrapper>
|
||||
<ModuleWrapper title="组织机构">
|
||||
<AntQueryTable
|
||||
ref="zzzb-table"
|
||||
height="100%"
|
||||
:queryConfig="blbzModal.zzzb.queryConfig"
|
||||
:tableConfig="blbzModal.zzzb.tableConfig"
|
||||
:pageConfig="blbzModal.zzzb.pageConfig"
|
||||
:showTool="blbzModal.zzzb.showTool"
|
||||
>
|
||||
</AntQueryTable>
|
||||
</ModuleWrapper>
|
||||
</Grid>
|
||||
</a-modal>
|
||||
<template v-if="zzbzll.selectedFd">
|
||||
<a-button
|
||||
type="text-primary"
|
||||
icon="setting"
|
||||
style="font-size: 20px"
|
||||
@click="handleOpenBlbzModal()"
|
||||
></a-button>
|
||||
<BlbzModal
|
||||
:visible.sync="blbz.modalVisible"
|
||||
:fdData="zzbzll.selectedFd"
|
||||
v-model="blbz.modalCheckedKeys"
|
||||
@ok="handleSubmitBlbz"
|
||||
/>
|
||||
<a-button type="text-primary" icon="sync" style="font-size: 20px" @click="getBlbzTreeData()"></a-button>
|
||||
</template>
|
||||
<Zoom :max="rightViewer === 'blbz'" @zoom-max="rightViewer = 'blbz'" @zoom-min="rightViewer = ''" />
|
||||
</template>
|
||||
<div class="normal" style="padding: 5px; overflow-y: auto">
|
||||
<div v-loading.dark="blbz.loading" class="normal" style="padding: 5px; overflow-y: auto">
|
||||
<a-tree
|
||||
class="simulation-tree"
|
||||
:treeData="showBlbzCheckedTreeData"
|
||||
|
|
@ -137,29 +106,61 @@
|
|||
</a-tree>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
<ModuleWrapper height="70%">
|
||||
<template #title>
|
||||
<a-radio-group v-model="modelInfoType" button-style="solid">
|
||||
<a-radio-button value="jcsx">基础属性</a-radio-button>
|
||||
<a-radio-button value="zzxd">作战行动</a-radio-button>
|
||||
<a-radio-button value="bzrw">保障任务</a-radio-button>
|
||||
</a-radio-group>
|
||||
<ModuleWrapper title="基础属性" height="100%">
|
||||
<template #extra>
|
||||
<template v-if="zzbzll.selectedFd">
|
||||
<a-button
|
||||
type="text-primary"
|
||||
icon="sync"
|
||||
style="font-size: 20px"
|
||||
@click="$refs.jcsx.getModalData()"
|
||||
></a-button>
|
||||
</template>
|
||||
<Zoom :max="rightViewer === 'jcsx'" @zoom-max="rightViewer = 'jcsx'" @zoom-min="rightViewer = ''" />
|
||||
</template>
|
||||
<div class="normal" style="padding: 15px 0">
|
||||
<div style="height: 100%; padding: 0 15px; overflow-y: auto">
|
||||
<Jcsx v-if="modelInfoType === 'jcsx'" :scenarioId="scenarioId" :modelData="jcsx.data" />
|
||||
<Zzxd v-if="modelInfoType === 'zzxd'" :actionList="zzxd.data" />
|
||||
<BzTask v-if="modelInfoType === 'bzrw'" :scenarioId="scenarioId" :resourceid="resourceid" :type="type" />
|
||||
</div>
|
||||
<Jcsx
|
||||
ref="jcsx"
|
||||
v-if="zzbzll.selectedFd"
|
||||
:scenarioId="scenarioId"
|
||||
:resourceId="zzbzll.selectedFd.id"
|
||||
:resourceName="zzbzll.selectedFd.title"
|
||||
:resourceType="zzbzll.selectedFd.resourceType"
|
||||
:type="zzbzll.selectedFd.type"
|
||||
/>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
</div>
|
||||
<ModuleWrapper :title="xdrw.resourceTypeMapTitle[zzbzll.selectedFd?.resourceType] || '行动任务'" height="100%">
|
||||
<template #extra>
|
||||
<template v-if="zzbzll.selectedFd">
|
||||
<a-button
|
||||
type="text-primary"
|
||||
icon="sync"
|
||||
style="font-size: 20px"
|
||||
@click="$refs.xdrw.getActionList()"
|
||||
></a-button>
|
||||
</template>
|
||||
<Zoom :max="rightViewer === 'xdrw'" @zoom-max="rightViewer = 'xdrw'" @zoom-min="rightViewer = ''" />
|
||||
</template>
|
||||
<div class="normal" style="padding: 0">
|
||||
<Zzxd
|
||||
ref="xdrw"
|
||||
v-if="zzbzll.selectedFd"
|
||||
:scenarioId="scenarioId"
|
||||
:resourceId="zzbzll.selectedFd.id"
|
||||
:resourceType="zzbzll.selectedFd.resourceType"
|
||||
/>
|
||||
</div>
|
||||
</ModuleWrapper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Flex>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction } from '@/api/manage'
|
||||
import Zoom from './components/Zoom.vue'
|
||||
import BlbzModal from './components/BlbzModal.vue'
|
||||
import Jcsx from './components/Jcsx.vue'
|
||||
import Zzxd from './components/Zzxd.vue'
|
||||
import BzTask from './components/BzTask.vue'
|
||||
|
|
@ -167,6 +168,8 @@ import BzTask from './components/BzTask.vue'
|
|||
export default {
|
||||
name: 'SubsystemScenePresetting',
|
||||
components: {
|
||||
Zoom,
|
||||
BlbzModal,
|
||||
Jcsx,
|
||||
Zzxd,
|
||||
BzTask,
|
||||
|
|
@ -177,8 +180,10 @@ export default {
|
|||
scenarioName: '',
|
||||
cesium: null,
|
||||
zzbzll: {
|
||||
loading: false,
|
||||
treeData: [],
|
||||
selectedKeys: [],
|
||||
selectedFd: null,
|
||||
},
|
||||
zzbzllModal: {
|
||||
title: '修改名称',
|
||||
|
|
@ -190,85 +195,44 @@ export default {
|
|||
formRules: {},
|
||||
formData: {},
|
||||
},
|
||||
model: {
|
||||
fd: {
|
||||
type: 5,
|
||||
loading: false,
|
||||
listData: [],
|
||||
},
|
||||
blbz: {
|
||||
modelData: null,
|
||||
loading: false,
|
||||
treeData: [],
|
||||
checkedKeys: [],
|
||||
showKeys: [],
|
||||
modalVisible: false,
|
||||
fdData: null,
|
||||
modalCheckedKeys: [],
|
||||
},
|
||||
blbzModal: {
|
||||
visible: false,
|
||||
treeData: [],
|
||||
checkedKeys: [],
|
||||
selectedKeys: [],
|
||||
zzry: {
|
||||
queryConfig: false,
|
||||
tableConfig: {
|
||||
table: {},
|
||||
immediate: false,
|
||||
query: () =>
|
||||
this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/staff/${this.blbzModal.selectedKeys[0]}`,
|
||||
method: 'get',
|
||||
}),
|
||||
columns: [
|
||||
{ dataIndex: 'serial' },
|
||||
{ title: '岗位', dataIndex: 'name', width: 'auto', minWidth: 150 },
|
||||
{ title: '岗位数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
|
||||
],
|
||||
},
|
||||
pageConfig: false,
|
||||
showTool: false,
|
||||
rightViewer: '',
|
||||
xdrw: {
|
||||
resourceTypeMapTitle: {
|
||||
5: '作战行动',
|
||||
6: '保障任务',
|
||||
},
|
||||
zzzb: {
|
||||
queryConfig: false,
|
||||
tableConfig: {
|
||||
table: {},
|
||||
immediate: false,
|
||||
query: () =>
|
||||
this.$http({
|
||||
url: `/baseData/fightPowerHierarchy/weapon/${this.blbzModal.selectedKeys[0]}`,
|
||||
method: 'get',
|
||||
}),
|
||||
columns: [
|
||||
{ dataIndex: 'serial' },
|
||||
{ title: '装备名称', dataIndex: 'name', width: 'auto', minWidth: 150 },
|
||||
{ title: '装备数量', dataIndex: 'number', type: 'number', width: 'auto', minWidth: 150 },
|
||||
],
|
||||
},
|
||||
pageConfig: false,
|
||||
showTool: false,
|
||||
},
|
||||
},
|
||||
modelInfoType: 'jcsx',
|
||||
jcsx: {
|
||||
data: {
|
||||
team: {},
|
||||
person: {},
|
||||
},
|
||||
},
|
||||
zzxd: {
|
||||
data: [
|
||||
{
|
||||
id: '1',
|
||||
typeName: '机动',
|
||||
typeType: '1',
|
||||
beginDateTime: '2000-01-01 00:00:00',
|
||||
endDateTime: '2000-01-01 00:00:00',
|
||||
lon: '120',
|
||||
lat: '20',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
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]
|
||||
}
|
||||
},
|
||||
showBlbzCheckedTreeData() {
|
||||
const target = []
|
||||
this.getTree(target, this.blbz.treeData, this.blbz.checkedKeys)
|
||||
this.getTree(target, this.blbz.treeData, this.blbz.showKeys)
|
||||
return target
|
||||
},
|
||||
},
|
||||
|
|
@ -279,22 +243,23 @@ export default {
|
|||
mounted() {
|
||||
this.cesium = new window.MyCesium('scene-presetting-cesium-container')
|
||||
this.getZzbzllTreeData(true)
|
||||
this.getModelListData()
|
||||
this.getFdListData()
|
||||
},
|
||||
methods: {
|
||||
getTree(target, treeData, checkedKeys) {
|
||||
getTree(target, treeData, showKeys) {
|
||||
treeData.forEach((item) => {
|
||||
const newChildren = []
|
||||
if (item.children && item.children.length > 0) {
|
||||
this.getTree(newChildren, item.children, checkedKeys)
|
||||
this.getTree(newChildren, item.children, showKeys)
|
||||
}
|
||||
if (newChildren.length > 0 || checkedKeys.includes(item.key)) {
|
||||
if (newChildren.length > 0 || showKeys.includes(item.key)) {
|
||||
target.push({ ...item, children: newChildren })
|
||||
}
|
||||
})
|
||||
},
|
||||
async getZzbzllTreeData(initPlot = false) {
|
||||
try {
|
||||
this.zzbzll.loading = true
|
||||
const res = await postAction(`/scenario/resource/`, {
|
||||
scenarioId: this.scenarioId,
|
||||
})
|
||||
|
|
@ -317,6 +282,8 @@ export default {
|
|||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.zzbzll.loading = false
|
||||
}
|
||||
},
|
||||
initPlot(plots) {
|
||||
|
|
@ -348,25 +315,32 @@ export default {
|
|||
console.log(error)
|
||||
}
|
||||
},
|
||||
async getModelListData() {
|
||||
async getFdListData() {
|
||||
try {
|
||||
const res = await getAction(`/baseData/scenario/resources/${this.model.type}`)
|
||||
this.model.listData = res.data
|
||||
this.fd.loading = true
|
||||
const res = await getAction(`/baseData/scenario/resources/${this.fd.type}`)
|
||||
this.fd.listData = res.data
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.fd.loading = false
|
||||
}
|
||||
},
|
||||
dragend(item, e) {
|
||||
const minX = this.$refs['scene-presetting-cesium-container'].offsetLeft
|
||||
const maxX = this.$refs['scene-presetting-cesium-container'].offsetLeft + this.$refs['scene-presetting-cesium-container'].offsetWidth
|
||||
const maxX =
|
||||
this.$refs['scene-presetting-cesium-container'].offsetLeft +
|
||||
this.$refs['scene-presetting-cesium-container'].offsetWidth
|
||||
const minY = this.$refs['scene-presetting-cesium-container'].offsetTop
|
||||
const maxY = this.$refs['scene-presetting-cesium-container'].offsetTop + this.$refs['scene-presetting-cesium-container'].offsetHeight
|
||||
const maxY =
|
||||
this.$refs['scene-presetting-cesium-container'].offsetTop +
|
||||
this.$refs['scene-presetting-cesium-container'].offsetHeight
|
||||
if (e.x < minX || e.x > maxX || e.Y < minY || e.Y > maxY) return
|
||||
|
||||
const x = e.x - this.$refs['scene-presetting-cesium-container'].offsetLeft
|
||||
const y = e.y - this.$refs['scene-presetting-cesium-container'].offsetTop
|
||||
const { plotId, longitude, latitude } = this.cesium.addPlotByOffset(item.imgBase64, { x, y })
|
||||
this.savePlot(this.model.queryParams.force, item, { plotId, longitude, latitude })
|
||||
this.savePlot(this.fd.queryParams.force, item, { plotId, longitude, latitude })
|
||||
},
|
||||
async savePlot(force, item, { plotId, longitude, latitude }) {
|
||||
try {
|
||||
|
|
@ -386,61 +360,49 @@ export default {
|
|||
},
|
||||
handleSelectZzbzll(selectedKeys, { node }) {
|
||||
this.cesium.setClientByCenter({ longitude: +node.dataRef.lng, latitude: +node.dataRef.lat })
|
||||
this.blbz.modelData = node.dataRef
|
||||
this.resourceid = node.dataRef.id
|
||||
this.type = node.dataRef.type
|
||||
this.zzbzll.selectedFd = node.dataRef
|
||||
this.getBlbzTreeData()
|
||||
this.getJcsxData()
|
||||
},
|
||||
async getBlbzTreeData() {
|
||||
try {
|
||||
const res = await getAction('/tree/organization')
|
||||
this.blbz.treeData = res.data
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
try {
|
||||
const { type, id: resourceId, scenarioId } = this.blbz.modelData
|
||||
const res = await postAction('/scenarioOrgPost/getPost', { type, resourceId, scenarioId })
|
||||
this.blbz.checkedKeys = res.data
|
||||
this.blbz.loading = true
|
||||
const { type, id: resourceId, scenarioId } = this.zzbzll.selectedFd
|
||||
const res = await Promise.all([
|
||||
getAction('/tree/organization'),
|
||||
postAction('/scenarioOrgPost/getPost', { type, resourceId, scenarioId }),
|
||||
])
|
||||
this.blbz.treeData = res[0].data
|
||||
this.blbz.showKeys = res[1].data
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.blbz.loading = false
|
||||
}
|
||||
},
|
||||
async handleOpenBlbzModal() {
|
||||
if (!this.blbz.modelData) {
|
||||
if (!this.zzbzll.selectedFd) {
|
||||
this.$message.error('未选择分队!')
|
||||
return
|
||||
}
|
||||
this.blbzModal.treeData = this.blbz.treeData
|
||||
this.blbzModal.checkedKeys = [...this.blbz.checkedKeys]
|
||||
this.blbzModal.visible = true
|
||||
this.blbz.modalCheckedKeys = [...this.blbz.showKeys]
|
||||
this.blbz.modalVisible = true
|
||||
},
|
||||
async handleSubmitBlbz() {
|
||||
try {
|
||||
const { type, id: resourceId, scenarioId } = this.blbz.modelData
|
||||
const { type, id: resourceId, scenarioId } = this.zzbzll.selectedFd
|
||||
const res = await postAction('/scenarioOrgPost/batchSave', {
|
||||
type,
|
||||
resourceId,
|
||||
scenarioId,
|
||||
orgIdList: this.blbzModal.checkedKeys,
|
||||
orgIdList: this.blbz.modalCheckedKeys,
|
||||
})
|
||||
this.blbzModal.visible = false
|
||||
this.blbz.modalVisible = false
|
||||
this.$message.success(res.message)
|
||||
this.getBlbzTreeData()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
async getJcsxData() {
|
||||
try {
|
||||
const { type, id: resourceId, scenarioId } = this.blbz.modelData
|
||||
const res = await getAction('/statistic/info', { type, resourceId, scenarioId })
|
||||
this.jcsx.data = res.data
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -492,23 +454,23 @@ export default {
|
|||
background-color: #bae7ff22;
|
||||
}
|
||||
}
|
||||
.model-item {
|
||||
.fd-item {
|
||||
width: calc(100% / 3);
|
||||
.model-image {
|
||||
.fd-image {
|
||||
width: 74px;
|
||||
height: 62px;
|
||||
object-fit: cover;
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
.model-name {
|
||||
.fd-name {
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.model-item:hover {
|
||||
.model-name {
|
||||
.fd-item:hover {
|
||||
.fd-name {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user