zhangzl
/
nsgk_mobile
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

地图筛选功能添加

wulanhaote
hbao 3 years ago
parent
f46ca1f259
commit
9a628d08b4
1 changed files with 218 additions and 49 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +218
    -49
      src/views/homesteadSurvey/list.vue

+ 218
- 49
src/views/homesteadSurvey/list.vue View File

@@ -446,9 +446,10 @@
</template>
</van-search>
<div class="searchBox" style="display: none;">
<van-cell center v-for="(item,index) in mapDataAll">
<van-cell center v-for="(item,index) in mapDataAll[0]">
<template #title>
<p><van-icon name="manager" /><span>{{item.syqr}}</span><span style="background: rgba(122, 201, 67, 0.4);color:#7ac943">{{item.houseDataConfirmStatus}}</span></p>
<p><van-icon name="manager" /><span>{{item.syqr}}</span><span style="background: rgba(122, 201, 67, 0.4);color:#7ac943">{{item.paceType}}</span>
<span style="background: rgba(122, 201, 67, 0.4);color:#7ac943">{{item.typeTc}}</span></p>
</template>
<template #default>
<p style="border: 1px solid #7ac943;color:#7ac943;" @click="zjdSs(item)">查看详情</p>
@@ -498,7 +499,7 @@
</div>

<div style="padding: 10px 15px;">
<van-checkbox name="all" shape="square" v-model="checkAllFlag" @click="checkAllArray">全选</van-checkbox>
<van-checkbox name="all" shape="square" id="checkAll" v-model="checkAllFlag" @click="checkAllArray">全选</van-checkbox>
<div style="height: 15px;"></div>
<van-checkbox-group v-model="checked" @change="handleChecked" ref="checkboxGroup">
<van-checkbox name="fsssSx" shape="square" style="margin-bottom: 5px;" id="fsssSx">
@@ -1284,7 +1285,7 @@
selectionIconShow: false,
//搜索栏目-操作栏显隐
searchBarOperVisbile: false,
mapDataAll: "",
mapDataAll: [],
showSearch:false,
bottomHeight:'0px',
//搜索---end
@@ -1302,9 +1303,8 @@
dataForm: {
imageUrl: []
},
dataList: [["fsssSx"],["zjdSx"],["zrzSx"]],
//地图使用 --end
checkBoxAll:[]
dataList: [["fsssSx"],["zjdSx"],["zrzSx"]], //地图使用 --end
checkBoxAll:[],
};
},
mounted(){
@@ -2119,7 +2119,9 @@
zoom: 10,
minZoom: 5, //地图缩小限制
maxZoom: 18.3, //地图放大限制
pinchRotate: false, //禁止地图旋转
}),
interactions: ol.interaction.defaults({
pinchRotate: false // 移动端禁止地图旋转
}),
});

@@ -2595,9 +2597,9 @@
Zb =[115.452752, 31.789033];
}
//获取坐标点LocationManager
geoGps().then(response => {
});
// geoGps().then(response => {
//
// });
//矢量标注样式设置函数，设置image为图标ol.style.Icon
function createLabelStyle() {
return new ol.style.Style({
@@ -2737,7 +2739,7 @@
$("#query").on("click", function () {
//数据库查询数据------------------------------------------------------start
var val = that.seachText;
that.mapDataAll ="";
that.mapDataAll =[];
if (val == "") {
that.$toast('请填写查询条件再查询');
} else {
@@ -2754,22 +2756,25 @@
"syqr" : val,
"pageSize":20,
}
console.log(params);
listZjdzd(params).then((response) => {
if(response.rows.length>=0){
that.mapDataAll = response.rows;
var mapNum = that.mapDataAll[hg].houseDataConfirmStatus;
that.mapDataAll = response.rows;
console.log(that.mapDataAll);
for(var hg=0; hg < that.mapDataAll.length ; hg++){
for(var hg=0; hg < that.mapDataAll.length; hg++){
console.log(that.mapDataAll[hg].houseDataConfirmStatus)
var mapNum = that.mapDataAll[hg].houseDataConfirmStatus;
if(mapNum == "UNCONFIRMED"){
that.mapDataAll[hg].houseDataConfirmStatus = "未核查";
that.mapDataAll[0][hg].paceType = "未核查";
} else if (mapNum == "CONFIRMED"){
that.mapDataAll[hg].houseDataConfirmStatus = "已核查";
that.mapDataAll[0][hg].paceType = "已核查";
}else{
that.mapDataAll[hg].houseDataConfirmStatus = "";
}
that.mapDataAll[0][hg].typeTc="宅基地";
if (that.mapDataAll[hg] !=null && that.mapDataAll[hg].theGeom != null && that.mapDataAll[hg].theGeom != "") {
that.mapDataAll[hg].createBy = 'mapTheGeomZjdId';
//that.mapDataAll[hg].createBy = 'mapTheGeomZjdId';
var hc_land = new ol.layer.Vector({
title: "add Layer",
source: new ol.source.Vector({
@@ -2795,7 +2800,27 @@
duration: 1000, // 缩放持续时间，默认不需要设置
});
}
console.log(that.mapDataAll[0][hg].zjddm);
// listFsss(paramsZrz).then((response) => {
// console.log(response);
// that.mapDataAll.push(response.rows);
// });
}
// var mapZrzFor = that.mapDataAll[0].length+1;
// console.log(mapZrzFor);
// for(var mapFor=0;mapZrzFor>mapFor;mapFor++){
// //查询自然幢
// let paramsZrz = {
// "deptId" : that.$cookies.get("item").deptId,
// "zjddm" : that.mapDataAll[0][mapFor].zjddm,
// "pageSize":20,
// }
// listZrz(paramsZrz).then((response) => {
// console.log(response);
// that.mapDataAll[0].
// that.mapDataAll[0].push(response.rows);
// });
// }
setTimeout(function () {
that.showSearch = true ;
$('.searchBox').css('display','block')
@@ -3071,30 +3096,38 @@
//按照查询 定位地图-----------------end

//筛选附属设施-----------------------------------start
// $("#fsssSx").click(function () {
// console.log(that.checked);
// // if(!event.target.checked){
// // map.addLayer(fsssTc);
// // }else {
// // map.removeLayer(fsssTc);
// // }
// });
// $("#zrzSx").click(function () {
// console.log(that.checked);
// // if(!event.target.checked){
// // map.addLayer(zrzTc);
// // }else {
// // map.removeLayer(zrzTc);
// // }
// });
// $("#zjdSx").click(function () {
// console.log(that.checked);
// // if(!event.target.checked){
// // map.addLayer(zjdTc);
// // }else {
// // map.removeLayer(zjdTc);
// // }
// });
$("#fsssSx").click(function () {
if(!that.fsssSx){
map.addLayer(fsssTc);
}else {
map.removeLayer(fsssTc);
}
});
$("#zrzSx").click(function () {
if(!that.zrzSx){
map.addLayer(zrzTc);
}else {
map.removeLayer(zrzTc);
}
});
$("#zjdSx").click(function () {
if(!that.zjdSx){
map.addLayer(zjdTc);
}else {
map.removeLayer(zjdTc);
}
});
$("#checkAll").click(function () {
if(!that.fsssSx && !that.zjdSx && !that.zrzSx){
map.addLayer(zjdTc);
map.addLayer(zrzTc);
map.addLayer(fsssTc);
}else {
map.removeLayer(zrzTc);
map.removeLayer(zjdTc);
map.removeLayer(fsssTc);
}
});
//筛选附属设施-----------------------------------end
// //获取类型开始 侧面-----------------------------------------------------------------start
//样式加载定义
@@ -3137,7 +3170,8 @@
//text: "标注点", //文本内容
fill: new ol.style.Fill({
//文本填充样式（即文字颜色)
color: "#FF6666",
color: "#FFFFFF",
width: 10,
}),
overflow: false //超出面的部分不显示
}),
@@ -3553,6 +3587,7 @@
that.mapZjdTeAll.mapZrzAData ={};
that.mapZjdTeAll.mapFsssAData ={};
that.mapZjdDataTure ="";
var hc_land_on;
setTimeout(() => {
if ($("#info .featureInfo .featureInfo").text() == "t_house_survey_zjdzd") {
that.mapHasDateStatus = 2;
@@ -3701,13 +3736,44 @@
// }
// }
// });
getZjdzd(669).then((response) => {
getZjdzd(item.id).then((response) => {
console.log(response);
that.mapZjdData = response.data;
that.mapZjdData.active = 1;
that.mapZjdTeAll.mapZjdAData =that.mapZjdData;
that.mapZjdDataTure = 1;
that.zjdHcDy = obj.zjddm;
var styleZjd = new ol.style.Style({
stroke: new ol.style.Stroke({
//边界样式
color: "#CCFF66",
width: 6,
}),
});
hc_land_on = 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.mapZjdData.theGeom + ", \"properties\":" + JSON.stringify(that.mapZjdData) + "}"),
}),
style: styleZjd
});
map.addLayer(hc_land_on);
var maxXMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.maxX;
var maxYMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.maxY;
var minXMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.minX;
var minYMap = hc_land_on.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, // 缩放持续时间，默认不需要设置
});
});
//let cloneObj = JSON.parse(JSON.stringify(obj));
if(obj.zdmj != ""){
@@ -3767,15 +3833,51 @@
// });
//let cloneObj = JSON.parse(JSON.stringify(obj));
//that.mapZrzData = cloneObj;
getZjdzd(669).then((response) => {
let params = {
"deptId" : that.$cookies.get("item").deptId,
"zjddm" : obj.zjddm,
"pageSize":20,
}
listZjdzd(params).then((response) => {
that.mapZjdAData = response.data;
that.mapZjdAData.active = 1;
that.mapZjdTeAll.mapZjdAData = that.mapZjdAData;
getZrz(8).then((response) => {
getZrz(item.id).then((response) => {
that.mapZrzData = response.data;
that.mapZrzData.active = 3;
that.mapZjdTeAll.mapZrzAData =that.mapZrzData;
that.zjdHcDy = obj.zjddm;
var styleZjd = new ol.style.Style({
stroke: new ol.style.Stroke({
//边界样式
color: "#CCFF66",
width: 6,
}),
});
hc_land_on = 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.mapZrzData.theGeom + ", \"properties\":" + JSON.stringify(that.mapZrzData) + "}"),
}),
style: styleZjd
});
map.addLayer(hc_land_on);
var maxXMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.maxX;
var maxYMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.maxY;
var minXMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.minX;
var minYMap = hc_land_on.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, // 缩放持续时间，默认不需要设置
});
});
});
if(obj.scjzmj != ""){
@@ -3928,15 +4030,51 @@
// });
//let cloneObj = JSON.parse(JSON.stringify(obj));
//that.mapFsssData = cloneObj;
getZjdzd(669).then((response) => {
let params = {
"deptId" : that.$cookies.get("item").deptId,
"zjddm" : obj.zjddm,
"pageSize":20,
}
listZjdzd(params).then((response) => {
that.mapZjdData = response.data;
that.mapZjdData.active = 1;
that.mapZjdTeAll.mapZjdAData = that.mapZjdData;
getfsss(12).then((response) => {
getfsss(item.id).then((response) => {
that.mapfsssData.active = 4;
that.mapfsssData = response.data;
that.mapZjdTeAll.mapFsssAData = that.mapfsssData;
that.zjdHcDy = obj.zjddm;
var styleZjd = new ol.style.Style({
stroke: new ol.style.Stroke({
//边界样式
color: "#CCFF66",
width: 6,
}),
});
hc_land_on = 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.mapfsssData.theGeom + ", \"properties\":" + JSON.stringify(that.mapfsssData) + "}"),
}),
style: styleZjd
});
map.addLayer(hc_land_on);
var maxXMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.maxX;
var maxYMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.maxY;
var minXMap = hc_land_on.values_.source.featuresRtree_.rbush_.data.minX;
var minYMap = hc_land_on.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, // 缩放持续时间，默认不需要设置
});
});
});
if(obj.jzmj != ""){
@@ -4416,13 +4554,43 @@
this.mapZjdTeAll.mapZrzAData ={};
this.mapZjdTeAll.mapFsssAData ={};
//this.mapZjdTeAll.active =1;
if(item.typeTc =="宅基地"){
getZjdzd(item.id).then((response) => {
this.mapZjdData = response.data;
this.mapZjdData.active = 1;
console.log(this.mapZjdData);
this.mapZjdTeAll.active = 1;
this.mapZjdTeAll.mapZjdAData = this.mapZjdData;
this.$cookies.set("search",this.mapZjdTeAll);
setTimeout(() => {
this.$router.push({path:'/homesteadSurvey/add'});
}, 500);
});
}else if(item.typeTc =="自然幢"){
//let =
getZjdzd(item.id).then((response) => {
this.mapZrzData = response.data;
console.log(this.mapZrzData);
this.mapZjdTeAll.active = 3;
this.mapZjdTeAll.mapZrzAData = this.mapZrzData;
this.$cookies.set("search",this.mapZjdTeAll);
setTimeout(() => {
this.$router.push({path:'/homesteadSurvey/add'});
}, 500);
});
}else if(item.typeTc =="附属设施"){
getfsss(item.id).then((response) => {
this.mapFsssData = response.data;
console.log(this.mapZjdData);
this.mapZjdTeAll.active = 4;
this.mapZjdTeAll.mapFsssAData = this.mapFsssData;
this.$cookies.set("search",this.mapZjdTeAll);
setTimeout(() => {
this.$router.push({path:'/homesteadSurvey/add'});
}, 500);
});
}else{
this.$toast("无数据请检查后进入核查页面");
}
},
//地图查询
toggleSearch() {
@@ -4458,6 +4626,7 @@
},
//单选
handleChecked(value) {
console.log(value);
// this.checkAllFlag = this.CheckedAllArr.length == this.dataList.length;
if (value.length<3){
this.checkAllFlag = false;


Write Preview
Loading…
Cancel
Save