zhangzl
/
rongxin.dashboard
1
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

手机端

master
庞东旭 6 dni temu
rodzic
5fa5cdcbec
commit
d0dce742f1
8 zmienionych plików z 1157 dodań i 202 usunięć
Widok podzielony
Opcje porównania
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania
  1. BIN
      src/assets/images/app/location.png
  2. +1
    -0
      src/store/getters.js
  3. +5
    -1
      src/store/modules/user.js
  4. +4
    -2
      src/views/app/detail.vue
  5. +1
    -0
      src/views/app/index.vue
  6. +916
    -0
      src/views/app/map-bf.vue
  7. +229
    -198
      src/views/app/map.vue
  8. +1
    -1
      vue.config.js

BIN
src/assets/images/app/location.png Wyświetl plik

Przed Po
Szerokość: 44  |  Wysokość: 44  |  Rozmiar: 1.2 KiB

+ 1
- 0
src/store/getters.js Wyświetl plik

@@ -10,6 +10,7 @@ const getters = {
id: state => state.user.id,
name: state => state.user.name,
nickName: state => state.user.nickName,
user: state => state.user,
introduction: state => state.user.introduction,
roles: state => state.user.roles,
permissions: state => state.user.permissions,


+ 5
- 1
src/store/modules/user.js Wyświetl plik

@@ -12,6 +12,7 @@ const user = {
name: '',
nickName: '',
avatar: '',
user: {},
roles: [],
permissions: [],
//获取登录页相关标题
@@ -42,13 +43,15 @@ const user = {
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_USER: (state, user) => {
state.user = user
},
SET_ROLES: (state, roles) => {
state.roles = roles
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
},

SET_STSTEMCONFIGlIST: (state, systemConfigList) => {
state.systemConfigList = systemConfigList
},
@@ -103,6 +106,7 @@ const user = {
commit('SET_NAME', user.userName)
commit('SET_NICK_NAME', user.nickName)
commit('SET_AVATAR', avatar)
commit('SET_USER', user)
/* 初始密码提示 */
if(res.isDefaultModifyPwd) {
MessageBox.confirm('您的密码还是初始密码，请修改密码！', '安全提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {


+ 4
- 2
src/views/app/detail.vue Wyświetl plik

@@ -42,10 +42,10 @@
<van-field readonly v-model="form.cbje" label="承包金额(元)" placeholder="请输入" input-align="right" label-width="auto" />
<van-field readonly v-model="form.surveyStatus" label="调查状态" placeholder="请输入" input-align="right" label-width="auto" />
<van-field readonly v-model="form.bz" label="备注信息" placeholder="请输入" input-align="right" label-width="auto" />
<van-field readonly v-model="form.jymj" label="实物图" placeholder="请输入" input-align="right" label-width="auto" />
<van-field readonly label="实物图" placeholder="" input-align="right" label-width="auto" />
<div v-if="!!form.dkImg">
<el-tooltip effect="light" :content="item" placement="bottom" v-for="(item, index) in form.dkImg.split(',')" :key="index">
<el-image style="height: 64px; width: 64px; margin: 2px; display: inline-block;" fit="scale-down" :src="this.baseRoutingUrll + item" :preview-src-list="form.dkImg.split(',').map((x) => this.baseRoutingUrll + x)"/>
<el-image style="height: 64px; width: 64px; margin: 2px; display: inline-block;" fit="scale-down" :src="baseRoutingUrll + item" :preview-src-list="form.dkImg.split(',').map((x) => baseRoutingUrll + x)"/>
</el-tooltip>
</div>
</div>
@@ -61,6 +61,8 @@
data() {
return {
value:'',
// 项目路径
baseRoutingUrll: '/api',//process.env.VUE_APP_BASE_API
form:{}
};
},


+ 1
- 0
src/views/app/index.vue Wyświetl plik

@@ -43,6 +43,7 @@
},
created() {
this.getMenuApp();
console.log(this.$store.getters)
},
methods: {
getMenuApp(){


+ 916
- 0
src/views/app/map-bf.vue Wyświetl plik

@@ -0,0 +1,916 @@
<template>
<div class="app-container">
<van-nav-bar
title="土地列表管理"
left-arrow
placeholder
safe-area-inset-top
@click-left="onClickLeft"
/>
<div class="search_box">
<div class="left">
<van-field v-model="value" left-icon="search" placeholder="请输入用户名" />
</div>
<van-button type="primary" round >搜索</van-button>
</div>

<div class="location">
<img src="../../assets/images/app/location.png" alt="">
</div>

<div id="full-screen-acceptance" style="width: 100%;height:100vh;">
<!--<div id="landMapDiv"></div>-->
<div id="mapWrap"></div>
<!-- <div id='land-btn-wrap'>-->
<!-- <el-row>-->
<!-- <input id="drawPolygon" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;-->
<!-- &lt;!&ndash; <input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消画图"/>&nbsp;&nbsp; &ndash;&gt;-->
<!-- <input id="drawReset" type="button" class="ant-btn ant-btn-red" value="还原"/>-->
<!-- </el-row>-->
<!-- </div>-->
</div>
<!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button type="primary" @click="submitFormMap">确 定</el-button>-->
<!-- <el-button type="danger" @click="clearMapLayer">清除图层</el-button>-->
<!-- </div>-->


<!-- <van-popup v-model="open" position="bottom" round >-->
<!-- <div class="landPopup">-->
<!-- <p class="landPopup_title">属性数据 <img src="../../assets/images/app/edit.png" width="25" alt=""></p>-->
<!-- <van-form ref="landForm">-->
<!-- <van-field v-model="form.dkbm" label="地块代码：" placeholder="<自动生成>" :border="false" input-align="right" label-width="auto" maxlength="19" :disabled="true" >-->
<!-- &lt;!&ndash; <template #button v-if="!isDisabled">-->
<!-- <van-button size="mini" type="primary" native-type="button" @click="generateCode">生成代码</van-button>-->
<!-- </template> &ndash;&gt;-->
<!-- </van-field>-->
<!-- <van-field v-model="form.dkmc" label="地块名称：" placeholder="请输入地块名称" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!-- <van-field v-model="syqxzText" label="所有权性质："-->
<!-- placeholder="请选择所有权性质"-->
<!-- required-->
<!-- :rules="[{ required: true }]"-->
<!-- :border="false"-->
<!-- input-align="right"-->
<!-- right-icon="arrow-down"-->
<!-- readonly-->
<!-- clickable-->
<!-- @click="showOwnership = true"-->
<!-- />-->
<!-- <van-popup v-model="showOwnership" position="bottom" get-container=".app-container">-->
<!-- <van-picker-->
<!-- show-toolbar-->
<!-- :columns="syqxzOptions"-->
<!-- value-key="dictLabel"-->
<!-- @confirm="onConfirmOwnershipOptions"-->
<!-- @cancel="showOwnership = false"-->
<!-- />-->
<!-- </van-popup>-->
<!-- <van-field v-model="dklbText" label="地块类别："-->
<!-- placeholder="请选择地块类别"-->
<!-- required-->
<!-- :rules="[{ required: true }]"-->
<!-- :border="false"-->
<!-- input-align="right"-->
<!-- right-icon="arrow-down"-->
<!-- readonly-->
<!-- clickable-->
<!-- @click="openLandCategoryPopup"-->
<!-- />-->
<!-- <van-popup v-model="showLandCategory" position="bottom" get-container=".app-container">-->
<!-- <van-picker-->
<!-- show-toolbar-->
<!-- :columns="dklbOptions"-->
<!-- value-key="dictLabel"-->
<!-- @confirm="onConfirmLandCategoryOptions"-->
<!-- @cancel="showLandCategory = false"-->
<!-- />-->
<!-- </van-popup>-->
<!-- <van-field v-model="tdlylxText" label="土地利用类型："-->
<!-- placeholder="请选择土地利用类型"-->
<!-- required-->
<!-- :rules="[{ required: true }]"-->
<!-- :border="false"-->
<!-- input-align="right"-->
<!-- right-icon="arrow-down"-->
<!-- readonly-->
<!-- clickable-->
<!-- @click="showLandType = true"-->
<!-- />-->
<!-- <van-popup v-model="showLandType" position="bottom" get-container=".app-container">-->
<!-- <van-picker-->
<!-- show-toolbar-->
<!-- :columns="tdlylxOptions"-->
<!-- value-key="dictLabel"-->
<!-- @confirm="onConfirmLandTypeOptions"-->
<!-- @cancel="showLandType = false"-->
<!-- />-->
<!-- </van-popup>-->
<!-- <van-field v-model="dldjText" label="地力等级："-->
<!-- placeholder="请选择地力等级"-->
<!-- required-->
<!-- :rules="[{ required: true }]"-->
<!-- :border="false"-->
<!-- input-align="right"-->
<!-- right-icon="arrow-down"-->
<!-- readonly-->
<!-- clickable-->
<!-- @click="showLandGrade = true"-->
<!-- />-->
<!-- <van-popup v-model="showLandGrade" position="bottom" get-container=".app-container">-->
<!-- <van-picker-->
<!-- show-toolbar-->
<!-- :columns="dldjOptions"-->
<!-- value-key="dictLabel"-->
<!-- @confirm="onConfirmLandGradeOptions"-->
<!-- @cancel="showLandGrade = false"-->
<!-- />-->
<!-- </van-popup>-->
<!-- <van-field v-model="tdytText" label="土地用途："-->
<!-- placeholder="请选择土地用途"-->
<!-- required-->
<!-- :rules="[{ required: true }]"-->
<!-- :border="false"-->
<!-- input-align="right"-->
<!-- right-icon="arrow-down"-->
<!-- readonly-->
<!-- clickable-->
<!-- @click="showLandPurpose = true"-->
<!-- />-->
<!-- <van-popup v-model="showLandPurpose" position="bottom" get-container=".app-container">-->
<!-- <van-picker-->
<!-- show-toolbar-->
<!-- :columns="tdytOptions"-->
<!-- value-key="dictLabel"-->
<!-- @confirm="onConfirmLandPurposeOptions"-->
<!-- @cancel="showLandPurpose = false"-->
<!-- />-->
<!-- </van-popup>-->
<!-- <van-field v-model="form.sfjbnt" label="基本农田：" required :rules="[{ required: true }]" :border="false" input-align="right" >-->
<!-- <template #input>-->
<!-- <van-radio-group v-model="form.sfjbnt" direction="horizontal">-->
<!-- &lt;!&ndash; <van-radio name="1">是</van-radio>-->
<!-- <van-radio name="2">否</van-radio> &ndash;&gt;-->
<!-- <van-radio v-for="dict in sfjbntOptions" :ke="dict.dictValue" :name="dict.dictValue">{{ dict.dictLabel }}</van-radio>-->
<!-- </van-radio-group>-->
<!-- </template>-->
<!-- </van-field>-->
<!-- <van-field v-model="form.scmjm" type="number" label="实测面积(亩)：" placeholder="请输入实测面积(亩)" required :rules="[{ required: true }]" :border="false" input-align="right" />-->
<!-- <van-field v-model="form.zjrxm" label="指界人姓名：" placeholder="请输入指界人姓名" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="100" />-->
<!-- <van-field v-model="form.dkdz" label="地块东至：" placeholder="请输入地块东至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!-- <van-field v-model="form.dkxz" label="地块西至：" placeholder="请输入地块西至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!-- <van-field v-model="form.dknz" label="地块南至：" placeholder="请输入地块南至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!-- <van-field v-model="form.dkbz" label="地块北至：" placeholder="请输入地块北至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!-- <van-field v-model="form.dkbzxx" label="地块备注信息：" placeholder="请输入地块备注信息" type="textarea" rows="3" :border="false" input-align="right" maxlength="250" />-->
<!-- </van-form>-->
<!-- <div class="footer_main">-->
<!-- <van-button type="default" hairline size="large">关闭弹窗</van-button>-->
<!-- <van-button type="danger" hairline size="large">删除地块</van-button>-->
<!-- <van-button type="info" hairline size="large">保存信息</van-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </van-popup>-->

</div>
</template>
<script>
import { listLand, listLandQuery,getLand, getLandDetail, getLandDetailByDkbm, delLand, addLand, updateLand, printLand } from "@/api/resource/land"
import { areaSavePri, cleanSavePri } from "@/api/gis/map"
import { getToken } from "@/utils/auth"
import Treeselect from "@riophae/vue-treeselect";
import { Splitpanes, Pane } from "splitpanes"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import "splitpanes/dist/splitpanes.css"
import { deptTreeSelect } from "@/api/system/user"
import {getConfigKey} from "@/api/system/config";
import {getDept,getInfoByImportCode} from "@/api/system/dept";
import MapField from "@/components/house/MapField";
import $ from "jquery";


export default {
name: "contractedVillageContractor",
components: { Treeselect, Splitpanes, Pane,MapField },
data() {
return {
form: {},

open:true,
showLegend:true,
value:'',
landCategory: ['10'], // 地块类别
landLayerName:''
};
},
created() {
// 获取geoserver的地址
this.getGeoServerUrl();
// 获取地块图层名称
this.getLandLayerName();
// 获取村边界的图层名称
this.getVillageBorderLayerName();
this.handleMap();
},
mounted() {

},
methods: {
onClickLeft(){
history.back(-1);
},

// 获取geoserver的地址
getGeoServerUrl() {
getConfigKey("system.geoServer.url").then(response => {
this.mapGeoServerUrl = response.msg;
});
},
// 获取地块图层名称
getLandLayerName() {
getConfigKey("geoserver.layer.resourceLand").then(response => {
this.landLayerName = response.msg;
});
},
// 获取村边界的图层名称
getVillageBorderLayerName() {
getConfigKey("geoserver.layer.villageBorder").then(response => {
this.villageBorderLayerName = response.msg;
});
},
/** 地图修改按钮操作 */
handleMap() {
// this.mapTheGeomId = row;
listLandQuery().then(response => {
this.openMap = true;
this.title = "修改地图";
setTimeout(() => {
this.pointDarw(response.rows);
}, 500);
});
// getLandDetail(row.fid).then((res) => {
// getInfoByImportCode(row.importCode).then((res) => {
// let insertCode = res.data;
// if (insertCode != null) {
// this.tGeoOrganizationLat = insertCode.latitude;
// this.tGeoOrganizationLng = insertCode.longitude;
// }
// const tableRow = { importCode: row.importCode };
// listLandQuery(tableRow).then(response => {
// this.openMap = true;
// this.title = "修改地图";
// setTimeout(() => {
// this.pointDarw(response.rows);
// }, 500);
// });
// });
// });
},
/** 地图提交按钮 */
submitFormMap() {
this.diglogStatus = false;
if(this.drawInsert !=null && this.drawInsert !=""){
this.mapTheGeomId.theGeom = JSON.stringify(this.drawInsert);
}
let sysGis = { tableName: 't_resource_land',priId: 'fid',id: this.mapTheGeomId.fid,theGeom: this.mapTheGeomId.theGeom };
if (this.mapTheGeomId != null) {
areaSavePri(sysGis).then(response => {
this.$modal.msgSuccess("修改成功");
this.openMap = false;
this.getList();
this.diglogStatus = true;
});
}
},
/** 清除坐标点图层 */
clearMapLayer() {
let sysGis = { tableName: 't_resource_land',priId: 'fid',id: this.mapTheGeomId.fid};
cleanSavePri(sysGis).then(response => {
this.$modal.msgSuccess("清除成功");
this.openMap = false;
this.getList();
});
},
pointDarw(resourceList) {
//加载地图编辑
var that = this;
var map;
//var hc_land;
var draw; // global so we can remove it later
var vector_drawing;
var startDarw = true;
var openDarw = false;
if (startDarw) {
document.getElementById("mapWrap").innerHTML = '';
var hc_land;
var draw; // global so we can remove it later
var vector_drawing;
var projection = new ol.proj.Projection({
//地图投影类型
code: "EPSG:3857",
units: "degrees",
//extent:extent
});

var aerial = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "卫星影像图",
});

var yingxzi = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "天地图文字标注--卫星影像图",
});
//加载地图
map = new ol.Map({
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
layers: [aerial, yingxzi],
projection: projection,
target: "mapWrap",
view: new ol.View({
//center: ol.proj.fromLonLat([115.452752, 31.789033]),
zoom: 11,
minZoom: 0, //地图缩小限制
maxZoom: 18.3, //地图放大限制
}),
});
// 添加村边界
let mapBorder = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: this.mapGeoServerUrl + '/wms',
params: {
LAYERS: this.villageBorderLayerName,
cql_filter: "dept_id = '" + 100 + "'",
SRID: 3857,
},
}),
name: 'villageBorderLayer'
});
map.addLayer(mapBorder);

let landLayer = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: this.mapGeoServerUrl + '/wms',
params: {
LAYERS: this.landLayerName,
cql_filter: "dept_id = '" + 100 + "'",
SRID: 3857,
abc: Math.random() // 无效参数，保证每次发送的请求都不一样
}
}),
name: 'landLayer'
});
map.getLayers().insertAt(3, landLayer);

// 添加已经存在的资源图层
let vectorSource = new ol.source.Vector();
for (let resource of resourceList) {
let feature = new ol.Feature({
geometry: new ol.geom.MultiPolygon(JSON.parse(resource.theGeom).coordinates),
// permanentName: permanent.name
});
feature.set('detail', resource);
vectorSource.addFeature(feature);
}

// let resourceLayer = new ol.layer.Vector({
// source: vectorSource,
// style: (feature, resolution) => {
// return new ol.style.Style({
// fill: new ol.style.Fill({
// //矢量图层填充颜色，以及透明度
// color: "rgba(0, 218, 255, 0.3)",
// }),
// stroke: new ol.style.Stroke({
// //边界样式
// color: "#00DAFF",
// width: 3,
// }),
// })
// }
// });
// map.addLayer(resourceLayer);
//图层查询定位开始 ---------start
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\":" + resourceList[0].theGeom + "}"),
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
//矢量图层填充颜色，以及透明度
color: "rgba(0, 218, 255, 0.3)",
}),
stroke: new ol.style.Stroke({
//边界样式
color: "#00DAFF",
width: 3,
}),
}),
});
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: 13, // 缩放级别
rotation: undefined, // 缩放完成view视图旋转弧度
duration: 1000, // 缩放持续时间，默认不需要设置
});
//图层查询定位结束 ---------end
//开始绘制地图
$("#drawPolygon").off("click").on("click", function () {
map.removeLayer(hc_land);
map.removeLayer(vector_drawing);
that.drawInsert = null;
//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) {
map.removeInteraction(draw);
var feature = evt.feature;
var geometry = feature.getGeometry();
var coordinate = geometry.getCoordinates();
that.drawInsert = coordinate;
});
map.addInteraction(draw);
}

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

// 地图点击事件
map.on("click", (evt) => {
let feature = map.forEachFeatureAtPixel(
evt.pixel,
(feature) => feature
);
if (feature) {
// 镇级：加载村级坐标点
var ifConsole = feature.values_.detail;
console.log(feature);

}
});

}
if (openDarw) {
document.getElementById("mapWrap").innerHTML = '';
var projection = new ol.proj.Projection({
//地图投影类型
code: "EPSG:3857",
units: "degrees",
//extent:extent
});

var aerial = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "卫星影像图",
});

var yingxzi = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "天地图文字标注--卫星影像图",
});
//获取坐标是否存在
var Zb;
if (this.tGeoOrganizationLng != null && this.tGeoOrganizationLat != null && this.tGeoOrganizationLng !=""
&& this.tGeoOrganizationLat !="" && this.tGeoOrganizationLng !=undefined && this.tGeoOrganizationLat !=undefined) {
Zb = [this.tGeoOrganizationLng, this.tGeoOrganizationLat]
} else {
Zb = [115.452752, 31.789033];
}
//加载地图
map = new ol.Map({
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
layers: [aerial, yingxzi],
projection: projection,
logo: 'false',
target: "mapWrap",
view: new ol.View({
center: ol.proj.fromLonLat(Zb),
//center: ol.proj.fromLonLat([115.452752, 31.789033]),
zoom: 17.8,
minZoom: 0, //地图缩小限制
maxZoom: 18, //地图放大限制
}),
});
// 添加村边界
let mapBorder = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: this.mapGeoServerUrl + '/wms',
params: {
LAYERS: this.villageBorderLayerName,
cql_filter: "import_code = '" + resourceList[0].importCode + "'",
SRID: 3857,
},
}),
name: 'villageBorderLayer'
});
map.addLayer(mapBorder);

// 添加已经存在的资源图层
let vectorSource = new ol.source.Vector();
for (let resource of resourceList) {
if (resource.theGeom) {
console.log('1')
let feature = new ol.Feature({
geometry: new ol.geom.MultiPolygon(JSON.parse(resource.theGeom).coordinates),
// permanentName: permanent.name
});
vectorSource.addFeature(feature);
}
}

let resourceLayer = new ol.layer.Vector({
source: vectorSource,
style: (feature, resolution) => {
return new ol.style.Style({
fill: new ol.style.Fill({
//矢量图层填充颜色，以及透明度
color: "rgba(0, 218, 255, 0.3)",
}),
stroke: new ol.style.Stroke({
//边界样式
color: "#00DAFF",
width: 3,
}),
})
}
});
map.addLayer(resourceLayer);

//图层查询定位结束 ---------end
//开始绘制地图
$("#drawPolygon").off("click").on("click", function () {
//map.removeLayer(hc_land);
map.removeLayer(vector_drawing);
that.drawInsert = null;
map.removeInteraction(draw);
var source = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: source,
});
map.addLayer(vector_drawing);
var typeSelect = "Polygon";

function addInteraction() {
var value = typeSelect;
draw = new ol.interaction.Draw({
source: source,
type: typeSelect
});
draw.on('drawend', function (evt) {
//map.removeLayer(vector_drawing);
var feature = evt.feature;
var geometry = feature.getGeometry();
var coordinate = geometry.getCoordinates();
that.drawInsert = coordinate;
map.removeInteraction(draw);
});
map.addInteraction(draw);
}

addInteraction();
});
//清除画图鼠标点击事件
$("#drawRemove").off("click").on("click", function () {
//map.addLayer(hc_land);
map.removeInteraction(draw);
//map.removeLayer(vector_drawing);
});
//还原之前图层
$("#drawReset").off("click").on("click", function () {
map.removeInteraction(draw);
map.removeLayer(vector_drawing);
//map.addLayer(hc_land);
that.drawInsert = null;
});
}
},
},
};
</script>
<style scoped lang="scss">
::v-deep .van-nav-bar{
background: linear-gradient( 173deg, #91E2D3 0%, #CDFCF0 100%);
::v-deep.van-icon{
color: #000000;
}
}
.location{
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
margin: 2vh;
position: absolute;
top: 12vh;
right: 0vw;
z-index: 9;
background-color: rgba(0,0,0,0.5);
border-radius: 10px;
img{
width: 30px;
height: 30px;
border: 1px dashed #ffffff;
}
}
.van-popup{
background: linear-gradient( 180deg, #E5FFF4 0%, #ffffff 100%);
.landPopup{
width: 94%;
margin: 0 auto;
.landPopup_title{
color: #29D2AF;
font-size: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
.app-container{
/*background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center;*/
background-size: 100% 100%;
height: 100vh;
padding: 0;
overflow: hidden;
}

::v-deep .van-hairline--bottom::after{
border: none;
}

::v-deep .van-field--disabled .van-field__label {
color: #646566;
}

::v-deep .landPopup .van-dialog {
width: 90%;
height: 85%;
overflow-y: auto;
}

::v-deep .landPopup .van-field__label {
width: 7em;
}

.head{
padding: 0 4vw;
}

.tap_block{
width: 100%;
display: flex;
justify-content: space-between;
background: #ebfaf2;
padding: 2PX 4PX;
border-radius: 10PX;
margin-top: 1vh;
.active{
background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
box-shadow: 0 0 10PX #cccccc;
color: #333333;
}
p{
width: 25%;
text-align: center;
padding: 5PX 0;
border-radius: 10PX;
color: #666666;
}
}

.legend_main{
position: absolute;
top: 2vh;
right: 2vw;
}

.openLegend{
position: absolute;
top: 2vh;
right: 0vw;
background-color: rgba(255,255,255,.5);
width: 20PX;
height: 70PX;
display: flex;
align-items: center;
justify-content: center;
border-top-left-radius: 10PX;
border-bottom-left-radius: 10PX;
.sanjiao-left {
display: inline-block;
border-right: 8PX solid #999999;
border-right-color: initial;
border-top: 5PX solid transparent;
border-bottom: 5PX solid transparent;
}
}

.legend_second{
background: rgba(255,255,255,.5);
padding: 2vh;
border-radius: 10PX;
margin-top: 2vh;
}

.legend_tt{
font-size: 16PX;
display: flex;
align-items: center;
justify-content: space-between;
img{
width: 20PX;
}
}

.legend{
background: rgba(255,255,255,.5);
padding: 2vh;
border-radius: 10PX;
.van-checkbox{
margin-top: 2vh;
&:nth-child(1){
::v-deep .van-checkbox__icon .van-icon{
/*border-color: rgba(22,233,15,1);*/
border: 4px solid #16E90F;
}
}
&:nth-child(2){
::v-deep .van-checkbox__icon .van-icon{
/*border-color: rgba(1,198,222,1);*/
border: 4px solid #01C6DE;
}
}
&:nth-child(3){
::v-deep .van-checkbox__icon .van-icon{
/*border-color: rgba(238,238,0,1);*/
border: 4px solid #EEEE00;
}
}
&:nth-child(4){
::v-deep .van-checkbox__icon .van-icon{
/*border-color: rgba(238,60,60,1);*/
border: 4px solid #EE3C3C;
}
}
&:nth-child(5){
::v-deep .van-checkbox__icon .van-icon{
/*border-color: rgba(235,134,0,1);*/
border: 4px solid #EB8600;
}
}
}
.van-checkbox-group {
.van-checkbox__label{
i{
display: block;
width: 15PX;
height: 15PX;
border: 1px solid;
border-radius: 3PX;
margin-left: 10PX;
}
.i1{
background: rgba(22,233,15,.7);
border-color: rgba(22,233,15,1);
}
.i2{
background: rgba(1,198,222,.7);
border-color: rgba(1,198,222,1);
}
.i3{
background: rgba(238,238,0,.7);
border-color: rgba(238,238,0,1);
}
.i4{
background: rgba(238,60,60,.7);
border-color: rgba(238,60,60,1);
}
.i5{
background: rgba(235,134,0,.7);
border-color: rgba(235,134,0,1);
}
div{
display: flex;
align-items: center;
}
}
}
}

.mapBox{
height: 100vh;
width: 100%;
}

.footer_main {
flex: 0 0 120px;
background: #ccc;
display: flex;
justify-content: center; /* 相对父元素水平居中 */
align-items: center; /* 子元素相对父元素垂直居中 */
}
.search_box{
display: flex;
align-items: center;
justify-content: space-between;
width: 94%;
margin: 2vh auto;
position: absolute;
left: 3vw;
z-index: 9;

.left{
display: flex;
align-items: center;
flex: 1;
background-color: #ffffff;
border-radius: 50vh;
overflow: hidden;
margin-right: 3vw;
}
p{
flex-shrink: 0;
}
button{
flex-shrink: 0;
background: linear-gradient( 271deg, #53E4A5 0%, #24DBDB 100%);
border: none;
width: 20vw;
}
}

#land-btn-wrap {
position: relative;
width: 40%;
left: 60%;
bottom: 95%;
z-index: 2000;
}

#mapWrap {
width: 100%;
height: 100%;
}
.ant-btn-red {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
right: -36%;
}
</style>

+ 229
- 198
src/views/app/map.vue Wyświetl plik

@@ -13,182 +13,183 @@
</div>
<van-button type="primary" round >搜索</van-button>
</div>
<div style="position:relative;">
<div class="mapBox" id="landMapBox"></div>
<div class="legend_main" v-if="showLegend">
<!-- <div class="legend">-->
<!-- <p class="legend_tt">图例-->
<!--&lt;!&ndash; <img src="../../../../../static/images/contracted/map_icon_01.png" @click="showLegend = false" alt="">&ndash;&gt;-->
<!-- </p>-->
<!-- <van-checkbox-group v-model="landCategory" @change="filterLandLayer">-->
<!-- <van-checkbox name="10" shape="square" checked-color="#16e90f" icon-size="18px"><div><p>承包地</p><i class="i1"></i></div></van-checkbox>-->
<!-- <van-checkbox name="21" shape="square" checked-color="#01c6de" icon-size="18px"><div><p>自留地</p><i class="i2"></i></div></van-checkbox>-->
<!-- <van-checkbox name="22" shape="square" checked-color="#eeee00" icon-size="18px"><div><p>机动地</p><i class="i3"></i></div></van-checkbox>-->
<!-- <van-checkbox name="23" shape="square" checked-color="#ee3c3c" icon-size="18px"><div><p>开荒地</p><i class="i4"></i></div></van-checkbox>-->
<!-- <van-checkbox name="99" shape="square" checked-color="#eb8600" icon-size="18px"><div><p>其他地</p><i class="i5"></i></div></van-checkbox>-->
<!-- </van-checkbox-group>-->
<!-- </div>-->
<div class="legend_second" v-if="taskStatus === '2'">
<p class="legend_tt" id="drawLandPolygon">
<!-- <img src="../../../../../static/images/contracted/map_icon_02.png" alt="">画图-->
</p>
</div>
</div>
<div class="openLegend" v-if="!showLegend" @click="showLegend = true">
<span class="sanjiao-left"></span>
</div>

<div class="location">
<img src="../../assets/images/app/location.png" alt="">
</div>

<div id="full-screen-acceptance" style="width: 100%;height:100vh;">
<!--<div id="landMapDiv"></div>-->
<div id="landMapBox"></div>
<!-- <div id='land-btn-wrap'>-->
<!-- <el-row>-->
<!-- <input id="drawPolygon" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;-->
<!-- &lt;!&ndash; <input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消画图"/>&nbsp;&nbsp; &ndash;&gt;-->
<!-- <input id="drawReset" type="button" class="ant-btn ant-btn-red" value="还原"/>-->
<!-- </el-row>-->
<!-- </div>-->
</div>


<van-popup v-model="open" position="bottom" round >
<div class="landPopup">
<p class="landPopup_title">属性数据 <img src="../../assets/images/app/edit.png" width="25" alt=""></p>
<van-form ref="landForm">
<van-field v-model="form.dkbm" label="地块代码：" placeholder="<自动生成>" :border="false" input-align="right" label-width="auto" maxlength="19" :disabled="true" >
<!-- <template #button v-if="!isDisabled">
<van-button size="mini" type="primary" native-type="button" @click="generateCode">生成代码</van-button>
</template> -->
</van-field>
<van-field v-model="form.dkmc" label="地块名称：" placeholder="请输入地块名称" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />
<van-field v-model="syqxzText" label="所有权性质："
placeholder="请选择所有权性质"
required
:rules="[{ required: true }]"
:border="false"
input-align="right"
right-icon="arrow-down"
readonly
clickable
@click="showOwnership = true"
/>
<van-popup v-model="showOwnership" position="bottom" get-container=".app-container">
<van-picker
show-toolbar
:columns="syqxzOptions"
value-key="dictLabel"
@confirm="onConfirmOwnershipOptions"
@cancel="showOwnership = false"
/>
</van-popup>
<van-field v-model="dklbText" label="地块类别："
placeholder="请选择地块类别"
required
:rules="[{ required: true }]"
:border="false"
input-align="right"
right-icon="arrow-down"
readonly
clickable
@click="openLandCategoryPopup"
/>
<van-popup v-model="showLandCategory" position="bottom" get-container=".app-container">
<van-picker
show-toolbar
:columns="dklbOptions"
value-key="dictLabel"
@confirm="onConfirmLandCategoryOptions"
@cancel="showLandCategory = false"
/>
</van-popup>
<van-field v-model="tdlylxText" label="土地利用类型："
placeholder="请选择土地利用类型"
required
:rules="[{ required: true }]"
:border="false"
input-align="right"
right-icon="arrow-down"
readonly
clickable
@click="showLandType = true"
/>
<van-popup v-model="showLandType" position="bottom" get-container=".app-container">
<van-picker
show-toolbar
:columns="tdlylxOptions"
value-key="dictLabel"
@confirm="onConfirmLandTypeOptions"
@cancel="showLandType = false"
/>
</van-popup>
<van-field v-model="dldjText" label="地力等级："
placeholder="请选择地力等级"
required
:rules="[{ required: true }]"
:border="false"
input-align="right"
right-icon="arrow-down"
readonly
clickable
@click="showLandGrade = true"
/>
<van-popup v-model="showLandGrade" position="bottom" get-container=".app-container">
<van-picker
show-toolbar
:columns="dldjOptions"
value-key="dictLabel"
@confirm="onConfirmLandGradeOptions"
@cancel="showLandGrade = false"
/>
</van-popup>
<van-field v-model="tdytText" label="土地用途："
placeholder="请选择土地用途"
required
:rules="[{ required: true }]"
:border="false"
input-align="right"
right-icon="arrow-down"
readonly
clickable
@click="showLandPurpose = true"
/>
<van-popup v-model="showLandPurpose" position="bottom" get-container=".app-container">
<van-picker
show-toolbar
:columns="tdytOptions"
value-key="dictLabel"
@confirm="onConfirmLandPurposeOptions"
@cancel="showLandPurpose = false"
/>
</van-popup>
<van-field v-model="form.sfjbnt" label="基本农田：" required :rules="[{ required: true }]" :border="false" input-align="right" >
<template #input>
<van-radio-group v-model="form.sfjbnt" direction="horizontal">
<!-- <van-radio name="1">是</van-radio>
<van-radio name="2">否</van-radio> -->
<van-radio v-for="dict in sfjbntOptions" :ke="dict.dictValue" :name="dict.dictValue">{{ dict.dictLabel }}</van-radio>
</van-radio-group>
</template>
</van-field>
<van-field v-model="form.scmjm" type="number" label="实测面积(亩)：" placeholder="请输入实测面积(亩)" required :rules="[{ required: true }]" :border="false" input-align="right" />
<van-field v-model="form.zjrxm" label="指界人姓名：" placeholder="请输入指界人姓名" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="100" />
<van-field v-model="form.dkdz" label="地块东至：" placeholder="请输入地块东至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />
<van-field v-model="form.dkxz" label="地块西至：" placeholder="请输入地块西至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />
<van-field v-model="form.dknz" label="地块南至：" placeholder="请输入地块南至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />
<van-field v-model="form.dkbz" label="地块北至：" placeholder="请输入地块北至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />
<van-field v-model="form.dkbzxx" label="地块备注信息：" placeholder="请输入地块备注信息" type="textarea" rows="3" :border="false" input-align="right" maxlength="250" />
</van-form>
<div class="footer_main">
<van-button type="default" hairline size="large" @click="closePopup">关闭弹窗</van-button>
<van-button type="danger" hairline size="large" @click="deleteLand(form.id)" v-if="taskStatus === '2' && showDeleteBtn">删除地块</van-button>
<van-button type="info" hairline size="large" @click="saveLand" v-if="showSaveBtn">保存信息</van-button>
</div>
</div>
</van-popup>

<!-- <van-popup v-model="open" position="bottom" round >-->
<!-- <div class="landPopup">-->
<!-- <p class="landPopup_title">属性数据 <img src="../../assets/images/app/edit.png" width="25" alt=""></p>-->
<!-- <van-form ref="landForm">-->
<!-- <van-field v-model="form.dkbm" label="地块代码：" placeholder="<自动生成>" :border="false" input-align="right" label-width="auto" maxlength="19" :disabled="true" >-->
<!-- &lt;!&ndash; <template #button v-if="!isDisabled">-->
<!-- <van-button size="mini" type="primary" native-type="button" @click="generateCode">生成代码</van-button>-->
<!-- </template> &ndash;&gt;-->
<!-- </van-field>-->
<!-- <van-field v-model="form.dkmc" label="地块名称：" placeholder="请输入地块名称" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!-- <van-field v-model="syqxzText" label="所有权性质："-->
<!-- placeholder="请选择所有权性质"-->
<!-- required-->
<!-- :rules="[{ required: true }]"-->
<!-- :border="false"-->
<!-- input-align="right"-->
<!-- right-icon="arrow-down"-->
<!-- readonly-->
<!-- clickable-->
<!-- @click="showOwnership = true"-->
<!-- />-->
<!-- <van-popup v-model="showOwnership" position="bottom" get-container=".app-container">-->
<!-- <van-picker-->
<!-- show-toolbar-->
<!-- :columns="syqxzOptions"-->
<!-- value-key="dictLabel"-->
<!-- @confirm="onConfirmOwnershipOptions"-->
<!-- @cancel="showOwnership = false"-->
<!-- />-->
<!-- </van-popup>-->
<!-- <van-field v-model="dklbText" label="地块类别："-->
<!-- placeholder="请选择地块类别"-->
<!-- required-->
<!-- :rules="[{ required: true }]"-->
<!-- :border="false"-->
<!-- input-align="right"-->
<!-- right-icon="arrow-down"-->
<!-- readonly-->
<!-- clickable-->
<!-- @click="openLandCategoryPopup"-->
<!-- />-->
<!-- <van-popup v-model="showLandCategory" position="bottom" get-container=".app-container">-->
<!-- <van-picker-->
<!-- show-toolbar-->
<!-- :columns="dklbOptions"-->
<!-- value-key="dictLabel"-->
<!-- @confirm="onConfirmLandCategoryOptions"-->
<!-- @cancel="showLandCategory = false"-->
<!-- />-->
<!-- </van-popup>-->
<!-- <van-field v-model="tdlylxText" label="土地利用类型："-->
<!-- placeholder="请选择土地利用类型"-->
<!-- required-->
<!-- :rules="[{ required: true }]"-->
<!-- :border="false"-->
<!-- input-align="right"-->
<!-- right-icon="arrow-down"-->
<!-- readonly-->
<!-- clickable-->
<!-- @click="showLandType = true"-->
<!-- />-->
<!-- <van-popup v-model="showLandType" position="bottom" get-container=".app-container">-->
<!-- <van-picker-->
<!-- show-toolbar-->
<!-- :columns="tdlylxOptions"-->
<!-- value-key="dictLabel"-->
<!-- @confirm="onConfirmLandTypeOptions"-->
<!-- @cancel="showLandType = false"-->
<!-- />-->
<!-- </van-popup>-->
<!-- <van-field v-model="dldjText" label="地力等级："-->
<!-- placeholder="请选择地力等级"-->
<!-- required-->
<!-- :rules="[{ required: true }]"-->
<!-- :border="false"-->
<!-- input-align="right"-->
<!-- right-icon="arrow-down"-->
<!-- readonly-->
<!-- clickable-->
<!-- @click="showLandGrade = true"-->
<!-- />-->
<!-- <van-popup v-model="showLandGrade" position="bottom" get-container=".app-container">-->
<!-- <van-picker-->
<!-- show-toolbar-->
<!-- :columns="dldjOptions"-->
<!-- value-key="dictLabel"-->
<!-- @confirm="onConfirmLandGradeOptions"-->
<!-- @cancel="showLandGrade = false"-->
<!-- />-->
<!-- </van-popup>-->
<!-- <van-field v-model="tdytText" label="土地用途："-->
<!-- placeholder="请选择土地用途"-->
<!-- required-->
<!-- :rules="[{ required: true }]"-->
<!-- :border="false"-->
<!-- input-align="right"-->
<!-- right-icon="arrow-down"-->
<!-- readonly-->
<!-- clickable-->
<!-- @click="showLandPurpose = true"-->
<!-- />-->
<!-- <van-popup v-model="showLandPurpose" position="bottom" get-container=".app-container">-->
<!-- <van-picker-->
<!-- show-toolbar-->
<!-- :columns="tdytOptions"-->
<!-- value-key="dictLabel"-->
<!-- @confirm="onConfirmLandPurposeOptions"-->
<!-- @cancel="showLandPurpose = false"-->
<!-- />-->
<!-- </van-popup>-->
<!-- <van-field v-model="form.sfjbnt" label="基本农田：" required :rules="[{ required: true }]" :border="false" input-align="right" >-->
<!-- <template #input>-->
<!-- <van-radio-group v-model="form.sfjbnt" direction="horizontal">-->
<!-- &lt;!&ndash; <van-radio name="1">是</van-radio>-->
<!-- <van-radio name="2">否</van-radio> &ndash;&gt;-->
<!-- <van-radio v-for="dict in sfjbntOptions" :ke="dict.dictValue" :name="dict.dictValue">{{ dict.dictLabel }}</van-radio>-->
<!-- </van-radio-group>-->
<!-- </template>-->
<!-- </van-field>-->
<!-- <van-field v-model="form.scmjm" type="number" label="实测面积(亩)：" placeholder="请输入实测面积(亩)" required :rules="[{ required: true }]" :border="false" input-align="right" />-->
<!-- <van-field v-model="form.zjrxm" label="指界人姓名：" placeholder="请输入指界人姓名" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="100" />-->
<!-- <van-field v-model="form.dkdz" label="地块东至：" placeholder="请输入地块东至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!-- <van-field v-model="form.dkxz" label="地块西至：" placeholder="请输入地块西至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!-- <van-field v-model="form.dknz" label="地块南至：" placeholder="请输入地块南至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!-- <van-field v-model="form.dkbz" label="地块北至：" placeholder="请输入地块北至" required :rules="[{ required: true }]" :border="false" input-align="right" maxlength="50" />-->
<!-- <van-field v-model="form.dkbzxx" label="地块备注信息：" placeholder="请输入地块备注信息" type="textarea" rows="3" :border="false" input-align="right" maxlength="250" />-->
<!-- </van-form>-->
<!-- <div class="footer_main">-->
<!-- <van-button type="default" hairline size="large">关闭弹窗</van-button>-->
<!-- <van-button type="danger" hairline size="large">删除地块</van-button>-->
<!-- <van-button type="info" hairline size="large">保存信息</van-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </van-popup>-->

</div>
</template>
<script>
import Cookies from "js-cookie";
import { getConfigKey } from "@/api/system/config";
import { getDept } from "@/api/contracted";
import { getDk, addDk, updateDk, deleteDk, generateLandCode } from "@/api/contracted/dk";
import { listLand, listLandQuery,getLand, getLandDetail, getLandDetailByDkbm, delLand, addLand, updateLand, printLand } from "@/api/resource/land"
import { areaSavePri, cleanSavePri } from "@/api/gis/map"
import { getToken } from "@/utils/auth"
import Treeselect from "@riophae/vue-treeselect";
import { Splitpanes, Pane } from "splitpanes"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import "splitpanes/dist/splitpanes.css"
import { deptTreeSelect } from "@/api/system/user"
import {getConfigKey} from "@/api/system/config";
import {getDept,getInfoByImportCode} from "@/api/system/dept";
import MapField from "@/components/house/MapField";
import $ from "jquery";


export default {
name: "contractedVillageContractor",
components: { Treeselect, Splitpanes, Pane,MapField },
data() {
return {
form: {}, // 地块信息表单参数
fform: {}, // 地块信息表单参数
map: "", // 地图
mapGeoServerUrl: "", // geoserver地址
mapCenterLocation: [], // 地图中心坐标
@@ -199,7 +200,7 @@
vectorLayer: "", // 绘制的矢量图层

title: "", // 弹出层标题
open: true, // 是否显示地块弹出层
open: false, // 是否显示地块弹出层
syqxzOptions: [], // 所有权性质字典
syqxzText: null, // 所有权性质标签名
showOwnership: false, // 控制所有权性质字典弹出层的显示和隐藏
@@ -223,32 +224,16 @@
landCategory: ['10'], // 地块类别

showLegend:true,
value:''
value:'',
deptId:100,
importCode:'',

};
},
created() {
this.taskStatus = Cookies.get('taskStatus');
this.getDicts("land_ownership").then(response => {
this.syqxzOptions = response.data;
});
this.getDicts("land_type").then(response => {
this.dklbOptions = response.data;
// 去除地块类别中的承包地块选项
let index = this.dklbOptions.findIndex(item => item.dictValue === '10');
this.dklbOptions.splice(index, 1);
});
this.getDicts("land_grade").then(response => {
this.dldjOptions = response.data;
});
this.getDicts("use_code").then(response => {
this.tdytOptions = response.data;
});
this.getDicts("land_use").then(response => {
this.tdlylxOptions = response.data;
});
this.getDicts("is_common").then(response => {
this.sfjbntOptions = response.data;
});
console.log(this.$store.getters.user.user.dept.deptId)
this.deptId = this.$store.getters.user.user.dept.deptId;
this.importCode = this.$store.getters.user.user.dept.importCode;
// 获取geoserver的地址
this.getGeoServerUrl();
// 获取地块图层名称
@@ -286,12 +271,10 @@
},
// 初始化地图
initMap() {
// this.$route.query.deptId
// getDept(100).then(response => {
// let dept = response.data;
let dept = {};
if (dept.lng && dept.lat) {
this.mapCenterLocation = [dept.lng, dept.lat];
getDept(this.deptId).then(response => {
let dept = response.data;
if (dept.longitude && dept.latitude) {
this.mapCenterLocation = [dept.longitude, dept.latitude];
} else {
this.mapCenterLocation = [116.391458, 39.902377];
}
@@ -311,6 +294,7 @@
isGroup: true,
name: "卫星影像图",
});

let yingxzi = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
@@ -434,7 +418,7 @@
}
}
});
// });
});
},
filterLandLayer() {
if (this.landLayer) {
@@ -450,7 +434,7 @@
url: this.mapGeoServerUrl + '/wms',
params: {
LAYERS: this.landLayerName,
cql_filter: "dept_id = '" + this.$route.query.deptId + "' and DKLB in (" + this.landCategory + ")",
cql_filter: "import_code = '" + this.importCode + "'",
SRID: 3857,
abc: Math.random() // 无效参数，保证每次发送的请求都不一样
}
@@ -467,7 +451,7 @@
url: this.mapGeoServerUrl + '/wms',
params: {
LAYERS: this.villageBorderLayerName,
cql_filter: "dept_id = '" + this.$route.query.deptId + "'",
cql_filter: "import_code = '" + this.importCode + "'",
SRID: 3857,
},
}),
@@ -493,7 +477,7 @@
}
});
} else {
this.form.deptId = this.$route.query.deptId;
this.form.deptId = this.deptId;
this.showSaveBtn = false;
addDk(this.form).then(response => {
if (response.code == 200) {
@@ -573,7 +557,7 @@
this.showLandPurpose = false;
},
generateCode() {
generateLandCode({deptId: this.$route.query.deptId}).then(response => {
generateLandCode({deptId: this.deptId}).then(response => {
this.$set(this.form, 'dkbm', response.data);
});
},
@@ -624,6 +608,7 @@
}
this.showLandCategory = true;
}

},
};
</script>
@@ -634,6 +619,25 @@
color: #000000;
}
}
.location{
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
margin: 2vh;
position: absolute;
top: 12vh;
right: 0vw;
z-index: 9;
background-color: rgba(0,0,0,0.5);
border-radius: 10px;
img{
width: 30px;
height: 30px;
border: 1px dashed #ffffff;
}
}
.van-popup{
background: linear-gradient( 180deg, #E5FFF4 0%, #ffffff 100%);
.landPopup{
@@ -860,4 +864,31 @@
width: 20vw;
}
}

#land-btn-wrap {
position: relative;
width: 40%;
left: 60%;
bottom: 95%;
z-index: 2000;
}

#landMapBox {
width: 100%;
height: 100%;
}
.ant-btn-red {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
right: -36%;
}
</style>

+ 1
- 1
vue.config.js Wyświetl plik

@@ -10,7 +10,7 @@ const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE

//const baseUrl = 'http://localhost:8080' // 后端接口
const baseUrl = 'http://192.168.0.109:8080' // 后端接口 zzl
const baseUrl = 'http://192.168.0.106:8080' // 后端接口 zzl

const port = process.env.port || process.env.npm_config_port || 80 // 端口



Napisz Podgląd
Ładowanie…
Anuluj
Zapisz