From 42d7ca303a1245af7a6a88681613fda0cdd2cf89 Mon Sep 17 00:00:00 2001
From: liaoboping <344114999@qq.com>
Date: Sat, 20 Sep 2025 18:06:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E9=9A=9C=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +
 src/config/router.config.js                   |   4 +
 src/views/functional/guaranteeProcess.vue     |  50 ++
 src/views/subsystem/display/index.vue         |  28 +-
 .../subsystem/model/components/BzTask.vue     | 233 ---------
 src/views/subsystem/model/components/Jcsx.vue | 446 ------------------
 .../model/components/LonLatInput.vue          | 143 ------
 src/views/subsystem/model/components/Zzxd.vue | 166 -------
 src/views/subsystem/model/index.vue           | 406 +++++-----------
 src/views/subsystem/scene/index.vue           |   2 +-
 src/views/subsystem/scene/presetting.vue      |  36 +-
 vue.config.js                                 |   2 +-
 12 files changed, 199 insertions(+), 1319 deletions(-)
 create mode 100644 src/views/functional/guaranteeProcess.vue
 delete mode 100644 src/views/subsystem/model/components/BzTask.vue
 delete mode 100644 src/views/subsystem/model/components/Jcsx.vue
 delete mode 100644 src/views/subsystem/model/components/LonLatInput.vue
 delete mode 100644 src/views/subsystem/model/components/Zzxd.vue

diff --git a/package.json b/package.json
index 1929fa6..09c7d87 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "@ant-design-vue/pro-layout": "^1.0.11",
     "@antv/data-set": "^0.10.2",
+    "@mermaid-js/parser": "^0.6.2",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^1.0.2",
     "ant-design-vue": "^1.7.8",
@@ -31,6 +32,7 @@
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
     "md5": "^2.3.0",
+    "mermaid": "^11.12.0",
     "mockjs2": "1.0.8",
     "moment": "^2.29.2",
     "nprogress": "^0.2.0",
diff --git a/src/config/router.config.js b/src/config/router.config.js
index 20592aa..50ef7c1 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -108,6 +108,10 @@ export const constantRouterMap = [
       // },
     ],
   },
+  {
+    path: '/guaranteeProcess',
+    component: () => import(/* webpackChunkName: "fail" */ '@/views/functional/guaranteeProcess.vue'),
+  },
   {
     path: '/404',
     component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
diff --git a/src/views/functional/guaranteeProcess.vue b/src/views/functional/guaranteeProcess.vue
new file mode 100644
index 0000000..3847d2c
--- /dev/null
+++ b/src/views/functional/guaranteeProcess.vue
@@ -0,0 +1,50 @@
+<template>
+  <Flex jc="c" class="page-wrapper">
+    <div class="scroller" v-html="txt"></div>
+  </Flex>
+</template>
+
+<script>
+import mermaid from 'mermaid'
+
+export default {
+  data() {
+    return {
+      txt: `
+        <div class="mermaid">
+          flowchart TD
+          A@{ shape: circle, label: "开始" } --> B[油料保障分队分配油料物资]
+          B --> C[派运油车到火力打击分队进行运油]
+          C --> D[到达火力打击分队后将油进行补充]
+          D --> E[返回油料保障分队]
+          E --> F[油料保障分队保障任务完成]
+
+          F --> G@{shape: circle, label: "结束"}
+        </div>
+      `,
+    }
+  },
+  mounted() {
+    mermaid.initialize({ startOnLoad: false })
+
+    const el = document.querySelector('.mermaid')
+    el.style.visibility = 'hidden' // 先隐藏
+    mermaid.run().then(() => {
+      el.style.visibility = 'visible' // 渲染完再显示
+    })
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.page-wrapper {
+  height: 100%;
+  > div {
+    max-height: 100%;
+    max-width: 100%;
+  }
+}
+::v-deep .mermaid {
+  width: fit-content;
+}
+</style>
diff --git a/src/views/subsystem/display/index.vue b/src/views/subsystem/display/index.vue
index de1bf02..980af89 100644
--- a/src/views/subsystem/display/index.vue
+++ b/src/views/subsystem/display/index.vue
@@ -17,8 +17,6 @@
 </template>
 
 <script>
-import { postAction } from '@/api/manage'
-
 export default {
   name: 'SubsystemDisplay',
   data() {
@@ -28,6 +26,7 @@ export default {
         remainTimeStr: '',
         remainTime: '',
         duringTime: '',
+        roomData: [],
       },
       roomId: '',
       roomName: '',
@@ -49,10 +48,6 @@ export default {
       this.closeWebsocket()
       return true
     })
-    this.getZzbzllTreeData(true)
-  },
-  beforeDestroy() {
-    this.closeWebsocket()
   },
   methods: {
     initWebsocket() {
@@ -70,28 +65,23 @@ 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
     },
-    async getZzbzllTreeData(initPlot = false) {
-      try {
-        const res = await postAction(`/scenario/resource/`, {
-          scenarioId: this.scenarioId,
-        })
-        if (initPlot) {
-          this.initPlot(res.data)
-        }
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    initPlot(plots) {
+
+    initPlots(plots) {
       plots.forEach((item) => {
         if (item.lng && item.lat) {
           this.cesium.addPlotByLonLat(item.imgBase64, { lon: +item.lng, lat: +item.lat }, item.id)
diff --git a/src/views/subsystem/model/components/BzTask.vue b/src/views/subsystem/model/components/BzTask.vue
deleted file mode 100644
index 181ff48..0000000
--- a/src/views/subsystem/model/components/BzTask.vue
+++ /dev/null
@@ -1,233 +0,0 @@
-<template>
-  <Flex fd="co" class="zzxd-wrapper">
-    <Flex class="zzxd-header" ai="c" jc="sb">
-      <div class="zzxd-title">保障任务</div>
-      <div>
-        <a-button type="text-primary" icon="menu"></a-button>
-        <a-button type="text-primary" icon="plus" @click="handleOpenAddActionModal"></a-button>
-        <a-button type="text-primary" icon="edit" @click="handleOpenEditActionModal"></a-button>
-        <a-button type="text-primary" icon="delete" @click="handleDeleteAction"></a-button>
-      </div>
-      <a-modal 
-        v-model="actionModal.visible" 
-        :title="actionModal.title" :maskClosable="false" :destroyOnClose="true"
-        @ok="handleSubmilAction">
-        <a-form-model 
-          :model="actionModal.formData" 
-          layout="horizontal" :labelCol="{ span: 6 }"
-          :wrapperCol="{ span: 15 }">
-          <a-form-model-item v-for="item in actionModal.formItems" :key="item.prop" v-bind="item">
-            <component 
-              :is="item.component || 'a-input'" 
-              v-model="actionModal.formData[item.prop]"
-              v-bind="item.options" />
-          </a-form-model-item>
-        </a-form-model>
-      </a-modal>
-    </Flex>
-    <div class="flex-1 scroller-y">
-      <div v-for="item in actionList" :key="item.id" class="action-item flex" @click="checkedAction = item">
-        <div class="action-icon">
-          <div class="action-line"></div>
-          <a-radio :checked="checkedAction && checkedAction.id === item.id" style="margin-right: 0"></a-radio>
-        </div>
-        <div class="flex-1">
-          <div class="action-title">{{ item.name || '- -' }}</div>
-          <div class="action-time">任务类型：{{ handleGetTaskType(item.taskType) }}</div>
-          <div class="action-time">开始时间：{{ item.startTime }}</div>
-          <div class="action-time">结束时间：{{ item.endTime }}</div> 
-        </div>
-      </div>
-    </div>
-  </Flex>
-</template>
-
-<script>
-export default {
-  props: {
-    scenarioId: { type: String, required: true },
-    resourceid: { type: String, required: true },
-    type: { type: Number, required: true },
-  },
-  data() {
-    return {
-      checkedAction: null,
-      actionModal: {
-        visible: false,
-        formItems: [
-          { label: '任务名称', prop: 'name' },
-          {
-            label: '任务类型',
-            prop: 'taskType',
-            component: 'AntOriginSelect',
-            options: {
-              dataSource: () => ({
-                data: [
-                  { id: '1', title: '机动任务' },
-                  { id: '2', title: '战斗任务' },
-                  { id: '3', title: '整备任务' },
-                  { id: '4', title: '弹药保障' },
-                  { id: '5', title: '水保障' },
-                  { id: '6', title: '油保障' },
-                  { id: '7', title: '食品保障' }
-                ],
-              }),
-            },
-          },
-          {
-            label: '开始时间', prop: 'startTime', component: 'a-date-picker', options: {
-              showTime: true,
-              format: 'YYYY-MM-DD HH:mm:ss',
-              valueFormat: 'YYYY-MM-DD HH:mm:ss'
-            }
-          },
-          {
-            label: '结束时间', prop: 'endTime', component: 'a-date-picker', options: {
-              showTime: true,
-              format: 'YYYY-MM-DD HH:mm:ss',
-              valueFormat: 'YYYY-MM-DD HH:mm:ss'
-            }
-          },
-          { label: '开始经度', prop: 'fromLng' },
-          { label: '开始纬度', prop: 'fromLat' },
-          { label: '目标经度', prop: 'toLng' },
-          { label: '目标纬度', prop: 'toLat' },
-        ],
-        formData: {},
-      },
-      actionList: []
-    }
-  },
-  created() {
-    if (this.scenarioId && this.resourceid) {
-      this.handleGetTaskList()
-    }
-  },
-  watch: {
-    resourceid: {
-      handler(newValue, oldValue) { 
-        this.handleGetTaskList()
-      },
-      deep: true // 重要：开启深层监听
-    }
-  },
-  methods: {
-    handleGetTaskType(type) {
-      switch (type) {
-        case '1':
-          return '机动任务'
-        case '2':
-          return '战斗任务'
-        case '3':
-          return '整备任务'
-        case '4':
-          return '弹药保障'
-        case '5':
-          return '水保障'
-        case '6':
-          return '油保障'
-        case '7':
-          return '食品保障'
-        default:
-          return '- -'
-      }
-    },
-    handleGetTaskList() {
-      this.$http({
-        url: '/scenarioTask/taskList',
-        method: 'post',
-        data: { scenarioId: parseInt(this.scenarioId), resourceId: this.resourceid },
-      }).then(res => {
-        this.actionList = res.data
-      })
-    },
-    handleOpenAddActionModal() {
-      this.actionModal.title = '添加任务'
-      this.actionModal.formData = {
-        type: this.type,
-        scenarioId: parseInt(this.scenarioId),
-        resourceId: this.resourceid
-      }
-      this.actionModal.visible = true
-    },
-    handleOpenEditActionModal() {
-      this.actionModal.title = '修改任务'
-      this.actionModal.formData = { ...this.checkedAction }
-      this.actionModal.visible = true
-    },
-    async handleSubmilAction() {
-      try {
-        await this.$http({
-          url: '/scenarioTask/save',
-          method: 'post',
-          data: this.actionModal.formData,
-        })
-        this.$message.success(`${this.actionModal.title}成功`)
-        this.actionModal.visible = false
-        this.handleGetTaskList()
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    async handleDeleteAction() {
-      try {
-        await this.$confirm('确认删除所选任务吗？')
-        await this.$http({
-          url: '/scenarioTask/remove/' + this.checkedAction.id,
-          method: 'get'
-        })
-        this.$message.success(`删除任务成功`)
-        this.handleGetTaskList()
-      } catch (error) {
-        this.$message.success(`删除任务失败`)
-        console.log(error)
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.zzxd-wrapper {
-  height: 100%;
-
-  .zzxd-header {
-    padding: 5px 0;
-    border-bottom: 1px solid #00baff22;
-
-    .zzxd-title {
-      color: #00baff;
-    }
-  }
-}
-
-.action-item {
-  cursor: pointer;
-  padding: 5px 0;
-
-  .action-icon {
-    padding: 5px 16px;
-    position: relative;
-    flex-shrink: 0;
-
-    .action-line {
-      position: absolute;
-      right: 50%;
-      top: 21px;
-      width: 1px;
-      height: 100%;
-      background-color: #00baff;
-    }
-  }
-}
-
-.action-item:last-of-type {
-  .action-line {
-    display: none;
-  }
-}
-
-.action-item:hover {
-  background-color: #bae7ff44;
-}
-</style>
diff --git a/src/views/subsystem/model/components/Jcsx.vue b/src/views/subsystem/model/components/Jcsx.vue
deleted file mode 100644
index d9adf07..0000000
--- a/src/views/subsystem/model/components/Jcsx.vue
+++ /dev/null
@@ -1,446 +0,0 @@
-<template>
-  <div>
-    <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="modelData.image || '/mockData/fe6ad2d8-da11-04d8-f447-0d8175826e28.png'" />
-        <div class="name">
-          {{ modelData.team.teamName }}
-          <a-button v-if="hasDetail" type="text-primary" icon="edit" @click="handleOpenMcModal"></a-button>
-        </div>
-        <a-modal
-          v-model="mcModal.visible"
-          title="编辑单元名称"
-          :maskClosable="false"
-          width="400px"
-          :destroyOnClose="true"
-          @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>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">推演方：</span>
-          <span>{{ modelData.team.type | forceFormat }}</span>
-        </div>
-        <!-- <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">类型：</span>
-          <span>{{ modelData.position.logisticType | logisticTypeFormat }}</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">方向：</span>
-          <span>{{ modelData.position.direction | numberFormat }}°</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">速度：</span>
-          <span>{{ modelData.position.speed }} 公里/时</span>
-        </div> -->
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">经度：</span>
-          <span class="flex-1">{{ modelData.team.lng | lonFormat }}</span>
-          <a-button v-if="hasDetail" 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">{{ modelData.team.lat | latFormat }}</span>
-          <a-button v-if="hasDetail" type="text-primary" icon="edit" @click="handleOpenLonlatModal"></a-button>
-        </div>
-        <a-modal
-          v-model="lonlatModal.visible"
-          title="修改单元经纬度"
-          :maskClosable="false"
-          width="600px"
-          :destroyOnClose="true"
-          @ok="handleSubmilLonlat"
-        >
-          <LonLatInput :lon.sync="lonlatModal.lon" :lat.sync="lonlatModal.lat" />
-        </a-modal>
-        <!-- <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">高度/深度：</span>
-          <span class="flex-1">{{ modelData.position.height | numberFormat }} 米(海拔)</span>
-          <a-button v-if="hasDetail" type="text-primary" icon="edit" @click="handleOpenHdModal()"></a-button>
-        </div>
-        <a-modal
-          v-model="hdModal.visible"
-          title="设置单元高度/深度"
-          :maskClosable="false"
-          width="400px"
-          :destroyOnClose="true"
-          @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> -->
-      </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>{{ modelData.person.total }} 人</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">当前人数：</span>
-          <span>{{ modelData.person.current }} 人</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">死亡人数：</span>
-          <span>{{ modelData.person.death }} 人</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">受伤人数：</span>
-          <span>{{ modelData.person.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>{{ modelData.foodInfo.startNum }}</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">野战食物当前量(份)：</span>
-          <span>{{ modelData.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>{{ modelData.waterInfo.startNum }}</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">用水当前量(吨)：</span>
-          <span>{{ modelData.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>{{ modelData.oilInfo.startNum }}</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">油料当前量(份)：</span>
-          <span>{{ modelData.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>{{ modelData.medicalInfo.startNum }}</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">药材当前量(份)：</span>
-          <span>{{ modelData.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>{{ modelData.ammunition.lightArms }}</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">压制武器弹药量(吨)：</span>
-          <span>{{ modelData.ammunition.suppressing }}</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">反坦克武器弹药量(吨)：</span>
-          <span>{{ modelData.ammunition.antiTank }}</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">防空反导武器弹药量(吨)：</span>
-          <span>{{ modelData.ammunition.antiAircraft }}</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">布扫雷装备弹药量(吨)：</span>
-          <span>{{ modelData.ammunition.mineLaying }}</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">爆破器材弹药量(吨)：</span>
-          <span>{{ modelData.ammunition.explosiveDevice }}</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">烟火装备弹药量(吨)：</span>
-          <span>{{ modelData.ammunition.smokeDevice }}</span>
-        </div>
-        <div class="zt-item flex ai-c">
-          <span style="min-width: 100px">防化消耗弹药量(吨)：</span>
-          <span>{{ modelData.ammunition.antiChemical }}</span>
-        </div> -->
-      </a-collapse-panel>
-      <a-collapse-panel class="simulation-collapse-item" key="8" header="保障标准信息">
-        <!-- <div class="zt-item flex ai-c jc-sb">
-          <span style="min-width: 100px">保障分配类型：</span>
-          <a-select
-            style="width: 120px"
-            class="simulation-select"
-            defaultValue="1"
-            dropdownClassName="simulation-select-dropdown"
-          >
-            <a-select-option value="1">自动分配</a-select-option>
-            <a-select-option value="2">手动分配</a-select-option>
-          </a-select>
-        </div> -->
-      </a-collapse-panel>
-      <!-- <a-collapse-panel class="simulation-collapse-item" key="9" header="保障配置">
-        <div class="zt-item flex ai-c jc-sb">
-          <a-button type="primary">兵力编组</a-button>
-          <a-button type="primary">关注</a-button>
-        </div>
-      </a-collapse-panel> -->
-    </a-collapse>
-  </div>
-</template>
-
-<script>
-import LonLatInput from './LonLatInput.vue'
-
-export default {
-  props: {
-    scenarioId: { type: [String, Number], required: true },
-    modelData: { type: Object, default: () => ({}) },
-  },
-  components: {
-    LonLatInput,
-  },
-  data() {
-    return {
-      cesium: null,
-      mcModal: {
-        visible: false,
-        mc: '',
-      },
-      lonlatModal: {
-        visible: false,
-        lon: 0,
-        lat: 0,
-      },
-      hdModal: {
-        visible: false,
-        hd: 0,
-      },
-    }
-  },
-  computed: {
-    hasDetail() {
-      return Boolean(this.modelData.id)
-    },
-  },
-  filters: {
-    logisticTypeFormat(v) {
-      return {
-        1: '信息对抗分队',
-        2: '边防作战分队',
-        3: '防化保障分队',
-        4: '火力打击分队',
-        5: '餐饮保障分队',
-        6: '运输保障分队',
-        7: '医疗分队',
-        8: '工兵分队',
-      }[v]
-    },
-    forceFormat(v) {
-      return ['红方', '蓝方'][v]
-    },
-    numberFormat(v) {
-      if (typeof v === 'number' && v) {
-        return +v.toFixed(2)
-      } else {
-        return v
-      }
-    },
-    lonFormat(v) {
-      const originValue = Number(v)
-      if (originValue) {
-        let result = ''
-        result += originValue > 0 ? '东经 ' : '西经 '
-        const num = Math.abs(originValue)
-        const d = Math.floor(num)
-        result += `${d}°`
-        const m = Math.floor(num * 60) % 60
-        result += `${m}′`
-        const s = Math.floor(num * 3600) % 60
-        result += `${s}″`
-        return result
-      } else {
-        return '0°0′0″'
-      }
-    },
-    latFormat(v) {
-      const originValue = Number(v)
-      if (originValue) {
-        let result = ''
-        result += originValue > 0 ? '北纬 ' : '南纬 '
-        const num = Math.abs(originValue)
-        const d = Math.floor(num)
-        result += `${d}°`
-        const m = Math.floor(num * 60) % 60
-        result += `${m}′`
-        const s = Math.floor(num * 3600) % 60
-        result += `${s}″`
-        return result
-      } else {
-        return '0°0′0″'
-      }
-    },
-  },
-  methods: {
-    handleOpenMcModal() {
-      this.mcModal.mc = this.modelData.team.teamName
-      this.mcModal.visible = true
-    },
-    async handleSubmilMc() {
-      try {
-        this.$http({
-          url: `/scenario/power/modifyUnit/${this.scenarioId}`,
-          method: 'post',
-          data: {
-            id: this.modelData.id,
-            name: this.mcModal.mc,
-          },
-        })
-        this.$message.success('编辑单元名称成功')
-        this.modelData.team.teamName = this.mcModal.mc
-        this.mcModal.visible = false
-      } catch (error) {
-        console.log(error)
-      }
-    },
-
-    handleOpenLonlatModal() {
-      this.lonlatModal.lon = Number(this.modelData.position.lng) || 0
-      this.lonlatModal.lat = Number(this.modelData.position.lat) || 0
-      this.lonlatModal.visible = true
-    },
-    async handleSubmilLonlat() {
-      try {
-        this.$http({
-          url: `/scenario/power/modifyUnit/${this.scenarioId}`,
-          method: 'post',
-          data: {
-            id: this.modelData.id,
-            position: {
-              lng: this.lonlatModal.lon,
-              lat: this.lonlatModal.lat,
-            },
-          },
-        })
-        this.$message.success('修改单元经纬度成功')
-        this.modelData.position.lng = '' + this.lonlatModal.lon
-        this.modelData.position.lat = '' + this.lonlatModal.lat
-        this.lonlatModal.visible = false
-      } catch (error) {
-        console.log(error)
-      }
-    },
-
-    handleOpenHdModal() {
-      this.hdModal.hd = Number(this.modelData.position.height) || 0
-      this.hdModal.visible = true
-    },
-    async handleSubmilHd() {
-      try {
-        this.$http({
-          url: `/scenario/power/modifyUnit/${this.scenarioId}`,
-          method: 'post',
-          data: {
-            id: this.modelData.id,
-            position: {
-              height: this.hdModal.hd,
-            },
-          },
-        })
-        this.$message.success('修改单元高度/深度成功')
-        this.modelData.position.height = this.hdModal.hd
-        this.hdModal.visible = false
-      } catch (error) {
-        console.log(error)
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.simulation-collapse::v-deep {
-  background-color: transparent;
-  color: #bbdded;
-  font-size: 16px;
-  line-height: 30px;
-  border: none;
-}
-.simulation-collapse-item::v-deep {
-  .ant-collapse-content {
-    background-color: transparent;
-    color: #bbdded;
-    border-top-color: #00baff66;
-    > .ant-collapse-content-box {
-      padding: 15px 0 5px;
-    }
-  }
-}
-.simulation-collapse > .simulation-collapse-item::v-deep {
-  border: none;
-  > .ant-collapse-header {
-    padding: 0;
-    color: #00baff;
-    font-size: 16px;
-    line-height: 38px;
-    display: flex;
-    align-items: center;
-    flex-direction: row-reverse;
-    justify-content: space-between;
-    .ant-collapse-arrow {
-      position: initial;
-      font-size: 16px;
-      transform: translateY(0);
-    }
-  }
-}
-.image {
-  width: 100%;
-  padding: 20px;
-  background-color: #0c3040;
-}
-.name {
-  color: #00baff;
-  text-decoration: underline;
-  font-size: 16px;
-}
-.simulation-select::v-deep {
-  .ant-select-selection {
-    background-color: #10475f;
-    border: solid 1px #1d5777;
-    color: #bbdded;
-  }
-  .ant-select-arrow {
-    color: #bbdded;
-  }
-}
-</style>
-<style lang="less">
-.simulation-select-dropdown {
-  background-color: #10475f;
-  border: solid 1px #1d5777;
-  .ant-select-dropdown-menu-item {
-    color: #bbdded;
-  }
-  .ant-select-dropdown-menu-item-selected {
-    background-color: #bbdded33;
-    color: #ffffff;
-    font-weight: normal;
-  }
-  .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
-    background-color: #bbdded33;
-    color: #ffffff;
-  }
-}
-</style>
diff --git a/src/views/subsystem/model/components/LonLatInput.vue b/src/views/subsystem/model/components/LonLatInput.vue
deleted file mode 100644
index 43fe543..0000000
--- a/src/views/subsystem/model/components/LonLatInput.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-  <div class="lon-lat-input">
-    <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 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 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 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>
-
-<script>
-export default {
-  props: {
-    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>
-
-<style lang="less" scoped></style>
diff --git a/src/views/subsystem/model/components/Zzxd.vue b/src/views/subsystem/model/components/Zzxd.vue
deleted file mode 100644
index f5337f0..0000000
--- a/src/views/subsystem/model/components/Zzxd.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-  <Flex fd="co" class="zzxd-wrapper">
-    <Flex class="zzxd-header" ai="c" jc="sb">
-      <div class="zzxd-title">作战行动</div>
-      <div>
-        <a-button type="text-primary" icon="menu"></a-button>
-        <a-button type="text-primary" icon="plus" @click="handleOpenAddActionModal"></a-button>
-        <a-button type="text-primary" icon="edit" @click="handleOpenEditActionModal"></a-button>
-        <a-button type="text-primary" icon="delete" @click="handleDeleteAction"></a-button>
-      </div>
-      <a-modal
-        v-model="actionModal.visible"
-        :title="actionModal.title"
-        :maskClosable="false"
-        :destroyOnClose="true"
-        @ok="handleSubmilAction"
-      >
-        <a-form-model
-          :model="actionModal.formData"
-          layout="horizontal"
-          :labelCol="{ span: 6 }"
-          :wrapperCol="{ span: 15 }"
-        >
-          <a-form-model-item v-for="item in actionModal.formItems" :key="item.prop" v-bind="item">
-            <component
-              :is="item.component || 'a-input'"
-              v-model="actionModal.formData[item.prop]"
-              v-bind="item.options"
-            />
-          </a-form-model-item>
-        </a-form-model>
-      </a-modal>
-    </Flex>
-    <div class="flex-1 scroller-y">
-      <div v-for="item in actionList" :key="item.id" class="action-item flex" @click="checkedAction = item">
-        <div class="action-icon">
-          <div class="action-line"></div>
-          <a-radio :checked="checkedAction && checkedAction.id === item.id" style="margin-right: 0"></a-radio>
-        </div>
-        <div class="flex-1">
-          <div class="action-title">{{ item.typeName || '- -' }}</div>
-          <div class="action-time">开始时间：{{ item.beginDateTime }}</div>
-          <div class="action-time">结束时间：{{ item.endDateTime }}</div>
-        </div>
-      </div>
-    </div>
-  </Flex>
-</template>
-
-<script>
-export default {
-  props: {
-    actionList: { type: Array, default: () => [] },
-  },
-  data() {
-    return {
-      checkedAction: null,
-      actionModal: {
-        visible: false,
-        formItems: [
-          { label: '事件名称', prop: 'typeName' },
-          {
-            label: '事件类型',
-            prop: 'typeType',
-            component: 'AntOriginSelect',
-            options: {
-              dataSource: () => ({
-                data: [
-                  { id: '1', title: '机动任务' },
-                  { id: '2', title: '战斗任务' },
-                  { id: '3', title: '整备任务' },
-                  { id: '4', title: '弹药保障' },
-                  { id: '5', title: '水保障' },
-                  { id: '6', title: '油保障' },
-                  { id: '7', title: '食品保障' }
-                ],
-              }),
-            },
-          },
-          { label: '开始时间', prop: 'beginDateTime', component: 'a-date-picker', options: { showTime: true } },
-          { label: '结束时间', prop: 'endDateTime', component: 'a-date-picker', options: { showTime: true } },
-          { label: '目标经度', prop: 'lon', component: 'a-input-number' },
-          { label: '目标纬度', prop: 'lat', component: 'a-input-number' },
-        ],
-        formData: {},
-      },
-    }
-  },
-  methods: {
-    handleOpenAddActionModal() {
-      this.actionModal.title = '添加事件信息'
-      this.actionModal.formData = {}
-      this.actionModal.visible = true
-    },
-    handleOpenEditActionModal() {
-      this.actionModal.title = '修改事件信息'
-      this.actionModal.formData = { ...this.checkedAction }
-      this.actionModal.visible = true
-    },
-    async handleSubmilAction() {
-      try {
-        await this.$http({
-          url: '/save',
-          method: 'post',
-          data: this.actionModal.formData,
-        })
-        this.$message.success(`${this.actionModal.title}成功`)
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    async handleDeleteAction() {
-      try {
-        await this.$confirm('确认删除所选事件吗？')
-        await this.$http({
-          url: '/delete',
-          method: 'delete',
-          params: { id: this.checkedAction.id },
-        })
-        this.$message.success(`删除事件成功`)
-      } catch (error) {
-        this.$message.success(`删除事件失败`)
-        console.log(error)
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.zzxd-wrapper {
-  height: 100%;
-  .zzxd-header {
-    padding: 5px 0;
-    border-bottom: 1px solid #00baff22;
-    .zzxd-title {
-      color: #00baff;
-    }
-  }
-}
-.action-item {
-  cursor: pointer;
-  padding: 5px 0;
-  .action-icon {
-    padding: 5px 16px;
-    position: relative;
-    flex-shrink: 0;
-    .action-line {
-      position: absolute;
-      right: 50%;
-      top: 21px;
-      width: 1px;
-      height: 100%;
-      background-color: #00baff;
-    }
-  }
-}
-.action-item:last-of-type {
-  .action-line {
-    display: none;
-  }
-}
-.action-item:hover {
-  background-color: #bae7ff44;
-}
-</style>
diff --git a/src/views/subsystem/model/index.vue b/src/views/subsystem/model/index.vue
index ab4b818..53ff143 100644
--- a/src/views/subsystem/model/index.vue
+++ b/src/views/subsystem/model/index.vue
@@ -1,9 +1,9 @@
 <template>
   <Flex fd="co" class="page-model">
     <Flex ai="c" jc="sb" class="page-model-header">
-      <span class="page-model-title">系统控制子系统</span>
-      <span class="page-model-title">推演想定【{{ roomName }}-{{ scenarioName }}】</span>
-      <span class="page-model-title">剩余 {{ roomInfo.remainTimeStr }}</span>
+      <span class="page-scene-title">场景编辑子系统</span>
+      <span class="page-scene-title">推演想定【{{ roomName }}-{{ scenarioName }}】</span>
+      <span class="page-scene-title">剩余 {{ roomInfo.remainTimeStr }}</span>
     </Flex>
     <Grid class="page-model-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>
@@ -15,47 +15,14 @@
       ></div>
       <div class="pr zi1" style="grid-area: 2 / 1 / 3 / 2">
         <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"
+              :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>
@@ -78,56 +45,10 @@
           </div>
         </ModuleWrapper>
       </div>
-      <div class="pr zi1" style="grid-area: 2 / 3 / 3 / 4">
-        <ModuleWrapper title="兵力编组" height="30%">
+      <Grid class="pr zi1" :rows="rightRows" gap="0px" style="grid-area: 2 / 3 / 3 / 4">
+        <ModuleWrapper title="兵力编组">
           <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>
+            <Zoom :max="rightViewer === 'blbz'" @zoom-max="rightViewer = 'blbz'" @zoom-min="rightViewer = ''" />
           </template>
           <div class="normal" style="padding: 5px; overflow-y: auto">
             <a-tree
@@ -139,39 +60,57 @@
             </a-tree>
           </div>
         </ModuleWrapper>
-        <ModuleWrapper height="70%">
-          <template #title>
-            <a-radio-group v-model="modelInfoType" button-style="solid">
-              <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>
+        <ModuleWrapper title="基础属性">
+          <template #extra>
+            <Zoom :max="rightViewer === 'jcsx'" @zoom-max="rightViewer = 'jcsx'" @zoom-min="rightViewer = ''" />
           </template>
           <div class="normal" style="padding: 15px 0">
-            <div style="height: 100%; padding: 0 15px; overflow-y: auto">
-              <Jcsx v-if="modelInfoType === 'jcsx'" :scenarioId="scenarioId" :modelData="jcsx.data" />
-              <Zzxd v-if="modelInfoType === 'zzxd'" :actionList="zzxd.data" />
-              <BzTask v-if="modelInfoType === 'bzrw'" :scenarioId="scenarioId" :resourceid="resourceid" :type="type" />
-            </div>
+            <Jcsx
+              ref="jcsx"
+              v-if="zzbzllSelectedFd"
+              :scenarioId="scenarioId"
+              :resourceId="zzbzllSelectedFd.id"
+              :resourceName="zzbzllSelectedFd.title"
+              :resourceType="zzbzllSelectedFd.resourceType"
+              :type="zzbzllSelectedFd.type"
+              :modelData="jcsxModelData"
+              :readonly="true"
+            />
           </div>
         </ModuleWrapper>
-      </div>
+        <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 Jcsx from './components/Jcsx.vue'
-import Zzxd from './components/Zzxd.vue'
-import BzTask from './components/BzTask.vue'
+import { getAction } from '@/api/manage'
+import Zoom from '../scene/components/Zoom.vue'
+import Jcsx from '../scene/components/Jcsx.vue'
+import Zzxd from '../scene/components/Zzxd.vue'
 
 export default {
   name: 'SubsystemModel',
   components: {
+    Zoom,
     Jcsx,
     Zzxd,
-    BzTask,
   },
   data() {
     return {
@@ -180,6 +119,7 @@ export default {
         remainTimeStr: '',
         remainTime: '',
         duringTime: '',
+        roomData: [],
       },
       roomId: '',
       roomName: '',
@@ -187,19 +127,8 @@ 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: {},
-      },
       qd: {
         qdlx: 'xqqd',
         qdColumns: [
@@ -222,88 +151,60 @@ export default {
         ],
       },
       blbz: {
-        modelData: null,
         treeData: [],
-        checkedKeys: [],
       },
-      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,
+      rightViewer: '',
+      xdrw: {
+        resourceTypeMapTitle: {
+          5: '作战行动',
+          6: '保障任务',
         },
-        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('model-cesium-container')
@@ -312,12 +213,20 @@ export default {
       this.closeWebsocket()
       return true
     })
-    this.getZzbzllTreeData(true)
-  },
-  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)
@@ -333,90 +242,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)
-      }
-    },
 
-    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')
@@ -424,47 +265,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) {
-        this.$message.error('未选择分队!')
-        return
-      }
-      this.blbzModal.treeData = this.blbz.treeData
-      this.blbzModal.checkedKeys = [...this.blbz.checkedKeys]
-      this.blbzModal.visible = true
+
+    initPlots(plots) {
+      plots.forEach((item) => {
+        if (item.lng && item.lat) {
+          this.cesium.addPlotByLonLat(item.imgBase64, { lon: +item.lng, lat: +item.lat }, item.id)
+        }
+      })
     },
-    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 {
-        const { type, id: resourceId, scenarioId } = this.blbz.modelData
-        const res = await getAction('/statistic/info', { type, resourceId, scenarioId })
-        this.jcsx.data = res.data
-      } catch (error) {
-        console.log(error)
-      }
+
+    handleSelectZzbzll(selectedKeys, { node }) {
+      this.cesium.setClientByCenter({ longitude: +node.dataRef.lng, latitude: +node.dataRef.lat })
     },
   },
 }
diff --git a/src/views/subsystem/scene/index.vue b/src/views/subsystem/scene/index.vue
index e564dd2..4e25bbb 100644
--- a/src/views/subsystem/scene/index.vue
+++ b/src/views/subsystem/scene/index.vue
@@ -231,7 +231,7 @@ export default {
       }
     },
 
-    initPlot(plots) {
+    initPlots(plots) {
       plots.forEach((item) => {
         if (item.lng && item.lat) {
           this.cesium.addPlotByLonLat(item.imgBase64, { lon: +item.lng, lat: +item.lat }, item.id)
diff --git a/src/views/subsystem/scene/presetting.vue b/src/views/subsystem/scene/presetting.vue
index f93dab3..a298e1e 100644
--- a/src/views/subsystem/scene/presetting.vue
+++ b/src/views/subsystem/scene/presetting.vue
@@ -7,7 +7,9 @@
     </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">
-        <a-button type="text-primary">保障流程</a-button>
+        <a-menu :selectedKeys="[]" mode="horizontal" theme="dark">
+          <a-menu-item @click="handleOpenGuaranteeProcessPage()"> 保障流程 </a-menu-item>
+        </a-menu>
       </div>
       <div
         ref="scene-presetting-cesium-container"
@@ -114,12 +116,7 @@
         <ModuleWrapper title="基础属性">
           <template #extra>
             <template v-if="zzbzll.selectedFd">
-              <a-button
-                type="text-primary"
-                icon="sync"
-                style="font-size: 20px"
-                @click="getJcsxModelData()"
-              ></a-button>
+              <a-button type="text-primary" icon="sync" style="font-size: 20px" @click="getJcsxModelData()"></a-button>
             </template>
             <Zoom :max="rightViewer === 'jcsx'" @zoom-max="rightViewer = 'jcsx'" @zoom-min="rightViewer = ''" />
           </template>
@@ -140,12 +137,7 @@
         <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="getXdrwActionList()"
-              ></a-button>
+              <a-button type="text-primary" icon="sync" style="font-size: 20px" @click="getXdrwActionList()"></a-button>
             </template>
             <Zoom :max="rightViewer === 'xdrw'" @zoom-max="rightViewer = 'xdrw'" @zoom-min="rightViewer = ''" />
           </template>
@@ -229,6 +221,7 @@ export default {
         loading: false,
         actionList: [],
       },
+      childWindow: null,
     }
   },
   computed: {
@@ -253,6 +246,10 @@ export default {
   created() {
     this.scenarioId = this.$route.params.scenarioId
     this.scenarioName = this.$route.params.scenarioName
+    window.addEventListener('beforeunload', (e) => {
+      this.childWindow && this.childWindow.close()
+      return true // 必须设置 returnValue 才能显示确认框
+    })
   },
   mounted() {
     this.cesium = new window.MyCesium('scene-presetting-cesium-container')
@@ -456,6 +453,16 @@ export default {
         this.xdrw.loading = false
       }
     },
+    handleOpenGuaranteeProcessPage() {
+      this.childWindow = window.open(
+        '/guaranteeProcess',
+        'guaranteeProcess',
+        'height=' +
+          window.screen.height +
+          ',width=600,' +
+          ',top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no'
+      )
+    },
   },
 }
 </script>
@@ -479,6 +486,9 @@ export default {
     background-color: #022234;
   }
 }
+.ant-menu-horizontal {
+  line-height: 30px;
+}
 .scene-presetting-cesium-container {
   width: 100%;
   height: 100%;
diff --git a/vue.config.js b/vue.config.js
index 0baecba..92301f7 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -137,7 +137,7 @@ const vueConfig = {
   // disable source map in production
   productionSourceMap: false,
   // babel-loader no-ignore node_modules/*
-  transpileDependencies: ['@cesium/widgets', '@cesium/engine'],
+  transpileDependencies: ['@cesium/widgets', '@cesium/engine', 'mermaid', '@mermaid-js/parser', '@iconify/utils', 'marked'],
 }
 
 // preview.pro.loacg.com only do not use in your production;