图例和列表详情

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/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;

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,6 +43,7 @@
         <List
           v-loading="loading"
           @updateParent="changeData"
+          @contrast="contrast"
           ref="list"
           v-show="activeIndex == 1"
         ></List>
@@ -58,16 +55,25 @@
         ></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>
 </template>
@@ -77,7 +83,7 @@ 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 Details from "./components/details.vue";
 
 import * as pick_cockpit_vector from "@/components/Query/clickQuery/pick_cockpit_vector.js";
 export default {
@@ -87,12 +93,11 @@ export default {
     Qhdb,
     List,
     preCheck,
-    // Details,
+    Details,
   },
   data() {
     return {
       loading: false,
-
       xzqh: "",
       checkList: [
         {
@@ -109,6 +114,7 @@ export default {
         },
       ],
       activeIndex: 1,
+      legends: ["试点区域", "整治区域", "整治项目"],
     };
   },
   computed: {
@@ -148,6 +154,7 @@ 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 == 0) this.$refs.list.searchFun();
     },
     computed_vectorData(newVal) {
       console.log(newVal, "newVal");
@@ -219,9 +226,31 @@ export default {
   .bottomPane {
     width: 45%;
     height: 330px;
-    top: calc(100% - 360px);
+    top: calc(100% - 500px);
     left: 480px;
   }
+  .legendPane {
+    width: 150px;
+    height: 120px;
+    // top: calc(100% - 500px);
+    top: calc(100% - 150px);
+    left: 480px;
+    .lcolor {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      margin-left: 10px;
+    }
+    .legend0 {
+      background: #caf982;
+    }
+    .legend1 {
+      background: #80ffff;
+    }
+    .legend2 {
+      background: #facd91;
+    }
+  }
 }
 </style>
 <style lang="scss">
@@ -234,6 +263,8 @@ export default {
     color: #64daff;
     font-size: 18px;
     font-weight: bold;
+    display: inline-block;
+    margin-right: 5px;
   }
   .el-cascader--mini {
     top: 0px;