案件审核汇总核验页面开发接口对接

xjl
zzq 2024-04-25 17:13:16 +08:00
parent d46c63777a
commit 4478b93089
11 changed files with 1107 additions and 129 deletions

View File

@ -5,25 +5,48 @@ import {
TabDataItem,
CaseCollectionItem,
GetBaseItem,
CaseCollectionDelItem,
GetBaseIdItem,
GetBaseUidItem,
GetCaseDealItem,
CaseBackItem,
} from './model/index';
enum Api {
GETORG_List = '/api/Orgs/OrgList', //组织机构字典
GETTABLEDATA_LIST = '/api/DroneCaseinfo/LoadWaitToVerifyCaseList', //表格列表数据
ADDCASE_COLLECTION = '/api/DroneCaseinfo/AddCaseFavorite', //收藏案件
ADDCASE_COLLECTION = '/api/DroneCaseinfo/AddCaseFavorite', //添加收藏案件
DELCASE_COLLECTION = '/api/DroneCaseinfo/DeleteFavoriteCases', //移除收藏
GETCOLLECTION_LIST = '/api/DroneCaseinfo/LoadFavoriteCases', //收藏列表
GETUSERINFO = '/api/DroneCaseinfo/GetCurrentUser', //获取当前用户信息
GETCASE_DETAIL = '/api/DroneCaseinfo/GetCaseInfo', //获取案件详情
GETCASELIST = '/api/DroneCaseinfo/FavoriteCaseList', //全部收藏案件数据
GETCASEDEAL = '/api/DroneCaseinfo/GetDroneCaseDeal', //审核详情
CASE_AUDITING = '/api/DroneCaseinfo/VerfiyCaseData', //案件通过审核
CASE_BACK = '/api/DroneCaseinfo/DrawbackCase', //案件退回
}
/**
* @description: Get sample options value
*/
export const getUserOrg = (params?: OrgItemList) =>
defHttp.get<DemoOptionsItem[]>({ url: Api.GETORG_List, params });
export const getUserInfoData = (params?: OrgItemList) =>
defHttp.get<DemoOptionsItem[]>({ url: Api.GETUSERINFO, params });
export const getTableDataList = (params?: TabDataItem) =>
defHttp.get<DemoOptionsItem[]>({ url: Api.GETTABLEDATA_LIST, params });
export const addCaseCollection = (params?: CaseCollectionItem) =>
defHttp.post<DemoOptionsItem[]>({ url: Api.ADDCASE_COLLECTION, params });
export const delCaseCollection = (params?: CaseCollectionItem) =>
export const delCaseCollection = (params?: CaseCollectionDelItem) =>
defHttp.post<DemoOptionsItem[]>({ url: Api.DELCASE_COLLECTION, params });
export const getCollectionCaseList = (params?: GetBaseItem) =>
defHttp.get<DemoOptionsItem[]>({ url: Api.GETCOLLECTION_LIST, params });
export const getCaseDataDetail = (params?: GetBaseIdItem) =>
defHttp.get<DemoOptionsItem[]>({ url: Api.GETCASE_DETAIL, params });
export const getCaseList = (params?: GetBaseUidItem) =>
defHttp.get<DemoOptionsItem[]>({ url: Api.GETCASELIST, params });
export const getCaseDealDetail = (params?: GetCaseDealItem) =>
defHttp.get<DemoOptionsItem[]>({ url: Api.GETCASEDEAL, params });
export const caseAudiSteps = (params?: GetBaseIdItem) =>
defHttp.get<DemoOptionsItem[]>({ url: Api.CASE_AUDITING, params });
export const caseBackSteps = (params?: CaseBackItem) =>
defHttp.get<DemoOptionsItem[]>({ url: Api.CASE_BACK, params });

View File

@ -1,8 +1,29 @@
import { BasicFetchResult } from '@/api/model/baseModel';
export interface BasicFetchResult<T> {
moduleIds?: any;
formScheme?: any;
elementIds?: any;
items: T[];
total: number;
user: any;
pics: any;
video_list: any;
is_illegal: any;
info: any;
pic_info_list: any;
after_pic_list: any;
evidence_file_list: any;
punish_pic_list: any;
payment_pic_list: any;
agree_checkout_pic_list: any;
checkout_pic_list: any;
boundary_pic_list: any;
}
export interface DemoOptionsItem {
items: any;
total: any;
user: any;
pics: any;
}
export interface OrgItemList {
@ -26,16 +47,28 @@ export interface TabDataItem {
is_illegal: any;
}
export interface CaseCollectionItem {
id: any;
caseNo: any;
favoriteUserId: any;
}
export interface CaseCollectionDelItem {}
export interface GetBaseItem {
page: any;
limit: any;
key: any;
}
export interface GetBaseIdItem {
id: any;
}
export interface GetBaseUidItem {
uid: any;
}
export interface GetCaseDealItem {
caseid: any;
}
export interface CaseBackItem {
id: any;
drawbackReason: any;
}
/**
* @description: Request list return value
*/

View File

@ -0,0 +1,17 @@
import { defHttp } from '@/utils/http/axios';
import { DemoOptionsItem, OrgItemList, CaseCollectionDelItem, CaseBackItem } from './model/index';
enum Api {
GETORG_List = '/api/DroneCaseinfo/LoadCaseInfoList', //表格列表
PASS_VERIFICAT = '/api/DroneCaseinfo/VerificatCase', //核验
BACK_VERIFICAT = '/api/DroneCaseinfo/DrawbackCase', //退回
}
/**
* @description: Get sample options value
*/
export const getTableListData = (params?: OrgItemList) =>
defHttp.get<DemoOptionsItem[]>({ url: Api.GETORG_List, params });
export const passVerificatCase = (params?: CaseCollectionDelItem) =>
defHttp.post<DemoOptionsItem[]>({ url: Api.PASS_VERIFICAT, params });
export const backVerificcatCase = (params?: CaseBackItem) =>
defHttp.get<DemoOptionsItem[]>({ url: Api.BACK_VERIFICAT, params });

View File

@ -0,0 +1,73 @@
export interface BasicFetchResult<T> {
moduleIds?: any;
formScheme?: any;
elementIds?: any;
items: T[];
total: number;
user: any;
pics: any;
video_list: any;
is_illegal: any;
info: any;
pic_info_list: any;
after_pic_list: any;
evidence_file_list: any;
punish_pic_list: any;
payment_pic_list: any;
agree_checkout_pic_list: any;
checkout_pic_list: any;
boundary_pic_list: any;
}
export interface DemoOptionsItem {
items: any;
total: any;
user: any;
pics: any;
}
export interface OrgItemList {}
export interface TabDataItem {
is_intact: any;
page: any;
limit: any;
key: any;
appId: any;
reportTime: any;
violationStatus: any;
handle_status_id: any;
identification_user: any;
countyid: any;
streetid: any;
communityid: any;
case_no: any;
is_illegal: any;
}
export interface CaseCollectionItem {
caseNo: any;
favoriteUserId: any;
}
export interface CaseCollectionDelItem {}
export interface GetBaseItem {
page: any;
limit: any;
key: any;
}
export interface GetBaseIdItem {
id: any;
}
export interface GetBaseUidItem {
uid: any;
}
export interface GetCaseDealItem {
caseid: any;
}
export interface CaseBackItem {
id: any;
drawbackReason: any;
}
/**
* @description: Request list return value
*/
export type DemoOptionsGetResultModel = BasicFetchResult<DemoOptionsItem>;

View File

@ -17,7 +17,7 @@ const dashboard: AppRouteModule = {
{
path: '/dashboard/analysis',
name: 'Analysis',
component: () => import('@/views/demo/caseauditing/index.vue'),
component: () => import('@/views/dashboard/analysis/index.vue'),
meta: {
// affix: true,
title: t('routes.dashboard.analysis'),

View File

@ -18,14 +18,41 @@
</a-radio-group>
</a-form-item>
<a-form-item label="现场照片:">
<div v-for="(item, num) in imageList" :key="num">
<a-image :width="85" :src="item.s_filePath" />
<div
v-for="(item, num) in imageList"
:key="num"
style="
position: relative;
width: 125px;
height: 112px;
overflow: hidden;
float: left;
background: #f9f9f9;
margin-left: 6px;
margin-bottom: 6px;
"
>
<a-image :width="125" :src="item.s_filePath" />
</div>
</a-form-item>
<a-form-item label="现场视频:">
<a-input v-model:value="caseHandlingData.username" />
<div
style="margin-top: 10px; width: 240px; height: 150px"
v-for="(item, index) in videoList"
:key="index"
>
<video width="100%" height="100%" controls>
<source :src="item" type="video/mp4" />
您的浏览器不支持Video标签
</video>
</div>
<a-empty v-show="videoList.length <= 0">
<template #description>
<span>暂无视频</span>
</template>
</a-empty>
</a-form-item>
<a-form-item label="处理措施: " v-if="illegal == 1">
<a-form-item label="处理措施: " v-if="illegal == '1'">
<a-select
v-model:value="caseHandlingData.measure_name"
placeholder="请选择处理措施"
@ -33,7 +60,7 @@
/>
</a-form-item>
<a-col :span="24" v-if="illegal == 0">
<a-col :span="24" v-if="illegal == '0'">
<a-form-item label="项目名称: ">
<a-input v-model:value="caseHandlingData.result_name" />
</a-form-item>
@ -64,13 +91,13 @@
<a-input v-model:value="caseHandlingData.evidence_file_indate" />
</a-form-item>
<a-form-item label="合法批准文件: " v-if="illegal == 0">
<a-form-item label="合法批准文件: " v-if="illegal == '0'">
<div
v-for="(item, num) in evidenceFileList"
:key="num"
style="
position: relative;
width: 85px;
width: 125px;
height: 112px;
overflow: hidden;
float: left;
@ -79,7 +106,7 @@
margin-bottom: 6px;
"
>
<a-image :width="85" :src="item.s_filePath" />
<a-image :width="125" :src="item.s_filePath" />
</div>
<a-empty v-if="evidenceFileList.length <= 0">
<template #description>
@ -88,13 +115,13 @@
</a-empty>
</a-form-item>
<a-form-item label="勘测定界图: " v-if="illegal == 0">
<a-form-item label="勘测定界图: " v-if="illegal == '0'">
<div
v-for="(item, num) in boundaryImageList"
:key="num"
style="
position: relative;
width: 85px;
width: 125px;
height: 112px;
overflow: hidden;
float: left;
@ -103,7 +130,7 @@
margin-bottom: 6px;
"
>
<a-image :width="85" :src="item.s_filePath" />
<a-image :width="125" :src="item.s_filePath" />
</div>
<a-empty v-if="boundaryImageList.length <= 0">
<template #description>
@ -114,15 +141,15 @@
<a-form-item label="是否超范围: ">
<a-radio-group v-model:value="caseHandlingData.is_out_boundary">
<a-radio :label="1"></a-radio>
<a-radio :label="0"></a-radio>
<a-radio :value="1"></a-radio>
<a-radio :value="0"></a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="是否超层: ">
<a-radio-group v-model:value="caseHandlingData.is_over_floor">
<a-radio :label="1"></a-radio>
<a-radio :label="0"></a-radio>
<a-radio :value="1"></a-radio>
<a-radio :value="0"></a-radio>
</a-radio-group>
</a-form-item>
@ -134,7 +161,7 @@
</a-form-item>
</a-col>
<a-col :span="24" v-if="illegal == 1 && caseHandlingData.measure_name == '拟拆除'">
<a-col :span="24" v-if="illegal == '1' && caseHandlingData.measure_name == '拟拆除'">
<a-form-item label="实际用途: ">
<a-input v-model:value="caseHandlingData.actual_use_to" />
</a-form-item>
@ -146,8 +173,8 @@
</a-form-item>
<a-form-item label="建设情况: ">
<a-radio-group v-model:value="caseHandlingData.is_build_complete">
<a-radio :label="1">已建成</a-radio>
<a-radio :label="0">建设中</a-radio>
<a-radio :value="1">已建成</a-radio>
<a-radio :value="0">建设中</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="建筑结构: ">
@ -160,7 +187,7 @@
:key="num"
style="
position: relative;
width: 85px;
width: 125px;
height: 112px;
overflow: hidden;
float: left;
@ -169,7 +196,7 @@
margin-bottom: 6px;
"
>
<a-image :width="85" :src="item.s_filePath" />
<a-image :width="125" :src="item.s_filePath" />
</div>
<a-empty v-if="afterImageList.length <= 0">
<template #description>
@ -185,7 +212,7 @@
</a-form-item>
</a-col>
<a-col :span="24" v-if="illegal == 1 && caseHandlingData.measure_name == '查处'">
<a-col :span="24" v-if="illegal == '1' && caseHandlingData.measure_name == '查处'">
<a-form-item label="实际用途: ">
<a-input v-model:value="caseHandlingData.actual_use_to" />
</a-form-item>
@ -200,8 +227,8 @@
</a-form-item>
<a-form-item label="违法类型: ">
<a-radio-group v-model:value="caseHandlingData.illegal_type">
<a-radio label="违法建筑类">违法建筑类</a-radio>
<a-radio label="非法采矿类">非法采矿类</a-radio>
<a-radio value="违法建筑类">违法建筑类</a-radio>
<a-radio value="非法采矿类">非法采矿类</a-radio>
</a-radio-group>
</a-form-item>
<a-divider orientation="left">案件办理信息-查处</a-divider>
@ -222,7 +249,7 @@
:key="num"
style="
position: relative;
width: 85px;
width: 125px;
height: 112px;
overflow: hidden;
float: left;
@ -231,7 +258,7 @@
margin-bottom: 6px;
"
>
<a-image :width="85" :src="item.s_filePath" />
<a-image :width="125" :src="item.s_filePath" />
</div>
<a-empty v-if="punishImageList.length <= 0">
<template #description>
@ -245,7 +272,7 @@
:key="num"
style="
position: relative;
width: 85px;
width: 125px;
height: 112px;
overflow: hidden;
float: left;
@ -254,7 +281,7 @@
margin-bottom: 6px;
"
>
<a-image :width="85" :src="item.s_filePath" />
<a-image :width="125" :src="item.s_filePath" />
</div>
<a-empty v-if="paymentImagesList.length <= 0">
<template #description>
@ -271,7 +298,7 @@
</a-form-item>
</a-col>
<a-col :span="24" v-if="illegal == 1 && caseHandlingData.measure_name == '拟完善手续'">
<a-col :span="24" v-if="illegal == '1' && caseHandlingData.measure_name == '拟完善手续'">
<a-form-item label="实际用途: ">
<a-input v-model:value="caseHandlingData.actual_use_to" />
</a-form-item>
@ -286,8 +313,8 @@
</a-form-item>
<a-form-item label="完善手续条件: ">
<a-radio-group v-model:value="caseHandlingData.is_have_checkout_condition">
<a-radio :label="1"></a-radio>
<a-radio :label="0"></a-radio>
<a-radio :value="1"></a-radio>
<a-radio :value="0"></a-radio>
</a-radio-group>
</a-form-item>
<a-divider orientation="left">案件办理信息-完善手续</a-divider>
@ -298,7 +325,7 @@
:key="num"
style="
position: relative;
width: 85px;
width: 125px;
height: 112px;
overflow: hidden;
float: left;
@ -307,7 +334,7 @@
margin-bottom: 6px;
"
>
<a-image :width="85" :src="item.s_filePath" />
<a-image :width="125" :src="item.s_filePath" />
</div>
<a-empty v-if="agreeImageList.length <= 0">
<template #description>
@ -321,7 +348,7 @@
:key="num"
style="
position: relative;
width: 85px;
width: 125px;
height: 112px;
overflow: hidden;
float: left;
@ -330,7 +357,7 @@
margin-bottom: 6px;
"
>
<a-image :width="85" :src="item.s_filePath" />
<a-image :width="124" :src="item.s_filePath" />
</div>
<a-empty v-if="checkoutImageList.length <= 0">
<template #description>
@ -344,7 +371,7 @@
:key="num"
style="
position: relative;
width: 85px;
width: 125px;
height: 112px;
overflow: hidden;
float: left;
@ -353,7 +380,7 @@
margin-bottom: 6px;
"
>
<a-image :width="85" :src="item.s_filePath" />
<a-image :width="125" :src="item.s_filePath" />
</div>
<a-empty v-if="boundaryImageList.length <= 0">
<template #description>
@ -372,7 +399,7 @@
</a-form-item>
</a-col>
<a-col :span="24" v-if="illegal == 2">
<a-col :span="24" v-if="illegal == '2'">
<a-form-item label="伪变化原因: ">
<a-input v-model:value="caseHandlingData.pseudo_change_reason" />
</a-form-item>
@ -385,14 +412,14 @@
<a-form-item label="是否有建筑物: ">
<!-- <a-input v-model:value="caseHandlingData.is_have_build" /> -->
<a-radio-group v-model:value="caseHandlingData.is_have_build">
<a-radio :label="1"></a-radio>
<a-radio :label="0"></a-radio>
<a-radio :value="1"></a-radio>
<a-radio :value="0"></a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="是否永久性建筑: " v-if="caseHandlingData.is_have_build == 1">
<a-radio-group v-model:value="caseHandlingData.is_forever_build">
<a-radio :label="1"></a-radio>
<a-radio :label="0"></a-radio>
<a-radio :value="1"></a-radio>
<a-radio :value="0"></a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="办理人: ">
@ -406,8 +433,24 @@
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { onMounted, ref, defineProps, watch } from 'vue';
import { getUserInfoData, getCaseDealDetail } from '@/api/caseauditing/index';
const caseId: any = ref();
const props = defineProps({
id: {
default: null,
type: String,
},
});
watch(
() => props.id,
(newValue) => {
caseId.value = newValue;
getCaseHandlingDetail();
},
{ immediate: true, deep: true },
);
const caseHandlingData: any = ref({
id: '',
measure_name: '',
@ -419,7 +462,7 @@
illegal_contact_phone: null, //
actual_scene_case: null, //
});
const illegal: any = ref('0');
const illegal: any = ref();
const dealMeasuresList: any = ref([]);
const evidenceFileList: any = ref([]);
const boundaryImageList: any = ref([]);
@ -429,4 +472,81 @@
const agreeImageList: any = ref([]);
const checkoutImageList: any = ref([]);
const imageList: any = ref([]);
const videoList: any = ref([]);
function getUserInfo() {
getUserInfoData().then((res) => {
caseHandlingData.value.createusername = res.user.Name;
});
}
function getCaseHandlingDetail() {
getCaseDealDetail({ caseid: caseId.value }).then((res) => {
illegal.value = JSON.stringify(res.is_illegal);
caseHandlingData.value = res.info;
imageList.value = [];
if (res.pic_info_list.length > 0) {
res.pic_info_list.forEach((item) => {
item.s_filePath = 'http://60.213.14.14:6070/' + '/S_' + item.filePath;
item.filePath = 'http://60.213.14.14:6070/' + '/' + item.filePath;
imageList.value.push(item);
});
}
afterImageList.value = [];
if (res.after_pic_list.length > 0) {
res.after_pic_list.forEach((item) => {
item.s_filePath = 'http://60.213.14.14:6070/' + '/S_' + item.filePath;
item.filePath = 'http://60.213.14.14:6070/' + '/' + item.filePath;
afterImageList.value.push(item);
});
}
//
evidenceFileList.value = [];
if (res.evidence_file_list.length > 0) {
res.evidence_file_list.forEach((item) => {
item.s_filePath = 'http://60.213.14.14:6070/' + '/S_' + item.filePath;
item.filePath = 'http://60.213.14.14:6070/' + '/' + item.filePath;
evidenceFileList.value.push(item);
});
}
//
if (res.punish_pic_list.length > 0) {
punishImageList.value = handleImageArray(res.punish_pic_list);
}
//
if (res.payment_pic_list.length > 0) {
paymentImagesList.value = handleImageArray(res.payment_pic_list);
}
//
if (res.agree_checkout_pic_list.length > 0) {
agreeImageList.value = handleImageArray(res.agree_checkout_pic_list);
}
//
if (res.checkout_pic_list.length > 0) {
checkoutImageList.value = handleImageArray(res.checkout_pic_list);
}
//
if (res.boundary_pic_list.length > 0) {
boundaryImageList.value = handleImageArray(res.boundary_pic_list);
}
if (res.video_list) {
res.video_list.forEach((item) => {
videoList.value.push('http://60.213.14.14:6070/' + item);
});
}
});
}
function handleImageArray(imageArr) {
let returnArray: any = ref([]);
imageArr.forEach((item) => {
let obj = {
s_filePath: 'http://60.213.14.14:6070/' + '/S_' + item,
filePath: 'http://60.213.14.14:6070/' + '/' + item,
};
returnArray.value.push(obj);
});
return returnArray.value;
}
onMounted(() => {
getUserInfo();
});
</script>

View File

@ -33,14 +33,14 @@ export const columns: BasicColumn[] = [
customRender: ({ record }) => {
const status = record.is_illegal;
if (status == 1) {
const text = '合法';
return text;
} else if (status == 2) {
const text = '违法';
return text;
} else {
} else if (status == 2) {
const text = '伪变化';
return text;
} else {
const text = '合法';
return text;
}
},
},
@ -66,7 +66,7 @@ export const formSchema: FormSchema[] = [
dynamicDisabled: true,
},
{
field: 'countyname',
field: 'homeAddress',
label: '案件地址:',
component: 'Input',
dynamicDisabled: true,
@ -90,7 +90,7 @@ export const formSchema: FormSchema[] = [
dynamicDisabled: true,
},
{
field: 'lng',
field: 'lngLat',
label: '经纬度:',
component: 'Input',
dynamicDisabled: true,
@ -106,13 +106,13 @@ export const formSchema: FormSchema[] = [
slot: 'videoSlot',
},
{
field: 'name',
field: 'identification_user',
label: '上报人:',
component: 'Input',
dynamicDisabled: true,
},
{
field: 'name',
field: 'identification_time',
label: '上报时间:',
component: 'Input',
dynamicDisabled: true,

View File

@ -8,32 +8,50 @@
</a-button>
</div>
<div class="flex">
<a-select
ref="select"
<a-tree-select
v-if="selectOptions1.length > 0"
v-model:value="selectValues1"
:options="selectOptions1"
style="width: 200px"
class="ml-3"
show-search
style="width: 230px"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="查询地区"
allow-clear
:tree-data="selectOptions1"
:field-names="{
children: 'children',
value: 'id',
label: 'name',
}"
tree-node-filter-prop="name"
@change="areaChange"
/>
<a-select
ref="select"
v-model:value="selectValues2"
v-model:value="is_illegal"
style="width: 150px"
class="ml-3"
allowClear
:options="selectOptions2"
placeholder="现场状况"
@change="reload1"
/>
<a-select
ref="select"
v-model:value="selectValues3"
v-model:value="is_drawback"
:options="selectOptions3"
style="width: 150px"
class="ml-3"
allowClear
placeholder="新增退回"
@change="reload1"
/>
<a-input style="width: 150px" class="ml-3" v-model:value="value" placeholder="请输入" />
<a-button class="ml-3" :icon="h(SearchOutlined)">搜索</a-button>
<a-input
style="width: 150px"
class="ml-3"
v-model:value="searchKey"
placeholder="请输入"
/>
<a-button class="ml-3" :icon="h(SearchOutlined)" @click="reload1"></a-button>
<a-button type="success" class="ml-3" :icon="h(DownloadOutlined)">导出</a-button>
</div>
</div>
@ -47,10 +65,9 @@
:actions="[
{
label: '收藏',
type: 'link',
color: 'warning',
onClick: () => {
handleEdit(record);
handleCollention(record);
},
},
{
@ -84,7 +101,7 @@
type: 'link',
color: 'warning',
onClick: () => {
handleEdit(record);
handleRemoveCollention(record);
},
},
{
@ -119,15 +136,15 @@
/></div>
</div>
<div :class="`${prefixCls}-content-tabbox-right-content`">
<BasicForm ref="formRef" @register="registerForm" v-if="tabsActiveIndex == 0">
<template #imgSlot="{ model, field }">
<BasicForm ref="formRef" @register="registerForm" v-show="tabsActiveIndex == 0">
<template #imgSlot>
<div
v-for="(item, num) in fileList"
:key="num"
style="
position: relative;
width: 85px;
height: 112px;
width: 125px;
height: 90px;
overflow: hidden;
float: left;
background: #f9f9f9;
@ -135,26 +152,44 @@
margin-bottom: 6px;
"
>
<a-image :width="85" :src="item.url" />
<a-image :width="125" :src="item.url" />
</div>
<a-empty v-if="fileList.length <= 0">
<a-empty v-show="fileList.length <= 0">
<template #description>
<span>暂无图片</span>
</template>
</a-empty>
</template>
<template #videoSlot="{ model, field }"></template>
<template #videoSlot>
<div
style="margin-top: 10px; width: 240px; height: 150px"
v-for="(item, index) in videoList"
:key="index"
>
<video width="100%" height="100%" controls>
<source :src="item" type="video/mp4" />
您的浏览器不支持Video标签
</video>
</div>
<a-empty v-show="videoList.length <= 0">
<template #description>
<span>暂无视频</span>
</template>
</a-empty>
</template>
</BasicForm>
<HandleCase v-if="tabsActiveIndex == 1" />
<HandleCase :id="selectRowDetail.id" v-show="tabsActiveIndex == 1" />
</div>
<div :class="`${prefixCls}-content-tabbox-right-footer`">
<a-input class="ml-3" v-model:value="value" placeholder="案件退回原因" />
<a-button type="error" class="ml-3"> 退回 </a-button>
<a-button type="primary" class="ml-3"> 通过 </a-button>
<a-input class="ml-3" v-model:value="caseBackReason" placeholder="案件退回原因" />
<a-button type="error" class="ml-3" @click="handleCaseBack"> 退 </a-button>
<a-button type="primary" class="ml-3" @click="handlePassForm"> </a-button>
</div>
</div>
</div>
<div :class="`${prefixCls}-content-mapbox`"></div>
<div :class="`${prefixCls}-content-mapbox`">
<MapDetail :ruleForm="selectRowDetail"></MapDetail>
</div>
</div>
</div>
</PageWrapper>
@ -166,7 +201,6 @@
StarOutlined,
DownloadOutlined,
CloseOutlined,
PlusOutlined,
} from '@ant-design/icons-vue';
import HandleCase from '@/views/demo/caseauditing/HandleCase.vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
@ -174,73 +208,49 @@
import { PageWrapper } from '@/components/Page';
import {
getTableDataList,
getUserOrg,
addCaseCollection,
delCaseCollection,
getCollectionCaseList,
getUserInfoData,
getCaseDataDetail,
getCaseList,
caseAudiSteps,
caseBackSteps,
} from '@/api/caseauditing/index';
import { getDeptList } from '@/api/demo/system';
import { columns, formSchema } from './index.data';
// import { useMessage } from '@/hooks/web/useMessage';
import { useMessage } from '@/hooks/web/useMessage';
import MapDetail from '@/views/demo/summaryverification/mapDetail.vue';
// const { createConfirm, createMessage } = useMessage();
const { createMessage } = useMessage();
const favoriteNum: any = ref();
const tabsActiveIndex: any = ref('0');
const tabsArr: any = ref(['案件信息', '核查办理']);
const auditingVisible: any = ref(true);
const auditingVisible: any = ref(false);
const collenctionVisible: any = ref(false);
const collenctionList: any = ref([]);
const selectRowDetail: any = ref({});
const caseBackReason: any = ref();
const selectValues1: any = ref();
const selectOptions1: any = ref([]);
// const playerOptions: any = ref([]);
const selectValues2: any = ref();
const videoList: any = ref([]);
const searchKey: any = ref();
const countyid: any = ref();
const streetid: any = ref();
const communityid: any = ref();
const is_illegal: any = ref();
const selectOptions2: any = ref([
{ label: '合法', value: 0 },
{ label: '违法', value: 1 },
{ label: '伪变化', value: 2 },
]);
const selectValues3: any = ref();
const is_drawback: any = ref();
const selectOptions3: any = ref([
{ label: '新增', value: 0 },
{ label: '退回', value: 1 },
]);
const fileList = ref([
{
uid: '-1',
name: 'image.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
{
uid: '-2',
name: 'image.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
]);
const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');
function getBase64(file: File) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
const handleCancel = () => {
previewVisible.value = false;
previewTitle.value = '';
};
const handlePreview = async (file: UploadProps['fileList'][number]) => {
if (!file.url && !file.preview) {
file.preview = (await getBase64(file.originFileObj)) as string;
}
previewImage.value = file.url || file.preview;
previewVisible.value = true;
previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
};
const fileList: any = ref([]);
const [registerTable, { reload: reload1 }] = useTable({
title: '',
@ -261,6 +271,19 @@
title: '操作',
dataIndex: 'action',
},
beforeFetch: (data) => {
let temp = {
page: data.page,
limit: data.limit,
is_illegal: is_illegal.value,
is_drawback: is_drawback.value,
countyid: countyid.value,
streetid: streetid.value,
communityid: communityid.value,
key: searchKey.value,
};
return temp;
},
handleSearchInfoFn(info) {
return info;
},
@ -295,10 +318,109 @@
showActionButtonGroup: false,
baseColProps: { lg: 24, md: 24 },
});
function areaChange(items) {
countyid.value = null;
streetid.value = null;
communityid.value = null;
if (items && JSON.stringify(items).length == 6) {
countyid.value = items;
}
if (items && JSON.stringify(items).length == 9) {
streetid.value = items;
}
if (items && JSON.stringify(items).length == 12) {
communityid.value = items;
}
reload1();
}
function handlePassForm() {
const param = {
id: selectRowDetail.value.id,
};
caseAudiSteps(param).then((res) => {
if (res) {
createMessage.success('审核成功');
reload1();
reload2();
}
});
}
function handleCaseBack() {
if (!caseBackReason.value) {
createMessage.error('退回原因不能为空');
return;
}
const param = {
id: selectRowDetail.value.id,
drawbackReason: caseBackReason.value,
};
caseBackSteps(param).then((res) => {
if (res) {
createMessage.success('操作成功');
} else {
createMessage.error('此案件未办理,无需退回。');
}
});
}
function handleAuditing(record) {
const formData = record;
caseBackReason.value = null;
formData.homeAddress =
record.countyname + record.streetname + record.communityname + record.address;
formData.lngLat = record.lng + ' , ' + record.lat;
selectRowDetail.value = formData;
auditingVisible.value = true;
setFieldsValue(record);
setTimeout(() => {
setFieldsValue(formData);
}, 100);
const param = {
id: record.id,
};
getCaseDataDetail(param).then((res) => {
fileList.value = [];
videoList.value = [];
if (res.pics) {
res.pics.forEach((item) => {
fileList.value.push({
url: 'http://60.213.14.14:6070/' + item.path,
id: item.id,
});
});
}
if (res.video_list) {
res.video_list.forEach((item) => {
videoList.value.push('http://60.213.14.14:6070/' + item);
});
}
});
}
function handleCollention(row) {
getUserInfoData().then((res) => {
let param = {
caseNo: row.case_no,
favoriteUserId: res.user.Id,
};
addCaseCollection(param).then((rel) => {
if (rel) {
createMessage.success('收藏成功');
getCollentionLength();
}
});
});
}
function handleRemoveCollention(row) {
const arr = collenctionList.value.filter((item) => {
return item.caseNo == row.case_no;
});
let param = [arr[0].id];
delCaseCollection(param).then((res) => {
if (res) {
createMessage.success('已从收藏夹中移除');
getCollentionLength();
reload2();
}
});
}
function openCollenction() {
collenctionVisible.value = true;
@ -315,12 +437,29 @@
}
function getCollentionLength() {
getCollectionCaseList().then((res) => {
console.log('ree', res);
favoriteNum.value = res.total;
});
}
function getOrgList() {
getDeptList().then((res) => {
res.forEach((item) => {
if (item.id == '371300') {
selectOptions1.value = item.children;
}
});
});
}
function getCaseCollList() {
getUserInfoData().then((res) => {
getCaseList({ uid: res.user.Id }).then((rel) => {
collenctionList.value = rel;
});
});
}
onMounted(() => {
getCollentionLength();
getCaseCollList();
getOrgList();
});
const prefixCls = 'form-box';
</script>
@ -358,6 +497,7 @@
&-collenction {
display: flex;
flex-direction: column;
height: 100%;
&-header {
padding: 0 10px;

View File

@ -0,0 +1,36 @@
import { BasicColumn } from '@/components/Table';
export const columns: BasicColumn[] = [
{
title: '案件编号',
dataIndex: 'case_no',
},
{
title: '上报时间',
dataIndex: 'createtime',
},
{
title: '地点',
dataIndex: 'address',
customRender: ({ record }) => {
const text = record.countyname + record.streetname + record.communityname;
return text;
},
},
{
title: '案件描述',
dataIndex: 'case_description',
},
{
title: '占用耕地面积',
dataIndex: 'area',
},
{
title: '处理时间',
dataIndex: 'deal_time',
},
{
title: '案件处理人',
dataIndex: 'deal_username',
},
];

View File

@ -0,0 +1,330 @@
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<div :class="`${prefixCls}`">
<div :class="`${prefixCls}-header`">
<div></div>
<div class="flex">
<a-tree-select
v-if="selectOptions1.length > 0"
v-model:value="selectValues1"
show-search
style="width: 230px"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="查询地区"
allow-clear
:tree-data="selectOptions1"
:field-names="{
children: 'children',
value: 'id',
label: 'name',
}"
tree-node-filter-prop="name"
@change="areaChange"
/>
<a-select
ref="select"
v-model:value="is_illegal"
style="width: 150px"
class="ml-3"
allowClear
:options="selectOptions2"
placeholder="现场状况"
@change="reload1"
/>
<a-select
ref="select"
v-model:value="is_drawback"
:options="selectOptions3"
style="width: 150px"
class="ml-3"
allowClear
placeholder="新增退回"
@change="reload1"
/>
<a-input
style="width: 150px"
class="ml-3"
v-model:value="searchCaseNo"
placeholder="案件编号"
/>
<a-input
style="width: 150px"
class="ml-3"
v-model:value="searchKey"
placeholder="请输入"
/>
<a-button class="ml-3" :icon="h(SearchOutlined)" @click="reload1"></a-button>
<a-button type="success" class="ml-3" :icon="h(DownloadOutlined)">导出</a-button>
</div>
</div>
<div :class="`${prefixCls}-content`">
<div :class="`${prefixCls}-content-tabbox`">
<div :class="`${prefixCls}-content-tabbox-left`">
<BasicTable @register="registerTable" v-if="!caseDetailVisible">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '核验',
onClick: () => {
handleAuditing(record);
},
},
]"
/>
</template>
</template>
</BasicTable>
<div :class="`${prefixCls}-content-tabbox-left-collenction`" v-if="caseDetailVisible">
<div :class="`${prefixCls}-content-tabbox-left-collenction-header`">
<div>案件详情</div>
<div
:class="`${prefixCls}-content-tabbox-left-collenction-header-close`"
@click="closeCaseDetail"
><CloseOutlined
/></div>
</div>
<div :class="`${prefixCls}-content-tabbox-left-collenction-box`">
<CaseView :caseId="selectRowDetail.id" :mapShow="false"></CaseView>
</div>
<div :class="`${prefixCls}-content-tabbox-left-collenction-footer`">
<a-input
size="mini"
class="ml-3"
v-model:value="caseBackReason"
placeholder="退回原因"
/>
<a-button type="error" class="ml-3" @click="handleCaseBack"> 退 </a-button>
<a-button type="primary" class="ml-3" @click="handlePassForm"> </a-button>
</div>
</div>
</div>
</div>
<div :class="`${prefixCls}-content-mapbox`">
<MapDetail :ruleForm="selectRowDetail"></MapDetail>
</div>
</div>
</div>
</PageWrapper>
</template>
<script lang="ts" setup>
import { onMounted, ref, h } from 'vue';
import { SearchOutlined, DownloadOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import {
getTableListData,
passVerificatCase,
backVerificcatCase,
} from '@/api/summaryverification/index';
import { getDeptList } from '@/api/demo/system';
import { columns } from './index.data';
import { useMessage } from '@/hooks/web/useMessage';
import { CaseView } from '@/views/demo/monitor/index';
import MapDetail from './mapDetail.vue';
const { createMessage } = useMessage();
const caseBackReason: any = ref();
const caseDetailVisible: any = ref(false);
const selectRowDetail: any = ref({});
const selectValues1: any = ref();
const selectOptions1: any = ref([]);
const searchKey: any = ref();
const searchCaseNo: any = ref();
const countyid: any = ref();
const streetid: any = ref();
const communityid: any = ref();
const is_illegal: any = ref();
const selectOptions2: any = ref([
{ label: '合法', value: 0 },
{ label: '违法', value: 1 },
{ label: '伪变化', value: 2 },
]);
const is_drawback: any = ref();
const selectOptions3: any = ref([
{ label: '新增', value: 0 },
{ label: '退回', value: 1 },
]);
const [registerTable, { reload: reload1 }] = useTable({
title: '',
api: getTableListData,
columns,
rowKey: 'id',
formConfig: {
labelWidth: 120,
},
// rowSelection: {
// type: 'checkbox',
// },
useSearchForm: false,
showTableSetting: false,
bordered: true,
actionColumn: {
width: 100,
title: '操作',
dataIndex: 'action',
},
beforeFetch: (data) => {
let temp = {
page: data.page,
limit: data.limit,
is_illegal: is_illegal.value,
is_drawback: is_drawback.value,
countyid: countyid.value,
streetid: streetid.value,
communityid: communityid.value,
case_no: searchCaseNo.value,
key: searchKey.value,
};
return temp;
},
handleSearchInfoFn(info) {
return info;
},
});
function closeCaseDetail() {
caseDetailVisible.value = false;
}
function handleCaseBack() {
if (!caseBackReason.value) {
createMessage.error('退回原因不能为空');
return;
}
const param = {
id: selectRowDetail.value.id,
drawbackReason: caseBackReason.value,
};
backVerificcatCase(param).then((res) => {
if (res) {
createMessage.success('操作成功');
reload1();
caseDetailVisible.value = false;
} else {
createMessage.error('此案件未办理,无需退回。');
}
});
}
function handlePassForm() {
passVerificatCase([selectRowDetail.value.id]).then((res) => {
if (res) {
caseDetailVisible.value = false;
createMessage.success('操作成功');
} else {
createMessage.error('操作失败');
}
});
}
function areaChange(items) {
countyid.value = null;
streetid.value = null;
communityid.value = null;
if (items && JSON.stringify(items).length == 6) {
countyid.value = items;
}
if (items && JSON.stringify(items).length == 9) {
streetid.value = items;
}
if (items && JSON.stringify(items).length == 12) {
communityid.value = items;
}
reload1();
}
function handleAuditing(record) {
console.log('record', record);
const formData = record;
formData.homeAddress =
record.countyname + record.streetname + record.communityname + record.address;
formData.lngLat = record.lng + ' , ' + record.lat;
selectRowDetail.value = record;
caseDetailVisible.value = true;
}
function getOrgList() {
getDeptList().then((res) => {
res.forEach((item) => {
if (item.id == '371300') {
selectOptions1.value = item.children;
}
});
});
}
onMounted(() => {
getOrgList();
});
const prefixCls = 'form-box';
</script>
<style lang="less" scoped>
.form-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
&-header {
width: 100%;
padding: 0 10px;
height: 60px;
background: #f8f8f8;
display: flex;
justify-content: space-between;
align-items: center;
}
&-content {
width: 100%;
height: calc(100% - 60px);
display: flex;
&-tabbox {
width: 70%;
display: flex;
justify-content: space-between;
&-left {
flex: 1;
border: 1px solid #eee;
&-collenction {
display: flex;
flex-direction: column;
height: 100%;
&-box {
height: calc(100% - 110px);
overflow: auto;
}
&-footer {
height: 60px;
background: #fff;
display: flex;
align-items: center;
}
&-header {
padding: 0 10px;
height: 50px;
overflow: auto;
border-bottom: 1px solid #eee;
display: flex;
background: #fff;
align-items: center;
justify-content: space-between;
&-close {
cursor: pointer;
}
}
}
}
}
&-mapbox {
width: calc(30% - 20px);
margin: 0 15px 15px 15px;
border: 1px solid red;
}
}
}
</style>

View File

@ -0,0 +1,206 @@
<template>
<div class="w-full">
<MapboxMaps :mapOptions="mapOptions" @map-on-load="mapOnLoad" />
</div>
</template>
<script lang="ts" setup>
import rodeImg from '@/assets/images/icon_fly2.png';
import { ref, watch } from 'vue';
import MapboxMaps from '@/components/MapboxMaps/index.vue';
import { getDroneGeoJson } from '@/api/monitor/index';
const detailMap = ref();
const props = defineProps({
ruleForm: {
type: Object,
default: () => {
return {};
},
},
});
const geojson = ref();
const droneMarker = ref();
const mapBox = ref();
const mapOptions = {
center: [117.84714891969796, 35.22152309532066],
zoom: 10,
};
watch(
() => props.ruleForm,
(newVal, oldVal) => {
loadCaseGeoJson();
detailMap.value.flyTo({
center: [newVal.lng, newVal.lat], //
zoom: 18, //
pitch: 0, //
});
loadDroneMarker(newVal.lng, newVal.lat);
},
);
const mapOnLoad = (map) => {
mapBox.value = map;
//
const testSource =
'http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/TEST_WORK_SPACE%3Alindi@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
map.U.addVector('name', testSource);
map.U.addLineLayer('ffff', {
source: 'name',
'source-layer': 'lindi',
});
detailMap.value = map;
loadImageLayer();
loadStreetBorderLayer();
if (props.ruleForm && props.ruleForm.id) {
loadCaseGeoJson();
}
};
//
function loadImageLayer() {
detailMap.value.addLayer({
id: 'wms-test-layer',
type: 'raster',
source: {
type: 'raster',
tiles: [
'http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
],
tileSize: 256,
},
paint: {},
});
}
//
function loadStreetBorderLayer() {
detailMap.value.addLayer({
id: 'street-border',
type: 'raster',
source: {
type: 'raster',
tiles: [
'http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:zhenjie&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
],
tileSize: 256,
},
paint: {},
layout: {
visibility: 'visible',
},
});
detailMap.value.resize();
}
// GeoJSON
async function loadCaseGeoJson() {
const data = await getDroneGeoJson({ id: props.ruleForm.id });
console.log(data);
geojson.value = data;
if (geojson.value.features.length == 0) {
detailMap.value.addLayer({
id: 'points',
type: 'symbol',
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [props.ruleForm.lng, props.ruleForm.lng],
},
properties: {
title: 'Mapbox DC',
icon: 'monument',
},
},
],
},
},
layout: {},
});
}
// There is already a source with ID "geojsonfill"
if (detailMap.value.getLayer('geojsonfill')) {
detailMap.value.removeLayer('geojsonfill');
detailMap.value.removeSource('geojsonfill');
}
if (detailMap.value.getLayer('geojsonline')) {
detailMap.value.removeLayer('geojsonline');
detailMap.value.removeSource('geojsonline');
}
detailMap.value.addLayer({
id: 'geojsonfill',
type: 'fill',
source: {
type: 'geojson',
data: geojson.value,
},
paint: {
'fill-color': '#FE9003',
'fill-opacity': 0.2,
'fill-outline-color': '#FE9003',
},
});
detailMap.value.addLayer({
id: 'geojsonline',
type: 'line',
source: {
type: 'geojson',
data: geojson.value,
},
layout: {
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': '#FE9003',
'line-width': 4,
},
});
}
//
function loadDroneMarker(lng, lat) {
if (detailMap.value.getLayer('cat-on-building')) {
detailMap.value.removeLayer('cat-on-building');
detailMap.value.removeSource('cat-on-building');
detailMap.value.removeImage('cat');
}
detailMap.value.loadImage(rodeImg, (error, image) => {
detailMap.value.addImage('cat', image);
detailMap.value.addLayer({
id: 'cat-on-building',
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [lng, lat],
},
},
],
},
},
slot: 'top',
type: 'symbol',
layout: {
'icon-image': 'cat',
'icon-size': 0.05,
'symbol-placement': 'point',
'symbol-z-elevate': true,
},
});
});
}
</script>
<style scoped lang="less">
.w-full {
width: 100%;
height: 100%;
}
</style>