zhangzl
/
nsgk_mobile
2
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

地图筛选功能添加

wulanhaote
hbao 3 年之前
父節點
f46ca1f259
當前提交
9a628d08b4
共有 1 個檔案被更改，包括 218 行新增 和 49 行删除
統一視圖
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 查看文件

@@ -446,9 +446,10 @@
</template> </template>
</van-search> </van-search>
<div class="searchBox" style="display: none;"> <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> <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>
<template #default> <template #default>
<p style="border: 1px solid #7ac943;color:#7ac943;" @click="zjdSs(item)">查看详情</p> <p style="border: 1px solid #7ac943;color:#7ac943;" @click="zjdSs(item)">查看详情</p>
@@ -498,7 +499,7 @@
</div> </div>


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


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


//筛选附属设施-----------------------------------start //筛选附属设施-----------------------------------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 //筛选附属设施-----------------------------------end
// //获取类型开始 侧面-----------------------------------------------------------------start // //获取类型开始 侧面-----------------------------------------------------------------start
//样式加载定义 //样式加载定义
@@ -3137,7 +3170,8 @@
//text: "标注点", //文本内容 //text: "标注点", //文本内容
fill: new ol.style.Fill({ fill: new ol.style.Fill({
//文本填充样式（即文字颜色) //文本填充样式（即文字颜色)
color: "#FF6666",
color: "#FFFFFF",
width: 10,
}), }),
overflow: false //超出面的部分不显示 overflow: false //超出面的部分不显示
}), }),
@@ -3553,6 +3587,7 @@
that.mapZjdTeAll.mapZrzAData ={}; that.mapZjdTeAll.mapZrzAData ={};
that.mapZjdTeAll.mapFsssAData ={}; that.mapZjdTeAll.mapFsssAData ={};
that.mapZjdDataTure =""; that.mapZjdDataTure ="";
var hc_land_on;
setTimeout(() => { setTimeout(() => {
if ($("#info .featureInfo .featureInfo").text() == "t_house_survey_zjdzd") { if ($("#info .featureInfo .featureInfo").text() == "t_house_survey_zjdzd") {
that.mapHasDateStatus = 2; that.mapHasDateStatus = 2;
@@ -3701,13 +3736,44 @@
// } // }
// } // }
// }); // });
getZjdzd(669).then((response) => {
getZjdzd(item.id).then((response) => {
console.log(response); console.log(response);
that.mapZjdData = response.data; that.mapZjdData = response.data;
that.mapZjdData.active = 1; that.mapZjdData.active = 1;
that.mapZjdTeAll.mapZjdAData =that.mapZjdData; that.mapZjdTeAll.mapZjdAData =that.mapZjdData;
that.mapZjdDataTure = 1; that.mapZjdDataTure = 1;
that.zjdHcDy = obj.zjddm; 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)); //let cloneObj = JSON.parse(JSON.stringify(obj));
if(obj.zdmj != ""){ if(obj.zdmj != ""){
@@ -3767,15 +3833,51 @@
// }); // });
//let cloneObj = JSON.parse(JSON.stringify(obj)); //let cloneObj = JSON.parse(JSON.stringify(obj));
//that.mapZrzData = cloneObj; //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 = response.data;
that.mapZjdAData.active = 1; that.mapZjdAData.active = 1;
that.mapZjdTeAll.mapZjdAData = that.mapZjdAData; that.mapZjdTeAll.mapZjdAData = that.mapZjdAData;
getZrz(8).then((response) => {
getZrz(item.id).then((response) => {
that.mapZrzData = response.data; that.mapZrzData = response.data;
that.mapZrzData.active = 3; that.mapZrzData.active = 3;
that.mapZjdTeAll.mapZrzAData =that.mapZrzData; that.mapZjdTeAll.mapZrzAData =that.mapZrzData;
that.zjdHcDy = obj.zjddm; 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 != ""){ if(obj.scjzmj != ""){
@@ -3928,15 +4030,51 @@
// }); // });
//let cloneObj = JSON.parse(JSON.stringify(obj)); //let cloneObj = JSON.parse(JSON.stringify(obj));
//that.mapFsssData = cloneObj; //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 = response.data;
that.mapZjdData.active = 1; that.mapZjdData.active = 1;
that.mapZjdTeAll.mapZjdAData = that.mapZjdData; that.mapZjdTeAll.mapZjdAData = that.mapZjdData;
getfsss(12).then((response) => {
getfsss(item.id).then((response) => {
that.mapfsssData.active = 4; that.mapfsssData.active = 4;
that.mapfsssData = response.data; that.mapfsssData = response.data;
that.mapZjdTeAll.mapFsssAData = that.mapfsssData; that.mapZjdTeAll.mapFsssAData = that.mapfsssData;
that.zjdHcDy = obj.zjddm; 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 != ""){ if(obj.jzmj != ""){
@@ -4416,13 +4554,43 @@
this.mapZjdTeAll.mapZrzAData ={}; this.mapZjdTeAll.mapZrzAData ={};
this.mapZjdTeAll.mapFsssAData ={}; this.mapZjdTeAll.mapFsssAData ={};
//this.mapZjdTeAll.active =1; //this.mapZjdTeAll.active =1;
if(item.typeTc =="宅基地"){
getZjdzd(item.id).then((response) => { getZjdzd(item.id).then((response) => {
this.mapZjdData = response.data; this.mapZjdData = response.data;
this.mapZjdData.active = 1;
console.log(this.mapZjdData);
this.mapZjdTeAll.active = 1;
this.mapZjdTeAll.mapZjdAData = this.mapZjdData; this.mapZjdTeAll.mapZjdAData = this.mapZjdData;
this.$cookies.set("search",this.mapZjdTeAll); this.$cookies.set("search",this.mapZjdTeAll);
setTimeout(() => {
this.$router.push({path:'/homesteadSurvey/add'}); 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() { toggleSearch() {
@@ -4458,6 +4626,7 @@
}, },
//单选 //单选
handleChecked(value) { handleChecked(value) {
console.log(value);
// this.checkAllFlag = this.CheckedAllArr.length == this.dataList.length; // this.checkAllFlag = this.CheckedAllArr.length == this.dataList.length;
if (value.length<3){ if (value.length<3){
this.checkAllFlag = false; this.checkAllFlag = false;


Write Preview
Loading…
取消
儲存