前时相后时相

src/views/remote/farmland/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div id="mapApp">
-    <div class="btn">
-      <el-button @click="drawer = true">打开抽屉</el-button>
+    <div class="btn" v-if="nowObj.qsx">
+      <!-- <el-button @click="drawer = true">打开抽屉</el-button> -->
+      <span class="sx qsx">前时相:{{ nowObj.qsx }}</span>
+      <span class="sx hsx">后时相:{{ nowObj.hsx }}</span>
     </div>
     <MapView :maptype="maptype" ref="MapView" />
 
@@ -130,7 +132,7 @@ export default {
       },
       curPageResultLayer: {},
       vectorLayer: {},
-      nowId: "",
+      nowObj: {},
       itemObj: {}, //用于存储分屏高亮的实体
     };
   },
@@ -151,15 +153,15 @@ export default {
       removeWebGLTile("mapCon2");
       let urlQsx = this.newObj.proxypath + row.qsxtif;
       let urlHsx = this.newObj.proxypath + row.hsxtif;
-      if (this.nowId != row.id) {
+      if (this.nowObj.id != row.id) {
         this.maptype = "split";
-        this.nowId = row.id;
+        this.nowObj = row;
         addTiff("mapCon1", urlQsx);
         addTiff("mapCon2", urlHsx);
         this.test(row);
       } else {
         this.maptype = "normal";
-        this.nowId = "";
+        this.nowObj = {};
       }
     },
 
@@ -279,10 +281,23 @@ export default {
 </script>
 <style lang="scss" scoped>
 .btn {
-  position: absolute;
-  top: 0;
-  left: 60px;
-  z-index: 40;
+  // position: absolute;
+  // top: 0;
+  // left: 60px;
+  // z-index: 40;
+  .sx {
+    background: #ffffff;
+    padding: 5px 10px;
+    border: 1px solid #4949492b;
+    border-radius: 5px;
+    position: absolute;
+    top: 20px;
+    left: calc(50% - 420px);
+    z-index: 40;
+  }
+  .hsx {
+    left: calc(50% - 240px);
+  }
 }
 // .mask-layer{
 //   width: 264px !important;