推演

src/views/subsystem/scene/components/Jcsx.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="jcsx-wrapper" v-loading.dark="loading">
+  <div class="jcsx-wrapper">
     <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>
@@ -25,7 +25,7 @@
         </Flex>
       </div>
       <a-collapse-panel v-if="resourceType === 6" key="1" header="可保障的作战分队" class="simulation-collapse-item">
-        <template #extra>
+        <template v-if="!readonly" #extra>
           <a-button type="text-primary" icon="plus" @click.stop="handleOpenResourceModal"> </a-button>
           <AntFormModal
             :visible.sync="resourceModal.visible"
@@ -62,14 +62,14 @@ export default {
     resourceName: { type: String, required: true },
     resourceType: { type: Number, required: true },
     type: { type: [Number, String], required: true },
+    modelData: { type: Object, required: true },
+    readonly: { type: Boolean, default: false },
   },
   components: {
     LonLatInput,
   },
   data() {
     return {
-      loading: false,
-      modelData: null,
       defaultActiveKey: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
       resourceModal: {
         visible: false,
@@ -169,14 +169,6 @@ export default {
       return result
     },
   },
-  watch: {
-    resourceId: {
-      handler() {
-        this.getModalData()
-      },
-      immediate: true,
-    },
-  },
   filters: {
     forceFormat(v) {
       return ['红方', '蓝方'][v]
@@ -217,22 +209,6 @@ export default {
     },
   },
   methods: {
-    async getModalData() {
-      try {
-        this.loading = true
-        const res = await getAction('/statistic/info', {
-          type: this.type,
-          resourceId: this.resourceId,
-          scenarioId: this.scenarioId,
-        })
-        this.modelData = res.data
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.loading = false
-      }
-    },
-
     handleOpenResourceModal() {
       this.resourceModal.formData = {
         supplierResourceId: this.resourceId,
@@ -244,7 +220,7 @@ export default {
       return postAction('/battleSupplier/save', formData)
     },
     submitResourceSuccess() {
-      this.getModalData()
+      this.$emit('request')
     },
   },
 }

src/views/subsystem/scene/components/Zzxd.vue

@@ -1,6 +1,6 @@
 <template>
-  <Flex v-loading.dark="loading" fd="co" class="zzxd-wrapper">
+  <Flex fd="co" class="zzxd-wrapper">
-    <Flex class="zzxd-header" ai="c" jc="sb">
+    <Flex v-if="!readonly" class="zzxd-header" ai="c" jc="sb">
       <div class="zzxd-title"></div>
       <div>
         <a-button type="text-primary" icon="edit" v-if="checkedAction" @click="handleOpenEditModal"></a-button>
@@ -57,11 +57,11 @@ export default {
     scenarioId: { type: [Number, String], required: true },
     resourceId: { type: [Number, String], required: true },
     resourceType: { type: [Number, String], required: true },
+    actionList: { type: Array, required: true },
+    readonly: { type: Boolean, default: false },
   },
   data() {
     return {
-      loading: false,
-      actionList: [],
       checkedAction: null,
       actionTypeMapText: {
         1: '移动任务',
@@ -108,29 +108,7 @@ export default {
       },
     }
   },
-  watch: {
-    resourceId: {
-      handler() {
-        this.getActionList()
-      },
-      immediate: true,
-    },
-  },
   methods: {
-    async getActionList() {
-      try {
-        this.loading = true
-        const res = await postAction('/scenarioTask/taskList', {
-          scenarioId: this.scenarioId,
-          resourceId: this.resourceId,
-        })
-        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)
@@ -158,7 +136,7 @@ export default {
       return postAction('/scenarioTask/save', formData)
     },
     submitAESuccess() {
-      this.getActionList()
+      this.$emit('request')
     },
     async handleDelete() {
       try {
@@ -166,7 +144,7 @@ export default {
         const id = this.checkedAction.id
         await getAction(`/scenarioTask/remove/${id}`)
         this.$message.success(`删除任务成功`)
-        this.getActionList()
+        this.$emit('request')
       } catch (error) {
         this.$message.success(`删除任务失败`)
         console.log(error)
@@ -179,7 +157,7 @@ export default {
 <style lang="less" scoped>
 .zzxd-wrapper {
   height: 100%;
-  padding: 0 0 15px;
+  padding: 15px 0;
   .zzxd-header {
     padding: 5px 0;
     margin: 0 15px;
@@ -191,7 +169,7 @@ export default {
 }
 .action-item {
   cursor: pointer;
-  padding: 5px 0;
+  padding: 5px 16px 5px 0;
   .action-icon {
     padding: 5px 16px;
     position: relative;

src/views/subsystem/scene/index.vue

@@ -14,118 +14,26 @@
         style="grid-area: 2 / 1 / 3 / 4"
       ></div>
       <div class="pr zi1" style="grid-area: 2 / 1 / 3 / 2">
-        <ModuleWrapper title="作战/保障力量" height="45%">
+        <ModuleWrapper title="作战/保障力量" height="60%">
-          <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"
+              :treeData="zzbzllTreeData"
               :selectedKeys.sync="zzbzll.selectedKeys"
               :replaceFields="{ children: 'children', title: 'title', key: 'id' }"
               @select="handleSelectZzbzll"
             >
-              <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%">
+        <ModuleWrapper title="日志" height="40%">
-          <template #title>
+          <div class="normal"></div>
-            <a-radio-group v-model="model.type" button-style="solid" @change="getModelListData">
-              <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 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>
-            </Flex>
-          </Flex>
         </ModuleWrapper>
       </div>
-      <div class="pr zi1" style="grid-area: 2 / 3 / 3 / 4">
+      <Grid class="pr zi1" :rows="rightRows" gap="0px" style="grid-area: 2 / 3 / 3 / 4">
-        <ModuleWrapper title="兵力编组" height="30%">
+        <ModuleWrapper title="兵力编组">
           <template #extra>
-            <a-button type="text-primary" icon="plus" @click="handleOpenBlbzModal()"></a-button>
+            <Zoom :max="rightViewer === 'blbz'" @zoom-max="rightViewer = 'blbz'" @zoom-min="rightViewer = ''" />
-            <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" style="padding: 5px; overflow-y: auto">
             <a-tree
@@ -137,39 +45,57 @@
             </a-tree>
           </div>
         </ModuleWrapper>
-        <ModuleWrapper height="70%">
+        <ModuleWrapper title="基础属性">
-          <template #title>
+          <template #extra>
-            <a-radio-group v-model="modelInfoType" button-style="solid">
+            <Zoom :max="rightViewer === 'jcsx'" @zoom-max="rightViewer = 'jcsx'" @zoom-min="rightViewer = ''" />
-              <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>
           </template>
           <div class="normal" style="padding: 15px 0">
-            <div style="height: 100%; padding: 0 15px; overflow-y: auto">
+            <Jcsx
-              <Jcsx v-if="modelInfoType === 'jcsx'" :scenarioId="scenarioId" :modelData="jcsx.data" />
+              ref="jcsx"
-              <Zzxd v-if="modelInfoType === 'zzxd'" :actionList="zzxd.data" />
+              v-if="zzbzllSelectedFd"
-              <BzTask v-if="modelInfoType === 'bzrw'" :scenarioId="scenarioId" :resourceid="resourceid" :type="type" />
+              :scenarioId="scenarioId"
-            </div>
+              :resourceId="zzbzllSelectedFd.id"
+              :resourceName="zzbzllSelectedFd.title"
+              :resourceType="zzbzllSelectedFd.resourceType"
+              :type="zzbzllSelectedFd.type"
+              :modelData="jcsxModelData"
+              :readonly="true"
+            />
           </div>
         </ModuleWrapper>
+        <ModuleWrapper :title="xdrw.resourceTypeMapTitle[zzbzllSelectedFd?.resourceType] || '行动任务'">
+          <template #extra>
+            <Zoom :max="rightViewer === 'xdrw'" @zoom-max="rightViewer = 'xdrw'" @zoom-min="rightViewer = ''" />
+          </template>
+          <div class="normal" style="padding: 0">
+            <Zzxd
+              ref="xdrw"
+              v-if="zzbzllSelectedFd"
+              :scenarioId="scenarioId"
+              :resourceId="zzbzllSelectedFd.id"
+              :resourceType="zzbzllSelectedFd.resourceType"
+              :actionList="xdrwActionList"
+              :readonly="true"
+            />
           </div>
+        </ModuleWrapper>
+      </Grid>
     </Grid>
   </Flex>
 </template>
 
 <script>
-import { getAction, postAction } from '@/api/manage'
+import { getAction } from '@/api/manage'
+import Zoom from './components/Zoom.vue'
 import Jcsx from './components/Jcsx.vue'
 import Zzxd from './components/Zzxd.vue'
-import BzTask from './components/BzTask.vue'
 
 export default {
   name: 'SubsystemScene',
   components: {
+    Zoom,
     Jcsx,
     Zzxd,
-    BzTask,
   },
   data() {
     return {
@@ -178,6 +104,7 @@ export default {
         remainTimeStr: '',
         remainTime: '',
         duringTime: '',
+        roomData: [],
       },
       roomId: '',
       roomName: '',
@@ -185,106 +112,63 @@ export default {
       scenarioName: '',
       cesium: null,
       zzbzll: {
-        treeData: [],
         selectedKeys: [],
       },
-      zzbzllModal: {
-        title: '修改名称',
-        visible: false,
-        formItems: [
-          { label: '原名称', prop: 'originName', customRender: (text) => text },
-          { label: '新名称', prop: 'resourceName', required: true },
-        ],
-        formRules: {},
-        formData: {},
-      },
-      model: {
-        type: 5,
-        listData: [],
-      },
       blbz: {
-        modelData: null,
         treeData: [],
-        checkedKeys: [],
       },
-      blbzModal: {
+      rightViewer: '',
-        visible: false,
+      xdrw: {
-        treeData: [],
+        resourceTypeMapTitle: {
-        checkedKeys: [],
+          5: '作战行动',
-        selectedKeys: [],
+          6: '保障任务',
-        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,
-        },
-      },
-      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: {
+    zzbzllTreeData() {
+      return []
+    },
+    zzbzllSelectedFd() {
+      if (this.zzbzll.selectedKeys.length === 0) {
+        return null
+      }
+      return null
+    },
+    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]
+      }
+    },
+    blbzShowKeys() {
+      return []
+    },
     showBlbzCheckedTreeData() {
       const target = []
-      this.getTree(target, this.blbz.treeData, this.blbz.checkedKeys)
+      this.getTree(target, this.blbz.treeData, this.blbzShowKeys)
       return target
     },
+    jcsxModelData() {
+      return {}
+    },
+    xdrwActionList() {
+      return []
+    },
   },
   created() {
     this.roomId = this.$route.params.roomId
     this.roomName = this.$route.params.roomName
     this.scenarioId = this.$route.params.scenarioId
     this.scenarioName = this.$route.params.scenarioName
+    this.getBlbzTreeData()
   },
   mounted() {
     this.cesium = new window.MyCesium('scene-cesium-container')
@@ -293,13 +177,20 @@ export default {
       this.closeWebsocket()
       return true
     })
-    this.getZzbzllTreeData(true)
-    this.getModelListData()
-  },
-  beforeDestroy() {
-    this.closeWebsocket()
   },
   methods: {
+    getTree(target, treeData, showKeys) {
+      treeData.forEach((item) => {
+        const newChildren = []
+        if (item.children && item.children.length > 0) {
+          this.getTree(newChildren, item.children, showKeys)
+        }
+        if (newChildren.length > 0 || showKeys.includes(item.key)) {
+          target.push({ ...item, children: newChildren })
+        }
+      })
+    },
+
     initWebsocket() {
       this.ws = new window.MyWebsocket(`/ws/${this.scenarioId}/${this.roomId}`, (error, response) => {
         if (error) return this.$message.error(error.message)
@@ -315,125 +206,22 @@ export default {
           case 'path_update':
             this.cesium.movePlotByCoordinates(response.data.resourceId, response.data.points)
             break
+          case 'scenarioInfo':
+            this.roomInfo.roomData = response.data
+            // this.initPlots()
+            break
           default:
+            console.log(response.cmdType, JSON.parse(response.data))
             break
         }
       })
+      this.ws.send({ cmdType: 'scenarioInfo' })
     },
     closeWebsocket() {
       this.ws && this.ws.close()
       this.ws = null
     },
-    getTree(target, treeData, checkedKeys) {
-      treeData.forEach((item) => {
-        const newChildren = []
-        if (item.children && item.children.length > 0) {
-          this.getTree(newChildren, item.children, checkedKeys)
-        }
-        if (newChildren.length > 0 || checkedKeys.includes(item.key)) {
-          target.push({ ...item, children: newChildren })
-        }
-      })
-    },
-    async getZzbzllTreeData(initPlot = false) {
-      try {
-        const res = await postAction(`/scenario/resource/`, {
-          scenarioId: this.scenarioId,
-        })
-        this.zzbzll.treeData = [
-          {
-            id: '0',
-            title: '红方',
-            selectable: false,
-            children: res.data.filter((item) => item.type === 0),
-          },
-          {
-            id: '1',
-            title: '蓝方',
-            selectable: false,
-            children: res.data.filter((item) => item.type === 1),
-          },
-        ]
-        if (initPlot) {
-          this.initPlot(res.data)
-        }
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    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 getAction(`/scenario/resource/remove/${id}`)
-        this.$message.success(res.message)
-        this.cesium.removePlotById(id)
-        this.getZzbzllTreeData()
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    async getModelListData() {
-      try {
-        const res = await getAction(`/baseData/scenario/resources/${this.model.type}`)
-        this.model.listData = res.data
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    dragend(item, e) {
-      const minX = this.$refs['scene-cesium-container'].offsetLeft
-      const maxX = this.$refs['scene-cesium-container'].offsetLeft + this.$refs['scene-cesium-container'].offsetWidth
-      const minY = this.$refs['scene-cesium-container'].offsetTop
-      const maxY = this.$refs['scene-cesium-container'].offsetTop + this.$refs['scene-cesium-container'].offsetHeight
-      if (e.x < minX || e.x > maxX || e.Y < minY || e.Y > maxY) return
 
-      const x = e.x - this.$refs['scene-cesium-container'].offsetLeft
-      const y = e.y - this.$refs['scene-cesium-container'].offsetTop
-      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,
-          resourceId: item.id,
-          lng: longitude,
-          lat: latitude,
-        })
-        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.resourceid = node.dataRef.id
-      this.type = node.dataRef.type
-      this.getBlbzTreeData()
-      this.getJcsxData()
-    },
     async getBlbzTreeData() {
       try {
         const res = await getAction('/tree/organization')
@@ -441,47 +229,18 @@ export default {
       } 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
-      } catch (error) {
-        console.log(error)
-      }
     },
-    async handleOpenBlbzModal() {
+
-      if (!this.blbz.modelData) {
+    initPlot(plots) {
-        this.$message.error('未选择分队!')
+      plots.forEach((item) => {
-        return
+        if (item.lng && item.lat) {
+          this.cesium.addPlotByLonLat(item.imgBase64, { lon: +item.lng, lat: +item.lat }, item.id)
         }
-      this.blbzModal.treeData = this.blbz.treeData
-      this.blbzModal.checkedKeys = [...this.blbz.checkedKeys]
-      this.blbzModal.visible = true
-    },
-    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)
-      }
     },
-    async getJcsxData() {
+
-      try {
+    handleSelectZzbzll(selectedKeys, { node }) {
-        const { type, id: resourceId, scenarioId } = this.blbz.modelData
+      this.cesium.setClientByCenter({ longitude: +node.dataRef.lng, latitude: +node.dataRef.lat })
-        const res = await getAction('/statistic/info', { type, resourceId, scenarioId })
-        this.jcsx.data = res.data
-      } catch (error) {
-        console.log(error)
-      }
     },
   },
 }
@@ -534,24 +293,4 @@ export default {
     background-color: #bae7ff22;
   }
 }
-.model-item {
-  width: calc(100% / 3);
-  .model-image {
-    width: 74px;
-    height: 62px;
-    object-fit: cover;
-    margin: 16px 0 8px;
-  }
-  .model-name {
-    white-space: nowrap;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-.model-item:hover {
-  .model-name {
-    overflow: visible;
-  }
-}
 </style>

src/views/subsystem/scene/presetting.vue

@@ -6,7 +6,9 @@
       <span class="page-scene-presetting-title" style="color: transparent">场景编辑子系统</span>
     </Flex>
     <Grid class="page-scene-presetting-main flex-1 oh" :columns="['320px', 1, '320px']" :rows="['30px', 1]" gap="0px">
-      <div class="tool-wrapper" style="grid-area: 1 / 1 / 2 / 4"></div>
+      <div class="tool-wrapper" style="grid-area: 1 / 1 / 2 / 4">
+        <a-button type="text-primary">保障流程</a-button>
+      </div>
       <div
         ref="scene-presetting-cesium-container"
         class="scene-presetting-cesium-container"
@@ -80,7 +82,7 @@
         </ModuleWrapper>
       </div>
       <Grid class="pr zi1" :rows="rightRows" gap="0px" style="grid-area: 2 / 3 / 3 / 4">
-        <ModuleWrapper title="兵力编组" height="100%">
+        <ModuleWrapper title="兵力编组">
           <template #extra>
             <template v-if="zzbzll.selectedFd">
               <a-button
@@ -109,19 +111,19 @@
             </a-tree>
           </div>
         </ModuleWrapper>
-        <ModuleWrapper title="基础属性" height="100%">
+        <ModuleWrapper title="基础属性">
           <template #extra>
             <template v-if="zzbzll.selectedFd">
               <a-button
                 type="text-primary"
                 icon="sync"
                 style="font-size: 20px"
-                @click="$refs.jcsx.getModalData()"
+                @click="getJcsxModelData()"
               ></a-button>
             </template>
             <Zoom :max="rightViewer === 'jcsx'" @zoom-max="rightViewer = 'jcsx'" @zoom-min="rightViewer = ''" />
           </template>
-          <div class="normal" style="padding: 15px 0">
+          <div v-loading.dark="jcsx.loading" class="normal" style="padding: 15px 0">
             <Jcsx
               ref="jcsx"
               v-if="zzbzll.selectedFd"
@@ -130,28 +132,32 @@
               :resourceName="zzbzll.selectedFd.title"
               :resourceType="zzbzll.selectedFd.resourceType"
               :type="zzbzll.selectedFd.type"
+              :modelData="jcsx.modelData"
+              @request="getJcsxModelData()"
             />
           </div>
         </ModuleWrapper>
-        <ModuleWrapper :title="xdrw.resourceTypeMapTitle[zzbzll.selectedFd?.resourceType] || '行动任务'" height="100%">
+        <ModuleWrapper :title="xdrw.resourceTypeMapTitle[zzbzll.selectedFd?.resourceType] || '行动任务'">
           <template #extra>
             <template v-if="zzbzll.selectedFd">
               <a-button
                 type="text-primary"
                 icon="sync"
                 style="font-size: 20px"
-                @click="$refs.xdrw.getActionList()"
+                @click="getXdrwActionList()"
               ></a-button>
             </template>
             <Zoom :max="rightViewer === 'xdrw'" @zoom-max="rightViewer = 'xdrw'" @zoom-min="rightViewer = ''" />
           </template>
-          <div class="normal" style="padding: 0">
+          <div v-loading.dark="xdrw.loading" class="normal" style="padding: 0">
             <Zzxd
               ref="xdrw"
               v-if="zzbzll.selectedFd"
               :scenarioId="scenarioId"
               :resourceId="zzbzll.selectedFd.id"
               :resourceType="zzbzll.selectedFd.resourceType"
+              :actionList="xdrw.actionList"
+              @request="getXdrwActionList()"
             />
           </div>
         </ModuleWrapper>
@@ -166,7 +172,6 @@ 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'
 
 export default {
   name: 'SubsystemScenePresetting',
@@ -175,7 +180,6 @@ export default {
     BlbzModal,
     Jcsx,
     Zzxd,
-    BzTask,
   },
   data() {
     return {
@@ -213,11 +217,17 @@ export default {
         modalCheckedKeys: [],
       },
       rightViewer: '',
+      jcsx: {
+        loading: false,
+        modelData: {},
+      },
       xdrw: {
         resourceTypeMapTitle: {
           5: '作战行动',
           6: '保障任务',
         },
+        loading: false,
+        actionList: [],
       },
     }
   },
@@ -374,6 +384,8 @@ export default {
       this.cesium.setClientByCenter({ longitude: +node.dataRef.lng, latitude: +node.dataRef.lat })
       this.zzbzll.selectedFd = node.dataRef
       this.getBlbzTreeData()
+      this.getJcsxModelData()
+      this.getXdrwActionList()
     },
     async getBlbzTreeData() {
       try {
@@ -415,6 +427,35 @@ export default {
         console.log(error)
       }
     },
+    async getJcsxModelData() {
+      try {
+        this.jcsx.loading = true
+        const res = await getAction('/statistic/info', {
+          type: this.zzbzll.selectedFd.type,
+          resourceId: this.zzbzll.selectedFd.id,
+          scenarioId: this.scenarioId,
+        })
+        this.jcsx.modelData = res.data
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.jcsx.loading = false
+      }
+    },
+    async getXdrwActionList() {
+      try {
+        this.xdrw.loading = true
+        const res = await postAction('/scenarioTask/taskList', {
+          scenarioId: this.scenarioId,
+          resourceId: this.zzbzll.selectedFd.id,
+        })
+        this.xdrw.actionList = res.data
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.xdrw.loading = false
+      }
+    },
   },
 }
 </script>