优化

src/layout/Aside/index.vue

@@ -1,114 +0,0 @@
-<template>
-  <el-aside class="MainAside">
-    <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="transparent"
-      text-color="#fff" active-text-color="#19c3eb" :default-active="$route.path" :collapse="isCollapse" router>
-      <el-menu-item index="/home/situation" style="margin-top:20px;">
-        <dv-decoration-11 style="width:200px;height:60px;">场景模拟</dv-decoration-11>
-      </el-menu-item>
-      <el-menu-item index="/home/simulation">
-        <dv-decoration-11 style="width:200px;height:60px;">态势显示</dv-decoration-11>
-      </el-menu-item>
-    </el-menu>
-  </el-aside>
-</template>
-<script>
-import { mapGetters } from 'vuex'
-export default {
-  name: 'Aside',
-  data() {
-    return {
-      
-    };
-  },
-  computed: {
-    ...mapGetters([
-      'isCollapse'
-    ]),
-  },
-  methods: {
-    handleOpen(key, keyPath) {
-      console.log(key, keyPath);
-    },
-    handleClose(key, keyPath) {
-      console.log(key, keyPath);
-    }
-  }
-
-}
-
-</script>
-<style  scoped>
-.MainAside {
-  width: unset !important;
-  max-width: 300px;
-  position: relative;
-  background: #071e53;
-}
-.MainAside::-webkit-scrollbar {
-     display: none;
-}
-
-.el-menu-vertical-demo:not(.el-menu--collapse) {
-  width: 200px;
-  min-height: 400px;
-}
-
-.el-menu-item:hover{
-    color: #f46827 !important;
-    background: none !important;
-    text-decoration: underline;
-    
-}
-.el-menu-item:hover i {
-      color: #f46827 !important;
-      }
-.el-menu-item{
-    padding-left: 0px !important;
-    height: 70px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-/deep/ .el-submenu__title{
-    padding-left: 0px !important;
-    height: 70px;
-}
-
-/deep/ .el-submenu__title:hover{
-    color: #f46827 !important;
-    background: none !important;
-    text-decoration: underline;
-    
-}
-
-/deep/ .el-submenu__title:hover i{
-    color: #f46827 !important;
-    background: none !important;
-    text-decoration: underline;
-    
-}
-
-/deep/ .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
-	display: none; 
-
-}
-
-/deep/ .el-submenu>.el-submenu__title .el-submenu__icon-arrow{
-	display: none;
-
-}
-
-
-.el-menu {
-  border: none;
-}
-
-.el-menu--collapse {
-    width: 0px;
-}
-
-.collapse {
-  position: absolute;
-  bottom: 40px;
-  width: 100%;
-}
-</style>

src/layout/Footer/index.vue

@@ -1,16 +1,16 @@
 <template>
     <el-footer class="MainFooter">
-      <div @click="setCollapse()" class="collapse">
-      <el-tooltip class="item" effect="dark" content="展开" placement="right">
-        <i class="el-icon-d-arrow-right"
-          style="font-size: 1.5em;font-weight: 600; display: table; margin: 0 auto; color: #19c3eb;" v-if="isCollapse"></i>
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="收缩" placement="right">
-        <i class="el-icon-d-arrow-left"
-          style="font-size: 1.5em;font-weight: 600; display: table; margin: 0 auto;color: #19c3eb" v-if="!isCollapse"></i>
-      </el-tooltip>
-       </div>
-       <div style="margin-left: 300px;line-height: 31px;">
+      <el-switch
+        style="display: block;margin-top: 5px;margin-left: 10px;"
+        v-model="modeType"
+        active-color="#3f96a5"
+        inactive-color="#000000"
+        active-text="态势显示"
+        inactive-text="场景模拟"
+        @change="modelTypeChange()">
+      </el-switch>
+
+       <div style="margin-left: 300px;line-height: 31px;color: #3f96a5;">
         <span style="margin: auto 30px;">经度: {{ mouseLocation.longitude }}</span>
         <span style="margin: auto 30px;">纬度：{{ mouseLocation.latitude }}</span>
         <span style="margin: auto 30px;">层级: {{ cameraHeightAndZoom.zoom }}</span>
@@ -23,6 +23,7 @@ import { mapGetters } from 'vuex'
 export default {
     data(){
       return{
+        modeType: false,
         platformshow: this.platformShow,
         //经度
         longitude: 0,
@@ -34,17 +35,24 @@ export default {
     ...mapGetters([
       'isCollapse',
       'mouseLocation',
-      'cameraHeightAndZoom'
+      'cameraHeightAndZoom',
+      'mode'
     ]),
   },
     watch: {
-       init: {
         mouseLocation: function(val, oldVal){
             console.log(val)
             this.longitude = val.longitude
             this.latitude = val.latitude
-          }
-       }
+        },
+        mode: function(val, oldVal){
+            this.modeType = val
+            this.$notify({
+              title: val==true?"已切换到态势显示":"已切换到场景模拟",
+              type: 'success'
+            });
+        }
+       
     },
     mounted(){
     },
@@ -54,6 +62,9 @@ export default {
       },
       setCollapse(){
         this.$store.commit('app/setIsCollapse',!this.isCollapse);
+      },
+      modelTypeChange(val){
+        this.$store.commit('app/setMode',this.modeType);
       }
       
   }
@@ -65,8 +76,7 @@ export default {
     padding: 0px;
     height: 30px !important;  
     display: flex;
-    color: white;
-    background-color: #282c34;
+    background-color: #071c44;
     
 }
 

src/layout/Header/index.vue

@@ -1,31 +1,20 @@
 <template>
     <el-header class="MainHeader">
-    <div class="title"><dv-border-box-10 style="padding: 5px;"><span style="margin-left: 2px;">电子攻防建模仿真系统</span></dv-border-box-10></div>
-    <div class="DimensionButtons"> 
-        <el-button :type="dimension == 2 ? 'success' : 'danger'" @click="dimensionswitch(2)" round>二维</el-button>
-        <el-button :type="dimension == 3 ? 'success' : 'danger'" @click="dimensionswitch(3)" round>三维</el-button>
-        <el-button :type="dimension == 5 ? 'success' : 'danger'" @click="dimensionswitch(5)" round>一体化</el-button>
-    </div>   
+    <dv-decoration-8 class="header-left-decoration"/>
+    <dv-decoration-5 class="header-center-decoration"/>
+    <dv-decoration-8 :reverse="true" class="header-right-decoration"/>
+    <div class="title">电子攻防建模仿真系统</div>
     </el-header>
 </template>
 <script>
-import { mapGetters } from "vuex";
 export default {
     data(){
       return{
-  
+    
       }
     },
-    computed: {
-    ...mapGetters([
-      "dimension"
-    ])
-  },
     methods: {
-      dimensionswitch(val){
-        this.$store.commit("app/setDimension",val);
-      }
-    }
+        }
 }
 </script>
 <style lang="scss" scoped>
@@ -35,38 +24,16 @@ export default {
     display: flex;
     justify-content: space-between;
     height: 70px !important;
-    background: url('~@/assets/image/header-bg.png');
-    background-size: 100% 100%;
     .title{
       color: white;
       position: absolute;
       font-size: 30px;
       font-weight: 700;
-      left: 15px;
-      top: 10px;  
-    }
-    .DimensionButtons {
-        color: #fff;
-        height: 100%;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        /*由于flex-direction: column，因此align-items代表的是水平方向*/
-        justify-content: center;
-        /*由于flex-direction: column，因此justify-content代表的是垂直方向*/
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-
-  }
-
-    .DimensionButtons .el-button {
-          padding: auto 50px;
-          margin: auto 20px;
-          width: 200px;
+      left: 50%;
+      top: 5px;
+      transform: translateX(-50%);
     }
 
-
     .header-left-decoration {
       width: 25%;
       height: 60px;
@@ -77,7 +44,7 @@ export default {
     }
     .header-center-decoration {
       width: 40%;
-      margin-top: 20px;
+      margin-top: 10px;
   }
     
 }

src/layout/index.js

@@ -1,9 +1,6 @@
-
 export { default as Main }
-  from './Main'
+from './Main'
 export { default as Header }
-  from './Header'
+from './Header'
 export { default as Footer }
-  from './Footer'
-export { default as Aside }
-  from './Aside'
+from './Footer'

src/layout/index.vue

@@ -2,7 +2,6 @@
       <el-container class="outer-container">
         <Header></Header>
         <el-container class="center-container">
-          <Aside ></Aside>
           <el-container direction="vertical" >
             <Main></Main>
           <Footer></Footer>
@@ -11,13 +10,12 @@
       </el-container>
   </template>
   <script>
-  import { Header, Main, Aside, Footer } from './'
+  import { Header, Main, Footer } from './'
   export default {
     name: 'Layout',
     components: {
       Header,
       Main,
-      Aside,
       Footer
     }
   }

src/router/index.js

@@ -23,18 +23,12 @@ export const constantRoutes = [ // 配置路由，这里是个数组
     {
         path: '/home',
         component: Layout,
-        redirect: '/home/situation',
+        redirect: '/home/map',
         children: [{
-                path: 'situation',
-                name: 'situation',
+                path: 'map',
+                name: 'map',
                 component: () =>
-                    import ('@/views/situation/index.vue')
-            },
-            {
-                path: 'simulation',
-                name: 'simulation',
-                component: () =>
-                    import ('@/views/simulation/index.vue')
+                    import ('@/views/map/index.vue')
             }
 
         ]

src/store/getters.js

@@ -1,5 +1,6 @@
 const getters = {
     //app
+    mode: state => state.app.mode,
     isCollapse: state => state.app.isCollapse,
     dimension: state => state.app.dimension,
     mouseLocation: state => state.app.mouseLocation,

src/store/modules/app.js

@@ -1,6 +1,7 @@
 const getDefaultState = () => {
     return {
 
+        mode: false, //false为场景模拟，true为态势显示
         isCollapse: false, //是否展开
         dimension: 5, //地图维度
         mouseLocation: { //鼠标在地图的经纬度 
@@ -19,7 +20,9 @@ const state = getDefaultState()
 
 const mutations = {
 
-
+    setMode(state, mode) {
+        state.mode = mode
+    },
     setIsCollapse(state, isCollapse) {
         state.isCollapse = isCollapse
     },

src/views/login/index.vue

@@ -58,9 +58,9 @@ export default {
         password: "123456",
       },
       dataRule: {
-        mobilePhone: [
-          { required: true, message: "帐号不能为空", trigger: "blur" },
-        ],
+        // mobilePhone: [
+        //   { required: true, message: "帐号不能为空", trigger: "blur" },
+        // ],
         password: [
           { required: true, message: "密码不能为空", trigger: "blur" },
         ],

src/views/simulation/index.vue → src/views/map/index.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="container">
+    <div class="DimensionButtons"> 
+        <el-button :type="dimension == 2 ? 'success' : 'danger'" @click="dimensionswitch(2)" round size="mini">二维</el-button>
+        <el-button :type="dimension == 5 ? 'success' : 'danger'" @click="dimensionswitch(5)" round size="mini">一体化</el-button>
+        <el-button :type="dimension == 3 ? 'success' : 'danger'" @click="dimensionswitch(3)" round size="mini">三维</el-button>
+    </div>
     <el-row id="earth" style="height: 100%; width: 100%; display: flex; position: relative">
       <el-col style="height: 100%; position: relative" :span="this.leftwidth">
         <div class="main-layout" v-on:mouseover="changeActive('2D')" @mousemove="getMouseLocation">
@@ -13,7 +18,7 @@
       </el-col>
       <el-tabs type="border-card" v-model="activeName" tab-position="left" class="menu" :stretch="true"
         @tab-click="legendClick">
-        <el-tab-pane name="fouth">
+        <el-tab-pane name="1">
           <el-tooltip placement="right" effect="light" slot="label">
             <span slot="content" class="item">想定</span>
             <span><i class="el-icon-house"></i></span>
@@ -27,7 +32,41 @@
             </el-table-column>
           </el-table>
         </el-tab-pane>
-        <el-tab-pane name="fifth">
+        <el-tab-pane name="2" :disabled="this.mode==true">
+          <el-button type="primary" @click="addRed()">新增</el-button>
+          <el-tooltip placement="right" effect="light" slot="label">
+            <span slot="content" class="item">红方兵力</span>
+            <span><i class="el-icon-message-solid"></i></span>
+          </el-tooltip>
+          <el-table :data="redList">
+            <el-table-column label="序号" prop="order" width="50px"></el-table-column>
+            <el-table-column label="名称" align="center" prop="name"></el-table-column>
+            <el-table-column label="干扰" align="center" prop="method"></el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane name="3" :disabled="this.mode==true">
+          <el-button type="primary" @click="addBlue()">新增</el-button>
+          <el-tooltip placement="right" effect="light" slot="label">
+            <span slot="content" class="item">蓝方兵力</span>
+            <span><i class="el-icon-bell"></i></span>
+          </el-tooltip>
+          <el-table :data="blueList">
+            <el-table-column label="序号" prop="order" width="50px"></el-table-column>
+            <el-table-column label="名称" align="center" prop="name"></el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane name="4" :disabled="this.mode==true">
+          <el-button type="primary" @click="addSatellite()">新增</el-button>
+          <el-tooltip placement="right" effect="light" slot="label">
+            <span slot="content" class="item">蓝方卫星</span>
+            <span><i class="el-icon-bell"></i></span>
+          </el-tooltip>
+          <el-table :data="satelliteList">
+            <el-table-column label="序号" prop="order" width="50px"></el-table-column>
+            <el-table-column label="名称" align="center" prop="name"></el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane name="5" :disabled="this.mode==false">
           <el-tooltip placement="right" effect="light" slot="label">
             <span slot="content" class="item">消息</span>
             <span><i class="el-icon-chat-line-round"></i></span>
@@ -38,7 +77,7 @@
             <el-table-column label="消息" align="center" prop="context"></el-table-column>
           </el-table>
         </el-tab-pane>
-        <el-tab-pane name="sixth">
+        <el-tab-pane name="6" :disabled="this.mode==false">
           <el-tooltip placement="right" effect="light" slot="label">
             <span slot="content" class="item">红方兵力</span>
             <span><i class="el-icon-s-flag"></i></span>
@@ -68,7 +107,7 @@
         <el-button icon="el-icon-house" circle @click="home()"></el-button>
         <el-button icon="el-icon-plus" circle @click="big()"></el-button>
         <el-button icon="el-icon-minus" circle @click="small()"></el-button>
-        <el-tag>想定：{{xdName}}</el-tag>
+        <el-button icon="el-icon-download" circle @click="saveJson()" :disabled="this.mode==true"></el-button>
       </div>
     </el-row>
     <!-- <TimeLine :showLayers="showLayers" :timeDataArray="timeDataArray" class="TimeLine"></TimeLine> -->
@@ -103,8 +142,6 @@
           <span>蓝方的拦截成功率为：  {{parseFloat(missileFailed/findMissile)*100}}%</span>
         </el-col>
       </el-row>
-
-
     </el-tab-pane>
     <el-tab-pane label="干扰效果" name="third">
       <div class="image-list">
@@ -161,6 +198,86 @@
         </div>
       </el-dialog>
     </div>
+    <div v-if="isShow" class="modeltooltip" ref="modeltooltip">{{ modeltooltip }}</div>
+    <div>
+      <el-dialog title="新增红方作战单元" :visible ="redVisible" width="50%">
+        <el-form ref="form" :model="redForm" label-width="80px">
+  <el-form-item label="单元名称">
+    <el-input v-model="redForm.name"></el-input>
+  </el-form-item>
+  <el-form-item label="干扰样式">
+    <el-select v-model="redForm.method" placeholder="请选择干扰样式">
+      <el-option label="噪声调频干扰" value="噪声调频干扰"></el-option>
+      <el-option label="噪声调幅干扰" value="噪声调幅干扰"></el-option>
+      <el-option label="噪声直放干扰" value="噪声直放干扰"></el-option>
+      <el-option label="间接采样转发干扰" value="间接采样转发干扰"></el-option>
+    </el-select>
+  </el-form-item>
+  <el-form-item label="单元经度">
+    <el-input v-model="redForm.lon"></el-input>
+  </el-form-item>
+  <el-form-item label="单元纬度">
+    <el-input v-model="redForm.lat"></el-input>
+  </el-form-item>
+  <el-form-item label="单元高度">
+    <el-input v-model="redForm.h"></el-input>
+  </el-form-item>
+  <el-form-item label="定点高度">
+    <el-input v-model="redForm.apogee_height"></el-input>
+  </el-form-item>
+</el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="saveNewRed()" type="primary">保存</el-button>
+          <el-button @click="redVisible = false">关闭</el-button>
+        </div>
+      </el-dialog>
+    </div>
+    <div>
+      <el-dialog title="新增蓝方作战单元" :visible ="blueVisible" width="50%">
+        <el-form ref="form" :model="blueForm" label-width="80px">
+  <el-form-item label="单元名称">
+    <el-input v-model="blueForm.name"></el-input>
+  </el-form-item>
+  <el-form-item label="单元经度">
+    <el-input v-model="blueForm.lon"></el-input>
+  </el-form-item>
+  <el-form-item label="单元纬度">
+    <el-input v-model="blueForm.lat"></el-input>
+  </el-form-item>
+  <el-form-item label="单元高度">
+    <el-input v-model="blueForm.h"></el-input>
+  </el-form-item>
+
+</el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="saveNewBlue()" type="primary">保存</el-button>
+          <el-button @click="blueVisible = false">关闭</el-button>
+        </div>
+      </el-dialog>
+    </div>
+    <div>
+      <el-dialog title="新增蓝方预卫星" :visible ="satelliteVisible" width="50%">
+        <el-form ref="form" :model="satelliteForm" label-width="80px">
+  <el-form-item label="卫星名称">
+    <el-input v-model="satelliteForm.name"></el-input>
+  </el-form-item>
+  <el-form-item label="TLE_LINE0">
+    <el-input v-model="satelliteForm.TLE_LINE0"></el-input>
+  </el-form-item>
+  <el-form-item label="TLE_LINE1">
+    <el-input v-model="satelliteForm.TLE_LINE1"></el-input>
+  </el-form-item>
+  <el-form-item label="TLE_LINE2">
+    <el-input v-model="satelliteForm.TLE_LINE2"></el-input>
+  </el-form-item>
+
+</el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="saveNewSatellite()" type="primary">保存</el-button>
+          <el-button @click="satelliteVisible = false">关闭</el-button>
+        </div>
+      </el-dialog>
+    </div>
   </div>
 </template>
 <script>
@@ -168,21 +285,25 @@ import screenfull from "screenfull";
 import fireController from "@/api/fireController.js";
 import { getToken } from "@/utils";
 import axios from "axios";
-import satelliteModel from 'public/static/model/satelite1.glb';
-import TimeLine from '@/components/TimeLine/index.vue';
-import missileModel from 'public/static/model/basic_missle.glb';
-import centerModel from 'public/static/model/the_white_house.glb';
-import radarModel from 'public/static/model/radar.glb'
+import satelliteModel2 from 'public/static/model/satellite2.glb';
+import missileModel2 from 'public/static/model/basic_missle2.glb';
+import centerModel2 from 'public/static/model/whitehouse2.glb';
+import radarModel2 from 'public/static/model/radar2.glb'
+import satelliteModel3 from 'public/static/model/satellite3.glb';
+import missileModel3 from 'public/static/model/basic_missle3.glb';
+import centerModel3 from 'public/static/model/whitehouse3.glb';
+import radarModel3 from 'public/static/model/radar3.glb'
 import { mapGetters } from "vuex";
 import CesiumNavigation from 'cesium-navigation-es6/viewerCesiumNavigationMixin';
 export default {
-  components: {
-    TimeLine
-  },
+  // components: {
+  //   TimeLine
+  // },
   computed: {
     ...mapGetters([
-      "dimension"
-    ])
+      "dimension",
+      "mode"
+    ]),
   },
   data() {
     return {
@@ -200,12 +321,38 @@ export default {
       selectMissile:{
         pos:{x:0,y:0,z:0}
       },
+      redForm: {
+          name: '',
+          method: '',
+          lat: '',
+          lon: '',
+          h: '',
+          apogee_height:''
+        },
+      blueForm: {
+          name: '',
+          lat: '',
+          lon: '',
+          h: '',
+        },
+      satelliteForm:{
+          name: '',
+          TLE_LINE0: '',
+          TLE_LINE1: '',
+          TLE_LINE2: '',
+      },
+      redVisible: false,
+      blueVisible: false,
+      satelliteVisible: false,
       missileVisible:false,
       situation: [],
       xdName: '',
       nameIdList: [],
       satelliteRange: [],
       missileList: {},
+      redList: [],
+      blueList: [],
+      satelliteList: [],
       thaadList: {},
       finish: false,
       websocket: null,
@@ -222,6 +369,18 @@ export default {
       _viewer2D: null,
       _viewer3D: null,
       mousevalue: null,
+      models:{
+        radar2: null,
+        satellite2: null,
+        center2: null,
+        missile2: null,
+        
+        radar3: null,
+        satellite3: null,
+        center3: null,
+        missile3: null,
+
+      },
       // 选中的点
       selectedMarker: null,
       currentItem: ['1', '2', '3', '4'],
@@ -271,6 +430,24 @@ export default {
         }
       },
     },
+    mode: {
+      handler: function (val, oldVal) {
+
+        this.$data._viewer2D.destroy();
+        this.$data._viewer3D.destroy();
+        this.cesiumInit();
+      },
+    },
+    xdName: {
+      handler: function (val, oldVal) {
+        this.$notify({
+              title: "提示",
+              message: "已选择想定文件："+val,
+              type: 'info'
+            });
+      },
+    },
+
   },
   activated() {
     this.getData();
@@ -278,10 +455,39 @@ export default {
   },
   mounted() {
     this.cesiumInit();
+    // this.modelsInit();
     // this.pointMove();
     // this.startWebSocket();
   },
   methods: {
+    modelsInit(modelUrl,model){
+        if(modelUrl == radarModel2){
+        this.models.radar2 = model
+        }
+        else if(modelUrl == missileModel2){
+          this.models.missile2 = model
+        }
+        else if(modelUrl == centerModel2){
+        this.models.center2 = model
+        }
+        else if(modelUrl == satelliteModel2){
+        this.models.satellite2 = model
+        }
+
+        else if(modelUrl == radarModel3){
+        this.models.radar3 = model
+        }
+        else if(modelUrl == missileModel3){
+          this.models.missile3 = model
+        }
+        else if(modelUrl == centerModel3){
+        this.models.center3 = model
+        }
+        else if(modelUrl == satelliteModel3){
+        this.models.satellite3 = model
+        }
+      
+    },
     getImagePath(index) {
       if (index == 1) {
         return require(`@/assets/image/噪声调幅干扰效果.png`);
@@ -359,7 +565,9 @@ export default {
             satellite: satellite,
             center: center
           }
-          this.setTimeLine(response.data.starttime, response.data.endtime, response.data.steptime)//传入时间到时间轴
+          if(this.mode){
+            this.setTimeLine(response.data.starttime, response.data.endtime, response.data.steptime)//传入时间到时间轴
+          }
         })
         .catch((error) => {
           // 处理错误
@@ -459,11 +667,11 @@ export default {
     cesiumInit() {
       this.$data._viewer2D = new this.Cesium.Viewer("2DcesiumContainer", {
         sceneMode: this.Cesium.SceneMode.SCENE2D,
-        animation: true, // 是否显示时间轴动画
+        animation: this.mode, // 是否显示时间轴动画
         baseLayerPicker: false,
         homeButton: false,
         geocoder: false,
-        timeline: true, //是否显示时间线控件
+        timeline: this.mode, //是否显示时间线控件
         fullscreenButton: false,
         sceneModePicker: false,
         navigationHelpButton: false,
@@ -479,11 +687,11 @@ export default {
       });
 
       this.$data._viewer3D = new this.Cesium.Viewer("3DcesiumContainer", {
-        animation: true, // 是否显示时间轴动画
+        animation: this.mode, // 是否显示时间轴动画
         baseLayerPicker: false,
         homeButton: false,
         geocoder: false,
-        timeline: true, //是否显示时间线控件
+        timeline: this.mode, //是否显示时间线控件
         fullscreenButton: false,
         sceneModePicker: false,
         navigationHelpButton: false,
@@ -546,7 +754,7 @@ export default {
       this.handler2D = new this.Cesium.ScreenSpaceEventHandler(this.$data._viewer2D.scene.canvas);
       this.handler3D = new this.Cesium.ScreenSpaceEventHandler(this.$data._viewer3D.scene.canvas);
       //设置导航组件
-      new CesiumNavigation(this.$data._viewer2D, this.mapNavOptions);
+      // new CesiumNavigation(this.$data._viewer2D, this.mapNavOptions);
       new CesiumNavigation(this.$data._viewer3D, this.mapNavOptions);
     },
     sync() {
@@ -603,8 +811,7 @@ export default {
       this.mousevalue = value;
     },
     dimensionswitch(value) {
-      this.dimension = value;
-      this.selectModel();
+      this.$store.commit("app/setDimension",value);
     },
     // 全屏缩小
     ismax() {
@@ -679,8 +886,14 @@ export default {
     },
     //显示鼠标经纬度
     getMouseLocation(event) {
-      let { longitude, latitude } = this.getCoordinatesFromEvent(event);
-      this.$store.commit("app/setMouseLocation", { longitude, latitude });
+      try {
+        let { longitude, latitude } = this.getCoordinatesFromEvent(event);
+        this.$store.commit("app/setMouseLocation", { longitude, latitude });
+      } catch (error) {
+        // console.error(error);
+      }
+
+      
     },
     /*根据camera高度近似计算当前层级*/
     heightToZoom(height) {
@@ -717,12 +930,14 @@ export default {
       const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
       console.log('position :>> ', position);
       let color = ''
-      let modelUrl = ''
+      let currentModel = null
+      let modelUrl = null
       let size = 64
       if (type == 'red') {
         color = 'Red'
-        modelUrl = missileModel
-        size = 100
+        console.log(this.models.missile2!=null?this.Cesium.clone(this.models.missile2):null+"333333333333333333333333333333333333333333333333333")
+        currentModel = [this.models.missile2!=null?this.Cesium.clone(this.models.missile2):null,this.models.missile3!=null?this.Cesium.clone(this.models.missile3):null];
+        modelUrl = [missileModel2,missileModel3]
         for(let i = 0;i < this.jsonData.redunit.length;i++)
         {
           if(name === this.jsonData.redunit[i].name){
@@ -777,8 +992,10 @@ export default {
        
       }
       else if (type == 'blue') {
+        
         color = 'Blue'
-        modelUrl = radarModel
+        currentModel = [this.models.radar2!=null?this.Cesium.clone(this.models.radar2):null,this.models.radar3!=null?this.Cesium.clone(this.models.radar3):null];
+        modelUrl = [radarModel2,radarModel3]
         let fire_number = 0
         for(let i = 0;i<this.jsonData.blueunit.length;i++){
           if(name === this.jsonData.blueunit[i].name){
@@ -796,17 +1013,21 @@ export default {
       }
       else if (type == 'center') {
         color = 'Blue'
-        modelUrl = centerModel
+        currentModel = [this.models.center2!=null?this.Cesium.clone(this.models.center2):null,this.models.center3!=null?this.Cesium.clone(this.models.center3):null];
+        modelUrl = [centerModel2,centerModel3]
         this.centerPosition = position
       }
       else if (type == 'satelite') {
         color = 'Blue'
-        modelUrl = satelliteModel
+        currentModel = [this.model.satellite2!=null?this.Cesium.clone(this.models.satellite2):null,this.model.satellite3!=null?this.Cesium.clone(this.models.satellite3):null];
+        modelUrl = [satelliteModel2,satelliteModel3]
       }
+
+
       if (type == 'blue') {
         console.log(' radar!!!');
         const range = 700000;
-        this.$data._viewer2D.entities.add({
+        let entity2 = this.$data._viewer2D.entities.add({
           id: this.id,
           position: position,
           ellipsoid: {
@@ -819,10 +1040,10 @@ export default {
             pixelSize: 12, // 调整点的大小，可以增大点的像素大小
             color: this.Cesium.Color.fromCssColorString(color)
           },
-          model: {
-            uri: modelUrl, // 替换为你的3D模型文件路径
-            scale: 1.0, // 调整3D模型的缩放大小
-            minimumPixelSize: size // 设置3D模型的最小像素大小，确保在视图中可见
+          model: currentModel[0]!=null?currentModel[0]:{
+          uri: modelUrl[0], // 替换为你的3D模型文件路径
+          scale: 1.0, // 调整3D模型的缩放大小
+          minimumPixelSize: size // 设置3D模型的最小像素大小，确保在视图中可见
           },
           label: {
             text: type + ' ' + name,
@@ -831,7 +1052,7 @@ export default {
             pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
           }
         });
-        this.$data._viewer3D.entities.add({
+        let entity3 = this.$data._viewer3D.entities.add({
           id: this.id,
           position: position,
           ellipsoid: {
@@ -844,10 +1065,10 @@ export default {
             pixelSize: 12, // 调整点的大小，可以增大点的像素大小
             color: this.Cesium.Color.fromCssColorString(color)
           },
-          model: {
-            uri: modelUrl, // 替换为你的3D模型文件路径
-            scale: 1.0, // 调整3D模型的缩放大小
-            minimumPixelSize: size // 设置3D模型的最小像素大小，确保在视图中可见
+          model: currentModel[1]!=null?currentModel[1]:{
+          uri: modelUrl[1], // 替换为你的3D模型文件路径
+          scale: 1.0, // 调整3D模型的缩放大小
+          minimumPixelSize: size // 设置3D模型的最小像素大小，确保在视图中可见
           },
           label: {
             text: type + ' ' + name,
@@ -856,6 +1077,12 @@ export default {
             pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
           }
         });
+        if(currentModel[0] == null){
+          this.modelsInit(modelUrl[0],entity2.model)
+        }
+        if(currentModel[1] == null){
+          this.modelsInit(modelUrl[1],entity3.model)
+        }
         this.nameIdList.push({
           id: this.id,
           name: name
@@ -864,17 +1091,17 @@ export default {
 
       }
       else {
-        this.$data._viewer2D.entities.add({
+        let entity2 = this.$data._viewer2D.entities.add({
           id: this.id,
           position: position,
           point: {
             pixelSize: 12, // 调整点的大小，可以增大点的像素大小
             color: this.Cesium.Color.fromCssColorString(color)
           },
-          model: {
-            uri: modelUrl, // 替换为你的3D模型文件路径
-            scale: 1.0, // 调整3D模型的缩放大小
-            minimumPixelSize: size // 设置3D模型的最小像素大小，确保在视图中可见
+          model: currentModel[0]!=null?currentModel[0]:{
+          uri: modelUrl[0], // 替换为你的3D模型文件路径
+          scale: 1.0, // 调整3D模型的缩放大小
+          minimumPixelSize: size // 设置3D模型的最小像素大小，确保在视图中可见
           },
           label: {
             text: type + ' ' + name,
@@ -883,17 +1110,17 @@ export default {
             pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
           }
         });
-        this.$data._viewer3D.entities.add({
+        let entity3 = this.$data._viewer3D.entities.add({
           id: this.id,
           position: position,
           point: {
             pixelSize: 12, // 调整点的大小，可以增大点的像素大小
             color: this.Cesium.Color.fromCssColorString(color)
           },
-          model: {
-            uri: modelUrl, // 替换为你的3D模型文件路径
-            scale: 1.0, // 调整3D模型的缩放大小
-            minimumPixelSize: size // 设置3D模型的最小像素大小，确保在视图中可见
+          model: currentModel[1]!=null?currentModel[1]:{
+          uri: modelUrl[1], // 替换为你的3D模型文件路径
+          scale: 1.0, // 调整3D模型的缩放大小
+          minimumPixelSize: size // 设置3D模型的最小像素大小，确保在视图中可见
           },
           label: {
             text: type + ' ' + name,
@@ -902,6 +1129,13 @@ export default {
             pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
           }
         });
+        if(currentModel[0] == null){
+          this.modelsInit(modelUrl[0],entity2.model)
+        }
+        if(currentModel[1] == null){
+          this.modelsInit(modelUrl[1],entity3.model)
+        }
+
         this.nameIdList.push({
           id: this.id,
           name: name
@@ -1002,17 +1236,17 @@ export default {
         time: startTime,
         context: "开始模拟！！！"
       })
-      // this.$data._viewer2D.clock.onTick.addEventListener(clock => {
-      //   const currentTime = clock.currentTime; // 获取当前时间轴的时间
-      //   const elapsedTime = this.Cesium.JulianDate.secondsDifference(
-      //     currentTime,
-      //     this.$data._viewer2D.clock.startTime
-      //   ); // 获取从起始时间到当前时间的秒数
-      //   if (parseInt(elapsedTime) % stepTime === 0 && parseInt(elapsedTime) !== 0 && this.$data._viewer2D.clock.shouldAnimate) {
-      //     // 当从起始时间到当前时间的秒数是 stepTime 的倍数时，发送请求
-      //     this.requestDataAndUpdateModel2D(startTime, elapsedTime);
-      //   }
-      // });
+      this.$data._viewer2D.clock.onTick.addEventListener(clock => {
+        const currentTime = clock.currentTime; // 获取当前时间轴的时间
+        const elapsedTime = this.Cesium.JulianDate.secondsDifference(
+          currentTime,
+          this.$data._viewer2D.clock.startTime
+        ); // 获取从起始时间到当前时间的秒数
+        if (parseInt(elapsedTime) % stepTime === 0 && parseInt(elapsedTime) !== 0 && this.$data._viewer2D.clock.shouldAnimate) {
+          // 当从起始时间到当前时间的秒数是 stepTime 的倍数时，发送请求
+          this.requestDataAndUpdateModel2D(startTime, elapsedTime);
+        }
+      });
       this.$data._viewer3D.clock.onTick.addEventListener(clock => {
         const currentTime = clock.currentTime; // 获取当前时间轴的时间
         const elapsedTime = this.Cesium.JulianDate.secondsDifference(
@@ -1024,7 +1258,9 @@ export default {
           this.requestDataAndUpdateModel3D(startTime, elapsedTime);
         }
       });
+      if(this.mode){  //如果模式切换为态势显控，则初始化STK
       this.initSTK()
+      }
     },
     // 初始化stk方法，生成轨迹文件
     async initSTK() {
@@ -1077,7 +1313,7 @@ export default {
                 //   outlineColor: this.Cesium.Color.BLUE,
                 // },
                 model: {
-                  uri: satelliteModel, // 替换为你的3D模型文件路径
+                  uri: satelliteModel2, // 替换为你的3D模型文件路径
                   scale: 1.0, // 调整3D模型的缩放大小
                   minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
                 },
@@ -1116,7 +1352,7 @@ export default {
                 //   outlineColor: this.Cesium.Color.BLUE,
                 // },
                 model: {
-                  uri: satelliteModel, // 替换为你的3D模型文件路径
+                  uri: satelliteModel3, // 替换为你的3D模型文件路径
                   scale: 1.0, // 调整3D模型的缩放大小
                   minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
                 },
@@ -1464,14 +1700,224 @@ export default {
       return false
     },
     exportReport() {
-     
+          
+
+    },
+    addBlue(){
+      if(!this.save){
+        this.$message("请先导入想定文件！")
+        return
+      }
+      this.blueForm = {
+          name: '',
+          lat: '',
+          lon: '',
+          h: '',
+        }
+        this.blueVisible = true
+    },
+    addRed(){
+      if(!this.save){
+        this.$message("请先导入想定文件！")
+        return
+      }
+      this.redForm = {
+          name: '',
+          method: '',
+          lat: '',
+          lon: '',
+          h: '',
+          apogee_height:''
+        }
+        this.redVisible = true
+    },
+    addSatellite(){
+      if(!this.save){
+        this.$message("请先导入想定文件！")
+        return
+      }
+      this.satelliteForm = {
+          name: '',
+          TLE_LINE0:'',
+          TLE_LINE1:'',
+          TLE_LINE2:'',
+        }
+        this.satelliteVisible = true
+    },
+    saveNewRed(){
+      for(let i = 0;i<this.redList.length;i++)
+      {
+        if(this.redForm.name === this.redList[i].name)
+        {
+          this.$message("请勿输入已有单元名字")
+          return
+        }
+      }
+      if(parseFloat(this.redForm.lat)>180||parseFloat(this.redForm.lat)<-180)
+      {
+        this.$message("请输入正确范围的经度")
+        return
+      }
+      if(parseFloat(this.redForm.lon)>90||parseFloat(this.redForm.lon)<-90)
+      {
+        this.$message("请输入正确范围的纬度")
+        return
+      }
+      this.redList.push({
+        order: this.redList.length+1,
+        name: this.redForm.name,
+        method: this.redForm.method
+      })
+      this.markLocationbyJson(parseFloat(this.redForm.lat), parseFloat(this.redForm.lon), parseFloat(this.redForm.h), this.redForm.name, "red")
+        let point1 = {
+          longitude: parseFloat(this.redForm.lon),
+          latitude: parseFloat(this.redForm.lat),
+          height: parseFloat(this.redForm.h)
+        }
+        let item = this.jsonData.center[0]
+        console.log('item :>> ', item);
+        let point2 = {
+          longitude: parseFloat(item[item.name].properties.lon),
+          latitude: parseFloat(item[item.name].properties.lat),
+          height: parseFloat(item[item.name].properties.h)
+        }
+        this.markLine(point1, point2, "red")
+        this.jsonData.redunit.push({
+            name: this.redForm.name,
+            type: "弹道导弹",
+            belong: "红方",
+            health: 100,
+            target: "thaad1",
+            team: "1",
+            component_movementid: 12398127321,
+            component_movementjson: {
+                id: 12398127321,
+                type: "DF-WD-001",
+                properties: {
+                    launch_lon: this.redForm.lon,
+                    launch_lat: this.redForm.lat,
+                    launch_h: this.redForm.h,
+                    target_lon: item[item.name].properties.lon,
+                    target_lat: item[item.name].properties.lat,
+                    target_h: item[item.name].properties.h,
+                    apogee_height: this.redForm.apogee_height,
+                    fly_time: 900,
+                    filepath: "test.csv",
+                    sample_time: 1
+                }
+            },
+            components_cnt: 1,
+            components_ids: "20",
+            components_json: {
+                干扰器1: {
+                    id: 20,
+                    number: "G1",
+                    type: "GR-NBLD-001",
+                    N: 1,
+                    ts: 10000000,
+                    tr: 0.0004,
+                    tau: 0.0001,
+                    f0: 1000000,
+                    method: this.redForm.method,
+                    url: "ws://localhost:1240"
+                }
+            },
+            unit_json: null
+        })
+      this.redVisible = false
 
-    }
+    },
+    saveNewSatellite(){
+      for(let i=0;i<this.satelliteList.length;i++){
+        if(this.satelliteList[i].name === this.satelliteForm.name){
+          this.$message("请勿输入已有卫星名字")
+          return
+        }
+      }
+      this.satelliteList.push({
+        order: this.satelliteList.length+1,
+        name: this.satelliteForm.name
+      })
+      let item = {
+        name:this.satelliteForm.name
+      }
+      item[this.satelliteForm.name]={
+        type:"WX-YJ-001",
+        properties:{
+          TLE_LINE0:this.satelliteForm.TLE_LINE0,
+          TLE_LINE1:this.satelliteForm.TLE_LINE1,
+          TLE_LINE2:this.satelliteForm.TLE_LINE2,
+        }
+      }
+      this.jsonData.satellite.push(item)
+      this.satelliteVisible = false
+    },
+    saveNewBlue(){
+      for(let i = 0;i<this.blueList.length;i++)
+      {
+        if(this.blueForm.name === this.blueList[i].name)
+        {
+          this.$message("请勿输入已有单元名字")
+          return
+        }
+      }
+      if(parseFloat(this.blueForm.lat)>180||parseFloat(this.blueForm.lat)<-180)
+      {
+        this.$message("请输入正确范围的经度")
+        return
+      }
+      if(parseFloat(this.blueForm.lon)>90||parseFloat(this.blueForm.lon)<-90)
+      {
+        this.$message("请输入正确范围的纬度")
+        return
+      }
+      this.blueList.push({
+        order: this.blueList.length+1,
+        name: this.blueForm.name,
+      })
+      this.markLocationbyJson(parseFloat(this.blueForm.lat), parseFloat(this.blueForm.lon), parseFloat(this.blueForm.h), this.blueForm.name, "blue")
+       
+        this.jsonData.blueunit.push({
+            name: this.blueForm.name,
+            type: "末端拦截",
+            belong: "蓝方",
+            health: 100,
+            team: "2",
+            task: "对威胁进行探测与拦截",
+            pos: {
+                lat: this.blueForm.lat,
+                lon:this.blueForm.lon,
+                height: this.blueForm.h,
+                h: this.blueForm.h
+            },
+        })
+      this.blueVisible = false
+
+    },
 
   }
 };
 </script>
 <style scoped>
+
+.DimensionButtons {
+        color: #fff;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        /*由于flex-direction: column，因此align-items代表的是水平方向*/
+        justify-content: center;
+        /*由于flex-direction: column，因此justify-content代表的是垂直方向*/
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 999;
+  }
+
+.DimensionButtons .el-button {
+          padding: auto 20px;
+          margin: auto 20px;
+  }
 ::v-deep .cesium-infoBox {
   display: none !important;
 }
@@ -1537,6 +1983,7 @@ export default {
 }
 
 .menu {
+  border-radius: 20px;
   position: absolute;
   height: 400px;
   z-index: 999;
@@ -1646,6 +2093,7 @@ export default {
   align-items: center;
 }
 
+
 .image-item {
   width: 100%;
   height: 90%;

src/views/situation/index.vue → src/views/si/index.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="container">
+    <div class="DimensionButtons"> 
+        <el-button :type="dimension == 2 ? 'success' : 'danger'" @click="dimensionswitch(2)" round size="mini">二维</el-button>
+        <el-button :type="dimension == 5 ? 'success' : 'danger'" @click="dimensionswitch(5)" round size="mini">一体化</el-button>
+        <el-button :type="dimension == 3 ? 'success' : 'danger'" @click="dimensionswitch(3)" round size="mini">三维</el-button>
+    </div>
     <el-row id="earth" style="height: 100%; width: 100%; display: flex; position: relative">
       <el-col style="height: 100%; position: relative" :span="this.leftwidth">
         <div class="main-layout" v-on:mouseover="changeActive('2D')" @mousemove="getMouseLocation">
@@ -177,12 +182,11 @@ import screenfull from "screenfull";
 import fireController from "@/api/fireController.js";
 import { getToken } from "@/utils";
 import axios from "axios";
-import Model from "@/views/situation/Model.vue";
-import satelliteModel from 'public/static/model/satelite.glb';
-import missileModel from 'public/static/model/basic_missle.glb';
-import thaadModel from 'public/static/model/anti-aircraft_gun_fire_control_radar_vehicle.glb';
-import centerModel from 'public/static/model/the_white_house.glb';
-import radarModel from 'public/static/model/radar.glb'
+import Model from "./Model.vue";
+import satelliteModel from 'public/static/model/situation/satelite2.glb';
+import missileModel from 'public/static/model/situation/basic_missle2.glb';
+import centerModel from 'public/static/model/situation/whitehouse2.glb';
+import radarModel from 'public/static/model/situation/radar2.glb'
 import { mapGetters } from "vuex";
 import CesiumNavigation from 'cesium-navigation-es6/viewerCesiumNavigationMixin'
 export default {
@@ -937,7 +941,7 @@ export default {
       this.mousevalue = value;
     },
     dimensionswitch(value) {
-      this.dimension = value;
+      this.$store.commit("app/setDimension",value);
       this.selectModel();
     },
     // 全屏缩小
@@ -1121,20 +1125,20 @@ export default {
           id: this.id,
           position: position,
           ellipsoid: {
-    radii: new this.Cesium.Cartesian3(range, range, range),
-    material: this.Cesium.Color.GREEN.withAlpha(0.5), // 设置球体的颜色和透明度
-    outline: true,
-    outlineColor: this.Cesium.Color.GREEN,
-  },
+            radii: new this.Cesium.Cartesian3(range, range, range),
+            material: this.Cesium.Color.GREEN.withAlpha(0.5), // 设置球体的颜色和透明度
+            outline: true,
+            outlineColor: this.Cesium.Color.GREEN,
+          },
           point: {
             pixelSize: 12, // 调整点的大小，可以增大点的像素大小
             color: this.Cesium.Color.fromCssColorString(color)
           },
-          model: {
-            uri: modelUrl, // 替换为你的3D模型文件路径
-            scale: 1.0, // 调整3D模型的缩放大小
-            minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
-          },
+          // model: {
+          //   uri: modelUrl, // 替换为你的3D模型文件路径
+          //   scale: 1.0, // 调整3D模型的缩放大小
+          //   minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
+          // },
           label: {
             text: type + ' ' + name,
             show: true,
@@ -1145,20 +1149,20 @@ export default {
         this.$data._viewer3D.entities.add({
           id: this.id,
           position: position,
-  //         cylinder: {
-  //   length: range * 2,
-  //   topRadius: 0,
-  //   bottomRadius: range,
-  //   material: this.Cesium.Color.RED.withAlpha(0.5), // 设置锥体的颜色和透明度
-  //   outline: true,
-  //   outlineColor: this.Cesium.Color.RED,
-  // },
-  ellipsoid: {
-    radii: new this.Cesium.Cartesian3(range, range, range),
-    material: this.Cesium.Color.GREEN.withAlpha(0.5), // 设置球体的颜色和透明度
-    outline: true,
-    outlineColor: this.Cesium.Color.GREEN,
-  },
+          //         cylinder: {
+          //   length: range * 2,
+          //   topRadius: 0,
+          //   bottomRadius: range,
+          //   material: this.Cesium.Color.RED.withAlpha(0.5), // 设置锥体的颜色和透明度
+          //   outline: true,
+          //   outlineColor: this.Cesium.Color.RED,
+          // },
+          ellipsoid: {
+            radii: new this.Cesium.Cartesian3(range, range, range),
+            material: this.Cesium.Color.GREEN.withAlpha(0.5), // 设置球体的颜色和透明度
+            outline: true,
+            outlineColor: this.Cesium.Color.GREEN,
+          },
           point: {
             pixelSize: 12, // 调整点的大小，可以增大点的像素大小
             color: this.Cesium.Color.fromCssColorString(color)
@@ -1189,11 +1193,11 @@ export default {
             pixelSize: 12, // 调整点的大小，可以增大点的像素大小
             color: this.Cesium.Color.fromCssColorString(color)
           },
-          model: {
-            uri: modelUrl, // 替换为你的3D模型文件路径
-            scale: 1.0, // 调整3D模型的缩放大小
-            minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
-          },
+          // model: {
+          //   uri: modelUrl, // 替换为你的3D模型文件路径
+          //   scale: 1.0, // 调整3D模型的缩放大小
+          //   minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
+          // },
           label: {
             text: type + ' ' + name,
             show: true,
@@ -1469,6 +1473,24 @@ this.$data._viewer3D.entities.values.forEach(entity => {
 };
 </script>
 <style scoped>
+.DimensionButtons {
+        color: #fff;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        /*由于flex-direction: column，因此align-items代表的是水平方向*/
+        justify-content: center;
+        /*由于flex-direction: column，因此justify-content代表的是垂直方向*/
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 999;
+  }
+
+.DimensionButtons .el-button {
+          padding: 5px 20px;
+          margin: auto 30px;
+}
 ::v-deep .cesium-infoBox {
   display: none !important;
 }