山水工程类型数量和面积接口联调

src/views/LandscapeProject/index.vue

@@ -23,7 +23,7 @@
           <div class="echartlist">
             <div class="echars">
               <div class="echartTitle">
-                <div class="block-title">工程类型</div>
+                <div class="block-title">工程类型数量</div>
                 <!-- <div class="selectTab">
                   <el-select
                     v-model="tab"
@@ -43,7 +43,7 @@
               </div>
               <!-- <div class="echart"> -->
               <pie
-                unit="公顷"
+                unit="个"
                 class="echart"
                 ref="echartRef0"
                 @echartClickTitle="(name) => echartClickTitle(name)"
@@ -52,17 +52,13 @@
             </div>
             <div class="echars">
               <div class="echartTitle">
-                <div class="block-title">工程进度</div>
+                <div class="block-title">工程类型面积</div>
               </div>
               <!-- <ThreeStackedBarAndLine
                 class="echart"
                 ref="echartRef1"
               ></ThreeStackedBarAndLine> -->
-              <pie
-                unit="公顷"
-                class="echart"
-                ref="echartRef1"
-              ></pie>
+              <pie unit="公顷" class="echart" ref="echartRef1"></pie>
             </div>
           </div>
         </div>
@@ -135,6 +131,8 @@ export default {
         x_data: [],
         line_data: [],
       },
+      numberList: [],
+      areaList: [],
     };
   },
   created() {},
@@ -184,8 +182,10 @@ export default {
       this.GetQueryOne();
       // this.GetQueryList();
       // this.GetSumList();
-      this.GetTypeList();
-      this.GetAreaList()
+      this.$nextTick(() => {
+        this.GetTypeList();
+      });
+      // this.GetAreaList();
     },
     GetQueryOne() {
       let params = {
@@ -226,17 +226,47 @@ export default {
       });
     },
     GetTypeList() {
-      let data = [
-        { name: "海岸带与湿地生态修复", value: "13.45" },
-        { name: "农田生态环境质量综合提升", value: "5" },
-        { name: "热带雨林季雨林功能提升和小流域水土保持", value: "18.67" },
-        { name: "入海河流水系连通与河岸边带生态整治", value: "8.48" },
-        { name: "重要物种栖息地与生物安全防治", value: "6.54" },
-      ];
-      this.setEchart(
-        { data, type: '"horizontal"', title: { text: "工程总数", num: 52.14 } },
-        0
-      );
+      this.numberList = [];
+      this.areaList = [];
+      let params = { jscType: `jsc_stxf_ssxf_gcfl`, id: 4602 };
+      let total = 0;
+      let num = 0;
+      QueryList(params).then((res) => {
+        if (res.success) {
+          res.data.forEach((v) => {
+            this.numberList.push({
+              name: v.gclx,
+              value: v.zlgs,
+              ids: v.ids,
+              geom: v.geom,
+            });
+            this.areaList.push({
+              name: v.gclx,
+              value: v.zlmj,
+            });
+            total += Number(v.zlgs);
+            num += Number(v.zlmj);
+          });
+          num = num.toFixed(2);
+          console.log(num, total);
+          this.setEchart(
+            {
+              data: this.numberList,
+              type: '"horizontal"',
+              title: { text: "工程类型总数", num: total },
+            },
+            0
+          );
+          this.setEchart(
+            {
+              data: this.areaList,
+              type: '"horizontal"',
+              title: { text: "工程总面积", num },
+            },
+            1
+          );
+        }
+      });
     },
     GetAreaList() {
       let data = [
@@ -245,13 +275,13 @@ export default {
         { name: "40-60", value: "2883.26" },
         { name: "60-80", value: "6024.97" },
       ];
-      let num = 0
-      data.forEach((item,i)=>{
-        num += Number(item.value)
-      })
-      num =num.toFixed(2)
+      let num = 0;
+      data.forEach((item, i) => {
+        num += Number(item.value);
+      });
+      num = num.toFixed(2);
       this.setEchart(
-        { data, type: '"horizontal"', title: { text: "工程总面积", num} },
+        { data, type: '"horizontal"', title: { text: "工程总面积", num } },
         1
       );
     },