选择图斑样式修改

src/components/mapView/range-version.vue

@@ -87,11 +87,14 @@
             >
             </el-option>
           </el-select>
+        </div>
+        <div class="el-col headerInp">
           <el-input
             v-model="input"
             placeholder="请输入监测编号搜索"
             @keyup.enter.native="initNew"
           ></el-input>
+          <el-button plain icon="edit-pen" size="mini">查询</el-button>
         </div>
         <el-table
           ref="singleTable"
@@ -203,18 +206,19 @@ export default {
       yearsOpt: [], //检测图斑时间季度数据数组
       monitorOpt: [],
       monitorVal: "",
-      yearsVal: "",//时间季度绑定
-      input: "",//图斑编号搜索条件绑定
-      updateObj: {//搜索条件
+      yearsVal: "", //时间季度绑定
+      input: "", //图斑编号搜索条件绑定
+      updateObj: {
+        //搜索条件
         region: "4602",
         tab: 1,
         val0: "",
         val1: "",
         val2: "",
       },
-      active_dableData: [],//表格数据
-      multipleSelection: [],//选择表格选中的数据
-      idArr: [],//存储id数组用于删除
+      active_dableData: [], //表格数据
+      multipleSelection: [], //选择表格选中的数据
+      idArr: [], //存储id数组用于删除
       // -----------以上为选择图斑功能所需数据------------
       userXZQ: "", //store.state.user.user.dept.district,
       fwlist: {
@@ -259,7 +263,7 @@ export default {
     creatTb() {
       this.dialogVisible = false;
       this.multipleSelection.forEach((item, index) => {
-        this.model.xzmj += item.jcmj
+        this.model.xzmj += item.jcmj;
         item.type = "图斑上图";
         if (item.geom)
           loadGeoJSON(item.geom, "#55A1E3", { isfly: true }, (data) => {
@@ -268,7 +272,7 @@ export default {
               entity.properties = item;
             });
           });
-          this.idArr.push(item.jcbh);
+        this.idArr.push(item.jcbh);
       });
     },
     handleSelectionChange(val) {
@@ -329,7 +333,7 @@ export default {
         startTime: this.updateObj.val0,
         endTime: this.updateObj.val1,
         pageNum: 1,
-        pageSize: '9999999',
+        pageSize: "9999999",
         jcbh: this.input,
       };
       JctbList(obj).then((res) => {
@@ -411,7 +415,7 @@ export default {
     },
     //绘制
     drawMap() {
-      this.remove()//删除选择的图斑
+      this.remove(); //删除选择的图斑
       if (!window.handlerPolygon) {
         common.initHandler("Polygon");
       }
@@ -498,7 +502,7 @@ export default {
     clearAll(clearfile = true) {
       //销毁上传创建的面
       // viewer.entities.removeAll();
-      this.remove()
+      this.remove();
       this.resetDataSources();
       this.model.xzfw = "";
       this.model.xzmj = 0;
@@ -580,32 +584,68 @@ export default {
     }
   }
 }
-.headerSelect {
-  width: 100%;
-  height: 26px;
-  //   background: #00ffff;
-  margin: 5px 0px;
-  display: flex;
-  justify-content: space-between;
-  /deep/ .el-select {
-    padding: 0 10px;
-  }
-  /deep/ .el-input--suffix .el-input__inner {
-    padding-right: 15px;
-    // height: 26px;
-    background: #041c3273 !important;
-    border: 1px dashed #0f7ac8;
-    color: #fff;
-  }
-  /deep/ .el-cascader {
-    // line-height: 26px;
-  }
-  /deep/.el-input__icon {
-    // line-height: 1;
-    color: #fff;
+.gdzl {
+  .headerSelect {
+    width: 100%;
+    height: 26px;
+    //   background: #00ffff;
+    margin: 5px 0px;
+    display: flex;
+    justify-content: space-between;
+    /deep/ .el-select {
+      width: 95%;
+      // padding: 0 10px;
+      // margin-right: 10px;
+    }
+    /deep/ .el-input--suffix .el-input__inner {
+      padding-right: 15px;
+      // height: 26px;
+      background: #041c3273 !important;
+      border: 1px dashed #0f7ac8;
+      color: #fff;
+    }
+    /deep/ .el-cascader {
+      // line-height: 26px;
+    }
+    /deep/.el-input__icon {
+      // line-height: 1;
+      color: #fff;
+    }
+    /deep/ .el-input__inner::placeholder {
+      color: #fff;
+    }
   }
-  /deep/ .el-input__inner::placeholder {
-    color: #fff;
+  .headerInp {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    /deep/ .el-button--mini {
+      background: #0f7ac8;
+      border: none;
+      border-radius: 0;
+      color: #fff;
+      width: 60px;
+      height: 26px;
+      font-size: 12px;
+      padding: 0;
+    }
+    /deep/ .el-input__inner {
+      height: 26px;
+      width: 80%;
+    }
   }
 }
+.ghzc .el-col .el-cascader--mini {
+  width: 33% !important;
+}
+.ghzc .el-col .el-select {
+  width: 33% !important;
+}
+
+/deep/ .el-dialog__header {
+  padding: 10px 20px 0px;
+}
+/deep/ .el-dialog__body {
+  padding: 0px 20px;
+}
 </style>