1

src/views/LandConsolidation/components/qhdb.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="qhdb">
+    <div class="tdTitle">整治前后土地利用结构对比</div>
+    <div class="selectTab">
+      <el-select
+        v-model="tab1"
+        placeholder="请选择"
+        :popper-append-to-body="false"
+        @change="changeCharts"
+      >
+        <el-option
+          v-for="item in dboptions"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="tab"
+        placeholder="请选择"
+        :popper-append-to-body="false"
+        @change="changeCharts"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div class="echars">
+      <barAndLine class="echart" ref="echartRef1" v-show="!tab1"></barAndLine>
+      <sankey class="echart" ref="echartRef2" v-show="tab1"></sankey>
+    </div>
+  </div>
+</template>
+
+<script>
+import barAndLine from "@/views/cockpit/common/ThreeStackedBarAndLine.vue";
+import sankey from "@/components/echartsTemplate/sankey.vue";
+import { district } from "@/api/Idleland.js";
+export default {
+  props: {},
+  data() {
+    return {
+      jdData: {
+        legend_data: ["整治前", "整治后", "变化率"],
+        x_data: [],
+        // legendmap: [{ type: "bar" }, { type: "bar" }, { type: "line" }],
+        params: {},
+        region: "",
+      },
+      dboptions: [
+        { name: "地类变化", value: 0 },
+        { name: "地类流向", value: 1 },
+      ],
+      options: [
+        { name: "试点区域", value: 0 },
+        { name: "整治区域", value: 1 },
+      ],
+      tab1: 0,
+      tab: 0,
+    };
+  },
+  components: {
+    barAndLine,
+    sankey,
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    changeData(name, updata) {
+      this[name] = updata;
+    },
+    regionChange(region) {
+      this.region = region;
+      this.getData();
+    },
+    getData() {
+      this.$emit("updateParent", "loading", true);
+      this.params = { districtCode: this.region };
+      this.GetDistrict();
+    },
+    GetDistrict() {
+      this.jdData.x_data = [];
+      this.jdData.result = [[], [], [], []];
+      district(this.params).then((res) => {
+        res.data.forEach((jdData) => {
+          this.jdData.x_data.push(jdData.districtName);
+          this.jdData.result[0].push(jdData.confirmAre.toFixed(2));
+          this.jdData.result[1].push(jdData.disposalArea.toFixed(2));
+          this.jdData.result[2].push((jdData.idleRate * 100).toFixed(2));
+          // this.jdData.result[3].push((jdData.disposalRate * 100).toFixed(2));
+        });
+        this.setEchart(this.jdData, 1);
+        this.$emit("updateParent", "loading", false);
+      });
+    },
+    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 },
+        ];
+        this.setEchart(data, 2, links);
+        this.$emit("updateParent", "loading", false);
+      });
+    },
+    changeCharts(e) {
+      if (this.tab1 == 0) {
+        this.GetDistrict();
+      } else this.Getlinks();
+    },
+    setEchart(data, id, links) {
+      this.$nextTick(() => {
+        this.$refs[`echartRef${id}`].setOptions(data, links);
+      });
+    },
+  },
+  watch: {
+    region(newValue) {
+      console.log(newValue, "---");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.qhdb {
+  height: 100%;
+  position: absolute;
+  
+  .selectTab {
+    position: absolute;
+    top: 3px;
+    right: 23px;
+    z-index: 100;
+    /deep/ .el-input__inner {
+      width: 100px !important;
+      height: 30px !important;
+      font-size: 12px;
+      color: #bcd3e5;
+      // border: none;
+      background-color: transparent !important;
+      background-size: 100% 100%;
+    }
+  }
+
+  .echart {
+    width: 850px !important;
+    height: 260px !important;
+  }
+}
+</style>