|  | @@ -1,8 +1,13 @@
 | 
											
												
													
														|  |  <template>
 |  |  <template>
 | 
											
												
													
														|  | -  <div class="OrganizeCon">
 |  | 
 | 
											
												
													
														|  | 
 |  | +  <div class="OrganizeCon" v-loading="loading">
 | 
											
												
													
														|  |      <div class="tdTitle">试点目标</div>
 |  |      <div class="tdTitle">试点目标</div>
 | 
											
												
													
														|  |      <div class="echars">
 |  |      <div class="echars">
 | 
											
												
													
														|  | -      <pie unit="亩" class="pie_echart" ref="echartRef0"  @echartClickTitle="(name) => echartClickTitle(name)"></pie>
 |  | 
 | 
											
												
													
														|  | 
 |  | +      <pie
 | 
											
												
													
														|  | 
 |  | +        unit="亩"
 | 
											
												
													
														|  | 
 |  | +        class="pie_echart"
 | 
											
												
													
														|  | 
 |  | +        ref="echartRef0"
 | 
											
												
													
														|  | 
 |  | +        @echartClickTitle="(name) => echartClickTitle(name)"
 | 
											
												
													
														|  | 
 |  | +      ></pie>
 | 
											
												
													
														|  |      </div>
 |  |      </div>
 | 
											
												
													
														|  |      <div class="content">
 |  |      <div class="content">
 | 
											
												
													
														|  |        <div class="item" v-for="(sd, index) in orgnList" :key="index">
 |  |        <div class="item" v-for="(sd, index) in orgnList" :key="index">
 | 
											
										
											
												
													
														|  | @@ -124,14 +129,24 @@
 | 
											
												
													
														|  |    <script>
 |  |    <script>
 | 
											
												
													
														|  |  import pie from "@/components/echartsTemplate/pie.vue";
 |  |  import pie from "@/components/echartsTemplate/pie.vue";
 | 
											
												
													
														|  |  import { QueryOne, QueryList } from "@/api/cockpitNew";
 |  |  import { QueryOne, QueryList } from "@/api/cockpitNew";
 | 
											
												
													
														|  | 
 |  | +const color = [
 | 
											
												
													
														|  | 
 |  | +  "#6172D3",
 | 
											
												
													
														|  | 
 |  | +  "#F5A539",
 | 
											
												
													
														|  | 
 |  | +  "#FED969",
 | 
											
												
													
														|  | 
 |  | +  "#469AE3",
 | 
											
												
													
														|  | 
 |  | +  "#F97A3C",
 | 
											
												
													
														|  | 
 |  | +  "#2FD9F2",
 | 
											
												
													
														|  | 
 |  | +  "#A9DB32",
 | 
											
												
													
														|  | 
 |  | +  "#6151F1",
 | 
											
												
													
														|  | 
 |  | +];
 | 
											
												
													
														|  |  export default {
 |  |  export default {
 | 
											
												
													
														|  |    props: {},
 |  |    props: {},
 | 
											
												
													
														|  |    data() {
 |  |    data() {
 | 
											
												
													
														|  |      return {
 |  |      return {
 | 
											
												
													
														|  | 
 |  | +      loading: false,
 | 
											
												
													
														|  |        tab: 0,
 |  |        tab: 0,
 | 
											
												
													
														|  |        imgs: {
 |  |        imgs: {
 | 
											
												
													
														|  |          loc: require("../../../../static/images/overview/icon_yrkkg.png"),
 |  |          loc: require("../../../../static/images/overview/icon_yrkkg.png"),
 | 
											
												
													
														|  | -
 |  | 
 | 
											
												
													
														|  |          zd1: require("../../../../static/images/overview/icon_yrkkg.png"),
 |  |          zd1: require("../../../../static/images/overview/icon_yrkkg.png"),
 | 
											
												
													
														|  |        },
 |  |        },
 | 
											
												
													
														|  |        orgnList: [
 |  |        orgnList: [
 | 
											
										
											
												
													
														|  | @@ -160,10 +175,10 @@ export default {
 | 
											
												
													
														|  |      pie,
 |  |      pie,
 | 
											
												
													
														|  |    },
 |  |    },
 | 
											
												
													
														|  |    mounted() {
 |  |    mounted() {
 | 
											
												
													
														|  | -    this.initEcharts();
 |  | 
 | 
											
												
													
														|  | 
 |  | +    // this.initEcharts();
 | 
											
												
													
														|  |    },
 |  |    },
 | 
											
												
													
														|  |    methods: {
 |  |    methods: {
 | 
											
												
													
														|  | -    echartClickTitle(name){
 |  | 
 | 
											
												
													
														|  | 
 |  | +    echartClickTitle(name) {
 | 
											
												
													
														|  |        // console.log(name,'-------------------------');
 |  |        // console.log(name,'-------------------------');
 | 
											
												
													
														|  |      },
 |  |      },
 | 
											
												
													
														|  |      changeData(name, updata) {
 |  |      changeData(name, updata) {
 | 
											
										
											
												
													
														|  | @@ -174,9 +189,10 @@ export default {
 | 
											
												
													
														|  |        this.getData();
 |  |        this.getData();
 | 
											
												
													
														|  |      },
 |  |      },
 | 
											
												
													
														|  |      getData() {
 |  |      getData() {
 | 
											
												
													
														|  | -      this.$emit("updateParent", "loading", true);
 |  | 
 | 
											
												
													
														|  | 
 |  | +      this.loading = true;
 | 
											
												
													
														|  |        this.Getzzlx();
 |  |        this.Getzzlx();
 | 
											
												
													
														|  |        this.GetOverview();
 |  |        this.GetOverview();
 | 
											
												
													
														|  | 
 |  | +      this.GetjxydList();
 | 
											
												
													
														|  |        this.Getjxyd();
 |  |        this.Getjxyd();
 | 
											
												
													
														|  |      },
 |  |      },
 | 
											
												
													
														|  |  
 |  |  
 | 
											
										
											
												
													
														|  | @@ -202,7 +218,7 @@ export default {
 | 
											
												
													
														|  |          id: this.region,
 |  |          id: this.region,
 | 
											
												
													
														|  |        }).then((res) => {
 |  |        }).then((res) => {
 | 
											
												
													
														|  |          this.sdata = res.data.length ? res.data[0] : {};
 |  |          this.sdata = res.data.length ? res.data[0] : {};
 | 
											
												
													
														|  | -        this.$emit("updateParent", "loading", false);
 |  | 
 | 
											
												
													
														|  | 
 |  | +        this.loading = false;
 | 
											
												
													
														|  |        });
 |  |        });
 | 
											
												
													
														|  |      },
 |  |      },
 | 
											
												
													
														|  |      Getjxyd() {
 |  |      Getjxyd() {
 | 
											
										
											
												
													
														|  | @@ -211,7 +227,25 @@ export default {
 | 
											
												
													
														|  |          id: this.region,
 |  |          id: this.region,
 | 
											
												
													
														|  |        }).then((res) => {
 |  |        }).then((res) => {
 | 
											
												
													
														|  |          this.jxyddata = res.data || {};
 |  |          this.jxyddata = res.data || {};
 | 
											
												
													
														|  | -        this.$emit("updateParent", "loading", false);
 |  | 
 | 
											
												
													
														|  | 
 |  | +        this.loading = false;
 | 
											
												
													
														|  | 
 |  | +      });
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    GetjxydList() {
 | 
											
												
													
														|  | 
 |  | +      QueryList({
 | 
											
												
													
														|  | 
 |  | +        jscType: "qytuzz_sdzl_ydzlqk_jxyd",
 | 
											
												
													
														|  | 
 |  | +        id: this.region,
 | 
											
												
													
														|  | 
 |  | +      }).then((res) => {
 | 
											
												
													
														|  | 
 |  | +        res.data.forEach((yd, index) => {
 | 
											
												
													
														|  | 
 |  | +          yd.name = yd.key;
 | 
											
												
													
														|  | 
 |  | +          yd.label = { color: color[index] };
 | 
											
												
													
														|  | 
 |  | +        });
 | 
											
												
													
														|  | 
 |  | +        this.initEcharts({
 | 
											
												
													
														|  | 
 |  | +          toolTip: true,
 | 
											
												
													
														|  | 
 |  | +          title: "用地占比",
 | 
											
												
													
														|  | 
 |  | +          unit: "公顷",
 | 
											
												
													
														|  | 
 |  | +          data: res.data,
 | 
											
												
													
														|  | 
 |  | +        });
 | 
											
												
													
														|  | 
 |  | +        this.loading = false;
 | 
											
												
													
														|  |        });
 |  |        });
 | 
											
												
													
														|  |      },
 |  |      },
 | 
											
												
													
														|  |      changeCharts(e) {},
 |  |      changeCharts(e) {},
 | 
											
										
											
												
													
														|  | @@ -220,41 +254,32 @@ export default {
 | 
											
												
													
														|  |          this.$refs[`echartRef${id}`].setOptions(data);
 |  |          this.$refs[`echartRef${id}`].setOptions(data);
 | 
											
												
													
														|  |        });
 |  |        });
 | 
											
												
													
														|  |      },
 |  |      },
 | 
											
												
													
														|  | -    initEcharts() {
 |  | 
 | 
											
												
													
														|  | 
 |  | +    initEcharts(payload) {
 | 
											
												
													
														|  | 
 |  | +      console.log(payload);
 | 
											
												
													
														|  |        this.myChart = echarts.init(this.$refs.second_pie);
 |  |        this.myChart = echarts.init(this.$refs.second_pie);
 | 
											
												
													
														|  | -      const payload = {
 |  | 
 | 
											
												
													
														|  | -        id: "left-center-1",
 |  | 
 | 
											
												
													
														|  | -        title: "年龄占比",
 |  | 
 | 
											
												
													
														|  | -        toolTip: true,
 |  | 
 | 
											
												
													
														|  | -        data: {
 |  | 
 | 
											
												
													
														|  | -          total: "4.38",
 |  | 
 | 
											
												
													
														|  | -          data: ["0.59", "0", "3.02", "0.55", "0.22"],
 |  | 
 | 
											
												
													
														|  | -          x: ["占用草地", "占用耕地", "占用林地", "占用园地", "占用其他农用地"],
 |  | 
 | 
											
												
													
														|  | -        },
 |  | 
 | 
											
												
													
														|  | -      };
 |  | 
 | 
											
												
													
														|  | 
 |  | +      // const payload = {
 | 
											
												
													
														|  | 
 |  | +      //   id: "left-center-1",
 | 
											
												
													
														|  | 
 |  | +      //   title: "年龄占比",
 | 
											
												
													
														|  | 
 |  | +      //   toolTip: true,
 | 
											
												
													
														|  | 
 |  | +      //   data: {
 | 
											
												
													
														|  | 
 |  | +      //     total: "4.38",
 | 
											
												
													
														|  | 
 |  | +      //     data: ["0.59", "0", "3.02", "0.55", "0.22"],
 | 
											
												
													
														|  | 
 |  | +      //     x: ["占用草地", "占用耕地", "占用林地", "占用园地", "占用其他农用地"],
 | 
											
												
													
														|  | 
 |  | +      //   },
 | 
											
												
													
														|  | 
 |  | +      // };
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -      let data = [];
 |  | 
 | 
											
												
													
														|  | 
 |  | +      // let data = [];
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -      const color = [
 |  | 
 | 
											
												
													
														|  | -        "#6172D3",
 |  | 
 | 
											
												
													
														|  | -        "#F5A539",
 |  | 
 | 
											
												
													
														|  | -        "#FED969",
 |  | 
 | 
											
												
													
														|  | -        "#469AE3",
 |  | 
 | 
											
												
													
														|  | -        "#F97A3C",
 |  | 
 | 
											
												
													
														|  | -        "#2FD9F2",
 |  | 
 | 
											
												
													
														|  | -        "#A9DB32",
 |  | 
 | 
											
												
													
														|  | -        "#6151F1",
 |  | 
 | 
											
												
													
														|  | -      ];
 |  | 
 | 
											
												
													
														|  | -      payload.data.x.forEach((item, index) => {
 |  | 
 | 
											
												
													
														|  | -        data.push({
 |  | 
 | 
											
												
													
														|  | -          value: payload.data.data[index],
 |  | 
 | 
											
												
													
														|  | -          name: item,
 |  | 
 | 
											
												
													
														|  | -          label: { color: color[index] },
 |  | 
 | 
											
												
													
														|  | -        });
 |  | 
 | 
											
												
													
														|  | -      });
 |  | 
 | 
											
												
													
														|  | 
 |  | +      // payload.data.x.forEach((item, index) => {
 | 
											
												
													
														|  | 
 |  | +      //   data.push({
 | 
											
												
													
														|  | 
 |  | +      //     value: payload.data.data[index],
 | 
											
												
													
														|  | 
 |  | +      //     name: item,
 | 
											
												
													
														|  | 
 |  | +      //     label: { color: color[index] },
 | 
											
												
													
														|  | 
 |  | +      //   });
 | 
											
												
													
														|  | 
 |  | +      // });
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -      const tooltip = payload.toolTip !== undefined ? payload.toolTip : true;
 |  | 
 | 
											
												
													
														|  | -      let countdata = payload.data.data.reduce((a, b) => Number(a) + Number(b));
 |  | 
 | 
											
												
													
														|  | 
 |  | +      // const tooltip = payload.toolTip !== undefined ? payload.toolTip : true;
 | 
											
												
													
														|  | 
 |  | +      // let countdata = payload.data.data.reduce((a, b) => Number(a) + Number(b));
 | 
											
												
													
														|  |        let option = {
 |  |        let option = {
 | 
											
												
													
														|  |          backgroundColor: "transparent",
 |  |          backgroundColor: "transparent",
 | 
											
												
													
														|  |          grid: {
 |  |          grid: {
 | 
											
										
											
												
													
														|  | @@ -265,7 +290,7 @@ export default {
 | 
											
												
													
														|  |            containLabel: true,
 |  |            containLabel: true,
 | 
											
												
													
														|  |          },
 |  |          },
 | 
											
												
													
														|  |          tooltip: {
 |  |          tooltip: {
 | 
											
												
													
														|  | -          show: tooltip,
 |  | 
 | 
											
												
													
														|  | 
 |  | +          show: true,
 | 
											
												
													
														|  |            backgroundColor: "rgba(9, 30, 60, 0.6)",
 |  |            backgroundColor: "rgba(9, 30, 60, 0.6)",
 | 
											
												
													
														|  |            extraCssText: "box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;",
 |  |            extraCssText: "box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;",
 | 
											
												
													
														|  |            borderWidth: 0,
 |  |            borderWidth: 0,
 | 
											
										
											
												
													
														|  | @@ -300,7 +325,7 @@ export default {
 | 
											
												
													
														|  |          },
 |  |          },
 | 
											
												
													
														|  |          series: [
 |  |          series: [
 | 
											
												
													
														|  |            {
 |  |            {
 | 
											
												
													
														|  | -            name: payload.title,
 |  | 
 | 
											
												
													
														|  | 
 |  | +            name: "",
 | 
											
												
													
														|  |              type: "pie",
 |  |              type: "pie",
 | 
											
												
													
														|  |              radius: ["55%", "75%"],
 |  |              radius: ["55%", "75%"],
 | 
											
												
													
														|  |              minAngle: 8,
 |  |              minAngle: 8,
 | 
											
										
											
												
													
														|  | @@ -336,10 +361,15 @@ export default {
 | 
											
												
													
														|  |                  },
 |  |                  },
 | 
											
												
													
														|  |                },
 |  |                },
 | 
											
												
													
														|  |              },
 |  |              },
 | 
											
												
													
														|  | -            data,
 |  | 
 | 
											
												
													
														|  | 
 |  | +            data: [],
 | 
											
												
													
														|  |            },
 |  |            },
 | 
											
												
													
														|  |          ],
 |  |          ],
 | 
											
												
													
														|  |        };
 |  |        };
 | 
											
												
													
														|  | 
 |  | +      option.tooltip = payload.toolTip || true;
 | 
											
												
													
														|  | 
 |  | +      option.series[0].name = payload.title;
 | 
											
												
													
														|  | 
 |  | +      option.series[0].label.formatter = `{b}\n{a|{c}${payload.unit}}`;
 | 
											
												
													
														|  | 
 |  | +      option.series[0].data = payload.data;
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  |        this.myChart.setOption(option);
 |  |        this.myChart.setOption(option);
 | 
											
												
													
														|  |      },
 |  |      },
 | 
											
												
													
														|  |    },
 |  |    },
 |