山水工程

src/views/LandscapeProject/index.vue

@@ -8,7 +8,7 @@
         </span>
       </template>
       <template v-slot:all>
-        <div class="xz_box">
+        <div class="xz_box" v-show="!islist">
           <div class="content">
             <div class="item" v-for="(sd, index) in sdlist" :key="index">
               <div class="icon">
@@ -48,13 +48,19 @@
                 ></div> -->
               </div>
               <!-- v-show="eitem.isshow" -->
-              <!-- <pie
-                unit="亩"
+              <ThreeStackedBarAndLine
+                v-if="i == 1"
                 class="echart"
-                @echartClick="echartClick"
-                :ref="`echartRef${i}`"
-              ></pie> -->
-              <bar class="echart" :ref="`echartRef${i}`"></bar>
+                ref="echartRef1"
+              ></ThreeStackedBarAndLine>
+              <pie
+                v-else-if="i == 2"
+                unit="亿元"
+                class="echart"
+                ref="echartRef2"
+              ></pie>
+              <div v-else class="echart"></div>
+              <!-- <bar class="echart" :ref="`echartRef${i}`"></bar> -->
             </div>
           </div>
         </div>
@@ -86,15 +92,17 @@
 <script>
 import pie from "@/components/echartsTemplate/pie.vue";
 import bar from "@/components/echartsTemplate/bar.vue";
+import ThreeStackedBarAndLine from "@/views/cockpit/common/ThreeStackedBarAndLine.vue";
 import Boxcommon from "@/views/cockpit/common/VectorSpace/BoxCommonVector.vue";
 import CockpitVector from "@/components/Query/clickQuery/CockpitVector.vue";
-import { QueryOne } from "../../api/cockpitNew";
+import { QueryOne, QueryList } from "../../api/cockpitNew";
 export default {
   name: "LandscapeProject",
   components: {
     Boxcommon,
     pie,
     bar,
+    ThreeStackedBarAndLine,
     CockpitVector,
   },
   data() {
@@ -115,6 +123,11 @@ export default {
       ],
       tab: "num",
       activeTabs: "base",
+      jdData: {
+        legend_data: ["治理面积（公顷）", "项目数量", "投资金额（亿元）"],
+        x_data: [],
+        line_data: [],
+      },
     };
   },
   created() {},
@@ -148,22 +161,19 @@ export default {
       this.islist = !this.islist;
       if (!this.islist) {
         this.echarts.forEach((ei, i) => {
-          // let data = [
-          //   { name: "XXX类型", value: "6" },
-          //   { name: "XXX类型1", value: "6" },
-          // ];
-          // this.setEchart({ data, type: '"horizontal"', total: 12 }, i);
-          let a = {
-            xdata: ["===a"],
-            data: [10],
-          };
-          this.setEchart(a, i);
+          // let a = {
+          //   xData: ["===a"],
+          //   yData: [10],
+          // };
+          // this.setEchart(a, i);
         });
       }
     },
     getData() {
       this.draw_vector();
       this.GetQueryOne();
+      this.GetQueryList();
+      this.GetSumList();
     },
     GetQueryOne() {
       let params = {
@@ -174,6 +184,29 @@ export default {
         this.sdata = res.data || {};
       });
     },
+    GetQueryList() {
+      this.jdData.x_data = [];
+      this.jdData.line_data = [];
+      this.jdData.result = [[], []];
+      let params = { jscType: `jsc_stxf_ssxf_jdfq`, id: 4602 };
+      QueryList(params).then((res) => {
+        res.data.forEach((jdData) => {
+          this.jdData.x_data.push(jdData.dj);
+          this.jdData.line_data.push(jdData.zlmj);
+          this.jdData.result[0].push(jdData.dj_number);
+          this.jdData.result[1].push(jdData.tzje);
+        });
+        this.setEchart(this.jdData, 1);
+      });
+    },
+    GetSumList() {
+      let data = [
+        { name: "中央资金", value: "13.45" },
+        { name: "省级资金", value: "5" },
+        { name: "市级资金", value: "18.67" },
+      ];
+      this.setEchart({ data, type: '"horizontal"', total: 37.12 }, 2);
+    },
     setEchart(data, id) {
       this.$nextTick(() => {
         this.$refs[`echartRef${id}`][0].setOptions(data);