级联查询上图

src/components/Query/clickQuery/MultiLevelQuery.vue

@@ -4,36 +4,8 @@
     v-if="store.state.query_pick_pane.length > 0"
     @tab-click="handleClick"
     @tab-remove="removeTab"
+    v-model="activeName"
   >
-    <el-tab-pane :label="store.state.query_pick_last_pane.name" name="second">
-      <el-table
-        :header-cell-style="{
-          background: 'rgba(10, 25, 38, 0.6)',
-          color: '#66b1ff',
-          fontSize: '14px',
-          fontFamily: 'Microsoft YaHei',
-          fontWeight: '400',
-        }"
-        :data="store.state.query_pick_last_pane.value"
-        style="width: 100%"
-      >
-        <el-table-column
-          show-overflow-tooltip="true"
-          prop="filedZH"
-          label="属性"
-          width="140"
-          v-if="filedZH != '空间信息'"
-        >
-        </el-table-column>
-        <el-table-column
-          show-overflow-tooltip="true"
-          prop="data"
-          label="属性值"
-        >
-        </el-table-column>
-      </el-table>
-    </el-tab-pane>
-
     <!-- <el-tab-pane :closable="item.close" :label="item.name" :name="item.name" -->
     <el-tab-pane
       :label="item.name"
@@ -42,7 +14,36 @@
       :key="index"
       v-if="item.show"
     >
-      <div v-if="item.name != '权属'">
+      <div v-if="item.name == '规划地块'">
+        <el-table
+          :header-cell-style="{
+            background: 'rgba(10, 25, 38, 0.6)',
+            color: '#66b1ff',
+            fontSize: '14px',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '400',
+          }"
+          :data="item.filteredData"
+          style="width: 100%"
+        >
+          <el-table-column
+            show-overflow-tooltip="true"
+            prop="filedZH"
+            label="属性"
+            width="140"
+            v-if="filedZH != '空间信息'"
+          >
+          </el-table-column>
+          <el-table-column
+            show-overflow-tooltip="true"
+            prop="data"
+            label="属性值"
+          >
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div v-else-if="item.name != '权属'">
         <pie
           class="echart"
           unit="平方米"
@@ -74,7 +75,10 @@
         </el-table>
       </div>
       <div v-else>
-        <el-tabs @tab-click="handleClickQwnership">
+        <el-tabs
+          @tab-click="handleClickQwnership"
+          v-model="activeNameQwnership"
+        >
           <pie class="echart" unit="平方米" :ref="`qwnership_pie`"></pie>
 
           <el-tab-pane
@@ -133,11 +137,10 @@ import { GetTabsData, GetTabsPane } from "@/api/cockpitNew";
 import * as wellknown from "wellknown";
 import * as turf from "@turf/turf";
 import pie from "@/components/echartsTemplate/pieNew.vue";
-
+import { loadGeoJSON } from "@/utils/MapHelper/help.js";
 let manager_multi_level_query = null;
 let pick_entity = null;
 
-let manager_multi_level_vector = null;
 let query_click_by_iserver = null;
 
 export default {
@@ -148,7 +151,6 @@ export default {
       activeNameQwnership: "Qwnership",
       handler_multi_level_query: null,
       manager_multi_level_query: null,
-      manager_multi_level_vector: null,
       pick_entity: null,
       pick_entity_geo: null,
       eclickname: "",
@@ -432,7 +434,6 @@ export default {
     },
     clear_data() {
       const that = this;
-      store.state.query_pick_last_pane = null;
       store.state.query_pick_pane = [];
       this.tableData = [];
       this.tableData_qwnership = [];
@@ -512,39 +513,34 @@ export default {
             sourceLayerType: "0",
             queryTableId: tableId,
           };
-          if (index == 0) {
-            let res = await GetTabsPane(pane_obj);
-
-            let filteredData = res.data.data[0].filter((res) => {
-              return res.filed != "geom";
-            });
-
-            store.state.query_pick_last_pane = {
-              name: element.name,
-              value: filteredData,
-            };
+          let res = await GetTabsPane(pane_obj);
+
+          let filteredData =
+            index == 0
+              ? res.data.data[0].filter((res) => {
+                  return res.filed != "geom";
+                })
+              : [];
+
+          if (element.defaultType == "0") {
+            // store.state.query_pick_pane.push({
+            //     name: element.name,
+            //     value: res,
+            //     close: 'closable',
+            //     show: true
+            // });
+            this.check_list_active.push(element.name);
           } else {
-            let res = await GetTabsPane(pane_obj);
-
-            if (element.defaultType == "0") {
-              // store.state.query_pick_pane.push({
-              //     name: element.name,
-              //     value: res,
-              //     close: 'closable',
-              //     show: true
-              // });
-              this.check_list_active.push(element.name);
-            } else {
-            }
-
-            store.state.query_pick_pane.push({
-              name: element.name,
-              value: res,
-              close: "closable",
-              show: element.defaultType == "0" ? true : false,
-            });
           }
 
+          store.state.query_pick_pane.push({
+            name: element.name,
+            value: res,
+            filteredData,
+            close: "closable",
+            show: element.defaultType == "0" ? true : false,
+          });
+
           this.check_list.push({
             label: element.name,
             ckeck: element.defaultType == "0" ? true : false,
@@ -553,7 +549,8 @@ export default {
 
         // this.highlightResults(longitude, latitude);
         this.highlightResultsPng(longitude, latitude);
-
+        this.activeName = store.state.query_pick_pane[0].name;
+        this.handleClick();
         that.handler_multi_level_query.destroy();
         that.handler_multi_level_query = null;
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
@@ -587,30 +584,42 @@ export default {
       return secondArray;
     },
     handleClick(tab, event) {
-      let index = Number(tab.index) - 2;
+      this.reset();
+      let tabData = store.state.query_pick_pane.find(
+        (s) => s.name === this.activeName
+      );
 
-      if (tab.name == "权属") {
+      if (this.activeName == "权属") {
         this.qwnershipTabsFun();
-      } else {
-        store.state.query_pick_pane.forEach((res) => {
-          if (res.name == tab.name) {
-            let data = [];
-
-            this.active_tabs_table = res.value.data.data;
-            this.rawData = res.value.data.data;
-            res.value.data.datalist.forEach((res) => {
-              data.push({
-                name: res.groupvalue,
-                value: res.sumvalue,
-              });
-            });
-            this.setEchart(data, "vertical", index);
-          }
+      } else if (tabData) {
+        tabData.value.data.datalist.forEach((res) => {
+          loadGeoJSON(
+            res.geomvalue,
+            "#ff0000",
+            { isfly: true, fill_a: 0.001 },
+            (data) => (data.name = "MultiLevelQuery_echart")
+          );
         });
+
+        if (tab) {
+          let index = Number(tab.index) - 2;
+          let data = [];
+
+          this.active_tabs_table = tabData.value.data.data;
+          this.rawData = tabData.value.data.data;
+          tabData.value.data.datalist.forEach((res) => {
+            data.push({
+              name: res.groupvalue,
+              value: res.sumvalue,
+            });
+          });
+          this.setEchart(data, "vertical", index);
+        }
       }
     },
     handleClickQwnership(tab, event) {
       let index = 0;
+      this.reset();
       this.qwnershipTabs.forEach((res) => {
         if (res.dataname == tab.name) {
           this.rawData_qwnership = res.data;
@@ -620,6 +629,12 @@ export default {
               name: res.groupvalue,
               value: res.sumvalue,
             });
+            loadGeoJSON(
+              res.geomvalue,
+              "#ff0000",
+              { isfly: true, fill_a: 0.001 },
+              (data) => (data.name = "MultiLevelQuery_echart")
+            );
           });
           this.setEchart_qwnership(data, "vertical", index);
           index++;
@@ -631,7 +646,8 @@ export default {
       store.state.query_pick_pane.forEach((res) => {
         if (res.name == "权属") {
           this.qwnershipTabs = res.value.data.child;
-          // this.activeNameQwnership = this.qwnershipTabs[0].dataname
+          this.activeNameQwnership = this.qwnershipTabs[0].dataname;
+          this.handleClickQwnership({ name: this.qwnershipTabs[0].dataname });
         }
       });
     },