zhangzl
/
nsgk_mobile
2
0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Ver código fonte

优化界面

wulanhaote
liuminjian 4 anos atrás
pai
c88c4ae360
commit
6f2a64c4ea
1 arquivos alterados com 586 adições e 83 exclusões
Visão dividida
Opções de diferenças
Mostrar estatísticas Baixar arquivo de patch Baixar arquivo de diferenças
  1. +586
    -83
      src/views/homestead/index.vue

+ 586
- 83
src/views/homestead/index.vue Ver arquivo

@@ -1,11 +1,15 @@
<template>
<div class="app-container">
<!-- <div style="position: relative; z-index: 999999"> -->
<div style="display: none">
<select id="zhen"></select>
<select id="cun" autofocus></select>
<input id="texiao_fang" type="button" value="特效农房" /> 
<input id="texiao_di" type="button" value="特效农地" /> 
<input id="qingchu" type="button" value="清除" /> 
<button id="drawPolygon">绘制地图</button>
<button id="drawRemove">清除画图</button>
<button id="drawReset">还原之前图层</button>
</div>
<div class="map_area" id="mapWrap"></div>
<!--列表 定位-->
@@ -42,6 +46,8 @@
class="flex_block"
v-for="(items, index) in hcBottonHouseArr"
:key="index"
:class="{ active: selectChooseOrder == index }"
@click="housingSerial(items, index)"
>
<div class="name_text">{{ items.name }}</div>
<div class="square_text">{{ items.mj }}㎡</div>
@@ -64,6 +70,8 @@
class="flex_block"
v-for="(items, index) in hcBottonLandArr"
:key="index"
:class="{ active: selectChooseOrder == index }"
@click="housingSerial(items, index)"
>
<div class="name_text">{{ items.name }}</div>
<div class="square_text">{{ items.mj }}亩</div>
@@ -159,7 +167,13 @@
<div class="searchBar_wrap">
<div class="actionBar_wrap" v-if="searchBarOperVisbile">
<div class="m_list">
<div class="tensile active"><div class="icon"></div></div>
<div
class="tensile"
:class="{ active: draw.drawMapPolygon }"
@click="drawMapPolygonFun"
>
<div class="icon"></div>
</div>
</div>
<div class="m_list">
<div class="positioning">
@@ -182,7 +196,7 @@
<div class="icon"></div>
</div>
</div>
<div class="m_list">
<div class="m_list" @click="farmlandEditSwitchFun">
<div class="correct"></div>
</div>
</div>
@@ -232,7 +246,8 @@

<!--房地全部信息展示-->
<div class="landHomesteadDetails_wrap">
<div class="content_mian">
<!---农房-->
<div class="content_mian" v-if="farmhouseStatus == 0">
<!--内容-->
<div class="serial_flex">
<div class="number">农房编号<span>31</span></div>
@@ -323,13 +338,92 @@
<div class="editor_icon"></div>
</div>
</div>
<!---农地-->
<div class="content_mian" v-else-if="farmhouseStatus == 1">
<!--内容-->
<div class="serial_flex">
<div class="number">农地编号<span>31</span></div>
<div class="localhref"></div>
</div>
<!--1-->
<div class="flex_block">
<span class="describe">农地使用人名称</span
><span class="content">孙全礼</span>
</div>
<!--1-->
<div class="flex_block">
<span class="describe">村名</span><span class="content">南郊村</span>
</div>
<!--1-->
<div class="flex_block">
<span class="describe">是否有审批手续</span
><span class="content">是</span>
</div>
<!--1-->
<div class="flex_block">
<span class="describe">土地证号</span
><span class="content">38718490184</span>
</div>
<!--1-->
<div class="flex_block">
<span class="describe">土地面积</span
><span class="content">大约3亩</span>
</div>
<!--1-->
<div class="flex_block">
<span class="describe">现状情况</span
><span class="content">已流转</span>
</div>
<!--1-->
<div class="flex_block">
<span class="describe">是否有流转意向</span
><span class="content"></span>
</div>
<!--1-->
<div class="flex_block">
<span class="describe">承包人</span
><span class="content">李福任</span>
</div>
<!--1-->
<div class="flex_block">
<span class="describe">流转剩余年限</span
><span class="content">10年</span>
</div>
<!--1-->
<div class="flex_block">
<span class="describe">流转合同截止日期</span
><span class="content">2021.7.1-2031. 6.30</span>
</div>

<!--上传图片-->
<div class="uploadPictures_block">
<div class="statusQuo">
<div class="picture"></div>
<div class="describe">现<br />状<br />图<br />片</div>
</div>
<div class="statusQuo">
<div class="picture"></div>
<div class="describe">历<br />史<br />图<br />片</div>
</div>
</div>
<!--编辑-->
<div class="editor_block">
<div class="editor_icon"></div>
</div>
</div>
</div>
<!--房地全部信息编辑-->
<div class="landHomesteadEdit_wrap">
<div
class="landHomesteadEdit_wrap"
v-show="landHomesteadEditVisbile"
style="bottom: 0"
>
<div class="content_mian">
<div class="info_title">录入宗地信息</div>
<div class="flex_main">
<!--1-->
<div class="info_title">
{{ this.farmhouseStatus == 0 ? "录入宗地信息" : "录入农地信息" }}
</div>
<!-- -->
<div class="flex_main" v-if="this.farmhouseStatus == 0">
<div class="flex_block">
<div class="number_s50 mr50">
<div class="title_m">农房编号</div>
@@ -562,21 +656,233 @@
</div>
</div>
</div>
<div class="flex_main" v-else-if="this.farmhouseStatus == 1">
<!--1-->
<div class="flex_block">
<div class="number_s50 mr50">
<div class="title_m">农地编号</div>
<div class="input_m">
<van-field
v-model="message"
placeholder="农地编号"
class="landHomesteadEdit_input"
/>
</div>
</div>
<div class="number_s50">
<div class="title_m">农地使用人名称</div>
<div class="input_m">
<van-field
v-model="message"
placeholder="农地使用人名称"
class="landHomesteadEdit_input"
/>
</div>
</div>
</div>
<!--1-->
<div class="flex_block">
<div class="number_s60 mr50">
<div class="title_m">村名</div>
<div class="input_m">
<van-field
v-model="message"
placeholder="村名"
class="landHomesteadEdit_input"
/>
</div>
</div>
<div class="number_s40">
<div class="title_m">土地证号</div>
<div class="input_m">
<van-field
v-model="message"
placeholder="土地证号"
class="landHomesteadEdit_input"
/>
</div>
</div>
</div>
<!--1-->
<div class="flex_block">
<div class="number_s60 mr50">
<div class="title_m">是否有审批手续</div>
<div class="input_m select">
<i class="dropDown_icon"></i>
<van-field
v-model="message"
readonly
clickable
name="picker"
placeholder="是否有审批手续"
class="landHomesteadEdit_input"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<van-picker
show-toolbar
:columns="columns"
@confirm="onConfirm"
@cancel="showPicker = false"
/>
</van-popup>
</div>
</div>
<div class="number_s40">
<div class="title_m">现状情况</div>
<div class="input_m select">
<i class="dropDown_icon"></i>
<van-field
v-model="message"
readonly
clickable
name="picker"
placeholder="现状情况"
class="landHomesteadEdit_input"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<van-picker
show-toolbar
:columns="columns"
@confirm="onConfirm"
@cancel="showPicker = false"
/>
</van-popup>
</div>
</div>
</div>

<!--1-->
<div class="flex_block">
<div class="number_s35 mr50">
<div class="title_m">农用地类型</div>
<div class="input_m select">
<i class="dropDown_icon"></i>
<van-field
v-model="message"
readonly
clickable
name="picker"
placeholder="农用地类型"
class="landHomesteadEdit_input"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<van-picker
show-toolbar
:columns="columns"
@confirm="onConfirm"
@cancel="showPicker = false"
/>
</van-popup>
</div>
</div>
<div class="number_s35 mr50">
<div class="title_m">土地面积</div>
<div class="input_m about">
<span class="about_symbol">≈</span>
<van-field
v-model="message"
placeholder="土地面积"
class="landHomesteadEdit_input"
/>
</div>
</div>
<div class="number_s30">
<div class="title_m">是否有流转意向</div>
<div class="input_m select">
<i class="dropDown_icon"></i>
<van-field
v-model="message"
readonly
clickable
name="picker"
placeholder="是否有流转意向"
class="landHomesteadEdit_input"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<van-picker
show-toolbar
:columns="columns"
@confirm="onConfirm"
@cancel="showPicker = false"
/>
</van-popup>
</div>
</div>
</div>

<!--1-->
<div class="flex_block">
<div class="number_s50 mr50">
<div class="title_m">承包人</div>
<div class="input_m">
<van-field
v-model="message"
placeholder="承包人"
class="landHomesteadEdit_input"
/>
</div>
</div>
<div class="number_s50">
<div class="title_m">流转剩余年限</div>
<div class="input_m">
<van-field
v-model="message"
placeholder="流转剩余年限"
class="landHomesteadEdit_input"
/>
</div>
</div>
</div>

<!--1-->
<div class="flex_block">
<div class="number_s100">
<div class="title_m">流转合同截止日期</div>
<div class="input_m">
<van-field
v-model="message"
placeholder="流转合同截止日期"
class="landHomesteadEdit_input"
readonly
@click="landHomesteadEditcalendar = true"
/>
<van-calendar
v-model="landHomesteadEditcalendar"
@confirm="landHomesteadEdConfirm"
type="range"
/>
<!-- :min-date="new Date(2018, 1, 1)" :max-date="new Date(2010, 0, 31)" -->
</div>
</div>
</div>

<!--2-->
<div class="uploadPicturesFlex_block">
<div class="title_m">上传图片</div>
<div class="main_m">
<van-uploader v-model="fileList" multiple :max-count="2" />
</div>
</div>
</div>
</div>
<div class="footer_main">
<div class="cancel">取消</div>
<div class="save">保存</div>
<div class="cancel" @click="landHomesteadEditCancel">取消</div>
<div class="save" @click="landHomesteadEditSave">保存</div>
</div>
</div>
<!--农地农房选择-->
<div class="farmlandEditSwitch_wrap">
<div class="farmlandEditSwitch_wrap" v-show="farmlandEditSwitchVisbule">
<div class="mains">
<div class="close_btn"></div>
<div class="farmhouse">
<div class="close_btn" @click="farmlandEditFun"></div>
<div class="farmhouse" @click="addNewPlot('farmhouse')">
<div class="icons"></div>
<p class="names">农房</p>
</div>
<div class="farmland">
<div class="farmland" @click="addNewPlot('land')">
<div class="icons"></div>
<p class="names">农地</p>
</div>
@@ -631,9 +937,26 @@ export default {
hcBottonHouseArr: [],
//待租列表 地
hcBottonLandArr: [],

//搜索栏目-操作栏显隐
searchBarOperVisbile: false,
//地图绘制状态
draw: {
drawMapPolygon: false, //绘制地图
},
//地图绘制坐标存储
coordinateList: [],
//新建选择农房土地弹窗 显隐
farmlandEditSwitchVisbule: false, //
//编辑房屋土地信息--显隐
landHomesteadEditVisbile: false,
//查看编辑房屋、土地--类型 0 农房 1 农地
farmhouseStatus: 0,
//新增日历显影
landHomesteadEditcalendar: false,
//选择顺序
selectChooseOrder: 0,

// <van-calendar v-model="landHomesteadEditcalendar" @confirm="" />

//以下删
message: "",
@@ -646,6 +969,117 @@ export default {
this.initAxios();
},
methods: {
//绘制多边形地图
drawMapPolygonFun() {
let drawMapPolygon = this.draw.drawMapPolygon;
if (drawMapPolygon == false) {
this.$set(this.draw, "drawMapPolygon", true);
$("#drawPolygon").trigger("click");
} else {
$("#drawRemove").trigger("click");
this.$set(this.draw, "drawMapPolygon", false);
}
},
//新建选择农房土地弹窗
farmlandEditSwitchFun() {
if (this.coordinateList.length == 0) {
this.$toast("请先完成绘制");
return false;
}

this.farmlandEditSwitchVisbuleFun("show");
this.searchBarOperVisbile = false;
},
//关闭选择农房土地
farmlandEditFun() {
this.farmlandEditSwitchVisbuleFun("hide");

//初始化地图
this.initDraw();
},
addNewPlot(type) {
this.farmlandEditSwitchVisbuleFun("hide");
this.landHomesteadEditVisbileFun("show");

//farmhouse农房 land农地
if (type == "farmhouse") {
this.farmhouseStatus = 0;
} else if (type == "land") {
this.farmhouseStatus = 1;
}
},
//新增地块 编辑页 显影
landHomesteadEditVisbileFun(type) {
if (type == "show") {
this.landHomesteadEditVisbile = true;
$(".landHomesteadEdit_wrap").css({ bottom: "-100vh" });
$(".landHomesteadEdit_wrap").animate(
{
bottom: "0",
},
300
);
} else {
$(".landHomesteadEdit_wrap").css({ bottom: "0" });
$(".landHomesteadEdit_wrap").animate(
{
bottom: "-100vh",
},
300
);
setTimeout(() => {
this.landHomesteadEditVisbile = false;
}, 300);
}
},
//选择农地 农房显影
farmlandEditSwitchVisbuleFun(type) {
if (type == "show") {
this.farmlandEditSwitchVisbule = true;
$(".farmlandEditSwitch_wrap").css({ opacity: "0" });
$(".farmlandEditSwitch_wrap").animate(
{
opacity: "1",
},
300
);
} else {
$(".farmlandEditSwitch_wrap").css({ opacity: "1" });
$(".farmlandEditSwitch_wrap").animate(
{
opacity: "0",
},
300
);
setTimeout(() => {
this.farmlandEditSwitchVisbule = false;
}, 300);
}
},
//新增地块 编辑页 取消
landHomesteadEditCancel() {
this.landHomesteadEditVisbileFun("hide");
this.farmlandEditSwitchVisbuleFun("show");
},
//新增地块 编辑页 保存
landHomesteadEditSave() {
this.landHomesteadEditVisbileFun("hide");
this.initDraw();
},

landHomesteadEdConfirm(data) {
this.landHomesteadEditcalendar = false;
//获取日历的值
},
//初始化绘制
initDraw() {
//清除数据
$("#drawRemove").trigger("click");
$("#drawReset").trigger("click");
this.coordinateList = [];

this.draw.drawMapPolygon = false; //绘制地图
},
initAxios() {
//获取区
this.mapAreaSelectValue();
@@ -793,6 +1227,8 @@ export default {
this.searchBarOperVisbile = true;
} else {
this.searchBarOperVisbile = false;
//初始化绘制
this.initDraw();
}
},
townVisbileFun() {
@@ -917,6 +1353,17 @@ export default {
this.selectChooseOrder = 0;
},

housingSerial(item, index) {
this.selectChooseOrder = index;
if (item.type == "house") {
// $("#texiao_fang").val(item.name);
// $("#texiao_fang").trigger("click");
} else {
// $("#texiao_di").val(item.name);
// $("#texiao_di").trigger("click");
}
},

//加载地图
mapBackground() {
let _this = this;
@@ -1532,72 +1979,119 @@ export default {
console.log("++++++++++++" + cun);
//业务图层 wms服务
//for (var i = 0; i < difang.length; i++) {
///if (difang[i] == "nsgk_hc:t_geo_hc_house") {
cql_filter = "CM='" + cun + "'";
//} else {
// cql_filter = "CM='" + cun + "'";
//}
nongZt = 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,
//'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,
//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.
///if (difang[i] == "nsgk_hc:t_geo_hc_house") {
cql_filter = "CM='" + cun + "'";
//} else {
// cql_filter = "CM='" + cun + "'";
//}
nongZt = 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,
//'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,
//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((res) => {
var geojsonmap = res.json();
return geojsonmap;
})
.then((data) => {
//var datamap = data.bbox;
// var datamap = data.features[0].bbox;
// map.getView().animate({
// // 只设置需要的属性即可
// center: datamap, // 中心点
// zoom: 15, // 缩放级别
// rotation: undefined, // 缩放完成view视图旋转弧度
// duration: 1000, // 缩放持续时间，默认不需要设置
// });
})
.catch((error) => {
console.log("【异常】", error);
});
map.addLayer(nongZt);
.then((data) => {
//var datamap = data.bbox;
// var datamap = data.features[0].bbox;
// map.getView().animate({
// // 只设置需要的属性即可
// center: datamap, // 中心点
// zoom: 15, // 缩放级别
// rotation: undefined, // 缩放完成view视图旋转弧度
// duration: 1000, // 缩放持续时间，默认不需要设置
// });
})
.catch((error) => {
console.log("【异常】", error);
});
map.addLayer(nongZt);

//}
});
//村定位查询-------------------------------------end

//开始绘制地图 ------------------- start

var vector_drawing;
var draw;
//开始绘制地图
$("#drawPolygon").click(function () {
console.log("111");
//map.removeLayer(zjd_land);
map.removeLayer(vector_drawing);
//var source = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: new ol.source.Vector(),
});
map.addLayer(vector_drawing);

function addInteraction() {
draw = new ol.interaction.Draw({
source: vector_drawing.getSource(),
type: "Polygon",
});
draw.on("drawend", function (evt) {
var feature = evt.feature;
var geometry = feature.getGeometry();
var coordinate = geometry.getCoordinates();
console.log("打印" + coordinate);
_this.coordinateList.push(coordinate);

//that.drawInsert = coordinate;
});
map.addInteraction(draw);
}

addInteraction();
});
//清除画图鼠标点击事件
$("#drawRemove").click(function () {
map.removeInteraction(draw);
});
//还原之前图层
$("#drawReset").click(function () {
map.removeLayer(vector_drawing);
//map.addLayer(zjd_land);
});

//开始绘制地图 ------------------- end
},

/*以下删*/
@@ -1703,7 +2197,7 @@ export default {
.title_m {
color: #333;
line-height: 36px;
padding: 20px 40px 32px;
padding: 20px 40px 22px;
.name {
font-size: 40px;
line-height: 42px;
@@ -1721,7 +2215,7 @@ export default {

.main_m {
overflow-y: auto;
padding: 0 40px;
padding: 10px 0;
// height: 300px;
flex: 1;
.flex_block {
@@ -1729,6 +2223,10 @@ export default {
display: flex;
// justify-content: center; /* 相对父元素水平居中 */
align-items: center; /* 子元素相对父元素垂直居中 */
padding: 0 40px;
&.active {
box-shadow: 0px 0px 10px rgba(24, 45, 51, 0.5);
}
.name_text {
font-size: 34px;
flex: 1;
@@ -2181,6 +2679,7 @@ export default {
left: 0;
bottom: 0;
width: 100%;
z-index: 99;
height: calc(100% - 190px);

.content_mian {
@@ -2268,11 +2767,10 @@ export default {
}
}
.landHomesteadEdit_wrap {
display: none;
// display: flex;
display: flex;
position: absolute;
left: 0;
bottom: 0;
bottom: -100vh;
width: 100%;
height: calc(100% - 190px);
flex-direction: column;
@@ -2435,7 +2933,6 @@ export default {
}
}
.farmlandEditSwitch_wrap {
display: none;
width: 100vw;
height: 100vh;
background: url("../../assets/images/homestead/farmlandEditSwitch_bg.png")
@@ -2452,7 +2949,7 @@ export default {
position: absolute;
left: 50%;
top: 50%;
margin: -272px 0 0 -240px;
margin: -272px 0 0 -272px;
z-index: 1002;
border-radius: 30px;
padding: 0 30px;
@@ -2543,4 +3040,10 @@ export default {
border-radius: 10px;
background-color: #ffffff;
}

::v-deep {
.van-overlay {
background-color: rgba(0, 0, 0, 0.2);
}
}
</style>

Escrever Pré-visualização
Carregando…
Cancelar
Salvar