试点概况

src/views/LandConsolidation/components/sdgk.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="sdgk">
+    <div class="content sdata">
+      <div class="item" v-for="(sd, index) in sdlist" :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>
+      <pie unit="亩" class="pie_echart" ref="echartRef0"></pie>
+    </div>
+    <div class="echars">
+      <div class="echartTitle">
+        <div class="block-title">现状信息</div>
+      </div>
+      <div class="content">
+        <div class="item" v-for="(sd, index) in xzlist" :key="index">
+          <div class="icon">
+            <div class="iicon" :class="sd.value"></div>
+          </div>
+          <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>
+    <div class="echars">
+      <div class="echartTitle">
+        <div class="block-title">试点投资</div>
+        <div class="selectTab">
+          <el-select
+            v-model="tab"
+            placeholder="请选择"
+            :popper-append-to-body="false"
+            @change="changeCharts"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="content ztzc">
+        <div class="text">
+          <span>总投资</span>
+          <span class="cvalue">{{ (tzdata.area || 0).toFixed(2) }} </span>
+          <span class="unit">万元</span>
+        </div>
+      </div>
+      <div class="tzdiv" ref="tzRef"></div>
+      <div class="content tzcontent">
+        <div class="item">
+          <div class="text">
+            <p>财政投资</p>
+            <span class="cvalue">{{ (tzdata.area || 0).toFixed(2) }} </span>
+            <span class="unit">万元</span>
+            <p>{{ (tzdata.area || 0).toFixed(2) }}%</p>
+          </div>
+        </div>
+        <div class="item"></div>
+        <div class="item">
+          <div class="text">
+            <p>社会投资</p>
+            <span class="cvalue">{{ (tzdata.area || 0).toFixed(2) }} </span>
+            <span class="unit">万元</span>
+            <p>{{ (tzdata.area || 0).toFixed(2) }}%</p>
+          </div>
+        </div>
+      </div>
+    </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: {} },
+      sdlist: [
+        { name: "试点区域", prop: "suspected", unit: "公顷" },
+        { name: "整治区域", prop: "confirm", unit: "公顷" },
+        { name: "涉及村庄", prop: "disposal", unit: "个" },
+      ],
+      tab: 0,
+      options: [
+        { name: "试点区域", value: 0 },
+        { name: "整治区域", value: 1 },
+      ],
+      xzlist: [
+        { name: "农用地面积", prop: "suspected", unit: "公顷" },
+        { name: "建设用地面积", prop: "confirm", unit: "公顷" },
+        { name: "未利用地面积", prop: "disposal", unit: "公顷" },
+        { name: "耕地面积", prop: "disposal", unit: "公顷" },
+        { name: "永久基本农田", prop: "disposal", unit: "公顷" },
+        { name: "生态红线划定", prop: "disposal", unit: "公顷" },
+      ],
+      tzdata: {},
+    };
+  },
+  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();
+      if (this.region == "4602") this.GetDistrict();
+      this.GetSumList();
+    },
+    GetOverview() {
+      overview(this.params).then((res) => {
+        this.sdata = res.data || {};
+        this.$emit("updateParent", "loading", false);
+      });
+    },
+    GetDistrict() {
+      this.jdData.x_data = [];
+      this.jdData.result = [[], [], [], []];
+      district(this.params).then((res) => {
+        res.data.forEach((jdData) => {
+          this.jdData.x_data.push(jdData.districtName);
+          this.jdData.result[0].push(jdData.confirmAre.toFixed(2));
+          this.jdData.result[1].push(jdData.disposalArea.toFixed(2));
+          this.jdData.result[2].push((jdData.idleRate * 100).toFixed(2));
+          this.jdData.result[3].push((jdData.disposalRate * 100).toFixed(2));
+        });
+        this.setEchart(this.jdData, 1);
+        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>
+.sdgk {
+  height: 100%;
+  .content {
+    width: 100%;
+    height: 200px;
+    .item {
+      width: 32%;
+      // height: 100px;
+      display: inline-block;
+      position: relative;
+      .icon {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+      }
+      .iicon {
+        background: no-repeat 50%;
+        background-image: url("/static/images/overview/icon_yrkkg.png");
+        width: 45px;
+        height: 45px;
+        flex: 1;
+      }
+    }
+    .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;
+      }
+    }
+  }
+  .sdata {
+    height: 50px;
+  }
+  .ztzc {
+    height: 30px;
+    line-height: 30px;
+    font-size: 16px;
+    margin-top: 10px;
+  }
+  .tzcontent {
+    height: 100px;
+  }
+
+  .echartlist {
+    width: 100%;
+    height: calc(100% - 120px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    .block-title {
+      width: calc(100% - 130px) !important;
+    }
+  }
+  .echart {
+    height: 200px !important;
+  }
+  .pie_echart {
+    height: 180px;
+  }
+  .tzdiv {
+    height: 20px;
+    margin: 5px 20px;
+  }
+}
+</style>

src/views/LandConsolidation/index.vue

@@ -43,46 +43,32 @@
           图斑详情查询
         </span> -->
       </h2>
-      <div class="xz_box"></div>
-      <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
-        <el-tab-pane label="统计总览" name="tjzl">
-          <Tjzl
-            v-loading="loading"
-            @updateParent="changeData"
-            ref="tjzl"
-          ></Tjzl>
-        </el-tab-pane>
-        <el-tab-pane label="闲置管理" name="xzgl">
-          <Xzgl
-            v-loading="loading"
-            @updateParent="changeData"
-            ref="xzgl"
-          ></Xzgl>
-        </el-tab-pane>
-      </el-tabs>
+      <div class="xz_box">
+        <Sdgk v-loading="loading" @updateParent="changeData" ref="sdgk"></Sdgk>
+        <!-- <Xzgl v-loading="loading" @updateParent="changeData" ref="xzgl"></Xzgl> -->
+      </div>
     </div>
     <Details ref="detailModal"></Details>
   </div>
 </template>
 
 <script>
-// import Tjzl from "./components/tjzl.vue";
+import Sdgk from "./components/sdgk.vue";
 // import Xzgl from "./components/xzgl.vue";
 // import Details from "./components/details.vue";
-// import TabelView from "./components/tabelView.vue";
+
 import * as pick_cockpit_vector from "@/components/Query/clickQuery/pick_cockpit_vector.js";
 export default {
-  name: "Idleland",
+  name: "LandConsolidation",
   components: {
-    // Tjzl,
+    Sdgk,
     // Xzgl,
     // Details,
-    // TabelView,
   },
   data() {
     return {
       loading: false,
-      activeTabs: "tjzl",
+      activeTabs: "sdgk",
       xzqh: "",
       checkList: [
         {
@@ -122,7 +108,7 @@ export default {
       this.$refs.detailModal.handleView(row, type);
     },
     regionChange() {
-      this.$refs.tjzl.regionChange(this.xzqh);
+      this.$refs.sdgk.regionChange(this.xzqh);
       this.$refs.xzgl.regionChange(this.xzqh);
     },
     cockpit() {
@@ -136,7 +122,7 @@ export default {
   watch: {
     activeTabs(newValue) {
       if (newValue != "xzgl") this.$refs.xzgl.reset();
-      if (newValue == "tjzl") this.$refs.tjzl.getData();
+      if (newValue == "sdgk") this.$refs.sdgk.getData();
       // if (newValue == "xzgl") this.$refs.xzgl.changeForm();
     },
     computed_vectorData(newVal) {

src/views/complianceAnalysis/ghzc.scss

@@ -191,6 +191,16 @@
             .eclose {
                 background-image: url("/static/images/ghzc/to_right.png");
             }
+
+            .el-input__inner {
+                width: 100px !important;
+                height: 30px !important;
+                font-size: 12px;
+                color: #bcd3e5;
+                // border: none;
+                background-color: transparent !important;
+                background-size: 100% 100%;
+            }
         }
 
         .echart {