diff --git a/src/views/homesteadSurvey/list.vue b/src/views/homesteadSurvey/list.vue index bc40d538..fa5b907f 100644 --- a/src/views/homesteadSurvey/list.vue +++ b/src/views/homesteadSurvey/list.vue @@ -401,68 +401,18 @@
- + - - - - - - -
- - -
-
-
-
- -
-
搜索
-
-
- -
-
-
1111
-
1111
-
性质：1111
-
-
-
1111
-
大约111㎡
-
-
-
-
111
-
-
-
-
-
-
-
@@ -1257,7 +1207,7 @@ selectionIconShow: false, //搜索栏目-操作栏显隐 searchBarOperVisbile: false, - mapDataAll: [], + mapDataAll: "", showSearch:false, bottomHeight:'0px', //搜索---end @@ -1877,6 +1827,7 @@ zoom: 10, minZoom: 5, //地图缩小限制 maxZoom: 18.3, //地图放大限制 + pinchRotate: false, //禁止地图旋转 }), }); @@ -2475,8 +2426,90 @@ //地图定义 var delete_map = ["mapZjd", "mapZrz","mapFsss"]; + var texiao_layer_zjd; + var texiao_layer_zrz; + var texiao_layer_fsss; //按照查询条件人名 定位地图-----------------start $("#query").on("click", function () { + //数据库查询数据------------------------------------------------------start + var val = that.seachText; + if (val == "") { + that.$toast('请填写查询条件再查询'); + } else { + var styleZjd = new ol.style.Style({ + stroke: new ol.style.Stroke({ + //边界样式 + color: "#CCFF66", + width: 6, + }), + }); + let params = { + "deptId" : that.$cookies.get("item").deptId, + "zjddm" : val, + "syqr" : val, + "pageSize":20, + } + listZjdzd(params).then((response) => { + if(response.rows.length>=0){ + that.mapDataAll = response.rows; + for(var hg=0; that.mapDataAll.length >0; hg++){ + var mapNum = that.mapDataAll[hg].houseDataConfirmStatus; + if(mapNum == "UNCONFIRMED"){ + that.mapDataAll[hg].houseDataConfirmStatus = "未核查"; + } else if (mapNum == "CONFIRMED"){ + that.mapDataAll[hg].houseDataConfirmStatus = "已核查"; + }else{ + that.mapDataAll[hg].houseDataConfirmStatus = ""; + } + if (that.mapDataAll[hg] !=null && that.mapDataAll[hg].theGeom != null && that.mapDataAll[hg].theGeom != "") { + that.mapDataAll[hg].createBy = 'mapTheGeomZjdId'; + var hc_land = new ol.layer.Vector({ + title: "add Layer", + source: new ol.source.Vector({ + projection: projection, + features: new ol.format.GeoJSON().readFeatures("{\n" + + " \"type\": \"Feature\",\n" + + " \"geometry\":" + that.mapDataAll[hg].theGeom + ", \"properties\":" + JSON.stringify(that.mapDataAll[hg]) + "}"), + }), + style: styleZjd + }); + map.addLayer(hc_land); + var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX; + var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY; + var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX; + var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY; + //定位查询位置 + var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置 + map.getView().animate({ + // 只设置需要的属性即可 + center: center, // 中心点 + zoom: 15.8, // 缩放级别 + rotation: undefined, // 缩放完成view视图旋转弧度 + duration: 1000, // 缩放持续时间，默认不需要设置 + }); + } + } + setTimeout(function () { + console.log($(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)) + that.showSearch = true ; + var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true) + document.styleSheets[0].insertRule( + "@keyframes test" + + "{" + + "0%{bottom: -" + height + "px;}" + + "100%{bottom: 0px;}" + + "}" + ) + $('.searchBar_wrap').css({'animation':'test 0.5s ease-in-out 0s 1 alternate forwards','-webkit-animation':'test 0.5s ease-in-out 0s 1 alternate forwards'}); + //} + },500); + } else { + that.$toast("暂无数据") + } + }); + } + //数据库查询数据------------------------------------------------------end + //地图查询------------------------------------------------------------start /** * @api wfs服务空间查询 * @param {*} wfsurl @@ -2485,130 +2518,248 @@ * @param {*} drawType * @param {option 可选} geometryField */ - var val = that.seachText; - if (val == "") { - that.$toast('请填写查询条件再查询'); - } else { - //清除之前查询数据 - that.mapDataAll =[]; - //分类查询查询农地、农房 - var difang; - //查询条件 - var cql_filter_cun; - var cun = that.$cookies.get("item").deptName; - difang = ["zjd_dc:t_house_survey_zjdzd", "zjd_dc:t_house_survey_zrz","zjd_dc:t_house_survey_fsss"]; - 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_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'"; - } else { - //循环判断查询条件 - if (difang[i] == "zjd_dc:t_house_survey_zjdzd") { - console.log("hhhhhh"); - cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'"; - } else if(difang[i] == "zjd_dc:t_house_survey_zrz") { - cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'"; - } else if(difang[i] == "zjd_dc:t_house_survey_fsss") { - cql_filter_cun = "zjddm='" + val + "'" + "and dept_name='" + cun + "'"; - } - } - //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://116.255.223.226:8080/geoserver/zjd_dc/wms", - params: { - LAYERS: difang[i], - //'LAYERS': 'new_shp:new_shp_all', - TILED: true, - cql_filter: cql_filter_cun, - 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_cun, - //featurePrefix: 'nationalwater',//工作区名称 - //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开 - outputFormat: "application/json", - //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值 - }; - let url_dw = "http://116.255.223.226:8080/geoserver/zjd_dc/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.features[0].bbox; - // map.getView().animate({ - // // 只设置需要的属性即可 - // center: datamap, // 中心点 - // zoom: 17, // 缩放级别 - // rotation: undefined, // 缩放完成view视图旋转弧度 - // duration: 1000, // 缩放持续时间，默认不需要设置 - // }); - var exfor = 0; - for(exfor;data.features.length > exfor; exfor++){ - that.mapDataAll.push(JSON.parse(JSON.stringify(data.features[exfor].properties))); - } - let resolution = map.getView().getResolutionForExtent(data.bbox,map.getSize()); - map.getView().fit(data.bbox); - map.getView().setResolution(resolution); - } else if (tach == 1) { - once = once + 1; - } else { - if (once == 1 && tach == 3) { - that.$toast("没有找到相关人员信息"); - } - } - }) - .catch((error) => { - console.log("【异常】", error); - }); - map.addLayer(delete_map[i]); - } - console.log($(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true)) - that.showSearch = true ; - var height = $(".searchBar_wrap").outerHeight(true) - $(".searchBar_wrap .van-search").outerHeight(true) - document.styleSheets[0].insertRule( - "@keyframes test" + - "{" + - "0%{bottom: -" + height + "px;}" + - "100%{bottom: 0px;}" + - "}" - ) - $('.searchBar_wrap').css({'animation':'test 0.5s ease-in-out 0s 1 alternate forwards','-webkit-animation':'test 0.5s ease-in-out 0s 1 alternate forwards'}); - } + // var val = that.seachText; + // if (val == "") { + // that.$toast('请填写查询条件再查询'); + // } else { + // //清除之前查询数据 + // that.mapDataAll =[]; + // //分类查询查询农地、农房 + // var difang; + // //查询条件 + // var cql_filter_cun; + // var cun = that.$cookies.get("item").deptId; + // difang = ["zjd_dc:t_house_survey_zjdzd", "zjd_dc:t_house_survey_zrz","zjd_dc:t_house_survey_fsss"]; + // 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_cun = "zjddm='" + val + "'" + "and dept_id='" + cun + "'"; + // } else { + // //循环判断查询条件 + // if (difang[i] == "zjd_dc:t_house_survey_zjdzd") { + // cql_filter_cun = "zjddm='" + val + "'" + "and dept_id='" + cun + "'"; + // } else if(difang[i] == "zjd_dc:t_house_survey_zrz") { + // cql_filter_cun = "zjddm='" + val + "'" + "and dept_id='" + cun + "'"; + // } else if(difang[i] == "zjd_dc:t_house_survey_fsss") { + // cql_filter_cun = "zjddm='" + val + "'" + "and dept_id='" + cun + "'"; + // } + // } + // //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://116.255.223.226:8080/geoserver/zjd_dc/wms", + // params: { + // LAYERS: difang[i], + // //'LAYERS': 'new_shp:new_shp_all', + // TILED: true, + // cql_filter: cql_filter_cun, + // 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_cun, + // //featurePrefix: 'nationalwater',//工作区名称 + // //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开 + // outputFormat: "application/json", + // //filter: ol.format.filter.equalTo(t,e,r)//前者是属性名，后者是对应值 + // }; + // let url_dw = "http://116.255.223.226:8080/geoserver/zjd_dc/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 != "") { + // for(var i=0; data.features.length >i; i++) { + // //特效动画实现 -----------------------------start + // console.log(tach,"++++++++++++++++++",once) + // var datamap = data.features[0].bbox; + // if (tach == 1 && once == 0) { + // console.log("zrz") + // texiao_layer_zjd = new ol.layer.Vector({ + // source: new ol.source.Vector(), + // }); + // map.addLayer(texiao_layer_zjd); + // var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置 + // var circle = new ol.Feature({ + // geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标 + // }); + // + // circle.setStyle( + // new ol.style.Style({ + // image: new ol.style.Circle({ + // radius: 0, + // stroke: new ol.style.Stroke({ + // color: "yellow", + // size: 1, + // }), + // }), + // }) + // ); + // texiao_layer_zjd.getSource().addFeature(circle); + // + // // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式 + // var radius = 0; + // map.on("postcompose", function () { + // // 增大半径，最大20 + // radius++; + // radius = radius % 10; + // // 设置样式 + // circle.setStyle( + // new ol.style.Style({ + // image: new ol.style.Circle({ + // radius: radius, + // stroke: new ol.style.Stroke({ + // color: "yellow", + // size: 1, + // }), + // }), + // }) + // ); + // }); + // } else if(tach == 2) { + // console.log("zrz") + // texiao_layer_zrz = new ol.layer.Vector({ + // source: new ol.source.Vector(), + // }); + // map.addLayer(texiao_layer_zrz); + // var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置 + // var circle = new ol.Feature({ + // geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标 + // }); + // + // circle.setStyle( + // new ol.style.Style({ + // image: new ol.style.Circle({ + // radius: 0, + // stroke: new ol.style.Stroke({ + // color: "yellow", + // size: 1, + // }), + // }), + // }) + // ); + // texiao_layer_zrz.getSource().addFeature(circle); + // + // // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式 + // var radius = 0; + // map.on("postcompose", function () { + // // 增大半径，最大20 + // radius++; + // radius = radius % 10; + // // 设置样式 + // circle.setStyle( + // new ol.style.Style({ + // image: new ol.style.Circle({ + // radius: radius, + // stroke: new ol.style.Stroke({ + // color: "yellow", + // size: 1, + // }), + // }), + // }) + // ); + // }); + // } else { + // console.log("fsss") + // texiao_layer_fsss = new ol.layer.Vector({ + // source: new ol.source.Vector(), + // }); + // map.addLayer(texiao_layer_fsss); + // var center = ol.extent.getCenter(datamap); //获取边界区域的中心位置 + // var circle = new ol.Feature({ + // geometry: new ol.geom.Point(center), //ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857') //投影坐标转为地理坐标 + // }); + // + // circle.setStyle( + // new ol.style.Style({ + // image: new ol.style.Circle({ + // radius: 0, + // stroke: new ol.style.Stroke({ + // color: "yellow", + // size: 1, + // }), + // }), + // }) + // ); + // texiao_layer_fsss.getSource().addFeature(circle); + // + // // 关键的地方在此：监听postcompose事件，在里面重新设置circle的样式 + // var radius = 0; + // map.on("postcompose", function () { + // // 增大半径，最大20 + // radius++; + // radius = radius % 10; + // // 设置样式 + // circle.setStyle( + // new ol.style.Style({ + // image: new ol.style.Circle({ + // radius: radius, + // stroke: new ol.style.Stroke({ + // color: "yellow", + // size: 1, + // }), + // }), + // }) + // ); + // }); + // } + // //特效动画实现 -----------------------------end + // that.mapDataAll.push(JSON.parse(JSON.stringify(data.features[i].properties))); + // } + // //定位实现 + // let resolution = map.getView().getResolutionForExtent(data.bbox, map.getSize()); + // map.getView().fit(data.bbox); + // map.getView().setResolution(resolution); + // console.log(that.mapDataAll); + // } else if (tach == 1) { + // once = once + 1; + // } else { + // if (once == 1 && tach == 3) { + // that.$toast("没有找到相关人员信息"); + // //that.showSearch = false ; + // }else { + // + // } + // } + // }) + // .catch((error) => { + // console.log("【异常】", error); + // }); + // map.addLayer(delete_map[i]); + // } + //地图查询------------------------------------------------------------end }); //按照查询 定位地图-----------------end @@ -4284,7 +4435,7 @@ } .van-sticky{position: fixed;top: 0;right: 0; left: 0;z-index: 9999;} - searchBar_wrap { + .searchBar_wrap { // display: none; position: fixed; left: 0; @@ -4295,6 +4446,7 @@ border-top-left-radius: 15px; border-top-right-radius: 15px; z-index: 9; + .searchBox{ .van-cell{ /*&:first-child{*/ @@ -4490,165 +4642,5 @@ background-size: 80% 80%; margin-left: 15px; } - - .landHomestead_wrap { - position: fixed; - bottom: -100%; - left: 0; - width: 100%; - padding: 0 16px; - .landHomestead_search { - height: 80px; - background: #f1f1f1; - border: 1px solid #dfdfdf; - border-radius: 10px; - padding: 0 28px; - display: flex; - margin-bottom: 10px; - .bar_icon { - width: 50px; - height: 50px; - background: url("../../assets/images/homestead/searchBar_bar.png") - center center no-repeat; - background-size: 95% 95%; - margin-top: 14px; - margin-right: 15px; - } - .bar_ipt { - flex: 1; - input { - width: 100%; - height: 100%; - background: none; - border: 0 none; - font-size: 32px; - } - } - .bar_text { - flex: 0 0 80px; - font-size: 32px; - color: #333333; - font-family: PingFang SC, PingFang SC-Regular; - font-weight: 400; - display: flex; - justify-content: center; /* 相对父元素水平居中 */ - align-items: center; /* 子元素相对父元素垂直居中 */ - } - } - .landHomestead_body { - background: #fff; - padding: 30px 20px; - border-top-left-radius: 12px; - border-top-right-radius: 12px; - position: relative; - .body_flex { - display: block; - overflow: hidden; - .attribute { - width: 42%; - float: left; - - .names { - height: 54px; - padding-left: 46px; - background: url("../../assets/images/homestead/landHomestead_home.png") - left center no-repeat; - background-size: 38px 36px; - font-size: 32px; - line-height: 54px; - color: #333333; - margin-bottom: 12px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .address { - height: 48px; - line-height: 48px; - font-size: 28px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - word-break: break-all; - margin-right: 8px; - } - .nature { - height: 48px; - font-size: 28px; - } - } - .distance { - width: 29%; - float: left; - .size { - height: 54px; - line-height: 54px; - font-size: 40px; - color: #333333; - margin-bottom: 12px; - } - .probably { - line-height: 48px; - font-size: 28px; - height: 48px; - } - } - .others { - width: 29%; - float: left; - .information { - height: 54px; - margin-bottom: 12px; - .status_text { - color: #fff; - font-size: 24px; - background: #3cbf5b; - border-radius: 20px; - padding: 8px 15px; - float: right; - max-width: calc(100% - 56px); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .location { - width: 36px; - height: 36px; - background: url("../../assets/images/homestead/others_location.png") - no-repeat; - float: right; - margin: 8px 0 0 20px; - } - } - .editor { - height: 96px; - .editor_icon { - width: 72px; - height: 72px; - float: right; - background: url("../../assets/images/homestead/edit_icon.png") - no-repeat; - background-size: 100% 100%; - margin-top: 14px; - box-shadow: 3px 3px 5px rgba(60, 191, 91, 0.3); - border-radius: 50%; - } - .delete_icon { - width: 72px; - height: 72px; - float: right; - background: url("../../assets/images/homestead/delete_icon.png") - no-repeat; - background-size: 100% 100%; - margin-top: 14px; - margin-right: 20px; - box-shadow: 3px 3px 5px rgba(212, 42, 42, 0.3); - border-radius: 50%; - } - } - } - } - } - } }