试点目标面板

src/views/LandConsolidation/components/organize.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="OrganizeCon">
+    <div class="tdTitle">试点目标</div>
+    <div class="echars">
+      <pie unit="亩" class="pie_echart" ref="echartRef0"></pie>
+    </div>
+    <!-- <div class="content">
+      <div class="item" v-for="(sd, index) in orgnList" :key="index">
+        <div class="text">
+          <p>{{ sd.name }}</p>
+          <span class="cvalue">{{ (sdata.area || 0).toFixed(2) }} </span>
+          <span class="unit">{{ sd.unit }}</span>
+        </div>
+      </div>
+    </div> -->
+    <div class="content">
+      <div class="item" v-for="(sd, index) in orgnList" :key="index">
+        <div class="text">
+          <p>{{ sd.name }}</p>
+          <span class="cvalue">{{ (sdata.area || 0).toFixed(2) }} </span>
+          <span class="unit">{{ sd.unit }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="echars">
+      <div class="echartTitle">
+        <div class="block-title">建设用地整理情况</div>
+      </div>
+      <div class="JSContent">
+        <div class="jsitem">
+          <p class="tvalue">+0.72</p>
+          <p>建设用地变化</p>
+        </div>
+        <div class="itemCon" style="width: 55%">
+          <span
+            ><span class="font_color">整治前建设用地</span
+            ><span style="padding: 0 3px">{{ 20.88 }}</span> 公顷</span
+          >
+          <span
+            ><span class="font_color">整治后建设用地</span
+            ><span style="padding: 0 3px">{{ 20.88 }}</span
+            >公顷</span
+          >
+        </div>
+      </div>
+    </div>
+    <div class="cjfkCon echars">
+      <div class="echartTitle">
+        <div class="block-title">拆旧复垦</div>
+      </div>
+    </div>
+    <div class="cjfkList itemCon">
+      <span v-for="(item,i) in cjfkList" :key="i"
+        ><span class="font_color">{{item.name}}</span
+        ><span style="padding: 0 3px">{{ item.area }}</span> {{ item.unit }}</span
+      >
+    </div>
+  </div>
+</template>
+  
+  <script>
+import pie from "@/components/echartsTemplate/pie.vue";
+import { overview, district, reason } from "@/api/Idleland.js";
+export default {
+  props: {},
+  data() {
+    return {
+      sdata: { suspected: {}, confirm: {}, disposal: {} },
+      tab: 0,
+      orgnList: [
+        { name: "新增耕地", prop: "suspected", unit: "公顷" },
+        { name: "新增永久基本农田", prop: "confirm", unit: "公顷" },
+        { name: "提质改造", prop: "disposal", unit: "公顷" },
+        { name: "生态修复", prop: "disposal", unit: "公顷" },
+        { name: "新增生态用地", prop: "disposal", unit: "公顷" },
+      ],
+      sdata:{},
+      cjfkList: [
+        { name: "拟拆旧面积", area: "10.05", unit: "公顷" },
+        { name: "复垦为耕地", area: "0", unit: "公顷" },
+        { name: "拆迁房屋", area: "196", unit: "幢" },
+        { name: "复垦为种植园地", area: "196", unit: "公顷" },
+        { name: "动迁居民", area: "0.001", unit: "户" },
+        { name: "复垦为林草地", area: "74", unit: "公顷" },
+        { name: "动迁人口", area: "3.49", unit: "人" },
+        { name: "复垦为其他农用地", area: "315", unit: "公顷" },
+      ],
+    };
+  },
+  components: {
+    pie,
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    changeData(name, updata) {
+      this[name] = updata;
+    },
+    regionChange(region) {
+      this.region = region;
+      this.getData();
+    },
+    getData() {
+      this.$emit("updateParent", "loading", true);
+      this.params = { districtCode: this.region };
+      this.GetOverview();
+
+      this.GetSumList();
+    },
+    GetOverview() {
+      overview(this.params).then((res) => {
+        this.sdata = res.data || {};
+        this.$emit("updateParent", "loading", false);
+      });
+    },
+    GetSumList() {
+      reason(this.params).then((res) => {
+        res.data.map((a) => {
+          a.name = a.reason;
+          a.value = a.area.toFixed(2);
+        });
+        let redPercent = 60;
+        let bluePercent = 40;
+        const background = `linear-gradient(to right,#DFE15A ${redPercent}%,#62ADED   ${bluePercent}%)`;
+        //   this.$refs.tzRef.style.background = background;
+        this.setEchart({ data: res.data, type: '"horizontal"' }, 0);
+        this.$emit("updateParent", "loading", false);
+      });
+    },
+    changeCharts(e) {},
+    setEchart(data, id) {
+      this.$nextTick(() => {
+        this.$refs[`echartRef${id}`].setOptions(data);
+      });
+    },
+  },
+  watch: {
+    region(newValue) {
+      console.log(newValue, "---");
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.OrganizeCon {
+  height: 100%;
+  padding: 1rem 10px 1rem 1rem;
+  .content {
+    width: 100%;
+    height: 100px;
+    .item {
+      width: 32%;
+      // height: 100px;
+      display: inline-block;
+      position: relative;
+    }
+    .text {
+      display: inline-block;
+      // border: #00FFFF 1px solid;
+      width: 100%;
+      margin-bottom: 4px;
+      text-align: center;
+      margin-left: 0.3rem;
+      .cvalue {
+        font-family: "Arial Negreta", "Arial Normal", "Arial";
+        font-weight: 700;
+        font-style: normal;
+        color: #68f4fb;
+      }
+      .unit {
+        color: #fff;
+      }
+    }
+  }
+
+  .echartlist {
+    width: 100%;
+    height: calc(100% - 120px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    .block-title {
+      width: calc(100% - 130px) !important;
+    }
+  }
+  .echart {
+    height: 160px !important;
+  }
+  .pie_echart {
+    height: 140px;
+  }
+  .tzdiv {
+    height: 20px;
+    margin: 5px 20px;
+  }
+  .JSContent {
+    height: 62px;
+    background: rgba(100, 218, 255, 0.1);
+    display: flex;
+    justify-content: space-between;
+
+    .jsitem {
+      width: 40%;
+      text-align: center;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 1;
+      .tvalue {
+        height: 36px;
+        font-weight: 700;
+        color: #ec808d;
+        font-size: 18px;
+        line-height: 36px;
+      }
+    }
+  }
+  .itemCon {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-items: center;
+    span {
+      padding: 0 0.4rem;
+      display: inline-block;
+      // background: rgba(100, 218, 255, 0.1);
+      // border-radius: 2px 14px 2px 14px;
+      color: #64daff;
+      font-size: 13px;
+    }
+
+    .font_color {
+      // width: 100px;
+      color: white;
+    }
+  }
+  .CommonList {
+  }
+}
+</style>

src/views/LandConsolidation/index.vue

@@ -63,10 +63,16 @@
       </div>
     </div>
     <Details ref="detailModal"></Details>
+
+
+    <div class="innerContainer rightPane newContainer" v-show="activeIndex == 0">
+      <Organize></Organize>
+    </div>
   </div>
 </template>
 
 <script>
+import Organize from "./components/organize.vue";
 import Sdgk from "./components/sdgk.vue";
 import Qhdb from "./components/qhdb.vue";
 import List from "./components/list.vue";
@@ -80,6 +86,7 @@ export default {
     Qhdb,
     List,
     // Details,
+    Organize
   },
   data() {
     return {
@@ -215,6 +222,10 @@ export default {
     left: 480px;
   }
 }
+.newContainer{
+  height: 758px !important;
+  top: 70px !important;
+}
 </style>
 <style lang="scss">
 .LandConsolidation {
@@ -232,5 +243,6 @@ export default {
     background: transparent;
   }
 }
+
 @import "../complianceAnalysis/ghzc.scss";
 </style>

src/views/complianceAnalysis/ghzc.scss

@@ -18,7 +18,7 @@
     }
 
     .rightPane {
-        right: 10px;
+        right: 20px;
     }
 
     .Pangetitle {