dianlixunjian
徐景良 2024-09-14 16:25:34 +08:00
parent c050bd5153
commit 4155711861
3 changed files with 133 additions and 336 deletions

View File

@ -7,6 +7,7 @@
src:currentImageSrcUrl,
onVisibleChange:handlerImageChange
}"
@keydown.native.stop
>
<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)">
@ -16,6 +17,7 @@
style="width:100px;height:100px;"
:src="item.url"
@click="handlerPreviewImage(item,index)"
@keydown.native.stop
></a-image>
</div>
</a-image-preview-group>
@ -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;

View File

@ -16,11 +16,12 @@
</div>
<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-descriptions
:column="2"
bordered
size="small"
:contentStyle="{
'text-align': 'center',
'min-width': '250px',
@ -32,60 +33,39 @@
<a-descriptions-item label="县区">{{ countyname }}</a-descriptions-item>
<a-descriptions-item label="乡镇">{{ streetname }}</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(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(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(yongjiujibennongtian_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="图斑描述">{{ case_description }}</a-descriptions-item>
<!-- <a-descriptions-item label="图斑地址">{{ address }}</a-descriptions-item> -->
<a-descriptions-item label="备注">{{ remark }}</a-descriptions-item>
<a-descriptions-item label="经度">{{ lng }}</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="图斑照片">
<div class="image-div">
<a-image-preview-group
:preview="{
getContainer:getContainer,
}"
>
<template v-for="(imageItem, imageIndex) in casepicList" :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>
<template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
<a-image
v-if="imageItem"
width="100px"
height="100px"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
:preview="{
getContainer,
}"
></a-image>
</template>
</div>
</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-tab-pane>
<a-tab-pane
key="2"
v-if="!['建设用地', '推堆土'].includes(typename)"
tab="线索填报"
force-render
>
<a-tab-pane key="2" v-if="!['',''].includes(typename)" tab="线索填报" force-render>
<a-descriptions
:column="2"
bordered
@ -98,119 +78,72 @@
<a-descriptions-item label="判定结果">{{
getLabel('is_illegal', is_illegal)
}}</a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 1" label="项目名称">{{
xiangmumc
}}</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="项目名称">{{ xiangmumc }}</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="违法类型">{{
getLabel('weifaleixing', weifaleixing)
}}</a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 1" label="附件">
<a-image-preview-group :preview="{getContainer,}">
<template v-for="(item, itemIndex) in fujianList" :key="itemIndex">
<a-image
v-if="showImage(item)"
style="width:100px;height:100px;"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
:preview="{getContainer}"
></a-image>
<div v-else>
<Icon
v-if="item"
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
</a-image-preview-group>
<template v-for="(item, itemIndex) in fujianList" :key="itemIndex">
<div v-if="item" style="margin-top: 10px">
<Icon
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
</a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 0" label="附件">
<a-image-preview-group :preview="{getContainer,}">
<template v-for="(item, itemIndex) in hefafujianList" :key="itemIndex">
<a-image
v-if="showImage(item)"
style="width:100px;height:100px;"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
:preview="{getContainer,}"
></a-image>
<div v-else>
<Icon
v-if="item"
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
</a-image-preview-group>
<template v-for="(item, itemIndex) in hefafujianList" :key="itemIndex">
<div v-if="item" style="margin-top: 10px">
<Icon
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
</a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 2" label="实际用途">{{
getLabel('qita_use_to', qita_use_to)
}}</a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 2" label="实际用途">{{ getLabel('qita_use_to',qita_use_to) }}</a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 2" label="附件">
<a-image-preview-group :preview="{getContainer,}">
<template v-for="(item, itemIndex) in qitafujianList" :key="itemIndex">
<a-image
v-if="showImage(item)"
style="width:100px;height:100px;"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
:preview="{getContainer}"
></a-image>
<div v-else>
<Icon
v-if="item"
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
</a-image-preview-group>
<template v-for="(item, itemIndex) in qitafujianList" :key="itemIndex">
<div v-if="item" style="margin-top: 10px">
<Icon
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
</a-descriptions-item>
<a-descriptions-item label="判定依据说明">{{
pandingyijushuoming
}}</a-descriptions-item>
<a-descriptions-item label="照片">
<div class="image-div">
<a-image-preview-group
:preview="{
getContainer:getContainer,
onVisibleChange:handlerImageChange
}"
>
<template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
<a-image
v-if="imageItem"
@click="handlerPreviewImage(imageIndex,imageItem)"
width="100px"
height="100px"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
:preview="{
getContainer,
}"
></a-image>
</template>
</a-image-preview-group>
<template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
<a-image
v-if="imageItem"
width="100px"
height="100px"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
:preview="{
getContainer,
}"
></a-image>
</template>
</div>
</a-descriptions-item>
<a-descriptions-item label="填报人">{{ examiner_name }}</a-descriptions-item>
<a-descriptions-item label="填报时间">{{ examine_time }}</a-descriptions-item>
</a-descriptions>
</a-tab-pane>
<a-tab-pane
key="3"
tab="整改情况"
v-if="weifaleixing == 0 && !['建设用地', '推堆土'].includes(typename)"
>
<a-tab-pane key="3" tab="整改情况" v-if="weifaleixing == 0 && !['建设用地','推堆土'].includes(typename)">
<a-descriptions
:column="2"
bordered
@ -224,97 +157,71 @@
getLabel('measure_name', measure_name)
}}</a-descriptions-item>
<a-descriptions-item v-if="measure_name == 0" label="附件">
<a-image-preview-group :preview="{getContainer,}">
<template v-for="(item, itemIndex) in yanshoubiaoList" :key="itemIndex">
<a-image
v-if="showImage(item)"
style="width:100px;height:100px;"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
:preview="{getContainer,}"
></a-image>
<div v-else>
<Icon
v-if="item"
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
</a-image-preview-group>
<template v-for="(item, itemIndex) in yanshoubiaoList" :key="itemIndex">
<div v-if="item">
<Icon
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
</a-descriptions-item>
<a-descriptions-item v-if="measure_name == 0" label="照片">
<div class="image-div">
<a-image-preview-group
:preview="{
getContainer:getContainer,
}"
>
<template
v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
: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>
<template
v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
:key="imageIndex"
>
<a-image
v-if="imageItem"
width="100px"
height="100px"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
:preview="{
getContainer,
}"
></a-image>
</template>
</div>
</a-descriptions-item>
<a-descriptions-item v-if="measure_name == 1" label="附件">
<a-image-preview-group :preview="{getContainer,}">
<template v-for="(item, itemIndex) in zhenggaifujianList" :key="itemIndex">
<a-image
v-if="showImage(item)"
style="width:100px;height:100px;"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
:preview="{getContainer}"
></a-image>
<div v-else>
<Icon
v-if="item"
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
</a-image-preview-group>
<template v-for="(item, itemIndex) in zhenggaifujianList" :key="itemIndex">
<div v-if="item">
<Icon
:style="`font-size: 30px; cursor: pointer;`"
icon="ion:document-attach-outline"
@click="downLoadFile(item)"
/>
{{ item }}
</div>
</template>
<!-- {{ zhenggaifujian }} -->
</a-descriptions-item>
<a-descriptions-item v-if="measure_name == 1" label="照片">
<div class="image-div">
<a-image-preview-group
:preview="{
getContainer:getContainer,
}"
>
<template v-for="(imageItem, imageIndex) in bubanzhaopianList" :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>
<template
v-for="(imageItem, imageIndex) in bubanzhaopianList"
:key="imageIndex"
>
<a-image
v-if="imageItem"
width="100px"
height="100px"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
:preview="{
getContainer,
}"
></a-image>
</template>
</div>
</a-descriptions-item>
<a-descriptions-item label="办理人">{{ transactor_name }}</a-descriptions-item>
<a-descriptions-item label="办理时间">{{ transact_time }}</a-descriptions-item>
</a-descriptions>
</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
:column="2"
bordered
@ -328,62 +235,6 @@
<a-descriptions-item label="审核时间">{{ verifytime }}</a-descriptions-item>
</a-descriptions>
</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>
</div>
</div>
@ -606,7 +457,7 @@
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getConfig } from '@/api/sys/layerManagement';
import { getGeom } from '@/api/sys/layerManagement';
import { splitCase,getLoadCaseImgList } from '@/api/tiankongdi';
import { splitCase } from '@/api/tiankongdi';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
import Icon from '@/components/Icon/Icon.vue';
@ -1021,66 +872,6 @@
}
return true;
};
const imageList = ref([])
async function getCaseImgList(){
imageList.value = await getLoadCaseImgList({caseid:id});
//
let zhengshiImageList = [];
imageList.value?.forEach((item,index)=>{
let obj = anjianzhaopianList.value?.find((it,idx)=>{
return item.filePath == it;
})
if(obj){
zhengshiImageList.push(imageList.value[index]);
}
})
// console.log("imageList",imageList.value);
// console.log("anjianzhaopianList",anjianzhaopianList.value);
// console.log("zhengshiImageList",zhengshiImageList);
MapboxComponent.value.handlerLoadPictureAzimuth(zhengshiImageList);
}
function handlerPreviewImage(index,url){
const regex = /([^/\\]+)(?=\.[^/\\]*$|$)/;
const match = url.match(regex);
if (match) {
MapboxComponent.value.handlerCurrentImageChange(match[1]);
}
}
const isInitImageLisener = ref<Boolean>(false);
//
function handlerImageChange(e):void{
if(e && !isInitImageLisener.value){
setTimeout(function(){
const targetNode = document.getElementsByClassName('ant-image-preview-img');
//
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'attributes') {
if(targetNode[0].getAttribute(mutation.attributeName).match("http")){
handlerPreviewImage(0,targetNode[0].getAttribute(mutation.attributeName))
}
}
}
});
//
const config = { attributes: true };
//
observer.observe(targetNode[0], config);
isInitImageLisener.value = true;
},250)
}
}
</script>
<style lang="scss" scoped>

View File

@ -16,8 +16,8 @@
/>
</div>
<div class="info-container" id="info-container">
<a-tabs v-model:activeKey="activeKey" style="height: 100%">
<div class="info-container" id="info-container" >
<a-tabs v-model:activeKey="activeKey" style="height: 100%" >
<a-tab-pane key="1" tab="线索下发">
<a-descriptions
:column="2"
@ -50,9 +50,9 @@
<a-descriptions-item label="图斑照片">
<div class="image-div">
<a-image-preview-group
:preview="{
getContainer:getContainer,
}"
:preview="{
getContainer:getContainer,
}"
>
<template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
<a-image
@ -60,9 +60,6 @@
width="100px"
height="100px"
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
:preview="{
getContainer,
}"
></a-image>
</template>
</a-image-preview-group>
@ -526,8 +523,15 @@ import { itemProps } from '@/components/Menu/src/props';
const isSpliting = ref<Boolean>(false);;
const mapshow = ref<Boolean>(false);
const handlerKeydown = (e)=>{
console.log(e);
}
onMounted(()=>{
mapshow.value = true
})
const {
id,