From 18acfcf54f2da753b8b1781836776c858a44e030 Mon Sep 17 00:00:00 2001 From: hbao Date: Wed, 23 Feb 2022 16:25:31 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E5=9B=BE=E5=8A=A0=E8=BD=BD=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/homesteadSurvey/list.vue | 692 ++++++++++++++++++++++++++++- 1 file changed, 689 insertions(+), 3 deletions(-) diff --git a/src/views/homesteadSurvey/list.vue b/src/views/homesteadSurvey/list.vue index ece23076..030ab6ac 100644 --- a/src/views/homesteadSurvey/list.vue +++ b/src/views/homesteadSurvey/list.vue @@ -388,6 +388,57 @@ -->
+ +
+
+
+
+ +
+
搜索
+
+
+ +
+
+
+
+ +
+
搜索
+
+
+ +
+
+
1111
+
1111
+
性质：1111
+
+
+
1111
+
大约111㎡
+
+
+
+
111
+
+
+
+
+
+
+
+
+
@@ -1109,6 +1160,12 @@ checkAllFlag: false,//全选判断标识 CheckedAllArr: [],//全选数组 dataList:[], + //搜索---start + seachText: "", + selectionIconShow: false, + //搜索栏目-操作栏显隐 + searchBarOperVisbile: false, + //搜索---end //地图使用 --end }; }, @@ -1704,13 +1761,15 @@ // map.addLayer(zhenTc); //镇边界查询开始 ------------------------------end //村边界查询开始 ------------------------------start + console.log(that.$cookies.get("item").deptName); + var cql_filter = "ZLDWMC='" + that.$cookies.get("item").deptName + "'"; var cunTc= new ol.layer.Tile({ source: new ol.source.TileWMS({ url: "http://116.255.223.226:8080/geoserver/zjd_dc/wms", params: { LAYERS: 'zjd_dc:t_house_survey_border_village', TILED: true, - //cql_filter: cql_filter, + cql_filter: cql_filter, SRID: 3857, }, }), @@ -1723,7 +1782,7 @@ request: "GetFeature", typename: "zjd_dc:t_house_survey_border_village", //featureNS: 'nsgk_hc',//命名空间 URI - //cql_filter: cql_filter, + cql_filter: cql_filter, //featurePrefix: 'nationalwater',//工作区名称 //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开 outputFormat: "application/json", @@ -1739,6 +1798,7 @@ method: "POST", // *GET, POST, PUT, DELETE, etc. }) .then((res) => { + console.log(res); var geojsonmap = res.json(); return geojsonmap; }) @@ -2277,6 +2337,227 @@ // }); // + //地图定义 + var delete_map = ["mapZjd", "mapZrz","mapFsss"]; + //按照查询条件人名 定位地图-----------------start + $("#query").on("click", function () { + /** + * @api wfs服务空间查询 + * @param {*} wfsurl + * @param {*} srsName + * @param {*} typeName + * @param {*} drawType + * @param {option 可选} geometryField + */ + var val = that.seachText; + if (val == "") { + alert("请填写查询条件在查询"); + } else { + //分类查询查询农地、农房 + var difang; + //查询条件 + var cql_filter; + + console.log(this.$cookies); + //var cun = _this.villageDataObj.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 = "XH='" + val + "'" + "and dept_name='" + cun + "'"; + } else { + //循环判断查询条件 + if (difang[i] == "zjd_dc:t_house_survey_zjdzd") { + cql_filter = "zjddm='" + val + "'" + "and dept_name='" + cun + "'"; + } else if(difang[i] == "zjd_dc:t_house_survey_zrz") { + cql_filter = "zjddm='" + val + "'" + "and dept_name='" + cun + "'"; + } else if(difang[i] == "zjd_dc:t_house_survey_fsss") { + cql_filter = "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://192.168.31.150:8888/geoserver/mywork_mysql/wms', + url: "http://116.255.223.226: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.223.226: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, // 缩放持续时间，默认不需要设置 + }); + //特效动画实现 -----------------------------start + if (tach == 1 && once == 0) { + texiao_layer_fang = new ol.layer.Vector({ + source: new ol.source.Vector(), + }); + map.addLayer(texiao_layer_fang); + 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') //投影坐标转为地理坐标 + }); + + //var out =new ol.coordinate.Coordinate(datamap); + //var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy] + //var center = ol.extent.getCenter(extent); //获取边界区域的中心位置 + //map.getView().setCenter(center); //设置当前地图的显示中心位置 + circle.setStyle( + new ol.style.Style({ + image: new ol.style.Circle({ + radius: 0, + stroke: new ol.style.Stroke({ + color: "yellow", + size: 1, + }), + }), + }) + ); + texiao_layer_fang.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 { + texiao_layer_di = new ol.layer.Vector({ + source: new ol.source.Vector(), + }); + map.addLayer(texiao_layer_di); + 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') //投影坐标转为地理坐标 + }); + + //var out =new ol.coordinate.Coordinate(datamap); + //var extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[datamap]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy] + //var center = ol.extent.getCenter(extent); //获取边界区域的中心位置 + //map.getView().setCenter(center); //设置当前地图的显示中心位置 + circle.setStyle( + new ol.style.Style({ + image: new ol.style.Circle({ + radius: 0, + stroke: new ol.style.Stroke({ + color: "yellow", + size: 1, + }), + }), + }) + ); + texiao_layer_di.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 + } 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 $("#area").click(function () { console.log("进入测面"); @@ -2554,7 +2835,7 @@ request: "GetFeature", typename: "zjd_dc:t_house_survey_border_village", //featureNS: 'nsgk_hc',//命名空间 URI - //cql_filter: cql_filter, + cql_filter: cql_filter, //featurePrefix: 'nationalwater',//工作区名称 //featureTypes: ['nationalwater:01fir'],//查询图层，可以是同一个工作区下多个图层，逗号隔开 outputFormat: "application/json", @@ -2792,6 +3073,7 @@ } }); let cloneObj = JSON.parse(JSON.stringify(obj)); + that.dataSj = that.mapZjdData = cloneObj; } else if($("#info .featureInfo .featureInfo").text() == "t_house_survey_zrz"){ let obj = {}; @@ -3449,7 +3731,82 @@ } } }, + //地图查询 + toggleSearch() { + $("#query").trigger("click"); + }, + //显示和隐藏详情 + houseLandLookInfo(type, status) { + if (type == "show") { + this.houseLandLookAnmitFun("show"); + } else { + this.houseLandLookAnmitFun("hide"); + } + }, + //显示农地\农房详情 动画 + houseLandLookAnmitFun(type) { + if (type == "show") { + this.landHomesteadDetailsVisibile = true; + $(".landHomesteadDetails_wrap").css({ bottom: "-100vh" }); + $(".landHomesteadDetails_wrap").animate( + { + bottom: "0", + }, + 300 + ); + } else { + $(".landHomesteadDetails_wrap").css({ bottom: "0" }); + $(".landHomesteadDetails_wrap").animate( + { + bottom: "-100vh", + }, + 300 + ); + setTimeout(() => { + this.landHomesteadDetailsVisibile = false; + }, 300); + } + }, + //编辑农地信息 + editnfdInfo(type) { + this.currentType = 1; + this.farmlandEditSwitchVisbuleFun("hide"); + this.landHomesteadEditVisbileFun("show"); + }, + //删除农地信息 + deletefdInfo() { + this.$dialog + .confirm({ + title: "确认执行删除操作？", + message: "删除后内容不可恢复", + }) + .then(() => { + console.log(this.farmhouseStatus); + if (this.farmhouseStatus == 0) { + //农房 + // houseRemove(this.houseInfoList.id).then((res) => { + // if (res.code == 200) { + // this.hideEditNav(); + // // this.tGeoOrganization.orgCode = this.houseInfoList.orgCode; + // // coordinatesUpdateGeo(this.tGeoOrganization).then((res) => {}); + // } + // }); + } else { + //农地 + // landRemove(this.landInfoList.id).then((res) => { + // if (res.code == 200) { + // this.hideEditNav(); + // // this.tGeoOrganization.orgCode = this.landInfoList.orgCode; + // // coordinatesUpdateGeo(this.tGeoOrganization).then((res) => {}); + // } + // }); + } + }) + .catch(() => { + // on cancel + }); + }, } } @@ -3764,4 +4121,333 @@ border: 1px solid darkgray; } .van-sticky{position: fixed;top: 0;right: 0; left: 0;z-index: 9999;} + + .searchBar_wrap { + // display: none; + display: flex; + position: fixed; + bottom: 0%; + left: 0; + width: 100%; + padding: 28px 16px 28px 13px; + background: #fff; + border-top-left-radius: 15px; + border-top-right-radius: 15px; + .actionBar_wrap { + display: flex; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + background: #fff; + border-top-left-radius: 15px; + border-top-right-radius: 15px; + .m_list { + flex: 1; + display: flex; + justify-content: center; /* 相对父元素水平居中 */ + align-items: center; /* 子元素相对父元素垂直居中 */ + + .tensile, + .positioning, + .spacing, + .scale { + width: 76px; + height: 72px; + background: #ffffff; + border-radius: 8px; + box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.16); + .icon { + width: 76px; + height: 72px; + } + &.active { + background: #333; + &.tensile { + .icon { + background: url("../../assets/images/homestead/operation/tensile_active.png") + center center no-repeat; + background-size: 38px 50px; + } + } + &.positioning { + .icon { + background: url("../../assets/images/homestead/operation/positioning_active.png") + center center no-repeat; + background-size: 38px 48px; + } + } + &.spacing { + .icon { + background: url("../../assets/images/homestead/operation/spacing_active.png") + center center no-repeat; + background-size: 46px 46px; + } + } + &.scale { + .icon { + background: url("../../assets/images/homestead/operation/scale_active.png") + center center no-repeat; + background-size: 48px 48px; + } + } + } + } + .tensile { + .icon { + background: url("../../assets/images/homestead/operation/tensile.png") + center center no-repeat; + background-size: 38px 50px; + } + } + .positioning { + .icon { + background: url("../../assets/images/homestead/operation/positioning.png") + center center no-repeat; + background-size: 38px 48px; + } + } + .spacing { + .icon { + background: url("../../assets/images/homestead/operation/spacing.png") + center center no-repeat; + background-size: 46px 46px; + } + } + .scale { + .icon { + background: url("../../assets/images/homestead/operation/scale.png") + center center no-repeat; + background-size: 48px 48px; + } + } + .closes { + background: url("../../assets/images/homestead/searchBar_close.png") + no-repeat; + background-size: 100% 100%; + width: 72px; + height: 72px; + &.gray { + background: url("../../assets/images/homestead/searchBar_close_gray.png") + no-repeat; + background-size: 100% 100%; + } + } + .correct { + background: url("../../assets/images/homestead/searchBar_save.png") + no-repeat; + background-size: 100% 100%; + width: 72px; + height: 72px; + } + } + } + .searchBar_area { + flex: 1; + height: 80px; + background: #f1f1f1; + border: 1px solid #dfdfdf; + border-radius: 10px; + padding: 0 28px; + display: flex; + .bar_icon { + width: 50px; + height: 50px; + background: url("../../assets/images/homestead/searchBar_bar.png") + center center no-repeat; + background-size: 100% 100%; + 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; /* 子元素相对父元素垂直居中 */ + } + } + .searchBar_more { + flex: 0 0 80px; + background: url("../../assets/images/homestead/searchBar_add.png") center + center no-repeat; + 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%; + } + } + } + } + } + } + }