编辑单元名称,修改单元经纬度,设置单元高度/深度

This commit is contained in:
liaoboping 2025-08-18 17:19:38 +08:00
parent 7fd607f5e6
commit ae910a6120
2 changed files with 303 additions and 71 deletions

View File

@ -1,34 +1,34 @@
<template>
<div class="lon-lat-input">
<div class="lon-input" style="padding: 10px 0;">
<a-select style="width: 76px;margin-right: 20px;">
<a-select-option value="E">东经</a-select-option>
<a-select-option value="W">西经</a-select-option>
<div class="lon-input" style="padding: 10px 0">
<a-select v-model="lonSelect" style="width: 76px; margin-right: 20px">
<a-select-option :value="1">东经</a-select-option>
<a-select-option :value="-1">西经</a-select-option>
</a-select>
<a-input-number style="width: 72px;"></a-input-number>
<span style="margin: 0 8px;">°</span>
<span style="margin: 0 12px;"></span>
<a-input-number style="width: 60px;"></a-input-number>
<span style="margin: 0 8px;">°</span>
<a-input-number style="width: 60px;"></a-input-number>
<span style="margin: 0 8px;"></span>
<a-input-number style="width: 60px;"></a-input-number>
<span style="margin: 0 8px;"></span>
<a-input-number v-model="lonNumber" :min="0" :max="180" :precision="8" style="width: 152px" />
<span style="margin: 0 8px">°</span>
<span style="margin: 0 12px"></span>
<a-input-number v-model="lonDegree" :min="0" :max="180" :step="1" :precision="0" style="width: 60px" />
<span style="margin: 0 8px">°</span>
<a-input-number v-model="lonMinute" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
<span style="margin: 0 8px"></span>
<a-input-number v-model="lonSecond" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
<span style="margin: 0 8px"></span>
</div>
<div class="lat-input" style="padding: 10px 0;">
<a-select style="width: 76px;margin-right: 20px;">
<a-select-option value="N">北纬</a-select-option>
<a-select-option value="S">南纬</a-select-option>
<div class="lat-input" style="padding: 10px 0">
<a-select v-model="latSelect" style="width: 76px; margin-right: 20px">
<a-select-option :value="1">北纬</a-select-option>
<a-select-option :value="-1">南纬</a-select-option>
</a-select>
<a-input-number style="width: 72px;"></a-input-number>
<span style="margin: 0 8px;">°</span>
<span style="margin: 0 12px;"></span>
<a-input-number style="width: 60px;"></a-input-number>
<span style="margin: 0 8px;">°</span>
<a-input-number style="width: 60px;"></a-input-number>
<span style="margin: 0 8px;"></span>
<a-input-number style="width: 60px;"></a-input-number>
<span style="margin: 0 8px;"></span>
<a-input-number v-model="latNumber" :min="0" :max="180" :precision="8" style="width: 152px" />
<span style="margin: 0 8px">°</span>
<span style="margin: 0 12px"></span>
<a-input-number v-model="latDegree" :min="0" :max="180" :step="1" :precision="0" style="width: 60px" />
<span style="margin: 0 8px">°</span>
<a-input-number v-model="latMinute" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
<span style="margin: 0 8px"></span>
<a-input-number v-model="latSecond" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
<span style="margin: 0 8px"></span>
</div>
</div>
</template>
@ -39,6 +39,104 @@ export default {
lon: { type: Number, required: true },
lat: { type: Number, required: true },
},
data() {
return {
EWSelect: 1,
NSSelect: 1,
}
},
computed: {
lonSelect: {
get() {
return this.lon ? this.lon / this.lonNumber : this.EWSelect
},
set(v) {
this.$emit('update:lon', this.lonNumber * v)
this.EWSelect = v
},
},
lonNumber: {
get() {
return Math.abs(this.lon)
},
set(v) {
this.$emit('update:lon', Math.abs(v) * this.lonSelect)
},
},
lonDegree: {
get() {
return Math.floor(this.lonNumber)
},
set(v) {
this.$emit('update:lon', Math.abs(v) * this.lonSelect + this.lonMinute / 60 + this.lonSecond / 3600)
},
},
lonMinute: {
get() {
return Math.floor(this.lonNumber * 60) % 60
},
set(v) {
this.$emit('update:lon', this.lonDegree * this.lonSelect + Math.abs(v) / 60 + this.lonSecond / 3600)
},
},
lonSecond: {
get() {
return Math.floor(this.lonNumber * 3600) % 60
},
set(v) {
this.$emit('update:lon', this.lonDegree * this.lonSelect + this.lonMinute / 60 + Math.abs(v) / 3600)
},
},
latSelect: {
get() {
return this.lat ? this.lat / this.latNumber : this.NSSelect
},
set(v) {
this.$emit('update:lat', this.latNumber * v)
this.NSSelect = v
},
},
latNumber: {
get() {
return Math.abs(this.lat)
},
set(v) {
this.$emit('update:lat', Math.abs(v) * this.latSelect)
},
},
latDegree: {
get() {
return Math.floor(this.latNumber)
},
set(v) {
this.$emit('update:lat', Math.abs(v) * this.latSelect + this.latMinute / 60 + this.latSecond / 3600)
},
},
latMinute: {
get() {
return Math.floor(this.latNumber * 60) % 60
},
set(v) {
this.$emit('update:lat', this.latDegree * this.latSelect + Math.abs(v) / 60 + this.latSecond / 3600)
},
},
latSecond: {
get() {
return Math.floor(this.latNumber * 3600) % 60
},
set(v) {
this.$emit('update:lat', this.latDegree * this.latSelect + this.latMinute / 60 + Math.abs(v) / 3600)
},
},
},
created() {
if (this.lon < 0) {
this.EWSelect = 'W'
}
if (this.lat < 0) {
this.NSSelect = 'S'
}
},
}
</script>

View File

@ -45,8 +45,11 @@
<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>
<img class="image" :src="right.detail.image || '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png'" />
<div class="name">
{{ right.detail.name }}
<a-button 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
@ -69,123 +72,115 @@
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">速度</span>
<span>{{ right.jcsx.position.speed }} 公里/</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.jcsx.position.lng | lonFormat }}</span>
<a-button
type="text-primary"
icon="edit"
@click="handleOpenLonlatModal(right.jcsx.position.lng, right.jcsx.position.lat)"
></a-button>
<span class="flex-1">{{ right.detail.position.lng | lonFormat }}</span>
<a-button 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.jcsx.position.lat | latFormat }}</span>
<a-button
type="text-primary"
icon="edit"
@click="handleOpenLonlatModal(right.jcsx.position.lng, right.jcsx.position.lat)"
></a-button>
<span class="flex-1">{{ right.detail.position.lat | latFormat }}</span>
<a-button 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.jcsx.position.height | numberFormat }} (海拔)</span>
<a-button type="text-primary" icon="edit"></a-button>
<span class="flex-1">{{ right.detail.position.height | numberFormat }} (海拔)</span>
<a-button 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.jcsx.personStatistic.total }} </span>
<span>{{ right.detail.personStatistic.total }} </span>
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">当前人数</span>
<span>{{ right.jcsx.personStatistic.current }} </span>
<span>{{ right.detail.personStatistic.current }} </span>
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">死亡人数</span>
<span>{{ right.jcsx.personStatistic.death }} </span>
<span>{{ right.detail.personStatistic.death }} </span>
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">受伤人数</span>
<span>{{ right.jcsx.personStatistic.injured }} </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.jcsx.foodInfo.startNum }}</span>
<span>{{ right.detail.foodInfo.startNum }}</span>
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">野战食物当前量()</span>
<span>{{ right.jcsx.foodInfo.currentNum }}</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.jcsx.waterInfo.startNum }}</span>
<span>{{ right.detail.waterInfo.startNum }}</span>
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">用水当前量()</span>
<span>{{ right.jcsx.waterInfo.currentNum }}</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.jcsx.oilInfo.startNum }}</span>
<span>{{ right.detail.oilInfo.startNum }}</span>
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">油料当前量()</span>
<span>{{ right.jcsx.oilInfo.currentNum }}</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.jcsx.medicalInfo.startNum }}</span>
<span>{{ right.detail.medicalInfo.startNum }}</span>
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">药材当前量()</span>
<span>{{ right.jcsx.medicalInfo.currentNum }}</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.jcsx.ammunition.lightArms }}</span>
<span>{{ right.detail.ammunition.lightArms }}</span>
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">压制武器弹药量()</span>
<span>{{ right.jcsx.ammunition.suppressing }}</span>
<span>{{ right.detail.ammunition.suppressing }}</span>
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">反坦克武器弹药量()</span>
<span>{{ right.jcsx.ammunition.antiTank }}</span>
<span>{{ right.detail.ammunition.antiTank }}</span>
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">防空反导武器弹药量()</span>
<span>{{ right.jcsx.ammunition.antiAircraft }}</span>
<span>{{ right.detail.ammunition.antiAircraft }}</span>
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">布扫雷装备弹药量()</span>
<span>{{ right.jcsx.ammunition.mineLaying }}</span>
<span>{{ right.detail.ammunition.mineLaying }}</span>
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">爆破器材弹药量()</span>
<span>{{ right.jcsx.ammunition.explosiveDevice }}</span>
<span>{{ right.detail.ammunition.explosiveDevice }}</span>
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">烟火装备弹药量()</span>
<span>{{ right.jcsx.ammunition.smokeDevice }}</span>
<span>{{ right.detail.ammunition.smokeDevice }}</span>
</div>
<div class="zt-item flex ai-c">
<span style="min-width: 100px">防化消耗弹药量()</span>
<span>{{ right.jcsx.ammunition.antiChemical }}</span>
<span>{{ right.detail.ammunition.antiChemical }}</span>
</div>
</a-collapse-panel>
<a-collapse-panel class="simulation-collapse-item" key="8" header="保障标准信息">
@ -210,14 +205,82 @@
</a-collapse-panel>
</a-collapse>
</div>
<div v-if="right.radioType === 'zzxd'">作战行动</div>
<div v-if="right.radioType === 'dzsx'">单装属性</div>
<div v-if="right.radioType === 'zzxd'">
<div class="zzxd-wrapper flex-v">
<div class="zzxd-header">
<div class="zzxd-title">作战行动</div>
<div>
<a-button type="text-primary" icon="menu"></a-button>
<a-button type="text-primary" icon="plus"></a-button>
<a-button type="text-primary" icon="edit"></a-button>
<a-button type="text-primary" icon="delete"></a-button>
</div>
</div>
<div class="flex-1">
<a-steps progress-dot :current="1" direction="vertical">
<a-step
v-for="item in right.detail.actionList"
:key="item.id"
:title="item.typeName"
:description="`开始时间:${item.beginDateTime}. 结束时间:${item.endDateTime}`"
/>
</a-steps>
</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="lonlatModal.visible" title="修改单元经纬度">
<a-modal v-model="mcModal.visible" title="编辑单元名称" :maskClosable="false" width="400px" @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"
@ok="handleSubmilLonlat"
>
<LonLatInput :lon.sync="lonlatModal.lon" :lat.sync="lonlatModal.lat" />
</a-modal>
<a-modal
v-model="hdModal.visible"
title="设置单元高度/深度"
:maskClosable="false"
width="400px"
@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>
</div>
</template>
@ -312,7 +375,7 @@ export default {
},
right: {
radioType: 'jcsx',
jcsx: {
detail: {
position: {},
personStatistic: {},
foodInfo: {},
@ -320,13 +383,23 @@ export default {
oilInfo: {},
medicalInfo: {},
ammunition: {},
actionList: [],
equipmentList: [],
},
},
mcModal: {
visible: false,
mc: '',
},
lonlatModal: {
visible: false,
lon: 0,
lat: 0,
},
hdModal: {
visible: false,
hd: 0,
},
}
},
mounted() {
@ -368,16 +441,77 @@ export default {
}
},
handleSelectTree(selectedKeys, { node }) {
this.right.jcsx = node.dataRef
this.right.detail = node.dataRef
},
onSearch(e) {
console.log('----', e, e.target.value)
},
handleOpenLonlatModal(lon, lat) {
this.lonlatModal.lon = lon
this.lonlatModal.lat = lat
handleOpenMcModal() {
this.mcModal.mc = this.right.detail.name
this.mcModal.visible = true
},
async handleSubmilMc() {
try {
this.$http({
url: '/save',
method: 'post',
data: {
mc: this.mcModal.mc,
},
})
this.$message('编辑单元名称成功')
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: '/save',
method: 'post',
data: {
lon: this.lonlatModal.lon,
lat: this.lonlatModal.lat,
},
})
this.$message('修改单元经纬度成功')
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: '/save',
method: 'post',
data: {
hd: this.hdModal.hd,
},
})
this.$message('修改单元高度/深度成功')
this.right.detail.position.height = this.hdModal.hd
this.hdModal.visible = false
} catch (error) {
console.log(error)
}
},
},
}
</script>