想定军标回显，移除军标

2025-09-11 17:37:42 +08:00 · 2025-09-11 17:37:42 +08:00 · 5fd2a19d7d
commit 5fd2a19d7d
parent 5d1fe2da64
3 changed files with 335 additions and 37 deletions
--- a/src/components/Common/Cesium/index.js
+++ b/src/components/Common/Cesium/index.js
@ -158,19 +158,46 @@ export default class MyCesium {
    })
  }

+  /**
+   * 根据中心坐标确定视口位置
+   * @param position.longitude
+   * @param position.latitude
+   */
+  setClientByCenter(position) {
+    this.viewer.camera.flyTo({
+      destination: Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 500000), // 目标点坐标
+      orientation: {
+        heading: 0, // 航向角（弧度），0表示正北
+        pitch: Cesium.Math.toRadians(-90), // 俯仰角（弧度），-90度表示垂直向下看
+        roll: 0.0, // 翻滚角（弧度），0表示水平
+      },
+    })
+  }
+
+  /**
+   * 移除军标
+   * @param id
+   */
+  removePlotById(id) {
+    const targetIndex = this.plots.findIndex((item) => item.id === id)
+    if (targetIndex === -1) return
+    this.viewer.entities.remove(this.plots[targetIndex])
+    this.plots.splice(targetIndex, 1)
+  }
+
  /**
   * 添加军标(base64图片)
   * @param base64
-   * @param x
-   * @param y
+   * @param screenPosition.x
+   * @param screenPosition.y
   */
-  addPlot(base64, screenPosition) {
+  addPlotByOffset(base64, screenPosition, customId) {
    this.cancelPreviousOperation()

    const position = getCatesian3FromPX(this.viewer, screenPosition)
    if (!position) return false

-    const id = Cesium.createGuid()
+    const id = customId || Cesium.createGuid()
    const isEnemy = false
    const color = 'red'
    const radius = 150000
@ -181,7 +208,8 @@ export default class MyCesium {
        image: base64,
        width: 50,
        height: 50,
-        eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -100000.0), // 使标记在远处看起来更大
+        // eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -100000.0), // 使标记在远处看起来更大
+        scaleByDistance: new Cesium.NearFarScalar(1000000.0, 1.0, 10000000.0, 0.2), // 重点：设置随距离缩放
      },
      ellipse: {
        semiMajorAxis: radius,
@ -214,4 +242,51 @@ export default class MyCesium {
      return { plotId: id, longitude, latitude }
    }
  }
+
+  /**
+   * 添加军标(base64图片)
+   * @param base64
+   * @param location.lon
+   * @param location.lat
+   */
+  addPlotByLonLat(base64, location, customId) {
+    this.cancelPreviousOperation()
+
+    const position = Cesium.Cartesian3.fromDegrees(location.lon, location.lat, 0)
+    if (!position) return false
+
+    const id = customId || Cesium.createGuid()
+    const isEnemy = false
+    const color = 'red'
+    const radius = 150000
+    const plot = {
+      id,
+      position,
+      billboard: {
+        image: base64,
+        width: 50,
+        height: 50,
+        // eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -100000.0), // 使标记在远处看起来更大
+        scaleByDistance: new Cesium.NearFarScalar(1000000.0, 1.0, 10000000.0, 0.2), // 重点：设置随距离缩放
+      },
+      ellipse: {
+        semiMajorAxis: radius,
+        semiMinorAxis: radius,
+        material: Cesium.Color.fromCssColorString('transparent'),
+        outline: true,
+        outlineWidth: 1,
+        outlineColor: Cesium.Color.fromCssColorString(color),
+        height: 0,
+      },
+      properties: {
+        type: MyCesium.ENTITY_TYPES.IMAGE,
+        color,
+        isEnemy,
+        radius,
+        collisions: new Set(),
+      },
+    }
+    this.viewer.entities.add(plot)
+    this.plots.push(plot)
+  }
 }
--- a/src/components/Common/Layout/AntQueryTable.vue
+++ b/src/components/Common/Layout/AntQueryTable.vue
@ -358,7 +358,6 @@ export default {
        if (this.tableConfig.query && typeof this.tableConfig.query === 'function') {
          res = await this.tableConfig.query(this.queryParams)
        }
-        // console.log('----res----', res)
        if (!this.isPageMode) {
          // ---- 不分页 ----
          this.tableData = res?.data || []
--- a/src/views/simulationScene/sceneEditing/components/SceneEditing.vue
+++ b/src/views/simulationScene/sceneEditing/components/SceneEditing.vue
@ -3,21 +3,55 @@
    <div class="tool-wrapper"></div>
    <div>
      <ModuleWrapper title="作战/保障力量" height="45%">
+        <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">
          <a-tree
            class="simulation-tree"
            :treeData="zzbzll.treeData"
            :selectedKeys.sync="zzbzll.selectedKeys"
-            :replaceFields="{ children: 'children', title: 'name', key: 'id' }"
+            :replaceFields="{ children: 'children', title: 'title', key: 'id' }"
            @select="handleSelectZzbzll"
-          ></a-tree>
+          >
+            <template #title="{ id, dataRef }">
+              <a-dropdown :trigger="['contextmenu']">
+                <span>{{ dataRef.resourceName || dataRef.title }}</span>
+                <template #overlay>
+                  <Flex>
+                    <a-button
+                      type="text-primary"
+                      icon="edit"
+                      title="修改名称"
+                      @click="handleOpenEditZzbzllModal(id, dataRef)"
+                    ></a-button>
+                    <AntFormModal
+                      :visible.sync="zzbzllModal.visible"
+                      :title="zzbzllModal.title"
+                      :formItems="zzbzllModal.formItems"
+                      :formRules="zzbzllModal.formRules"
+                      :formData="zzbzllModal.formData"
+                      :onSubmit="handleSubmitZzbzll"
+                      @success="handleSubmitZzbzllSuccess"
+                    ></AntFormModal>
+                    <a-button
+                      type="text-danger"
+                      icon="delete"
+                      title="删除"
+                      @click="handleDeleteZzbzll(id, dataRef)"
+                    ></a-button>
+                  </Flex>
+                </template>
+              </a-dropdown>
+            </template>
+          </a-tree>
        </div>
      </ModuleWrapper>
      <ModuleWrapper height="55%">
        <template #title>
          <a-radio-group v-model="model.type" button-style="solid">
            <a-radio-button value="zbys">装备元素</a-radio-button>
-            <a-radio-button value="jbkj">基本控件</a-radio-button>
+            <!-- <a-radio-button value="jbkj">基本控件</a-radio-button> -->
          </a-radio-group>
        </template>
        <Flex class="normal" fd="co" style="padding: 5px">
@ -59,13 +93,74 @@
      style="grid-column: 2 / 3; overflow: hidden"
    ></div>
    <div>
-      <ModuleWrapper height="100%">
+      <ModuleWrapper title="兵力编组" height="30%">
+        <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>
+        <div class="normal">
+          <a-tree
+            class="simulation-tree"
+            :treeData="blbz.treeData"
+            :selectable="false"
+            :replaceFields="{ children: 'children', title: 'title', key: 'id' }"
+          >
+          </a-tree>
+        </div>
+      </ModuleWrapper>
+      <ModuleWrapper height="70%">
        <template #title>
          <a-radio-group v-model="modelInfo.type" button-style="solid">
            <a-radio-button value="jcsx">基础属性</a-radio-button>
            <a-radio-button value="zzxd">作战行动</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>
+        </div>
      </ModuleWrapper>
    </div>
  </Grid>
@ -85,11 +180,21 @@ export default {
        treeData: [],
        selectedKeys: [],
      },
+      zzbzllModal: {
+        title: '修改名称',
+        visible: false,
+        formItems: [
+          { label: '原名称', prop: 'originName', customRender: (text) => text },
+          { label: '新名称', prop: 'resourceName', required: true },
+        ],
+        formRules: {},
+        formData: {},
+      },
      model: {
        type: 'zbys',
        forceOptions: [
-          { title: '红方', id: 1 },
-          { title: '蓝方', id: 2 },
+          { title: '红方', id: 0 },
+          { title: '蓝方', id: 1 },
        ],
        typeOptions: [
          { title: '飞机', id: 1 },
@ -101,11 +206,59 @@ export default {
        ],
        queryParams: {
          keyword: '',
-          force: 1,
+          force: 0,
          type: 1,
        },
        listData: [],
      },
+      blbz: {
+        modelData: null,
+        treeData: [],
+      },
+      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,
+        },
+        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,
+        },
+      },
      modelInfo: {
        type: 'jcsx',
        data: {},
@ -115,7 +268,7 @@ export default {
  mounted() {
    this.cesium = new window.MyCesium('cesium-container')
    this.getScenarioDetail()
-    // this.getZzbzllTreeData()
+    this.getZzbzllTreeData(true)
    this.getZbysListData()
  },
  methods: {
@ -123,7 +276,7 @@ export default {
      try {
        const res = await getAction(`/baseData/scenario/${this.scenarioId}`)
        this.scenarioDetail = res.data
-        // this.setCesiumClient()
+        this.setCesiumClient()
      } catch (error) {
        console.log(error)
      }
@ -146,39 +299,65 @@ export default {
        [leftBottomLng, leftBottomLat]
      )
    },
-    async getZzbzllTreeData() {
+    async getZzbzllTreeData(initPlot = false) {
      try {
-        const res = await getAction(`/scenario/power/${this.scenarioId}`)
+        const res = await postAction(`/scenario/resource/`, {
+          scenarioId: this.scenarioId,
+        })
        this.zzbzll.treeData = [
          {
-            id: '1',
-            name: '红方',
+            id: '0',
+            title: '红方',
            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 },
-            ],
+            children: res.data.filter((item) => item.type === 0),
          },
          {
-            id: '2',
-            name: '蓝方',
+            id: '1',
+            title: '蓝方',
            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 },
-            ],
+            children: res.data.filter((item) => item.type === 1),
          },
        ]
+        if (initPlot) {
+          this.initPlot(res.data)
+        }
      } catch (error) {
        console.log(error)
      }
    },
-    handleSelectZzbzll(selectedKeys, { node }) {
-      this.modelInfo.data = node.dataRef
-      this.modelInfo.checkedAction = null
+    initPlot(plots) {
+      plots.forEach((item) => {
+        if (item.lng && item.lat) {
+          this.cesium.addPlotByLonLat(item.imgBase64, { lon: +item.lng, lat: +item.lat }, item.id)
+        }
+      })
    },
+    handleOpenEditZzbzllModal(id, data) {
+      this.zzbzllModal.formData = { id, originName: data.resourceName || data.title }
+      this.zzbzllModal.visible = true
+      this.zzbzllModal.originData = data
+    },
+    handleSubmitZzbzll(formData) {
+      return postAction('/scenario/resource/save', formData)
+    },
+    handleSubmitZzbzllSuccess() {
+      this.$set(this.zzbzllModal.originData, 'resourceName', this.zzbzllModal.formData.resourceName)
+    },
+    async handleDeleteZzbzll(id, data) {
+      try {
+        await this.$confirm({ content: `确定删除${data.resourceName || data.title}？` })
+        const res = await this.$http({
+          url: `/scenario/resource/remove/${id}`,
+          method: 'get',
+        })
+        this.$message.success(res.message)
+        this.cesium.removePlotById(id)
+        this.getZzbzllTreeData()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
    async getZbysListData() {
      try {
        const res = await getAction(`/baseData/scenario/resources/${this.model.queryParams.type}`, {
@ -198,12 +377,13 @@ export default {

      const x = e.x - this.$refs['cesium-container'].offsetLeft
      const y = e.y - this.$refs['cesium-container'].offsetTop
-      const { plotId, longitude, latitude } = this.cesium.addPlot(item.imgBase64, { x, y })
+      const { plotId, longitude, latitude } = this.cesium.addPlotByOffset(item.imgBase64, { x, y })
      this.savePlot(this.model.queryParams.force, item, { plotId, longitude, latitude })
    },
    async savePlot(force, item, { plotId, longitude, latitude }) {
      try {
        await postAction('/scenario/resource/save', {
+          id: plotId,
          scenarioId: this.scenarioId,
          type: force,
          resourceType: item.type,
@ -211,7 +391,51 @@ export default {
          lng: longitude,
          lat: latitude,
        })
-        // this.getZzbzllTreeData()
+        this.getZzbzllTreeData()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    handleSelectZzbzll(selectedKeys, { node }) {
+      this.cesium.setClientByCenter({ longitude: +node.dataRef.lng, latitude: +node.dataRef.lat })
+      this.blbz.modelData = node.dataRef
+      this.getBlbzTreeData()
+    },
+    async getBlbzTreeData() {
+      try {
+        const { type, id: resourceId, scenarioId } = this.blbz.modelData
+        const res = await postAction('/scenarioOrgPost/getPost', { type, resourceId, scenarioId })
+        this.blbz.treeData = res.data
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    async handleOpenBlbzModal() {
+      if (!this.blbz.modelData) {
+        this.$message.error('未选择分队!')
+        return
+      }
+      try {
+        const res = await getAction('/tree/organization')
+        this.blbzModal.treeData = res.data
+        this.blbzModal.visible = true
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    async handleSubmitBlbz() {
+      try {
+        const { type, id: resourceId, scenarioId } = this.blbz.modelData
+        const res = await postAction('/scenarioOrgPost/batchSave', {
+          type,
+          resourceId,
+          scenarioId,
+          orgIdList: this.blbzModal.checkedKeys,
+        })
+        this.blbzModal.visible = false
+        this.$message.success(res.message)
+        this.getBlbzTreeData()
      } catch (error) {
        console.log(error)
      }