山水工程-工程类型,工程进度修改

src/views/LandscapeProject/index.vue

@@ -24,7 +24,7 @@
             <div class="echars">
               <div class="echartTitle">
                 <div class="block-title">工程类型</div>
-                <div class="selectTab">
+                <!-- <div class="selectTab">
                   <el-select
                     v-model="tab"
                     placeholder="请选择"
@@ -39,24 +39,36 @@
                     >
                     </el-option>
                   </el-select>
-                </div>
+                </div> -->
               </div>
-              <div class="echart"></div>
+              <!-- <div class="echart"> -->
+              <pie
+                unit="公顷"
+                class="echart"
+                ref="echartRef0"
+                @echartClickTitle="(name) => echartClickTitle(name)"
+              ></pie>
+              <!-- </div> -->
             </div>
             <div class="echars">
               <div class="echartTitle">
                 <div class="block-title">工程进度</div>
               </div>
-              <ThreeStackedBarAndLine
+              <!-- <ThreeStackedBarAndLine
+                class="echart"
+                ref="echartRef1"
+              ></ThreeStackedBarAndLine> -->
+              <pie
+                unit="公顷"
                 class="echart"
                 ref="echartRef1"
-              ></ThreeStackedBarAndLine>
+              ></pie>
             </div>
           </div>
         </div>
       </template>
     </Boxcommon>
-    <div class="innerContainer rightPane" v-show="!islist" v-drag>
+    <!-- <div class="innerContainer rightPane" v-show="!islist" v-drag>
       <h2 class="Pangetitle darg-div">
         <span class="pange_text">山水工程总览</span>
       </h2>
@@ -80,7 +92,7 @@
           <div class="echart"></div>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -133,6 +145,9 @@ export default {
     changeData(name, updata) {
       this[name] = updata;
     },
+    echartClickTitle(name) {
+      // console.log(name,'-------------------------');
+    },
     draw_vector() {
       store.setCockpit_vector({
         title: "山水工程项目",
@@ -167,8 +182,10 @@ export default {
     getData() {
       this.draw_vector();
       this.GetQueryOne();
-      this.GetQueryList();
-      this.GetSumList();
+      // this.GetQueryList();
+      // this.GetSumList();
+      this.GetTypeList();
+      this.GetAreaList()
     },
     GetQueryOne() {
       let params = {
@@ -195,19 +212,49 @@ export default {
         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);
-    },
+    // 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}`].setOptions(data);
       });
     },
+    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
+      );
+    },
+    GetAreaList() {
+      let data = [
+        { name: "0-20", value: "7483.47" },
+        { name: "20-40", value: "1714.96" },
+        { 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)
+      this.setEchart(
+        { data, type: '"horizontal"', title: { text: "工程总面积", num} },
+        1
+      );
+    },
   },
   watch: {
     // activeTabs(newValue) {},