HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

main
石超 2025-03-21 16:56:42 +08:00
parent d2eb481e95 7056fd6b0c
commit 22cabb199c
19 changed files with 957 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -14,6 +14,7 @@ tests/server/static/upload
.env.*.local .env.*.local
.eslintcache .eslintcache
.env .env
.env.tiankongdi
.env.analyze .env.analyze
.env.development .env.development
.env.lindidiaocha .env.lindidiaocha

32
src/api/sys/layerManagement.ts
View File

@ -1,5 +1,13 @@
import { defHttp } from '@/utils/http/axios'; import { defHttp } from '@/utils/http/axios';
import { AddLayerParams,GetLayerListParams,AddGeomParams,GetGeomParams,LoginResultModel, GetUserInfoModel } from './model/layerModel'; import {
AddLayerParams,
GetLayerListParams,
AddGeomParams,
GetGeomParams,
LoginResultModel,
GetUserInfoModel,
CalTubanAreaModel
} from './model/layerModel';
import { ErrorMessageMode } from '#/axios'; import { ErrorMessageMode } from '#/axios';
@ -14,6 +22,8 @@ enum Api {
GetLayerList = "/api/ShpLayerSource/LoadPage", GetLayerList = "/api/ShpLayerSource/LoadPage",
AddGeom = "/api/ShpLayerSource/SaveShapeData", AddGeom = "/api/ShpLayerSource/SaveShapeData",
GetGeom = "/api/ShpLayerSource/GetShapeData", GetGeom = "/api/ShpLayerSource/GetShapeData",
CalTubanArea = "/api/DroneCaseInfoSingle/CalTubanArea",
SplitAndCalTubanArea = "/api/DroneCaseInfoSingle/SplitAndCalTubanArea",
GetPermCode = '/getPermCode', GetPermCode = '/getPermCode',
TestRetry = '/testRetry', TestRetry = '/testRetry',
Login = '/api/Check/Login', Login = '/api/Check/Login',
@ -106,6 +116,26 @@ export function getGeom(params:GetGeomParams) {
) )
} }
export function calTubanArea(params:CalTubanAreaModel){
return defHttp.post(
{
url: Api.CalTubanArea,
params,
}
)
}
export function splitAndCalTubanArea(params:CalTubanAreaModel){
return defHttp.post(
{
url: Api.SplitAndCalTubanArea,
params,
}
)
}
export function getConfig(params) { export function getConfig(params) {
return defHttp.get( return defHttp.get(

13
src/api/sys/model/layerModel.ts
View File

@ -33,6 +33,19 @@ export interface GetGeomParams {
limit:number, limit:number,
key:string | null, key:string | null,
} }
export interface CalTubanAreaModel{
wktgeom: string | null;
gengdi: number | null,
nongyongdi: number | null,
jibennongtian: number | null,
shengtaihongxian: number | null,
gengdituban:string,
nongyongdituban:string | null,
jibennongtiantuban:string | null,
shengtaihongxiantuban:string | null,
remaintuban:string | null
}
export interface RoleInfo { export interface RoleInfo {
roleName: string; roleName: string;

2
src/api/tiankongdi/index.ts
View File

@ -188,7 +188,7 @@ export function rebackzhuantipic(params:{ zhuanti, CaseId }){
params params
}); });
} }
export function CopyImg(params:string[]){ export function CopyImg(params: { caseId, images}){
return defHttp.post({ return defHttp.post({
url: Api.CopyImg, url: Api.CopyImg,
data:params, data:params,

1
src/components/FormViewer/index.vue
View File

@ -331,7 +331,6 @@
} }
}, 10); }, 10);
} }
console.log(111111111111,cardGroupData.value)
} }
function tabsChange(e) { function tabsChange(e) {
tabsKey.value = e; tabsKey.value = e;

235
src/components/MapboxMaps/MapComponent.vue
View File

@ -107,7 +107,29 @@
<p class="split-panel-item">导入图层分割</p> <p class="split-panel-item">导入图层分割</p>
</a-upload> </a-upload>
<!-- <p class="split-panel-item" @click="handlerSelectLandType()">地类图斑分割</p> --> <!-- <p class="split-panel-item" >地类图斑分割</p> -->
<a-dropdown>
<p @click.prevent>地类图斑分割 <DownOutlined /></p>
<template #overlay>
<a-menu>
<a-menu-item @click="handlerSelectLandType('gengdi')">
<p>耕地地类分割</p>
</a-menu-item>
<a-menu-item @click="handlerSelectLandType('jianshe')">
<p>建设用地地类分割</p>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div> </div>
</template> </template>
@ -274,6 +296,7 @@
SplitCellsOutlined, SplitCellsOutlined,
CloudUploadOutlined, CloudUploadOutlined,
Loading3QuartersOutlined, Loading3QuartersOutlined,
DownOutlined,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import mapboxgl, { Map, Popup } from 'mapbox-gl'; import mapboxgl, { Map, Popup } from 'mapbox-gl';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
@ -323,6 +346,10 @@
import { message, Modal } from 'ant-design-vue'; import { message, Modal } from 'ant-design-vue';
import { useCloudQueryStore } from '@/store/modules/cloudquery'; import { useCloudQueryStore } from '@/store/modules/cloudquery';
// 地类分割
import { splitAndCalTubanArea } from '@/api/sys/layerManagement';
import { CalTubanAreaModel } from '@/api/sys/model/layerModel';
import { AddDroneTask, LoadLandType, AddDroneLandTask, LoadCloudQueryByCaseNo } from '@/api/demo/cloudQuery'; import { AddDroneTask, LoadLandType, AddDroneLandTask, LoadCloudQueryByCaseNo } from '@/api/demo/cloudQuery';
import { signal } from '@/utils/signalR'; import { signal } from '@/utils/signalR';
// 坐标系转换 // 坐标系转换
@ -401,13 +428,200 @@
caseid:null, caseid:null,
}) })
// 选择地类类型 // 地类分割图斑
const handlerSelectLandType = ()=>{ const handlerSelectLandType = (type)=>{
splitPanelVisible.value = false;
LoadLandType().then(res=>{
landTypeList.value = res; emit('handlerStartSpliting',true);
})
landTypeVisible.value = true; try{
let geom = GeojsonToWkt(JSON.parse(JSON.stringify(currentGeoJson.value.geometry)));
let calAreaParams = {
"wktgeom":geom,
"type":type
}
splitAndCalTubanArea(calAreaParams).then(res=>{
if(res){
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
// 耕地
if(res.gengdituban && !res.gengdituban.match("EMPTY")){
let geometry = WktToGeojson(res.gengdituban)
// let geometry = WktToGeojson("POLYGON((118.20453045 34.61493194,118.2043834 34.61496477,118.20439868 34.61503472,118.20453843 34.61501303,118.20453045 34.61493194))");
let feature = {
"type": "Feature",
"properties": {
"id": generateUUID()
},
"geometry": geometry
}
splitAfterFeatures.features.push(feature)
}
// 农用地
if(res.nongyongdituban && !res.nongyongdituban.match("EMPTY")){
let geometry = WktToGeojson(res.nongyongdituban)
// let geometry = WktToGeojson("POLYGON((118.20453902 34.61501903,118.20453045 34.61493194,118.20453843 34.61501303,118.20439868 34.61503472,118.2043834 34.61496477,118.20441053 34.61508898,118.20387087 34.61518892,118.20387087 34.61526887,118.20442195 34.61517464,118.20442195 34.61515465,118.2048474 34.61509184,118.20482741 34.61498048,118.20453902 34.61501903))")
let feature = {
"type": "Feature",
"properties": {
"id": generateUUID()
},
"geometry": geometry
}
splitAfterFeatures.features.push(feature)
}
// 基本农田
if(res.jibennongtiantuban && !res.jibennongtiantuban.match("EMPTY")){
let geometry = WktToGeojson(res.jibennongtiantuban)
let feature = {
"type": "Feature",
"properties": {
"id": generateUUID()
},
"geometry": geometry
}
splitAfterFeatures.features.push(feature)
}
//
if(res.remaintuban && !res.remaintuban.match("EMPTY")){
let geometry = WktToGeojson(res.remaintuban)
let feature = {
"type": "Feature",
"properties": {
"id": generateUUID()
},
"geometry": geometry
}
splitAfterFeatures.features.push(feature)
}
// 生态保护红线
if(res.shengtaihongxiantuban && !res.shengtaihongxiantuban.match("EMPTY")){
let geometry = WktToGeojson(res.shengtaihongxiantuban)
let feature = {
"type": "Feature",
"properties": {
"id": generateUUID()
},
"geometry": geometry
}
splitAfterFeatures.features.push(feature)
}
console.log("splitAfterFeatures",splitAfterFeatures);
// 分割数据返回父组件中
emit('handlerSplitPolygon', splitAfterFeatures.features);
handlerUnDraw();
}
}).catch((e)=>{
emit('handlerStartSpliting',false);
})
}catch(e){
emit('handlerStartSpliting',false);
}
// let res = {
// "wktgeom": null,
// "gengdi": 0.17,
// "nongyongdi": 1.64,
// "jibennongtian": 0,
// "shengtaihongxian": 0,
// "gengdituban": "POLYGON((118.204530452946 34.6149319373947,118.204383402255 34.6149647739564,118.20439867709747 34.6150347166548,118.2045384290743 34.61501302803828,118.204530452946 34.6149319373947))",
// "nongyongdituban": "POLYGON((118.204827409679 34.6149804783991,118.204539019005 34.6150190256674,118.204530452946 34.6149319373947,118.204383402255 34.6149647739564,118.204410528111 34.615088981821,118.203870866355 34.6151889191832,118.203870866355 34.6152688690729,118.204421949524 34.6151746424171,118.204421949524 34.6151546549447,118.204847397152 34.6150918371741,118.204827409679 34.6149804783991))",
// "jibennongtiantuban": "",
// "shengtaihongxiantuban": "",
// "remaintuban": "POLYGON EMPTY"
// }
// if(res){
// let splitAfterFeatures = {
// type: 'FeatureCollection',
// features: [],
// };
// // 耕地
// if(res.gengdituban && !res.gengdituban.match("EMPTY")){
// let geometry = WktToGeojson(res.gengdituban)
// let feature = {
// "type": "Feature",
// "properties": {
// "id": generateUUID()
// },
// "geometry": geometry
// }
// splitAfterFeatures.features.push(feature)
// }
// // 农用地
// if(res.nongyongdituban && !res.nongyongdituban.match("EMPTY")){
// let geometry = WktToGeojson(res.nongyongdituban)
// let feature = {
// "type": "Feature",
// "properties": {
// "id": generateUUID()
// },
// "geometry": geometry
// }
// splitAfterFeatures.features.push(feature)
// }
// // 基本农田
// if(res.jibennongtiantuban && !res.jibennongtiantuban.match("EMPTY")){
// let geometry = WktToGeojson(res.jibennongtiantuban)
// let feature = {
// "type": "Feature",
// "properties": {
// "id": generateUUID()
// },
// "geometry": geometry
// }
// splitAfterFeatures.features.push(feature)
// }
// //
// if(res.remaintuban && !res.remaintuban.match("EMPTY")){
// let geometry = WktToGeojson(res.remaintuban)
// let feature = {
// "type": "Feature",
// "properties": {
// "id": generateUUID()
// },
// "geometry": geometry
// }
// splitAfterFeatures.features.push(feature)
// }
// // 生态保护红线
// if(res.shengtaihongxiantuban && !res.shengtaihongxiantuban.match("EMPTY")){
// let geometry = WktToGeojson(res.shengtaihongxiantuban)
// let feature = {
// "type": "Feature",
// "properties": {
// "id": generateUUID()
// },
// "geometry": geometry
// }
// splitAfterFeatures.features.push(feature)
// }
// // 分割数据返回父组件中
// emit('handlerSplitPolygon', splitAfterFeatures.features);
// handlerUnDraw();
// }
// splitAndCalTubanArea(calAreaParams).then(res=>{
// })
// splitPanelVisible.value = false;
// LoadLandType().then(res=>{
// landTypeList.value = res;
// })
// landTypeVisible.value = true;
} }
// 使用地类分割 // 使用地类分割
@ -589,6 +803,7 @@
'handlerDrawComplete', 'handlerDrawComplete',
'handlerGetFormDetail', 'handlerGetFormDetail',
'handlerSplitPolygon', 'handlerSplitPolygon',
'handlerStartSpliting',
'onFeatureClick', 'onFeatureClick',
]); ]);
@ -967,7 +1182,7 @@
splitPolygon.geometry.coordinates[0][index] = [item[0],item[1]]; splitPolygon.geometry.coordinates[0][index] = [item[0],item[1]];
}) })
//console.log("editGeoJson",editGeoJson.value); console.log("splitLineString",splitLineString);
let features = splitPolygonByLine(splitLineString, JSON.parse(JSON.stringify(editGeoJson.value))); let features = splitPolygonByLine(splitLineString, JSON.parse(JSON.stringify(editGeoJson.value)));
if(features){ if(features){
@ -979,6 +1194,7 @@
splitAfterFeatures.features = tempFeatures; splitAfterFeatures.features = tempFeatures;
console.log("tempFeatures",tempFeatures);
// 分割数据返回父组件中 // 分割数据返回父组件中
emit('handlerSplitPolygon', tempFeatures); emit('handlerSplitPolygon', tempFeatures);
@ -1370,6 +1586,7 @@
}; };
const handlerCancleDraw = () => { const handlerCancleDraw = () => {
if (drawTool) { if (drawTool) {
map.removeControl(drawTool); map.removeControl(drawTool);
drawTool = null; drawTool = null;

10
src/components/MapboxMaps/lib/splitpolygon.ts
View File

@ -41,6 +41,7 @@ export function splitPolygonByLine(line, outerPolygon) {
}else if(outerPolygon.geometry.type == "Polygon"){ }else if(outerPolygon.geometry.type == "Polygon"){
// 如果是Polygon的单图斑 直接获取分割结果 // 如果是Polygon的单图斑 直接获取分割结果
let splitRes = splitByLine(line,outerPolygon); let splitRes = splitByLine(line,outerPolygon);
// 如果有数据就拼接数据 // 如果有数据就拼接数据
if(splitRes){ if(splitRes){
splitAfterFeatures = splitAfterFeatures.concat(splitRes); splitAfterFeatures = splitAfterFeatures.concat(splitRes);
@ -49,7 +50,6 @@ export function splitPolygonByLine(line, outerPolygon) {
splitAfterFeatures = splitAfterFeatures.concat(outerPolygon); splitAfterFeatures = splitAfterFeatures.concat(outerPolygon);
} }
} }
//console.log("splitAfterFeatures",splitAfterFeatures)
return splitAfterFeatures; return splitAfterFeatures;
@ -163,7 +163,7 @@ function splitByLine(line,outerPolygon){
//console.log("第1步：传入的分割线数据",line); //console.log("第1步：传入的分割线数据",line);
//console.log("第2步：传入的分割面数据",outerPolygon) // console.log("第2步：传入的分割面数据",outerPolygon)
// 处理被分割的面数据坐标小数点保留多少位 // 处理被分割的面数据坐标小数点保留多少位
@ -180,7 +180,7 @@ function splitByLine(line,outerPolygon){
//将点合并成MultiPoint //将点合并成MultiPoint
let intersectCombined = turf.combine(intersectCollection).features[0]; let intersectCombined = turf.combine(intersectCollection).features[0];
//console.log("第5步：分割后所有点数据",intersectCombined) console.log("第5步：分割后所有点数据",intersectCombined)
//分别获取切割线 //分别获取切割线
@ -195,11 +195,11 @@ function splitByLine(line,outerPolygon){
let pieceCollection = turf.featureCollection( let pieceCollection = turf.featureCollection(
outerPieceCollection.features.concat(splitterPieceCollection.features), outerPieceCollection.features.concat(splitterPieceCollection.features),
); );
//console.log("第8步：所有分割线段",pieceCollection); console.log("第8步：所有分割线段",pieceCollection);
//使用turf将闭合线组成多边形 //使用turf将闭合线组成多边形
let polygonCollection = turf.polygonize(pieceCollection); let polygonCollection = turf.polygonize(pieceCollection);
//console.log("第9步：分割线合并面数据",polygonCollection) // console.log("第9步：分割线合并面数据",polygonCollection)
//对多边形进行判断，切割外的多边形丢弃 //对多边形进行判断，切割外的多边形丢弃
let innerPolygons = polygonCollection.features.filter((polygon) => { let innerPolygons = polygonCollection.features.filter((polygon) => {

31
src/components/MapboxMaps/src/WktGeojsonTransform.ts
View File

@ -15,4 +15,33 @@ const GeojsonToWkt = (geojsonData)=> {
} }
export {WktToGeojson,GeojsonToWkt} const removeZM = (geoJSON) => {
function removeZMFromCoords(coords) {
return coords.map((coord) => [coord[0], coord[1]]); // 只保留 X 和 Y
}
switch (geoJSON.type) {
case 'Point':
geoJSON.coordinates = removeZMFromCoords([geoJSON.coordinates]).flat();
break;
case 'LineString':
case 'MultiPoint':
geoJSON.coordinates = removeZMFromCoords(geoJSON.coordinates);
break;
case 'Polygon':
case 'MultiLineString':
geoJSON.coordinates = geoJSON.coordinates.map((ring) => removeZMFromCoords(ring));
break;
case 'MultiPolygon':
geoJSON.coordinates = geoJSON.coordinates.map((polygon) =>
polygon.map((ring) => removeZMFromCoords(ring))
);
break;
default:
throw new Error(`Unsupported geometry type: ${geoJSON.type}`);
}
return geoJSON;
}
export {WktToGeojson,GeojsonToWkt,removeZM}

6
src/components/Upload/src/components/ImageUploadSelectOtherModal.vue
View File

@ -61,7 +61,11 @@ const save = () => {
return return
} }
loading.value = true loading.value = true
CopyImg(selectImage.value).then(res => { let params = {
caseId: sessionStorage.getItem('SelectOtherId'),
images: selectImage.value
}
CopyImg(params).then(res => {
emits('save', res) emits('save', res)
}).finally(() => { }).finally(() => {
loading.value = false loading.value = false

149
src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue
View File

@ -1,5 +1,10 @@
<template> <template>
<div class="detail-container"> <div class="detail-container">
<!-- 加载框 -->
<div class="load-mask" v-if="isLandTypeSpliting">
<a-spin class="loader-block" size="large" tip="正在分割中......" />
</div>
<div class="left-container"> <div class="left-container">
<a-divider orientation="left">图斑信息</a-divider> <a-divider orientation="left">图斑信息</a-divider>
<div class="map-container"> <div class="map-container">
@ -7,6 +12,7 @@
:geomsList="geomsList" :geomsList="geomsList"
:mapConfig="mapConfig" :mapConfig="mapConfig"
@handlerSplitPolygon="handlerSplitPolygon" @handlerSplitPolygon="handlerSplitPolygon"
@handlerStartSpliting="handlerStartSpliting"
@mapOnLoad="onMapboxLoad" @mapOnLoad="onMapboxLoad"
:caseid="id" :caseid="id"
:caseno="props.showInfoData.case_no" :caseno="props.showInfoData.case_no"
@ -691,14 +697,14 @@
import axios from 'axios'; import axios from 'axios';
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'; import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getConfig } from '@/api/sys/layerManagement'; import { getConfig } from '@/api/sys/layerManagement';
import { getGeom } from '@/api/sys/layerManagement'; import { getGeom,calTubanArea } from '@/api/sys/layerManagement';
import { CaseSplit } from '@/api/degraining/index'; import { CaseSplit } from '@/api/degraining/index';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { getAppEnvConfig } from '@/utils/env'; import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig(); const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
import { GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform'; import { GeojsonToWkt,removeZM } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { import {
mapTypeOptions, mapTypeOptions,
illegalTypeOptions, illegalTypeOptions,
@ -952,6 +958,7 @@
///////// File Preview && Download //////// ///////// File Preview && Download ////////
import FilePreview from '@/components/Upload/src/components/FilePreview.vue'; import FilePreview from '@/components/Upload/src/components/FilePreview.vue';
import { CalTubanAreaModel } from '@/api/sys/model/layerModel';
const previewFileModalVisible = ref(false); const previewFileModalVisible = ref(false);
const previewFileUrl = ref(""); const previewFileUrl = ref("");
@ -974,74 +981,100 @@
return document.getElementById('info-container'); return document.getElementById('info-container');
}; };
const isLandTypeSpliting = ref<Boolean>(false);
// 开始分割
const handlerStartSpliting = (e)=> {
isLandTypeSpliting.value = e;
}
const splitPolygonForm = ref([]); const splitPolygonForm = ref([]);
const splitAfterPolygon = ref([]); const splitAfterPolygon = ref([]);
const handlerSplitPolygon = (e) => { const handlerSplitPolygon = (e) => {
// splitPolygonForm.value = [];
// 删除被分割的图斑 // 删除被分割的图斑
if(currentPolygon.value){ if(currentPolygon.value){
splitPolygonForm.value?.splice(currentPolygon.value,1); splitPolygonForm.value?.splice(currentPolygon.value,1);
splitAfterPolygon.value?.splice(currentPolygon.value,1); splitAfterPolygon.value?.splice(currentPolygon.value,1);
} }
let sumArea = 0.0;
e?.forEach((item, index) => {
var polygon = null;
if(item.geometry.type == 'Polygon'){
polygon = turf.polygon(item.geometry.coordinates)
}else if(item.geometry.type == 'MultiPolygon'){
polygon = turf.multiPolygon(item.geometry.coordinates)
}
let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
if(index == e.length-1){ isLandTypeSpliting.value = false;
are = (parseFloat(area) - sumArea).toFixed(2);
// 面积计算
let sumArea = 0.0;
e?.forEach((item, index) => {
// 去除GeoJSON Z坐标
let afterItem = removeZM(item['geometry'])
let calAreaParams:CalTubanAreaModel = {
"wktgeom": GeojsonToWkt(item['geometry']),
} }
sumArea = sumArea + are;
let form = { calTubanArea(calAreaParams).then(resultItem=>{
fid: null, if(resultItem){
unitname: '',
createdate: createtime, let form = {
caseno: case_no + ' 分割图斑', fid: null,
countyname: countyname, unitname: '',
streetname: streetname, createdate: createtime,
isbuildname: '', caseno: case_no + ' 分割图斑',
nongyongdi_area: null, countyname: countyname,
gengdi_area: null, streetname: streetname,
yongjiujibennongtian_area: null, isbuildname: '',
shengtaibaohuhongxian_area: null, nongyongdi_area: resultItem.nongyongdi > 0 ? resultItem.nongyongdi : 0.00,
guotukongjianguihua_area: null, gengdi_area: resultItem.gengdi > 0 ? resultItem.gengdi : 0.00,
area: are > 0 ? are : 0.00, yongjiujibennongtian_area: resultItem.jibennongtian > 0 ? resultItem.jibennongtian : 0.00,
geom: item, shengtaibaohuhongxian_area: resultItem.shengtaihongxian > 0 ? resultItem.shengtaihongxian : 0.00,
checked:false, guotukongjianguihua_area: null,
}; area: resultItem.totalmianji > 0 ? resultItem.totalmianji : 0.00,
splitPolygonForm.value?.push(form); geom: item,
splitAfterPolygon.value?.push(form.geom) checked:false,
};
splitPolygonForm.value?.push(form);
splitAfterPolygon.value?.push(form.geom)
// 分割完成后重新渲染面数据
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitPolygonForm.value?.forEach((item,idnex)=>{
splitAfterFeatures.features.push(item.geom);
})
const areKeyDownChange = MapboxComponent.value.handlerDetails(splitAfterFeatures);
}
})
// var polygon = null;
// if(item.geometry.type == 'Polygon'){
// polygon = turf.polygon(item.geometry.coordinates)
// }else if(item.geometry.type == 'MultiPolygon'){
// polygon = turf.multiPolygon(item.geometry.coordinates)
// }
// let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
// if(index == e.length-1){
// are = (parseFloat(area) - sumArea).toFixed(2);
// }
// sumArea = sumArea + are;
}); });
// 分割完成后重新渲染面数据
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitPolygonForm.value?.forEach((item,idnex)=>{
splitAfterFeatures.features.push(item.geom);
})
// splitAfterFeatures.features = e;
const areKeyDownChange =
MapboxComponent.value.handlerDetails(splitAfterFeatures);
// 清空选中图斑 // 清空选中图斑
let geoms = { let geoms = {
type: 'FeatureCollection', type: 'FeatureCollection',
features: [], features: [],
}; };
MapboxComponent.value.handlerDetails(geoms, 'splitPolygonSource', 'splitPolygonLayer', { MapboxComponent.value.handlerDetails(geoms, 'splitPolygonSource', 'splitPolygonLayer', {
lineStyle: { 'line-color': '#408eff', 'line-width': 3 }, lineStyle: { 'line-color': '#408eff', 'line-width': 3 },
fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 }, fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 },
@ -1051,6 +1084,7 @@ const areKeyDownChange =
}; };
const handlerEditPolygonInfo = (e) => { const handlerEditPolygonInfo = (e) => {
console.log(e); console.log(e);
}; };
@ -1377,6 +1411,21 @@ const areKeyDownChange =
width: calc(100vw - 15px); width: calc(100vw - 15px);
height: calc(100vh - 120px); height: calc(100vh - 120px);
display: flex; display: flex;
.load-mask{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background:rgba(0,0,0,0.5);
z-index:9999;
.loader-block{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
}
.left-container { .left-container {
flex: 1; flex: 1;
height: 100%; height: 100%;

144
src/views/demo/inspectionaudit/curbspotcity/MapList/SplitPolygonModal/index.vue
View File

@ -1,5 +1,11 @@
<template> <template>
<div class="detail-container"> <div class="detail-container">
<!-- 加载框 -->
<div class="load-mask" v-if="isLandTypeSpliting">
<a-spin class="loader-block" size="large" tip="正在分割中......" />
</div>
<!-- 左侧地图 -->
<div class="left-container"> <div class="left-container">
<a-divider orientation="left">图斑信息</a-divider> <a-divider orientation="left">图斑信息</a-divider>
<div class="map-container"> <div class="map-container">
@ -7,6 +13,7 @@
:geomsList="geomsList" :geomsList="geomsList"
:mapConfig="mapConfig" :mapConfig="mapConfig"
@handlerSplitPolygon="handlerSplitPolygon" @handlerSplitPolygon="handlerSplitPolygon"
@handlerStartSpliting="handlerStartSpliting"
@mapOnLoad="onMapboxLoad" @mapOnLoad="onMapboxLoad"
:caseid="id" :caseid="id"
:caseno="case_no" :caseno="case_no"
@ -376,7 +383,7 @@
</a-tabs> </a-tabs>
</div> </div>
</div> </div>
<!-- 右侧列表 -->
<div class="right-container"> <div class="right-container">
<a-divider orientation="left">图斑分割结果 </a-divider> <a-divider orientation="left">图斑分割结果 </a-divider>
<div class="data-list"> <div class="data-list">
@ -619,14 +626,15 @@
import axios from 'axios'; import axios from 'axios';
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'; import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getConfig } from '@/api/sys/layerManagement'; import { getConfig } from '@/api/sys/layerManagement';
import { getGeom } from '@/api/sys/layerManagement'; import { getGeom,calTubanArea } from '@/api/sys/layerManagement';
import { CalTubanAreaModel } from '@/api/sys/model/layerModel';
import { splitCase } from '@/api/inspectionaudit'; import { splitCase } from '@/api/inspectionaudit';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { getAppEnvConfig } from '@/utils/env'; import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig(); const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
import { GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform'; import { GeojsonToWkt,removeZM } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { import {
mapTypeOptions, mapTypeOptions,
illegalTypeOptions, illegalTypeOptions,
@ -903,76 +911,99 @@ import { itemProps } from '@/components/Menu/src/props';
return document.getElementById('info-container'); return document.getElementById('info-container');
}; };
const isLandTypeSpliting = ref<Boolean>(false);
// 开始分割
const handlerStartSpliting = (e)=> {
isLandTypeSpliting.value = e;
}
const splitPolygonForm = ref([]); const splitPolygonForm = ref([]);
const splitAfterPolygon = ref([]); const splitAfterPolygon = ref([]);
const handlerSplitPolygon = (e) => { const handlerSplitPolygon = (e) => {
// splitPolygonForm.value = [];
// 删除被分割的图斑 // 删除被分割的图斑
if(currentPolygon.value){ if(currentPolygon.value){
splitPolygonForm.value?.splice(currentPolygon.value,1); splitPolygonForm.value?.splice(currentPolygon.value,1);
splitAfterPolygon.value?.splice(currentPolygon.value,1); splitAfterPolygon.value?.splice(currentPolygon.value,1);
} }
isLandTypeSpliting.value = false;
// 面积计算
let sumArea = 0.0; let sumArea = 0.0;
e?.forEach((item, index) => { e?.forEach((item, index) => {
// 去除GeoJSON Z坐标
let afterItem = removeZM(item['geometry'])
var polygon = null; let calAreaParams:CalTubanAreaModel = {
if(item.geometry.type == 'Polygon'){ "wktgeom": GeojsonToWkt(item['geometry']),
polygon = turf.polygon(item.geometry.coordinates)
}else if(item.geometry.type == 'MultiPolygon'){
polygon = turf.multiPolygon(item.geometry.coordinates)
} }
let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
calTubanArea(calAreaParams).then(resultItem=>{
if(resultItem){
let form = {
fid: null,
unitname: '',
createdate: createtime,
caseno: case_no + ' 分割图斑',
countyname: countyname,
streetname: streetname,
isbuildname: '',
nongyongdi_area: resultItem.nongyongdi > 0 ? resultItem.nongyongdi : 0.00,
gengdi_area: resultItem.gengdi > 0 ? resultItem.gengdi : 0.00,
yongjiujibennongtian_area: resultItem.jibennongtian > 0 ? resultItem.jibennongtian : 0.00,
shengtaibaohuhongxian_area: resultItem.shengtaihongxian > 0 ? resultItem.shengtaihongxian : 0.00,
guotukongjianguihua_area: null,
area: resultItem.totalmianji > 0 ? resultItem.totalmianji : 0.00,
geom: item,
checked:false,
};
if(index == e.length-1){ splitPolygonForm.value?.push(form);
are = (parseFloat(area) - sumArea).toFixed(2); splitAfterPolygon.value?.push(form.geom)
}
sumArea = sumArea + are;
let form = {
fid: null, // 分割完成后重新渲染面数据
unitname: '', let splitAfterFeatures = {
createdate: createtime, type: 'FeatureCollection',
caseno: case_no + ' 分割图斑', features: [],
countyname: countyname, };
streetname: streetname, splitPolygonForm.value?.forEach((item,idnex)=>{
isbuildname: '', splitAfterFeatures.features.push(item.geom);
nongyongdi_area: null, })
gengdi_area: null,
yongjiujibennongtian_area: null, const areKeyDownChange = MapboxComponent.value.handlerDetails(splitAfterFeatures);
shengtaibaohuhongxian_area: null,
guotukongjianguihua_area: null, }
area: are > 0 ? are : 0.00, })
geom: item,
checked:false, // var polygon = null;
}; // if(item.geometry.type == 'Polygon'){
splitPolygonForm.value?.push(form); // polygon = turf.polygon(item.geometry.coordinates)
splitAfterPolygon.value?.push(form.geom) // }else if(item.geometry.type == 'MultiPolygon'){
// polygon = turf.multiPolygon(item.geometry.coordinates)
// }
// let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
// if(index == e.length-1){
// are = (parseFloat(area) - sumArea).toFixed(2);
// }
// sumArea = sumArea + are;
}); });
// 分割完成后重新渲染面数据
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitPolygonForm.value?.forEach((item,idnex)=>{
splitAfterFeatures.features.push(item.geom);
})
// splitAfterFeatures.features = e;
const areKeyDownChange =
MapboxComponent.value.handlerDetails(splitAfterFeatures);
// 清空选中图斑 // 清空选中图斑
let geoms = { let geoms = {
type: 'FeatureCollection', type: 'FeatureCollection',
features: [], features: [],
}; };
MapboxComponent.value.handlerDetails(geoms, 'splitPolygonSource', 'splitPolygonLayer', { MapboxComponent.value.handlerDetails(geoms, 'splitPolygonSource', 'splitPolygonLayer', {
lineStyle: { 'line-color': '#408eff', 'line-width': 3 }, lineStyle: { 'line-color': '#408eff', 'line-width': 3 },
fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 }, fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 },
@ -1296,6 +1327,21 @@ const areKeyDownChange =
width: calc(100vw - 15px); width: calc(100vw - 15px);
height: calc(100vh - 120px); height: calc(100vh - 120px);
display: flex; display: flex;
.load-mask{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background:rgba(0,0,0,0.5);
z-index:9999;
.loader-block{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
}
.left-container { .left-container {
flex: 1; flex: 1;
height: 100%; height: 100%;

142
src/views/demo/keyproblem/keyissuesI/curbspotcity/MapList/SplitPolygonModal/index.vue
View File

@ -1,5 +1,10 @@
<template> <template>
<div class="detail-container"> <div class="detail-container">
<!-- 加载框 -->
<div class="load-mask" v-if="isLandTypeSpliting">
<a-spin class="loader-block" size="large" tip="正在分割中......" />
</div>
<div class="left-container"> <div class="left-container">
<a-divider orientation="left">图斑信息</a-divider> <a-divider orientation="left">图斑信息</a-divider>
<div class="map-container"> <div class="map-container">
@ -9,6 +14,7 @@
:geomsList="geomsList" :geomsList="geomsList"
:mapConfig="mapConfig" :mapConfig="mapConfig"
@handlerSplitPolygon="handlerSplitPolygon" @handlerSplitPolygon="handlerSplitPolygon"
@handlerStartSpliting="handlerStartSpliting"
@mapOnLoad="onMapboxLoad" @mapOnLoad="onMapboxLoad"
:splitPlugin="true" :splitPlugin="true"
@onFeatureClick="onFeatureClick" @onFeatureClick="onFeatureClick"
@ -506,14 +512,14 @@
import axios from 'axios'; import axios from 'axios';
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'; import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getConfig } from '@/api/sys/layerManagement'; import { getConfig } from '@/api/sys/layerManagement';
import { getGeom } from '@/api/sys/layerManagement'; import { getGeom,calTubanArea } from '@/api/sys/layerManagement';
import { splitCase } from '@/api/keyproblem/keyissuesI'; import { splitCase } from '@/api/keyproblem/keyissuesI';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { getAppEnvConfig } from '@/utils/env'; import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig(); const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
import { GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform'; import { GeojsonToWkt,removeZM } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { import {
mapTypeOptions, mapTypeOptions,
illegalTypeOptions, illegalTypeOptions,
@ -782,74 +788,101 @@ import { itemProps } from '@/components/Menu/src/props';
return document.getElementById('info-container'); return document.getElementById('info-container');
}; };
const isLandTypeSpliting = ref<Boolean>(false);
// 开始分割
const handlerStartSpliting = (e)=> {
isLandTypeSpliting.value = e;
}
const splitPolygonForm = ref([]); const splitPolygonForm = ref([]);
const splitAfterPolygon = ref([]); const splitAfterPolygon = ref([]);
const handlerSplitPolygon = (e) => { const handlerSplitPolygon = (e) => {
// splitPolygonForm.value = [];
// 删除被分割的图斑 // 删除被分割的图斑
if(currentPolygon.value){ if(currentPolygon.value){
splitPolygonForm.value?.splice(currentPolygon.value,1); splitPolygonForm.value?.splice(currentPolygon.value,1);
splitAfterPolygon.value?.splice(currentPolygon.value,1); splitAfterPolygon.value?.splice(currentPolygon.value,1);
} }
isLandTypeSpliting.value = false;
// 面积计算
let sumArea = 0.0; let sumArea = 0.0;
e?.forEach((item, index) => { e?.forEach((item, index) => {
var polygon = null; // 去除GeoJSON Z坐标
if(item.geometry.type == 'Polygon'){ let afterItem = removeZM(item['geometry'])
polygon = turf.polygon(item.geometry.coordinates)
}else if(item.geometry.type == 'MultiPolygon'){
polygon = turf.multiPolygon(item.geometry.coordinates)
}
let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
if(index == e.length-1){ let calAreaParams:CalTubanAreaModel = {
are = (parseFloat(area) - sumArea).toFixed(2); "wktgeom": GeojsonToWkt(item['geometry']),
} }
sumArea = sumArea + are;
calTubanArea(calAreaParams).then(resultItem=>{
if(resultItem){
let form = {
fid: null,
unitname: '',
createdate: createtime,
caseno: case_no + ' 分割图斑',
countyname: countyname,
streetname: streetname,
isbuildname: '',
nongyongdi_area: resultItem.nongyongdi > 0 ? resultItem.nongyongdi : 0.00,
gengdi_area: resultItem.gengdi > 0 ? resultItem.gengdi : 0.00,
yongjiujibennongtian_area: resultItem.jibennongtian > 0 ? resultItem.jibennongtian : 0.00,
shengtaibaohuhongxian_area: resultItem.shengtaihongxian > 0 ? resultItem.shengtaihongxian : 0.00,
guotukongjianguihua_area: null,
area: resultItem.totalmianji > 0 ? resultItem.totalmianji : 0.00,
geom: item,
checked:false,
};
let form = { splitPolygonForm.value?.push(form);
fid: null, splitAfterPolygon.value?.push(form.geom)
unitname: '',
createdate: createtime,
caseno: case_no + ' 分割图斑', // 分割完成后重新渲染面数据
countyname: countyname, let splitAfterFeatures = {
streetname: streetname, type: 'FeatureCollection',
isbuildname: '', features: [],
nongyongdi_area: null, };
gengdi_area: null, splitPolygonForm.value?.forEach((item,idnex)=>{
yongjiujibennongtian_area: null, splitAfterFeatures.features.push(item.geom);
shengtaibaohuhongxian_area: null, })
guotukongjianguihua_area: null,
area: are > 0 ? are : 0.00, const areKeyDownChange = MapboxComponent.value.handlerDetails(splitAfterFeatures);
geom: item,
checked:false, }
}; })
splitPolygonForm.value?.push(form);
splitAfterPolygon.value?.push(form.geom) // var polygon = null;
// if(item.geometry.type == 'Polygon'){
// polygon = turf.polygon(item.geometry.coordinates)
// }else if(item.geometry.type == 'MultiPolygon'){
// polygon = turf.multiPolygon(item.geometry.coordinates)
// }
// let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
// if(index == e.length-1){
// are = (parseFloat(area) - sumArea).toFixed(2);
// }
// sumArea = sumArea + are;
}); });
// 分割完成后重新渲染面数据
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitPolygonForm.value?.forEach((item,idnex)=>{
splitAfterFeatures.features.push(item.geom);
})
// splitAfterFeatures.features = e;
MapboxComponent.value.handlerDetails(splitAfterFeatures);
// 清空选中图斑 // 清空选中图斑
let geoms = { let geoms = {
type: 'FeatureCollection', type: 'FeatureCollection',
features: [], features: [],
}; };
MapboxComponent.value.handlerDetails(geoms, 'splitPolygonSource', 'splitPolygonLayer', { MapboxComponent.value.handlerDetails(geoms, 'splitPolygonSource', 'splitPolygonLayer', {
lineStyle: { 'line-color': '#408eff', 'line-width': 3 }, lineStyle: { 'line-color': '#408eff', 'line-width': 3 },
fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 }, fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 },
@ -1173,6 +1206,21 @@ import { itemProps } from '@/components/Menu/src/props';
width: calc(100vw - 15px); width: calc(100vw - 15px);
height: calc(100vh - 120px); height: calc(100vh - 120px);
display: flex; display: flex;
.load-mask{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background:rgba(0,0,0,0.5);
z-index:9999;
.loader-block{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
}
.left-container { .left-container {
flex: 1; flex: 1;
height: 100%; height: 100%;

141
src/views/demo/keyproblem/keyissuesII/curbspotcity/MapList/SplitPolygonModal/index.vue
View File

@ -1,5 +1,10 @@
<template> <template>
<div class="detail-container"> <div class="detail-container">
<!-- 加载框 -->
<div class="load-mask" v-if="isLandTypeSpliting">
<a-spin class="loader-block" size="large" tip="正在分割中......" />
</div>
<div class="left-container"> <div class="left-container">
<a-divider orientation="left">图斑信息</a-divider> <a-divider orientation="left">图斑信息</a-divider>
<div class="map-container"> <div class="map-container">
@ -9,6 +14,7 @@
:geomsList="geomsList" :geomsList="geomsList"
:mapConfig="mapConfig" :mapConfig="mapConfig"
@handlerSplitPolygon="handlerSplitPolygon" @handlerSplitPolygon="handlerSplitPolygon"
@handlerStartSpliting="handlerStartSpliting"
@mapOnLoad="onMapboxLoad" @mapOnLoad="onMapboxLoad"
:splitPlugin="true" :splitPlugin="true"
@onFeatureClick="onFeatureClick" @onFeatureClick="onFeatureClick"
@ -506,14 +512,14 @@
import axios from 'axios'; import axios from 'axios';
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'; import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getConfig } from '@/api/sys/layerManagement'; import { getConfig } from '@/api/sys/layerManagement';
import { getGeom } from '@/api/sys/layerManagement'; import { getGeom,calTubanArea } from '@/api/sys/layerManagement';
import { splitCase } from '@/api/keyproblem/keyissuesII'; import { splitCase } from '@/api/keyproblem/keyissuesII';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { getAppEnvConfig } from '@/utils/env'; import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig(); const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
import { GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform'; import { GeojsonToWkt,removeZM } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { import {
mapTypeOptions, mapTypeOptions,
illegalTypeOptions, illegalTypeOptions,
@ -780,74 +786,100 @@ const handleCancelPreviewFile = ()=>{
return document.getElementById('info-container'); return document.getElementById('info-container');
}; };
const isLandTypeSpliting = ref<Boolean>(false);
// 开始分割
const handlerStartSpliting = (e)=> {
isLandTypeSpliting.value = e;
}
const splitPolygonForm = ref([]); const splitPolygonForm = ref([]);
const splitAfterPolygon = ref([]); const splitAfterPolygon = ref([]);
const handlerSplitPolygon = (e) => { const handlerSplitPolygon = (e) => {
// splitPolygonForm.value = [];
// 删除被分割的图斑 // 删除被分割的图斑
if(currentPolygon.value){ if(currentPolygon.value){
splitPolygonForm.value?.splice(currentPolygon.value,1); splitPolygonForm.value?.splice(currentPolygon.value,1);
splitAfterPolygon.value?.splice(currentPolygon.value,1); splitAfterPolygon.value?.splice(currentPolygon.value,1);
} }
isLandTypeSpliting.value = false;
// 面积计算
let sumArea = 0.0; let sumArea = 0.0;
e?.forEach((item, index) => { e?.forEach((item, index) => {
var polygon = null; // 去除GeoJSON Z坐标
if(item.geometry.type == 'Polygon'){ let afterItem = removeZM(item['geometry'])
polygon = turf.polygon(item.geometry.coordinates)
}else if(item.geometry.type == 'MultiPolygon'){
polygon = turf.multiPolygon(item.geometry.coordinates)
}
let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
if(index == e.length-1){ let calAreaParams:CalTubanAreaModel = {
are = (parseFloat(area) - sumArea).toFixed(2); "wktgeom": GeojsonToWkt(item['geometry']),
} }
sumArea = sumArea + are;
calTubanArea(calAreaParams).then(resultItem=>{
if(resultItem){
let form = {
fid: null,
unitname: '',
createdate: createtime,
caseno: case_no + ' 分割图斑',
countyname: countyname,
streetname: streetname,
isbuildname: '',
nongyongdi_area: resultItem.nongyongdi > 0 ? resultItem.nongyongdi : 0.00,
gengdi_area: resultItem.gengdi > 0 ? resultItem.gengdi : 0.00,
yongjiujibennongtian_area: resultItem.jibennongtian > 0 ? resultItem.jibennongtian : 0.00,
shengtaibaohuhongxian_area: resultItem.shengtaihongxian > 0 ? resultItem.shengtaihongxian : 0.00,
guotukongjianguihua_area: null,
area: resultItem.totalmianji > 0 ? resultItem.totalmianji : 0.00,
geom: item,
checked:false,
};
let form = { splitPolygonForm.value?.push(form);
fid: null, splitAfterPolygon.value?.push(form.geom)
unitname: '',
createdate: createtime,
caseno: case_no + ' 分割图斑', // 分割完成后重新渲染面数据
countyname: countyname, let splitAfterFeatures = {
streetname: streetname, type: 'FeatureCollection',
isbuildname: '', features: [],
nongyongdi_area: null, };
gengdi_area: null, splitPolygonForm.value?.forEach((item,idnex)=>{
yongjiujibennongtian_area: null, splitAfterFeatures.features.push(item.geom);
shengtaibaohuhongxian_area: null, })
guotukongjianguihua_area: null,
area: are > 0 ? are : 0.00, const areKeyDownChange = MapboxComponent.value.handlerDetails(splitAfterFeatures);
geom: item,
checked:false, }
}; })
splitPolygonForm.value?.push(form);
splitAfterPolygon.value?.push(form.geom) // var polygon = null;
// if(item.geometry.type == 'Polygon'){
// polygon = turf.polygon(item.geometry.coordinates)
// }else if(item.geometry.type == 'MultiPolygon'){
// polygon = turf.multiPolygon(item.geometry.coordinates)
// }
// let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
// if(index == e.length-1){
// are = (parseFloat(area) - sumArea).toFixed(2);
// }
// sumArea = sumArea + are;
}); });
// 分割完成后重新渲染面数据
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitPolygonForm.value?.forEach((item,idnex)=>{
splitAfterFeatures.features.push(item.geom);
})
// splitAfterFeatures.features = e;
MapboxComponent.value.handlerDetails(splitAfterFeatures);
// 清空选中图斑 // 清空选中图斑
let geoms = { let geoms = {
type: 'FeatureCollection', type: 'FeatureCollection',
features: [], features: [],
}; };
MapboxComponent.value.handlerDetails(geoms, 'splitPolygonSource', 'splitPolygonLayer', { MapboxComponent.value.handlerDetails(geoms, 'splitPolygonSource', 'splitPolygonLayer', {
lineStyle: { 'line-color': '#408eff', 'line-width': 3 }, lineStyle: { 'line-color': '#408eff', 'line-width': 3 },
fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 }, fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 },
@ -1171,6 +1203,21 @@ const handleCancelPreviewFile = ()=>{
width: calc(100vw - 15px); width: calc(100vw - 15px);
height: calc(100vh - 120px); height: calc(100vh - 120px);
display: flex; display: flex;
.load-mask{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background:rgba(0,0,0,0.5);
z-index:9999;
.loader-block{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
}
.left-container { .left-container {
flex: 1; flex: 1;
height: 100%; height: 100%;

56
src/views/demo/onlineform/formCall/index.vue
View File

@ -159,6 +159,7 @@
const btnArr: any = ref([ const btnArr: any = ref([
{ label: '新增', prop: 'Add', class: 'primary' }, { label: '新增', prop: 'Add', class: 'primary' },
{ label: '编辑', prop: 'Edit', class: 'success' }, { label: '编辑', prop: 'Edit', class: 'success' },
{ label: '审核', prop: 'Examine', class: 'success' },
{ label: '删除', prop: 'Delete', class: 'error' }, { label: '删除', prop: 'Delete', class: 'error' },
{ label: '详情', prop: 'Details', class: 'default' }, { label: '详情', prop: 'Details', class: 'default' },
]); ]);
@ -562,6 +563,59 @@
isUpdate.value = true; isUpdate.value = true;
} }
break; break;
case 'Examine':
if (rows.length == 0) {
return createMessage.warn('请选择一条数据进行审核');
}
// console.log('rowsrows',formConfig,rows);
btnList.value.forEach((element) => {
if (element.prop === 'Examine' && element.isWFlow) {
flowCode.value = element.wFlowCode;
}
});
if (flowCode.value == '') {
let toProps = {
isDetail: false,
isUpdate: true,
tab: config.schemas,
record: rows[0],
recordChildren: formData.value,
query: query.value,
btnList: btnList.value,
beforeSetData: config.beforeSetData,
afterValidateForm: config.afterValidateForm,
afterSaveEvent: config.afterSaveEvent,
changeDataEvent: config.changeDataEvent,
infoUseMainTableData: infoUseMainTableData.value,
infoUseSubTableData: infoUseSubTableData.value,
};
if (haveMap.value) {
// showFormModalData.value = toProps;
// openShowFormModal.value = true;
// openMapFormModal(true,toProps);
// mapFormShow.value = true;
// mapFormData.value = toProps;
// MapboxComponent.value.handlerDraw(
// status,
// mapgemoList.value,
// mapSetData.value?.isAllowEditPolygon,
// );
// openModal(true, toProps);
// previewOpen.value = true;
// flowFormData.value = rows[0];
// isUpdate.value = true;
openModal(true, toProps);
} else {
openModal(true, toProps);
}
} else {
previewOpen.value = true;
flowFormData.value = rows[0];
isUpdate.value = true;
}
break;
case 'Delete': case 'Delete':
if (rows.length == 0) { if (rows.length == 0) {
return createMessage.warn('请选择一条数据进行删除'); return createMessage.warn('请选择一条数据进行删除');
@ -584,7 +638,7 @@
}); });
}, },
}); });
break; break;
case 'Details': case 'Details':
if (rows.length == 0) { if (rows.length == 0) {
return createMessage.warn('请选择一条数据查看详情'); return createMessage.warn('请选择一条数据查看详情');

4
src/views/demo/onlineform/formModule/config/btns.vue
View File

@ -21,12 +21,12 @@
/> />
</template> </template>
<template v-if="column.key === 'isWFlow'"> <template v-if="column.key === 'isWFlow'">
<div v-if="record.prop == 'Add' || record.prop == 'Edit'"> <div v-if="record.prop == 'Add' || record.prop == 'Edit' || record.prop == 'Examine' ">
<a-switch v-model:checked="record.isWFlow" /> <a-switch v-model:checked="record.isWFlow" />
</div> </div>
</template> </template>
<template v-if="column.key === 'wFlowCode'"> <template v-if="column.key === 'wFlowCode'">
<div v-if="record.prop == 'Add' || record.prop == 'Edit'"> <div v-if="record.prop == 'Add' || record.prop == 'Edit' || record.prop == 'Examine' ">
<a-select <a-select
placeholder="请选择" placeholder="请选择"
size="small" size="small"

9
src/views/demo/onlineform/formModule/modalDesign.vue
View File

@ -177,6 +177,15 @@
class: 'success', class: 'success',
sort: 3, sort: 3,
}, },
{
label: '审核',
id: 'Examine',
prop: 'Examine',
icon: 'ant-design:edit-outlined',
isRowBtn: true,
class: 'success',
sort: 3,
},
{ {
label: '删除', label: '删除',
id: 'Delete', id: 'Delete',

146
src/views/demo/redlinesupervision/curbspotcity/MapList/SplitPolygonModal/index.vue
View File

@ -1,5 +1,11 @@
<template> <template>
<div class="detail-container"> <div class="detail-container">
<!-- 加载框 -->
<div class="load-mask" v-if="isLandTypeSpliting">
<a-spin class="loader-block" size="large" tip="正在分割中......" />
</div>
<div class="left-container"> <div class="left-container">
<a-divider orientation="left">图斑信息</a-divider> <a-divider orientation="left">图斑信息</a-divider>
<div class="map-container"> <div class="map-container">
@ -9,6 +15,7 @@
:geomsList="geomsList" :geomsList="geomsList"
:mapConfig="mapConfig" :mapConfig="mapConfig"
@handlerSplitPolygon="handlerSplitPolygon" @handlerSplitPolygon="handlerSplitPolygon"
@handlerStartSpliting="handlerStartSpliting"
@mapOnLoad="onMapboxLoad" @mapOnLoad="onMapboxLoad"
:splitPlugin="true" :splitPlugin="true"
@onFeatureClick="onFeatureClick" @onFeatureClick="onFeatureClick"
@ -537,14 +544,15 @@
import axios from 'axios'; import axios from 'axios';
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'; import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getConfig } from '@/api/sys/layerManagement'; import { getConfig } from '@/api/sys/layerManagement';
import { getGeom } from '@/api/sys/layerManagement'; import { getGeom,calTubanArea } from '@/api/sys/layerManagement';
import { CalTubanAreaModel } from '@/api/sys/model/layerModel';
import { splitCase } from '@/api/redlinesupervision/index'; import { splitCase } from '@/api/redlinesupervision/index';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { getAppEnvConfig } from '@/utils/env'; import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig(); const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
import { GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform'; import { GeojsonToWkt,removeZM } from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { import {
mapTypeOptions, mapTypeOptions,
illegalTypeOptions, illegalTypeOptions,
@ -812,79 +820,106 @@
return document.getElementById('info-container'); return document.getElementById('info-container');
}; };
const isLandTypeSpliting = ref<Boolean>(false);
// 开始分割
const handlerStartSpliting = (e)=> {
isLandTypeSpliting.value = e;
}
const splitPolygonForm = ref([]); const splitPolygonForm = ref([]);
const splitAfterPolygon = ref([]); const splitAfterPolygon = ref([]);
const handlerSplitPolygon = (e) => { const handlerSplitPolygon = (e) => {
// splitPolygonForm.value = [];
// 删除被分割的图斑 // 删除被分割的图斑
if (currentPolygon.value) { if(currentPolygon.value){
splitPolygonForm.value?.splice(currentPolygon.value, 1); splitPolygonForm.value?.splice(currentPolygon.value,1);
splitAfterPolygon.value?.splice(currentPolygon.value, 1); splitAfterPolygon.value?.splice(currentPolygon.value,1);
} }
isLandTypeSpliting.value = false;
// 面积计算
let sumArea = 0.0; let sumArea = 0.0;
e?.forEach((item, index) => { e?.forEach((item, index) => {
// 去除GeoJSON Z坐标
let afterItem = removeZM(item['geometry'])
var polygon = null; let calAreaParams:CalTubanAreaModel = {
if(item.geometry.type == 'Polygon'){ "wktgeom": GeojsonToWkt(item['geometry']),
polygon = turf.polygon(item.geometry.coordinates)
}else if(item.geometry.type == 'MultiPolygon'){
polygon = turf.multiPolygon(item.geometry.coordinates)
} }
let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
calTubanArea(calAreaParams).then(resultItem=>{
if(resultItem){
let form = {
fid: null,
unitname: '',
createdate: createtime,
caseno: case_no + ' 分割图斑',
countyname: countyname,
streetname: streetname,
isbuildname: '',
nongyongdi_area: resultItem.nongyongdi > 0 ? resultItem.nongyongdi : 0.00,
gengdi_area: resultItem.gengdi > 0 ? resultItem.gengdi : 0.00,
yongjiujibennongtian_area: resultItem.jibennongtian > 0 ? resultItem.jibennongtian : 0.00,
shengtaibaohuhongxian_area: resultItem.shengtaihongxian > 0 ? resultItem.shengtaihongxian : 0.00,
guotukongjianguihua_area: null,
area: resultItem.totalmianji > 0 ? resultItem.totalmianji : 0.00,
geom: item,
checked:false,
};
if(index == e.length-1){ splitPolygonForm.value?.push(form);
are = (parseFloat(area) - sumArea).toFixed(2); splitAfterPolygon.value?.push(form.geom)
}
sumArea = sumArea + are;
let form = {
fid: null, // 分割完成后重新渲染面数据
unitname: '', let splitAfterFeatures = {
createdate: createtime, type: 'FeatureCollection',
caseno: case_no + ' 分割图斑', features: [],
countyname: countyname, };
streetname: streetname, splitPolygonForm.value?.forEach((item,idnex)=>{
isbuildname: '', splitAfterFeatures.features.push(item.geom);
nongyongdi_area: null, })
gengdi_area: null,
yongjiujibennongtian_area: null, const areKeyDownChange = MapboxComponent.value.handlerDetails(splitAfterFeatures);
shengtaibaohuhongxian_area: null,
guotukongjianguihua_area: null, }
area: are > 0 ? are : 0.00, })
geom: item,
checked: false, // var polygon = null;
}; // if(item.geometry.type == 'Polygon'){
splitPolygonForm.value?.push(form); // polygon = turf.polygon(item.geometry.coordinates)
splitAfterPolygon.value?.push(form.geom); // }else if(item.geometry.type == 'MultiPolygon'){
// polygon = turf.multiPolygon(item.geometry.coordinates)
// }
// let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
// if(index == e.length-1){
// are = (parseFloat(area) - sumArea).toFixed(2);
// }
// sumArea = sumArea + are;
}); });
// 分割完成后重新渲染面数据
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitPolygonForm.value?.forEach((item, idnex) => {
splitAfterFeatures.features.push(item.geom);
});
// splitAfterFeatures.features = e;
MapboxComponent.value.handlerDetails(splitAfterFeatures);
// 清空选中图斑 // 清空选中图斑
let geoms = { let geoms = {
type: 'FeatureCollection', type: 'FeatureCollection',
features: [], features: [],
}; };
MapboxComponent.value.handlerDetails(geoms, 'splitPolygonSource', 'splitPolygonLayer', { MapboxComponent.value.handlerDetails(geoms, 'splitPolygonSource', 'splitPolygonLayer', {
lineStyle: { 'line-color': '#408eff', 'line-width': 3 }, lineStyle: { 'line-color': '#408eff', 'line-width': 3 },
fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 }, fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 },
}); });
currentPolygon.value = null; currentPolygon.value = null;
}; };
const handlerEditPolygonInfo = (e) => { const handlerEditPolygonInfo = (e) => {
@ -1192,6 +1227,21 @@
width: calc(100vw - 15px); width: calc(100vw - 15px);
height: calc(100vh - 120px); height: calc(100vh - 120px);
display: flex; display: flex;
.load-mask{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background:rgba(0,0,0,0.5);
z-index:9999;
.loader-block{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
}
.left-container { .left-container {
flex: 1; flex: 1;
height: 100%; height: 100%;

2
src/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue
View File

@ -178,7 +178,7 @@
style="width: 100px; height: 100px" style="width: 100px; height: 100px"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`" :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
:preview="{ getContainer }" :preview="{ getContainer }"
></a-image> ></a-image>
<div v-else> <div v-else>
<Icon <Icon
v-if="item" v-if="item"

148
src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue
View File

@ -1,5 +1,10 @@
<template> <template>
<div class="detail-container"> <div class="detail-container">
<!-- 加载框 -->
<div class="load-mask" v-if="isLandTypeSpliting">
<a-spin class="loader-block" size="large" tip="正在分割中......" />
</div>
<div class="left-container"> <div class="left-container">
<a-divider orientation="left">图斑信息</a-divider> <a-divider orientation="left">图斑信息</a-divider>
<div class="map-container"> <div class="map-container">
@ -7,6 +12,7 @@
:geomsList="geomsList" :geomsList="geomsList"
:mapConfig="mapConfig" :mapConfig="mapConfig"
@handlerSplitPolygon="handlerSplitPolygon" @handlerSplitPolygon="handlerSplitPolygon"
@handlerStartSpliting="handlerStartSpliting"
@mapOnLoad="onMapboxLoad" @mapOnLoad="onMapboxLoad"
:caseid="id" :caseid="id"
:caseno="case_no" :caseno="case_no"
@ -616,14 +622,14 @@
import axios from 'axios'; import axios from 'axios';
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'; import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getConfig } from '@/api/sys/layerManagement'; import { getConfig } from '@/api/sys/layerManagement';
import { getGeom } from '@/api/sys/layerManagement'; import { getGeom,calTubanArea } from '@/api/sys/layerManagement';
import { splitCase } from '@/api/tiankongdi'; import { splitCase } from '@/api/tiankongdi';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { getAppEnvConfig } from '@/utils/env'; import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig(); const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
import { GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform'; import { GeojsonToWkt, removeZM} from '@/components/MapboxMaps/src/WktGeojsonTransform';
import { import {
mapTypeOptions, mapTypeOptions,
@ -859,6 +865,7 @@ import { itemProps } from '@/components/Menu/src/props';
geomsList.value = geoms; geomsList.value = geoms;
}); });
} }
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false); // MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
MapboxComponent.value.handlerDraw('Details', geoms, false); MapboxComponent.value.handlerDraw('Details', geoms, false);
} else { } else {
@ -876,6 +883,7 @@ import { itemProps } from '@/components/Menu/src/props';
///////// File Preview && Download //////// ///////// File Preview && Download ////////
import FilePreview from '@/components/Upload/src/components/FilePreview.vue'; import FilePreview from '@/components/Upload/src/components/FilePreview.vue';
import { CalTubanAreaModel } from '@/api/sys/model/layerModel';
const previewFileModalVisible = ref(false); const previewFileModalVisible = ref(false);
const previewFileUrl = ref(""); const previewFileUrl = ref("");
@ -898,75 +906,95 @@ import { itemProps } from '@/components/Menu/src/props';
const getContainer = () => { const getContainer = () => {
return document.getElementById('info-container'); return document.getElementById('info-container');
}; };
const isLandTypeSpliting = ref<Boolean>(false);
// 开始分割
const handlerStartSpliting = (e)=> {
isLandTypeSpliting.value = e;
}
const splitPolygonForm = ref([]); const splitPolygonForm = ref([]);
const splitAfterPolygon = ref([]); const splitAfterPolygon = ref([]);
const handlerSplitPolygon = (e) => { const handlerSplitPolygon = (e) => {
// 删除被分割的图斑 // 删除被分割的图斑
if(currentPolygon.value){ if(currentPolygon.value){
splitPolygonForm.value?.splice(currentPolygon.value,1); splitPolygonForm.value?.splice(currentPolygon.value,1);
splitAfterPolygon.value?.splice(currentPolygon.value,1); splitAfterPolygon.value?.splice(currentPolygon.value,1);
} }
isLandTypeSpliting.value = false;
// 面积计算
let sumArea = 0.0; let sumArea = 0.0;
e?.forEach((item, index) => { e?.forEach((item, index) => {
var polygon = null; // 去除GeoJSON Z坐标
if(item.geometry.type == 'Polygon'){ let afterItem = removeZM(item['geometry'])
polygon = turf.polygon(item.geometry.coordinates)
}else if(item.geometry.type == 'MultiPolygon'){ let calAreaParams:CalTubanAreaModel = {
polygon = turf.multiPolygon(item.geometry.coordinates) "wktgeom": GeojsonToWkt(item['geometry']),
} }
let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
calTubanArea(calAreaParams).then(resultItem=>{
if(resultItem){
let form = {
fid: null,
unitname: '',
createdate: createtime,
caseno: case_no + ' 分割图斑',
countyname: countyname,
streetname: streetname,
isbuildname: '',
nongyongdi_area: resultItem.nongyongdi > 0 ? resultItem.nongyongdi : 0.00,
gengdi_area: resultItem.gengdi > 0 ? resultItem.gengdi : 0.00,
yongjiujibennongtian_area: resultItem.jibennongtian > 0 ? resultItem.jibennongtian : 0.00,
shengtaibaohuhongxian_area: resultItem.shengtaihongxian > 0 ? resultItem.shengtaihongxian : 0.00,
guotukongjianguihua_area: null,
area: resultItem.totalmianji > 0 ? resultItem.totalmianji : 0.00,
geom: item,
checked:false,
};
if(index == e.length-1){ splitPolygonForm.value?.push(form);
are = (parseFloat(area) - sumArea).toFixed(2); splitAfterPolygon.value?.push(form.geom)
}
sumArea = sumArea + are;
let form = {
fid: null,
unitname: '',
createdate: createtime,
caseno: case_no + ' 分割图斑',
countyname: countyname,
streetname: streetname,
isbuildname: '',
nongyongdi_area: null,
gengdi_area: null,
yongjiujibennongtian_area: null,
shengtaibaohuhongxian_area: null,
guotukongjianguihua_area: null,
area: are > 0 ? are : 0.00,
geom: item,
checked:false,
};
splitPolygonForm.value?.push(form); // 分割完成后重新渲染面数据
splitAfterPolygon.value?.push(form.geom) let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitPolygonForm.value?.forEach((item,idnex)=>{
splitAfterFeatures.features.push(item.geom);
})
const areKeyDownChange = MapboxComponent.value.handlerDetails(splitAfterFeatures);
}
})
// var polygon = null;
// if(item.geometry.type == 'Polygon'){
// polygon = turf.polygon(item.geometry.coordinates)
// }else if(item.geometry.type == 'MultiPolygon'){
// polygon = turf.multiPolygon(item.geometry.coordinates)
// }
// let are = (turf.area(polygon) / 666.666666666667).toFixed(2);
// if(index == e.length-1){
// are = (parseFloat(area) - sumArea).toFixed(2);
// }
// sumArea = sumArea + are;
}); });
// 分割完成后重新渲染面数据
let splitAfterFeatures = {
type: 'FeatureCollection',
features: [],
};
splitPolygonForm.value?.forEach((item,idnex)=>{
console.log("item.geom",item.geom);
splitAfterFeatures.features.push(item.geom);
})
// splitAfterFeatures.features = e;
const areKeyDownChange =
MapboxComponent.value.handlerDetails(splitAfterFeatures);
// 清空选中图斑 // 清空选中图斑
let geoms = { let geoms = {
type: 'FeatureCollection', type: 'FeatureCollection',
@ -1238,6 +1266,9 @@ const areKeyDownChange =
}; };
params.parts.push(polygon); params.parts.push(polygon);
}); });
try{ try{
splitCase(params).then((res) => { splitCase(params).then((res) => {
if (res) { if (res) {
@ -1318,6 +1349,21 @@ const areKeyDownChange =
width: calc(100vw - 15px); width: calc(100vw - 15px);
height: calc(100vh - 120px); height: calc(100vh - 120px);
display: flex; display: flex;
.load-mask{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
background:rgba(0,0,0,0.5);
z-index:9999;
.loader-block{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
}
.left-container { .left-container {
flex: 1; flex: 1;
height: 100%; height: 100%;