耕地保护分析结果页面搭建

src/views/farmlandProtection/components/fxjg.vue

@@ -36,16 +36,111 @@
       </div>
       <el-button size="mini" @click="zdyModel">图表切换</el-button>
     </div>
+    <div>
+      <pie
+        class="echart"
+        unit="平方千米"
+        @echartClick="(name) => echartClick(name, item.value)"
+        :ref="`echartRef`"
+      ></pie>
+    </div>
+
+    <div class="site-title">
+      <div class="siteCon">
+        <div class="site_Icon"></div>
+        <span>套合结果</span>
+      </div>
+    </div>
+    <div class="Integration">
+      <!-- <div></div> -->
+      <div class="Integration_list">
+        <div class="listCol">
+          <div class="listText">
+            <span style="color: #fff">占压耕地图斑数</span>
+            <span color="#2d8cf0">{{ 203 }}个</span>
+          </div>
+        </div>
+        <div class="listCol">
+          <div class="listText">
+            <span style="color: #fff">占压耕地面积(㎡)</span>
+            <span color="#2d8cf0">{{ 20314.52 }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="Integration_list">
+        <div class="listCol">
+          <div class="listText">
+            <span style="color: #fff">占压永久基本农田图斑数</span>
+            <span color="#2d8cf0">{{ 203 }}个</span>
+          </div>
+        </div>
+        <div class="listCol">
+          <div class="listText">
+            <span style="color: #fff">占压永久基本农田面积(㎡)</span>
+            <span color="#2d8cf0">{{ 20314.52 }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="Integration_list">
+        <div class="listCol">
+          <div class="listText">
+            <span style="color: #fff">占压耕地图斑数</span>
+            <span color="#2d8cf0">{{ 203 }}个</span>
+          </div>
+        </div>
+        <div class="listCol">
+          <div class="listText">
+            <span style="color: #fff">占压耕地面积(㎡)</span>
+            <span color="#2d8cf0">{{ 20314.52 }}</span>
+          </div>
+        </div>
+        <div class="listCol">
+          <div class="listText">
+            <span style="color: #fff">占压耕地面积(㎡)</span>
+            <span color="#2d8cf0">{{ 20314.52 }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="Integration_list">
+        <div class="listCol">
+          <div class="listText">
+            <span style="color: #fff">占压生态保护红线图斑数</span>
+            <span color="#2d8cf0">{{ 203 }}个</span>
+          </div>
+        </div>
+        <div class="listCol">
+          <div class="listText">
+            <span style="color: #fff">占压公益林面积(㎡)</span>
+            <span color="#2d8cf0">{{ 20314.52 }}</span>
+          </div>
+        </div>
+        <div class="listCol">
+          <div class="listText">
+            <span style="color: #fff">占压自然保护地图斑数</span>
+            <span color="#2d8cf0">{{ 20314.52 }}个</span>
+          </div>
+        </div>
+        <div class="listCol">
+          <div class="listText">
+            <span style="color: #fff">占压自然保护地面积(㎡)</span>
+            <span color="#2d8cf0">{{ 20314.52 }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import pie from "@/components/echartsTemplate/pieNew.vue";
 export default {
   props: {
     fxjgObj: {
       type: Object,
     },
   },
+
+  components: { pie },
   data() {
     return {
       imgs: {
@@ -54,6 +149,35 @@ export default {
       },
     };
   },
+  methods: {
+    GetSumList() {
+      let data = [
+        { name: "中央资金", value: "13.45" },
+        { name: "省级资金", value: "5" },
+        { name: "市级资金", value: "18.67" },
+      ];
+      // this.setEchart({ data, type: '"horizontal"', total: 37.12 }, 2);
+      this.$refs[`echartRef`].setOptions({ data, type: '"horizontal"' }, 2);
+    },
+    echartClick(name, { iseyes }) {
+      console.log(name, ":name");
+      // this.reset();
+
+      // this.tableData.forEach((res) => {
+      //   const keys = Object.keys(res);
+      //   for (const key of keys) {
+      //     let value = res[key];
+      //     if (value == name) {
+      //       this.addPolygon(res.空间信息.split(";")[1], "all", "#ff0000", true);
+      //     }
+      //   }
+
+      // })
+    },
+  },
+  mounted() {
+    this.GetSumList();
+  },
 };
 </script>
 
@@ -64,12 +188,21 @@ export default {
   overflow-x: hidden;
   padding-right: 10px;
   line-height: 40px;
+  .echart {
+    // width: 19rem;
+    // height: 350px;
+    width: 387px !important;
+    height: 200px !important;
+  }
+
   .downloadDiv {
     position: relative;
+
     .xmmc {
       width: calc(100% - 60px);
       display: inline-block;
     }
+
     .export {
       width: 95px;
       height: 28px;
@@ -81,35 +214,42 @@ export default {
       right: 2px;
       bottom: 6px;
     }
+
     .text {
       color: #cddeeb;
     }
   }
+
   .divrow {
     height: 50px;
     background-color: #0f7bc875;
     display: flex;
     justify-content: space-between;
     margin-bottom: 8px;
+
     .divCol {
       // background-color: #cddeeb5a;
       width: 49%;
       display: flex;
       align-items: center;
       white-space: nowrap;
+
       .divImg {
         width: 25%;
         height: 40px;
+
         img {
           height: 2.5rem;
           width: 2.5rem;
         }
       }
+
       .divText {
         width: 75%;
         // padding-left: 0.5rem;
         display: flex;
         flex-direction: column;
+
         span {
           height: 20px;
           // background: rgba(255, 0, 0, 0.258);
@@ -119,5 +259,38 @@ export default {
       }
     }
   }
+
+  .Integration {
+    max-height: 32vh;
+    overflow: hidden;
+    overflow-y: auto;
+    .Integration_list {
+      // height: 50px;
+      background-color: #0f7bc875;
+      display: flex;
+      justify-content: space-between;
+      // margin-bottom: 8px;
+      margin-top: 8px;
+      flex-wrap: wrap;
+      padding: 10px;
+      .listCol {
+        width: 49%;
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        margin-bottom: 5px;
+        .listText {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          span {
+            height: 20px;
+            height: 20px;
+            line-height: 20px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>