训练员系统简化

src/config/router.config.js

@@ -225,11 +225,6 @@ export const constantRouterMap = [
         component: () => import(/* webpackChunkName: "fail" */ '@/views/simulationScene/trainer/index.vue'),
         meta: { title: '训练员系统' },
       },
-      {
-        path: '/simulationScene/trainerMenu',
-        name: 'SimulationSceneTrainerMenu',
-        component: () => import(/* webpackChunkName: "fail" */ '@/views/simulationScene/trainer/Menu.vue'),
-      },
       {
         path: '/simulationScene/trainerSystem',
         name: 'SimulationSceneTrainerSystem',

src/views/simulationScene/centralControl/index.vue

@@ -413,7 +413,7 @@ export default {
       const centerLon = (leftUpLon + rightUpLon + rightDownLon + leftDownLon) / 4
       const centerLat = (leftUpLat + rightUpLat + rightDownLat + leftDownLat) / 4
       this.roomInfo.cesium = new window.MyCesium('jwd-cesium', { center: [centerLon, centerLat] })
-      this.roomInfo.cesium.setViewerByAllCorner(
+      this.roomInfo.cesium.setClientByAllCorner(
         [leftUpLon, leftUpLat],
         [rightUpLon, rightUpLat],
         [rightDownLon, rightDownLat],

src/views/simulationScene/index.vue

@@ -2,7 +2,7 @@
   <div class="simulation-scene-page flex-c">
     <Flex v-if="title" jc="sb" ai="c" class="simulation-scene-header">
       <div class="simulation-scene-title">{{ title }}</div>
-      <div><a-icon type="logout" title="退出系统" @click="handleQuit" /></div>
+      <div><a-icon type="poweroff" title="退出系统" style="color: red" @click="handleQuit" /></div>
     </Flex>
     <div class="simulation-scene-main">
       <router-view></router-view>

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

@@ -190,6 +190,12 @@ export default {
       }
     },
     dragend(item, e) {
+      const minX = this.$refs['cesium-container'].offsetLeft
+      const maxX = this.$refs['cesium-container'].offsetLeft + this.$refs['cesium-container'].offsetWidth
+      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 })

src/views/simulationScene/sceneEditing/index.vue

@@ -7,7 +7,7 @@
       </div>
     </template>
     <template #extra>
-      <a-icon type="logout" title="退出系统" style="font-size: 18px" @click="handleQuitSystem" />
+      <a-icon type="poweroff" title="退出系统" style="font-size: 18px; color: red" @click="handleQuitSystem" />
     </template>
     <div v-if="scenarioId" class="scenario-name">【{{ scenarioId }}】{{ scenarioName }}</div>
     <SceneEditing class="normal" v-if="scenarioId" :scenarioId="scenarioId" style="padding: 0"></SceneEditing>
@@ -73,4 +73,4 @@ export default {
   letter-spacing: 2px;
   color: #00deff;
 }
-</style>
+</style>

src/views/simulationScene/trainer/Menu.vue

@@ -1,117 +0,0 @@
-<template>
-  <ModuleWrapper :title="roomName">
-    <template #extra>
-      <a-icon type="logout" title="退出房间" @click="handleQuitRoom" />
-    </template>
-    <Grid class="trainer-menu-page normal" :columns="[1, 1]" :rows="[1, 1]" gap="40px">
-      <Flex
-        v-for="item in menuList"
-        :key="item.moduleCode"
-        fd="co"
-        ai="c"
-        jc="sb"
-        class="menu-block"
-        @click="handleClick(item)"
-      >
-        <img class="menu-icon" :src="systemIconMap[item.moduleCode]" alt="" />
-        <div class="menu-title">{{ item.moduleName }}</div>
-      </Flex>
-    </Grid>
-  </ModuleWrapper>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-
-export default {
-  data() {
-    return {
-      roomName: '',
-      menuList: [
-        {
-          id: 1,
-          moduleName: '仿真模型子系统',
-          moduleUrl: '/',
-          sortOrder: 1,
-          moduleStatus: '0',
-          moduleCode: 'simulation_system',
-        },
-        {
-          id: 2,
-          moduleName: '场景编辑子系统',
-          moduleUrl: '/',
-          sortOrder: 2,
-          moduleStatus: '0',
-          moduleCode: 'scenario_system',
-        },
-        {
-          id: 3,
-          moduleName: '显示子系统',
-          moduleUrl: '/',
-          sortOrder: 3,
-          moduleStatus: '0',
-          moduleCode: 'display_system',
-        },
-        {
-          id: 4,
-          moduleName: '评估子系统',
-          moduleUrl: '/',
-          sortOrder: 4,
-          moduleStatus: '0',
-          moduleCode: 'evaluation_system',
-        },
-      ],
-      systemPathMap: {
-        simulation_system: 'SimulationSceneTrainerSystemSimulationModel',
-        scenario_system: 'SimulationSceneTrainerSystemSceneEditing',
-        display_system: 'SimulationSceneTrainerSystemDisplay',
-        evaluation_system: 'SimulationSceneTrainerSystemEvaluation',
-      },
-    }
-  },
-  computed: {
-    ...mapState({
-      systemIconMap: (state) => state.simulation.systemIconMap,
-    }),
-  },
-  created() {
-    const roomId = window.localStorage.getItem('trainerRoomId')
-    this.roomName = window.localStorage.getItem('trainerRoomName')
-    if (!roomId) {
-      this.$router.push({ name: 'SimulationSceneTrainer' })
-      return
-    }
-  },
-  methods: {
-    handleClick(item) {
-      this.$router.push({ name: this.systemPathMap[item.moduleCode] })
-    },
-    handleQuitRoom() {
-      window.localStorage.removeItem('trainerRoomId')
-      window.localStorage.removeItem('trainerRoomName')
-      this.$router.push({ name: 'SimulationSceneTrainer' })
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.trainer-menu-page.normal {
-  padding: 40px;
-}
-.menu-block {
-  border: 1px solid #06445f;
-  background-color: #062e45;
-  position: relative;
-  padding-bottom: 64px;
-  cursor: pointer;
-  .menu-icon {
-    transform: translateY(calc(180px - 50%)) scale(1.5, 1.5);
-  }
-  .menu-title {
-    color: #9cd3f5;
-    font-size: 36px;
-    line-height: 39px;
-  }
-}
-</style>

src/views/simulationScene/trainer/index.vue

@@ -215,7 +215,7 @@ export default {
     handleEnterRoom(roomItem) {
       window.localStorage.setItem('trainerRoomId', roomItem.id)
       window.localStorage.setItem('trainerRoomName', roomItem.roomName)
-      this.$router.push({ name: 'SimulationSceneTrainerMenu' })
+      this.$router.push({ name: 'SimulationSceneTrainerSystemDisplay' })
     },
   },
 }

src/views/simulationScene/trainer/system/index.vue

@@ -1,27 +1,46 @@
 <template>
-  <ModuleWrapper>
+  <ModuleWrapper :title="title + ' - ' + roomName">
-    <template #title>
-      <div class="trainer-page-header">
-        <a-icon type="left" title="退出系统" @click="handleQuitSystem" />
-        <span>{{ title }}</span>
-      </div>
-    </template>
     <template #extra>
       <a-icon type="logout" title="退出房间" style="font-size: 18px" @click="handleQuitRoom" />
     </template>
-    <div v-if="roomName" class="room-name">{{ roomName }}</div>
+    <Flex class="menu-bar">
+      <Flex ai="c" v-for="menu in showMenus" :key="menu.moduleCode" class="menu-item" @click="handleClickMenu(menu)">
+        <img class="menu-icon" :src="systemIconMap[menu.moduleCode]" alt="" />
+        <div class="menu-title">{{ menu.title }}</div>
+      </Flex>
+    </Flex>
     <router-view></router-view>
   </ModuleWrapper>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   data() {
     return {
       title: '',
       roomName: '',
+      allMenu: [
+        { moduleCode: 'display_system', title: '显示子系统', name: 'SimulationSceneTrainerSystemDisplay' },
+        {
+          moduleCode: 'simulation_system',
+          title: '仿真模型子系统',
+          name: 'SimulationSceneTrainerSystemSimulationModel',
+        },
+        { moduleCode: 'scenario_system', title: '场景编辑子系统', name: 'SimulationSceneTrainerSystemSceneEditing' },
+        { moduleCode: 'evaluation_system', title: '评估子系统', name: 'SimulationSceneTrainerSystemEvaluation' },
+      ],
     }
   },
+  computed: {
+    ...mapState({
+      systemIconMap: (state) => state.simulation.systemIconMap,
+    }),
+    showMenus() {
+      return this.allMenu.filter((menu) => menu.name !== this.$route.name)
+    },
+  },
   created() {
     this.$bus.$on('set-trainer-system-title', (title) => {
       this.title = title
@@ -34,45 +53,50 @@ export default {
     }
   },
   methods: {
-    handleQuitSystem() {
-      this.$router.push({ name: 'SimulationSceneTrainerMenu' })
-    },
     handleQuitRoom() {
       window.localStorage.removeItem('trainerRoomId')
       window.localStorage.removeItem('trainerRoomName')
       this.$router.push({ name: 'SimulationSceneTrainer' })
     },
+    handleClickMenu(menu) {
+      this.$router.push({ name: menu.name })
+    },
   },
 }
 </script>
 
 <style lang="less" scoped>
-.trainer-page-header {
+.menu-bar {
-  font-size: 18px;
-  font-weight: bold;
-  line-height: 26px;
-  letter-spacing: 2px;
-  color: #00deff;
-  padding: 0 8px;
-  .anticon {
-    margin-right: 10px;
-  }
-}
-.room-name {
   position: fixed;
   left: 50%;
   top: 0;
   transform: translateX(-50%);
-  height: 50px;
+  height: 50px !important;
-  line-height: 50px;
+  .menu-item {
-  font-size: 18px;
+    padding: 0 16px;
-  font-weight: bold;
+    margin: 0 8px;
-  letter-spacing: 2px;
+    cursor: pointer;
-  color: #00deff;
+    .menu-icon {
+      width: 24px;
+      height: 24px;
+      object-fit: contain;
+      margin-right: 10px;
+    }
+    .menu-title {
+      font-size: 18px;
+      line-height: 24px;
+    }
+  }
+  .menu-item:hover {
+    background-color: #00deff22;
+    .menu-title {
+      color: #00deff;
+    }
+  }
 }
 ::v-deep {
   .module-wrapper-main > div {
     height: 100%;
   }
 }
-</style>
+</style>