Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua
Zhufu
commit
fb26619a6a
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
:mapConfig="mapConfig"
|
||||
@handlerSplitPolygon="handlerSplitPolygon"
|
||||
@mapOnLoad="onMapboxLoad"
|
||||
:caseno="id"
|
||||
:splitPlugin="true"
|
||||
@onFeatureClick="onFeatureClick"
|
||||
ref="MapboxComponent"
|
||||
|
|
@ -15,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"
|
||||
|
|
@ -34,11 +35,11 @@
|
|||
<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(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> -->
|
||||
|
|
@ -49,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
|
||||
|
|
@ -59,9 +60,6 @@
|
|||
width="100px"
|
||||
height="100px"
|
||||
:src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
|
||||
:preview="{
|
||||
getContainer,
|
||||
}"
|
||||
></a-image>
|
||||
</template>
|
||||
</a-image-preview-group>
|
||||
|
|
@ -98,7 +96,7 @@
|
|||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
{{ handlerDealFileName(item) }}
|
||||
</div>
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
|
|
@ -110,7 +108,7 @@
|
|||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
{{ handlerDealFileName(item) }}
|
||||
</div>
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
|
|
@ -123,7 +121,7 @@
|
|||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
{{ handlerDealFileName(item) }}
|
||||
</div>
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
|
|
@ -176,7 +174,7 @@
|
|||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
{{ handlerDealFileName(item) }}
|
||||
</div>
|
||||
</template>
|
||||
</a-descriptions-item>
|
||||
|
|
@ -212,7 +210,7 @@
|
|||
icon="ion:document-attach-outline"
|
||||
@click="downLoadFile(item)"
|
||||
/>
|
||||
{{ item }}
|
||||
{{ handlerDealFileName(item) }}
|
||||
</div>
|
||||
</template>
|
||||
<!-- {{ zhenggaifujian }} -->
|
||||
|
|
@ -274,6 +272,9 @@
|
|||
:style="{ 'border-color': currentPolygon == index ? '#408eff' : '#fff' }"
|
||||
>
|
||||
<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">
|
||||
<img
|
||||
src="/positioning.png"
|
||||
|
|
@ -369,9 +370,14 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="split-operation">
|
||||
<a-button type="primary" @click="reductionSplit">取消分割</a-button>
|
||||
|
||||
<!-- <a-button type="primary" :disabled="isSpliting" @click="mergeSplitResult">合并图斑</a-button> -->
|
||||
<!--
|
||||
<a-button type="error" :disabled="isSpliting" @click="deleteSplitResult">删除图斑</a-button> -->
|
||||
|
||||
<a-button type="primary" @click="saveSplitResult">保存分割</a-button>
|
||||
<a-button type="primary" :disabled="isSpliting" @click="reductionSplit">还原分割</a-button>
|
||||
|
||||
<a-button type="primary" :disabled="isSpliting" @click="saveSplitResult">保存分割</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -396,6 +402,7 @@
|
|||
v-model:value="splitPolygonAreaForm.area"
|
||||
@blur="checkArea('area')"
|
||||
:status="areaAbnormal['area'] ? 'error' : ''"
|
||||
@keydown="areKeyDownChange"
|
||||
addon-after="亩"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
|
@ -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<Boolean>(false);;
|
||||
|
||||
const mapshow = ref<Boolean>(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<Number>();
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1021,6 +872,7 @@
|
|||
return true;
|
||||
};
|
||||
|
||||
|
||||
const imageList = ref([])
|
||||
|
||||
function handlerPreviewImage(index,url){
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -405,6 +402,7 @@
|
|||
v-model:value="splitPolygonAreaForm.area"
|
||||
@blur="checkArea('area')"
|
||||
:status="areaAbnormal['area'] ? 'error' : ''"
|
||||
@keydown="areKeyDownChange"
|
||||
addon-after="亩"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
|
@ -526,8 +524,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,
|
||||
|
|
@ -787,7 +792,8 @@ import { itemProps } from '@/components/Menu/src/props';
|
|||
|
||||
// splitAfterFeatures.features = e;
|
||||
|
||||
|
||||
|
||||
const areKeyDownChange =
|
||||
MapboxComponent.value.handlerDetails(splitAfterFeatures);
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue