耕地保护

src/views/farmlandProtection/gdzl/index.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="sdgk">
+    <div class="tdTitle">试点概况</div>
+    <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[sd.prop] || 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 class="selectTab">
+          <el-select
+            v-model="tab"
+            placeholder="请选择"
+            :popper-append-to-body="false"
+            @change="Getxzxx()"
+          >
+            <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">
+        <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">{{ (xzdata[sd.prop] || 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>
+      <div class="content ztzc">
+        <div class="text">
+          <span>总投资</span>
+          <span class="cvalue">{{ (tzdata.jhtz || 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.czjhtz || 0).toFixed(2) }} </span>
+            <span class="unit">万元</span>
+            <p>{{ (tzdata.czratio || 0).toFixed(2) }}%</p>
+          </div>
+        </div>
+        <div class="item"></div>
+        <div class="item">
+          <div class="text">
+            <p>社会投资</p>
+            <span class="cvalue">{{ (tzdata.shjhtz || 0).toFixed(2) }} </span>
+            <span class="unit">万元</span>
+            <p>{{ (tzdata.sjratio || 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";
+import { QueryOne, QueryList } from "@/api/cockpitNew";
+import { legends } from "./config.js";
+import { loadGeoJSON } from "@/utils/MapHelper/help.js";
+export default {
+  props: {},
+  data() {
+    return {
+      region: "",
+      sdata: {},
+      sdlist: [
+        { name: "试点区域", prop: "试点面积", unit: "公顷" },
+        { name: "整治区域", prop: "整治面积", unit: "公顷" },
+        { name: "涉及村庄", prop: "村庄个数", unit: "个" },
+      ],
+      tab: "sd",
+      options: [
+        { name: "试点区域", value: "sd" },
+        { name: "整治区域", value: "zzqy" },
+      ],
+      xzlist: [
+        { name: "农用地面积", prop: "nydmk", unit: "公顷" },
+        { name: "建设用地面积", prop: "jsydmj", unit: "公顷" },
+        { name: "未利用地面积", prop: "wlytmj", unit: "公顷" },
+        { name: "耕地面积", prop: "gd", unit: "公顷" },
+        { name: "永久基本农田", prop: "yjjbnt", unit: "公顷" },
+        { name: "生态红线划定", prop: "sthxhdmj", unit: "公顷" },
+      ],
+      xzdata: {},
+      tzdata: {},
+    };
+  },
+  components: {
+    pie,
+  },
+  mounted() {},
+  methods: {
+    changeData(name, updata) {
+      this[name] = updata;
+    },
+    regionChange(region) {
+      this.region = region;
+      this.getData();
+    },
+    getData() {
+      this.$emit("updateParent", "loading", true);
+      this.Getzzxm();
+      this.Getxzxx();
+      this.Getsdtz();
+      this.Getkjxx();
+      this.Getkjxx();
+      this.Getkjxx();
+      this.Getkjxx();
+    },
+    async Getzzxm() {
+      let sdres = await QueryOne({
+        jscType: "qytuzz_sdzl_sdqk",
+        id: this.region,
+      });
+      this.sdata = sdres.data;
+      let { data } = await QueryList({
+        jscType: "jsc_stxf_ywfl_tdzz",
+        id: this.region,
+      });
+      let num = 0;
+      data.forEach((res) => {
+        res.name = res.zzlx;
+        res.value = res.xmsl;
+        num += res.xmsl;
+      });
+      this.setEchart(
+        { data, type: '"horizontal"', title: { text: "整治项目", num } },
+        0
+      );
+    },
+    async Getxzxx() {
+      let res = await QueryOne({
+        jscType: `qytuzz_sdzl_xzxx_${this.tab}`,
+        id: this.region,
+      });
+      this.xzdata = res.data;
+      this.$emit("updateParent", "loading", false);
+    },
+    async Getsdtz() {
+      let { data } = await QueryOne({
+        jscType: "qytuzz_sdzl_sdtz",
+        id: this.region,
+      });
+      let czratio = data.jhtz ? (data.czjhtz / data.jhtz) * 100 : 0;
+      let sjratio = data.jhtz ? (data.shjhtz / data.jhtz) * 100 : 0;
+      this.tzdata = { ...data, czratio, sjratio };
+      const background = `linear-gradient(to right,#DFE15A ${czratio}%,#62ADED 0%)`;
+      this.$refs.tzRef.style.background = background;
+      this.$emit("updateParent", "loading", false);
+    },
+    async Getkjxx() {
+      let res = await QueryList({
+        jscType: "qytuzz_sdzl_kjxx",
+        id: this.region,
+      });
+      this.active_tableData(res.data);
+    },
+    active_tableData(newVal) {
+      newVal.forEach((res, index) => {
+        let color = legends[res.type].color;
+        if (res.geom)
+          loadGeoJSON(res.geom, color, { isfly: true }, (data) => {
+            geoSources[res.id] = data;
+            data.name = "LandConsolidation";
+            // data.entities.values.forEach((entity) => {
+            //   entity.properties = { type: "图斑上图", id: res.id };
+            // });
+          });
+      });
+    },
+    reset() {
+      if (!window.viewer) return;
+      viewer.entities.removeAll();
+      viewer.dataSources.removeAll();
+      // viewer.dataSources._dataSources.forEach((das) => {
+      //   if (das.name == "LandConsolidation") {viewer.dataSources.remove(das);}
+      // });
+    },
+    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: 190px;
+    .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 {
+    width: 400px;
+    height: 180px;
+  }
+  .tzdiv {
+    height: 20px;
+    margin: 5px 20px;
+    // background: #62aded;
+  }
+}
+</style>

src/views/farmlandProtection/indexNew.vue

@@ -15,13 +15,38 @@
         </ul>
       </div>
     </div>
+    <div class="innerContainer leftPane" v-drag v-show="activeIndex != 3">
+      <h2 class="Pangetitle darg-div el-col">
+        <span class="pange_text">{{ checkList[activeIndex].title }} </span>
+        <i class="document el-icon-document" @click="drawer = !drawer"></i>
+        <div class="region">
+          <!-- clearable -->
+          <el-cascader
+            v-model="xzqh"
+            :show-all-levels="false"
+            :options="store.state.region_tree"
+            @change="regionChange"
+            placeholder="行政区"
+            size="mini"
+            :props="{
+              checkStrictly: true,
+              expandTrigger: 'hover',
+              emitPath: false,
+            }"
+          ></el-cascader>
+        </div>
+      </h2>
+      <div class="xz_box">
+        <Gdzl v-loading="loading" @updateParent="changeData" ref="gdzl"></Gdzl>
+      </div>
+    </div>
     <Fzyp v-show="activeIndex == 3"></Fzyp>
   </div>
 </template>
 
 <script>
 // import Organize from "./components/organize.vue";
-// import Sdgk from "./components/sdgk.vue";
+import Gdzl from "./gdzl/index.vue";
 // import Qhdb from "./components/qhdb.vue";
 // import List from "./components/list.vue";
 // import preCheck from "./components/preCheck.vue";
@@ -33,7 +58,7 @@ import * as pick_cockpit_vector from "@/components/Query/clickQuery/pick_cockpit
 export default {
   name: "farmlandProtectionNew",
   components: {
-    // Sdgk,
+    Gdzl,
     // Qhdb,
     // List,
     // preCheck,
@@ -50,7 +75,7 @@ export default {
       drawer: false,
       xzqh: "",
       checkList: [
-        { title: "耕地" },
+        { title: "耕地总览" },
         { title: "永久基本农田" },
         { title: "监测图斑" },
         { title: "辅助研判" },
@@ -89,9 +114,9 @@ export default {
     },
     onClick(val) {
       this.activeIndex = val;
-      if (val != 0) this.$refs.sdgk.reset();
+      if (val != 0) this.$refs.gdzl.reset();
       if (val == 0) {
-        this.$refs.sdgk.regionChange(this.xzqh);
+        this.$refs.gdzl.regionChange(this.xzqh);
         this.$refs.qhdb.regionChange(this.xzqh);
         this.$refs.organize.regionChange(this.xzqh);
       }