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

src/views/simulationScene/sceneEditing/components/LonLatInput.vue

@@ -1,34 +1,34 @@
 <template>
   <div class="lon-lat-input">
-    <div class="lon-input" style="padding: 10px 0;">
+    <div class="lon-input" style="padding: 10px 0">
-      <a-select style="width: 76px;margin-right: 20px;">
+      <a-select v-model="lonSelect" style="width: 76px; margin-right: 20px">
-        <a-select-option value="E">东经</a-select-option>
+        <a-select-option :value="1">东经</a-select-option>
-        <a-select-option value="W">西经</a-select-option>
+        <a-select-option :value="-1">西经</a-select-option>
       </a-select>
-      <a-input-number style="width: 72px;"></a-input-number>
+      <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 8px">°</span>
-      <span style="margin: 0 12px;">或</span>
+      <span style="margin: 0 12px">或</span>
-      <a-input-number style="width: 60px;"></a-input-number>
+      <a-input-number v-model="lonDegree" :min="0" :max="180" :step="1" :precision="0" style="width: 60px" />
-      <span style="margin: 0 8px;">°</span>
+      <span style="margin: 0 8px">°</span>
-      <a-input-number style="width: 60px;"></a-input-number>
+      <a-input-number v-model="lonMinute" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
-      <span style="margin: 0 8px;">′</span>
+      <span style="margin: 0 8px">′</span>
-      <a-input-number style="width: 60px;"></a-input-number>
+      <a-input-number v-model="lonSecond" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
-      <span style="margin: 0 8px;">″</span>
+      <span style="margin: 0 8px">″</span>
     </div>
-    <div class="lat-input" style="padding: 10px 0;">
+    <div class="lat-input" style="padding: 10px 0">
-      <a-select style="width: 76px;margin-right: 20px;">
+      <a-select v-model="latSelect" style="width: 76px; margin-right: 20px">
-        <a-select-option value="N">北纬</a-select-option>
+        <a-select-option :value="1">北纬</a-select-option>
-        <a-select-option value="S">南纬</a-select-option>
+        <a-select-option :value="-1">南纬</a-select-option>
       </a-select>
-      <a-input-number style="width: 72px;"></a-input-number>
+      <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 8px">°</span>
-      <span style="margin: 0 12px;">或</span>
+      <span style="margin: 0 12px">或</span>
-      <a-input-number style="width: 60px;"></a-input-number>
+      <a-input-number v-model="latDegree" :min="0" :max="180" :step="1" :precision="0" style="width: 60px" />
-      <span style="margin: 0 8px;">°</span>
+      <span style="margin: 0 8px">°</span>
-      <a-input-number style="width: 60px;"></a-input-number>
+      <a-input-number v-model="latMinute" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
-      <span style="margin: 0 8px;">′</span>
+      <span style="margin: 0 8px">′</span>
-      <a-input-number style="width: 60px;"></a-input-number>
+      <a-input-number v-model="latSecond" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
-      <span style="margin: 0 8px;">″</span>
+      <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>
 

src/views/simulationScene/sceneEditing/index.vue

@@ -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'" />
+                <img class="image" :src="right.detail.image || '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png'" />
-                <div class="name">{{ right.jcsx.name }}</div>
+                <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>
+                  <span class="flex-1">{{ right.detail.position.lng | lonFormat }}</span>
-                  <a-button
+                  <a-button type="text-primary" icon="edit" @click="handleOpenLonlatModal"></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>
+                  <span class="flex-1">{{ right.detail.position.lat | latFormat }}</span>
-                  <a-button
+                  <a-button type="text-primary" icon="edit" @click="handleOpenLonlatModal"></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>
+                  <span class="flex-1">{{ right.detail.position.height | numberFormat }} 米(海拔)</span>
-                  <a-button type="text-primary" icon="edit"></a-button>
+                  <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 === 'zzxd'">
-          <div v-if="right.radioType === 'dzsx'">单装属性</div>
+            <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
+    handleOpenMcModal() {
-      this.lonlatModal.lat = lat
+      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>