|
@@ -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>
|
|
|
|