违法用地-持续监管
parent
13d676dc43
commit
2d5128f263
|
|
@ -138,6 +138,14 @@ enum Api {
|
|||
CaseOffenceMinerals = '/api/DroneCaseInfoMinerals/CaseOffenceMinerals',
|
||||
// 非法采矿-统计列表New
|
||||
CaseOffenceMineralsNew = '/api/DroneCaseInfoMinerals/CaseOffenceMineralsNew',
|
||||
// 持续监管-列表
|
||||
LoadCaseInfoCxjgTuBanList = '/api/DroneCaseInfoSingle/LoadCaseInfoCxjgTuBanList',
|
||||
// 持续监管-图片插入
|
||||
UpdateCxjgData = '/api/DroneCaseInfoSingle/UpdateCxjgData',
|
||||
// 持续监管-审核
|
||||
CheckCxjgPic = '/api/DroneCaseInfoSingle/CheckCxjgPic',
|
||||
// 持续监管-迁入违法专题
|
||||
MoveInIllegalSubejct = '/api/DroneCaseInfoSingle/MoveInIllegalSubejct',
|
||||
}
|
||||
export const getPositionsTree = (params?: AccountParams) =>
|
||||
defHttp.get<AccountListGetResultModel>({ url: Api.PositionsTree, params });
|
||||
|
|
@ -529,4 +537,17 @@ export const CaseOffenceMinerals = (params: ReportParams) =>
|
|||
defHttp.get<StatisticalListGetResultModel>({ url: Api.CaseOffenceMinerals, params });
|
||||
// 非法采矿-统计列表New
|
||||
export const CaseOffenceMineralsNew = (params: ReportParams) =>
|
||||
defHttp.get<StatisticalListGetResultModel>({ url: Api.CaseOffenceMineralsNew, params });
|
||||
defHttp.get<StatisticalListGetResultModel>({ url: Api.CaseOffenceMineralsNew, params });
|
||||
|
||||
// 持续监管-列表
|
||||
export const LoadCaseInfoCxjgTuBanList = (params) =>
|
||||
defHttp.get({ url: Api.LoadCaseInfoCxjgTuBanList, params });
|
||||
// 持续监管-图片插入
|
||||
export const UpdateCxjgData = (params) =>
|
||||
defHttp.get({ url: Api.UpdateCxjgData, params });
|
||||
// 持续监管-审核
|
||||
export const CheckCxjgPic = (params) =>
|
||||
defHttp.get({ url: Api.CheckCxjgPic, params });
|
||||
// 持续监管-迁入违法专题
|
||||
export const MoveInIllegalSubejct = (params) =>
|
||||
defHttp.post({ url: Api.MoveInIllegalSubejct, params });
|
||||
|
|
@ -438,6 +438,12 @@
|
|||
</div>
|
||||
</a-descriptions-item> -->
|
||||
</a-descriptions>
|
||||
<div
|
||||
style="display: flex; justify-content: right; margin-top: 10px"
|
||||
v-if="isKeepSupervision"
|
||||
>
|
||||
<a-button type="primary" @click="funMoveInIllegalSubejct">转入违法用地</a-button>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
|
@ -462,8 +468,8 @@
|
|||
<script setup lang="ts">
|
||||
import { defineProps, ref, computed, onBeforeMount, watch } from 'vue';
|
||||
import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
|
||||
import { getConfig } from '@/api/sys/layerManagement';
|
||||
import { getGeom } from '@/api/sys/layerManagement';
|
||||
import { getConfig, getGeom } from '@/api/sys/layerManagement';
|
||||
import { MoveInIllegalSubejct } from '@/api/demo/system';
|
||||
import { getLoadCaseImgList } from '@/api/tiankongdi';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import axios from 'axios';
|
||||
|
|
@ -725,6 +731,20 @@
|
|||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 是否是持续监察
|
||||
const isKeepSupervision = window.location.href.includes('/tiankongdi/keepSupervision');
|
||||
// 转入违法用地
|
||||
const funMoveInIllegalSubejct = async () => {
|
||||
let querys = {
|
||||
caseId: props.showInfoData.id,
|
||||
};
|
||||
await MoveInIllegalSubejct(querys).then((res) => {
|
||||
if (res) {
|
||||
createMessage.success('转移成功！');
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,446 @@
|
|||
<template>
|
||||
<PageWrapper dense contentFullHeight fixedHeight>
|
||||
<div class="search-box">
|
||||
<BasicForm
|
||||
@register="registerForm"
|
||||
:labelWidth="100"
|
||||
:schemas="searchFormSchema"
|
||||
:actionColOptions="{ span: 24 }"
|
||||
>
|
||||
<template #dangqianzhuangtai>
|
||||
<a-select
|
||||
allowClear
|
||||
showArrow
|
||||
mode="multiple"
|
||||
v-model:value="nowStatus"
|
||||
:options="nowStatusOptions"
|
||||
:max-tag-count="1"
|
||||
placeholder="请选择"
|
||||
@change="changeStatus"
|
||||
/>
|
||||
</template>
|
||||
<template #tubanmianji>
|
||||
<div class="scope-box">
|
||||
<a-input v-model:value="areaParams.tubanArea1" placeholder="请输入" />
|
||||
-
|
||||
<a-input v-model:value="areaParams.tubanArea2" placeholder="请输入" />
|
||||
</div>
|
||||
</template>
|
||||
<template #gengdimianji>
|
||||
<div class="scope-box">
|
||||
<a-input v-model:value="areaParams.gengdiArea1" placeholder="请输入" />
|
||||
-
|
||||
<a-input v-model:value="areaParams.gengdiArea2" placeholder="请输入" />
|
||||
</div>
|
||||
</template>
|
||||
<template #jibennongtianmianji>
|
||||
<div class="scope-box">
|
||||
<a-input v-model:value="areaParams.jibenArea1" placeholder="请输入" />
|
||||
-
|
||||
<a-input v-model:value="areaParams.jibenArea2" placeholder="请输入" />
|
||||
</div>
|
||||
</template>
|
||||
</BasicForm>
|
||||
</div>
|
||||
<div class="table-box">
|
||||
<BasicTable @register="registerTable" :searchInfo="searchInfo" @change="handleChange">
|
||||
<template #toolbar>
|
||||
<PermissionBtn @btn-event="onBtnClicked" />
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="['area', 'gengdiarea', 'nongyongdiarea'].includes(column.key)">
|
||||
{{ dataProcessingCount(record[column.key]) }}
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
// icon: 'ant-design:ellipsis-outlined',
|
||||
label: '查看',
|
||||
onClick: viewAccount.bind(null, record),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
<a-modal v-model:open="open" title="导出文件类型" :footer="null">
|
||||
<div>
|
||||
<a-button class="exportbutton" @click="handleExport('excel')">
|
||||
持续监管列表统计报表（execl）
|
||||
</a-button>
|
||||
<a-button class="exportbutton" @click="handleExport('shp')">
|
||||
持续监管列表矢量数据（shp）
|
||||
</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
<a-modal
|
||||
style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="showInfoOpen"
|
||||
title="详情"
|
||||
:footer="null"
|
||||
:maskClosable="true"
|
||||
:destroyOnClose="true"
|
||||
@cancel="showInfoOpen = false"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<div class="handoff">
|
||||
<a-button type="primary" style="margin-right: 25px" @click="prevData">上一条</a-button>
|
||||
<a-button type="primary" @click="nextData">下一条</a-button>
|
||||
</div>
|
||||
<ShowInfoModal :showInfoData="showInfoData" />
|
||||
</div>
|
||||
</a-modal>
|
||||
<a-modal
|
||||
style="width: 50vw; margin: 0px; padding: 0px"
|
||||
wrap-class-name="full-modal"
|
||||
:centered="true"
|
||||
:mask="false"
|
||||
:maskClosable="false"
|
||||
:keyboard="false"
|
||||
v-model:open="uploadOpen"
|
||||
title="上传图片"
|
||||
:footer="null"
|
||||
@cancel="uploadOpen = false"
|
||||
>
|
||||
<UploadModal />
|
||||
</a-modal>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { LoadCaseInfoCxjgTuBanList, loadCaseInfoTuBanList } from '@/api/demo/system';
|
||||
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
||||
import { columns, searchFormSchema } from './keepSupervision.data';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import axios from 'axios';
|
||||
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
|
||||
import UploadModal from './uploadModal.vue';
|
||||
import { getCaseInfoById } from '@/api/tiankongdi/index';
|
||||
|
||||
import { dataProcessingCount } from '@/views/demo/tiankongdi/util';
|
||||
import { BasicForm, useForm } from '@/components/Form';
|
||||
import { PageWrapper } from '@/components/Page';
|
||||
import dayjs from 'dayjs';
|
||||
import { nowStatusOptions } from '@/utils/global';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
|
||||
defineOptions({ name: 'RoleManagement' });
|
||||
const nextShowDataId = ref();
|
||||
const prevShowDataId = ref();
|
||||
const showInfoId = ref();
|
||||
const searchInfo = reactive<Recordable>({
|
||||
countyid: null,
|
||||
});
|
||||
const showInfoData = ref();
|
||||
const showInfoOpen = ref(false);
|
||||
const searchParams = ref({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
});
|
||||
const nowStatus = ref(undefined);
|
||||
const areaParams = ref({
|
||||
tubanArea1: null,
|
||||
tubanArea2: null,
|
||||
gengdiArea1: null,
|
||||
gengdiArea2: null,
|
||||
jibenArea1: null,
|
||||
jibenArea2: null,
|
||||
nowStatus: undefined,
|
||||
});
|
||||
const tableData = ref([]);
|
||||
const tablePaginationRight = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
size: 'small',
|
||||
defaultPageSize: 10,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '50', '80', '100'],
|
||||
showQuickJumper: true,
|
||||
total: 0,
|
||||
});
|
||||
const [registerForm, { validate, getFieldsValue }] = useForm({
|
||||
schemas: searchFormSchema,
|
||||
labelWidth: 100,
|
||||
baseColProps: { span: 6 },
|
||||
actionColOptions: { span: 24 },
|
||||
autoSubmitOnEnter: true,
|
||||
submitFunc: handleSubmit,
|
||||
resetFunc: handleReset,
|
||||
autoSubmitOnEnter: handleSubmit,
|
||||
});
|
||||
const [registerTable, { setTableData, reload, clearSelectedRowKeys, setPagination, setLoading }] =
|
||||
useTable({
|
||||
title: '图斑列表',
|
||||
dataSource: tableData.value,
|
||||
columns,
|
||||
rowKey: 'id',
|
||||
useSearchForm: false,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
// 搜索
|
||||
handleSearchInfoFn(info) {
|
||||
searchParams.value = info;
|
||||
return info;
|
||||
},
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
// slots: { customRender: 'action' },
|
||||
fixed: 'right',
|
||||
},
|
||||
pagination: tablePaginationRight.value,
|
||||
});
|
||||
|
||||
// 直接下载接口返回的二进制流
|
||||
function handleExport(exportType) {
|
||||
console.log(searchParams);
|
||||
let params = { ...searchParams.value };
|
||||
let url = '';
|
||||
let fileName = '';
|
||||
if (exportType == 'excel') {
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportCaseInfoTuBanList';
|
||||
fileName = '图斑列表统计报表' + new Date().getTime() + '.xls';
|
||||
} else if (exportType == 'shp') {
|
||||
url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportCaseInfoShapefile';
|
||||
fileName = '图斑列表矢量数据' + new Date().getTime() + '.zip';
|
||||
}
|
||||
axios({
|
||||
method: 'post',
|
||||
url: url,
|
||||
params: params,
|
||||
headers: {
|
||||
'X-Token': localStorage.getItem('X-Token'),
|
||||
},
|
||||
responseType: 'blob',
|
||||
}).then((res) => {
|
||||
const elink = document.createElement('a');
|
||||
elink.download = fileName;
|
||||
elink.style.display = 'none';
|
||||
elink.href = URL.createObjectURL(res.data);
|
||||
document.body.appendChild(elink);
|
||||
elink.click();
|
||||
URL.revokeObjectURL(elink.href);
|
||||
document.body.removeChild(elink);
|
||||
});
|
||||
}
|
||||
|
||||
const open = ref<boolean>(false);
|
||||
function onBtnClicked(domId) {
|
||||
switch (domId) {
|
||||
case 'btnUpload':
|
||||
uploadOpen.value = true;
|
||||
break;
|
||||
case 'btnExport':
|
||||
open.value = true;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
function viewAccount(record) {
|
||||
showInfoId.value = record.Id;
|
||||
getDetailData();
|
||||
}
|
||||
function getDetailData() {
|
||||
getCaseInfoById({ id: showInfoId.value }).then((res) => {
|
||||
showInfoData.value = res;
|
||||
showInfoOpen.value = true;
|
||||
});
|
||||
}
|
||||
function handleChange(data) {
|
||||
searchParams.value.page = data.current;
|
||||
searchParams.value.limit = data.pageSize;
|
||||
tablePaginationRight.value = data;
|
||||
const querys = Object.assign(searchParams.value, areaParams.value);
|
||||
getTableData(querys);
|
||||
}
|
||||
function changeStatus(val) {
|
||||
areaParams.value.nowStatus = val.join(',');
|
||||
}
|
||||
function handleSubmit() {
|
||||
searchParams.value = getFieldsValue();
|
||||
searchParams.value.page = 1;
|
||||
tablePaginationRight.value.current = 1;
|
||||
searchParams.value.limit = tablePaginationRight.value.pageSize;
|
||||
const querys = Object.assign(searchParams.value, areaParams.value);
|
||||
getTableData(querys);
|
||||
}
|
||||
async function getTableData(querys) {
|
||||
if (querys.startTime && querys.endTime) {
|
||||
querys.startTime = dayjs(querys.startTime).format('YYYY-MM-DD');
|
||||
querys.endTime = dayjs(querys.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss');
|
||||
}
|
||||
if (querys.tubanlaiyuan) {
|
||||
querys.tubanlaiyuan = querys.tubanlaiyuan.join(',');
|
||||
}
|
||||
setLoading(true);
|
||||
// await loadCaseInfoTuBanList(querys).then((res) => {
|
||||
await LoadCaseInfoCxjgTuBanList(querys).then((res) => {
|
||||
tableData.value = res.items;
|
||||
tablePaginationRight.value.total = res.total;
|
||||
setTableData(tableData.value);
|
||||
setPagination(tablePaginationRight.value);
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
function handleReset() {
|
||||
searchParams.value = {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
};
|
||||
areaParams.value = {
|
||||
tubanArea1: null,
|
||||
tubanArea2: null,
|
||||
gengdiArea1: null,
|
||||
gengdiArea2: null,
|
||||
jibenArea1: null,
|
||||
jibenArea2: null,
|
||||
nowStatus: undefined,
|
||||
};
|
||||
nowStatus.value = undefined;
|
||||
tablePaginationRight.value.current = 1;
|
||||
getTableData(searchParams.value);
|
||||
}
|
||||
onMounted(() => {
|
||||
getTableData(searchParams.value);
|
||||
});
|
||||
watch(
|
||||
() => showInfoId.value,
|
||||
() => {
|
||||
let index = tableData.value.findIndex((item) => item.Id == showInfoId.value);
|
||||
getDetailData();
|
||||
if (index < tableData.value.length - 1) {
|
||||
nextShowDataId.value = tableData.value[index + 1].Id;
|
||||
} else {
|
||||
nextShowDataId.value = 0;
|
||||
}
|
||||
if (index > 0) {
|
||||
prevShowDataId.value = tableData.value[index - 1].Id;
|
||||
} else {
|
||||
prevShowDataId.value = 0;
|
||||
}
|
||||
},
|
||||
);
|
||||
async function prevData() {
|
||||
if (prevShowDataId.value === 0) {
|
||||
if (searchParams.value.page === 1) {
|
||||
message.warning('已经是第一条数据了');
|
||||
return;
|
||||
}
|
||||
searchParams.value.page--;
|
||||
tablePaginationRight.value.current--;
|
||||
await getTableData(searchParams.value);
|
||||
setTimeout(() => {
|
||||
showInfoId.value = tableData.value[tableData.value.length - 1].Id;
|
||||
}, 10);
|
||||
return;
|
||||
} else {
|
||||
showInfoId.value = prevShowDataId.value;
|
||||
}
|
||||
}
|
||||
async function nextData() {
|
||||
if (nextShowDataId.value === 0) {
|
||||
if (
|
||||
Math.ceil(tablePaginationRight.value.total / searchParams.value.limit) <=
|
||||
searchParams.value.page
|
||||
) {
|
||||
message.warning('已经是最后一条数据了');
|
||||
return;
|
||||
}
|
||||
searchParams.value.page++;
|
||||
tablePaginationRight.value.current++;
|
||||
await getTableData(searchParams.value);
|
||||
setTimeout(() => {
|
||||
showInfoId.value = tableData.value[0].Id;
|
||||
}, 10);
|
||||
} else {
|
||||
showInfoId.value = nextShowDataId.value;
|
||||
}
|
||||
}
|
||||
// 上传
|
||||
const uploadOpen = ref(false);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.data-preview-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 0px);
|
||||
position: absolute;
|
||||
padding: 30px 10px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: #fff;
|
||||
}
|
||||
.data-preview-container-option {
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0px;
|
||||
}
|
||||
.data-preview-container-option div {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
min-width: 100vw;
|
||||
top: 0px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.ant-modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-modal-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.exportbutton {
|
||||
width: 510px;
|
||||
height: 60px;
|
||||
margin: 5px;
|
||||
}
|
||||
.search-box {
|
||||
background: @component-background;
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
::v-deep .ant-col-24 {
|
||||
display: inline-block;
|
||||
max-width: fit-content;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.table-box {
|
||||
margin: 16px;
|
||||
}
|
||||
.scope-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.ant-input {
|
||||
width: 48% !important;
|
||||
max-width: 48%;
|
||||
min-width: 48%;
|
||||
}
|
||||
}
|
||||
::v-deep .ant-select-selection-overflow-item:first-child .ant-select-selection-item {
|
||||
width: 80px;
|
||||
}
|
||||
.handoff {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 25px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,305 @@
|
|||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { getChildrenTree } from '@/api/demo/system';
|
||||
import { getLoad } from '@/api/sys/sysDataItemDetail';
|
||||
import {
|
||||
patchSourceOptions,
|
||||
yearOptions,
|
||||
markTypeOptions,
|
||||
nowStatusOptions,
|
||||
mapTypeOptions,
|
||||
} from '@/utils/global';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '图斑来源',
|
||||
dataIndex: 'tubanlaiyuan',
|
||||
},
|
||||
{
|
||||
title: '区县',
|
||||
dataIndex: 'countyname',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '乡镇',
|
||||
dataIndex: 'streetname',
|
||||
},
|
||||
{
|
||||
title: '社区/村',
|
||||
dataIndex: 'communityname',
|
||||
},
|
||||
{
|
||||
title: '图斑编号',
|
||||
dataIndex: 'caseno',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '图斑类型',
|
||||
dataIndex: 'typename',
|
||||
},
|
||||
{
|
||||
title: '图斑面积',
|
||||
dataIndex: 'area',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '农用地面积',
|
||||
dataIndex: 'nongyongdiarea',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '耕地面积',
|
||||
dataIndex: 'gengdiarea',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '永农面积',
|
||||
dataIndex: 'yongjiujibennongtianarea',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '当前状态',
|
||||
dataIndex: 'handlestatusname',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '判定结果',
|
||||
dataIndex: 'isillegal',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '下发时间',
|
||||
dataIndex: 'identificationtime',
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'xiangmumc',
|
||||
},
|
||||
{
|
||||
title: '项目主体',
|
||||
dataIndex: 'xiangmuzhuti',
|
||||
},
|
||||
{
|
||||
title: '实际用途',
|
||||
dataIndex: 'actualuseto',
|
||||
},
|
||||
{
|
||||
title: '违法类型',
|
||||
dataIndex: 'weifaleixing',
|
||||
},
|
||||
{
|
||||
title: '整改措施',
|
||||
dataIndex: 'measurename',
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'year',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
label: '年份',
|
||||
componentProps: {
|
||||
options: yearOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'tubanlaiyuan',
|
||||
label: '图斑来源',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: getLoad,
|
||||
params: { code: 'wfydtbly' },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'itemName',
|
||||
valueField: 'itemValue',
|
||||
mode: 'multiple',
|
||||
maxTagCount: 1
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'picihao',
|
||||
label: '批次',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [],
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
field: 'typename',
|
||||
label: '图斑类型',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '农用地', value: '农用地' },
|
||||
{ label: '建设用地', value: '建设用地' },
|
||||
{ label: '推堆土', value: '推堆土' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'isBuildName',
|
||||
label: '标注类型',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: markTypeOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'countyid',
|
||||
label: '区县',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ tableAction, formModel }) => {
|
||||
return {
|
||||
api: getChildrenTree,
|
||||
params: { parentId: 371300 },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
onChange: () => {
|
||||
formModel.streetid = '';
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'streetid',
|
||||
label: '乡镇',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: formModel.countyid && getChildrenTree,
|
||||
params: { parentId: formModel.countyid },
|
||||
// 接口参数
|
||||
resultField: 'result',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'nowStatus',
|
||||
label: '当前状态',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: nowStatusOptions,
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
slot: 'dangqianzhuangtai',
|
||||
},
|
||||
{
|
||||
field: 'isIllegal',
|
||||
label: '判定结果',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: mapTypeOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'weifaleixing',
|
||||
label: '违法类型',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '非农化违法用地', value: '0' },
|
||||
{ label: '非粮化违法用地', value: '1' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'measureName',
|
||||
label: '整改措施',
|
||||
component: 'Select',
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '拆除复耕', value: '0' },
|
||||
{ label: '补办手续', value: '1' },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
// 增加图斑面积、耕地面积、永农面积的筛选项；
|
||||
{
|
||||
field: 'tubanmianji',
|
||||
label: '图斑面积',
|
||||
colProps: { span: 4 },
|
||||
slot: 'tubanmianji',
|
||||
},
|
||||
{
|
||||
field: 'gengdimianji',
|
||||
label: '耕地面积',
|
||||
colProps: { span: 4 },
|
||||
slot: 'gengdimianji',
|
||||
},
|
||||
{
|
||||
field: 'jibennongtianmianji',
|
||||
label: '永农面积',
|
||||
colProps: { span: 4 },
|
||||
slot: 'jibennongtianmianji',
|
||||
},
|
||||
{
|
||||
field: 'originalcaseno',
|
||||
label: '标识号',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
field: '[startTime, endTime]',
|
||||
label: '下发时间',
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 5 },
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'caseNo',
|
||||
label: '图斑编号',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export const uploadColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '大小',
|
||||
dataIndex: 'size',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '进度',
|
||||
dataIndex: 'percent',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '路径/失败原因',
|
||||
dataIndex: 'url',
|
||||
width: 280,
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="upload">
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
list-type="picture-card"
|
||||
multiple
|
||||
:showUploadList="false"
|
||||
:custom-request="customRequest"
|
||||
>
|
||||
<div>
|
||||
<PlusOutlined />
|
||||
<div style="margin-top: 8px">上传图片</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="table">
|
||||
状态筛选：
|
||||
<a-select
|
||||
v-model:value="selectStatus"
|
||||
mode="multiple"
|
||||
style="width: 90%; margin-top: 5px; margin-bottom: 5px"
|
||||
allowClear
|
||||
:options="[
|
||||
{
|
||||
value: 'uploading',
|
||||
label: '上传中',
|
||||
},
|
||||
{
|
||||
value: 'done',
|
||||
label: '上传成功',
|
||||
},
|
||||
{
|
||||
value: 'error',
|
||||
label: '上传失败',
|
||||
},
|
||||
{
|
||||
value: 'updateSuccess',
|
||||
label: '插入成功',
|
||||
},
|
||||
{
|
||||
value: 'updateError',
|
||||
label: '插入失败',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<a-table
|
||||
:columns="uploadColumns"
|
||||
:data-source="filterData"
|
||||
:pagination="false"
|
||||
bordered
|
||||
:scroll="{ y: 600 }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'size'">
|
||||
{{ parseFloat(record.size / 1024 / 1024).toFixed(2) }} MB
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'percent'">
|
||||
<a-progress
|
||||
v-if="record.status == 'error'"
|
||||
:percent="record.percent"
|
||||
status="exception"
|
||||
/>
|
||||
<a-progress
|
||||
v-if="['done', 'updateSuccess', 'updateError'].includes(record.status)"
|
||||
:percent="record.percent"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'status'">
|
||||
<a-tag color="processing" v-if="record.status == 'uploading'">上传中</a-tag>
|
||||
<a-tag color="success" v-if="record.status == 'done'">上传成功</a-tag>
|
||||
<a-tag color="error" v-if="record.status == 'error'">上传失败</a-tag>
|
||||
<a-tag color="green" v-if="record.status == 'updateSuccess'">插入成功</a-tag>
|
||||
<a-tag color="red" v-if="record.status == 'updateError'">插入失败</a-tag>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'url' || column.dataIndex === 'message'">
|
||||
{{ record.url || record.message }}
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="update">
|
||||
<a-button type="primary" @click="startUploadCXJGData">
|
||||
将上传成功的图片插入到数据库
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, ref, watch, onMounted, defineEmits, computed } from 'vue';
|
||||
import { PlusOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
import axios from 'axios';
|
||||
import { UpdateCxjgData, CheckCxjgPic } from '@/api/demo/system';
|
||||
import { uploadColumns } from './keepSupervision.data';
|
||||
|
||||
const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
|
||||
|
||||
// 上传列表
|
||||
const fileList: any = ref();
|
||||
const selectStatus = ref([]);
|
||||
const filterData = computed(() => {
|
||||
if (fileList.value && selectStatus.value.length > 0) {
|
||||
return fileList.value.filter((item) => selectStatus.value.includes(item.status));
|
||||
} else {
|
||||
return fileList.value;
|
||||
}
|
||||
});
|
||||
|
||||
// 上传
|
||||
const customRequest = (file) => {
|
||||
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) => {
|
||||
const index = fileList.value.findIndex((item) => item.uid === file.file.uid);
|
||||
// 上传成功
|
||||
if (res.data.code == '200') {
|
||||
let data = res.data.result;
|
||||
fileList.value[index] = {
|
||||
...fileList.value[index],
|
||||
percent: 100,
|
||||
status: 'done',
|
||||
url: data[0].filePath,
|
||||
};
|
||||
} else {
|
||||
// 上传失败
|
||||
fileList.value[index] = {
|
||||
...fileList.value[index],
|
||||
percent: 0,
|
||||
status: 'error',
|
||||
url: '',
|
||||
message: res.data.message,
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 持续监管-图片插入启动
|
||||
async function startUploadCXJGData() {
|
||||
const list = fileList.value;
|
||||
if (!list || list.length === 0) return;
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const item = list[i];
|
||||
if (item.status === 'done' || item.status === 'updateError') {
|
||||
// 等待上传完成并返回 true 后，再继续下一个循环
|
||||
await UpdateUploadCXJGData(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 持续监管-图片插入
|
||||
async function UpdateUploadCXJGData(value) {
|
||||
let caseid = value.name.split('.').slice(0, -1).join('.');
|
||||
if (caseid.includes('_')) {
|
||||
caseid = caseid.split('_').slice(0, 1).join('_');
|
||||
}
|
||||
const index = fileList.value.findIndex((item) => item.uid === value.uid);
|
||||
if (index === -1) return false; // 如果找不到对应文件项，直接返回
|
||||
let querys = {
|
||||
caseid: caseid,
|
||||
path: value.url,
|
||||
};
|
||||
try {
|
||||
const res1 = await UpdateCxjgData(querys);
|
||||
if (res1) {
|
||||
// 图片上传成功，开始审核
|
||||
const res2 = await CheckCxjgPic({ id: caseid });
|
||||
if (res2) {
|
||||
// 审核通过
|
||||
fileList.value[index] = {
|
||||
...fileList.value[index],
|
||||
status: 'updateSuccess',
|
||||
};
|
||||
return true;
|
||||
} else {
|
||||
// 审核失败
|
||||
fileList.value[index] = {
|
||||
...fileList.value[index],
|
||||
status: 'updateError',
|
||||
};
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
// 上传失败
|
||||
fileList.value[index] = {
|
||||
...fileList.value[index],
|
||||
status: 'updateError',
|
||||
};
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传或审核出错:', error);
|
||||
fileList.value[index] = {
|
||||
...fileList.value[index],
|
||||
status: 'updateError',
|
||||
};
|
||||
return false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.upload {
|
||||
width: 100%;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.table {
|
||||
// width: 95%;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.update {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
::v-deep .ant-select-selection-item {
|
||||
width: 85px !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue