|
@@ -7,7 +7,7 @@
|
|
|
v-model="tab1"
|
|
|
placeholder="请选择"
|
|
|
:popper-append-to-body="false"
|
|
|
- @change="changeCharts"
|
|
|
+ @change="getData"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in dboptions"
|
|
@@ -21,7 +21,7 @@
|
|
|
v-model="tab"
|
|
|
placeholder="请选择"
|
|
|
:popper-append-to-body="false"
|
|
|
- @change="changeCharts"
|
|
|
+ @change="Getqhdb"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in options"
|
|
@@ -51,7 +51,7 @@ export default {
|
|
|
jdData: {
|
|
|
legend_data: ["整治前", "整治后", "变化率"],
|
|
|
x_data: [],
|
|
|
- yAxis: [{ name: "面积(公顷)" }, { name: "变化率(%)" }],
|
|
|
+ yAxis: [{ name: "面积(公顷)" }, { name: "变化面积(公顷)" }],
|
|
|
legendmap: [{ type: "bar" }, { type: "bar" }, { type: "line" }],
|
|
|
params: {},
|
|
|
region: "",
|
|
@@ -61,20 +61,18 @@ export default {
|
|
|
{ name: "地类流向", value: 1 },
|
|
|
],
|
|
|
options: [
|
|
|
- { name: "试点区域", value: 0 },
|
|
|
- { name: "整治区域", value: 1 },
|
|
|
+ { name: "试点区域", value: "sd" },
|
|
|
+ { name: "整治区域", value: "zz" },
|
|
|
],
|
|
|
tab1: 0,
|
|
|
- tab: 0,
|
|
|
+ tab: "sd",
|
|
|
};
|
|
|
},
|
|
|
components: {
|
|
|
barAndLine,
|
|
|
sankey,
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.getData();
|
|
|
- },
|
|
|
+ mounted() {},
|
|
|
methods: {
|
|
|
contrast() {
|
|
|
this.$emit("contrast");
|
|
@@ -88,20 +86,22 @@ export default {
|
|
|
},
|
|
|
getData() {
|
|
|
this.$emit("updateParent", "loading", true);
|
|
|
- this.Getqhdb();
|
|
|
+ if (this.tab1 == 0) {
|
|
|
+ this.Getqhdb();
|
|
|
+ } else this.Getlinks();
|
|
|
},
|
|
|
Getqhdb() {
|
|
|
this.jdData.x_data = [];
|
|
|
this.jdData.result = [[], [], []];
|
|
|
QueryList({
|
|
|
- jscType: "qytuzz_sdzl_tdlyqhdb_dlbh_sd",
|
|
|
+ jscType: `qytuzz_sdzl_tdlyqhdb_dlbh_${this.tab}`,
|
|
|
id: this.region,
|
|
|
}).then((res) => {
|
|
|
res.data.forEach((jdData) => {
|
|
|
this.jdData.x_data.push(jdData.dlbmmc);
|
|
|
this.jdData.result[0].push(jdData.qtbdlmj.toFixed(2));
|
|
|
this.jdData.result[1].push(jdData.htbdlmj.toFixed(2));
|
|
|
- this.jdData.result[2].push((jdData.bhl * 100).toFixed(2));
|
|
|
+ this.jdData.result[2].push(jdData.bhl.toFixed(2));
|
|
|
});
|
|
|
this.setEchart(this.jdData, 1);
|
|
|
this.$emit("updateParent", "loading", false);
|
|
@@ -110,34 +110,29 @@ export default {
|
|
|
Getlinks() {
|
|
|
let data = [],
|
|
|
links = [];
|
|
|
- district(this.params).then((res) => {
|
|
|
- // res.data.forEach((jdData) => {
|
|
|
- // });
|
|
|
- data = [
|
|
|
- { name: "a" },
|
|
|
- { name: "b" },
|
|
|
- { name: "a1" },
|
|
|
- { name: "a2" },
|
|
|
- { name: "b1" },
|
|
|
- { name: "c" },
|
|
|
- ];
|
|
|
- links = [
|
|
|
- { source: "a", target: "a1", value: 5 },
|
|
|
- { source: "a", target: "a2", value: 3 },
|
|
|
- { source: "b", target: "b1", value: 8 },
|
|
|
- { source: "a", target: "b1", value: 3 },
|
|
|
- { source: "b1", target: "a1", value: 1 },
|
|
|
- { source: "b1", target: "c", value: 2 },
|
|
|
- ];
|
|
|
+ QueryList({
|
|
|
+ jscType: `qytuzz_sdzl_tdlyqhdb_dllx_${this.tab}`,
|
|
|
+ id: this.region,
|
|
|
+ }).then((res) => {
|
|
|
+ res.data.forEach((lxdata) => {
|
|
|
+ if (lxdata.geom_area) {
|
|
|
+ if (!data.find((i) => i.name == lxdata.qdlbm))
|
|
|
+ data.push({ name: lxdata.qdlbm });
|
|
|
+ if (!data.find((i) => i.name == lxdata.hdlbm))
|
|
|
+ data.push({ name: lxdata.hdlbm });
|
|
|
+ links.push({
|
|
|
+ source: lxdata.qdlbm,
|
|
|
+ target: lxdata.hdlbm,
|
|
|
+ value: lxdata.geom_area,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
this.setEchart(data, 2, links);
|
|
|
this.$emit("updateParent", "loading", false);
|
|
|
});
|
|
|
},
|
|
|
- changeCharts(e) {
|
|
|
- if (this.tab1 == 0) {
|
|
|
- this.GetDistrict();
|
|
|
- } else this.Getlinks();
|
|
|
- },
|
|
|
+ changeCharts(e) {},
|
|
|
setEchart(data, id, links) {
|
|
|
this.$nextTick(() => {
|
|
|
this.$refs[`echartRef${id}`].setOptions(data, links);
|