|
|
|
|
@ -6,7 +6,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="left-container">
|
|
|
|
|
<a-divider orientation="left">图斑信息</a-divider>
|
|
|
|
|
<a-divider orientation="left">线索信息</a-divider>
|
|
|
|
|
<div class="map-container">
|
|
|
|
|
<MapboxMap
|
|
|
|
|
:geomsList="geomsList"
|
|
|
|
|
@ -37,10 +37,10 @@
|
|
|
|
|
'word-break': 'break-all',
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<a-descriptions-item label="图斑编号">{{
|
|
|
|
|
<a-descriptions-item label="线索编号">{{
|
|
|
|
|
props.showInfoData.case_no
|
|
|
|
|
}}</a-descriptions-item>
|
|
|
|
|
<a-descriptions-item label="图斑类型">{{
|
|
|
|
|
<a-descriptions-item label="线索类型">{{
|
|
|
|
|
props.showInfoData.typename
|
|
|
|
|
}}</a-descriptions-item>
|
|
|
|
|
<a-descriptions-item label="县区">{{
|
|
|
|
|
@ -52,7 +52,7 @@
|
|
|
|
|
<a-descriptions-item label="社区/村">{{
|
|
|
|
|
props.showInfoData.communityname
|
|
|
|
|
}}</a-descriptions-item>
|
|
|
|
|
<a-descriptions-item label="图斑面积(亩)">{{
|
|
|
|
|
<a-descriptions-item label="线索面积(亩)">{{
|
|
|
|
|
dataProcessing(props.showInfoData.area)
|
|
|
|
|
}}</a-descriptions-item>
|
|
|
|
|
<a-descriptions-item label="农用地面积(亩)">{{
|
|
|
|
|
@ -69,17 +69,17 @@
|
|
|
|
|
dataProcessing(props.showInfoData.shengtaibaohuhongxian_area)
|
|
|
|
|
}}</a-descriptions-item>
|
|
|
|
|
<!-- <a-descriptions-item label="占空间规划面积(亩)">{{ dataProcessing(guotukongjianguihua_area) }}</a-descriptions-item> -->
|
|
|
|
|
<a-descriptions-item label="图斑描述">{{
|
|
|
|
|
<a-descriptions-item label="线索描述">{{
|
|
|
|
|
props.showInfoData.case_description
|
|
|
|
|
}}</a-descriptions-item>
|
|
|
|
|
<!-- <a-descriptions-item label="图斑地址">{{ address }}</a-descriptions-item> -->
|
|
|
|
|
<!-- <a-descriptions-item label="线索地址">{{ address }}</a-descriptions-item> -->
|
|
|
|
|
<a-descriptions-item label="备注">{{ props.showInfoData.remark }}</a-descriptions-item>
|
|
|
|
|
<a-descriptions-item label="经度">{{ props.showInfoData.lng }}</a-descriptions-item>
|
|
|
|
|
<a-descriptions-item label="纬度">{{ props.showInfoData.lat }}</a-descriptions-item>
|
|
|
|
|
<a-descriptions-item label="下发时间">{{
|
|
|
|
|
props.showInfoData.synchronoustime
|
|
|
|
|
}}</a-descriptions-item>
|
|
|
|
|
<a-descriptions-item label="图斑照片">
|
|
|
|
|
<a-descriptions-item label="线索照片">
|
|
|
|
|
<div class="image-div">
|
|
|
|
|
<a-image-preview-group
|
|
|
|
|
:preview="{
|
|
|
|
|
@ -457,7 +457,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="right-container">
|
|
|
|
|
<a-divider orientation="left">图斑分割结果 </a-divider>
|
|
|
|
|
<a-divider orientation="left">线索分割结果 </a-divider>
|
|
|
|
|
<div class="data-list">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in splitPolygonForm"
|
|
|
|
|
@ -566,9 +566,9 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="split-operation">
|
|
|
|
|
|
|
|
|
|
<a-button type="primary" :disabled="isSpliting" @click="mergeSplitResult">合并图斑</a-button>
|
|
|
|
|
<a-button type="primary" :disabled="isSpliting" @click="mergeSplitResult">合并线索</a-button>
|
|
|
|
|
<!--
|
|
|
|
|
<a-button type="error" :disabled="isSpliting" @click="deleteSplitResult">删除图斑</a-button> -->
|
|
|
|
|
<a-button type="error" :disabled="isSpliting" @click="deleteSplitResult">删除线索</a-button> -->
|
|
|
|
|
|
|
|
|
|
<a-button type="primary" :disabled="isSpliting" @click="reductionSplit">还原分割</a-button>
|
|
|
|
|
|
|
|
|
|
@ -608,7 +608,7 @@
|
|
|
|
|
>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="12">
|
|
|
|
|
<a-form-item label="图斑面积" name="area">
|
|
|
|
|
<a-form-item label="线索面积" name="area">
|
|
|
|
|
<a-input
|
|
|
|
|
v-model:value="splitPolygonAreaForm.area"
|
|
|
|
|
@keydown.stop
|
|
|
|
|
@ -950,11 +950,11 @@
|
|
|
|
|
MapboxComponent.value.handlerDraw('Details', geoms, false);
|
|
|
|
|
} else {
|
|
|
|
|
geomsList.value = null;
|
|
|
|
|
createMessage.error('当前数据没有图斑！');
|
|
|
|
|
createMessage.error('当前数据没有线索！');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
createMessage.error('当前数据没有图斑！');
|
|
|
|
|
createMessage.error('当前数据没有线索！');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// const hanlderPreViewFile = (url) => {
|
|
|
|
|
@ -999,7 +999,7 @@
|
|
|
|
|
let splitPolygonPromiseArray = [];
|
|
|
|
|
const handlerSplitPolygon = (e) => {
|
|
|
|
|
isLandTypeSpliting.value = true;
|
|
|
|
|
// 删除被分割的图斑
|
|
|
|
|
// 删除被分割的线索
|
|
|
|
|
if(currentPolygon.value){
|
|
|
|
|
splitPolygonForm.value?.splice(currentPolygon.value,1);
|
|
|
|
|
splitAfterPolygon.value?.splice(currentPolygon.value,1);
|
|
|
|
|
@ -1022,7 +1022,7 @@
|
|
|
|
|
fid: null,
|
|
|
|
|
unitname: '',
|
|
|
|
|
createdate: createtime,
|
|
|
|
|
caseno: case_no + ' 分割图斑',
|
|
|
|
|
caseno: case_no + ' 分割线索',
|
|
|
|
|
countyname: countyname,
|
|
|
|
|
streetname: streetname,
|
|
|
|
|
isbuildname: '',
|
|
|
|
|
@ -1063,19 +1063,19 @@
|
|
|
|
|
// 处理面积
|
|
|
|
|
handlerFeatureArea();
|
|
|
|
|
|
|
|
|
|
// 清空选中图斑
|
|
|
|
|
// 清空选中线索
|
|
|
|
|
let geoms = {
|
|
|
|
|
type: 'FeatureCollection',
|
|
|
|
|
features: [],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 绘制新图斑
|
|
|
|
|
// 绘制新线索
|
|
|
|
|
MapboxComponent.value.handlerDetails(geoms, 'splitPolygonSource', 'splitPolygonLayer', {
|
|
|
|
|
lineStyle: { 'line-color': '#408eff', 'line-width': 3 },
|
|
|
|
|
fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 },
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 清空当前图斑
|
|
|
|
|
// 清空当前线索
|
|
|
|
|
currentPolygon.value = null;
|
|
|
|
|
|
|
|
|
|
// 停止加载
|
|
|
|
|
@ -1102,7 +1102,7 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
splitPolygonForm.value?.forEach((item,index)=>{
|
|
|
|
|
// 处理最后一块图斑面积
|
|
|
|
|
// 处理最后一块线索面积
|
|
|
|
|
if(index == splitPolygonForm.value.length-1){
|
|
|
|
|
splitPolygonForm.value[index].area = (area - addArea.area).toFixed(2) > 0 ? (area - addArea.area).toFixed(2) : null;
|
|
|
|
|
splitPolygonForm.value[index].gengdi_area = (gengdi_area - addArea.gengdi_area).toFixed(2) > 0 ? (gengdi_area - addArea.gengdi_area).toFixed(2) : null;
|
|
|
|
|
@ -1150,14 +1150,14 @@
|
|
|
|
|
splitPolygonDetailShow.value = true;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 切换图斑
|
|
|
|
|
// 切换线索
|
|
|
|
|
const currentPolygon = ref(null);
|
|
|
|
|
const changeCurrentPolygon = (index, item) => {
|
|
|
|
|
let geoms = {
|
|
|
|
|
type: 'FeatureCollection',
|
|
|
|
|
features: [item.geom],
|
|
|
|
|
};
|
|
|
|
|
// 绘图图斑
|
|
|
|
|
// 绘图线索
|
|
|
|
|
MapboxComponent.value.handlerDetails(geoms, 'splitPolygonSource', 'splitPolygonLayer', {
|
|
|
|
|
lineStyle: { 'line-color': '#408eff', 'line-width': 3 },
|
|
|
|
|
fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 },
|
|
|
|
|
@ -1165,7 +1165,7 @@
|
|
|
|
|
currentPolygon.value = index;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 图斑点击事件
|
|
|
|
|
// 线索点击事件
|
|
|
|
|
const onFeatureClick = (feature) => {
|
|
|
|
|
splitPolygonForm.value?.forEach((item, index) => {
|
|
|
|
|
if (item['geom']['properties']['id'] == feature.properties.id) {
|
|
|
|
|
@ -1196,7 +1196,7 @@
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 删除图斑
|
|
|
|
|
// 删除线索
|
|
|
|
|
const deleteSplitResult = ()=>{
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -1210,7 +1210,7 @@
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
if(deleteIndexs.length<1){
|
|
|
|
|
createMessage.error("请选择需要删除的图斑！");
|
|
|
|
|
createMessage.error("请选择需要删除的线索！");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -1219,7 +1219,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 渲染图斑数据
|
|
|
|
|
// 渲染线索数据
|
|
|
|
|
let geoms = {
|
|
|
|
|
type: 'FeatureCollection',
|
|
|
|
|
features:splitAfterPolygon.value?splitAfterPolygon.value : [],
|
|
|
|
|
@ -1257,7 +1257,7 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 合并图斑
|
|
|
|
|
// 合并线索
|
|
|
|
|
const mergeSplitResult = ()=>{
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -1279,7 +1279,7 @@
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
if(deleteIndexs.length!=2){
|
|
|
|
|
createMessage.error("请选择两个图斑进行合并！");
|
|
|
|
|
createMessage.error("请选择两个线索进行合并！");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -1289,7 +1289,7 @@
|
|
|
|
|
removeElementsByIndexes(splitPolygonForm.value,deleteIndexs);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 合并后图斑
|
|
|
|
|
// 合并后线索
|
|
|
|
|
|
|
|
|
|
// turf旧版本
|
|
|
|
|
// let union = turf.union(mergeArr[0],mergeArr[1]);
|
|
|
|
|
@ -1297,7 +1297,7 @@
|
|
|
|
|
// turf 7.0新版本
|
|
|
|
|
let union = turf.union(turf.featureCollection([mergeArr[0], mergeArr[1]]))
|
|
|
|
|
|
|
|
|
|
// 计算合并后的图斑面积
|
|
|
|
|
// 计算合并后的线索面积
|
|
|
|
|
let calAreaParams:CalTubanAreaModel = {
|
|
|
|
|
"wktgeom": GeojsonToWkt(union['geometry']),
|
|
|
|
|
}
|
|
|
|
|
@ -1308,7 +1308,7 @@
|
|
|
|
|
fid: null,
|
|
|
|
|
unitname: '',
|
|
|
|
|
createdate: createtime,
|
|
|
|
|
caseno: case_no + ' 分割图斑',
|
|
|
|
|
caseno: case_no + ' 分割线索',
|
|
|
|
|
countyname: countyname,
|
|
|
|
|
streetname: streetname,
|
|
|
|
|
isbuildname: '',
|
|
|
|
|
@ -1325,7 +1325,7 @@
|
|
|
|
|
splitAfterPolygon.value?.push(union);
|
|
|
|
|
splitPolygonForm.value?.push(polygon);
|
|
|
|
|
|
|
|
|
|
// 渲染图斑数据
|
|
|
|
|
// 渲染线索数据
|
|
|
|
|
let geoms = {
|
|
|
|
|
type: 'FeatureCollection',
|
|
|
|
|
features:splitAfterPolygon.value?splitAfterPolygon.value : [],
|
|
|
|
|
@ -1335,7 +1335,7 @@
|
|
|
|
|
fillStyle: { 'fill-color': '#fcf003', 'fill-opacity': 0.1 },
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 合并后选中图斑
|
|
|
|
|
// 合并后选中线索
|
|
|
|
|
let checkedGeoms = {
|
|
|
|
|
type: 'FeatureCollection',
|
|
|
|
|
features: [],
|
|
|
|
|
@ -1364,7 +1364,7 @@
|
|
|
|
|
const saveSplitResult = () => {
|
|
|
|
|
isSpliting.value = true;
|
|
|
|
|
if (splitPolygonForm.value?.length == 0) {
|
|
|
|
|
createMessage.error('请先使用分割工具分割图斑！');
|
|
|
|
|
createMessage.error('请先使用分割工具分割线索！');
|
|
|
|
|
isSpliting.value = false;
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
@ -1444,7 +1444,7 @@
|
|
|
|
|
}
|
|
|
|
|
for (let key in areaAbnormal.value) {
|
|
|
|
|
if (areaAbnormal.value[key]) {
|
|
|
|
|
createMessage.error('分割后总面积与原图斑总面积不一致！');
|
|
|
|
|
createMessage.error('分割后总面积与原线索总面积不一致！');
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
