update export function and add getdata method

src/views/situation/index.vue

@@ -1,25 +1,24 @@
 <template>
-  <div class="container">
-    <el-row style="height:50px;">
-      <div class="header">
-        <el-button :type="(this.dimension == 2 ? 'success' : 'danger')" @click="dimensionswitch(2)" round>二维</el-button>
-        <el-button :type="(this.dimension == 3 ? 'success' : 'danger')" @click="dimensionswitch(3)" round>三维</el-button>
-        <el-button :type="(this.dimension == 5 ? 'success' : 'danger')" @click="dimensionswitch(5)" round>一体化</el-button>
-      </div>
-    </el-row>
-    <el-row style="height:790px;width: 100%; display:flex;position: relative;">
-      <el-col style="height:100%;position: relative;" :span="this.leftwidth">
-        <div class="main-layout" v-on:mouseover="changeActive('3D')">
-          <div id="3DcesiumContainer" class="map"></div>
-        </div>
-      </el-col>
-      <el-col style="height:100%;position: relative;" :span="(24 - this.leftwidth)">
-        <div class="main-layout" v-on:mouseover="changeActive('2D')">
-          <div id="2DcesiumContainer" class="map"></div>
+    <div class="container">
+      <el-row style="height:40px;">
+        <div class="myHeader" >
+          <el-button :type="(this.dimension==2?'success':'danger')" @click="dimensionswitch(2)" round>二维</el-button>
+          <el-button :type="(this.dimension==3?'success':'danger')" @click="dimensionswitch(3)" round>三维</el-button>
+          <el-button :type="(this.dimension==5?'success':'danger')" @click="dimensionswitch(5)" round>一体化</el-button>
         </div>
-      </el-col>
-      <el-tabs type="border-card" v-model="activeName" tab-position="left" class="menu" :stretch="true"
-        @tab-click="legendClick">
+      </el-row>
+      <el-row style="height:790px;width: 100%; display:flex;position: relative;">
+        <el-col style="height:100%;position: relative;" :span="this.leftwidth"  >
+          <div class="main-layout" v-on:mouseover="changeActive('3D')">
+            <div id="3DcesiumContainer" class="map"></div>
+          </div>
+        </el-col>
+        <el-col style="height:100%;position: relative;" :span="(24-this.leftwidth)" >
+          <div class="main-layout" v-on:mouseover="changeActive('2D')">
+            <div id="2DcesiumContainer" class="map"></div>
+          </div>
+        </el-col>
+        <el-tabs type="border-card" v-model="activeName" tab-position="left" class="menu" :stretch="true" @tab-click="legendClick">
         <el-tab-pane name="first">
           <span slot="label">
             <el-tooltip class="item" effect="dark" content="标绘" placement="left">
@@ -33,6 +32,69 @@
               <i class="el-icon-receiving"></i>
             </el-tooltip>
           </span>
+          <el-radio-group v-model="whosmodel" style="margin: 0 auto;" size="mini">
+            <el-radio-button label="red">红方</el-radio-button>
+            <el-radio-button label="blue">蓝方</el-radio-button>
+          </el-radio-group >
+          <div v-if="whosmodel == 'red'" class="model">
+            <div>
+              <el-image
+                  style="width: 100px; height: 80px; margin: 0 auto;"
+                  :src="url"
+                  fit="fill">
+              </el-image>
+              <h1 style="text-align: center;">Thad拦截导弹</h1>
+            </div>
+            <div>
+              <el-image
+                  style="width: 100px; height: 80px; margin: 0 auto;"
+                  :src="url"
+                  fit="fill">
+              </el-image>
+              <h1 style="text-align: center;">拦截雷达</h1>
+            </div>
+            <div>
+              <el-image
+                  style="width: 100px; height: 80px; margin: 0 auto;"
+                  :src="url"
+                  fit="fill">
+              </el-image>
+              <h1 style="text-align: center;">拦截卫星</h1>
+            </div>
+          </div>
+          <div v-else class="model">
+            <div>
+              <el-image
+                  style="width: 100px; height: 80px; margin: 0 auto;"
+                  :src="url"
+                  fit="fill">
+              </el-image>
+              <h1 style="text-align: center;">弹道导弹</h1>
+            </div>
+            <div>
+              <el-image
+                  style="width: 100px; height: 80px; margin: 0 auto;"
+                  :src="url"
+                  fit="fill">
+              </el-image>
+              <h1 style="text-align: center;">雷达诱饵</h1>
+            </div>
+            <div>
+              <el-image
+                  style="width: 100px; height: 80px; margin: 0 auto;"
+                  :src="url"
+                  fit="fill">
+              </el-image>
+              <h1 style="text-align: center;">干扰雷达</h1>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane name="third">
+          <span slot="label">
+          <el-tooltip class="item" effect="dark" content="测量" placement="left">
+            <i class="el-icon-discount"></i>
+          </el-tooltip>
+          </span>
         </el-tab-pane>
       </el-tabs>
       <div class="buttons">
@@ -67,12 +129,14 @@ export default ({
       leftwidth: 24,
       mousevalue: null,
       shouldAnimate: false,
-      activeName: 'first',
+      activeName: null,
       currentLab: {
         index: -1,
         isActive: false
-      }
-
+      },
+      whosmodel: "red",
+      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+  
     }
   },
   mounted() {
@@ -410,74 +474,96 @@ export default ({
 
 })
 </script>
-<style scoped>
-.header {
-  background-color: #1c222b;
-  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代表的是垂直方向*/
-}
-
-.header .el-button {
-  width: 150px;
-  margin: 0 10px;
-  height: 30px;
-  padding: 1px 23px;
-}
-
-.box-card {
-  min-height: 100%;
-  height: 100%;
-}
-
-/deep/ .el-card__body {
-  height: 100% !important;
-  padding: 0px !important;
-}
-
-.main-layout {
-  height: 100%;
-  width: 100%;
-}
-
-.container {
-  height: 100%;
+  <style scoped>
+  .myHeader{
+    background-color: #1c222b !important;
+    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代表的是垂直方向*/
+  }
+  .myHeader .el-button{
+    width: 100px;
+    height: 20px;
+    padding: 1px 23px;
+  }
+  
+  .box-card {
+    min-height: 100%;
+    height: 100%;
+  }
+  
+  /deep/ .el-card__body {
+    height: 100% !important;
+    padding: 0px !important;
+  }
+  
+  .main-layout {
+    height: 100%;
+    width: 100%;
+  }
+  
+  .container {
+    height: 100%;
+   
+  }
+  
+  .map {
+    width: 100%;
+    height: 100%;
+  }
+  
+  .menu{
+    position: absolute;
+    height: 400px;
+    z-index: 999;
+    left: 20px;
+    top: 20px;
+  }
+  
+  /deep/.el-tabs--left .el-tabs__header.is-left {
+      margin-right: 0px !important;
+  }
+  
+  .buttons{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-items: center;
+    position: absolute;
+    z-index: 999;
+    right: 20px;
+    top: 20px;
+  }
+  .el-button{
+    margin: 5px !important;
+  }
 
+  /deep/.el-tabs--border-card > .el-tabs__content {
+    width: 300px;
+    display: none;
 }
 
-.map {
+.model{
+  display: flex;
   width: 100%;
-  height: 100%;
+  flex-wrap: wrap;
 }
 
-.menu {
-  position: absolute;
-  height: 400px;
-  z-index: 999;
-  left: 20px;
-  top: 20px;
+.model > div{
+  width: 50%;
+  height: 120px;
+  padding: 5px;
 }
 
-/deep/.el-tabs--left .el-tabs__header.is-left {
-  margin-right: unset !important;
+.model .el-image {
+    display: block !important;
 }
 
-.buttons {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-items: center;
-  position: absolute;
-  z-index: 999;
-  right: 20px;
-  top: 20px;
+/deep/ .el-image .el-image__inner{
+  border:1px solid #ddd;
+  border-radius: 5px;
 }
-
-.el-button {
-  margin: 5px !important;
-}</style>
+  </style>