Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/views/LandConsolidation/components/details.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="conViews" v-if="isShallow">
+    <div class="sm-panel sm-function-module-query" v-drag>
+      <div class="sm-panel-header">
+        <span> 项目详情 </span>
+        <i class="el-icon-close" @click="closeInster"></i>
+      </div>
+      <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
+        <el-tab-pane label="基本信息" name="jbxx">
+          <Info :data="jbxxData"></Info>
+        </el-tab-pane>
+        <el-tab-pane label="进度跟踪" name="rdxx"> </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+  <script>
+import { GetDetail } from "@/api/Idleland.js";
+import Info from "../../Idleland/components/info.vue";
+export default {
+  props: {
+    interObj: {
+      type: Object,
+    },
+  },
+  components: { Info },
+  data() {
+    return {
+      activeTabs: "jbxx",
+      isShallow: false,
+      jbxxData: [],
+      rdData: [],
+      tempdataLayerId: null,
+    };
+  },
+  mounted() {
+    // this.init();
+  },
+  methods: {
+    //关闭详情
+    closeInster() {
+      this.isShallow = false;
+    },
+
+    handleView(val, type) {
+      console.log("---",val, type)
+      this.isShallow = true;
+      this.jbxxData = [];
+      GetDetail(val.id).then((res) => {
+        if (res.statuscode == 200) {
+          // this.jbxxData = res.data;
+          Object.keys(res.data).forEach((key) => {
+            this.jbxxData.push({
+              name: key,
+              value: res.data[key],
+            });
+          });
+        } else {
+          this.$message.error(res.message);
+        }
+      });
+    },
+  },
+  mounted() {},
+  watch: {},
+};
+</script>
+  
+  <style lang="scss" scoped>
+/deep/ .el-icon-close:before {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: larger;
+  font-weight: bold;
+
+  &:hover {
+    color: aqua;
+  }
+}
+.sm-panel {
+  width: 400px;
+  max-width: 400px;
+}
+
+.sm-function-module-query {
+  max-height: 800px !important;
+  top: 28px !important;
+}
+</style>

src/views/LandConsolidation/components/list.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="xzlist">
     <div class="tdTitle">整治项目</div>
+    <span class="clearBtn" @click="cockpit">
+      <i class="el-icon-thumb"></i>
+      图斑详情查询
+    </span>
     <custom-form ref="formRef" :model="pageObj" :config="formConfig">
       <template #type>
         <el-select v-model="pageObj.idleReason" placeholder="项目类型">
@@ -28,7 +32,6 @@
       :cloumn="cloumn"
       :table="table"
       :indexed="false"
-      :showTotal="false"
       layout="prev, pager,next"
       ref="tableDialogRef"
       @currentChange="searchFun"
@@ -41,7 +44,6 @@
         <span class="usable" @click="handle(row)"> 对比 </span>
       </template>
     </tablePage>
-    <!-- <handleModal ref="handleRef" @close="searchFun()"></handleModal> -->
   </div>
 </template>
 
@@ -49,7 +51,7 @@
 import tablePage from "@/components/mapView/tablePage.vue";
 import customForm from "@/components/mapView/custom-form.vue";
 
-import { GetList, idleLandList } from "@/api/Idleland.js";
+import { GetList } from "@/api/Idleland.js";
 import { xzForm, TableHeader, reasonList } from "./config";
 import { loadGeoJSON } from "@/utils/MapHelper/help.js";
 let geoSources = {};
@@ -57,7 +59,6 @@ export default {
   components: {
     tablePage,
     customForm,
-    // handleModal,
   },
   props: {
     type: {
@@ -85,7 +86,7 @@ export default {
       cloumn: TableHeader,
       reasonList: reasonList,
       table: {
-        data: [],
+        data: [{}],
         total: 20,
       },
       now: "",
@@ -96,6 +97,9 @@ export default {
     this.reset();
   },
   methods: {
+    cockpit() {
+      this.$emit("cockpit");
+    },
     searchFun(page = {}) {
       this.getTableData({
         ...this.pageObj,
@@ -106,27 +110,15 @@ export default {
     getTableData() {
       this.$emit("updateParent", "loading", true);
       this.removeGeoJSON();
-      if (this.$props.type == 0) {
-        GetList(this.pageObj).then((res) => {
-          this.$emit("updateParent", "loading", false);
-          this.table = {
-            ...res.data,
-            total: res.data.count,
-            data: res.data.list,
-          };
-          this.active_tableData(res.data.list);
-        });
-      } else {
-        idleLandList(this.pageObj).then((res) => {
-          this.$emit("updateParent", "loading", false);
-          this.table = {
-            ...res.data,
-            total: res.data.count,
-            data: res.data.list,
-          };
-          this.active_tableData(res.data.list);
-        });
-      }
+      GetList(this.pageObj).then((res) => {
+        this.$emit("updateParent", "loading", false);
+        this.table = {
+          ...res.data,
+          total: res.data.count,
+          data: res.data.list,
+        };
+        this.active_tableData(res.data.list);
+      });
     },
     tableRowClassName({ row, rowIndex }) {
       // if (rowIndex === this.scrollTop_index) {
@@ -192,13 +184,10 @@ export default {
     },
     detail(row) {
       this.flyTo(row);
-      this.bus.$emit("handleView", row, this.$props.type);
-    },
-    judge(row) {
-      this.$refs.handleRef.Init(row, "judge");
+      this.bus.$emit("handleView", row);
     },
     handle(row) {
-      this.$refs.handleRef.Init(row, "deal");
+      this.$emit('contrast', row);
     },
     changerdxz() {
       this.pageObj.isConfirm = !this.pageObj.isConfirm;

src/views/LandConsolidation/components/preCheck.vue

@@ -1,7 +1,6 @@
 <!--合规性分析-->
 <template>
   <div class="preCheck">
-    {{ activeTabs }}
     <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
       <el-tab-pane label="整治预检" name="check">
         <Check

src/views/LandConsolidation/components/qhdb.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="qhdb">
     <div class="tdTitle">整治前后土地利用结构对比</div>
+    <div class="contrast" @click="contrast">空间对比</div>
     <div class="selectTab">
       <el-select
         v-model="tab1"
@@ -73,6 +74,9 @@ export default {
     this.getData();
   },
   methods: {
+    contrast() {
+      this.$emit("contrast");
+    },
     changeData(name, updata) {
       this[name] = updata;
     },
@@ -149,7 +153,14 @@ export default {
 .qhdb {
   height: 100%;
   position: absolute;
-  
+  .contrast {
+    background: #027db4;
+    display: inline-block;
+    border-radius: 5px;
+    padding: 0 5px;
+    cursor: pointer;
+  }
+
   .selectTab {
     position: absolute;
     top: 3px;
@@ -167,7 +178,7 @@ export default {
   }
 
   .echart {
-    width: 850px !important;
+    width: 800px !important;
     height: 260px !important;
   }
 }

src/views/LandConsolidation/components/xzgd.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="xzgd">
+    <div class="tdTitle">新增耕地（XXX项目）</div>
+    <span class="clearBtn" @click="cockpit">
+      <i class="el-icon-thumb"></i>
+      图斑详情查询
+    </span>
+    <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="echartlist">
+      <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>
+        <pie unit="亩" class="pie_echart" ref="echartRef1"></pie>
+      </div>
+      <div class="echars">
+        <div class="echartTitle">
+          <div class="block-title">新增耕地来源流向</div>
+        </div>
+        <sankey class="echart" ref="echartRef2"></sankey>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import pie from "@/components/echartsTemplate/pie.vue";
+import sankey from "@/components/echartsTemplate/sankey.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,
+    };
+  },
+  components: {
+    pie,
+    sankey,
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    cockpit() {
+      this.$emit("cockpit");
+    },
+    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();
+      this.Getlinks();
+    },
+    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);
+        });
+        this.setEchart({ data: res.data, type: '"horizontal"' }, 0);
+        this.setEchart({ data: res.data, type: '"horizontal"' }, 1);
+        this.$emit("updateParent", "loading", false);
+      });
+    },
+    Getlinks() {
+      let data = [],
+        links = [];
+      district(this.params).then((res) => {
+        // res.data.forEach((jdData) => {
+        // });
+        data = [
+          { name: "a" },
+          { name: "b" },
+          { name: "a1" },
+          { name: "a2" },
+          { name: "b1" },
+          { name: "c" },
+        ];
+        links = [
+          { source: "a", target: "a1", value: 5 },
+          { source: "a", target: "a2", value: 3 },
+          { source: "b", target: "b1", value: 8 },
+          { source: "a", target: "b1", value: 3 },
+          { source: "b1", target: "a1", value: 1 },
+          { source: "b1", target: "c", value: 2 },
+        ];
+        this.setEchart(data, 2, links);
+        this.$emit("updateParent", "loading", false);
+      });
+    },
+    changeCharts(e) {},
+    setEchart(data, id, links) {
+      this.$nextTick(() => {
+        this.$refs[`echartRef${id}`].setOptions(data, links);
+      });
+    },
+  },
+  watch: {
+    region(newValue) {
+      console.log(newValue, "---");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.xzgd {
+  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;
+  }
+  .echartlist {
+    width: 100%;
+    height: calc(100% - 50px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .echart {
+    height: 200px !important;
+  }
+  .pie_echart {
+    width: 400px;
+    height: 160px;
+  }
+}
+</style>

src/views/LandConsolidation/index.vue

@@ -32,10 +32,6 @@
             }"
           ></el-cascader>
         </div>
-        <!-- <span class="clearBtn" @click="cockpit">
-          <i class="el-icon-thumb"></i>
-          图斑详情查询
-        </span> -->
       </h2>
       <div class="xz_box">
         <Sdgk
@@ -47,9 +43,16 @@
         <List
           v-loading="loading"
           @updateParent="changeData"
+          @contrast="contrast"
           ref="list"
           v-show="activeIndex == 1"
         ></List>
+        <Xzgd
+          v-loading="loading"
+          @updateParent="changeData"
+          ref="xzgd"
+          v-show="activeIndex == 2"
+        ></Xzgd>
         <preCheck
           v-loading="loading"
           @updateParent="changeData"
@@ -58,20 +61,31 @@
         ></preCheck>
       </div>
     </div>
-    <div class="innerContainer bottomPane" v-drag>
+    <div class="innerContainer bottomPane" v-drag v-show="activeIndex == 0">
       <div class="xz_box">
         <Qhdb
           v-loading="loading"
           @updateParent="changeData"
+          @contrast="contrast"
           ref="qhdb"
-          v-show="activeIndex == 0"
         ></Qhdb>
       </div>
     </div>
+    <div class="innerContainer legendPane" v-drag>
+      <div class="xz_box">
+        图例
+        <div v-for="(litem, li) in legends" :key="litem.label">
+          <span :class="`legend${li}`" class="lcolor"></span>
+          <span class="legLabel">{{ litem }}</span>
+        </div>
+      </div>
+    </div>
     <Details ref="detailModal"></Details>
 
-
-    <div class="innerContainer rightPane newContainer" v-show="activeIndex == 0">
+    <div
+      class="innerContainer rightPane newContainer"
+      v-show="activeIndex == 0"
+    >
       <Organize></Organize>
     </div>
   </div>
@@ -83,8 +97,8 @@ import Sdgk from "./components/sdgk.vue";
 import Qhdb from "./components/qhdb.vue";
 import List from "./components/list.vue";
 import preCheck from "./components/preCheck.vue";
-// import Details from "./components/details.vue";
-
+import Xzgd from "./components/xzgd.vue";
+import Details from "./components/details.vue";
 import * as pick_cockpit_vector from "@/components/Query/clickQuery/pick_cockpit_vector.js";
 export default {
   name: "LandConsolidation",
@@ -93,13 +107,14 @@ export default {
     Qhdb,
     List,
     preCheck,
-    // Details,
-    Organize
+    Details,
+    Details,
+    Organize,
+    Xzgd,
   },
   data() {
     return {
       loading: false,
-
       xzqh: "",
       checkList: [
         {
@@ -116,6 +131,7 @@ export default {
         },
       ],
       activeIndex: 1,
+      legends: ["试点区域", "整治区域", "整治项目"],
     };
   },
   computed: {
@@ -155,6 +171,9 @@ export default {
       // if (newValue != "qhdb") this.$refs.qhdb.reset();
       // if (newValue == "sdgk") this.$refs.sdgk.getData();
       // if (newValue == "qhdb") this.$refs.qhdb.changeForm();
+      // if (newValue == 1) this.$refs.list.searchFun();
+      if (newValue == 2) this.$refs.xzgd.getData();
+      
     },
     computed_vectorData(newVal) {
       console.log(newVal, "newVal");
@@ -224,13 +243,35 @@ export default {
   }
 
   .bottomPane {
-    width: 45%;
+    width: 43%;
     height: 330px;
     top: calc(100% - 360px);
-    left: 480px;
+    left: 600px;
+  }
+  .legendPane {
+    width: 130px;
+    height: 120px;
+    // top: calc(100% - 500px);
+    top: calc(100% - 150px);
+    left: 460px;
+    .lcolor {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      margin-left: 10px;
+    }
+    .legend0 {
+      background: #caf982;
+    }
+    .legend1 {
+      background: #80ffff;
+    }
+    .legend2 {
+      background: #facd91;
+    }
   }
 }
-.newContainer{
+.newContainer {
   height: 758px !important;
   top: 70px !important;
 }
@@ -245,6 +286,8 @@ export default {
     color: #64daff;
     font-size: 18px;
     font-weight: bold;
+    display: inline-block;
+    margin-right: 5px;
   }
   .el-cascader--mini {
     top: 0px;