|
@@ -12,18 +12,40 @@
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
<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>
|
|
|
+ <div v-if="item.tableName != '权属'">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-tabs @tab-click="handleClickPs">
|
|
|
+ <el-tab-pane v-for="(item, index) in ps_tabs" :key="index" :label="item.dataname" :name="item.dataname">
|
|
|
+ <pie class="echart" unit="平方米" :ref="`ps_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>
|
|
|
+ </div>
|
|
|
</el-tab-pane>
|
|
|
|
|
|
</el-tabs>
|
|
@@ -37,9 +59,9 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div class="Btns">
|
|
|
- <el-button size="mini" @click="clear">清 除</el-button>
|
|
|
+ <el-button size="mini" @click="clear">清 除</el-button>
|
|
|
<el-button type="primary" size="mini" @click="submit">确 定</el-button>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -66,6 +88,9 @@ export default {
|
|
|
optional: null,
|
|
|
rawData: [],
|
|
|
headers: [], // 用于存储所有可能的 filedZH 值
|
|
|
+ ps_tabs: [],
|
|
|
+ ps_datalist: [],
|
|
|
+
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -104,6 +129,12 @@ export default {
|
|
|
let legend_right = "4%"
|
|
|
this.$refs.ghxz_pie[index].setOptions({ data, type, max, legend_right });
|
|
|
});
|
|
|
+ }, setEchartPs(data, type, index) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let max = 7
|
|
|
+ let legend_right = "4%"
|
|
|
+ this.$refs.ps_ghxz_pie[index].setOptions({ data, type, max, legend_right });
|
|
|
+ });
|
|
|
},
|
|
|
async handleClick(tab, event) {
|
|
|
this.rawData = [];
|
|
@@ -111,7 +142,7 @@ export default {
|
|
|
if (element.tableName == tab.name) {
|
|
|
|
|
|
let pane_obj = {
|
|
|
- sourceDataId: this.optional.landIds.join(','),
|
|
|
+ sourceDataId: this.optional.landIds.join(','),
|
|
|
sourcePolygonWkt: this.optional.geom.split(";")[1],
|
|
|
// sourcePolygonWkt: 'POLYGON((109.49712143164533 18.309279728765855,109.49711192926624 18.310380990351096,109.49711161665255 18.310417116323478,109.4972007070708 18.31050362418087,109.49850056210042 18.310513852191068,109.49859113294231 18.31042875918721,109.49859144375941 18.31039263236441,109.4986014051776 18.309237180686633,109.4984888696287 18.309127909086385,109.49725521594395 18.30911820207864,109.49712174425906 18.30924360340898,109.49712143164533 18.309279728765855))',
|
|
|
|
|
@@ -120,23 +151,53 @@ export default {
|
|
|
queryTableId: element.tableId,
|
|
|
}
|
|
|
|
|
|
- let data = await GetTabsPanePost(pane_obj);
|
|
|
- let data_echart = [];
|
|
|
+ let data = await GetTabsPanePost(JSON.stringify(pane_obj));
|
|
|
+ if (element.tableName == '权属') {
|
|
|
+ this.ps_tabs = data.data.child;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ let data_echart = [];
|
|
|
+
|
|
|
+ data.data.datalist != undefined && data.data.datalist.forEach((res) => {
|
|
|
+ data_echart.push({
|
|
|
+ name: res.groupvalue,
|
|
|
+ value: res.sumvalue
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ if (data.data.data != undefined) {
|
|
|
+ this.rawData = data.data.data
|
|
|
+ }
|
|
|
+ let index_tab = Number(tab.index)
|
|
|
+ if (element.tableName == '土地现状') {
|
|
|
+ index_tab = 1;
|
|
|
+ }
|
|
|
+ this.setEchart(data_echart, "vertical", index_tab);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClickPs(tab) {
|
|
|
+ let data_echart = [];
|
|
|
|
|
|
- data.data.datalist != undefined && data.data.datalist.forEach((res) => {
|
|
|
+ this.ps_tabs.forEach((res) => {
|
|
|
+ if (tab.name == res.dataname) {
|
|
|
+ res.datalist.forEach((res) => {
|
|
|
data_echart.push({
|
|
|
name: res.groupvalue,
|
|
|
value: res.sumvalue
|
|
|
})
|
|
|
})
|
|
|
|
|
|
- if (data.data.data != undefined) {
|
|
|
- this.rawData = data.data.data
|
|
|
+ this.setEchartPs(data_echart, "vertical", Number(tab.index));
|
|
|
+ if (res.data != undefined) {
|
|
|
+ this.rawData = res.data
|
|
|
}
|
|
|
- this.setEchart(data_echart, "vertical", Number(tab.index));
|
|
|
-
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
},
|
|
|
close() {
|
|
|
this.isDateilsShow = false;
|
|
@@ -284,16 +345,16 @@ export default {
|
|
|
}
|
|
|
|
|
|
.Btns {
|
|
|
- width: 100%;
|
|
|
- // display: -webkit-box;
|
|
|
- // display: -ms-flexbox;
|
|
|
- display: flex;
|
|
|
- padding: 20px 30px;
|
|
|
- // -webkit-box-pack: justify;
|
|
|
- // -ms-flex-pack: justify;
|
|
|
- justify-content: space-between;
|
|
|
- // text-align: center;
|
|
|
- // position: absolute;
|
|
|
- // bottom: 0px;
|
|
|
+ width: 100%;
|
|
|
+ // display: -webkit-box;
|
|
|
+ // display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ padding: 20px 30px;
|
|
|
+ // -webkit-box-pack: justify;
|
|
|
+ // -ms-flex-pack: justify;
|
|
|
+ justify-content: space-between;
|
|
|
+ // text-align: center;
|
|
|
+ // position: absolute;
|
|
|
+ // bottom: 0px;
|
|
|
}
|
|
|
</style>
|