wuxiang 1 year ago
parent
commit
e5cfc07487

+ 93 - 88
package-lock.json

@@ -2080,44 +2080,6 @@
                     "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
                     "dev": true
                 },
-                "ansi-styles": {
-                    "version": "4.3.0",
-                    "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
-                    "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "color-convert": "^2.0.1"
-                    }
-                },
-                "chalk": {
-                    "version": "4.1.2",
-                    "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
-                    "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "ansi-styles": "^4.1.0",
-                        "supports-color": "^7.1.0"
-                    }
-                },
-                "color-convert": {
-                    "version": "2.0.1",
-                    "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
-                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "color-name": "~1.1.4"
-                    }
-                },
-                "color-name": {
-                    "version": "1.1.4",
-                    "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-                    "dev": true,
-                    "optional": true
-                },
                 "copy-webpack-plugin": {
                     "version": "5.1.2",
                     "resolved": "https://registry.npmmirror.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz",
@@ -2190,20 +2152,6 @@
                         }
                     }
                 },
-                "has-flag": {
-                    "version": "4.0.0",
-                    "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
-                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-                    "dev": true,
-                    "optional": true
-                },
-                "json5": {
-                    "version": "2.2.3",
-                    "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
-                    "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-                    "dev": true,
-                    "optional": true
-                },
                 "pify": {
                     "version": "3.0.0",
                     "resolved": "https://registry.npmmirror.com/pify/-/pify-3.0.0.tgz",
@@ -2227,42 +2175,6 @@
                     "requires": {
                         "minipass": "^3.1.1"
                     }
-                },
-                "supports-color": {
-                    "version": "7.2.0",
-                    "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
-                    "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "has-flag": "^4.0.0"
-                    }
-                },
-                "vue-loader-v16": {
-                    "version": "npm:vue-loader@16.8.3",
-                    "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
-                    "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-                    "dev": true,
-                    "optional": true,
-                    "requires": {
-                        "chalk": "^4.1.0",
-                        "hash-sum": "^2.0.0",
-                        "loader-utils": "^2.0.0"
-                    },
-                    "dependencies": {
-                        "loader-utils": {
-                            "version": "2.0.4",
-                            "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
-                            "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-                            "dev": true,
-                            "optional": true,
-                            "requires": {
-                                "big.js": "^5.2.2",
-                                "emojis-list": "^3.0.0",
-                                "json5": "^2.1.2"
-                            }
-                        }
-                    }
                 }
             }
         },
@@ -13136,6 +13048,11 @@
             "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
             "dev": true
         },
+        "vue-jstree": {
+            "version": "2.1.6",
+            "resolved": "https://registry.npmmirror.com/vue-jstree/-/vue-jstree-2.1.6.tgz",
+            "integrity": "sha512-vtUmhLbfE2JvcnYNRXauJPkNJSRO/f9BTsbxV+ESXP/mMQPVUIYI4EkSHKSEOxVDHTU7SfLp/AxplmaAl6ctcg=="
+        },
         "vue-loader": {
             "version": "15.10.1",
             "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
@@ -13157,6 +13074,94 @@
                 }
             }
         },
+        "vue-loader-v16": {
+            "version": "npm:vue-loader@16.8.3",
+            "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
+            "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+            "dev": true,
+            "optional": true,
+            "requires": {
+                "chalk": "^4.1.0",
+                "hash-sum": "^2.0.0",
+                "loader-utils": "^2.0.0"
+            },
+            "dependencies": {
+                "ansi-styles": {
+                    "version": "4.3.0",
+                    "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+                    "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "color-convert": "^2.0.1"
+                    }
+                },
+                "chalk": {
+                    "version": "4.1.2",
+                    "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+                    "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "ansi-styles": "^4.1.0",
+                        "supports-color": "^7.1.0"
+                    }
+                },
+                "color-convert": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+                    "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "color-name": "~1.1.4"
+                    }
+                },
+                "color-name": {
+                    "version": "1.1.4",
+                    "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+                    "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+                    "dev": true,
+                    "optional": true
+                },
+                "has-flag": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+                    "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+                    "dev": true,
+                    "optional": true
+                },
+                "json5": {
+                    "version": "2.2.3",
+                    "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+                    "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+                    "dev": true,
+                    "optional": true
+                },
+                "loader-utils": {
+                    "version": "2.0.4",
+                    "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
+                    "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "big.js": "^5.2.2",
+                        "emojis-list": "^3.0.0",
+                        "json5": "^2.1.2"
+                    }
+                },
+                "supports-color": {
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+                    "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "has-flag": "^4.0.0"
+                    }
+                }
+            }
+        },
         "vue-router": {
             "version": "3.6.5",
             "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",

+ 1 - 0
package.json

@@ -25,6 +25,7 @@
         "less-loader": "^7.3.0",
         "screenfull": "^5.1.0",
         "vue": "^2.6.11",
+        "vue-jstree": "^2.1.6",
         "vue-router": "^3.5.2",
         "vuex": "^3.1.0"
     },

BIN
src/assets/image/demmap.jpg


BIN
src/assets/image/electron.jpg


BIN
src/assets/image/normalmap.jpg


+ 1 - 1
src/layout/Footer/index.vue

@@ -4,7 +4,7 @@
         style="display: block;margin-top: 5px;margin-left: 10px;"
         v-model="modeType"
         active-color="#3f96a5"
-        inactive-color="#000000"
+        inactive-color="#3f96a5"
         active-text="态势显示"
         inactive-text="场景模拟"
         @change="modelTypeChange()">

+ 0 - 1
src/layout/Main/index.vue

@@ -44,7 +44,6 @@ export default {
     padding: 0px !important;
     overflow: hidden;
     display: flex;
-    color: white !important;
     height: calc(100vh - 130px);
 }
 .main-container{

+ 2 - 0
src/main.js

@@ -9,6 +9,7 @@ import 'echarts/map/js/china'
 import SvgIcon from '@/components/svgIcon/index.vue' // svg component
 import '@/assets/svg' // 导入图标资源
 import '@/core/http';
+import VJstree from 'vue-jstree'
 // 将自动注册所有组件为全局组件
 import dataV from '@jiaminghi/data-view'
 Vue.use(dataV)
@@ -16,6 +17,7 @@ Vue.prototype.$echarts = echarts
 Vue.use(ElementUI);
 Vue.prototype.$store = store
 Vue.component('svg-icon', SvgIcon)
+Vue.component('v-jstree', VJstree)
 Vue.config.productionTip = false
 new Vue({
     router,

+ 344 - 83
src/views/map/index.vue

@@ -16,23 +16,53 @@
           <div id="3DcesiumContainer" class="map"></div>
         </div>
       </el-col>
-      <el-tabs type="border-card" v-model="activeName" tab-position="left" class="menu" :stretch="true"
+      <el-tabs type="border-card" v-model="panelName" tab-position="left" class="menu" :stretch="true"
         @tab-click="legendClick">
         <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>
+            <span><i class="el-icon-document"></i></span>
           </el-tooltip>
           <el-table :data="situation">
             <el-table-column label="名称" prop="xdname" width="150px"></el-table-column>
             <el-table-column label="操作" align="center">
-              <template slot-scope="scope">
-                <el-button type="primary" @click="getJson(scope.row)">导入</el-button>
+              <template slot-scope="scope" >
+                <el-button type="primary" @click="getJson(scope.row)" size="mini">导入</el-button>
+                <el-button type="primary" @click="seeJson(scope.row)" size="mini">查看</el-button>
               </template>
             </el-table-column>
           </el-table>
         </el-tab-pane>
-        <el-tab-pane name="2" :disabled="this.mode==true">
+  
+        <el-tab-pane name="2">
+          <el-tooltip placement="right" effect="light" slot="label">
+            <span slot="content" class="item">图层</span>
+            <span><i class="el-icon-map-location"></i></span>
+          </el-tooltip>
+          <el-select v-model="maplayer.type" >
+            <el-option
+              v-for="item in mapOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+          <el-button type="primary" @click="setMapLayer()">确定</el-button>
+          <div class="image-container">
+            <div v-for="(image, index) in maplayerImages" :key="index" class="image-item">
+              <el-image
+                :src="image.url"
+                fit="cover"
+                style = "height:180px; width:180;"
+                :class="{ 'highlighted-red': maplayer.layer == image.layer }"
+                @click="maplayer.layer = image.layer"
+              ></el-image>
+              <div style="text-align: center;">{{ image.name }}</div>
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane name="3" v-if="this.mode==false">
           <el-button type="primary" @click="addRed()">新增</el-button>
           <el-tooltip placement="right" effect="light" slot="label">
             <span slot="content" class="item">红方兵力</span>
@@ -44,7 +74,7 @@
             <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-tab-pane name="4" v-if="this.mode==false">
           <el-button type="primary" @click="addBlue()">新增</el-button>
           <el-tooltip placement="right" effect="light" slot="label">
             <span slot="content" class="item">蓝方兵力</span>
@@ -55,7 +85,7 @@
             <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-tab-pane name="5" v-if="this.mode==false">
           <el-button type="primary" @click="addSatellite()">新增</el-button>
           <el-tooltip placement="right" effect="light" slot="label">
             <span slot="content" class="item">蓝方卫星</span>
@@ -66,7 +96,8 @@
             <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-tab-pane name="6" v-if="this.mode==true">
           <el-tooltip placement="right" effect="light" slot="label">
             <span slot="content" class="item">消息</span>
             <span><i class="el-icon-chat-line-round"></i></span>
@@ -77,7 +108,7 @@
             <el-table-column label="消息" align="center" prop="context"></el-table-column>
           </el-table>
         </el-tab-pane>
-        <el-tab-pane name="6" :disabled="this.mode==false">
+        <el-tab-pane name="7" v-if="this.mode==true">
           <el-tooltip placement="right" effect="light" slot="label">
             <span slot="content" class="item">红方兵力</span>
             <span><i class="el-icon-s-flag"></i></span>
@@ -102,16 +133,17 @@
           </el-table>
         </el-tab-pane>
       </el-tabs>
-      <div class="buttons">
+      <div class="topbuttons">
         <el-button icon="el-icon-full-screen" circle @click="ismax()"></el-button>
         <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-button icon="el-icon-download" circle @click="saveJson()" :disabled="this.mode==true"></el-button>
+        <el-button icon="el-icon-close" circle @click="removeEntitys();"></el-button>
+      </div>
+      <div class="bottombuttons">
+        <el-button icon="el-icon-download" circle @click="saveJson()" v-if="this.mode!=true"></el-button>
       </div>
     </el-row>
-    <!-- <TimeLine :showLayers="showLayers" :timeDataArray="timeDataArray" class="TimeLine"></TimeLine> -->
-    <div>
       <el-dialog title="结果" :visible.sync="dialogVisible" width="50%">
         <el-tabs v-model="activeNametwo">
     <el-tab-pane label="消息列表" name="first">
@@ -152,14 +184,11 @@
     </div>
     </el-tab-pane>
         </el-tabs>
-
         <div slot="footer" class="dialog-footer">
           <el-button @click="exportReport()">导出报告</el-button>
           <el-button @click="dialogVisible = false">关闭</el-button>
         </div>
       </el-dialog>
-    </div>
-    <div>
       <el-dialog title="红方作战单元详细信息" :visible.sync="missileVisible" width="50%">
 
       <el-row>
@@ -197,9 +226,6 @@
           <el-button @click="missileVisible = false">关闭</el-button>
         </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="单元名称">
@@ -231,8 +257,6 @@
           <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="单元名称">
@@ -254,8 +278,19 @@
           <el-button @click="blueVisible = false">关闭</el-button>
         </div>
       </el-dialog>
-    </div>
-    <div>
+      <el-dialog title="想定文件信息" :visible.sync ="JsonVisible" width="50%">
+        <div style="display:flex;">
+          <div style="width:50%;">
+            <div>名称:{{ tree.info.xdname }}</div>
+            <div>类型:{{ tree.info.type }}</div>
+            <div>开始时间:{{ tree.info.starttime }}</div>
+            <div>结束时间:{{ tree.info.endtime }}</div>
+            <div>创建时间:{{ tree.info.createtime }}</div>
+          </div>
+            <v-jstree :data="tree.data">
+            </v-jstree>
+        </div>
+      </el-dialog>
       <el-dialog title="新增蓝方预卫星" :visible ="satelliteVisible" width="50%">
         <el-form ref="form" :model="satelliteForm" label-width="80px">
   <el-form-item label="卫星名称">
@@ -277,7 +312,7 @@
           <el-button @click="satelliteVisible = false">关闭</el-button>
         </div>
       </el-dialog>
-    </div>
+
   </div>
 </template>
 <script>
@@ -343,10 +378,14 @@ export default {
           TLE_LINE1: '',
           TLE_LINE2: '',
       },
+      panelName: "1",
+      //弹窗
       redVisible: false,
       blueVisible: false,
       satelliteVisible: false,
       missileVisible:false,
+      JsonVisible:false,
+
       situation: [],
       xdName: '',
       nameIdList: [],
@@ -381,8 +420,33 @@ export default {
         satellite3: null,
         center3: null,
         missile3: null,
-
       },
+      maplayer:{
+        type: 5,
+        layer: 'normal'
+      },
+      mapOptions: [{
+          value: 2,
+          label: '二维地图'
+        }, {
+          value: 3,
+          label: '三维地图'
+        }, {
+          value: 5,
+          label: '全部地图'
+      }],
+      maplayerImages: [
+        {
+          url: require(`@/assets/image/normalmap.jpg`),
+          name: "卫星地图",
+          layer:'normal'
+        },
+        {
+          url: require(`@/assets/image/electron.jpg`),
+          name: "电子地图",
+          layer:'electron'
+        }
+      ],
       // 选中的点
       selectedMarker: null,
       currentItem: ['1', '2', '3', '4'],
@@ -405,6 +469,15 @@ export default {
       showLayers: null,
       timeDataArray: ['Time 1', 'Time 2', 'Time 3', 'Time 4'],
       jsonData: null,
+      tree: {
+        info: {
+          xdname: null,
+          type: null,
+          starttime: null,
+          endtime: null
+        },   //信息
+        data: []     //数据
+      },
       mapNavOptions: {
         // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和Cesium.Rectangle.     
         defaultResetView: Cesium.Cartographic.fromDegrees(110, 30, 2000000),
@@ -456,9 +529,6 @@ export default {
   },
   mounted() {
     this.cesiumInit();
-    // this.modelsInit();
-    // this.pointMove();
-    // this.startWebSocket();
   },
   methods: {
     modelsInit(modelUrl,model){
@@ -488,6 +558,43 @@ export default {
         this.models.satellite3 = model
         }
       
+    },
+    setMapLayer(){
+      if(this.maplayer.type == 2){
+        if(this.maplayer.layer =='normal'){
+        this.$data._viewer2D.imageryLayers.get(0).show = true
+        this.$data._viewer2D.imageryLayers.get(1).show = false
+        }
+        else{
+        this.$data._viewer2D.imageryLayers.get(0).show = false
+        this.$data._viewer2D.imageryLayers.get(1).show = true
+        }
+      }else
+      if(this.maplayer.type == 3){
+        if(this.maplayer.layer =='normal'){
+        this.$data._viewer3D.imageryLayers.get(0).show = true
+        this.$data._viewer3D.imageryLayers.get(1).show = false
+        }
+        else{
+        this.$data._viewer3D.imageryLayers.get(0).show = false
+        this.$data._viewer3D.imageryLayers.get(1).show = true
+        }
+      }else{
+        console.log(this.maplayer.layer)
+        if(this.maplayer.layer =='normal'){
+        this.$data._viewer2D.imageryLayers.get(0).show = true
+        this.$data._viewer2D.imageryLayers.get(1).show = false
+        this.$data._viewer3D.imageryLayers.get(0).show = true
+        this.$data._viewer3D.imageryLayers.get(1).show = false
+        }
+        else{
+        this.$data._viewer2D.imageryLayers.get(0).show = false
+        this.$data._viewer2D.imageryLayers.get(1).show = true
+        this.$data._viewer3D.imageryLayers.get(0).show = false
+        this.$data._viewer3D.imageryLayers.get(1).show = true
+        }
+      }
+      
     },
     getImagePath(index) {
       if (index == 1) {
@@ -597,6 +704,132 @@ export default {
         this.markLine(point1, point2, "red")
       }
     },
+    async seeJson(row) {
+      //打开窗口
+      this.JsonVisible = true
+      let fileInfoStr = row.xdfile;
+      let fileInfoArr = JSON.parse(fileInfoStr);
+      this.$data._viewer2D.entities.removeAll();
+      this.$data._viewer3D.entities.removeAll();
+      await axios
+        .get("http://127.0.0.1:8084/admin/online/onlineOperation/downloadDatasource/main", {
+          params: {
+            datasourceId: "1656243335922192384",
+            fieldName: "xdfile",
+            asImage: false,
+            dataId: row.id,
+            filename: fileInfoArr[0].filename,
+            Authorization: getToken(),
+            MenuId: "1656244747347431424"
+          }
+        })
+        .then((response) => {
+          console.log('response.data :>> ', response.data);
+          this.setTree(response.data)   //设置树形组件数据
+        })
+        .catch((error) => {
+          // 处理错误
+          console.error(error);
+        });
+
+    },
+    setTree(data){
+       this.tree.info.xdname = data.xdname
+       this.tree.info.type = data.type
+       this.tree.info.createtime = data.createtime
+       this.tree.info.starttime = data.starttime
+       this.tree.info.endtime = data.endtime
+       this.tree.info.steptime = data.steptime
+       //第一层
+       if(data.redunit != null){
+          this.tree.data.push({
+              id: 0,
+              text: "红方方作战单元",
+              icon: "el-icon-s-flag",
+              opened: true,
+              children: []
+          })
+
+          for(let i = 0; i< data.redunit.length; i++){
+            this.tree.data[0].children.push({
+              id: 0+i,
+              text: data.redunit[i].type+"-"+data.redunit[i].name,
+              icon: "el-icon-aim",
+              opened: true,
+              children: []
+            })
+
+          //   for(let j = 0; j< data.redunit[i].components_json.length; j++){
+          //     this.tree.data[0].children[i].children[j].push({
+          //       id: 0+i+j,
+          //       text: data.redunit[i].type+"-"+data.redunit[i].name,
+          //       icon: "el-icon-aim",
+          //       opened: true,
+          //       children: []
+          //     })
+          //  }
+          }
+        }
+
+       if(data.blueunit != null){
+            this.tree.data.push({
+              id: 1,
+              text: "蓝方作战单元",
+              icon: "el-icon-s-flag",
+              opened: true,
+              children: []
+          })
+          for(let i = 0; i< data.blueunit.length; i++){
+              this.tree.data[1].children.push({
+                id: 1+i,
+                text: data.blueunit[i].type+"-"+data.blueunit[i].name,
+                icon: "el-icon-aim",
+                opened: true,
+                children: []
+              })
+            }
+        }
+
+        if(data.satellite != null){
+            this.tree.data.push({
+              id: 2,
+              text: "蓝方侦察卫星",
+              icon: "el-icon-map-location",
+              opened: true,
+              children: []
+          })
+          for(let i = 0; i< data.satellite.length; i++){
+              let properties = data.satellite[i][data.satellite[i].name];
+              this.tree.data[2].children.push({
+                id: 20,
+                text: properties.type+"-"+ data.satellite.name,
+                icon: "el-icon-aim",
+                opened: true,
+                children: []
+              })
+            }
+        }
+
+        if(data.center != null){
+            this.tree.data.push({
+              id: 3,
+              text: "蓝方指挥中心",
+              opened: true,
+              icon: "el-icon-ship",
+              children: []
+          })
+          for(let i = 0; i< data.center.length; i++){
+              let properties = data.center[i][data.center[i].name];
+              this.tree.data[3].children.push({
+                id: 30,
+                text: properties.type+"-" + data.center.name,
+                icon: "el-icon-aim",
+                opened: true,
+                children: []
+              })
+           }
+      }       
+    },
     showMissileInfo(row){
       console.log('row :>> ', row);
       this.selectMissile = row
@@ -666,7 +899,33 @@ export default {
       });
     },
     cesiumInit() {
+      //定义图层
+      let normalMapLayer = new Cesium.WebMapTileServiceImageryProvider({
+              url: "http://127.0.0.1:8080/geoserver/gwc/service/wmts/rest/map:map/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png",
+              layer: 'map:map',
+              style: 'raster',
+              format: 'image/png',
+              tileMatrixSetID: 'EPSG:4326', 
+              tilingScheme: new Cesium.GeographicTilingScheme(), // 切片方案,与TileMatrixSet中的切片组织相对应;调用EPSG4326坐标系时,切片方案必须为GeographicTilingScheme;
+              maximumLevel:10,
+              show: true
+
+      })
+
+      let demMapLayer = new Cesium.WebMapTileServiceImageryProvider({
+              url: "http://127.0.0.1:8080/geoserver/gwc/service/wmts/rest/electron:electron/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png",
+              layer: 'electron:electron',
+              style: 'raster',
+              format: 'image/png',
+              tileMatrixSetID: 'EPSG:4326', 
+              tilingScheme: new Cesium.GeographicTilingScheme(), // 切片方案,与TileMatrixSet中的切片组织相对应;调用EPSG4326坐标系时,切片方案必须为GeographicTilingScheme;
+              maximumLevel:10,
+              show: true
+
+      })
+      //cesium初始化       
       this.$data._viewer2D = new Cesium.Viewer("2DcesiumContainer", {
+        requestRenderMode : true, //开启 requestRenderMode 以减少Cesium渲染一个新帧总的时间,并且降低应用中Cesium的CPU使用率。
         sceneMode: Cesium.SceneMode.SCENE2D,
         animation: this.mode, // 是否显示时间轴动画
         baseLayerPicker: false,
@@ -677,17 +936,11 @@ export default {
         sceneModePicker: false,
         navigationHelpButton: false,
         selectionIndicator: false,
-        imageryProvider: new Cesium.UrlTemplateImageryProvider({
-          url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
-          layer: "tdtVecBasicLayer",
-          style: "default",
-          format: "image/png",
-          tileMatrixSetID: "GoogleMapsCompatible",
-          show: false
-        })
+        imageryProvider: normalMapLayer
       });
 
       this.$data._viewer3D = new Cesium.Viewer("3DcesiumContainer", {
+        requestRenderMode : true, //开启 requestRenderMode 以减少Cesium渲染一个新帧总的时间,并且降低应用中Cesium的CPU使用率。
         animation: this.mode, // 是否显示时间轴动画
         baseLayerPicker: false,
         homeButton: false,
@@ -697,55 +950,25 @@ export default {
         sceneModePicker: false,
         navigationHelpButton: false,
         selectionIndicator: false,
-        // imageryProvider:  new Cesium.WebMapServiceImageryProvider({
-        //   url: '/geoserver/map/wms',
-        //     // 这里是自定义的图层名称
-        //     layers: 'map',
-        //     parameters: {
-        //         service: 'WMS',
-        //         format: 'image/png',
-        //         transparent: true
-        //     }
-        // }),
-
-        imageryProvider:
-          // new Cesium.WebMapTileServiceImageryProvider({
-          //     url: "http://127.0.0.1:8080/geoserver/gwc/service/wmts/rest/map:map/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png",
-          //     layer: 'map:map',
-          //     style: 'raster',
-          //     format: 'image/png',
-          //     tileMatrixSetID: 'EPSG:4326', 
-          //     tilingScheme: new Cesium.GeographicTilingScheme(), // 切片方案,与TileMatrixSet中的切片组织相对应;调用EPSG4326坐标系时,切片方案必须为GeographicTilingScheme;
-          //     maximumLevel:10,
-
-          //   }),
-          new Cesium.UrlTemplateImageryProvider({
-            url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
-            layer: "tdtVecBasicLayer",
-            style: "default",
-            format: "image/png",
-            tileMatrixSetID: "GoogleMapsCompatible",
-            show: false
-          })
+        imageryProvider: normalMapLayer
       });
-
+      
+      //添加额外图层
+      this.$data._viewer3D.imageryLayers.addImageryProvider(demMapLayer);
+      this.$data._viewer2D.imageryLayers.addImageryProvider(demMapLayer);
+      //图层隐藏
+      this.setMapLayer()
+      //去除原有样式
       this.$data._viewer3D._cesiumWidget._creditContainer.style.display = "none";
       this.$data._viewer2D._cesiumWidget._creditContainer.style.display = "none";
+      //设置摄像机
       this.$data._viewer3D.camera.setView({
         destination: new Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
-        // 方向,俯视和仰视的视角
-        // orientation:{
-        //   heading: Cesium.Math.toRadians(90),//坐标系旋转90度
-        //   pitch: Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
-        // }
+
       });
       this.$data._viewer2D.camera.setView({
         destination: new Cesium.Cartesian3.fromDegrees(117.918977, 25.0, 1500000)
-        // 方向,俯视和仰视的视角
-        // orientation:{
-        //   heading: Cesium.Math.toRadians(90),//坐标系旋转90度
-        //   pitch: Cesium.Math.toRadians(-45) ,//设置俯仰角度为-45度
-        // }
+
       });
       // this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1500000;  //相机高度的最大值
       this.$data._viewer2D.camera.percentageChanged = 0.01;
@@ -757,10 +980,10 @@ export default {
       this.handler2D = new Cesium.ScreenSpaceEventHandler(this.$data._viewer2D.scene.canvas);
       this.handler3D = new Cesium.ScreenSpaceEventHandler(this.$data._viewer3D.scene.canvas);
       //设置导航组件
-      // new CesiumNavigation(this.$data._viewer2D, this.mapNavOptions);
       new CesiumNavigation(this.$data._viewer3D, this.mapNavOptions);
     },
     sync() {
+      //更新地图位置
       if (this.mousevalue == "3D") {
         // 三维地图中心点
         let center = new Cesium.Cartesian2(
@@ -776,7 +999,7 @@ export default {
           position = this.convertWorldToCartographic(position);
           // 更新二维地图
           this.$data._viewer2D.scene.camera.setView({
-            destination: new Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
+            destination: new Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance),
           });
         }
       }
@@ -795,10 +1018,11 @@ export default {
           position = this.convertWorldToCartographic(position);
           // 更新三维地图
           this.$data._viewer3D.scene.camera.setView({
-            destination: new Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
+            destination: new Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance),
           });
         }
       }
+      
     },
     // 将世界坐标系转换为经纬度坐标系
     convertWorldToCartographic(worldPosition) {
@@ -860,6 +1084,7 @@ export default {
         duration: 1.0
       });
     },
+    //返回到初始位置
     home() {
       let viewer = (this.dimension === 3 || this.dimension === 5) ? this.$data._viewer3D : this.$data._viewer2D;
       viewer.camera.flyTo({
@@ -867,6 +1092,10 @@ export default {
         duration: 2.0
       });
     },
+    removeEntitys(){
+      this.$data._viewer2D.entities.removeAll();
+      this.$data._viewer3D.entities.removeAll();
+    },
     // tabs 切换点击
     legendClick({ index }) {
       this.selectModel();
@@ -939,7 +1168,6 @@ export default {
       if (type == 'red') {
         color = 'Red'
         currentModel = [this.models.missile2!=null?Cesium.clone(this.models.missile2):null,this.models.missile3!=null?Cesium.clone(this.models.missile3):null];
-        console.log("333333333333333333333333333333333333333333333333333"+this.models.missile2)
         modelUrl = [missileModel2,missileModel3]
         for(let i = 0;i < this.jsonData.redunit.length;i++)
         {
@@ -1539,6 +1767,7 @@ export default {
       entity.orientation = new Cesium.VelocityOrientationProperty(entity.position);
       //设置实体位置
       entity.position.setValue(position)
+
       this.markSatelliteLine(oldPosition, position, 'Blue', viewer)
     },
     //计算有多少个导弹进入了雷达的原始范围
@@ -1998,7 +2227,7 @@ export default {
   margin-right: 0px !important;
 }
 
-.buttons {
+.topbuttons {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2009,6 +2238,17 @@ export default {
   top: 20px;
 }
 
+.bottombuttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-items: center;
+  position: absolute;
+  z-index: 999;
+  right: 20px;
+  top: 380px;
+}
+
 .image-title {
   margin-top: 10px;
   text-align: center;
@@ -2018,7 +2258,8 @@ export default {
 }
 
 ::v-deep .el-tabs--border-card>.el-tabs__content {
-  width: 300px;
+  min-width: 300px;
+  max-width: 500px;
   height: 100%;
   overflow-y: visible;
 }
@@ -2101,4 +2342,24 @@ export default {
   width: 100%;
   height: 90%;
 }
+
+.image-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  overflow: auto;
+  max-height: 300px;
+  
+}
+
+.image-container .image-item {
+    width: 48%;
+  }
+
+.highlighted-red {
+  border: 2px solid red; /* 可以根据需求设置高亮效果,这里用蓝色边框表示 */
+  box-shadow: 0 0 5px red; /* 可选:添加阴影效果 */
+}
+
+
 </style>