图斑详情查询

src/components/Query/clickQuery/CockpitVector.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="CockpitVectorBox">
-    <span class="clearBtn" @click="cockpit">
-      <i class="iconfont iconSize el-icon-thumb" style="margin-top: 0px"></i>
-      图斑详情查询
-    </span>
     <div class="cockpit_vector">
       <el-table
         :header-cell-style="{
@@ -61,7 +57,7 @@ import * as wellknown from "wellknown";
 import * as turf from "@turf/turf";
 import * as echarts from "echarts";
 import { name } from "file-loader";
-import * as pick_cockpit_vector from "./pick_cockpit_vector.js";
+
 let pick_entity = null;
 export default {
   components: {},
@@ -112,10 +108,6 @@ export default {
   },
   //方法集合
   methods: {
-    cockpit() {
-      //驾驶舱矢量数据点选查询
-      pick_cockpit_vector.init_handler();
-    },
     build_data(geojson) {
       geojson.coordinates.forEach((res) => {
         const twoDArray = res[0];
@@ -352,19 +344,6 @@ export default {
   top: 6rem;
   width: 100%;
   height: 100%;
-  .clearBtn {
-    cursor: pointer;
-    background-color: #3f94f53f;
-    border: 1px solid #3f93f5;
-    color: #b6e0ff;
-    padding: 5px 15px;
-    display: inline-block;
-    margin: 10px 0;
-
-    &:hover {
-      font-weight: bold;
-    }
-  }
 }
 
 .list_vector {

src/views/cockpit/common/VectorSpace/BoxCommonVector.vue

@@ -4,6 +4,10 @@
       <h2 class="PangetitleVector darg-div">
         <span class="pange_textVector">{{ title }}</span>
         <slot name="title"></slot>
+        <span class="clearBtn" @click="cockpit">
+          <i class="el-icon-thumb"></i>
+          图斑详情查询
+        </span>
         <i
           class="el-icon-close"
           v-if="$route.path == '/overview'"
@@ -110,7 +114,7 @@
         stretch
       >
         <el-tab-pane label="基本信息" name="base">
-          <CockpitVector :baseData="store.state.vectorData"></CockpitVector>
+          <CockpitVector :baseData="details"></CockpitVector>
         </el-tab-pane>
         <!-- -->
         <el-tab-pane
@@ -131,6 +135,7 @@ import * as tdsy from "@/views/cockpit/js/tdsy";
 import * as wellknown from "wellknown";
 import * as turf from "@turf/turf";
 import { loadGeoJSON } from "@/utils/MapHelper/help.js";
+import * as pick_cockpit_vector from "@/components/Query/clickQuery/pick_cockpit_vector.js";
 import CockpitVector from "@/components/Query/clickQuery/CockpitVector.vue";
 let BoxCommonVector_entity = null;
 let layerSources = {};
@@ -159,9 +164,14 @@ export default {
       xzqTreeData: [],
       isShallow: false,
       activeTabs: "base",
+      details: {},
     };
   },
   methods: {
+    cockpit() {
+      //驾驶舱矢量数据点选查询
+      pick_cockpit_vector.init_handler();
+    },
     tableRowClassName({ row, rowIndex }) {
       if (rowIndex === this.scrollTop_index) {
         return "warning-row";
@@ -432,7 +442,8 @@ export default {
           value: item[key],
         });
       });
-      store.state.vectorData = arr;
+      this.scrollTop_index = item.index;
+      this.details = arr;
       this.isShallow = true;
       // store.setActiveToolBar(9);
     },
@@ -672,6 +683,7 @@ export default {
       console.log(newVal, oldVal, "----");
     },
     computed_vectorData(newVal, oldVal) {
+      this.details = newVal;
       newVal.forEach((res) => {
         if (res.name == "index") {
           const TableRows = this.$refs.singleTable.bodyWrapper.querySelectorAll(
@@ -811,6 +823,19 @@ div::-webkit-scrollbar {
     color: #ffffff;
     margin-left: 30px;
   }
+  .clearBtn {
+    cursor: pointer;
+    // background-color: #3f94f53f;
+    // border: 1px solid #3f93f5;
+    color: #b6e0ff;
+    padding: 5px 15px;
+    display: inline-block;
+    margin-left: 15px;
+
+    &:hover {
+      font-weight: bold;
+    }
+  }
 }
 
 /deep/.el-input__inner:focus {
@@ -909,15 +934,18 @@ div::-webkit-scrollbar {
 /deep/ .el-table .warning-row {
   background: rgb(102, 177, 255) !important;
 }
-/deep/ .el-icon-close:before {
-  position: absolute;
-  // top: 10px;
-  // right: 10px;
-  font-size: larger;
-  font-weight: bold;
 
-  &:hover {
-    color: aqua;
+.sm-panel-header {
+  /deep/ .el-icon-close:before {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: larger;
+    font-weight: bold;
+
+    &:hover {
+      color: aqua;
+    }
   }
 }
 </style>