558 lines
17 KiB
Vue
558 lines
17 KiB
Vue
<template>
|
||
<a-spin :spinning="props.modalLoading">
|
||
<div class="modal-content">
|
||
<div class="row">
|
||
<div class="item">
|
||
<div class="label">图斑编号：</div>
|
||
<div class="item-value" style="flex:2">
|
||
<a-input v-model:value="props.infoData.case_no" :disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">图斑类型：</div>
|
||
<div class="item-value">
|
||
<a-select
|
||
style="width: 100%"
|
||
v-model:value="props.infoData.typename"
|
||
:options="typenameOptions"
|
||
placeholder="请选择图斑类型"
|
||
:disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
<div class="item" style="flex:2">
|
||
<div class="label">图斑详情：</div>
|
||
<div class="item-value" style="flex:3">
|
||
<a-input v-model:value="props.infoData.case_description" :disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="item">
|
||
<div class="label">县/区：</div>
|
||
<div class="item-value">
|
||
<a-select
|
||
style="width: 100%"
|
||
v-model:value="props.infoData.countyid"
|
||
:options="countyOptions"
|
||
@change="handleCountyChange"
|
||
placeholder="请选择县/区"
|
||
:disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">乡镇/街道：</div>
|
||
<div class="item-value">
|
||
<a-select
|
||
style="width: 100%"
|
||
v-model:value="props.infoData.streetid"
|
||
:options="streetOptions"
|
||
@change="handleStreetChange"
|
||
placeholder="请选择乡镇/街道"
|
||
:disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">社区/村：</div>
|
||
<div class="item-value">
|
||
<a-select
|
||
style="width: 100%"
|
||
v-model:value="props.infoData.communityid"
|
||
:options="communityOptions"
|
||
@change="handleCommunityChange"
|
||
placeholder="请选择社区/村"
|
||
:disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">详细地址：</div>
|
||
<div class="item-value" style="flex:2">
|
||
<a-input v-model:value="props.infoData.address" :disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="item">
|
||
<div class="label">违法开采面积：</div>
|
||
<div class="item-value">
|
||
<a-input v-model:value="props.infoData.weifakaicaiarea_base" :disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">违法占地面积：</div>
|
||
<div class="item-value">
|
||
<a-input v-model:value="props.infoData.weifazhandiarea_base" :disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">基本农田面积：</div>
|
||
<div class="item-value">
|
||
<a-input v-model:value="props.infoData.jbntarea_base" :disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">耕地面积：</div>
|
||
<div class="item-value">
|
||
<a-input v-model:value="props.infoData.gengdi_area" :disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="item">
|
||
<div class="label">城市开发边界面积：</div>
|
||
<div class="item-value">
|
||
<a-input v-model:value="props.infoData.cskfbjarea_base" :disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">生态保护红线面积：</div>
|
||
<div class="item-value">
|
||
<a-input v-model:value="props.infoData.stbhhxarea_base" :disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label" style="font-size: 13px;">疑似违法涉矿图斑面积：</div>
|
||
<div class="item-value">
|
||
<a-input v-model:value="props.infoData.weifaarea_base" :disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">所属年度：</div>
|
||
<div class="item-value">
|
||
<a-input v-model:value="props.infoData.syear_base" :disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="item">
|
||
<div class="label">是否重点矿区：</div>
|
||
<div class="item-value">
|
||
<a-select
|
||
style="width: 100%"
|
||
v-model:value="props.infoData.zhongdianflag_base"
|
||
:options="yesOrNoOptions"
|
||
:disabled="!props.control" />
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">重点矿区名称：</div>
|
||
<div class="item-value">
|
||
<a-input v-model:value="props.infoData.zhongdianname_base" :disabled="!props.control" />
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label" style="font-size: 12px;">是否在国家自然保护区内：</div>
|
||
<div class="item-value">
|
||
<a-select
|
||
style="width: 100%;"
|
||
v-model:value="props.infoData.ziranbaohuflag_base"
|
||
:options="yesOrNoOptions"
|
||
:disabled="!props.control" />
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label" style="font-size: 12px;">所属国家自然保护区名称：</div>
|
||
<div class="item-value">
|
||
<a-input v-model:value="props.infoData.ziranbaohuname_base" :disabled="!props.control" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="item">
|
||
<div class="label">前影像名称：</div>
|
||
<div class="item-value" style="flex:2">
|
||
<a-input v-model:value="props.infoData.qianshixiang_base" disabled />
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">前时相时间：</div>
|
||
<div class="item-value" style="flex:2">
|
||
<a-input v-model:value="props.infoData.pre_phase_time" disabled/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">是否符合土地利用总体规划：</div>
|
||
<div class="item-value">
|
||
<a-select
|
||
style="width: 100%;"
|
||
v-model:value="props.infoData.tudiliyongflag_base"
|
||
:options="yesOrNoOptions"
|
||
:disabled="!props.control"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="item">
|
||
<div class="label">后影像名称：</div>
|
||
<div class="item-value" style="flex:2">
|
||
<a-input v-model:value="props.infoData.houshixiang_base" disabled/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">后时相时间：</div>
|
||
<div class="item-value" style="flex:2">
|
||
<a-input v-model:value="props.infoData.later_phase_time" disabled/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">经纬度：</div>
|
||
<div class="item-value" style="flex:2;display: flex">
|
||
<a-input id="lnglat" style="margin-right: 15px;" :value="`${props.infoData.centerlng_base},${props.infoData.centerlat_base}`" disabled/>
|
||
<a-button @click="copyText">复制</a-button>
|
||
<textarea id="copyText" style="position: absolute;left: -9999px;top: -9999px;" :value="`${props.infoData.centerlng_base},${props.infoData.centerlat_base}`"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="item">
|
||
<div class="label">判读人：</div>
|
||
<div class="item-value" style="flex:2">
|
||
<a-input v-model:value="props.infoData.identification_user" disabled/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">判读时间：</div>
|
||
<div class="item-value" style="flex:2">
|
||
<a-input v-model:value="props.infoData.identification_time" disabled/>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">到期时限：</div>
|
||
<div class="item-value" style="flex:2">
|
||
<a-input v-model:value="props.infoData.chulishixian_base" disabled/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="item">
|
||
<div class="label">情况说明：</div>
|
||
<div class="item-value" style="flex:2">
|
||
<a-input v-model:value="props.infoData.resubmitremark" disabled/>
|
||
</div>
|
||
</div>
|
||
<div class="item"></div>
|
||
<div class="item"></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="item" style="width: 100%;">
|
||
<div class="label">图片：</div>
|
||
<div style="flex:9;display:flex;">
|
||
<a-image-preview-group>
|
||
<div class="video-item" v-for="(item, index) in fileList" :key="index" style="display: inline-block;position:relative;">
|
||
<div v-if="props.control" class="video-delete-btn" @click="handlerDelete(index)">
|
||
<CloseOutlined />
|
||
</div>
|
||
<a-image :src="item.url" style="width:100px;height:100px;" />
|
||
</div>
|
||
</a-image-preview-group>
|
||
<Upload
|
||
v-if="props.control"
|
||
list-type="picture-card"
|
||
:showUploadList="false"
|
||
:custom-request="customRequest"
|
||
@change="handleChange"
|
||
:disabled="!props.control"
|
||
>
|
||
<div>
|
||
<plus-outlined />
|
||
<div style="margin-top: 8px">Upload</div>
|
||
</div>
|
||
</Upload>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 50%; height: 300px; margin-bottom: 10px;">
|
||
<MapboxMap
|
||
@mapOnLoad="onMapboxLoad"
|
||
ref="MapboxComponent"/>
|
||
</div>
|
||
<div class="footer">
|
||
<div class="button-div">
|
||
<a-button style="margin-right: 10px;" @click="emits('closeModal')">关闭弹窗</a-button>
|
||
<a-button v-if="props.control" style="margin-right: 10px;" type="primary" class="danger-button" @click="emits('closeCase',props.infoData.id)">关闭线索</a-button>
|
||
<a-button v-if="props.control" style="margin-right: 10px;" type="primary" @click="submit">审核通过</a-button>
|
||
<a-button v-if="props.control" style="margin-right: 10px;" type="primary" class="danger-button" @click="reSubmit">复提</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-spin>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { defineProps, ref, watch, onMounted, defineEmits, createVNode } from "vue"
|
||
import { PlusOutlined, CloseOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||
import { Upload, message, Modal } from 'ant-design-vue';
|
||
import { uploadFile } from '@/api/formrender/index';
|
||
import { getAppEnvConfig } from '@/utils/env';
|
||
import { getLoad } from '@/api/sys/sysDataItemDetail';
|
||
import { getChildrenTree } from '@/api/demo/system';
|
||
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
|
||
import { getGeom } from '@/api/sys/layerManagement';
|
||
import axios from "axios";
|
||
import { IsReSubmit } from '@/api/audit/index'
|
||
|
||
const props = defineProps(['infoData','control','modalLoading'])
|
||
const emits = defineEmits(['handleOk','closeModal','closeCase','reSubmit','changeLoading'])
|
||
|
||
const typenameOptions = ref([])
|
||
const countyOptions = ref([])
|
||
const streetOptions = ref([])
|
||
const communityOptions = ref([])
|
||
const fileList = ref<any>([])
|
||
const previewVisible = ref(false);
|
||
const previewImage = ref('');
|
||
const previewTitle = ref('');
|
||
const geomsList = ref()
|
||
const MapboxComponent = ref();
|
||
const yesOrNoOptions = ref([
|
||
{ label: '是', value: '1' },
|
||
{ label: '否', value: '2' }
|
||
])
|
||
|
||
onMounted(() => {
|
||
getLoad({code:'kctubanleixing'}).then(res => {
|
||
typenameOptions.value = res.map(item => {
|
||
return {
|
||
label: item.itemName,
|
||
value: item.itemValue
|
||
}
|
||
})
|
||
})
|
||
getChildrenTree({ parentId: 371300 }).then(res => {
|
||
countyOptions.value = res.map(item => {
|
||
return {
|
||
label: item.name,
|
||
value: item.id.toString(),
|
||
}
|
||
})
|
||
})
|
||
props.infoData.countyid && getChildrenTree({ parentId: props.infoData.countyid }).then(res => {
|
||
streetOptions.value = res.map(item => {
|
||
return {
|
||
label: item.name,
|
||
value: item.id.toString(),
|
||
}
|
||
})
|
||
})
|
||
props.infoData.streetid && getChildrenTree({ parentId: props.infoData.streetid }).then(res => {
|
||
communityOptions.value = res.map(item => {
|
||
return {
|
||
label: item.name,
|
||
value: item.id.toString(),
|
||
}
|
||
})
|
||
})
|
||
const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
|
||
props.infoData.tubanpic_base && props.infoData.tubanpic_base.split(',').forEach(item => {
|
||
fileList.value.push({
|
||
uid: '-1',
|
||
name: item,
|
||
status: 'done',
|
||
url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
|
||
})
|
||
})
|
||
})
|
||
watch(() => fileList.value.length, (val) => {
|
||
props.infoData.tubanpic_base = fileList.value.map(item => item.name).join(',')
|
||
})
|
||
|
||
const handleChange = (info) => {
|
||
if (info.file.status !== 'uploading') {
|
||
}
|
||
if (info.file.status === 'done') {
|
||
} else if (info.file.status === 'error') {
|
||
}
|
||
};
|
||
const customRequest = (file) => {
|
||
console.log('handleCustomRequest',file)
|
||
const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
|
||
const formData = new FormData()
|
||
formData.append('files', file.file)
|
||
axios({
|
||
method: 'post',
|
||
url: `${VITE_GLOB_INFO_IMAGE_URL}/api/Platform/Upload`,
|
||
params: { project: 'DroneEnforcement'},
|
||
data: formData,
|
||
headers: {
|
||
'Content-type': 'multipart/form-data',
|
||
},
|
||
}).then(res => {
|
||
console.log(res)
|
||
let data = res.data.result
|
||
fileList.value?.push({
|
||
uid: '-1',
|
||
name: data[0].filePath,
|
||
status: 'done',
|
||
url: VITE_GLOB_INFO_IMAGE_URL + '/' + data[0].filePath,
|
||
});
|
||
})
|
||
}
|
||
const handlePreview = () => {
|
||
|
||
}
|
||
const handleRemove = () => {
|
||
|
||
}
|
||
const handlerDelete = (index) => {
|
||
fileList.value.splice(index, 1);
|
||
}
|
||
const handlerPreviewImage = (url,list) => {
|
||
|
||
}
|
||
const submit = () => {
|
||
Modal.confirm({
|
||
title: '确认审核通过吗？',
|
||
icon: createVNode(ExclamationCircleOutlined),
|
||
okText: '确认',
|
||
cancelText: '取消',
|
||
onOk: () => {
|
||
IsReSubmit({originalcaseno: props.infoData.original_case_no, subjectkey: '非法采矿'}).then(res => {
|
||
if(res){
|
||
let params = {
|
||
...props.infoData,
|
||
subject: '非法采矿',
|
||
}
|
||
emits('handleOk',params)
|
||
}else{
|
||
message.error('审核失败')
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
const reSubmit = () => {
|
||
emits('reSubmit',props.infoData.original_case_no)
|
||
}
|
||
const copyText = () => {
|
||
const copyTextDom = document.getElementById('copyText')
|
||
console.log(copyTextDom)
|
||
if(copyTextDom){
|
||
copyTextDom.select()
|
||
document.execCommand('Copy');
|
||
message.success('复制成功')
|
||
}
|
||
}
|
||
async function changeTask() {
|
||
let getGeomPrams = {
|
||
TableName: 'drone_shp_data ',
|
||
FieldName: 'gid',
|
||
FieldValue: props.infoData.geomid?.split(','),
|
||
page: 1,
|
||
limit: 999,
|
||
key: null,
|
||
};
|
||
if (props.infoData.geomid) {
|
||
getGeom(getGeomPrams).then((res) => {
|
||
let geoms: Array<{ key: string; mapgeom: any }> = [];
|
||
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('Details', geoms, false);
|
||
} else {
|
||
geomsList.value = null;
|
||
message.error('当前数据没有图斑！');
|
||
}
|
||
});
|
||
} else {
|
||
message.error('当前数据没有图斑！');
|
||
}
|
||
}
|
||
const onMapboxLoad = () => {
|
||
changeTask();
|
||
}
|
||
const handleCountyChange = (value,item) => {
|
||
props.infoData.countyname = item.label
|
||
props.infoData.streetid = ''
|
||
props.infoData.streetname = ''
|
||
props.infoData.communityid = ''
|
||
props.infoData.communityname = ''
|
||
getChildrenTree({ parentId: value }).then(res => {
|
||
streetOptions.value = res.map(item => {
|
||
return {
|
||
label: item.name,
|
||
value: item.id.toString(),
|
||
}
|
||
})
|
||
communityOptions.value = []
|
||
})
|
||
}
|
||
const handleStreetChange = (value,item) => {
|
||
props.infoData.streetname = item.label
|
||
props.infoData.communityid = ''
|
||
props.infoData.communityname = ''
|
||
getChildrenTree({ parentId: value }).then(res => {
|
||
communityOptions.value = res.map(item => {
|
||
return {
|
||
label: item.name,
|
||
value: item.id.toString(),
|
||
}
|
||
})
|
||
})
|
||
}
|
||
const handleCommunityChange = (value,item) => {
|
||
props.infoData.communityname = item.label
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.ant-image){
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.video-delete-btn {
|
||
position: absolute;
|
||
top: 0px;
|
||
right: 10px;
|
||
width: 30px;
|
||
height: 30px;
|
||
border-bottom-left-radius: 80%;
|
||
background: rgb(0 0 0 / 20%);
|
||
color: #fff;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
z-index: 999;
|
||
}
|
||
.modal-content{
|
||
padding: 20px;
|
||
}
|
||
.row{
|
||
display: flex;
|
||
margin-bottom: 15px;
|
||
}
|
||
.select-width{
|
||
width:100%;
|
||
}
|
||
.item{
|
||
display: flex;
|
||
flex:1;
|
||
.label{
|
||
flex: 1;
|
||
padding: 0px 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.item-value{
|
||
padding: 0px 15px;
|
||
flex:1;
|
||
}
|
||
}
|
||
.button-div{
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
.danger-button{
|
||
background: #ed6f6f;
|
||
&:hover{
|
||
background: #faa19d;
|
||
}
|
||
}
|
||
}
|
||
</style>
|