添加搜索功能

src/views/homestead/index.vue

@@ -31,11 +31,11 @@
 
     <!--列表拉取详情-->
     <div class="homesteadList_wrap">
-      <div class="title_m">
-        <div class="more_icon" @click="homesteadListShrink"></div>
-        <div class="name">宅基地列表</div>
-      </div>
       <div class="main_m" v-if="statusList == 0">
+        <div class="title_m">
+          <div class="more_icon" @click="homesteadListShrink"></div>
+          <div class="name">农房列表</div>
+        </div>
         <!--1-->
         <div
           class="flex_block"
@@ -66,6 +66,10 @@
         </div>
       </div>
       <div class="main_m" v-if="statusList == 1">
+        <div class="title_m">
+          <div class="more_icon" @click="homesteadListShrink"></div>
+          <div class="name">农地列表</div>
+        </div>
         <!--1-->
         <div
           class="flex_block"
@@ -178,13 +182,12 @@
       <div class="searchBar_area">
         <div class="bar_icon"></div>
         <div class="bar_ipt">
-          <input type="text" placeholder="请输入宗地或权利人信息" />
+          <input type="text" v-model="seachText" placeholder="请输入宗地或权利人信息" />
         </div>
-        <div class="bar_text">搜索</div>
+        <div id="query"  class="bar_text">搜索</div>
       </div>
       <div class="searchBar_more" @click="searchBarOperFun('true')"></div>
     </div>
-
     <!--点击房地-显示的搜索--->
     <div class="landHomestead_wrap">
       <div class="landHomestead_search">
@@ -940,6 +943,8 @@ export default {
   name: "homesteadLogin",
   data() {
     return {
+      //搜索
+      seachText: "",
       selectionIconShow: false,
       //省市区区级list
       hcAreaInfoOption: [],
@@ -1112,6 +1117,9 @@ export default {
         this.houseLandLookAnmitFun("hide");
       }
     },
+    toggleSearch(){
+      $("#query").trigger("click");
+    },
     //显示农地\农房详情 动画
     houseLandLookAnmitFun(type) {
       if (type == "show") {
@@ -2216,6 +2224,7 @@ export default {
       var nongZt = ["house", "land"];
       var texiao_layer_fang;
       var texiao_layer_di;
+      var delete_map = ["mapHouse","mapLand"];
       $("#cun").on("change", function () {
         /**
          * @api wfs服务空间查询
@@ -2243,6 +2252,8 @@ export default {
 
         map.removeLayer(nongZt[0]);
         map.removeLayer(nongZt[1]);
+        map.removeLayer(delete_map[0]);
+        map.removeLayer(delete_map[1]);
         //村的数据判断
 
         map.removeLayer(villageVectorLayer);
@@ -2328,6 +2339,145 @@ export default {
       });
       //村定位查询-------------------------------------end
 
+      //按照查询条件人名  定位地图-----------------start
+      $("#query").on("click", function () {
+        /**
+         * @api wfs服务空间查询
+         * @param {*} wfsurl
+         * @param {*} srsName
+         * @param {*} typeName
+         * @param {*} drawType
+         * @param {option 可选} geometryField
+         */
+        var val = _this.seachText;
+        if (val == "") {
+          alert("请填写查询条件在查询");
+        } else {
+          //分类查询查询农地、农房
+          var difang;
+          //var di = document.getElementById('di');
+          //删除矢量图层json
+          map.removeLayer(shitu);
+          //删除之前图层 --------------------start
+          //属性查询删除
+          map.removeLayer(nongZt[0]);
+          map.removeLayer(nongZt[1]);
+          map.removeLayer(delete_map[0]);
+          map.removeLayer(delete_map[1]);
+          map.removeLayer(texiao_layer_fang);
+          map.removeLayer(texiao_layer_di);
+          //删除之前图层 -------------------end
+          //查询条件
+          var cql_filter;
+          var cun = _this.villageDataObj.deptName;
+
+          difang = ["nsgk_hc:t_geo_hc_house", "nsgk_hc:t_geo_hc_land"];
+          var tach =0;
+          var once =0;
+          for (var i = 0; i < difang.length; i++) {
+            map.removeLayer(delete_map[i]);
+            // 数字验证！
+            var reg=/\d/;
+            //验证汉子
+            //var han = /^[\u4e00-\u9fa5]+$/;
+            if(reg.test(val)){
+              //循环判断查询条件
+                  cql_filter = "XH='" + val + "'" + "and CM='" + cun + "'";
+            }else{
+              //循环判断查询条件
+              if (cun != "all" && cun != "") {
+                if (difang[i] == "nsgk_hc:t_geo_hc_house") {
+                  cql_filter = "FWSYRMC='" + val + "'" + "and CM='" + cun + "'";
+                } else {
+                  cql_filter = "SYRMC='" + val + "'" + "and CM='" + cun + "'";
+                }
+              } else {
+                if (difang[i] == "nsgk_hc:t_geo_hc_house") {
+                  cql_filter = "FWSYRMC='" + val + "'";
+                } else {
+                  cql_filter = "SYRMC='" + val + "'";
+                }
+              }
+            }
+            //for(var i=0; i< difang.length; i++){
+            //cql_filter = "CM='"+cun +"'"+ "and XZQK='待流转待盘活'";
+
+            //图层加载
+
+            //业务图层  wms服务
+            delete_map[i] = new ol.layer.Tile({
+              source: new ol.source.TileWMS({
+                //url: 'http://192.168.31.150:8888/geoserver/mywork_mysql/wms',
+                url: "http://116.255.135.38:8080/geoserver/nsgk_hc/wms",
+                //url: 'http://localhost:8888/geoserver/mywork_mysql/wms',
+                //url: 'http://localhost:8888/geoserver/new_shp/wms',
+                params: {
+                  LAYERS: difang[i],
+                  //'LAYERS': 'new_shp:new_shp_all',
+                  TILED: true,
+                  cql_filter: cql_filter,
+                  SRID: 3857,
+                },
+              }),
+            });
+
+            //}
+            //定位查询位置
+            let param_dw = {
+              srsName: "EPSG:3857",
+              service: "WFS",
+              version: "1.0.0",
+              request: "GetFeature",
+              typename: difang[i],
+              //featureNS: 'nsgk_hc',//命名空间 URI
+              cql_filter: cql_filter,
+              //featurePrefix: 'nationalwater',//工作区名称
+              //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开
+              outputFormat: "application/json",
+              //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值
+            };
+            let url_dw = "http://116.255.135.38:8080/geoserver/nsgk_hc/wfs"; //wfsurl;
+            url_dw = url_dw + "?";
+            for (let key in param_dw) {
+              url_dw = url_dw + key + "=" + param_dw[key] + "&";
+            }
+            url_dw = url_dw.substr(0, url_dw.length - 1);
+            fetch(url_dw, {
+              method: "POST", // *GET, POST, PUT, DELETE, etc.
+            })
+              .then((res) => {
+                var geojsonmap = res.json();
+                return geojsonmap;
+              })
+              .then((data) => {
+                tach =tach+1;
+                if(data.features !=null && data.features !=""){
+                //var datamap = data.bbox;
+                var datamap = data.features[0].bbox;
+                  map.getView().animate({
+                    // 只设置需要的属性即可
+                    center: datamap, // 中心点
+                    zoom: 17, // 缩放级别
+                    rotation: undefined, // 缩放完成view视图旋转弧度
+                    duration: 1000, // 缩放持续时间，默认不需要设置
+                  });
+                } else if(tach ==1){
+                  once = once+1;
+                }else{
+                  if((tach ==2 && once ==1)){
+                    alert("没有找到相关人员农房农地信息");
+                  }
+                }
+              })
+              .catch((error) => {
+                console.log("【异常】", error);
+              });
+            map.addLayer(delete_map[i]);
+          }
+        }
+      });
+      //按照查询  定位地图-----------------end
+
       //开始绘制地图  ------------------- start
 
       var vector_drawing;