列表接入

src/views/siteselection/components/dkDetailsNew.vue

@@ -13,7 +13,17 @@
         <el-tab-pane :label="item.tableName" :name="item.tableName" v-for="(item, index) in tabs_list" :key="index">
 
           <pie class="echart" unit="平方米" :ref="`ghxz_pie`"></pie>
-
+          <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>
         </el-tab-pane>
 
       </el-tabs>
@@ -40,6 +50,8 @@ export default {
       activeName: 'second',
       tabs_list: null,
       optional: null,
+      rawData: [],
+      headers: [], // 用于存储所有可能的 filedZH 值 
     };
   },
   methods: {
@@ -53,12 +65,13 @@ export default {
     },
     setEchart(data, type, index) {
       this.$nextTick(() => {
-        let max =  5
-        let legend_right =  "10%"
+        let max = 5
+        let legend_right = "10%"
         this.$refs.ghxz_pie[index].setOptions({ data, type, max, legend_right });
       });
     },
     async handleClick(tab, event) {
+      this.rawData = [];
       this.tabs_list.forEach(async element => {
         if (element.tableName == tab.name) {
 
@@ -80,8 +93,10 @@ export default {
               value: res.sumvalue
             })
           })
-          console.log('data_echart: ', data_echart);
 
+          if (data.data.data != undefined) {
+            this.rawData = data.data.data
+          }
           this.setEchart(data_echart, "vertical", Number(tab.index));
 
         }
@@ -92,7 +107,33 @@ export default {
     },
   },
   mounted() { },
-  computed: {},
+  computed: {
+    tableData() {
+      // 首次加载时确定所有可能的 filedZH 值  
+      // if (!this.headers.length) {
+      this.headers = [];
+      this.rawData.forEach(item => {
+        item.forEach(field => {
+          if (!this.headers.includes(field.filedZH)) {
+            this.headers.push(field.filedZH);
+          }
+        });
+      });
+      // }
+
+      // 转换 rawData 为适合 el-table 使用的格式  
+      return this.rawData.map(item => {
+        // 创建一个包含所有 headers 字段的对象  
+        const row = {};
+        this.headers.forEach(header => {
+          // 查找当前数据项中对应 filedZH 的 data 值  
+          const field = item.find(f => f.filedZH === header);
+          row[header] = field ? field.data : ''; // 如果没有找到，则使用空字符串  
+        });
+        return row;
+      });
+    },
+  },
 };
 </script>