权属添加表格

src/components/Query/clickQuery/MultiLevelQuery.vue

@@ -18,21 +18,44 @@
                 </el-table-column>
             </el-table>
         </el-tab-pane>
+
         <el-tab-pane :closable="item.close" :label="item.name" :name="item.name"
             v-for="(item, index) in store.state.query_pick_pane" :key="index">
 
-            <el-table :data="tableData" style="width: 100%" :header-cell-style="{
-                background: 'rgba(10, 25, 38, 0.6)',
-                color: '#66b1ff',
-                fontSize: '14px',
-                fontFamily: 'Microsoft YaHei',
-                fontWeight: '400',
-            }">
-                <el-table-column show-overflow-tooltip="true" width="150" v-for="header in headers" :key="header"
-                    :label="header" :prop="header" v-if="header != '空间信息'">
-                </el-table-column>
-            </el-table>
-            <pie class="echart" :class="item.name == '权属' ? 'echart1' : ''" unit="亩" :ref="`echartRef`"></pie>
+            <div v-if="item.name != '权属'">
+                <el-table :data="tableData" style="width: 100%" :header-cell-style="{
+                    background: 'rgba(10, 25, 38, 0.6)',
+                    color: '#66b1ff',
+                    fontSize: '14px',
+                    fontFamily: 'Microsoft YaHei',
+                    fontWeight: '400',
+                }">
+                    <el-table-column show-overflow-tooltip="true" width="150" v-for="header in headers" :key="header"
+                        :label="header" :prop="header" v-if="header != '空间信息'">
+                    </el-table-column>
+                </el-table>
+                <pie class="echart" unit="亩" :ref="`echartRef`"></pie>
+            </div>
+            <div v-else>
+                <el-tabs @tab-click="handleClickQwnership">
+
+                    <el-tab-pane v-for="(item, index) in qwnershipTabs" :key="index" :label="item.dataname"
+                        :name="item.dataname">
+                        <el-table :data="tableData_qwnership" style="width: 100%" :header-cell-style="{
+                            background: 'rgba(10, 25, 38, 0.6)',
+                            color: '#66b1ff',
+                            fontSize: '14px',
+                            fontFamily: 'Microsoft YaHei',
+                            fontWeight: '400',
+                        }">
+                            <el-table-column show-overflow-tooltip="true" width="150" v-for="header in headers_qwnership"
+                                :key="header" :label="header" :prop="header" v-if="header != '空间信息'">
+                            </el-table-column>
+                        </el-table>
+
+                    </el-tab-pane>
+                </el-tabs>
+            </div>
 
         </el-tab-pane>
 
@@ -70,6 +93,7 @@ export default {
     data() {
         return {
             activeName: 'second',
+            activeNameQwnership: 'Qwnership',
             handler_multi_level_query: null,
             manager_multi_level_query: null,
             manager_multi_level_vector: null,
@@ -83,7 +107,10 @@ export default {
             check_list: [{ label: '三调', ckeck: true }, { label: '权属', ckeck: true }, { label: '农用' }, { label: '上映' }],
             active_tabs_table: [],
             rawData: [],
-            headers: [], // 用于存储所有可能的 filedZH 值  
+            headers: [], // 用于存储所有可能的 filedZH 值 
+            qwnershipTabs: [],
+            rawData_qwnership:[],
+            headers_qwnership: [],
         };
     },
     //监听属性 类似于data概念
@@ -113,6 +140,31 @@ export default {
                 return row;
             });
         },
+        tableData_qwnership() {
+            // 首次加载时确定所有可能的 filedZH 值  
+            // if (!this.headers.length) {
+            this.headers_qwnership = [];
+            this.rawData_qwnership.forEach(item => {
+                item.forEach(field => {
+                    if (!this.headers_qwnership.includes(field.filedZH)) {
+                        this.headers_qwnership.push(field.filedZH);
+                    }
+                });
+            });
+            // }
+
+            // 转换 rawData 为适合 el-table 使用的格式  
+            return this.rawData_qwnership.map(item => {
+                // 创建一个包含所有 headers 字段的对象  
+                const row = {};
+                this.headers_qwnership.forEach(header => {
+                    // 查找当前数据项中对应 filedZH 的 data 值  
+                    const field = item.find(f => f.filedZH === header);
+                    row[header] = field ? field.data : ''; // 如果没有找到，则使用空字符串  
+                });
+                return row;
+            });
+        },
     },
     //监控data中的数据变化
     watch: {},
@@ -297,10 +349,10 @@ export default {
                 };
 
                 const wkt = wellknown.stringify(geojsonPoint);
-                let id = store.state.vectorlayerlist[store.state.vectorlayerlist.length - 1].id
+                // let id = store.state.vectorlayerlist[store.state.vectorlayerlist.length - 1].id
                 let obj = {
                     defaultType: null,
-                    layerId: id
+                    // layerId: id
                 }
                 let data = await GetTabsData(obj);
 
@@ -308,8 +360,12 @@ export default {
                     const element = data.data[index];
                     let tableId = element.tableId;
                     let pane_obj = {
-                        sourcePointWkt: wkt,
-                        sourceLayerId: id,
+                        // sourcePointWkt: wkt,
+                        // sourceLayerId: id,
+
+                        sourcePointWkt: "POINT(109.5139541 18.3146153)",
+                        sourceLayerId: "dd699f839bc04969ae2dc2e1964d0ad1",
+
                         sourceLayerType: '0',
                         queryTableId: tableId,
 
@@ -346,26 +402,54 @@ export default {
 
         },
         handleClick(tab, event) {
+            console.log('handleClick: ', tab, event);
 
             let index = Number(tab.index) - 1
-            if (tab.closable == true) {
-                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
+
+            if (tab.name == '权属') {
+                this.qwnershipTabsFun();
+            } else {
+                if (tab.closable == true) {
+                    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
+                            console.log('this.rawData: ', this.rawData);
+                            res.value.data.datalist.forEach((res) => {
+                                data.push({
+                                    name: res.groupvalue,
+                                    value: res.sumvalue
+                                })
                             })
-                        })
-                        this.setEchart(data, "vertical", index);
-                    }
-                })
+                            this.setEchart(data, "vertical", index);
+                        }
+                    })
+                }
             }
 
+
+        },
+        handleClickQwnership(tab, event) {
+            console.log(tab.name);
+            this.qwnershipTabs.forEach((res) => {
+                if (res.dataname == tab.name) {
+                    this.rawData_qwnership = res.data
+                    console.log('  this.rawData_qwnership: ',   this.rawData_qwnership);
+                }
+            })
+        },
+        // 权属tabs
+        qwnershipTabsFun() {
+            store.state.query_pick_pane.forEach((res) => {
+                if (res.name == '权属') {
+                    this.qwnershipTabs = res.value.data.child;
+                    // this.activeNameQwnership = this.qwnershipTabs[0].dataname
+                }
+            })
+
+
         },
         setEchart(data, type, index) {
             this.$nextTick(() => {