适配

src/views/remote/MapView.vue

@@ -280,7 +280,8 @@ export default {
 
 <style lang="scss" scoped>
 .map {
-  width: calc(100% - 520px);
+  // width: calc(100% - 520px);
+  width: 70%;
   height: 91vh;
   position: relative;
 }

src/views/remote/farmland/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="mapApp">
-    <div class="btn" v-if="nowObj.qsx">
+    <div class="btn" v-if="nowObj['前时相']">
       <!-- <el-button @click="drawer = true">打开抽屉</el-button> -->
       <span class="sx qsx">前时相:{{ nowObj.qsx }}</span>
       <span class="sx hsx">后时相:{{ nowObj.hsx }}</span>
@@ -13,19 +13,56 @@
       :modal="false"
       :wrapperClosable="false"
       modal-class="mask-layer"
+      size="28vw"
     >
       <div class="jctbCon">
         <div class="tbTitle">
           <span>监测图斑{{ newObj.name }}</span>
-
-          <el-input
+          <el-select
+            v-model="domains"
+            multiple
+            collapse-tags
+            placeholder="请选择其它搜索条件"
+            @change="handleChange"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.value == '监测编号' ? true : false"
+            >
+            </el-option>
+          </el-select>
+          <el-button @click="handleDownload">下载</el-button>
+          <!-- <el-input
             placeholder="请输入监测编号查询"
             prefix-icon="el-icon-search"
-            v-model="queryParams.jcbh"
+            v-model="queryParams['监测编号']"
             @change="getTemplate()"
           >
-          </el-input>
-          <el-button @click="handleDownload">下载</el-button>
+          </el-input> -->
+          <div class="demo-input-suffix">
+            监测编号:
+            <el-input
+              placeholder="请输入监测编号查询"
+              prefix-icon="el-icon-search"
+              v-model="queryParams['监测编号']"
+              @change="getTemplate()"
+            >
+            </el-input>
+          </div>
+          <div class="demo-input-suffix" v-for="(ditem, i) in domains" :key="i">
+            {{ ditem + ":" }}
+            <el-input
+              :placeholder="'请输入' + ditem + '查询'"
+              prefix-icon="el-icon-search"
+              v-model="queryParams[ditem]"
+              @change="getTemplate()"
+            >
+            </el-input>
+            <el-button @click.prevent="removeDomain(ditem)">删除</el-button>
+          </div>
         </div>
         <div class="numCard">
           <div class="cardItem">
@@ -91,6 +128,7 @@
 import MapView from "../MapView.vue";
 import CustomDetails from "@/components/custom-detailsInfo.vue";
 import parse from "wellknown";
+import { pinyin } from "pinyin-pro";
 import {
   getPcsj,
   listPcsjXQList,
@@ -134,10 +172,13 @@ export default {
   },
   data() {
     return {
+      options: [],
+      domains: [], //存储动态搜索列表
+      // value: ["监测编号"], //下拉框选中的值
       maptype: "normal",
       total: 0,
       queryParams: {
-        jcbh: "", //监测编号
+        监测编号: "", //监测编号
         pageNum: 1,
         pageSize: 10,
         pcsjid: this.$route.query.id,
@@ -203,11 +244,32 @@ export default {
   },
 
   methods: {
+    removeDomain(item) {
+      var index = this.domains.indexOf(item);
+      if (index !== -1) {
+        this.domains.splice(index, 1);
+        this.$delete(this.queryParams, item); //删除对象属性
+        this.getTemplate();
+      }
+    },
     handleDelete(row) {
       this.tableData.forEach((item, i) => {
         window.map["mapDiv"].removeLayer(this.curPageResultLayer["mapDiv" + i]);
       });
     },
+    handleChange(val) {
+      // this.$set(this.queryParams, val, "");
+      // this.domains.push(val);
+      // this.domains = val;
+      if (this.domains.indexOf(val) == -1) {
+        this.domains = val;
+        this.$set(this.queryParams, val, "");
+      } else {
+        this.domains.splice(this.domains.indexOf(val), 1);
+        this.$delete(this.queryParams, item);
+      }
+      console.log(this.queryParams, ";this.queryParams", this.domains);
+    },
     //动态获取设置的模版字段
     getTemplate() {
       this.handleDelete();
@@ -218,19 +280,34 @@ export default {
         "后时相",
         "空间信息",
         "geom",
-        '前时相对应影像数据',
-        '后时相对应影像数据',
+        "前时相对应影像数据",
+        "后时相对应影像数据",
       ];
       this.templateList = [];
+      this.options = [];
+
       getXqListKey(this.queryParams).then((res) => {
         res.data.forEach((i) => {
           if (!arr.includes(i)) {
             this.templateList.push(i);
+            // this.options.push({
+            //   // value: pinyin(i, {
+            //   //   pattern: "first",
+            //   //   toneType: "none",
+            //   //   separator: "",
+            //   // }),
+            //   label: i,
+            // });
+            this.options.push({
+              value: i,
+              label: i,
+            });
           }
         });
       });
 
       getXqListMap(this.queryParams).then((res) => {
+        console.log(res, "======");
         this.tableData = res.rows;
         this.total = res.total;
         this.initVectorLayer("mapDiv");
@@ -423,12 +500,21 @@ export default {
 ::v-deep .el-drawer__container {
   position: static !important;
 }
+::v-deep .el-drawer__body {
+  width: 28vw;
+}
 .jctbCon {
   .tbTitle {
     display: flex;
     justify-content: space-around;
+    justify-content: flex-start;
+    flex-wrap: wrap;
     ::v-deep .el-input {
-      width: 40%;
+      // width: 28%;
+      width: 55%;
+    }
+    ::v-deep .el-input--suffix {
+      width: 100% !important;
     }
   }
   .numCard {
@@ -440,7 +526,8 @@ export default {
     align-items: center;
     justify-content: space-between;
     .cardItem {
-      width: 230px;
+      // width: 230px;
+      width: 200px;
       height: 85px;
       background: linear-gradient(
         180deg,