396 lines
12 KiB
Vue
396 lines
12 KiB
Vue
<template>
|
|
<div class="detail-container">
|
|
<div class="map-container" v-if="!props.hiddenInfoMap">
|
|
<MapboxMap
|
|
:caseno="props.showInfoData.case_no"
|
|
:countyname="props.showInfoData.countyname"
|
|
:imageList="imageList"
|
|
:geomsList="geomsList"
|
|
:mapConfig="mapConfig"
|
|
@handlerDrawComplete="handlerDrawComplete"
|
|
@mapOnLoad="onMapboxLoad"
|
|
ref="MapboxComponent"
|
|
/>
|
|
</div>
|
|
<div class="info-container" id="info-container">
|
|
<a-descriptions
|
|
:column="2"
|
|
bordered
|
|
:contentStyle="{
|
|
'text-align': 'center',
|
|
'min-width': '250px',
|
|
'word-break': 'break-all',
|
|
}"
|
|
>
|
|
<a-descriptions-item label="线索编号">
|
|
{{ props.showInfoData.case_no }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="区县">
|
|
{{ props.showInfoData.countyname }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="乡镇">
|
|
{{ props.showInfoData.streetname }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="社区/村">
|
|
{{ props.showInfoData.communityname }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="线索类型">
|
|
{{ getLabel('typename', props.showInfoData.typename) }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="线索来源">
|
|
{{ getLabel('tubanlaiyuan', props.showInfoData.tubanlaiyuan) }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="上报时间">
|
|
{{ props.showInfoData.createtime }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="经度">
|
|
{{ props.showInfoData.lng }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="纬度">
|
|
{{ props.showInfoData.lat }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="线索描述">
|
|
{{ props.showInfoData.case_description }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="线索状态">
|
|
{{ getLabel('biaozhu', props.showInfoData.biaozhu) }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="线索照片" :span="2">
|
|
<div class="image-div">
|
|
<a-image-preview-group
|
|
:preview="{
|
|
getContainer: getContainer,
|
|
onVisibleChange: handlerImageChange,
|
|
}"
|
|
>
|
|
<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}`"
|
|
@click="handlerPreviewImage(imageIndex, imageItem)"
|
|
:preview="{
|
|
getContainer,
|
|
}"
|
|
></a-image>
|
|
</template>
|
|
</a-image-preview-group>
|
|
</div>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
<a-button style="width: 100px;" type="primary" @click="confirm">确认</a-button>
|
|
</div>
|
|
|
|
<!-- File Preview && Download Start -->
|
|
<a-modal
|
|
v-model:open="previewFileModalVisible"
|
|
style="width: 100vw"
|
|
title="文件预览"
|
|
wrap-class-name="full-modal"
|
|
>
|
|
<FilePreview v-if="previewFileModalVisible" :fileUrl="previewFileUrl"></FilePreview>
|
|
<template #footer>
|
|
<a-button key="cancel" @click="handleCancelPreviewFile">取消</a-button>
|
|
<a-button key="confirm" type="primary" @click="handlerDownloadFle">下载</a-button>
|
|
</template>
|
|
</a-modal>
|
|
<!--File Preview && Download End -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineProps, defineEmits, ref, computed, onBeforeMount, watch, onMounted } from 'vue';
|
|
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
|
|
import { getConfig } from '@/api/sys/layerManagement';
|
|
import { getGeom } from '@/api/sys/layerManagement';
|
|
import { getLoadCaseImgList } from '@/api/facilityfarm';
|
|
import { UpdateStatus } from '@/api/dailycheck';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
import axios from 'axios';
|
|
const { createMessage } = useMessage();
|
|
import Icon from '@/components/Icon/Icon.vue';
|
|
import { getAppEnvConfig } from '@/utils/env';
|
|
const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
|
|
import dayjs from 'dayjs';
|
|
|
|
|
|
const MapboxComponent = ref();
|
|
const mapConfig = ref({});
|
|
const props = defineProps(['showInfoData','hiddenInfoMap', 'typenameOptions', 'tubanlaiyuanOptions']);
|
|
const emits = defineEmits(['reload']);
|
|
const activeKey = ref('1');
|
|
const geomsList = ref();
|
|
const imageList = ref([]);
|
|
console.log('props', props.showInfoData);
|
|
watch(
|
|
() => props.showInfoData,
|
|
() => {
|
|
getConfig({ code: 'mapsetting' }).then((res) => {
|
|
mapConfig.value = JSON.parse(res.codeValue);
|
|
});
|
|
changeTask();
|
|
},
|
|
);
|
|
|
|
async function getCaseImgList() {
|
|
imageList.value = await getLoadCaseImgList({
|
|
caseid: props.showInfoData.id,
|
|
category: '日常巡检',
|
|
});
|
|
MapboxComponent.value.handlerLoadPictureAzimuth(imageList.value);
|
|
|
|
// 匹配去除无效图片
|
|
// 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]);
|
|
// }
|
|
// })
|
|
}
|
|
|
|
function handlerDealFileName(path) {
|
|
const regex = /([^/\\]+)(?=\.[^/\\]*$|$)/;
|
|
const matchStr = path.match(regex);
|
|
if (matchStr?.length) {
|
|
return matchStr[0];
|
|
}
|
|
}
|
|
|
|
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 {
|
|
isInitImageLisener.value = false;
|
|
if (e && !isInitImageLisener.value) {
|
|
setTimeout(function () {
|
|
const targetNode = document.getElementsByClassName('ant-image-preview-img');
|
|
targetNode?.forEach((node, index) => {
|
|
let imageObserver = new MutationObserver((mutationsList) => {
|
|
for (const mutation of mutationsList) {
|
|
if (node.getAttribute(mutation.attributeName).match('http')) {
|
|
handlerPreviewImage(0, node.getAttribute(mutation.attributeName));
|
|
}
|
|
}
|
|
});
|
|
const config = { attributes: true };
|
|
imageObserver.observe(node, config);
|
|
isInitImageLisener.value = true;
|
|
});
|
|
}, 250);
|
|
}
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
getCaseImgList()
|
|
|
|
});
|
|
onMounted(() => {
|
|
if(props.showInfoData.lng && props.showInfoData.lat){
|
|
MapboxComponent.value.handlerShowPoint(props.showInfoData.lng, props.showInfoData.lat);
|
|
}
|
|
})
|
|
|
|
const casepicList = computed(() => {
|
|
return props.showInfoData.casepic ? props.showInfoData.casepic.split(',') : [];
|
|
});
|
|
function onMapboxLoad() {
|
|
changeTask();
|
|
}
|
|
const getLabel = (type, value) => {
|
|
let result: any[] = [];
|
|
let label = '';
|
|
switch (type) {
|
|
case 'typename':
|
|
result = props.typenameOptions;
|
|
break;
|
|
case 'tubanlaiyuan':
|
|
result = props.tubanlaiyuanOptions;
|
|
break;
|
|
case 'biaozhu':
|
|
result = [
|
|
{ label: '未确认', value: 0},
|
|
{ label: '已确认', value: 1},
|
|
];
|
|
break;
|
|
}
|
|
result.forEach((item) => {
|
|
if (item.value == value) {
|
|
label = item.label;
|
|
}
|
|
});
|
|
return label;
|
|
};
|
|
async 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);
|
|
geomsList.value = geoms;
|
|
});
|
|
}
|
|
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
|
|
MapboxComponent.value.handlerDraw('Details', geoms, false);
|
|
} else {
|
|
geomsList.value = null;
|
|
// createMessage.error('当前数据没有线索！');
|
|
}
|
|
});
|
|
} else {
|
|
// createMessage.error('当前数据没有线索！');
|
|
}
|
|
}
|
|
|
|
|
|
import FilePreview from '@/components/Upload/src/components/FilePreview.vue';
|
|
import { message } from 'ant-design-vue';
|
|
|
|
const previewFileModalVisible = ref(false);
|
|
const previewFileUrl = ref('');
|
|
|
|
const hanlderPreViewFile = (url) => {
|
|
previewFileUrl.value = `${VITE_GLOB_INFO_IMAGE_URL}/${url}`;
|
|
previewFileModalVisible.value = true;
|
|
};
|
|
|
|
const handlerDownloadFle = () => {
|
|
window.open(previewFileUrl.value, 'mozillaTab');
|
|
};
|
|
|
|
const handleCancelPreviewFile = () => {
|
|
previewFileModalVisible.value = false;
|
|
};
|
|
///////
|
|
|
|
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);
|
|
}
|
|
};
|
|
const showImage = (url) => {
|
|
if (url.indexOf('.png') !== -1 || url.indexOf('.jpg') !== -1 || url.indexOf('.jpeg') !== -1) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
const confirm = () => {
|
|
UpdateStatus(props.showInfoData.id).then(res => {
|
|
message.success('确认成功')
|
|
emits('reload')
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.image-div {
|
|
min-width: 340px;
|
|
max-height: 220px;
|
|
overflow: auto;
|
|
}
|
|
.detail-container {
|
|
width: 100%;
|
|
height: calc(100vh - 120px);
|
|
display: flex;
|
|
padding: 0px 20px;
|
|
}
|
|
.detail-container::after {
|
|
content: '';
|
|
display: block;
|
|
clear: both;
|
|
height: 0;
|
|
visibility: none;
|
|
}
|
|
.map-container {
|
|
float: left;
|
|
width: 45vw;
|
|
height: calc(100vh - 100px);
|
|
margin-right: 20px;
|
|
}
|
|
:deep(.ant-image) {
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
:deep(.ant-image-preview-switch-left) {
|
|
position: absolute;
|
|
}
|
|
:deep(.ant-image-preview-switch-right) {
|
|
position: absolute;
|
|
}
|
|
.info-container {
|
|
// float: left;
|
|
position: relative;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: space-between;
|
|
:deep(.ant-image-preview-wrap) {
|
|
position: absolute;
|
|
}
|
|
:deep(.ant-image-preview-mask) {
|
|
position: absolute;
|
|
}
|
|
:deep(.ant-image-preview-operations-wrapper) {
|
|
height: 100%;
|
|
position: absolute;
|
|
.ant-image-preview-operations {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
.ant-image-preview-operations-operation {
|
|
// flex:1;
|
|
}
|
|
}
|
|
.ant-image-preview-operations-operation:nth-last-child(1) {
|
|
display: none;
|
|
}
|
|
.ant-image-preview-operations-operation:nth-last-child(2) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .ant-tabs .ant-tabs-content-holder {
|
|
overflow: auto;
|
|
height: 80vh;
|
|
overflow: auto;
|
|
padding-right: 10px;
|
|
}
|
|
</style>
|