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

merge

dianlixunjian
徐景良 2024-07-30 17:52:42 +08:00
parent f23fae25b5
commit f34c3e8d98
1 changed files with 533 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

533
src/views/demo/bootstraps/curbspotcity/MapList/ShowInfoModal/index.vue Normal file
View File

@ -0,0 +1,533 @@
<template>
<div class="detail-container">
<div class="map-container">
<MapboxMap
:mapConfig="mapConfig"
@handlerDrawComplete="handlerDrawComplete"
@mapOnLoad="onMapboxLoad"
ref="MapboxComponent"
/>
</div>
<div class="info-container" id="info-container">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="线索下发">
<a-descriptions
:column="2"
bordered
:contentStyle="{
'text-align': 'center',
'min-width': '250px',
'word-break': 'break-all',
}"
>
<a-descriptions-item label="图斑编号">{{ case_no }}</a-descriptions-item>
<a-descriptions-item label="图斑类型">{{ typename }}</a-descriptions-item>
<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(zhongdianquyu_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="下发时间">{{ createtime }}</a-descriptions-item>
<a-descriptions-item label="图斑照片">
<div class="image-div">
<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>
</a-tab-pane>
<a-tab-pane key="2" v-if="!['建设用地','推堆土'].includes(typename)" tab="线索填报" force-render>
<a-descriptions
:column="2"
bordered
:contentStyle="{
'text-align': 'center',
'min-width': '250px',
'word-break': 'break-all',
}"
>
<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="违法类型">{{
getLabel('weifaleixing', weifaleixing)
}}</a-descriptions-item>
<a-descriptions-item v-if="is_illegal == 1" label="附件">
<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="附件">
<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="附件">
<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">
<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-descriptions
:column="2"
bordered
:contentStyle="{
'text-align': 'center',
'min-width': '250px',
'word-break': 'break-all',
}"
>
<a-descriptions-item label="整改措施">{{
getLabel('measure_name', measure_name)
}}</a-descriptions-item>
<a-descriptions-item v-if="measure_name == 0" label="附件">
<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">
<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="附件">
<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">
<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-descriptions
:column="2"
bordered
:contentStyle="{
'text-align': 'center',
'min-width': '250px',
'word-break': 'break-all',
}"
>
<a-descriptions-item label="审核人">{{ verifyuser }}</a-descriptions-item>
<a-descriptions-item label="审核时间">{{ verifytime }}</a-descriptions-item>
</a-descriptions>
</a-tab-pane>
</a-tabs>
</div>
</div>
</template>
<script setup lang="ts">
import { defineProps, ref, computed } from 'vue';
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
import { getConfig } from '@/api/sys/layerManagement';
import { getGeom } from '@/api/sys/layerManagement';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
import Icon from '@/components/Icon/Icon.vue';
import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
import {
mapTypeOptions,
illegalTypeOptions,
measureOptions,
mapStatusOptions,
markTypeOptions,
illegalTypeList,
resultOptions,
qitaUseTOOptions,
} from '@/views/demo/tiankongdi/curbspotcity/util.ts';
console.log("");
const MapboxComponent = ref();
const mapConfig = ref({});
getConfig({ code: 'mapsetting' }).then((res) => {
mapConfig.value = JSON.parse(res.codeValue);
console.log('resresres', mapConfig.value);
});
const props = defineProps(['showInfoData']);
const activeKey = ref('1');
console.log('showInfoData123', props.showInfoData);
const {
id,
case_no,
case_name,
case_description,
start_time,
end_time,
address,
lng,
lat,
typeid,
typename,
handle_status_id,
handle_status_name,
case_status_i,
case_status_name,
createtime,
createuser,
drone_no,
deal_userid,
deal_username,
createusername,
is_delete,
countyid,
countyname,
streetid,
streetname,
communityid,
communityname,
remark,
is_closed,
area,
is_illegal,
close_user,
close_time,
identification_user,
identification_time,
is_intact,
close_userid,
identification_userid,
verifyuserid,
verifyuser,
verifytime,
is_improve,
improve_reason,
is_dispense,
dispense_userid,
dispense_time,
dispense_username,
verifystatus,
verifystatusname,
is_checked,
deal_time,
is_drawback,
examiner_id,
examiner_name,
examine_time,
measure_name,
casepic,
opinion,
result,
result_name,
opinion_name,
handletime,
handleuser,
handleusername,
is_assist,
measure_name_deal,
qita_use_to,
illegal_contact,
illegal_shenfenzhenghao,
investigation_type,
investigation_result,
registr_number,
is_build_complete,
actual_use_to,
transactor_id,
transactor_name,
transact_time,
geomid,
nongyongdi_area,
gengdi_area,
yongjiujibennongtian_area,
zhongdianquyu_area,
shengtaibaohuhongxian_area,
guotukongjianguihua_area,
fujian,
hefafujian,
qitafujian,
jieshou_people,
jieshou_time,
pandingyijushuoming,
xiangmumc,
xiangmuzhuti,
weifaleixing,
yanshoubiao,
zhenggaifujian,
chaichufugenghoupic,
bubanzhaopian,
is_jieshou,
anjianzhaopian,
} = props.showInfoData;
const anjianzhaopianList = computed(() => {
return anjianzhaopian ? anjianzhaopian.split(',') : [];
});
const casepicList = computed(() => {
return casepic ? casepic.split(',') : [];
});
const chaichufugenghoupicList = computed(() => {
return chaichufugenghoupic ? chaichufugenghoupic.split(',') : [];
});
const bubanzhaopianList = computed(() => {
return bubanzhaopian ? bubanzhaopian.split(',') : [];
});
const fujianList = computed(() => {
return fujian ? fujian.split(',') : [];
});
const hefafujianList = computed(() => {
return hefafujian ? hefafujian.split(',') : [];
});
const qitafujianList = computed(() => {
return qitafujian ? qitafujian.split(',') : [];
});
const zhenggaifujianList = computed(() => {
return zhenggaifujian ? zhenggaifujian.split(',') : [];
});
const yanshoubiaoList = computed(() => {
return yanshoubiao ? yanshoubiao.split(',') : [];
});
function onMapboxLoad() {
changeTask();
}
const getLabel = (type, value) => {
let result: any[] = [];
let label = '';
switch (type) {
case 'is_illegal':
result = mapTypeOptions;
break;
case 'weifaleixing':
result = illegalTypeList;
break;
case 'measure_name':
result = measureOptions;
break;
case 'result_name':
result = resultOptions;
break;
case 'qita_use_to':
result = qitaUseTOOptions;
break;
}
result.forEach((item) => {
if (item.value == value) {
label = item.label;
}
});
return label;
};
function changeTask() {
let getGeomPrams = {
TableName: 'drone_shp_data ',
FieldName: 'gid',
FieldValue: props.showInfoData.geomid?.split(","),
page: 1,
limit: 999,
key: null,
};
if (props.showInfoData.geomid) {
getGeom(getGeomPrams).then((res) => {
let geoms = [];
if (res) {
if (res.items?.length > 0) {
res.items.forEach((item, index) => {
let geom = {
key: item.gid,
mapgeom: item.geometry,
};
geoms.push(geom);
});
}
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
MapboxComponent.value.handlerDraw('Details', geoms, false);
} else {
createMessage.error('当前数据没有图斑！');
}
});
} else {
createMessage.error('当前数据没有图斑！');
}
}
const downLoadFile = (url) => {
window.open(`${VITE_GLOB_INFO_IMAGE_URL}/${url}`, 'mozillaTab');
};
const getContainer = () => {
return document.getElementById('info-container')
}
const dataProcessing = (value) => {
if(!value){
return '0'
}
if(value.indexOf('.') == -1){
return value
}else{
if(value.split('.')[1].length <= 2){
return value
}
let resultString = value.replace('㎡','')
return Number(resultString).toFixed(2)
}
}
</script>
<style lang="scss" scoped>
.image-div{
width: 300px;
max-height: 200px;
overflow: auto;
}
.detail-container {
width: 100vw;
height: calc(100vh - 120px);
display: flex;
}
.detail-container::after {
content: '';
display: block;
clear: both;
height: 0;
visibility: none;
}
.map-container {
float: left;
width: 50vw;
height: calc(100vh - 100px);
margin-right: 20px;
}
.info-container {
// float: left;
position: relative;
:deep(.ant-image-preview-wrap){
position: absolute;
}
:deep(.ant-image-preview-mask){
position: absolute;
}
:deep(.ant-image-preview-operations-wrapper){
position: absolute;
}
:deep(.ant-image-preview-operations){
position: absolute;
top: 0;
width: 100%;
}
}
::v-deep .ant-tabs .ant-tabs-content-holder{
overflow: auto;
height: 80vh;
overflow: auto;
padding-right: 10px;
}
</style>