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

bigscreen

dianlixunjian
Zhufu 2024-06-22 13:31:38 +08:00
parent ad6bb186e0 2022b43ab1
commit 7a8a142862
32 changed files with 3503 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.env.development
View File

@ -7,9 +7,19 @@ VITE_PUBLIC_PATH = /
# Basic interface address SPA
#VITE_GLOB_API_URL=/basic-api
#财源
<<<<<<< HEAD
# VITE_GLOB_API_URL= http://192.168.10.102:9023
#基础框架
VITE_GLOB_API_URL=http://192.168.10.102:9023
=======
VITE_GLOB_API_URL= http://192.168.10.102:9023
# VITE_GLOB_API_URL = http://192.168.10.131:8989
#基础框架
# VITE_GLOB_API_URL=http://123.132.248.154:9104
>>>>>>> 2022b43ab147f3fe325d37e6481392e73479796c
# File upload address， optional
# It can be forwarded by nginx or write the actual address directly
VITE_GLOB_UPLOAD_URL=http://60.213.14.14:6070

1
package.json
View File

@ -105,6 +105,7 @@
"mapbox-extensions":"^1.3.38",
"terraformer-wkt-parser": "^1.2.1",
"@terraformer/wkt":"2.1.2",
"vue3-print-nb":"0.1.4",
"ceel-json-editor":"^0.0.3",
"@originjs/vite-plugin-commonjs":"^1.0.3",
"mars3d": "^3.7.0",

3
src/api/demo/system.ts
View File

@ -67,7 +67,8 @@ enum Api {
UpdateNotice = '/api/DroneCaseinfo/UpdateMessage',
DeleteNotice = '/api/DroneCaseinfo/UpdateDelMessage',
UserList = '/api/users/load',
StatisticalList='/api/DroneCaseinfo/CaseSynthesisCensus',
// StatisticalList='/api/DroneCaseinfo/CaseSynthesisCensus',
StatisticalList = "/api/DroneCaseinfo/CaseSynthesisCensusSingle",
LoadNoticeDetail="/api/DroneCaseinfo/LoadMessage",
getChildrenTree = '/api/Orgs/LoadChildren',
GetUserRoles = '/api/Roles/UserRoles',

109
src/api/monitor/index.ts Normal file
View File

@ -0,0 +1,109 @@
// WFProcess 流程模版基本信息
import { defHttp } from '@/utils/http/axios';
import {
caseFlowLogParams,
flowLogModel,
droneCaseDealModel,
droneCaseDealParams,
picListTaskParams,
caseInfoParams,
caseInfoModel,
} from './model/index';
enum Api {
// 获取案件详情步骤条
GetCaseFlowLog = '/api/DroneCaseinfo/GetCaseFlowLog',
// 获取案件处理详情
GetDroneCaseDeal = '/api/DroneCaseinfo/GetDroneCaseDeal',
// 获取案件详情
GetCaseInfo = '/api/DroneCaseinfo/GetCaseInfo',
// 案件列表
// LoadCaseInfoList = '/api/DroneCaseinfo/LoadCaseInfoList',
LoadCaseInfoList = '/api/DroneCaseInfoSingle/LoadCaseInfoList',
// 导出案件
ExportCaseInfo = "/api/DroneCaseInfoSingle/DroneCaseInfoExport",
// 案件统计列表
// 获取GeoJson图层
GetDroneGeoJson = '/api/DroneCaseinfo/GetDroneGeoJson',
// 上报案件（案件判读保存）
AddDroneCaseInfo = '/api/DroneCaseinfo/AddDroneCaseInfo',
// 案件判读
UpdateDroneCaseInfoIntact = '/api/DroneCaseinfo/UpdateDroneCaseInfoIntact',
// 关闭案件
CloseDroneCaseInfo = '/api/DroneCaseinfo/CloseDroneCaseInfo',
// 上传图片任务列表
PicListTask = '/api/DroneShpImageexif/ListTask',
// 图片上传，创建任务
PicAddTask = '/api/DroneShpImageexif/AddTask',
// 图片上传
AddImageexif = '/api/DroneShpImageexif/AddImageexif',
}
/**
* @description: getCaseFlowLog
*/
export function getCaseFlowLog(params?: caseFlowLogParams) {
return defHttp.get<flowLogModel>({ url: Api.GetCaseFlowLog, params });
}
/**
* @description: getCaseFlowLog
*/
export function getDroneCaseDeal(params?: droneCaseDealParams) {
return defHttp.get<droneCaseDealModel>({ url: Api.GetDroneCaseDeal, params });
}
/**
* @description: getCaseFlowLog
*/
export function getCaseInfo(params?: caseFlowLogParams) {
return defHttp.get<flowLogModel>({ url: Api.GetCaseInfo, params });
}
/**
* @description: getCaseFlowLog
*/
export function getCaseInfoList(params?: caseInfoParams) {
return defHttp.get<caseInfoModel>({ url: Api.LoadCaseInfoList, params });
}
export function exportCaseInfo(params:string){
return defHttp.get<string>({ url: Api.ExportCaseInfo, params });
}
/**
* @description: getCaseFlowLog
*/
export function getDroneGeoJson(params?: caseFlowLogParams) {
return defHttp.get<flowLogModel>({ url: Api.GetDroneGeoJson, params });
}
export function addDroneCaseInfo(params) {
return defHttp.post({
url: Api.AddDroneCaseInfo,
params,
});
}
export function updateDroneCaseInfoIntact(params) {
return defHttp.post({
url: Api.UpdateDroneCaseInfoIntact,
params,
});
}
export function closeDroneCaseInfo(params?: caseFlowLogParams) {
return defHttp.get<flowLogModel>({ url: Api.CloseDroneCaseInfo, params });
}
export function getPicListTask(params?: picListTaskParams) {
return defHttp.get<flowLogModel>({ url: Api.PicListTask, params });
}
export function addPicTask(params) {
return defHttp.post({
url: Api.PicAddTask,
params,
});
}
export function addImageexif(params) {
return defHttp.post({
url: Api.AddImageexif,
params,
});
}

63
src/api/monitor/model/index.ts Normal file
View File

@ -0,0 +1,63 @@
export interface caseFlowLogParams {
id?: string;
}
export interface droneCaseDealParams {
caseid?: string;
id?: string;
}
export interface flowLog {
name: string;
time: string;
user_name: string;
status: number;
state?: string;
}
export type flowLogModel = flowLog[];
export interface fileList {
filePath?: string | undefined;
s_filePath?: string;
}
export type fileListModel = fileList[];
export type droneCaseDealModel = {
video_list?: any;
pic_info_list?: any;
after_pic_list?: any;
remove_video_list?: any;
evidence_file_list?: any;
boundary_pic_list?: any;
punish_pic_list?: any;
payment_pic_list?: any;
agree_checkout_pic_list?: any;
checkout_pic_list?: any;
};
export interface picListTaskParams {
beginDate?: string;
endDate?: string;
}
export interface caseInfoParams {
page?: number;
limit?: number;
is_intact?: number;
handle_status_id?: string;
identification_user?: string;
identification_time?: string;
key?: string;
orgId?: string;
}
export type caseInfoModel = {
items: any[];
total: number;
};
// export interface caseInfo {
// id:string;
// caseName:string;
// caseDescription:string
// }
// export type caseInfoModel = caseInfo[];

190
src/components/MapboxMaps/InsertShp/index.vue
View File

@ -92,11 +92,7 @@
<a-input v-model:value="uploadFrom.tableName" placeholder="请输入表名" />
</a-col>
<a-col :span="4">
<!-- <a-tooltip title="从现有数据表中选择">
<a-button type="primary" :icon="h(PlusOutlined)" @click="handlerGetExistsTableList"/>
</a-tooltip> -->
<a-button type="" :icon="h(PlusOutlined)" @click="handlerGetExistsTableList()" />
</a-col>
</a-row>
</a-form-item>
@ -165,70 +161,114 @@
</div>
</a-tab-pane>
<a-tab-pane :key="2" tab="数据库表创建">
<div class="upload-form-by-database">
<a-row :gutter="50">
<a-col :span="10">
<div class="layer-icon">
<BlockOutlined />
</div>
</a-col>
<a-col :span="2">
</a-col>
<a-col :span="10">
<div class="upload-form-by-database">
<a-form
ref="formRef"
:model="uploadFrom"
:label-col="{ style: { width: '75px' } }"
labelAlign="right"
:rules="uploadFormRules"
>
<a-form-item label="服务名称" name="name">
<a-input v-model:value="uploadFrom.name" placeholder="请输入服务名称" />
</a-form-item>
<a-form-item label="服务描述" name="description">
<a-input v-model:value="uploadFrom.description" placeholder="请输入服务名称" />
</a-form-item>
<!-- 显示条件：文件类型为shp 或者 类型为Excel时有图斑数据 -->
<a-form-item label="空间参考" name="srid" >
<a-select v-model:value="uploadFrom.srid" placeholder="请选择空间参考">
<a-select-option value="EPSG:4326">EPSG:4326</a-select-option>
<a-select-option value="3857">EPSG:3857</a-select-option>
<a-select-option value="900913">EPSG:900913</a-select-option>
</a-select>
</a-form-item>
<!-- 显示条件：文件类型为Excel有图斑时 -->
<a-form-item label="数据类型" name="vectorType" >
<a-select v-model:value="uploadFrom.vectorType" placeholder="请选择数据类型">
<a-select-option value="point">点</a-select-option>
<a-select-option value="linestring">线</a-select-option>
<a-select-option value="面">面</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="图层数据" name="relationTable">
<a-input v-model:value="uploadFrom.relationTable">
<template #addonAfter >
<PlusOutlined @click="handlerGetExistsTableList()" />
</template>
</a-input>
</a-form-item>
<a-form-item label="属性数据">
<a-input v-model:value="uploadFrom.attributeTable">
<template #addonAfter >
<PlusOutlined @click="handlerGetExistsTableList()" />
</template>
</a-input>
</a-form-item>
<a-form
ref="formRef"
:model="uploadFrom"
:label-col="{ style: { width: '75px' } }"
labelAlign="right"
:rules="uploadFormRules"
>
<a-form-item label="服务名称" name="name">
<a-input v-model:value="uploadFrom.name" placeholder="请输入服务名称" />
</a-form-item>
<a-form-item label="服务描述" name="description">
<a-input v-model:value="uploadFrom.description" placeholder="请输入服务名称" />
</a-form-item>
<!-- 显示条件：文件类型为shp 或者 类型为Excel时有图斑数据 -->
<a-form-item label="空间参考" name="srid" >
<a-select v-model:value="uploadFrom.srid" placeholder="请选择空间参考">
<a-select-option value="EPSG:4326">EPSG:4326</a-select-option>
<a-select-option value="3857">EPSG:3857</a-select-option>
<a-select-option value="900913">EPSG:900913</a-select-option>
</a-select>
</a-form-item>
<!-- 显示条件：文件类型为Excel有图斑时 -->
<a-form-item label="数据类型" name="vectorType" >
<a-select v-model:value="uploadFrom.vectorType" placeholder="请选择数据类型">
<a-select-option value="point">点</a-select-option>
<a-select-option value="linestring">线</a-select-option>
<a-select-option value="面">面</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="数据表名" name="relationTable">
<a-row :gutter="12">
<a-col :span="20">
<a-input v-model:value="uploadFrom.relationTable" placeholder="请输入表名" />
</a-col>
<a-col :span="4">
<!-- <a-tooltip title="从现有数据表中选择">
<a-button type="primary" :icon="h(PlusOutlined)" @click="handlerGetExistsTableList"/>
</a-tooltip> -->
<a-button type="" :icon="h(PlusOutlined)" @click="handlerGetExistsTableList()" />
</a-col>
</a-row>
</a-form-item>
</a-form>
<div class="upload-span-button">
<a-button type="primary" :icon="h(CloudUploadOutlined)" @click="submitTable">发布服务</a-button>
</div>
</div>
<a-form-item label="查询字段" >
<a-select v-model:value="uploadFrom.attributeField" placeholder="请选择数据类型">
<a-select-option v-for="(item,index) in filedOptions" :key="index" :value="item.dbColumnName">{{item.dbColumnName}}({{item.description}})</a-select-option>
</a-select>
</a-form-item>
</a-form>
<div class="upload-span-button">
<a-button type="primary" :icon="h(CloudUploadOutlined)" @click="submitTable">发布服务</a-button>
</div>
</div>
</a-col>
<a-col :span="2"></a-col>
</a-row>
</a-tab-pane>
</a-tabs>
</div>
<a-modal :open="openSelectTable" title="请选择数据表" @cancel="handlerCancleSelectTable" @ok="handlerSelectTable" width="1000px">
<!-- <div>
<a-form
layout="inline"
>
<a-form-item>
<a-input v-model:value="formState.user" placeholder="">
<template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
</a-input>
</a-form-item>
<a-form-item>
<a-input v-model:value="formState.password" type="password" placeholder="Password">
<template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
</a-input>
</a-form-item>
<a-form-item>
<a-button
type="primary"
html-type="submit"
:disabled="formState.user === '' || formState.password === ''"
>
Log in
</a-button>
</a-form-item>
</a-form>
</div> -->
<a-modal :open="openSelectTable" title="请选择数据表" @cancel="handlerCancleSelectTable" @ok="handlerSelectTable">
<BasicTable @register="registerImportTable" />
</a-modal>
@ -242,6 +282,7 @@
PlusOutlined,
DeleteOutlined,
CheckCircleOutlined,
BlockOutlined
} from '@ant-design/icons-vue';
import './index.scss';
import { InboxOutlined,CloudUploadOutlined } from '@ant-design/icons-vue';
@ -256,6 +297,12 @@
import { FILETYPE } from '../util'
import {ObjectToUrl} from '../src/tool'
import { addLayer } from '@/api/sys/layerManagement'
import { getOutKeyList } from '@/api/formdesign/index';
const filedOptions = ref([])
getOutKeyList({tableNames:"drone_caseinfo_single",dbCode:"hcsystemdb"}).then(res=>{
filedOptions.value = res[0].db_codecolumnsList
})
import {
getDataBaseTableList,
getImportBaseTableList,
@ -326,8 +373,6 @@
columns: importColumns,
size: 'small',
rowSelection: {
//多选框
// type: 'checkbox',
type: 'radio',
},
useSearchForm: false,
@ -604,6 +649,7 @@ const handlerSelectTable = ()=> {
const handlerCancleSelectTable = ()=>{
openSelectTable.value = false;
}
</script>
@ -709,6 +755,22 @@ const handlerSelectTable = ()=> {
}
.upload-form-by-database{
padding:80px 100px 120px 100px;
padding:70px 20px;
}
.layer-icon{
width:200px;
height:200px;
background:#ffffff;
font-size:100px;
text-align: center;
line-height: 200px;
color:#efefef;
border:1px dashed #cfcfcf;
border-radius: 10px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>

27
src/components/MapboxMaps/MapComponent.vue
View File

@ -262,10 +262,37 @@
},
}
}),"top-left");
// 应用图层绑定点击事件
applicationLayers.forEach((item,index)=>{
map.on("click",item.layer.id,(e)=>{
let state = findLayerAttributeInfo(applicationLayers,e.features[0].layer.id);
if(state){
createMessage.success("数据表："+state.attributeTable+"；查询字段："+state.attributeField+"字段值："+e.features[0].properties.gid)
console.log("EVEVEVE",state);
}
console.log("e.features[0]",e.features[0]);
// console.log("EVEVEVE",state);
// console.log("EVEVEVE",e.features);
})
})
});
});
// 销毁地图
const findLayerAttributeInfo = (layers,id)=>{
let layer = layers?.find((itme,index)=>{
return itme.layer.id == id;
})
if(layer){
if(layer.layer.state){
return layer.layer.state;
}else{
return false;
}
}
}
// 加载地形
const handlerLoadTerrain = () => {
map.addSource('mapbox-dem', {

2
src/components/MapboxMaps/MapboxMap.vue
View File

@ -240,7 +240,7 @@
});
</script>
<style>
<style scoped>
.layer-control-center p {
margin: 0px;
}

6
src/views/demo/form-design/core/formItemConfig.ts
View File

@ -512,7 +512,7 @@ export const baseComponents: IVFormComponent[] = [
maxSize: 2,
name: 'files',
action: '/api/Files/Upload',
server: 'http://192.168.10.102:9023',
server: '',
},
},
{
@ -528,7 +528,7 @@ export const baseComponents: IVFormComponent[] = [
maxSize: 2,
name: 'files',
action: '/api/Files/Upload',
server: 'http://192.168.10.102:9023',
server: '',
},
},
{
@ -544,7 +544,7 @@ export const baseComponents: IVFormComponent[] = [
maxSize: 100,
name: 'files',
action: '/api/Files/Upload',
server: 'http://192.168.10.102:9023',
server: '',
},
},
{

349
src/views/demo/onlineform/formCall/index.vue
View File

@ -28,6 +28,11 @@
}}</a-button>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="['树形选择', '级联选择', '复选框-组'].includes(column.title)">
{{ dataModification(column, record) }}
</template>
</template>
</BasicTable>
<!-- <ShowFormModal
@ -68,19 +73,19 @@
</div>
<CallModal @success="submitsuccess" @register="registerModal" />
<a-modal
width="80%"
v-model:open="infoCallModalOpen"
title="详情"
:footer="null"
:maskClosable="true"
<a-modal
width="80%"
v-model:open="infoCallModalOpen"
title="详情"
:footer="null"
:maskClosable="true"
:destroyOnClose="true"
@cancel="closeModal">
@cancel="closeModal"
>
<div class="content">
<InfoCallModal :data="infoCallModalData"/>
<InfoCallModal :data="infoCallModalData" />
</div>
</a-modal>
<a-modal
width="100%"
@ -120,14 +125,14 @@
import { useModal } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import CallModal from './CallModal.vue';
import InfoCallModal from './InfoCallModal/index.vue'
import InfoCallModal from './InfoCallModal/index.vue';
import MapFormModal from './MapForm.vue';
import CreateFlow from './CreateFlow.vue';
// import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'
import ShowFormModal from './ShowFormModal/index.vue';
import { v4 as uuidv4 } from 'uuid';
import { changeCardStructure, cardNestStructure } from '@/views/demo/onlineform/util.ts';
import { useFormCallStore } from '@/store/modules/formCall.ts'
import { useFormCallStore } from '@/store/modules/formCall.ts';
const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
const mapFormShow = ref<boolean>(false);
const mapFormData = ref<Object>({});
@ -143,8 +148,8 @@
const mapSetData = ref({
width: 100,
});
const infoCallModalOpen = ref(false)
const infoCallModalData = ref({})
const infoCallModalOpen = ref(false);
const infoCallModalData = ref({});
const selectedSubTableDataId = ref('');
const formData = ref([]);
const mapgemoList = ref([]);
@ -180,103 +185,103 @@
// 图层定位数据
const location = reactive([118.556717, 35.80391]);
if (paramsCode == '数据统计') {
searchFormSchema = [
{
field: 'typeid',
component: 'ApiSelect',
label: '企业类型',
colProps: { span: 6 },
componentProps: () => {
return {
// api: getLoadCaseType, // 接口
// 接口参数
resultField: 'result',
labelField: 'itemName',
valueField: 'itemDetailId',
};
},
},
{
field: 'deal_username',
component: 'Input',
label: '面积（m²）',
colProps: { span: 6 },
},
{
field: '[report_start_time, report_end_time]',
component: 'RangePicker',
label: '成立时间',
componentProps: {
format: 'YYYY-MM-DD',
placeholder: ['开始时间', '结束时间'],
},
colProps: { span: 8 },
},
{
field: 'is_intact',
component: 'Select',
label: '是否纳税',
colProps: { span: 6 },
defaultValue: 1,
componentProps: {
options: [
{ label: '未判读', value: 0, key: '0' },
{ label: '已提交', value: 1, key: '1' },
{ label: '已关闭', value: 99, key: '99' },
{ label: '全部', value: null, key: '' },
],
},
},
];
// searchFormSchema = [
// {
// field: 'typeid',
// component: 'ApiSelect',
// label: '企业类型',
// colProps: { span: 6 },
// componentProps: () => {
// return {
// // api: getLoadCaseType, // 接口
// // 接口参数
// resultField: 'result',
// labelField: 'itemName',
// valueField: 'itemDetailId',
// };
// },
// },
// {
// field: 'deal_username',
// component: 'Input',
// label: '面积（m²）',
// colProps: { span: 6 },
// },
// {
// field: '[report_start_time, report_end_time]',
// component: 'RangePicker',
// label: '成立时间',
// componentProps: {
// format: 'YYYY-MM-DD',
// placeholder: ['开始时间', '结束时间'],
// },
// colProps: { span: 8 },
// },
// {
// field: 'is_intact',
// component: 'Select',
// label: '是否纳税',
// colProps: { span: 6 },
// defaultValue: 1,
// componentProps: {
// options: [
// { label: '未判读', value: 0, key: '0' },
// { label: '已提交', value: 1, key: '1' },
// { label: '已关闭', value: 99, key: '99' },
// { label: '全部', value: null, key: '' },
// ],
// },
// },
// ];
} else if (paramsCode == '数据审核') {
searchFormSchema = [
{
field: 'typeid',
component: 'ApiSelect',
label: '企业类型',
colProps: { span: 6 },
componentProps: () => {
return {
// api: getLoadCaseType, // 接口
// 接口参数
resultField: 'result',
labelField: 'itemName',
valueField: 'itemDetailId',
};
},
},
{
field: 'deal_username',
component: 'Input',
label: '面积（m²）',
colProps: { span: 6 },
},
{
field: '[report_start_time, report_end_time]',
component: 'RangePicker',
label: '成立时间',
componentProps: {
format: 'YYYY-MM-DD',
placeholder: ['开始时间', '结束时间'],
},
colProps: { span: 8 },
},
{
field: 'is_intact',
component: 'Select',
label: '是否已审核',
colProps: { span: 6 },
defaultValue: 1,
componentProps: {
options: [
{ label: '未判读', value: 0, key: '0' },
{ label: '已提交', value: 1, key: '1' },
{ label: '已关闭', value: 99, key: '99' },
{ label: '全部', value: null, key: '' },
],
},
},
];
// searchFormSchema = [
// {
// field: 'typeid',
// component: 'ApiSelect',
// label: '企业类型',
// colProps: { span: 6 },
// componentProps: () => {
// return {
// // api: getLoadCaseType, // 接口
// // 接口参数
// resultField: 'result',
// labelField: 'itemName',
// valueField: 'itemDetailId',
// };
// },
// },
// {
// field: 'deal_username',
// component: 'Input',
// label: '面积（m²）',
// colProps: { span: 6 },
// },
// {
// field: '[report_start_time, report_end_time]',
// component: 'RangePicker',
// label: '成立时间',
// componentProps: {
// format: 'YYYY-MM-DD',
// placeholder: ['开始时间', '结束时间'],
// },
// colProps: { span: 8 },
// },
// {
// field: 'is_intact',
// component: 'Select',
// label: '是否已审核',
// colProps: { span: 6 },
// defaultValue: 1,
// componentProps: {
// options: [
// { label: '未判读', value: 0, key: '0' },
// { label: '已提交', value: 1, key: '1' },
// { label: '已关闭', value: 99, key: '99' },
// { label: '全部', value: null, key: '' },
// ],
// },
// },
// ];
}
const [registerModal, { openModal }] = useModal();
@ -591,8 +596,8 @@
}
} else {
// openModal(true, toProps);
infoCallModalOpen.value = true
infoCallModalData.value = toProps
infoCallModalOpen.value = true;
infoCallModalData.value = toProps;
}
break;
case 'Import':
@ -745,13 +750,13 @@
console.log('columnObj', columnObj);
if (formObj.formInfo.tabList && formObj.formInfo.tabList.length > 0) {
// 为使用字典字段的下拉组件的options赋值
formObj.formInfo.tabList.forEach(childTab => {
childTab.schemas.forEach(async item => {
if(item.component === 'Select' && item.dataType === '2'){
item.componentProps.options = await formCallStore.getDictionaryOptions(item.dataCode)
formObj.formInfo.tabList.forEach((childTab) => {
childTab.schemas.forEach(async (item) => {
if (item.component === 'Select' && item.dataType === '2') {
item.componentProps.options = await formCallStore.getDictionaryOptions(item.dataCode);
}
})
})
});
});
// 将card嵌套起来
formObj.formInfo.tabList = cardNestStructure(formObj.formInfo.tabList);
const arr: any = [];
@ -828,16 +833,15 @@
// colProps: { span: 6 },
// });
// }
if (['Transfer'].includes(item.type)) {
searchFormSchema.push({
field: item.key,
component: item.type,
label: item.label,
colProps: { span: 12 },
componentProps: item.componentProps,
});
}
})}
searchFormSchema.push({
field: item.key,
component: item.type,
label: item.label,
colProps: ['Transfer'].includes(item.type) ? { span: 12 } : { span: 6 },
componentProps: item.componentProps || { options: item.options },
});
});
}
callColumns.forEach((item) => {
formObj.formInfo.schemas.forEach((val) => {
if (item.dataIndex == val.field && val.componentProps.options) {
@ -998,7 +1002,92 @@
mapFormShow.value = false;
};
const closeModal = () => {
infoCallModalOpen.value = false
infoCallModalOpen.value = false;
};
// 表单列表数据修饰
const dataModification = (column, record) => {
let res: any = '';
if (column.title == '树形选择') {
searchFormSchema?.forEach((item: any) => {
if (item.component && item.component == 'TreeSelect') {
res = getTreeSelectLabel(res, item.componentProps.treeData, record[column.dataIndex]);
}
});
} else if (column.title == '级联选择') {
searchFormSchema?.forEach((item: any) => {
if (item.component && item.component == 'Cascader') {
// 转成数组
let CascaderData = JSON.parse(record[column.dataIndex]?.replace(/\r\n/g, '') || '[]');
// 返回的结果
let CascaderRes = {
label: '',
children: item.componentProps.options,
};
CascaderData?.forEach((value, value_index) => {
if (value_index == 0) {
CascaderRes = getCascaderLabel(value, CascaderRes);
res = CascaderRes.label;
} else {
CascaderRes = getCascaderLabel(value, CascaderRes);
res = res + ' / ' + CascaderRes.label;
}
});
}
});
} else if (column.title == '复选框-组') {
searchFormSchema?.forEach((item: any) => {
if (item.component && item.component == 'CheckboxGroup') {
item.componentProps.options?.forEach((op) => {
// 转成数组
let CheckboxGroupData = JSON.parse(
record[column.dataIndex]?.replace(/\r\n/g, '') || '[]',
);
CheckboxGroupData?.forEach((CheckboxGroupData_item, index) => {
if (op.value == CheckboxGroupData_item) {
if (index == 0) {
res = op.label;
} else {
res = res + ' | ' + op.label;
}
}
});
});
}
});
} else {
// console.log(1012);
// console.log(column);
// console.log(record);
// console.log(searchFormSchema);
res = record[column.dataIndex];
}
return res;
};
// 树形选择-表单列表数据修饰
function getTreeSelectLabel(res, treeData, value) {
treeData?.forEach((element) => {
if (element.value == value) {
res = element.label;
}
if (element.children) {
res = getTreeSelectLabel(res, element.children, value);
}
});
return res;
}
// 级联选择-表单列表数据修饰
function getCascaderLabel(value, CascaderRes) {
let res: any = {};
CascaderRes.children.forEach((ch) => {
if (ch.value == value) {
res.label = ch.label;
res.children = ch.children;
}
});
return res;
}
</script>
<style lang="less">
@ -1041,9 +1130,9 @@
background: #fff;
z-index: 999;
}
.content{
.content {
padding: 30px;
height: 750px;
overflow: auto;
}
}
</style>

3
src/views/demo/onlineform/formModule/config/maps.vue
View File

@ -200,7 +200,7 @@
source: {
type: "raster",
tiles: [
"http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9",
"https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9",
],
tileSize: 256,
},
@ -250,6 +250,7 @@
},
])
const baselayercolumns = reactive([
{
title: '图层名称',

435
src/views/demo/report/caseview/index.vue Normal file
View File

@ -0,0 +1,435 @@
<template>
<div class="case-view">
<div class="case-view_step">
<a-steps v-model:current="current" type="navigation" size="small" :style="stepStyle">
<a-step
v-for="(item, index) in flowLog"
:key="index"
:title="item.name"
:status="item.state"
:disabled="item.status == 0 ? true : false"
/>
</a-steps>
</div>
<div class="case-view_content">
<div class="file-box w-1/2 xl:w-1/2" v-if="caseHandleInfo">
<CollapseContainer
title="【案件下发信息】"
:canExpan="false"
v-if="current == 0 || current == 4"
>
<Issue :data="detailData"></Issue>
</CollapseContainer>
<CollapseContainer
title="【案件核查信息】"
:canExpan="false"
v-if="current == 1 || current == 4"
>
<Inspect
:data="caseHandleInfo"
:playerOptions="playerOptions"
:threadImageList="threadImageList"
></Inspect>
</CollapseContainer>
<CollapseContainer
title="【案件办理信息-合法举证】"
:canExpan="false"
v-if="
(caseHandleInfo.is_illegal == '合法' && current == 2) ||
(caseHandleInfo.is_illegal == '合法' && current == 4)
"
>
<Evidence
:data="caseHandleInfo"
:evidenceFileList="evidenceFileList"
:boundaryImageList="boundaryImageList"
></Evidence>
</CollapseContainer>
<CollapseContainer
title="【案件办理信息-伪变化】"
:canExpan="false"
v-if="
(caseHandleInfo.is_illegal == '伪变化' && current == 2) ||
(caseHandleInfo.is_illegal == '伪变化' && current == 4)
"
>
<div> 伪变化没有案件办理信息 </div>
</CollapseContainer>
<CollapseContainer
title="【案件办理信息-违法-拟拆除】"
:canExpan="false"
v-if="
(caseHandleInfo.is_illegal == '违法' &&
caseHandleInfo.info.measure_name == '拟拆除' &&
current == 2) ||
(caseHandleInfo.is_illegal == '违法' &&
caseHandleInfo.info.measure_name == '拟拆除' &&
current == 4)
"
>
<Dismantle :data="caseHandleInfo" :videoOptions="videoOptions"></Dismantle>
</CollapseContainer>
<CollapseContainer
title="【案件办理信息-违法-查处】"
:canExpan="false"
v-if="
(caseHandleInfo.is_illegal == '违法' &&
caseHandleInfo.info.measure_name == '查处' &&
current == 2) ||
(caseHandleInfo.is_illegal == '违法' &&
caseHandleInfo.info.measure_name == '查处' &&
current == 4)
"
>
<Investigate
:data="caseHandleInfo"
:paymentImageList="paymentImageList"
:punishImageList="punishImageList"
></Investigate>
</CollapseContainer>
<CollapseContainer
title="【案件办理信息-违法-拟完善手续】"
:canExpan="false"
v-if="
(caseHandleInfo.is_illegal == '违法' &&
caseHandleInfo.info.measure_name == '拟完善手续' &&
current == 2) ||
(caseHandleInfo.is_illegal == '违法' &&
caseHandleInfo.info.measure_name == '拟完善手续' &&
current == 4)
"
>
<Procedure
:data="caseHandleInfo"
:agreeImageList="agreeImageList"
:checkoutImageList="checkoutImageList"
:boundaryImageList="boundaryImageList"
></Procedure>
</CollapseContainer>
<CollapseContainer
title="【案件审核信息】"
:canExpan="false"
v-if="current == 3 || current == 4"
>
<Audit :data="flowLog[3]"></Audit>
</CollapseContainer>
<CollapseContainer
title="【案件退回描述】"
:canExpan="false"
v-if="detailData.is_drawback == 1"
>
<a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
<a-descriptions-item label="退回描述">
{{ detailData.drawback_description }}
</a-descriptions-item>
</a-descriptions>
</CollapseContainer>
</div>
<CollapseContainer title="地图位置" :canExpan="false" class="map-box ml-1 w-1/2 xl:w-1/2">
<MapDetail :ruleForm="detailData" :isOnce="true"></MapDetail>
</CollapseContainer>
</div>
</div>
</template>
<script lang="ts" setup>
// 已归档 202205020912205393
// 拟拆除 202404181541067344
import { ref, onMounted, reactive, watch } from 'vue';
import { getCaseFlowLog, getCaseInfo, getDroneCaseDeal } from '@/api/monitor/index';
import { fileListModel, fileList } from '@/api/monitor/model/index';
import { CollapseContainer } from '@/components/Container';
import {
Issue,
Inspect,
Audit,
Dismantle,
MapDetail,
Evidence,
Investigate,
Procedure,
} from '../index';
const BASE_IMAGE_URL = ref('http://192.168.104:9011');
const current = ref<number>(0);
const stepStyle = ref({
marginBottom: '60px',
boxShadow: '0px -1px 0 0 #e8e8e8 inset',
});
const labelStyle = ref({
width: '100px',
});
const props = defineProps({
caseId: String,
});
console.log(props);
watch(
() => props.caseId,
(newVal, oldVal) => {
console.log(newVal);
getCaseFlowLogData();
loadDetailCaseInfo();
getCaseHandleInfo();
},
);
const detailData = ref();
const caseHandleInfo = ref();
const playerOptions = ref();
//现场照片
const threadImageList = ref<fileListModel>([]);
// 整改后、处理后照片
const threadAfterImageList = ref<any>([]);
// 视频
const videoOptions = ref();
//合法举证材料列表
const evidenceFileList = ref<fileListModel>([]);
// 勘测定界图
const boundaryImageList = ref<fileListModel>([]);
//处罚通知书照片
const punishImageList = ref<fileListModel>([]);
//交罚款通知书照片
const paymentImageList = ref<fileListModel>([]);
//政府同意完善手续证明照片
const agreeImageList = ref<fileListModel>([]);
//办理手续证明照片
const checkoutImageList = ref<fileListModel>([]);
const flowLog = ref();
// 获取步骤条数据
async function getCaseFlowLogData() {
current.value = 0;
const data = await getCaseFlowLog({ id: props.caseId });
flowLog.value = data;
if (flowLog.value.length == 4 && flowLog.value[1].status == 1) {
let obj = {
name: '伪变化',
status: 1,
time: '',
state: 'finish',
user_name: '',
};
flowLog.value.splice(2, 0, obj);
}
current.value = 0;
flowLog.value.forEach((item, index) => {
current.value = current.value + item.status;
if (flowLog.value[index].status == 1) {
flowLog.value[index].state = 'finish';
} else {
flowLog.value[index].state = 'wait';
}
});
if (current.value != 0) {
current.value--;
}
}
// 获取详情
async function loadDetailCaseInfo() {
const data = await getCaseInfo({ id: props.caseId });
console.log(data);
detailData.value = data;
}
// 获取处理详情
async function getCaseHandleInfo() {
const data = await getDroneCaseDeal({ caseid: props.caseId });
console.log(data);
caseHandleInfo.value = data;
if (caseHandleInfo.value.is_illegal == 0) {
caseHandleInfo.value.is_illegal = '合法';
} else if (caseHandleInfo.value.is_illegal == 1) {
caseHandleInfo.value.is_illegal = '违法';
} else if (caseHandleInfo.value.is_illegal == 2) {
caseHandleInfo.value.is_illegal = '伪变化';
}
// 视频
playerOptions.value = [];
if (data.video_list.length > 0) {
data.video_list.forEach((item, index) => {
let options = {
playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [
{
type: '',
src: BASE_IMAGE_URL + '/' + item, //url地址
},
],
poster: '', //你的封面地址
// width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true, //当前时间和持续时间的分隔符
durationDisplay: true, //显示持续时间
remainingTimeDisplay: false, //是否显示剩余时间功能
fullscreenToggle: true, //全屏按钮
},
};
playerOptions.value.push(options);
});
}
// 现场照片
if (data.pic_info_list.length > 0) {
data.pic_info_list.forEach((item) => {
threadImageList.value.push(item.filePath);
});
for (let i = 0; i < threadImageList.value.length; i++) {
let obj = {
filePath: BASE_IMAGE_URL + '/' + threadImageList.value[i],
s_filePath: BASE_IMAGE_URL + '/S_' + threadImageList.value[i],
};
threadImageList.value[i] = obj;
}
}
// 处理后照片 整改后照片 恢复后照片
if (data.after_pic_list.length > 0) {
threadAfterImageList.value = [];
data.after_pic_list.forEach((item: fileList) => {
threadAfterImageList.value.push(BASE_IMAGE_URL + '/S_' + item.filePath);
});
}
// 处理后视频
videoOptions.value = [];
if (data.remove_video_list.length > 0) {
videoOptions.value = [];
data.remove_video_list.forEach((item, index) => {
let options = {
playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [
{
type: '',
src: BASE_IMAGE_URL + '/' + item, //url地址
},
],
poster: '', //你的封面地址
// width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true, //当前时间和持续时间的分隔符
durationDisplay: true, //显示持续时间
remainingTimeDisplay: false, //是否显示剩余时间功能
fullscreenToggle: true, //全屏按钮
},
};
videoOptions.value.push(options);
});
}
// 合法 - 举证材料合法文件 evidence_file_list
if (data.evidence_file_list.length > 0) {
evidenceFileList.value = [];
data.evidence_file_list.forEach((item: fileList) => {
let obj = {
filePath: BASE_IMAGE_URL + '/' + item.filePath,
s_filePath: BASE_IMAGE_URL + '/' + item.filePath,
};
evidenceFileList.value.push(obj);
});
}
if (data.boundary_pic_list.length > 0) {
boundaryImageList.value = [];
data.boundary_pic_list.forEach((item) => {
let obj = {
filePath: BASE_IMAGE_URL + '/' + item,
s_filePath: BASE_IMAGE_URL + '/' + item,
};
boundaryImageList.value.push(obj);
});
}
// 违法 查处 - 处罚通知书 punish_pic_list
if (data.punish_pic_list.length > 0) {
punishImageList.value = [];
data.punish_pic_list.forEach((item) => {
let obj = {
filePath: BASE_IMAGE_URL + '/' + item,
s_filePath: BASE_IMAGE_URL + '/S_' + item,
};
punishImageList.value.push(obj);
});
}
// 违法 查处 - 交款通知书 payment_pic_list
if (data.payment_pic_list.length > 0) {
paymentImageList.value = [];
data.payment_pic_list.forEach((item) => {
let obj = {
filePath: BASE_IMAGE_URL + '/' + item,
s_filePath: BASE_IMAGE_URL + '/S_' + item,
};
paymentImageList.value.push(obj);
});
}
// 违法 完善手续 - 政府同意完善手续证明 agree_checkout_pic_list
if (data.agree_checkout_pic_list.length > 0) {
agreeImageList.value = [];
data.agree_checkout_pic_list.forEach((item) => {
let obj = {
filePath: BASE_IMAGE_URL + '/' + item,
s_filePath: BASE_IMAGE_URL + '/S_' + item,
};
agreeImageList.value.push(obj);
});
}
// 违法 完善手续 - 办理手续 checkout_pic_list
if (data.checkout_pic_list.length > 0) {
checkoutImageList.value = [];
data.checkout_pic_list.forEach((item) => {
let obj = {
filePath: BASE_IMAGE_URL + '/' + item,
s_filePath: BASE_IMAGE_URL + '/S_' + item,
};
checkoutImageList.value.push(obj);
});
}
}
onMounted(() => {
getCaseFlowLogData();
loadDetailCaseInfo();
getCaseHandleInfo();
});
</script>
<style lang="less" scoped>
.case-view {
padding: 20px 32px;
background-color: @component-background;
&__step {
padding: 24px 40px;
background-color: @app-content-background;
}
&_content {
display: flex;
height: 65vh;
.file-box {
overflow: auto;
}
}
}
.map-box {
height: 100%;
}
</style>

51
src/views/demo/report/caseview/model.ts Normal file
View File

@ -0,0 +1,51 @@
export interface caseDetailObj {
case_no?: string;
identification_user?: string;
identification_time?: string;
handle_status_id?: number;
handle_status_name?: string;
countyname?: string;
streetname?: string;
communityname?: string;
address?: string;
lng?: number;
lat?: number;
area?: number;
typename?: string;
remark?: string;
case_description?: string;
}
export interface infoObj{
createusername?: string;
createtime?:string;
verifystatusname?:string;
measure_name?:string;
result_name?: string;
contacts_people?: string;
contacts_phone?: string;
actual_scene_case?: string;
actual_use_to?: string;
pseudo_change_reason?: string;
actual_area?: string;
is_have_build?: number;
is_forever_build?: number;
illegal_contact?: string;
is_build_complete?: number;
is_have_checkout_condition?: number;
illegal_contact_phone?: string;
build_structure?: string;
illegal_type?: string;
remark?: string;
transactor_name?: string;
transact_time?: string;
evidence_file_name?: string;
evidence_file_number?: string;
evidence_file_indate?: string;
illegal_contact_idcard?: string;
registr_number?: string;
procedure_indate?:string;
}
export interface caseHandleInfoObj {
info:infoObj
is_illegal?: string;
}

39
src/views/demo/report/caseview/src/audit.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
<a-descriptions-item label="审核人">
{{ auditData.user_name }}
</a-descriptions-item>
<a-descriptions-item label="审核时间">
{{ auditData.time }}
</a-descriptions-item>
</a-descriptions>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
const labelStyle = ref({
width: '100px',
});
const auditData: any = ref({});
const props = defineProps({
data: {
type: Object,
default: () => {
return {};
},
},
});
console.log(props.data);
auditData.value = props.data;
watch(
() => props.data,
(newVal, oldVal) => {
auditData.value = newVal;
},
);
</script>
<style lang="less" scoped>
::v-deep .ant-image .ant-image-img {
width: 85px;
margin-bottom: 10px;
}
</style>

85
src/views/demo/report/caseview/src/dismantle.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
<a-descriptions-item label="办理人">{{
caseHandleInfo.info.transactor_name
}}</a-descriptions-item>
<a-descriptions-item label="办理时间">
{{ caseHandleInfo.info.transact_time }}
</a-descriptions-item>
<a-descriptions-item label="拟拆除后照片">
<div>
<ImagePreview :imageList="imgList" />
</div>
</a-descriptions-item>
<a-descriptions-item label="视频">
<div v-if="videoOptions.length > 0">
<video-player
class="video-player vjs-custom-skin"
v-for="(item, index) in videoOptions"
:key="index"
ref="videoPlayer"
:playsinline="true"
:options="item"
style="width: 200px"
></video-player>
</div>
</a-descriptions-item>
</a-descriptions>
</template>
<script lang="ts" setup>
import { reactive, watch, ref } from 'vue';
import { ImagePreview } from '@/components/Preview';
import { caseHandleInfoObj } from '../model';
const labelStyle = ref({
width: '100px',
});
const caseHandleInfo = ref<caseHandleInfoObj>({
info: {},
});
const videoOptions: any = ref([]);
const threadAfterImageList: any = ref([]);
const props = defineProps({
data: {
type: Object,
default: () => {
return {};
},
},
videoOptions: {
type: Object,
default: () => {
return {};
},
},
threadAfterImageList: {
type: Object,
default: () => {
return {};
},
},
});
caseHandleInfo.value = props.data;
videoOptions.value = props.videoOptions;
threadAfterImageList.value = props.threadImageList;
const imgList = ref([
'https://picsum.photos/id/66/346/216',
'https://picsum.photos/id/67/346/216',
'https://picsum.photos/id/68/346/216',
]);
watch(
() => props.data,
(newVal, oldVal) => {
caseHandleInfo.value = newVal;
videoOptions.value = props.videoOptions;
threadImageList.value = props.threadImageList;
},
);
</script>
<style lang="less" scoped>
::v-deep .ant-image .ant-image-img {
width: 85px;
margin-bottom: 10px;
}
</style>

97
src/views/demo/report/caseview/src/evidence.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
<a-descriptions-item label="办理人">{{
caseHandleInfo.info.transactor_name
}}</a-descriptions-item>
<a-descriptions-item label="办理时间">
{{ caseHandleInfo.info.transact_time }}
</a-descriptions-item>
<a-descriptions-item label="批准文件名称">
{{ caseHandleInfo.info.evidence_file_name }}
</a-descriptions-item>
<a-descriptions-item label="批准文件编号">
{{ caseHandleInfo.info.evidence_file_number }}
</a-descriptions-item>
<a-descriptions-item label="批文有效日期">
{{ caseHandleInfo.info.evidence_file_indate }}
</a-descriptions-item>
<a-descriptions-item label="合法举证材料">
<div>
<ImagePreview :imageList="evidenceFileList" />
</div>
</a-descriptions-item>
<a-descriptions-item label="勘测定界图">
<div>
<ImagePreview :imageList="boundaryImageList" />
</div>
</a-descriptions-item>
</a-descriptions>
</template>
<script lang="ts" setup>
import { watch, ref } from 'vue';
import { ImagePreview } from '@/components/Preview';
import { caseHandleInfoObj } from '../model';
const labelStyle = ref({
width: '100px',
});
const caseHandleInfo = ref<caseHandleInfoObj>({
info: {},
});
const playerOptions: any = ref([]);
const boundaryImageList: any = ref([]);
const evidenceFileList: any = ref([]);
const props = defineProps({
data: {
type: Object,
default: () => {
return {};
},
},
playerOptions: {
type: Object,
default: () => {
return {};
},
},
boundaryImageList: {
type: Object,
default: () => {
return {};
},
},
evidenceFileList: {
type: Object,
default: () => {
return {};
},
},
});
caseHandleInfo.value = props.data;
playerOptions.value = props.playerOptions;
boundaryImageList.value = props.boundaryImageList;
evidenceFileList.value = props.boundaryImageList;
const imgList = ref([
'https://picsum.photos/id/66/346/216',
'https://picsum.photos/id/67/346/216',
'https://picsum.photos/id/68/346/216',
]);
watch(
() => props.data,
(newVal, oldVal) => {
caseHandleInfo.value = newVal;
playerOptions.value = props.playerOptions;
boundaryImageList.value = props.boundaryImageList;
evidenceFileList.value = props.boundaryImageList;
},
);
</script>
<style lang="less" scoped>
::v-deep .ant-image .ant-image-img {
width: 85px;
margin-bottom: 10px;
}
</style>

247
src/views/demo/report/caseview/src/inspect.vue Normal file
View File

@ -0,0 +1,247 @@
<template>
<a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
<a-descriptions-item label="核查人">{{
caseHandleInfo.info.createusername
}}</a-descriptions-item>
<a-descriptions-item label="核查时间">
{{ caseHandleInfo.info.createtime }}
</a-descriptions-item>
<a-descriptions-item label="处理进度">
{{ caseHandleInfo.info.verifystatusname }}
</a-descriptions-item>
<a-descriptions-item label="是否违法">
{{ caseHandleInfo.is_illegal }}
</a-descriptions-item>
<a-descriptions-item label="处理措施" v-if="caseHandleInfo.is_illegal == '是'">
{{ caseHandleInfo.info.measure_name }}
</a-descriptions-item>
<!-- 合法 -->
<a-descriptions-item label="项目名称" v-if="caseHandleInfo.is_illegal == '合法'">
{{ caseHandleInfo.info.result_name }}
</a-descriptions-item>
<a-descriptions-item label="当事人" v-if="caseHandleInfo.is_illegal == '合法'">
{{ caseHandleInfo.info.contacts_people }}
</a-descriptions-item>
<a-descriptions-item label="联系电话" v-if="caseHandleInfo.is_illegal == '合法'">
{{ caseHandleInfo.info.contacts_phone }}
</a-descriptions-item>
<a-descriptions-item label="建设情况" v-if="caseHandleInfo.is_illegal == '合法'">
{{ caseHandleInfo.info.actual_scene_case }}
</a-descriptions-item>
<a-descriptions-item label="实际用途" v-if="caseHandleInfo.is_illegal == '合法'">
{{ caseHandleInfo.info.actual_use_to }}
</a-descriptions-item>
<!-- 伪变化 -->
<a-descriptions-item label="伪变化原因" v-if="caseHandleInfo.is_illegal == '伪变化'">
{{ caseHandleInfo.info.pseudo_change_reason }}
</a-descriptions-item>
<a-descriptions-item label="实际用途" v-if="caseHandleInfo.is_illegal == '伪变化'">
{{ caseHandleInfo.info.actual_use_to }}
</a-descriptions-item>
<a-descriptions-item label="实际面积" v-if="caseHandleInfo.is_illegal == '伪变化'">
{{ caseHandleInfo.info.actual_area }}
</a-descriptions-item>
<a-descriptions-item label="是否有建筑物" v-if="caseHandleInfo.is_illegal == '伪变化'">
{{ caseHandleInfo.info.is_have_build == 1 ? '是' : '否' }}
</a-descriptions-item>
<a-descriptions-item label="是否永久性建筑" v-if="caseHandleInfo.is_illegal == '伪变化'">
{{ caseHandleInfo.info.is_forever_build == 1 ? '是' : '否' }}
</a-descriptions-item>
<!-- 案件违法 - 拆除 -->
<a-descriptions-item
label="处理办法"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '拟拆除'"
>
{{ caseHandleInfo.info.measure_name }}
</a-descriptions-item>
<a-descriptions-item
label="实际用途"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '拟拆除'"
>
{{ caseHandleInfo.info.actual_use_to }}
</a-descriptions-item>
<a-descriptions-item
label="当事人"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '拟拆除'"
>
{{ caseHandleInfo.info.illegal_contact }}
</a-descriptions-item>
<a-descriptions-item
label="联系电话"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '拟拆除'"
>
{{ caseHandleInfo.info.illegal_contact_phone }}
</a-descriptions-item>
<a-descriptions-item
label="建设情况"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '拟拆除'"
>
{{ caseHandleInfo.info.is_build_complete == 1 ? '已建成' : '建设中' }}
</a-descriptions-item>
<a-descriptions-item
label="建筑结构"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '拟拆除'"
>
{{ caseHandleInfo.info.build_structure }}
</a-descriptions-item>
<!-- 案件违法 查处 -->
<a-descriptions-item
label="处理办法"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '查处'"
>
{{ caseHandleInfo.info.measure_name }}
</a-descriptions-item>
<a-descriptions-item
label="实际用途"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '查处'"
>
{{ caseHandleInfo.info.actual_use_to }}
</a-descriptions-item>
<a-descriptions-item
label="当事人"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '查处'"
>
{{ caseHandleInfo.info.illegal_contact }}
</a-descriptions-item>
<a-descriptions-item
label="联系电话"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '查处'"
>
{{ caseHandleInfo.info.illegal_contact_phone }}
</a-descriptions-item>
<a-descriptions-item
label="建筑结构"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '查处'"
>
{{ caseHandleInfo.info.build_structure }}
</a-descriptions-item>
<a-descriptions-item
label="违法类型"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '查处'"
>
{{ caseHandleInfo.info.illegal_type }}
</a-descriptions-item>
<!-- 案件违法 完善手续 -->
<a-descriptions-item
label="处理办法"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '拟完善手续'"
>
{{ caseHandleInfo.info.measure_name }}
</a-descriptions-item>
<a-descriptions-item
label="实际用途"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '拟完善手续'"
>
{{ caseHandleInfo.info.actual_use_to }}
</a-descriptions-item>
<a-descriptions-item
label="当事人"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '拟完善手续'"
>
{{ caseHandleInfo.info.illegal_contact }}
</a-descriptions-item>
<a-descriptions-item
label="联系电话"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '拟完善手续'"
>
{{ caseHandleInfo.info.illegal_contact_phone }}
</a-descriptions-item>
<a-descriptions-item
label="拟完善手续名称"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '拟完善手续'"
>
{{ caseHandleInfo.info.result_name }}
</a-descriptions-item>
<a-descriptions-item
label="是否具备完善手续条件"
v-if="caseHandleInfo.is_illegal == '违法' && caseHandleInfo.info.measure_name == '拟完善手续'"
>
{{ caseHandleInfo.info.is_have_checkout_condition == 1 ? '是' : '否' }}
</a-descriptions-item>
<a-descriptions-item label="备注">
{{ caseHandleInfo.info.remark }}
</a-descriptions-item>
<a-descriptions-item label="现场照片">
<div>
<ImagePreview :imageList="imgList" />
</div>
</a-descriptions-item>
<a-descriptions-item label="现场视频">
<div v-if="playerOptions.length > 0">
<video-player
class="video-player vjs-custom-skin"
v-for="(item, index) in playerOptions"
:key="index"
ref="videoPlayer"
:playsinline="true"
:options="item"
style="width: 200px"
></video-player>
</div>
</a-descriptions-item>
</a-descriptions>
</template>
<script lang="ts" setup>
import { reactive, watch, ref } from 'vue';
import { ImagePreview } from '@/components/Preview';
import { caseHandleInfoObj } from '../model';
const labelStyle = ref({
width: '100px',
});
const caseHandleInfo = ref<caseHandleInfoObj>({
info: {},
});
const playerOptions: any = ref([]);
const threadImageList: any = ref([]);
const props = defineProps({
data: {
type: Object,
default: () => {
return {};
},
},
playerOptions: {
type: Object,
default: () => {
return {};
},
},
threadImageList: {
type: Object,
default: () => {
return {};
},
},
});
console.log(props)
caseHandleInfo.value = props.data;
playerOptions.value = props.playerOptions;
threadImageList.value = props.threadImageList;
const imgList = ref([
'https://picsum.photos/id/66/346/216',
'https://picsum.photos/id/67/346/216',
'https://picsum.photos/id/68/346/216',
]);
watch(
() => props.data,
(newVal, oldVal) => {
caseHandleInfo.value = newVal;
playerOptions.value = props.playerOptions;
threadImageList.value = props.threadImageList;
},
);
</script>
<style lang="less" scoped>
::v-deep .ant-image .ant-image-img {
width: 85px;
margin-bottom: 10px;
}
</style>

100
src/views/demo/report/caseview/src/investigate.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
<a-descriptions-item label="办理人">{{
caseHandleInfo.info.transactor_name
}}</a-descriptions-item>
<a-descriptions-item label="办理时间">
{{ caseHandleInfo.info.transact_time }}
</a-descriptions-item>
<a-descriptions-item label="立案号">
{{ caseHandleInfo.info.registr_number }}
</a-descriptions-item>
<a-descriptions-item label="当事人姓名">
{{ caseHandleInfo.info.illegal_contact }}
</a-descriptions-item>
<a-descriptions-item label="身份证号码">
{{ caseHandleInfo.info.illegal_contact_idcard }}
</a-descriptions-item>
<a-descriptions-item label="违法类型">
{{ caseHandleInfo.info.illegal_type }}
</a-descriptions-item>
<a-descriptions-item label="处罚通知书">
<div>
<ImagePreview :imageList="punishImageList" />
</div>
</a-descriptions-item>
<a-descriptions-item label="交款通知单">
<div>
<ImagePreview :imageList="paymentImageList" />
</div>
</a-descriptions-item>
</a-descriptions>
</template>
<script lang="ts" setup>
import { watch, ref } from 'vue';
import { ImagePreview } from '@/components/Preview';
import { caseHandleInfoObj } from '../model';
const labelStyle = ref({
width: '100px',
});
const caseHandleInfo = ref<caseHandleInfoObj>({
info: {},
});
const playerOptions: any = ref([]);
const paymentImageList: any = ref([]);
const punishImageList: any = ref([]);
const props = defineProps({
data: {
type: Object,
default: () => {
return {};
},
},
playerOptions: {
type: Object,
default: () => {
return {};
},
},
paymentImageList: {
type: Object,
default: () => {
return {};
},
},
punishImageList: {
type: Object,
default: () => {
return {};
},
},
});
caseHandleInfo.value = props.data;
playerOptions.value = props.playerOptions;
paymentImageList.value = props.paymentImageList;
punishImageList.value = props.paymentImageList;
const imgList = ref([
'https://picsum.photos/id/66/346/216',
'https://picsum.photos/id/67/346/216',
'https://picsum.photos/id/68/346/216',
]);
watch(
() => props.data,
(newVal, oldVal) => {
caseHandleInfo.value = newVal;
playerOptions.value = props.playerOptions;
paymentImageList.value = props.paymentImageList;
punishImageList.value = props.paymentImageList;
},
);
</script>
<style lang="less" scoped>
::v-deep .ant-image .ant-image-img {
width: 85px;
margin-bottom: 10px;
}
</style>

77
src/views/demo/report/caseview/src/issue.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
<a-descriptions-item label="案件编号">{{ caseDetail.case_no }}</a-descriptions-item>
<a-descriptions-item label="上报人">
{{ caseDetail.identification_user }}
</a-descriptions-item>
<a-descriptions-item label="上报时间">
{{ caseDetail.identification_time }}
</a-descriptions-item>
<a-descriptions-item label="案件状态">
<a-tag color="warning" v-if="caseDetail.handle_status_id == 0">
{{ caseDetail.handle_status_name }}
</a-tag>
<a-tag color="processing" v-else-if="caseDetail.handle_status_id == 1">
{{ caseDetail.handle_status_name }}
</a-tag>
<a-tag color="success" v-else>{{ caseDetail.handle_status_name }}</a-tag>
</a-descriptions-item>
<a-descriptions-item label="行政区划">
/&nbsp;{{ caseDetail.countyname }}&nbsp;/&nbsp;{{ caseDetail.streetname }}&nbsp; / &nbsp;{{
caseDetail.communityname
}}
</a-descriptions-item>
<a-descriptions-item label="案件地址">{{ caseDetail.address }}</a-descriptions-item>
<a-descriptions-item label="经纬度"
>{{ caseDetail.lng }} , {{ caseDetail.lat }}</a-descriptions-item
>
<a-descriptions-item label="案件地址">{{ caseDetail.area }}&nbsp;(m²)</a-descriptions-item>
<a-descriptions-item label="案件类型">{{ caseDetail.typename }}</a-descriptions-item>
<a-descriptions-item label="案件备注">{{ caseDetail.remark }}</a-descriptions-item>
<a-descriptions-item label="案件描述">{{ caseDetail.case_description }}</a-descriptions-item>
<a-descriptions-item label="案件图片">
<div>
<ImagePreview :imageList="imgList" />
</div>
</a-descriptions-item>
</a-descriptions>
</template>
<script lang="ts" setup>
import { reactive, watch, ref } from 'vue';
import { ImagePreview } from '@/components/Preview';
import { DetailModel, caseDetailObj } from '../model';
const labelStyle = ref({
width: '100px',
});
const caseDetail = ref<caseDetailObj>({});
const props = defineProps({
data: {
type: Object,
default: () => {
return {};
},
},
});
if(Object.keys(props.data).length != 0){
caseDetail.value = props.data.info;
}
const imgList = ref([
'https://picsum.photos/id/66/346/216',
'https://picsum.photos/id/67/346/216',
'https://picsum.photos/id/68/346/216',
]);
watch(
() => props.data,
(newVal, oldVal) => {
caseDetail.value = newVal.info;
},
);
</script>
<style lang="less" scoped>
::v-deep .ant-image .ant-image-img {
width: 85px;
margin-bottom: 10px;
}
</style>

205
src/views/demo/report/caseview/src/mapDetail.vue Normal file
View File

@ -0,0 +1,205 @@
<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) => {
console.log(newVal);
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();
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.info.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.info.lng, props.ruleForm.info.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: 50vh;
}
</style>

111
src/views/demo/report/caseview/src/procedure.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
<a-descriptions-item label="办理人">{{
caseHandleInfo.info.transactor_name
}}</a-descriptions-item>
<a-descriptions-item label="办理时间">
{{ caseHandleInfo.info.transact_time }}
</a-descriptions-item>
<a-descriptions-item label="政府统一完善手续证明">
<div>
<ImagePreview :imageList="agreeImageList" />
</div>
</a-descriptions-item>
<a-descriptions-item label="办理手续照片">
<div>
<ImagePreview :imageList="checkoutImageList" />
</div>
</a-descriptions-item>
<a-descriptions-item label="手续有效期">
{{ caseHandleInfo.info.procedure_indate }}
</a-descriptions-item>
<a-descriptions-item label="批准文件编号">
{{ caseHandleInfo.info.evidence_file_number }}
</a-descriptions-item>
<a-descriptions-item label="批文有效日期">
{{ caseHandleInfo.info.evidence_file_indate }}
</a-descriptions-item>
<a-descriptions-item label="勘测定界图">
<div>
<ImagePreview :imageList="boundaryImageList" />
</div>
</a-descriptions-item>
</a-descriptions>
</template>
<script lang="ts" setup>
import { watch, ref } from 'vue';
import { ImagePreview } from '@/components/Preview';
import { caseHandleInfoObj } from '../model';
const labelStyle = ref({
width: '100px',
});
const caseHandleInfo = ref<caseHandleInfoObj>({
info: {},
});
const playerOptions: any = ref([]);
const checkoutImageList: any = ref([]);
const boundaryImageList: any = ref([]);
const agreeImageList: any = ref([]);
const props = defineProps({
data: {
type: Object,
default: () => {
return {};
},
},
playerOptions: {
type: Object,
default: () => {
return {};
},
},
checkoutImageList: {
type: Object,
default: () => {
return {};
},
},
boundaryImageList: {
type: Object,
default: () => {
return {};
},
},
agreeImageList: {
type: Object,
default: () => {
return {};
},
},
});
caseHandleInfo.value = props.data;
playerOptions.value = props.playerOptions;
boundaryImageList.value = props.checkoutImageList;
checkoutImageList.value = props.checkoutImageList;
agreeImageList.value = props.checkoutImageList;
const imgList = ref([
'https://picsum.photos/id/66/346/216',
'https://picsum.photos/id/67/346/216',
'https://picsum.photos/id/68/346/216',
]);
watch(
() => props.data,
(newVal, oldVal) => {
caseHandleInfo.value = newVal;
playerOptions.value = props.playerOptions;
boundaryImageList.value = props.checkoutImageList;
checkoutImageList.value = props.checkoutImageList;
agreeImageList.value = props.checkoutImageList;
},
);
</script>
<style lang="less" scoped>
::v-deep .ant-image .ant-image-img {
width: 85px;
margin-bottom: 10px;
}
</style>

18
src/views/demo/report/index.ts Normal file
View File

@ -0,0 +1,18 @@
// 案件详情首页
export { default as CaseView } from './caseview/index.vue';
// 【案件下发信息】
export { default as Issue } from './caseview/src/issue.vue';
// 【案件核查信息】
export { default as Inspect } from './caseview/src/inspect.vue';
// 【案件审核信息】
export { default as Audit } from './caseview/src/audit.vue';
// 【案件办理信息-违法-拟拆除】
export { default as Dismantle } from './caseview/src/dismantle.vue';
// 地图位置
export { default as MapDetail } from './caseview/src/mapDetail.vue';
// 案件办理信息-合法举证
export { default as Evidence } from './caseview/src/evidence.vue';
// 【案件办理信息-违法-查处】
export { default as Investigate } from './caseview/src/investigate.vue';
// 【案件办理信息-违法-拟完善手续】
export { default as Procedure } from './caseview/src/procedure.vue';

135
src/views/demo/report/index.vue Normal file
View File

@ -0,0 +1,135 @@
<template>
<div>
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<PermissionBtn @btn-event="onBtnClicked" />
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '详情',
onClick: viewDetail.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
<BasicModal
v-bind="$attrs"
@register="registerModal"
title="案件详情"
:canFullscreen="false"
:defaultFullscreen="true"
:showCancelBtn="false"
:showOkBtn="false"
:draggable="false"
>
<h1 v-print id="printMe">Hello World Hello World Hello World Hello World</h1>
<a-button type="primary" v-print="printObj">打印</a-button>
<!-- <CaseView :caseId="caseId"></CaseView> -->
</BasicModal>
</div>
</template>
<script lang="ts" setup>
import print from "vue3-print-nb";
import { reactive, ref } from 'vue';
import { BasicTable, useTable, TableAction, BasicColumn } from '@/components/Table';
import { getCaseInfoList,exportCaseInfo } from '@/api/monitor/index';
import { useMessage } from '@/hooks/web/useMessage';
import { PermissionBtn } from '@/components/PermissionBtn/index';
import { searchFormSchema, columns } from './report.data';
import { BasicModal, useModal } from '@/components/Modal';
// import { CaseView } from '@/views/demo/monitor/index';
const { createConfirm, createMessage } = useMessage();
const searchInfo = reactive<Recordable>({});
import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL } = getAppEnvConfig();
const vPrint = print;
const printObj = reactive({
id:"printMe",
popTitle: "",
beforeOpenCallback() {
},
openCallback() {
},
closeCallback() {
}
})
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
title: '案件列表',
api: getCaseInfoList,
// api:()=>1,
columns,
rowKey: 'id',
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
useSearchForm: true,
showTableSetting: true,
bordered: true,
showIndexColumn: false,
rowSelection: {
type: 'radio',
},
handleSearchInfoFn(info) {
return info;
},
// actionColumn: {
// width: 80,
// title: '操作',
// dataIndex: 'action',
// },
});
const [registerModal, { openModal, setModalProps }] = useModal();
const caseId = ref('');
function onBtnClicked(domId) {
switch (domId) {
case 'btnExport':
let rows = getSelectRows();
handlerDownLoad(rows[0].id);
break;
default:
break;
}
}
function handlerDownLoad(id){
try{
exportCaseInfo({id:id}).then(res=>{
window.open(VITE_GLOB_API_URL+"/"+res,"_blank");
});
}catch(e){
createMessage.warning("导出失败！");
console.log(e);
}
}
function viewDetail(record) {
console.log(record);
caseId.value = record.id;
openModal();
}
</script>
<style lang="less" scoped>
// ::v-deep .ant-row .ant-col{
// margin-right: 2px;
// }
// ::v-deep .ant-row .ant-col.ant-col-2 {
// margin-right: 10px;
// }
</style>

6
src/views/demo/report/page.ts Normal file
View File

@ -0,0 +1,6 @@
export { default as AccountModal } from './AccountModal.vue';
export { default as ModulesModal } from './ModulesModal.vue';
export { default as RoleDrawer } from './RoleDrawer.vue';
export { default as RoleModal } from './RoleModal.vue';

98
src/views/demo/report/report.data.ts Normal file
View File

@ -0,0 +1,98 @@
import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Switch,Tag } from 'ant-design-vue';
import { setRoleStatus } from '@/api/demo/system';
import { useMessage } from '@/hooks/web/useMessage';
type CheckedType = boolean | string | number;
export const columns: BasicColumn[] = [
{
title: '案件编号',
dataIndex: 'caseNo',
width: 200,
},{
title: '案件描述',
dataIndex: 'caseDescription',
width: 200,
},{
title: '办结状态',
dataIndex: 'handleStatusName',
width: 200,
},{
title: '上报人',
dataIndex: 'createUsername',
width: 200,
},{
title: '上报时间',
dataIndex: 'createTime',
width: 200,
}
];
export const searchFormSchema: FormSchema[] = [
{
field: 'key',
label: '关键字段',
component: 'Input',
colProps: { span: 6 },
},
{
field: 'is_intact',
component: 'Select',
label: '案件状态',
colProps: {
span: 6,
},
componentProps: {
options: [
{
label: '全部',
value: null,
key: null,
},
{
label: '未判读',
value: '0',
key: '0',
},{
label: '已提交',
value: '1',
key: '1',
},{
label: '已关闭',
value: '99',
key: '99',
},
],
},
},
];
export const formSchema: FormSchema[] = [
{
field: 'id',
label: '角色名称',
required: true,
component: 'Input',
ifShow:false,
},
{
field: 'name',
label: '角色名称',
required: true,
component: 'Input',
},
{
field: 'status',
label: '状态',
component: 'RadioButtonGroup',
defaultValue: 0,
componentProps: {
options: [
{ label: '启用', value: 0},
{ label: '停用', value: 1 },
],
},
},
];

124
src/views/demo/statistical/RecordList.vue Normal file
View File

@ -0,0 +1,124 @@
<template>
<a-table :columns="columns.col" :data-source="columns.data" size="small" height="500" bordered :pagination="pagination.pagination">
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<a @click="viewDetail(record)">详情</a>
</template>
</template>
</a-table>
<BasicModal
v-bind="$attrs"
@register="registerModal"
title="案件详情"
:canFullscreen="false"
:defaultFullscreen="true"
:showCancelBtn="false"
:showOkBtn="false"
:draggable="false"
>
<!-- <CaseView :caseId="caseId"></CaseView> -->
</BasicModal>
</template>
<script lang="ts" setup>
import { reactive,ref,defineProps,watch } from 'vue';
import { BasicModal, useModal } from '@/components/Modal';
// import { getCaseInfoList } from '@/api/demo/system';
import { getCaseInfoList } from '@/api/monitor/index';
// import { CaseView } from '@/views/demo/monitor/index';
const [registerModal, { openModal, setModalProps }] = useModal();
const props = defineProps<{
tablist:Object,
currentListQuery:Object
}>()
const caseId = ref('');
let columns = reactive({data:[],col:[{
title: '案件编号',
dataIndex: 'caseNo',
},
{
title: '社区/村',
dataIndex: 'communityName',
},
{
title: '案件描述',
dataIndex: 'caseDescription',
},{
title: '所属类型',
dataIndex: 'typeName',
},{
title: '处理人',
dataIndex: 'dealUsername',
},{
title: '处理时间',
dataIndex: 'dealTime',
},{
title: '审核人',
dataIndex: 'verifyUser',
},{
title: '审核时间',
dataIndex: 'verifyTime',
},{
title: '案件状态',
dataIndex: 'handleStatusName',
}]});
let total = ref(0)
function viewDetail(record) {
console.log(record);
caseId.value = record.id;
openModal();
}
let current = ref(1)
let pageSize = ref(10)
let pagination = reactive({
pagination: {
pageSize:pageSize, // 每页显示的条数
showSizeChanger: true, // 是否可以改变每页显示的条数
pageSizeOptions: ['10', '50', '80', '100'], // 可选的每页显示条数
showQuickJumper: true, // 是否可以快速跳转到指定页
showTotal:total=>`共${total}条`,
current: current, // 当前页数
total: total, // 总条数
onChange:handlePageChange
}
})
function handlePageChange(page,pageSize){
props.currentListQuery.page = page;
props.currentListQuery.limit = pageSize;
pagination.pagination.pageSize = pageSize;
pagination.pagination.current = page;
}
watch(()=>props.currentListQuery,(newValue,oldValue)=>{
pagination.pagination.pageSize = newValue.limit;
pagination.pagination.current = newValue.page;
handleGetList();
},{immediate:true,deep:true})
function handleGetList(){
getCaseInfoList(props.currentListQuery).then(res=>{
columns.data = res.items;
total.value = res.total;
})
}
</script>
<style scoped>
.editable-row-operations a {
margin-right: 8px;
}
::v-deep .ant-table {
height: calc( 100vh - 230px)!important;
overflow-x: auto !important;
}
</style>

534
src/views/demo/statistical/index.vue Normal file
View File

@ -0,0 +1,534 @@
<template>
<div>
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<PermissionBtn @btn-event="onBtnClicked" />
</template>
<template #bodyCell="{ column, record }">
<!-- 乡镇 -->
<template v-if="column.key === 'streetname'">
<a v-if="currentOrgLevel == 'country'" @click="getOrgCaseList(column,record)">{{record.streetname}}</a>
<span v-if="currentOrgLevel == 'street'">{{record.streetname}}</span>
</template>
<!-- 无人机发现数量 -->
<template v-if="column.key === 'allCount'">
<a @click="handlePreViewData(column,record)">{{record.allCount}}</a>
</template>
<!-- 完成外业核查数量 -->
<template v-if="column.key === 'handleStatus'">
<a @click="handlePreViewData(column,record)">{{record.handleStatus}}</a>
</template>
<!-- 24H内为核查 -->
<template v-if="column.key === 'notDealHour24'">
<a @click="handlePreViewData(column,record)">{{record.notDealHour24}}</a>
</template>
<!-- 房屋翻新 -->
<template v-if="column.key === 'typeFanxinCount'">
<a @click="handlePreViewData(column,record)">{{record.typeFanxinCount}}</a>
</template>
<!-- 房屋加盖 -->
<template v-if="column.key === 'typeJiagaiCount'">
<a @click="handlePreViewData(column,record)">{{record.typeJiagaiCount}}</a>
</template>
<!-- 房屋翻建 -->
<template v-if="column.key === 'typeFanjianCount'">
<a @click="handlePreViewData(column,record)">{{record.typeFanjianCount}}</a>
</template>
<!-- 存量建设 -->
<template v-if="column.key === 'typeCunliangCount'">
<a @click="handlePreViewData(column,record)">{{record.typeCunliangCount}}</a>
</template>
<!-- 推土 -->
<template v-if="column.key === 'typeTuituCount'">
<a @click="handlePreViewData(column,record)">{{record.typeTuituCount}}</a>
</template>
<!-- 其他 -->
<!-- <template v-if="column.key === 'typeOtherCount'">
<a @click="handlePreViewData(column,record)">{{record.typeOtherCount}}</a>
</template> -->
<!-- 合法 -->
<template v-if="column.key === 'illegal0Count'">
<a @click="handlePreViewData(column,record)">{{record.illegal0Count}}</a>
</template>
<!-- 违法 -->
<template v-if="column.key === 'illegal1Count'">
<a @click="handlePreViewData(column,record)">{{record.illegal1Count}}</a>
</template>
<!-- 伪变化 -->
<template v-if="column.key === 'illegal2Count'">
<a @click="handlePreViewData(column,record)">{{record.illegal2Count}}</a>
</template>
<!-- 外业核实后确定违法数量 -->
<template v-if="column.key === 'illegal1Count1'">
<a @click="handlePreViewData(column,record)">{{record.illegal1Count}}</a>
</template>
<!-- 违法面积 -->
<!-- <template v-if="column.key === 'illegalHandleAreaList'">
<a @click="handlePreViewData(column,record)">{{record.illegalHandleAreaList}}</a>
</template> -->
<!-- 整改销号数 -->
<template v-if="column.key === 'illegalHandle2Status'">
<a @click="handlePreViewData(column,record)">{{record.illegalHandle2Status}}</a>
</template>
<!-- 销号面积 -->
<!-- <template v-if="column.key === 'illegalHandle2AreaList'">
<a @click="handlePreViewData(column,record)">{{record.illegalHandle2AreaList}}</a>
</template> -->
<!-- 尚未整改宗数 -->
<template v-if="column.key === 'illegalHandle01Status'">
<a @click="handlePreViewData(column,record)">{{record.illegalHandle01Status}}</a>
</template>
<!-- 尚未整改面积 -->
<!-- <template v-if="column.key === 'illegalHandle01AreaList'">
<a @click="handlePreViewData(column,record)">{{record.illegalHandle01AreaList}}</a>
</template> -->
<!-- 3日内未整改完成 -->
<template v-if="column.key === 'notComplete3'">
<a @click="handlePreViewData(column,record)">{{record.notComplete3}}</a>
</template>
<!-- 7日内未整改完成 -->
<template v-if="column.key === 'notComplete7'">
<a @click="handlePreViewData(column,record)">{{record.notComplete7}}</a>
</template>
<!-- 30日内未整改完成 -->
<template v-if="column.key === 'notComplete30'">
<a @click="handlePreViewData(column,record)">{{record.notComplete30}}</a>
</template>
<!-- 30日以上未整改完成 -->
<template v-if="column.key === 'notComplete30More'">
<a @click="handlePreViewData(column,record)">{{record.notComplete30More}}</a>
</template>
</template>
</BasicTable>
<div class="data-preview-container" v-if="showRecordList">
<a-tabs v-model:activeKey="activeKey" hide-add type="editable-card" @edit="onEdit" @change="handleTabChange">
<a-tab-pane v-for="(pane,index) in tablist" :key="index.toString()" :tab="pane.streetname+'-'+pane.label" :closable="pane.closable">
</a-tab-pane>
</a-tabs>
<RecordList :tablist="tablist" :currentListQuery="currentListQuery.listQuery"></RecordList>
<div class="data-preview-container-option">
<div @click="exportList()">
<CloudDownloadOutlined />
</div>
<div @click="handleCloseRecordList()">
<MinusOutlined />
</div>
<div @click="handleCloseAllRecordList()">
<CloseOutlined />
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref,reactive } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { getStatisticalList, deleteRole } from '@/api/demo/system';
// import {DataPreivew} from './RecordList.vue'
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import { RecordList } from './page';
import { PermissionBtn } from '@/components/PermissionBtn/index';
import { columns, columnsDataPreview,searchFormSchema } from './statistical.data';
import {MinusOutlined,CloseOutlined,CloudDownloadOutlined} from '@ant-design/icons-vue'
defineOptions({ name: 'RoleManagement' });
let activeKey = ref('0')
const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal: openRoleModal }] = useModal();
const [registerModulesModal, { openModal: openModulesModal }] = useModal();
const [registerAccountModal, { openModal: openAccountModal }] = useModal();
const searchInfo = reactive<Recordable>({
countyid:null
});
const currentOrgLevel = ref<string>("country")
const showRecordList = ref<boolean>(false);
const panes = reactive<{ title: string; content: string; key: string; closable?: boolean}[]>([])
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, updateTableData}] = useTable({
// 表格名称
title: '统计报表',
// 获取数据的接口
api: getStatisticalList,
// 表单列信息 BasicColumn[]
columns,
rowKey: 'id',
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
// 使用搜索表单
useSearchForm: true,
// 显示表格设置工具
showTableSetting: true,
// 是否显示分页
pagination:false,
// 是否显示表格边框
bordered: true,
// 序号列
showIndexColumn: false,
// 勾选列
rowSelection: false,
// 搜索
handleSearchInfoFn(info) {
return info;
},
});
const [registerTableDataPreview,{ reloadDataPreview, getSelectRowsDataPreview, clearSelectedRowKeysDataPreview }] = useTable({
// 表格名称
title: '',
// 获取数据的接口
api: getStatisticalList,
// 表单列信息 BasicColumn[]
columnsDataPreview,
rowKey: 'id',
formConfig: {
labelWidth: 120,
// schemas: searchFormSchema,
},
// 使用搜索表单
useSearchForm: false,
// 显示表格设置工具
showTableSetting: false,
// 是否显示表格边框
bordered: true,
// 序号列
showIndexColumn: false,
// 勾选列
rowSelection: false,
// 搜索
handleSearchInfoFn(info) {
return info;
},
});
function handleCloseRecordList(){
showRecordList.value = false;
}
function exportList(){
createMessage.success("接口待对接！")
}
function handleCreate() {
openRoleModal(true, {
isUpdate: false,
});
}
function viewAccount(record: Recordable) {
openAccountModal(true, {
record,
});
}
function onEdit(targetKey: string){
tablist.splice(parseInt(targetKey),1);
if(tablist.length==0){
showRecordList.value = false;
}
if(parseInt(targetKey)>1){
activeKey.value = (parseInt(targetKey)-1).toString();
}else{
activeKey.value = '0';
}
currentListQuery.listQuery = tablist[activeKey.value].listQuery
}
let currentListQuery = reactive({listQuery:{}});
function handleTabChange(e){
currentListQuery.listQuery = tablist[e].listQuery
console.log(currentListQuery)
}
// function remvoeTab(){
// }
const tablist = reactive<{streetname:string;label:string;listQuery:searchListSchema}[]>([])
// 查询条件
interface searchListSchema{
is_intact?:number;
streetid?:number;
countryid?:number;
identification_start_time?:string;
identification_end_time?:string;
page?:number;
limit?:number;
is_deal?:number;
is_not_deal_hour24?:number;
is_drawback?:number;
typeid?:number;
is_illegal?:number;
is_complete?:number;
handle_status_id?:number;
out_time_flag?:number;
}
// const searchForm = reactive<searchListSchema>({
// })
function handlePreViewData(column,record:Recordable){
const searchForm = reactive<searchListSchema>({
identification_start_time:"",
identification_end_time:"",
is_intact:1,
page:1,
limit:10,
})
if(currentOrgLevel.value == 'country'){
searchForm.countryid = record.streetid;
}else if(currentOrgLevel.value == 'street'){
searchForm.streetid = record.streetid;
}
console.log("searchForm",searchForm);
switch(column.dataIndex){
case 'allCount':
break;
case 'handleStatus':
searchForm.is_deal = 1;
break;
case 'notDealHour24':
searchForm.is_not_deal_hour24 = 1;
searchForm.is_drawback = 0;
break;
case 'notDealHour24':
searchForm.is_not_deal_hour24 = 1;
searchForm.is_drawback = 0;
break;
case 'typeFanxinCount':
searchForm.typeid = record.typeid
case 'typeJiagaiCount':
searchForm.typeid = record.typeid
case 'typeFanjianCount':
searchForm.typeid = record.typeid
case 'typeCunliangCount':
searchForm.typeid = record.typeid
case 'typeTuituCount':
searchForm.typeid = record.typeid
case 'illegal0Count':
searchForm.is_illegal = 0;
searchForm.is_deal = 1;
break;
case 'illegal1Count':
searchForm.is_illegal = 1;
searchForm.is_deal = 1;
break;
case 'illegal2Count':
searchForm.is_illegal = 2;
searchForm.is_deal = 1;
break;
case 'illegal1Count1':
searchForm.is_illegal = 1;
searchForm.is_deal = 1;
break;
case 'illegalHandle2Status':
searchForm.handle_status_id = 1;
searchForm.is_deal = 1;
break;
case 'illegalHandle01Status':
searchForm.is_illegal = 1;
searchForm.is_deal = 1;
searchForm.is_complete = 0;
break;
case 'notComplete3':
searchForm.is_illegal = 1;
searchForm.is_complete = 0;
searchForm.out_time_flag = 1;
break;
case 'notComplete7':
searchForm.is_illegal = 1;
searchForm.is_complete = 0;
searchForm.out_time_flag = 2;
break;
case 'notComplete30':
searchForm.is_illegal = 1;
searchForm.is_complete = 0;
searchForm.out_time_flag = 4;
break;
case 'notComplete30More':
searchForm.is_illegal = 1;
searchForm.is_complete = 0;
searchForm.out_time_flag = 5;
break;
}
let tabItem = {
streetname:record.streetname,
label:column.title,
listQuery:searchForm,
}
tablist.push(tabItem)
activeKey.value = tablist.length > 1 ? (tablist.length-1).toString() : '0';
showRecordList.value = true;
currentListQuery.listQuery = searchForm
}
// 获取下级行政结构案件统计
function getOrgCaseList(column,record:Recordable){
if(currentOrgLevel.value == 'country'){
currentOrgLevel.value = 'street'
}else if(currentOrgLevel.value == 'street'){
currentOrgLevel.value = 'country'
}
searchInfo.countyid = record.streetid;
reload();
}
function handleCloseAllRecordList(){
for(let i=0;i<tablist.length;i++){
tablist.pop();
}
showRecordList.value = false;
}
function handleEdit() {
let rows = getSelectRows();
if (rows.length == 0) {
return createMessage.warn('请勾选一个角色进行编辑');
}
const record = rows[0];
openRoleModal(true, {
record,
isUpdate: true,
});
}
async function handleDelete() {
let rows = getSelectRows();
if (rows.length == 0) {
return createMessage.warn('请勾选一个角色进行删除');
}
const query = [rows[0].id];
createConfirm({
iconType: 'info',
title: '删除',
content: '确定要删除当前角色吗',
onOk: async () => {
const data = await deleteRole(query);
if (data) {
handleSuccess();
createMessage.success('删除成功');
} else {
createMessage.error('删除失败');
}
},
});
}
function handlePrint(){
}
function handleExport(){
createMessage.success("接口待对接！")
}
function handleSuccess() {
clearSelectedRowKeys();
reload();
reloadDataPreview();
}
function onBtnClicked(domId) {
switch (domId) {
case 'btnBack':
currentOrgLevel.value = 'street'
getOrgCaseList({},{streetid:null});
break;
case 'btnAdd':
handleCreate();
break;
case 'btnEdit':
handleEdit();
break;
case 'btnDelete':
handleDelete();
break;
case 'btnModules':
let rows = getSelectRows();
if (rows.length == 0) {
return createMessage.warn('请勾选一个角色进行编辑');
}
const record = rows[0];
openModulesModal(true, {
record,
});
break;
case 'btnPrint':
handlePrint();
break;
case 'btnExport':
handleExport();
break;
default:
break;
}
}
</script>
<style>
.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;
}
</style>

3
src/views/demo/statistical/page.ts Normal file
View File

@ -0,0 +1,3 @@
export { default as RecordList} from './RecordList.vue'

228
src/views/demo/statistical/record.data.ts Normal file
View File

@ -0,0 +1,228 @@
import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Switch,Tag } from 'ant-design-vue';
import { setRoleStatus } from '@/api/demo/system';
import { useMessage } from '@/hooks/web/useMessage';
type CheckedType = boolean | string | number;
export const columnsDataPreview: BasicColumn[] = [
{
title: '机构',
dataIndex: 'streetname',
width: 120,
},{
title: '无人机发现数量',
dataIndex: 'allCount',
width: 120,
},{
title: '外业图斑核查情况',
children:[
{
title: '完成外业核查数量',
dataIndex: 'handleStatus',
width: 120,
},{
title: '24h内未核查',
dataIndex: 'notDealHour24',
width: 120,
}
]
},{
title: '下发疑似图斑类型',
children:[
{
title: '房屋翻新',
dataIndex: 'typeFanxinCount',
width: 120,
},{
title: '房屋加盖',
dataIndex: 'typeJiagaiCount',
width: 120,
},{
title: '房屋翻建',
dataIndex: 'typeFanjianCount',
width: 120,
},{
title: '存量建设',
dataIndex: 'typeCunliangCount',
width: 120,
},{
title: '推土',
dataIndex: 'typeTuituCount',
width: 120,
},{
title: '其他',
dataIndex: 'typeOtherCount',
width: 120,
}
]
},{
title: '图斑判定',
children:[
{
title: '合法',
dataIndex: 'illegal0Count',
width: 120,
},{
title: '违法',
dataIndex: 'illegal1Count',
width: 120,
},{
title: '伪变化',
dataIndex: 'illegal2Count',
width: 120,
}
]
},{
title: '新增违法图斑整改情况',
dataIndex: 'handle_status_name',
children:[
{
title: '外业核实后确定违法数',
dataIndex: 'beginTime',
width: 120,
},{
title: '违法面积',
dataIndex: 'illegalHandleAreaList',
width: 120,
},{
title: '整改销号数',
dataIndex: 'beginTime',
width: 120,
},{
title: '销号面积',
dataIndex: 'beginTime',
width: 120,
},{
title: '尚未整改宗数',
dataIndex: 'beginTime',
width: 120,
},{
title: '未整改面积',
dataIndex: 'beginTime',
width: 120,
}
]
},{
title: '违法图斑整改进度情况',
children:[
{
title: '3日内未整改完成',
dataIndex: 'notComplete3',
},{
title: '7日内未整改完成',
dataIndex: 'notComplete7',
},{
title: '30日内未整改完成',
dataIndex: 'notComplete30',
},{
title: '30日以上未整改完成',
dataIndex: 'notComplete30More',
}
]
},{
title: '百分制考核计分',
dataIndex: 'handle_status_name',
children:[
{
title: '24h外业核查计分',
dataIndex: 'beginTime',
width: 120,
},{
title: '整改进度计分',
dataIndex: 'beginTime',
width: 120,
}
]
},{
title: '备注',
dataIndex: 'createusername',
width: 200,
}
];
export const columns: BasicColumn[] = [
{
title: '案件编号',
dataIndex: 'case_no',
width: 120,
}
,{
title: '村/社区',
dataIndex: 'communityname',
width: 120,
},{
title: '案件描述',
dataIndex: 'case_description',
width: 120,
},{
title: '所属类型',
dataIndex: 'typename',
width: 120,
},{
title: '处理人',
dataIndex: 'deal_username',
width: 120,
},{
title: '处理时间',
dataIndex: 'deal_time',
width: 120,
},
{
title: '审核人',
dataIndex: 'verifyuser',
width: 120,
},{
title: '审核时间',
dataIndex: 'verifytime',
width: 120,
},{
title: '案件状态',
dataIndex: 'handle_status_name',
width: 120,
}
];
export const searchFormSchema: FormSchema[] = [
{
field: '[startDate, endDate]',
label: '日期范围',
component: 'RangePicker',
colProps: { span: 8 },
componentProps: {
format: 'YYYY-MM-DD',
placeholder: ['开始日期', '结束日期'],
},
},
];
export const formSchema: FormSchema[] = [
{
field: 'id',
label: '角色名称',
required: true,
component: 'Input',
ifShow:false,
},
{
field: 'name',
label: '角色名称',
required: true,
component: 'Input',
},
{
field: 'status',
label: '状态',
component: 'RadioButtonGroup',
defaultValue: 0,
componentProps: {
options: [
{ label: '启用', value: 0},
{ label: '停用', value: 1 },
],
},
},
];

334
src/views/demo/statistical/statistical.data.ts Normal file
View File

@ -0,0 +1,334 @@
import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Switch,Tag } from 'ant-design-vue';
import { setRoleStatus } from '@/api/demo/system';
import { useMessage } from '@/hooks/web/useMessage';
type CheckedType = boolean | string | number;
export const columnsDataPreview: BasicColumn[] = [
{
title: '机构',
dataIndex: 'streetname',
width: 120,
},{
title: '无人机发现数量',
dataIndex: 'allCount',
width: 120,
},{
title: '外业图斑核查情况',
children:[
{
title: '完成外业核查数量',
dataIndex: 'handleStatus',
width: 120,
},{
title: '24h内未核查',
dataIndex: 'notDealHour24',
width: 120,
}
]
},{
title: '下发疑似图斑类型',
dataIndex: '',
children:[
{
title: '房屋翻新',
dataIndex: 'typeFanxinCount',
width: 120,
},{
title: '房屋加盖',
dataIndex: 'typeJiagaiCount',
width: 120,
},{
title: '房屋翻建',
dataIndex: 'typeFanjianCount',
width: 120,
},{
title: '存量建设',
dataIndex: 'typeCunliangCount',
width: 120,
},{
title: '推土',
dataIndex: 'typeTuituCount',
width: 120,
},{
title: '其他',
dataIndex: 'typeOtherCount',
width: 120,
}
]
},{
title: '图斑判定',
dataIndex:"1",
children:[
{
title: '合法',
dataIndex: 'illegal0Count',
width: 120,
},{
title: '违法',
dataIndex: 'illegal1Count',
width: 120,
},{
title: '伪变化',
dataIndex: 'illegal2Count',
width: 120,
}
]
},{
title: '新增违法图斑整改情况',
dataIndex: '2',
children:[
{
title: '外业核实后确定违法数',
dataIndex: 'illegal1Count1',
width: 120,
},{
title: '违法面积',
dataIndex: 'illegalHandleAreaList',
width: 120,
},{
title: '整改销号数',
dataIndex: 'illegalHandle2Status',
width: 120,
},{
title: '销号面积',
dataIndex: 'illegalHandle2AreaList',
width: 120,
},{
title: '尚未整改宗数',
dataIndex: 'illegalHandle01Status',
width: 120,
},{
title: '未整改面积',
dataIndex: 'illegalHandle01AreaList',
width: 120,
}
]
},{
title: '违法图斑整改进度情况',
children:[
{
title: '3日内未整改完成',
dataIndex: 'notComplete3',
},{
title: '7日内未整改完成',
dataIndex: 'notComplete7',
},{
title: '30日内未整改完成',
dataIndex: 'notComplete30',
},{
title: '30日以上未整改完成',
dataIndex: 'notComplete30More',
}
]
},{
title: '百分制考核计分',
dataIndex: 'handle_status_name',
children:[
{
title: '24h外业核查计分',
dataIndex: 'beginTime',
width: 120,
},{
title: '整改进度计分',
dataIndex: 'beginTime',
width: 120,
}
]
},
{
title: '备注',
dataIndex: 'mask',
}
];
export const columns: BasicColumn[] = [
{
title: '机构',
dataIndex: 'streetname',
width: 120,
},{
title: '无人机发现数量',
dataIndex: 'allCount',
width: 120,
},{
title: '外业图斑核查情况',
children:[
{
title: '完成外业核查数量',
dataIndex: 'handleStatus',
width: 120,
},{
title: '24h内未核查',
dataIndex: 'notDealHour24',
width: 120,
}
]
},{
title: '下发疑似图斑类型',
dataIndex: '',
children:[
{
title: '房屋翻新',
dataIndex: 'typeFanxinCount',
width: 120,
},{
title: '房屋加盖',
dataIndex: 'typeJiagaiCount',
width: 120,
},{
title: '房屋翻建',
dataIndex: 'typeFanjianCount',
width: 120,
},{
title: '存量建设',
dataIndex: 'typeCunliangCount',
width: 120,
},{
title: '推土',
dataIndex: 'typeTuituCount',
width: 120,
},{
title: '其他',
dataIndex: 'typeOtherCount',
width: 120,
}
]
},{
title: '图斑判定',
dataIndex:"1",
children:[
{
title: '合法',
dataIndex: 'illegal0Count',
width: 120,
},{
title: '违法',
dataIndex: 'illegal1Count',
width: 120,
},{
title: '伪变化',
dataIndex: 'illegal2Count',
width: 120,
}
]
},{
title: '新增违法图斑整改情况',
dataIndex: '2',
children:[
{
title: '外业核实后确定违法数',
dataIndex: 'illegal1Count1',
width: 120,
},{
title: '违法面积',
dataIndex: 'illegalHandleAreaList',
width: 120,
},{
title: '整改销号数',
dataIndex: 'illegalHandle2Status',
width: 120,
},{
title: '销号面积',
dataIndex: 'illegalHandle2AreaList',
width: 120,
},{
title: '尚未整改宗数',
dataIndex: 'illegalHandle01Status',
width: 120,
},{
title: '未整改面积',
dataIndex: 'illegalHandle01AreaList',
width: 120,
}
]
},{
title: '违法图斑整改进度情况',
children:[
{
title: '3日内未整改完成',
dataIndex: 'notComplete3',
},{
title: '7日内未整改完成',
dataIndex: 'notComplete7',
},{
title: '30日内未整改完成',
dataIndex: 'notComplete30',
},{
title: '30日以上未整改完成',
dataIndex: 'notComplete30More',
}
]
},{
title: '百分制考核计分',
dataIndex: 'handle_status_name',
children:[
{
title: '24h外业核查计分',
dataIndex: 'beginTime',
width: 120,
},{
title: '整改进度计分',
dataIndex: 'beginTime',
width: 120,
}
]
},
{
title: '备注',
dataIndex: 'mask',
}
];
export const searchFormSchema: FormSchema[] = [
// {
// field: 'key',
// label: '关键字段',
// component: 'Input',
// colProps: { span: 6 },
// },
{
field: '[identification_start_time, identification_end_time]',
label: '日期范围',
component: 'RangePicker',
colProps: { span: 8 },
componentProps: {
format: 'YYYY-MM-DD',
placeholder: ['开始日期', '结束日期'],
},
},
];
export const formSchema: FormSchema[] = [
{
field: 'id',
label: '角色名称',
required: true,
component: 'Input',
ifShow:false,
},
{
field: 'name',
label: '角色名称',
required: true,
component: 'Input',
},
{
field: 'status',
label: '状态',
component: 'RadioButtonGroup',
defaultValue: 0,
componentProps: {
options: [
{ label: '启用', value: 0},
{ label: '停用', value: 1 },
],
},
},
];

13
src/views/demo/workflow/task/process/audit.vue
View File

@ -11,7 +11,7 @@
<a-layout>
<a-layout>
<a-layout-content>
<a-tabs v-model:activeKey="activeName" @change="changeActive" type="card">
<a-tabs v-model:activeKey="activeName" tabPosition="bottom" @change="changeActive" type="card">
<a-tab-pane
key="form"
:tab="
@ -46,7 +46,7 @@
<AsyncComponent ref="pcForm" />
</a-tab-pane>
<a-tab-pane key="flow" tab="流程信息" force-render>
<div class="process-design" :style="'display: flex; height:' + designerData.height">
<div class="process-design" style="display: flex; height: calc( 100vh - 350px)">
<process-viewer
v-if="processVisble"
:key="`designer-${id}`"
@ -57,7 +57,8 @@
/>
</div>
</a-tab-pane>
<a-tab-pane key="record" tab="流转记录" force-render>
<a-tab-pane key="record"
tab="流转记录" force-render>
<div :style="'padding:10px 0 40px 0;overflow:auto; height:' + designerData.height">
<a-timeline>
<a-timeline-item
@ -273,7 +274,7 @@
const designerData: designerDataType = reactive({
loading: false,
xmlString: '',
height: document.documentElement.clientHeight - 300.5 + 'px;',
height: document.documentElement.clientHeight - 350 + 'px;',
midVisible: false,
isCustmerTitle: false,
nodeUsers: [],
@ -789,7 +790,9 @@
}
function getFormSuccess(formData) {
handlerShowGeomtrys(designerData.formCurrentNode, formData);
if(mapConfig.value.isShowMap){
handlerShowGeomtrys(designerData.formCurrentNode, formData);
}
}
async function handlerShowGeomtrys(currentNode, formData) {

8
src/views/demo/workflow/task/process/look.vue
View File

@ -12,7 +12,7 @@
<a-layout>
<a-layout>
<a-layout-content>
<a-tabs v-model:activeKey="activeName" @change="changeActive" type="card">
<a-tabs v-model:activeKey="activeName" @change="changeActive" type="card" >
<a-tab-pane
key="form"
:tab="
@ -429,7 +429,9 @@
}
function getFormSuccess(formData){
handlerShowGeomtrys(designerData.formCurrentNode,formData);
if(mapConfig.value.isShowMap){
handlerShowGeomtrys(designerData.formCurrentNode, formData);
}
}
async function handlerShowGeomtrys(currentNode,formData) {
@ -484,7 +486,7 @@
}
}
function onMapboxLoad() {
}
onBeforeMount(() => {
getDetailInfo();