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

dianlixunjian
Zhufu 2024-09-14 17:31:05 +08:00
parent 59da06677f ff3f4dcfe4
commit fb26619a6a
4 changed files with 384 additions and 306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Upload/src/components/ImageUpload.vue
View File

@ -7,6 +7,7 @@
src:currentImageSrcUrl, src:currentImageSrcUrl,
onVisibleChange:handlerImageChange onVisibleChange:handlerImageChange
}" }"
@keydown.native.stop
> >
<div v-for="(item, index) in fileList" :key="index" style="display: inline-block;position:relative;"> <div v-for="(item, index) in fileList" :key="index" style="display: inline-block;position:relative;">
<div v-if="!$attrs.disabled" class="video-delete-btn" @click="handlerDelete(index)"> <div v-if="!$attrs.disabled" class="video-delete-btn" @click="handlerDelete(index)">
@ -16,6 +17,7 @@
style="width:100px;height:100px;" style="width:100px;height:100px;"
:src="item.url" :src="item.url"
@click="handlerPreviewImage(item,index)" @click="handlerPreviewImage(item,index)"
@keydown.native.stop
></a-image> ></a-image>
</div> </div>
</a-image-preview-group> </a-image-preview-group>
@ -404,7 +406,7 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
#process-form-container{ #process-form-container{
width:50%;height:500px;background:red; width:50%;height:500px;
overflow: hidden; overflow: hidden;
float: left; float: left;
position: relative; position: relative;

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

@ -8,6 +8,7 @@
:mapConfig="mapConfig" :mapConfig="mapConfig"
@handlerSplitPolygon="handlerSplitPolygon" @handlerSplitPolygon="handlerSplitPolygon"
@mapOnLoad="onMapboxLoad" @mapOnLoad="onMapboxLoad"
:caseno="id"
:splitPlugin="true" :splitPlugin="true"
@onFeatureClick="onFeatureClick" @onFeatureClick="onFeatureClick"
ref="MapboxComponent" ref="MapboxComponent"
@ -15,8 +16,8 @@
/> />
</div> </div>
<div class="info-container" id="info-container"> <div class="info-container" id="info-container" >
<a-tabs v-model:activeKey="activeKey" style="height: 100%"> <a-tabs v-model:activeKey="activeKey" style="height: 100%" >
<a-tab-pane key="1" tab="线索下发"> <a-tab-pane key="1" tab="线索下发">
<a-descriptions <a-descriptions
:column="2" :column="2"
@ -34,11 +35,11 @@
<a-descriptions-item label="乡镇">{{ streetname }}</a-descriptions-item> <a-descriptions-item label="乡镇">{{ streetname }}</a-descriptions-item>
<a-descriptions-item label="社区/村">{{ communityname }}</a-descriptions-item> <a-descriptions-item label="社区/村">{{ communityname }}</a-descriptions-item>
<a-descriptions-item label="图斑面积(亩)">{{ dataProcessing(area) }}</a-descriptions-item> <a-descriptions-item label="图斑面积(亩)">{{ dataProcessing(area) }}</a-descriptions-item>
<!-- <a-descriptions-item label="农用地面积(亩)">{{ dataProcessing(nongyongdi_area) }}</a-descriptions-item> --> <a-descriptions-item label="农用地面积(亩)">{{ dataProcessing(nongyongdi_area) }}</a-descriptions-item>
<a-descriptions-item label="耕地面积(亩)">{{ dataProcessing(gengdi_area) }}</a-descriptions-item> <a-descriptions-item label="耕地面积(亩)">{{ dataProcessing(gengdi_area) }}</a-descriptions-item>
<a-descriptions-item label="永农面积(亩)">{{ dataProcessing(yongjiujibennongtian_area) }}</a-descriptions-item> <a-descriptions-item label="永农面积(亩)">{{ dataProcessing(yongjiujibennongtian_area) }}</a-descriptions-item>
<!-- <a-descriptions-item label="占重点区域面积(亩)">{{ dataProcessing(zhongdianquyu_area) }}</a-descriptions-item> --> <!-- <a-descriptions-item label="占重点区域面积(亩)">{{ dataProcessing(zhongdianquyu_area) }}</a-descriptions-item> -->
<!-- <a-descriptions-item label="占生态红线面积(亩)">{{ dataProcessing(shengtaibaohuhongxian_area) }}</a-descriptions-item> --> <a-descriptions-item label="占生态红线面积(亩)">{{ dataProcessing(shengtaibaohuhongxian_area) }}</a-descriptions-item>
<!-- <a-descriptions-item label="占空间规划面积(亩)">{{ dataProcessing(guotukongjianguihua_area) }}</a-descriptions-item> --> <!-- <a-descriptions-item label="占空间规划面积(亩)">{{ dataProcessing(guotukongjianguihua_area) }}</a-descriptions-item> -->
<a-descriptions-item label="图斑描述">{{ case_description }}</a-descriptions-item> <a-descriptions-item label="图斑描述">{{ case_description }}</a-descriptions-item>
<!-- <a-descriptions-item label="图斑地址">{{ address }}</a-descriptions-item> --> <!-- <a-descriptions-item label="图斑地址">{{ address }}</a-descriptions-item> -->
@ -49,9 +50,9 @@
<a-descriptions-item label="图斑照片"> <a-descriptions-item label="图斑照片">
<div class="image-div"> <div class="image-div">
<a-image-preview-group <a-image-preview-group
:preview="{ :preview="{
getContainer:getContainer, getContainer:getContainer,
}" }"
> >
<template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex"> <template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
<a-image <a-image
@ -59,9 +60,6 @@
width="100px" width="100px"
height="100px" height="100px"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`" :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
:preview="{
getContainer,
}"
></a-image> ></a-image>
</template> </template>
</a-image-preview-group> </a-image-preview-group>
@ -98,7 +96,7 @@
icon="ion:document-attach-outline" icon="ion:document-attach-outline"
@click="downLoadFile(item)" @click="downLoadFile(item)"
/> />
{{ item }} {{ handlerDealFileName(item) }}
</div> </div>
</template> </template>
</a-descriptions-item> </a-descriptions-item>
@ -110,7 +108,7 @@
icon="ion:document-attach-outline" icon="ion:document-attach-outline"
@click="downLoadFile(item)" @click="downLoadFile(item)"
/> />
{{ item }} {{ handlerDealFileName(item) }}
</div> </div>
</template> </template>
</a-descriptions-item> </a-descriptions-item>
@ -123,7 +121,7 @@
icon="ion:document-attach-outline" icon="ion:document-attach-outline"
@click="downLoadFile(item)" @click="downLoadFile(item)"
/> />
{{ item }} {{ handlerDealFileName(item) }}
</div> </div>
</template> </template>
</a-descriptions-item> </a-descriptions-item>
@ -176,7 +174,7 @@
icon="ion:document-attach-outline" icon="ion:document-attach-outline"
@click="downLoadFile(item)" @click="downLoadFile(item)"
/> />
{{ item }} {{ handlerDealFileName(item) }}
</div> </div>
</template> </template>
</a-descriptions-item> </a-descriptions-item>
@ -212,7 +210,7 @@
icon="ion:document-attach-outline" icon="ion:document-attach-outline"
@click="downLoadFile(item)" @click="downLoadFile(item)"
/> />
{{ item }} {{ handlerDealFileName(item) }}
</div> </div>
</template> </template>
<!-- {{ zhenggaifujian }} --> <!-- {{ zhenggaifujian }} -->
@ -274,6 +272,9 @@
:style="{ 'border-color': currentPolygon == index ? '#408eff' : '#fff' }" :style="{ 'border-color': currentPolygon == index ? '#408eff' : '#fff' }"
> >
<div class="data-list-layout-div"> <div class="data-list-layout-div">
<div class="data-list-checked">
<a-checkbox v-model:checked="item.checked"></a-checkbox>
</div>
<div class="data-list-title-div"> <div class="data-list-title-div">
<img <img
src="/positioning.png" src="/positioning.png"
@ -369,9 +370,14 @@
/> />
</div> </div>
<div class="split-operation"> <div class="split-operation">
<a-button type="primary" @click="reductionSplit">取消分割</a-button>
<!-- <a-button type="primary" :disabled="isSpliting" @click="mergeSplitResult">合并图斑</a-button> -->
<!-- &nbsp;
<a-button type="error" :disabled="isSpliting" @click="deleteSplitResult">删除图斑</a-button> -->
&nbsp; &nbsp;
<a-button type="primary" @click="saveSplitResult">保存分割</a-button> <a-button type="primary" :disabled="isSpliting" @click="reductionSplit">还原分割</a-button>
&nbsp;
<a-button type="primary" :disabled="isSpliting" @click="saveSplitResult">保存分割</a-button>
</div> </div>
</div> </div>
</div> </div>
@ -396,6 +402,7 @@
v-model:value="splitPolygonAreaForm.area" v-model:value="splitPolygonAreaForm.area"
@blur="checkArea('area')" @blur="checkArea('area')"
:status="areaAbnormal['area'] ? 'error' : ''" :status="areaAbnormal['area'] ? 'error' : ''"
@keydown="areKeyDownChange"
addon-after="亩" addon-after="亩"
/> />
</a-form-item> </a-form-item>
@ -481,7 +488,7 @@
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 } 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';
@ -501,6 +508,7 @@
import { getLoadDroneCaseInfoDetail } from '@/api/tiankongdi/index.ts'; import { getLoadDroneCaseInfoDetail } from '@/api/tiankongdi/index.ts';
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue'; import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
import { dataProcessing ,dataProcessingCount} from '@/views/demo/tiankongdi/util.ts'; import { dataProcessing ,dataProcessingCount} from '@/views/demo/tiankongdi/util.ts';
import { itemProps } from '@/components/Menu/src/props';
const MapboxComponent = ref(); const MapboxComponent = ref();
const mapConfig = ref({}); const mapConfig = ref({});
@ -513,9 +521,18 @@
const activeKey = ref('1'); const activeKey = ref('1');
const geomsList = ref() const geomsList = ref()
const isSpliting = ref<Boolean>(false);;
const mapshow = ref<Boolean>(false); const mapshow = ref<Boolean>(false);
const handlerKeydown = (e)=>{
console.log(e);
}
onMounted(()=>{ onMounted(()=>{
mapshow.value = true mapshow.value = true
}) })
const { const {
id, id,
@ -652,6 +669,16 @@
function onMapboxLoad() { function onMapboxLoad() {
changeTask(); changeTask();
} }
// 附件名称显示处理函数
function handlerDealFileName(path){
const regex = /([^/\\]+)(?=\.[^/\\]*$|$)/;
const matchStr = path.match(regex);
if(matchStr?.length){
return matchStr[0];
}
}
const getLabel = (type, value) => { const getLabel = (type, value) => {
let result: any[] = []; let result: any[] = [];
let label = ''; let label = '';
@ -721,8 +748,15 @@
}; };
const splitPolygonForm = ref([]); const splitPolygonForm = ref([]);
const splitAfterPolygon = ref([]);
const handlerSplitPolygon = (e) => { 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) => { e?.forEach((item, index) => {
let form = { let form = {
fid: null, fid: null,
@ -739,10 +773,42 @@
guotukongjianguihua_area: null, guotukongjianguihua_area: null,
area: null, area: null,
geom: item, geom: item,
checked:false,
}; };
splitPolygonForm.value?.push(form); 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) => { const handlerEditPolygonInfo = (e) => {
@ -775,7 +841,7 @@
}; };
// 切换图斑 // 切换图斑
const currentPolygon = ref<Number>(); const currentPolygon = ref(null);
const changeCurrentPolygon = (index, item) => { const changeCurrentPolygon = (index, item) => {
let geoms = { let geoms = {
type: 'FeatureCollection', type: 'FeatureCollection',
@ -792,7 +858,6 @@
// 图斑点击事件 // 图斑点击事件
const onFeatureClick = (feature) => { const onFeatureClick = (feature) => {
splitPolygonForm.value?.forEach((item, index) => { splitPolygonForm.value?.forEach((item, index) => {
console.log('item---', item);
if (item['geom']['properties']['id'] == feature.properties.id) { if (item['geom']['properties']['id'] == feature.properties.id) {
changeCurrentPolygon(index, item); changeCurrentPolygon(index, item);
} }
@ -816,25 +881,166 @@
fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 }, fillStyle: { 'fill-color': '#408eff', 'fill-opacity': 0.1 },
}); });
splitPolygonForm.value = []; 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 = () => { const saveSplitResult = () => {
isSpliting.value = true;
if (splitPolygonForm.value?.length == 0) { if (splitPolygonForm.value?.length == 0) {
createMessage.error('请先使用风格工具分割图斑！'); createMessage.error('请先使用分割工具分割图斑！');
isSpliting.value = false;
return null; return null;
} }
let checkResult = handlerBeforeSubmitCheckArea(); let checkResult = handlerBeforeSubmitCheckArea();
if (!checkResult) { if (!checkResult) {
isSpliting.value = false;
return null; return null;
} }
let params = { let params = {
parts: [], parts: [],
caseid: id, caseid: id,
processid: props.showInfoData.processid, processid: props.showInfoData.processid,
}; };
console.log('params', params);
splitPolygonForm.value?.forEach((item, index) => { splitPolygonForm.value?.forEach((item, index) => {
let polygon = { let polygon = {
@ -850,12 +1056,17 @@
params.parts.push(polygon); params.parts.push(polygon);
}); });
CaseSplit(params).then((res) => { try{
if (res) { CaseSplit (params).then((res) => {
createMessage.success('操作成功！'); if (res) {
emits('closeModal'); createMessage.success('操作成功！');
} emits('closeModal');
}); isSpliting.value = false;
}
});
}catch(e){
isSpliting.value = false;
}
}; };
// 检查面积 // 检查面积
@ -986,7 +1197,14 @@
padding-bottom: 8px; padding-bottom: 8px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
height: 45px; height: 45px;
gap:20px;
.data-list-checked{
width:28px;
height:28px;
margin-top:8px;
}
.data-list-title-div { .data-list-title-div {
flex:auto;
display: flex; display: flex;
align-items: center; align-items: center;
.map-mark { .map-mark {

384
src/views/demo/illegalmining/curbspotcity/MapList/SplitPolygonModal/index.vue
View File

@ -16,11 +16,12 @@
</div> </div>
<div class="info-container" id="info-container"> <div class="info-container" id="info-container">
<a-tabs v-model:activeKey="activeKey"> <a-tabs v-model:activeKey="activeKey" style="height: 100%">
<a-tab-pane key="1" tab="线索下发"> <a-tab-pane key="1" tab="线索下发">
<a-descriptions <a-descriptions
:column="2" :column="2"
bordered bordered
size="small"
:contentStyle="{ :contentStyle="{
'text-align': 'center', 'text-align': 'center',
'min-width': '250px', 'min-width': '250px',
@ -32,60 +33,39 @@
<a-descriptions-item label="县区">{{ countyname }}</a-descriptions-item> <a-descriptions-item label="县区">{{ countyname }}</a-descriptions-item>
<a-descriptions-item label="乡镇">{{ streetname }}</a-descriptions-item> <a-descriptions-item label="乡镇">{{ streetname }}</a-descriptions-item>
<a-descriptions-item label="社区/村">{{ communityname }}</a-descriptions-item> <a-descriptions-item label="社区/村">{{ communityname }}</a-descriptions-item>
<a-descriptions-item label="图斑面积(亩)">{{ <a-descriptions-item label="图斑面积(亩)">{{ dataProcessing(area) }}</a-descriptions-item>
dataProcessing(area) <a-descriptions-item label="农用地面积(亩)">{{ dataProcessing(nongyongdi_area) }}</a-descriptions-item>
}}</a-descriptions-item> <a-descriptions-item label="耕地面积(亩)">{{ dataProcessing(gengdi_area) }}</a-descriptions-item>
<a-descriptions-item label="农用地面积(亩)">{{ <a-descriptions-item label="永农面积(亩)">{{ dataProcessing(yongjiujibennongtian_area) }}</a-descriptions-item>
dataProcessing(nongyongdi_area)
}}</a-descriptions-item>
<a-descriptions-item label="耕地面积(亩)">{{
dataProcessing(gengdi_area)
}}</a-descriptions-item>
<a-descriptions-item label="永农面积(亩)">{{
dataProcessing(yongjiujibennongtian_area)
}}</a-descriptions-item>
<!-- <a-descriptions-item label="占重点区域面积(亩)">{{ dataProcessing(zhongdianquyu_area) }}</a-descriptions-item> --> <!-- <a-descriptions-item label="占重点区域面积(亩)">{{ dataProcessing(zhongdianquyu_area) }}</a-descriptions-item> -->
<a-descriptions-item label="占生态红线面积(亩)">{{ <a-descriptions-item label="占生态红线面积(亩)">{{ dataProcessing(shengtaibaohuhongxian_area) }}</a-descriptions-item>
dataProcessing(shengtaibaohuhongxian_area)
}}</a-descriptions-item>
<!-- <a-descriptions-item label="占空间规划面积(亩)">{{ dataProcessing(guotukongjianguihua_area) }}</a-descriptions-item> --> <!-- <a-descriptions-item label="占空间规划面积(亩)">{{ dataProcessing(guotukongjianguihua_area) }}</a-descriptions-item> -->
<a-descriptions-item label="图斑描述">{{ case_description }}</a-descriptions-item> <a-descriptions-item label="图斑描述">{{ 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="备注">{{ remark }}</a-descriptions-item> <a-descriptions-item label="备注">{{ remark }}</a-descriptions-item>
<a-descriptions-item label="经度">{{ lng }}</a-descriptions-item> <a-descriptions-item label="经度">{{ lng }}</a-descriptions-item>
<a-descriptions-item label="纬度">{{ lat }}</a-descriptions-item> <a-descriptions-item label="纬度">{{ lat }}</a-descriptions-item>
<a-descriptions-item label="下发时间">{{ synchronoustime }}</a-descriptions-item> <a-descriptions-item label="下发时间">{{ createtime }}</a-descriptions-item>
<a-descriptions-item label="图斑照片"> <a-descriptions-item label="图斑照片">
<div class="image-div"> <div class="image-div">
<a-image-preview-group <template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
:preview="{ <a-image
getContainer:getContainer, v-if="imageItem"
}" width="100px"
> height="100px"
<template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex"> :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
<a-image :preview="{
v-if="imageItem" getContainer,
width="100px" }"
height="100px" ></a-image>
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`" </template>
:preview="{
getContainer,
}"
></a-image>
</template>
</a-image-preview-group>
</div> </div>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="接收人">{{ jieshou_people }}</a-descriptions-item> <a-descriptions-item label="接收人">{{ jieshou_people }}</a-descriptions-item>
<a-descriptions-item label="接收时间">{{ jieshou_time?.split('.')[0] }}</a-descriptions-item> <a-descriptions-item label="接收时间">{{ jieshou_time?.split('.')[0] }}</a-descriptions-item>
</a-descriptions> </a-descriptions>
</a-tab-pane> </a-tab-pane>
<a-tab-pane <a-tab-pane key="2" v-if="!['建设用地','推堆土'].includes(typename)" tab="线索填报" force-render>
key="2"
v-if="!['建设用地', '推堆土'].includes(typename)"
tab="线索填报"
force-render
>
<a-descriptions <a-descriptions
:column="2" :column="2"
bordered bordered
@ -98,119 +78,72 @@
<a-descriptions-item label="判定结果">{{ <a-descriptions-item label="判定结果">{{
getLabel('is_illegal', is_illegal) getLabel('is_illegal', is_illegal)
}}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 1" label="项目名称">{{ <a-descriptions-item v-if="is_illegal == 1" label="项目名称">{{ xiangmumc }}</a-descriptions-item>
xiangmumc <a-descriptions-item v-if="is_illegal == 1" label="项目主体">{{ xiangmuzhuti }}</a-descriptions-item>
}}</a-descriptions-item> <a-descriptions-item v-if="is_illegal == 1" label="实际用途">{{ actual_use_to }}</a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 1" label="项目主体">{{
xiangmuzhuti
}}</a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 1" label="实际用途">{{
actual_use_to
}}</a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 1" label="违法类型">{{ <a-descriptions-item v-if="is_illegal == 1" label="违法类型">{{
getLabel('weifaleixing', weifaleixing) getLabel('weifaleixing', weifaleixing)
}}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 1" label="附件"> <a-descriptions-item v-if="is_illegal == 1" label="附件">
<a-image-preview-group :preview="{getContainer,}"> <template v-for="(item, itemIndex) in fujianList" :key="itemIndex">
<template v-for="(item, itemIndex) in fujianList" :key="itemIndex"> <div v-if="item" style="margin-top: 10px">
<a-image <Icon
v-if="showImage(item)" :style="`font-size: 30px; cursor: pointer;`"
style="width:100px;height:100px;" icon="ion:document-attach-outline"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`" @click="downLoadFile(item)"
:preview="{getContainer}" />
></a-image> {{ item }}
<div v-else> </div>
<Icon </template>
v-if="item"
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
</a-image-preview-group>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 0" label="附件"> <a-descriptions-item v-if="is_illegal == 0" label="附件">
<a-image-preview-group :preview="{getContainer,}"> <template v-for="(item, itemIndex) in hefafujianList" :key="itemIndex">
<template v-for="(item, itemIndex) in hefafujianList" :key="itemIndex"> <div v-if="item" style="margin-top: 10px">
<a-image <Icon
v-if="showImage(item)" :style="`font-size: 30px; cursor: pointer;`"
style="width:100px;height:100px;" icon="ion:document-attach-outline"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`" @click="downLoadFile(item)"
:preview="{getContainer,}" />
></a-image> {{ item }}
<div v-else> </div>
<Icon </template>
v-if="item"
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
</a-image-preview-group>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 2" label="实际用途">{{ <a-descriptions-item v-if="is_illegal == 2" label="实际用途">{{ getLabel('qita_use_to',qita_use_to) }}</a-descriptions-item>
getLabel('qita_use_to', qita_use_to)
}}</a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 2" label="附件"> <a-descriptions-item v-if="is_illegal == 2" label="附件">
<a-image-preview-group :preview="{getContainer,}"> <template v-for="(item, itemIndex) in qitafujianList" :key="itemIndex">
<template v-for="(item, itemIndex) in qitafujianList" :key="itemIndex"> <div v-if="item" style="margin-top: 10px">
<a-image <Icon
v-if="showImage(item)" :style="`font-size: 30px; cursor: pointer;`"
style="width:100px;height:100px;" icon="ion:document-attach-outline"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`" @click="downLoadFile(item)"
:preview="{getContainer}" />
></a-image> {{ item }}
<div v-else> </div>
<Icon </template>
v-if="item"
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
</a-image-preview-group>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="判定依据说明">{{ <a-descriptions-item label="判定依据说明">{{
pandingyijushuoming pandingyijushuoming
}}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item label="照片"> <a-descriptions-item label="照片">
<div class="image-div"> <div class="image-div">
<a-image-preview-group <template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
:preview="{ <a-image
getContainer:getContainer, v-if="imageItem"
onVisibleChange:handlerImageChange width="100px"
}" height="100px"
> :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
<template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex"> :preview="{
<a-image getContainer,
v-if="imageItem" }"
@click="handlerPreviewImage(imageIndex,imageItem)" ></a-image>
width="100px" </template>
height="100px"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
:preview="{
getContainer,
}"
></a-image>
</template>
</a-image-preview-group>
</div> </div>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="填报人">{{ examiner_name }}</a-descriptions-item> <a-descriptions-item label="填报人">{{ examiner_name }}</a-descriptions-item>
<a-descriptions-item label="填报时间">{{ examine_time }}</a-descriptions-item> <a-descriptions-item label="填报时间">{{ examine_time }}</a-descriptions-item>
</a-descriptions> </a-descriptions>
</a-tab-pane> </a-tab-pane>
<a-tab-pane <a-tab-pane key="3" tab="整改情况" v-if="weifaleixing == 0 && !['建设用地','推堆土'].includes(typename)">
key="3"
tab="整改情况"
v-if="weifaleixing == 0 && !['建设用地', '推堆土'].includes(typename)"
>
<a-descriptions <a-descriptions
:column="2" :column="2"
bordered bordered
@ -224,97 +157,71 @@
getLabel('measure_name', measure_name) getLabel('measure_name', measure_name)
}}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item v-if="measure_name == 0" label="附件"> <a-descriptions-item v-if="measure_name == 0" label="附件">
<a-image-preview-group :preview="{getContainer,}"> <template v-for="(item, itemIndex) in yanshoubiaoList" :key="itemIndex">
<template v-for="(item, itemIndex) in yanshoubiaoList" :key="itemIndex"> <div v-if="item">
<a-image <Icon
v-if="showImage(item)" :style="`font-size: 30px; cursor: pointer;`"
style="width:100px;height:100px;" icon="ion:document-attach-outline"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`" @click="downLoadFile(item)"
:preview="{getContainer,}" />
></a-image> {{ item }}
<div v-else> </div>
<Icon </template>
v-if="item"
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
</a-image-preview-group>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item v-if="measure_name == 0" label="照片"> <a-descriptions-item v-if="measure_name == 0" label="照片">
<div class="image-div"> <div class="image-div">
<a-image-preview-group <template
:preview="{ v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
getContainer:getContainer, :key="imageIndex"
}" >
> <a-image
<template v-if="imageItem"
v-for="(imageItem, imageIndex) in chaichufugenghoupicList" width="100px"
:key="imageIndex" height="100px"
> :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
<a-image :preview="{
v-if="imageItem" getContainer,
width="100px" }"
height="100px" ></a-image>
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`" </template>
:preview="{
getContainer,
}"
></a-image>
</template>
</a-image-preview-group>
</div> </div>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item v-if="measure_name == 1" label="附件"> <a-descriptions-item v-if="measure_name == 1" label="附件">
<a-image-preview-group :preview="{getContainer,}"> <template v-for="(item, itemIndex) in zhenggaifujianList" :key="itemIndex">
<template v-for="(item, itemIndex) in zhenggaifujianList" :key="itemIndex"> <div v-if="item">
<a-image <Icon
v-if="showImage(item)" :style="`font-size: 30px; cursor: pointer;`"
style="width:100px;height:100px;" icon="ion:document-attach-outline"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`" @click="downLoadFile(item)"
:preview="{getContainer}" />
></a-image> {{ item }}
<div v-else> </div>
<Icon </template>
v-if="item" <!-- {{ zhenggaifujian }} -->
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
</a-image-preview-group>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item v-if="measure_name == 1" label="照片"> <a-descriptions-item v-if="measure_name == 1" label="照片">
<div class="image-div"> <div class="image-div">
<a-image-preview-group <template
:preview="{ v-for="(imageItem, imageIndex) in bubanzhaopianList"
getContainer:getContainer, :key="imageIndex"
}" >
> <a-image
<template v-for="(imageItem, imageIndex) in bubanzhaopianList" :key="imageIndex"> v-if="imageItem"
<a-image width="100px"
v-if="imageItem" height="100px"
width="100px" :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
height="100px" :preview="{
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`" getContainer,
:preview="{ }"
getContainer, ></a-image>
}" </template>
></a-image>
</template>
</a-image-preview-group>
</div> </div>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="办理人">{{ transactor_name }}</a-descriptions-item> <a-descriptions-item label="办理人">{{ transactor_name }}</a-descriptions-item>
<a-descriptions-item label="办理时间">{{ transact_time }}</a-descriptions-item> <a-descriptions-item label="办理时间">{{ transact_time }}</a-descriptions-item>
</a-descriptions> </a-descriptions>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="4" v-if="!['建设用地', '推堆土'].includes(typename)" tab="区县审核"> <a-tab-pane key="4" v-if="!['建设用地','推堆土'].includes(typename)" tab="审核">
<a-descriptions <a-descriptions
:column="2" :column="2"
bordered bordered
@ -328,62 +235,6 @@
<a-descriptions-item label="审核时间">{{ verifytime }}</a-descriptions-item> <a-descriptions-item label="审核时间">{{ verifytime }}</a-descriptions-item>
</a-descriptions> </a-descriptions>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="5" v-if="!['建设用地', '推堆土'].includes(typename)" tab="市局审核">
<a-descriptions
:column="2"
bordered
:contentStyle="{
'text-align': 'center',
'min-width': '250px',
'word-break': 'break-all',
}"
>
<a-descriptions-item label="审核人">{{ hexiaoren }}</a-descriptions-item>
<a-descriptions-item label="审核时间">{{ hexiaotime?.split('.')[0] }}</a-descriptions-item>
<a-descriptions-item v-if="weifaleixing == 0" label="无人机复飞照片">
<div class="image-div">
<a-image-preview-group
:preview="{
getContainer:getContainer,
}"
>
<template v-for="(imageItem, imageIndex) in wrjffzhaopianList" :key="imageIndex">
<a-image
v-if="imageItem"
width="100px"
height="100px"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
:preview="{
getContainer,
}"
></a-image>
</template>
</a-image-preview-group>
</div>
</a-descriptions-item>
<!-- <a-descriptions-item label="现场核查照片">
<div class="image-div">
<a-image-preview-group
:preview="{
getContainer:getContainer,
}"
>
<template v-for="(imageItem, imageIndex) in xchczhaopianList" :key="imageIndex">
<a-image
v-if="imageItem"
width="100px"
height="100px"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
:preview="{
getContainer,
}"
></a-image>
</template>
</a-image-preview-group>
</div>
</a-descriptions-item> -->
</a-descriptions>
</a-tab-pane>
</a-tabs> </a-tabs>
</div> </div>
</div> </div>
@ -1021,6 +872,7 @@
return true; return true;
}; };
const imageList = ref([]) const imageList = ref([])
function handlerPreviewImage(index,url){ function handlerPreviewImage(index,url){

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

@ -16,8 +16,8 @@
/> />
</div> </div>
<div class="info-container" id="info-container"> <div class="info-container" id="info-container" >
<a-tabs v-model:activeKey="activeKey" style="height: 100%"> <a-tabs v-model:activeKey="activeKey" style="height: 100%" >
<a-tab-pane key="1" tab="线索下发"> <a-tab-pane key="1" tab="线索下发">
<a-descriptions <a-descriptions
:column="2" :column="2"
@ -50,9 +50,9 @@
<a-descriptions-item label="图斑照片"> <a-descriptions-item label="图斑照片">
<div class="image-div"> <div class="image-div">
<a-image-preview-group <a-image-preview-group
:preview="{ :preview="{
getContainer:getContainer, getContainer:getContainer,
}" }"
> >
<template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex"> <template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
<a-image <a-image
@ -60,9 +60,6 @@
width="100px" width="100px"
height="100px" height="100px"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`" :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
:preview="{
getContainer,
}"
></a-image> ></a-image>
</template> </template>
</a-image-preview-group> </a-image-preview-group>
@ -405,6 +402,7 @@
v-model:value="splitPolygonAreaForm.area" v-model:value="splitPolygonAreaForm.area"
@blur="checkArea('area')" @blur="checkArea('area')"
:status="areaAbnormal['area'] ? 'error' : ''" :status="areaAbnormal['area'] ? 'error' : ''"
@keydown="areKeyDownChange"
addon-after="亩" addon-after="亩"
/> />
</a-form-item> </a-form-item>
@ -526,8 +524,15 @@ import { itemProps } from '@/components/Menu/src/props';
const isSpliting = ref<Boolean>(false);; const isSpliting = ref<Boolean>(false);;
const mapshow = ref<Boolean>(false); const mapshow = ref<Boolean>(false);
const handlerKeydown = (e)=>{
console.log(e);
}
onMounted(()=>{ onMounted(()=>{
mapshow.value = true mapshow.value = true
}) })
const { const {
id, id,
@ -787,7 +792,8 @@ import { itemProps } from '@/components/Menu/src/props';
// splitAfterFeatures.features = e; // splitAfterFeatures.features = e;
const areKeyDownChange =
MapboxComponent.value.handlerDetails(splitAfterFeatures); MapboxComponent.value.handlerDetails(splitAfterFeatures);