From 5fd2a19d7d0159d6a51a4a54c6928277ff78f17b Mon Sep 17 00:00:00 2001 From: liaoboping <344114999@qq.com> Date: Thu, 11 Sep 2025 17:37:42 +0800 Subject: [PATCH] =?UTF-8?q?=E6=83=B3=E5=AE=9A=E5=86=9B=E6=A0=87=E5=9B=9E?= =?UTF-8?q?=E6=98=BE=EF=BC=8C=E7=A7=BB=E9=99=A4=E5=86=9B=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/Cesium/index.js | 85 +++++- .../Common/Layout/AntQueryTable.vue | 1 - .../sceneEditing/components/SceneEditing.vue | 286 ++++++++++++++++-- 3 files changed, 335 insertions(+), 37 deletions(-) diff --git a/src/components/Common/Cesium/index.js b/src/components/Common/Cesium/index.js index c315513..85ac7a8 100644 --- 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) + } } diff --git a/src/components/Common/Layout/AntQueryTable.vue b/src/components/Common/Layout/AntQueryTable.vue index eb5d9e1..21f8c90 100644 --- 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 || [] diff --git a/src/views/simulationScene/sceneEditing/components/SceneEditing.vue b/src/views/simulationScene/sceneEditing/components/SceneEditing.vue index e828a2f..fd9ea15 100644 --- a/src/views/simulationScene/sceneEditing/components/SceneEditing.vue +++ b/src/views/simulationScene/sceneEditing/components/SceneEditing.vue @@ -3,21 +3,55 @@
+
+ > + +
@@ -59,13 +93,74 @@ style="grid-column: 2 / 3; overflow: hidden" >
- + + +
+ + +
+ + +
+
+
@@ -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}`, { @@ -195,15 +374,16 @@ export default { const minY = this.$refs['cesium-container'].offsetTop const maxY = this.$refs['cesium-container'].offsetTop + this.$refs['cesium-container'].offsetHeight if (e.x < minX || e.x > maxX || e.Y < minY || e.Y > maxY) return - + 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) }