diff --git a/src/components/Upload/src/components/ImageUpload.vue b/src/components/Upload/src/components/ImageUpload.vue index 11b62eca..506f0013 100644 --- a/src/components/Upload/src/components/ImageUpload.vue +++ b/src/components/Upload/src/components/ImageUpload.vue @@ -7,6 +7,7 @@ src:currentImageSrcUrl, onVisibleChange:handlerImageChange }" + @keydown.native.stop >
@@ -16,6 +17,7 @@ style="width:100px;height:100px;" :src="item.url" @click="handlerPreviewImage(item,index)" + @keydown.native.stop >
@@ -404,7 +406,7 @@ margin-bottom: 10px; } #process-form-container{ - width:50%;height:500px;background:red; + width:50%;height:500px; overflow: hidden; float: left; position: relative; diff --git a/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue b/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue index 1aa8d500..24c73ba6 100644 --- a/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue +++ b/src/views/demo/degraining/curbspotcity/MapList/SplitPolygonModal/index.vue @@ -8,6 +8,7 @@ :mapConfig="mapConfig" @handlerSplitPolygon="handlerSplitPolygon" @mapOnLoad="onMapboxLoad" + :caseno="id" :splitPlugin="true" @onFeatureClick="onFeatureClick" ref="MapboxComponent" @@ -15,8 +16,8 @@ />
-
- +
+ {{ streetname }} {{ communityname }} {{ dataProcessing(area) }} - + {{ dataProcessing(nongyongdi_area) }} {{ dataProcessing(gengdi_area) }} {{ dataProcessing(yongjiujibennongtian_area) }} - + {{ dataProcessing(shengtaibaohuhongxian_area) }} {{ case_description }} @@ -49,9 +50,9 @@
@@ -98,7 +96,7 @@ icon="ion:document-attach-outline" @click="downLoadFile(item)" /> - {{ item }} + {{ handlerDealFileName(item) }}
@@ -110,7 +108,7 @@ icon="ion:document-attach-outline" @click="downLoadFile(item)" /> - {{ item }} + {{ handlerDealFileName(item) }}
@@ -123,7 +121,7 @@ icon="ion:document-attach-outline" @click="downLoadFile(item)" /> - {{ item }} + {{ handlerDealFileName(item) }}
@@ -176,7 +174,7 @@ icon="ion:document-attach-outline" @click="downLoadFile(item)" /> - {{ item }} + {{ handlerDealFileName(item) }} @@ -212,7 +210,7 @@ icon="ion:document-attach-outline" @click="downLoadFile(item)" /> - {{ item }} + {{ handlerDealFileName(item) }} @@ -274,6 +272,9 @@ :style="{ 'border-color': currentPolygon == index ? '#408eff' : '#fff' }" >
+
+ +
- 取消分割 + + +   - 保存分割 + 还原分割 +   + 保存分割
@@ -396,6 +402,7 @@ v-model:value="splitPolygonAreaForm.area" @blur="checkArea('area')" :status="areaAbnormal['area'] ? 'error' : ''" + @keydown="areKeyDownChange" addon-after="亩" /> @@ -481,7 +488,7 @@ import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'; import { getConfig } from '@/api/sys/layerManagement'; import { getGeom } from '@/api/sys/layerManagement'; - import { CaseSplit } from '@/api/degraining/index'; + import { CaseSplit } from '@/api/degraining/index'; import { useMessage } from '@/hooks/web/useMessage'; const { createMessage } = useMessage(); import Icon from '@/components/Icon/Icon.vue'; @@ -501,6 +508,7 @@ import { getLoadDroneCaseInfoDetail } from '@/api/tiankongdi/index.ts'; import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue'; import { dataProcessing ,dataProcessingCount} from '@/views/demo/tiankongdi/util.ts'; +import { itemProps } from '@/components/Menu/src/props'; const MapboxComponent = ref(); const mapConfig = ref({}); @@ -513,9 +521,18 @@ const activeKey = ref('1'); const geomsList = ref() + const isSpliting = ref(false);; + const mapshow = ref(false); + + const handlerKeydown = (e)=>{ + console.log(e); + } + onMounted(()=>{ mapshow.value = true + + }) const { id, @@ -652,6 +669,16 @@ function onMapboxLoad() { changeTask(); } + + // 附件名称显示处理函数 + function handlerDealFileName(path){ + const regex = /([^/\\]+)(?=\.[^/\\]*$|$)/; + const matchStr = path.match(regex); + if(matchStr?.length){ + return matchStr[0]; + } + } + const getLabel = (type, value) => { let result: any[] = []; let label = ''; @@ -721,8 +748,15 @@ }; const splitPolygonForm = ref([]); + const splitAfterPolygon = ref([]); const handlerSplitPolygon = (e) => { - splitPolygonForm.value = []; + // splitPolygonForm.value = []; + + // 删除被分割的图斑 + if(currentPolygon.value){ + splitPolygonForm.value?.splice(currentPolygon.value,1); + splitAfterPolygon.value?.splice(currentPolygon.value,1); + } e?.forEach((item, index) => { let form = { fid: null, @@ -739,10 +773,42 @@ guotukongjianguihua_area: null, area: null, geom: item, + checked:false, }; splitPolygonForm.value?.push(form); + splitAfterPolygon.value?.push(form.geom) }); - console.log('splitPolygonForm', splitPolygonForm.value); + + // 分割完成后重新渲染面数据 + + 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 = { + 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; + }; const handlerEditPolygonInfo = (e) => { @@ -775,7 +841,7 @@ }; // 切换图斑 - const currentPolygon = ref(); + const currentPolygon = ref(null); const changeCurrentPolygon = (index, item) => { let geoms = { type: 'FeatureCollection', @@ -792,7 +858,6 @@ // 图斑点击事件 const onFeatureClick = (feature) => { splitPolygonForm.value?.forEach((item, index) => { - console.log('item---', item); if (item['geom']['properties']['id'] == feature.properties.id) { changeCurrentPolygon(index, item); } @@ -816,25 +881,166 @@ fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 }, }); splitPolygonForm.value = []; + currentPolygon.value = null; }; + + // 删除图斑 + const deleteSplitResult = ()=>{ + + + + // 剔除选中数据 + let deleteIndexs = []; + splitPolygonForm.value?.forEach((item,index)=>{ + if(item.checked){ + deleteIndexs.push(index); + } + }) + + if(deleteIndexs.length<1){ + createMessage.error("请选择需要删除的图斑！"); + return; + } + + removeElementsByIndexes(splitAfterPolygon.value,deleteIndexs); + removeElementsByIndexes(splitPolygonForm.value,deleteIndexs); + + + + // 渲染图斑数据 + let geoms = { + type: 'FeatureCollection', + features:splitAfterPolygon.value?splitAfterPolygon.value : [], + }; + console.log("geoms123",geoms); + MapboxComponent.value.handlerDetails(geoms, 'detailsSource', 'detailsLayer', { + lineStyle: { 'line-color': '#fcf003', 'line-width': 3 }, + fillStyle: { 'fill-color': '#fcf003', 'fill-opacity': 0.1 }, + }); + + let checkedGeoms = { + type: 'FeatureCollection', + features: [], + }; + console.log("geoms12345",checkedGeoms); + + MapboxComponent.value.handlerDetails(checkedGeoms, 'splitPolygonSource', 'splitPolygonLayer', { + lineStyle: { 'line-color': '#408eff', 'line-width': 3 }, + fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 }, + }); + + } + + + + // 删除操作 + function removeElementsByIndexes(arr, indexes) { + // 确保下标数组是从大到小排序的，以避免在删除过程中索引发生变化 + indexes.sort((a, b) => b - a); + + // 遍历下标数组，从数组中删除对应的元素 + for (const index of indexes) { + arr.splice(index, 1); + } + } + + + // 合并图斑 + const mergeSplitResult = ()=>{ + + let mergeArr = [] + let deleteIndexs = []; + + splitPolygonForm.value?.forEach((item,index)=>{ + if(item.checked){ + let turfPolygon = turf.polygon(splitAfterPolygon.value[index].geometry.coordinates); + mergeArr.push(turfPolygon); + deleteIndexs.push(index); + } + }) + + if(deleteIndexs.length!=2){ + createMessage.error("请选择两个图斑进行合并！"); + return; + } + + removeElementsByIndexes(splitAfterPolygon.value,deleteIndexs); + removeElementsByIndexes(splitPolygonForm.value,deleteIndexs); + + + // 合并后图斑 + + let union = turf.union(mergeArr[0],mergeArr[1]); + + let polygon = { + 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: null, + geom: union, + checked:false, + } + + splitAfterPolygon.value?.push(union); + splitPolygonForm.value?.push(polygon); + + // 渲染图斑数据 + let geoms = { + type: 'FeatureCollection', + features:splitAfterPolygon.value?splitAfterPolygon.value : [], + }; + MapboxComponent.value.handlerDetails(geoms, 'detailsSource', 'detailsLayer', { + lineStyle: { 'line-color': '#fcf003', 'line-width': 3 }, + fillStyle: { 'fill-color': '#fcf003', 'fill-opacity': 0.1 }, + }); + + let checkedGeoms = { + type: 'FeatureCollection', + features: [], + }; + MapboxComponent.value.handlerDetails(checkedGeoms, 'splitPolygonSource', 'splitPolygonLayer', { + lineStyle: { 'line-color': '#408eff', 'line-width': 3 }, + fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 }, + }); + + + } + // 保存分割 const saveSplitResult = () => { + isSpliting.value = true; + if (splitPolygonForm.value?.length == 0) { - createMessage.error('请先使用风格工具分割图斑！'); + createMessage.error('请先使用分割工具分割图斑！'); + isSpliting.value = false; return null; } let checkResult = handlerBeforeSubmitCheckArea(); + + if (!checkResult) { + + isSpliting.value = false; return null; } + let params = { parts: [], caseid: id, processid: props.showInfoData.processid, }; - console.log('params', params); + splitPolygonForm.value?.forEach((item, index) => { let polygon = { @@ -850,12 +1056,17 @@ params.parts.push(polygon); }); - CaseSplit(params).then((res) => { - if (res) { - createMessage.success('操作成功！'); - emits('closeModal'); - } - }); + try{ + CaseSplit (params).then((res) => { + if (res) { + createMessage.success('操作成功！'); + emits('closeModal'); + isSpliting.value = false; + } + }); + }catch(e){ + isSpliting.value = false; + } }; // 检查面积 @@ -986,7 +1197,14 @@ padding-bottom: 8px; border-bottom: 1px solid #e5e5e5; height: 45px; + gap:20px; + .data-list-checked{ + width:28px; + height:28px; + margin-top:8px; + } .data-list-title-div { + flex:auto; display: flex; align-items: center; .map-mark { diff --git a/src/views/demo/illegalmining/curbspotcity/MapList/SplitPolygonModal/index.vue b/src/views/demo/illegalmining/curbspotcity/MapList/SplitPolygonModal/index.vue index 158d7541..9a437523 100644 --- a/src/views/demo/illegalmining/curbspotcity/MapList/SplitPolygonModal/index.vue +++ b/src/views/demo/illegalmining/curbspotcity/MapList/SplitPolygonModal/index.vue @@ -16,11 +16,12 @@
- + {{ countyname }} {{ streetname }} {{ communityname }} - {{ - dataProcessing(area) - }} - {{ - dataProcessing(nongyongdi_area) - }} - {{ - dataProcessing(gengdi_area) - }} - {{ - dataProcessing(yongjiujibennongtian_area) - }} + {{ dataProcessing(area) }} + {{ dataProcessing(nongyongdi_area) }} + {{ dataProcessing(gengdi_area) }} + {{ dataProcessing(yongjiujibennongtian_area) }} - {{ - dataProcessing(shengtaibaohuhongxian_area) - }} + {{ dataProcessing(shengtaibaohuhongxian_area) }} {{ case_description }} {{ remark }} {{ lng }} {{ lat }} - {{ synchronoustime }} + {{ createtime }}
- - - +
{{ jieshou_people }} - {{ jieshou_time?.split('.')[0] }} + {{ jieshou_time?.split('.')[0] }} - + {{ getLabel('is_illegal', is_illegal) }} - {{ - xiangmumc - }} - {{ - xiangmuzhuti - }} - {{ - actual_use_to - }} + {{ xiangmumc }} + {{ xiangmuzhuti }} + {{ actual_use_to }} {{ getLabel('weifaleixing', weifaleixing) }} - - - + - - - + - {{ - getLabel('qita_use_to', qita_use_to) - }} + {{ getLabel('qita_use_to',qita_use_to) }} - - - + {{ pandingyijushuoming }}
- - - +
{{ examiner_name }} {{ examine_time }} - + - - - +
- - - +
- - - + +
- - - +
{{ transactor_name }} {{ transact_time }} - + {{ verifytime }} - - - {{ hexiaoren }} - {{ hexiaotime?.split('.')[0] }} - -
- - - -
- - - -
@@ -1021,6 +872,7 @@ return true; }; + const imageList = ref([]) function handlerPreviewImage(index,url){ diff --git a/src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue b/src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue index 3fc5bf18..fa82da1d 100644 --- a/src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue +++ b/src/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue @@ -16,8 +16,8 @@ /> -
- +
+
@@ -405,6 +402,7 @@ v-model:value="splitPolygonAreaForm.area" @blur="checkArea('area')" :status="areaAbnormal['area'] ? 'error' : ''" + @keydown="areKeyDownChange" addon-after="亩" /> @@ -526,8 +524,15 @@ import { itemProps } from '@/components/Menu/src/props'; const isSpliting = ref(false);; const mapshow = ref(false); + + const handlerKeydown = (e)=>{ + console.log(e); + } + onMounted(()=>{ mapshow.value = true + + }) const { id, @@ -787,7 +792,8 @@ import { itemProps } from '@/components/Menu/src/props'; // splitAfterFeatures.features = e; - + +const areKeyDownChange = MapboxComponent.value.handlerDetails(splitAfterFeatures);