优化详情视频，案件判读接口对接，图片上传页面搭建

.env.development

@@ -10,7 +10,7 @@ VITE_GLOB_API_URL=http://192.168.10.104:9020
 
 
 # File upload address， optional
-VITE_GLOB_UPLOAD_URL=http://192.168.10.104:9011
+VITE_GLOB_UPLOAD_URL=http://60.213.14.14:6070
 
 # Interface prefix
 VITE_GLOB_API_URL_PREFIX=

package.json

@@ -130,6 +130,7 @@
     "vxe-table-plugin-export-xlsx": "^3.1.0",
     "xe-utils": "^3.5.14",
     "xlsx": "^0.18.5",
+    "vue-video-player": "^5.0.2",
     "xml-js": "^1.6.11"
   },
   "devDependencies": {

src/api/caseauditing/index.ts

@@ -0,0 +1,52 @@
+import { defHttp } from '@/utils/http/axios';
+import {
+  DemoOptionsItem,
+  OrgItemList,
+  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', //添加收藏案件
+  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?: 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 });

src/api/caseauditing/model/index.ts

@@ -0,0 +1,75 @@
+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 {
+  name: string;
+}
+
+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>;

src/api/demo/model/queryModal.ts

@@ -0,0 +1,11 @@
+import { BasicFetchResult } from '@/api/model/baseModel';
+
+// 常用返回消息
+export interface responses {
+  code: number;
+  columnHeaders: [];
+  count: number;
+  result: boolean;
+  msg: string;
+}
+export type responsesmodel = BasicFetchResult<responses>;

src/api/demo/query.ts

@@ -0,0 +1,100 @@
+import { responsesmodel } from './model/queryModal';
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  // complete-分页获取列表数据
+  Get_LoadCaseInfoList = '/api/DroneCaseinfo/LoadCaseInfoList',
+  // complete-
+  Get_LoadList = '/api/Categorys/LoadList',
+  // complete-
+  Get_load = '/api/categorys/load',
+  // complete-
+  Get_OrgList = '/api/Orgs/OrgList',
+  // complete-导出
+  Get_ExportCaseInfoList = '/api/DroneCaseinfo/ExportCaseInfoList', 
+
+  // 案件详情
+  Get_getCaseInfo = '/api/DroneCaseinfo/GetCaseInfo',
+  // 获取案件处理流程
+  Get_GetCaseFlowLog = '/api/DroneCaseinfo/GetCaseFlowLog',
+  // 处理详情
+  Get_GetDroneCaseDeal = '/api/DroneCaseinfo/GetDroneCaseDeal',
+}
+
+// complete-分页获取列表数据
+export function fun_LoadDataBaseInfo(params) {
+  params.typeid = params.value.typeid;
+  params.org = params.value.org;
+  params.is_illegal = params.value.is_illegal;
+  params.case_no = params.value.case_no;
+  params.key = params.value.key;
+  params.deal_username = params.value.deal_username;
+  params.verifyuser = params.value.verifyuser;
+  params.report_start_time = params.value.report_start_time;
+  params.report_end_time = params.value.report_end_time;
+  params.countyid = params.value.countyid;
+  params.streetid = params.value.streetid;
+  params.communityid = params.value.communityid;
+  delete params.value;
+
+  return defHttp.get<responsesmodel>({
+    url: Api.Get_LoadCaseInfoList,
+    params,
+  });
+}
+
+// complete-分页获取列表数据
+export function fun_LoadList(params) {
+  return defHttp.get<responsesmodel>({
+    url: Api.Get_LoadList,
+    params,
+  });
+}
+
+// complete-分页获取列表数据
+export function fun_load(params) {
+  return defHttp.get<responsesmodel>({
+    url: Api.Get_load,
+    params,
+  });
+}
+
+// complete-分页获取列表数据
+export function fun_OrgList(params) {
+  return defHttp.get<responsesmodel>({
+    url: Api.Get_OrgList,
+    params,
+  });
+}
+
+// complete-导出
+export function fun_ExportCaseInfoList(params) {
+  return defHttp.get<responsesmodel>({
+    url: Api.Get_ExportCaseInfoList,
+    params,
+  });
+}
+
+// 案件详情
+export function fun_getCaseInfo(params) {
+  return defHttp.get<responsesmodel>({
+    url: Api.Get_getCaseInfo,
+    params,
+  });
+}
+
+// 处理详情
+export function fun_GetCaseFlowLog(params) {
+  return defHttp.get<responsesmodel>({
+    url: Api.Get_GetCaseFlowLog,
+    params,
+  });
+}
+
+// 获取案件处理流程
+export function fun_GetDroneCaseDeal(params) {
+  return defHttp.get<responsesmodel>({
+    url: Api.Get_GetDroneCaseDeal,
+    params,
+  });
+}

src/api/demo/system.ts

@@ -10,7 +10,7 @@ import {
   AccountListGetResultModel,
   RolePageListGetResultModel,
   RoleListGetResultModel,
-  addDept
+  addDept,
 } from './model/systemModel';
 import { defHttp } from '@/utils/http/axios';
 
@@ -18,7 +18,7 @@ enum Api {
   DeptList = '/api/Orgs/OrgsTree',
   AccountList = '/api/users/load',
   AddAccount = '/api/Users/AddOrUpdate',
-  DeleteAccount = "/api/Users/Delete",
+  DeleteAccount = '/api/Users/Delete',
   AddDept = '/api/Orgs/Add',
   UpdateDept = '/api/Orgs/Update',
   DeleteDept = '/api/Orgs/Delete',
@@ -85,186 +85,139 @@ export const loadByRole = (params?: DeptListItem) =>
   defHttp.get<DeptListGetResultModel>({ url: Api.LoadByRole, params });
 
 export function addAccount(params) {
-  return defHttp.post(
-    {
-      url: Api.AddAccount,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.AddAccount,
+    params,
+  });
 }
 export function deleteAccount(params) {
-  return defHttp.post(
-    {
-      url: Api.DeleteAccount,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.DeleteAccount,
+    params,
+  });
 }
 
 export function addPosGroup(params) {
-  return defHttp.post(
-    {
-      url: Api.AddPosGroup,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.AddPosGroup,
+    params,
+  });
 }
 export function orgPosGroup(params) {
-  return defHttp.post(
-    {
-      url: Api.OrgPosGroup,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.OrgPosGroup,
+    params,
+  });
 }
 export function userRoles(params) {
-  return defHttp.post(
-    {
-      url: Api.UserRoles,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.UserRoles,
+    params,
+  });
 }
 
 export function userOrgs(params) {
-  return defHttp.post(
-    {
-      url: Api.UserOrgs,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.UserOrgs,
+    params,
+  });
 }
 
 export function addPosition(params) {
-  return defHttp.post(
-    {
-      url: Api.AddPosition,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.AddPosition,
+    params,
+  });
 }
 
 export function updatePosition(params) {
-  return defHttp.post(
-    {
-      url: Api.UpdatePosition,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.UpdatePosition,
+    params,
+  });
 }
 
-
 export function addDept(params) {
-  return defHttp.post(
-    {
-      url: Api.AddDept,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.AddDept,
+    params,
+  });
 }
 export function updateDept(params) {
-  return defHttp.post(
-    {
-      url: Api.UpdateDept,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.UpdateDept,
+    params,
+  });
 }
 export function deleteDept(params) {
-  return defHttp.post(
-    {
-      url: Api.DeleteDept,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.DeleteDept,
+    params,
+  });
 }
 export function addMenu(params) {
-  return defHttp.post(
-    {
-      url: Api.AddMenu,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.AddMenu,
+    params,
+  });
 }
 export function addButton(params) {
-  return defHttp.post(
-    {
-      url: Api.AddButton,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.AddButton,
+    params,
+  });
 }
 export function editMenu(params) {
-  return defHttp.post(
-    {
-      url: Api.EditMenu,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.EditMenu,
+    params,
+  });
 }
 export function editButton(params) {
-  return defHttp.post(
-    {
-      url: Api.EditButton,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.EditButton,
+    params,
+  });
 }
 export function deleteMenu(params) {
-  return defHttp.post(
-    {
-      url: Api.DeleteMenu,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.DeleteMenu,
+    params,
+  });
 }
 export function deleteButton(params) {
-  return defHttp.post(
-    {
-      url: Api.DeleteButton,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.DeleteButton,
+    params,
+  });
 }
 
 export function addRole(params) {
-  return defHttp.post(
-    {
-      url: Api.AddRole,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.AddRole,
+    params,
+  });
 }
 export function updateRole(params) {
-  return defHttp.post(
-    {
-      url: Api.UpdateRole,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.UpdateRole,
+    params,
+  });
 }
 export function deleteRole(params) {
-  return defHttp.post(
-    {
-      url: Api.DeleteRole,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.DeleteRole,
+    params,
+  });
 }
 export function assignModule(params) {
-  return defHttp.post(
-    {
-      url: Api.AssignModule,
-      params,
-    },
-  );
+  return defHttp.post({
+    url: Api.AssignModule,
+    params,
+  });
 }
 
-
-
-
-export const getMenuDetail = (params?: MenuParams) =>
-  defHttp.get({ url: Api.MenuDetail, params });
+export const getMenuDetail = (params?: MenuParams) => defHttp.get({ url: Api.MenuDetail, params });
 
 export const getMenuList = (params?: MenuParams) =>
   defHttp.get<MenuListGetResultModel>({ url: Api.MenuList, params });
@@ -287,10 +240,6 @@ export const isAccountExist = (account: string) =>
 export const getLoadPositionByOrg = (params?: PositionByOrgParams) =>
   defHttp.get<RolePageListGetResultModel>({ url: Api.LoadPositionByOrg, params });
 
-export const getLoadDataBaseLinkTree = () =>
-  defHttp.get({ url: Api.LoadDataBaseLinkTree });
-
-export const getPosInfo = (params) =>
-  defHttp.get({ url: Api.GetPosInfo, params });
-
+export const getLoadDataBaseLinkTree = () => defHttp.get({ url: Api.LoadDataBaseLinkTree });
 
+export const getPosInfo = (params) => defHttp.get({ url: Api.GetPosInfo, params });

src/api/monitor/index.ts

@@ -5,6 +5,7 @@ import {
   flowLogModel,
   droneCaseDealModel,
   droneCaseDealParams,
+  picListTaskParams,
 } from './model/index';
 
 enum Api {
@@ -18,6 +19,16 @@ enum Api {
   LoadCaseInfoList = '/api/DroneCaseinfo/LoadCaseInfoList',
   // 获取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',
 }
 
 /**
@@ -50,3 +61,30 @@ export function getCaseInfoList(params?: caseFlowLogParams) {
 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,
+  });
+}

src/api/monitor/model/index.ts

@@ -32,3 +32,8 @@ export type droneCaseDealModel = {
   agree_checkout_pic_list?: any;
   checkout_pic_list?: any;
 };
+
+export interface picListTaskParams {
+  beginDate?: string;
+  endDate?: string;
+}

src/api/summaryverification/index.ts

@@ -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 });

src/api/summaryverification/model/index.ts

@@ -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>;

src/api/sys/categories.ts

@@ -0,0 +1,31 @@
+import { defHttp } from '@/utils/http/axios';
+enum Api{
+  getLeftTree = '/api/SysDataItem/Load',
+  getRightTable = '/api/SysDataItemDetail/Load',
+  addLeftItem = '/api/SysDataItem/Add',
+  addRightItem = '/api/SysDataItemDetail/Add',
+  delLeftItem = '/api/SysDataItem/Delete',
+  delRightItem = '/api/SysDataItemDetail/Delete',
+  editRightItem = '/api/SysDataItemDetail/Update',
+}
+export function getLeftTree(params) {
+  return defHttp.get({ url: Api.getLeftTree, params });
+}
+export function getRightTable(params) {
+  return defHttp.get({ url: Api.getRightTable, params });
+}
+export function addLeftItem(params){
+  return defHttp.post({ url: Api.addLeftItem, params });
+}
+export function addRightItem(params){
+  return defHttp.post({ url: Api.addRightItem + '?code=' + params.itemCode, params });
+}
+export function delLeftItem(params){
+  return defHttp.post({ url: Api.delLeftItem + '?id=' + params.id });
+}
+export function delRightItem(params){
+  return defHttp.post({ url: Api.delRightItem + '?id=' + params.id });
+}
+export function editRightItem(params){
+  return defHttp.post({ url: Api.editRightItem, params });
+}

src/api/sys/leadreporting.ts

@@ -0,0 +1,7 @@
+import { defHttp } from '@/utils/http/axios';
+enum Api{
+  LoadPage = '/api/DroneClueReporting/QueryClueReporting',
+}
+export function getLoadPage(params) {
+  return defHttp.get({ url: Api.LoadPage, params });
+}

src/components/MapboxMaps/index.vue

@@ -32,10 +32,12 @@
   const props = defineProps<MapboxOptionsInterface>();
 
   let nextMapControl: Array<any> = reactive([]);
-  nextMapControl = props.control.map((item) => {
-    console.log('item::: ', item);
-    return MapControlConfig[item];
-  });
+  nextMapControl = props.control
+    ? props.control.map((item) => {
+        console.log('item::: ', item);
+        return MapControlConfig[item];
+      })
+    : [];
   console.log('nextMapControl::: ', nextMapControl);
 
   // 定义地图容器
@@ -67,6 +69,8 @@
       language: 'zh-cmn',
       projection: 'equirectangular', // wgs84参考系
       style: MapboxDefaultStyle,
+      maxZoom: 22,
+      minZoom: 6,
       ...props.mapOptions,
     });
   };

src/components/MapboxMaps/src/MP.ts

@@ -198,9 +198,9 @@ export class MP extends BaseMP {
     polygon: string;
   };
   currentMouseLocation: null;
-  correctionMouseLocation: null;
+  correctionMouseLocation: any;
   clickCount: number;
-  clickTimeout: null;
+  clickTimeout: any;
   constructor(map) {
     super(map);
     this.drawModelChoose = {
@@ -270,8 +270,12 @@ export class MP extends BaseMP {
       this._addOrUpdateSource(lastGSPL, this.drawCurrentId.polygon);
     }
   };
+  //绘制当前的layer
   _currentDrawLayer = () => {
+    // 如果是点，直接绘制点
     this._addLayer(this.drawCurrentId.point, this.drawCurrentId.point, 'Point', CIRCLE_STYLE);
+    // 如果是线，在点的基础上，加上线
+    // 如果是面，在线的基础上，加上面
     if (
       this.drawModel === this.drawModelChoose.LineString ||
       this.drawModel === this.drawModelChoose.Polygon
@@ -385,6 +389,9 @@ export class MP extends BaseMP {
       // 在这里编写双击事件的操作
       console.log('在这里编写双击事件的操作');
       if (this.drawModel === this.drawModelChoose.LineString) {
+        _this.drawLocal.push(e.lngLat);
+        _this._currentDrawSource();
+        _this._currentDrawLayer();
         this.drawIsFinish();
       }
     }

src/components/MapboxMaps/src/config.ts

@@ -21,7 +21,7 @@ export const MapboxDefaultStyle = {
       type: 'raster',
       source: 'raster-tiles',
       minzoom: 0,
-      maxzoom: 22,
+      maxzoom: 18,
     },
   ],
 };

src/main.ts

@@ -16,41 +16,38 @@ import { router, setupRouter } from '@/router';
 import { setupRouterGuard } from '@/router/guard';
 import { setupStore } from '@/store';
 
-import { injectState, key } from "@/mars/common/store/widget"
-import store from "./mars/install/widget-store"
-
+import { injectState, key } from '@/mars/common/store/widget';
+import store from './mars/install/widget-store';
 
+import VideoPlayer from 'vue-video-player';
+import 'vue-video-player/src/custom-theme.css';
 
 import App from './App.vue';
 
-import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"
-import "mars3d/dist/mars3d.css"
-
-
-import MarsUIInstall from "@/mars/components/mars-ui"
-import "@/mars/components/mars-ui/common"
-
-import ElementPlus from 'element-plus'
-import 'element-plus/theme-chalk/index.css'
-import VForm3 from '@/../lib/vform/designer.umd.js'
-import '../lib/vform/designer.style.css'
-
+import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css';
+import 'mars3d/dist/mars3d.css';
 
+import MarsUIInstall from '@/mars/components/mars-ui';
+import '@/mars/components/mars-ui/common';
 
+import ElementPlus from 'element-plus';
+import 'element-plus/theme-chalk/index.css';
+import VForm3 from '@/../lib/vform/designer.umd.js';
+import '../lib/vform/designer.style.css';
 
 import 'bpmn-js/dist/assets/diagram-js.css';
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
 
-import Antd from "ant-design-vue"
+import Antd from 'ant-design-vue';
 
 async function bootstrap() {
   const app = createApp(App);
-  app.use(Antd)
+  app.use(Antd);
 
   // Configure store
   // 配置 store
   setupStore(app);
-  
+
   // Initialize internal system configuration
   // 初始化内部系统配置
   initAppConfigStore();
@@ -87,10 +84,10 @@ async function bootstrap() {
   // 注册Mars3d UI组件
   MarsUIInstall(app);
   app.use(injectState(store), key);
-  app.use(ElementPlus)
-  app.use(VForm3)  //全局注册VForm3，同时注册了v-form-designer、v-form-render等组件
+  app.use(ElementPlus);
+  app.use(VForm3);
+  app.use(VideoPlayer);
   app.mount('#app');
-  
 }
 
 bootstrap();

src/views/dashboard/analysis/index.vue

@@ -2,7 +2,7 @@
   <div class="w-full" style="height: 100%">
     <MapboxMaps
       :mapOptions="mapOptions"
-      :control="mapControl"
+      :control="mapDrawControl"
       @map-on-load="mapOnLoad"
       @map-draw="handlerMapDraw"
     />
@@ -16,7 +16,7 @@
     center: [116.404, 39.905],
     zoom: 8,
   };
-  const mapControl: DrawingType[] = [DrawingType.Point];
+  const mapDrawControl: DrawingType[] = [DrawingType.Polygon, DrawingType.Line];
   const mapOnLoad = (map) => {
     // map 对象
     console.log('map::: ', map);

src/views/demo/Categories/Button/index.vue

@@ -0,0 +1,54 @@
+<template>
+   <a-button :size="props.size" :class="`${props.type}`" :type="getType(props.type)" :icon="h(getIcon(props.type))">{{props.text}}</a-button>
+</template>
+
+<script setup lang="ts">
+import {defineProps,h} from "vue"
+import { PlusOutlined,FormOutlined,DeleteOutlined,SearchOutlined } from '@ant-design/icons-vue';
+const props = defineProps(['text','type','size'])
+const getIcon = (icon:string) => {
+  switch (icon) {
+    case 'add':
+      return PlusOutlined
+    case 'edit':
+      return FormOutlined
+    case 'del':
+      return DeleteOutlined
+    case 'search':
+      return SearchOutlined
+    default:
+      return null
+  }
+}
+const getType = (type:string) => {
+  switch (type) {
+    case 'search':
+      return 'default'
+    default:
+      return 'primary'
+  }
+}
+</script>
+<style lang="scss" scoped>
+.add{
+  background-color: #409167;
+}
+.add:hover{
+  background-color: #66a785;
+}
+.edit{
+  background-color: #0076c8
+}
+.edit:hover{
+  background-color: #3391d3;
+}
+.del{
+  background-color: #d63737
+}
+.del:hover{
+  background-color: #de5f5f;
+}
+.position{
+  margin-left:10px
+}
+</style>

src/views/demo/Categories/Modal/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="categories-modal-container">
+    <a-form
+      ref="formRef"
+      :model="props.modalData.data"
+      :rules="props.modalData.type.indexOf('left') > -1? rules: rightRules"
+      labelAlign="right"
+      :label-col="{ span: 5 }"
+    >
+      <template v-if="props.modalData.type.indexOf('left') > -1">
+        <a-form-item label="分类ID" name="itemCode">
+          <a-input v-model:value="props.modalData.data.itemCode" />
+        </a-form-item>
+        <a-form-item label="分类名称" name="itemName">
+          <a-input v-model:value="props.modalData.data.itemName" />
+        </a-form-item>
+      </template>
+      <template v-else>
+        <a-form-item label="ID" name="id">
+          <a-input v-model:value="props.modalData.data.id" disabled  placeholder="系统自动处理"/>
+        </a-form-item>
+        <a-form-item label="分类标识" name="isDefault">
+          <a-input v-model:value="props.modalData.data.isDefault" />
+        </a-form-item>
+        <a-form-item label="名称" name="itemName">
+          <a-input v-model:value="props.modalData.data.itemName" />
+        </a-form-item>
+        <a-form-item label="值" name="itemValue">
+          <a-input v-model:value="props.modalData.data.itemValue" />
+        </a-form-item>
+        <a-form-item label="是否可用" name="enabledMark">
+          <a-select v-model:value="props.modalData.data.enabledMark">
+            <a-select-option value="0">停用</a-select-option>
+            <a-select-option value="1">正常</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="排序号" name="sortCode">
+          <a-input-number v-model:value="props.modalData.data.sortCode" addon-before="-" addon-after="+" :min="1" :max="10"></a-input-number>
+        </a-form-item>
+        <a-form-item label="描述" name="description">
+          <a-input v-model:value="props.modalData.data.description" />
+        </a-form-item>
+        <a-form-item label="所属分类ID" name="itemCode">
+          <a-select v-model:value="props.modalData.data.itemCode">
+            <a-select-option v-for="item in props.lTree" :value="item.key">{{ item.title }}</a-select-option>
+          </a-select>
+        </a-form-item>
+      </template>
+    </a-form>
+    <div class="modal-footer">
+      <a-button style="margin-right: 10px;" @click="closeModal">取消</a-button>
+      <a-button type="primary" @click="submit">确定</a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {defineProps, defineEmits,ref} from "vue"
+const props = defineProps(['modalData','modalForm','lTree'])
+const emit = defineEmits(['closeModal','submit'])
+const formRef = ref()
+const rules = {
+  itemCode: [
+    { required: true, message: '分类ID不能为空', trigger: 'blur' },
+  ],
+  itemName: [
+    { required: true, message: '分类名称不能为空', trigger: 'blur' },
+  ],
+}
+const rightRules = {
+  itemName: [
+    { required: true, message: '分类名称不能为空', trigger: 'blur' },
+  ],
+  itemCode: [
+    { required: true, message: '所属分类不能为空', trigger: 'blur' },
+  ],
+}
+const submit = () => {
+  formRef.value.validate().then(() => {
+    emit('submit')
+  }).catch(error => {
+    console.log('error', error)
+  })
+}
+const closeModal = () => {
+  emit('closeModal')
+  formRef.value.resetFields()
+}
+const clearModalData = () => {
+  formRef.value.resetFields()
+}
+defineExpose({
+  clearModalData
+})
+</script>
+<style lang="scss" scoped>
+.categories-modal-container{
+  padding: 10px 25px;
+  .modal-footer{
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+}
+</style>

src/views/demo/Categories/index.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="page-div categories-page">
+    <div class="left-div">
+      <div class="header">
+        <div class="buttons-div">
+          <HeaderButton :text="'删除分类'" :type="'del'" :size="'small'" @click="buttonClick('left','del')"/>
+          <HeaderButton :text="'添加分类'" :type="'add'" :size="'small'" @click="buttonClick('left','add')"/>
+        </div>
+        <div class="search-div">
+          <a-input v-model:value="LValue" placeholder="请输入内容" size="small"/>
+          <HeaderButton :text="'搜索'" :type="'search'" :size="'small'" @click="searchData('left')"/>
+        </div>
+        
+      </div>
+      <div class="content">
+        <div class="show-all-button">
+          <a-button type="link" @click="changeTypeId('')">全部字典>></a-button>
+        </div>
+        <BasicTree :treeData="lTree" :loading="lLoading" @select="(selectedKeys,{node}) => {getLeftSelectId(node.id);changeTypeId(node.key)}"/>
+      </div>
+    </div>
+    <div class="right-div">
+      <div class="header">
+        <div class="buttons-div">
+          <a-input style="width:150px" v-model:value="RValue" placeholder="名称" size="small"/>
+          <HeaderButton :text="'搜索'" :type="'search'" :size="'small'" @click="searchData('right')"/>
+          <HeaderButton :text="'添加'" :type="'add'" :size="'small'" @click="buttonClick('right','add')"/>
+          <HeaderButton :text="'编辑'" :type="'edit'" :size="'small'" @click="buttonClick('right','edit')"/>
+          <HeaderButton :text="'删除'" :type="'del'" :size="'small'" @click="buttonClick('right','del')"/>
+        </div>
+      </div>
+      <div class="content">
+        <BasicTable @register="registerTable">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'enabledMark'">
+              <a-tag  v-if="record.enabledMark" color="success">正常</a-tag>
+              <a-tag v-else color="error">停用</a-tag>
+            </template>
+          </template>
+        </BasicTable>
+      </div>
+    </div>
+    <a-modal class="categories-modal" v-model:open="openModal" 
+      :title="modalData.title" :afterClose="clearModal">
+      <UseModal ref="modalForm" :modalData="modalData" @closeModal="closeModal" @submit="submit" :lTree="lTree"/>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import HeaderButton from './Button/index.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import UseModal from './Modal/index.vue'
+import { BasicTree } from '@/components/Tree';
+import {BasicTable,useTable} from '@/components/Table'
+import {ref,onMounted,reactive,watch,createVNode } from "vue"
+import {getLeftTree,getRightTable,addLeftItem,addRightItem,delLeftItem,editRightItem,delRightItem} from '@/api/sys/categories.ts'
+import {columns,emptyRightItem,emptyLeftItem,dataProcess} from './util.ts'
+import {Modal,message} from 'ant-design-vue'
+const modalForm = ref()
+let LValue = ref('')
+let RValue = ref('')
+let lLoading = ref(false)
+let typeId = ref('')
+let selectLeftId = ref('')
+let lTree = ref([])
+let openModal = ref(false)
+const modalData = reactive({
+  title:'',
+  data:{},
+  type:'',
+})
+const [registerTable,{reload,getSelectRows}] = useTable({
+  beforeFetch: (params) => {
+    return {...params, code:typeId.value, key:RValue.value}
+  },
+  api:getRightTable,
+  columns,
+  showIndexColumn: false,
+  rowSelection: {
+    type: 'checkbox',
+  },
+})
+const getLeftTreeData = (value='') => {
+  lLoading.value = true
+  getLeftTree({key:value}).then(res => {
+    let data = dataProcess(res)
+    lTree.value = data
+    lLoading.value = false
+  }).catch(err => {
+    console.log(err)
+    lLoading.value = false
+  })
+}
+onMounted(() => {
+  getLeftTreeData()
+})
+const changeTypeId = (value) => {
+  typeId.value = value
+  reload()
+}
+const getLeftSelectId = (value) => {
+  selectLeftId.value = value
+}
+const searchData = (type) => {
+  if (type === 'left') {
+    console.log(LValue.value)
+    getLeftTreeData(LValue.value)
+  }else{
+    reload()
+  }
+}
+const submit = () => {
+  switch(modalData.type){
+    case 'leftadd':
+      addLeftItem(modalData.data).then(res => {
+        getLeftTreeData()
+        openModal.value = false
+      }).catch(err => {
+        console.log(err)
+      })
+      break;
+    case 'rightadd':
+      addRightItem(modalData.data).then(res => {
+        reload()
+        openModal.value = false
+      }).catch(err => {
+        console.log(err)
+      })
+      break;
+    case 'rightedit':
+      editRightItem(modalData.data).then(res => {
+        reload()
+        openModal.value = false
+      }).catch(err => {
+        console.log(err)
+      })
+      break;
+    default:
+      break;
+  }
+}
+const buttonClick = (diff,type) => {
+  let isLeft = diff === 'left'
+  switch(type){
+    case 'add':
+      openModal.value = true
+      modalData.title = isLeft? '添加分组': '添加'
+      modalData.data = isLeft? emptyLeftItem: emptyRightItem
+      modalData.type = `${diff}${type}`
+      break;
+    case 'del':
+        Modal.confirm({
+          title:'是否确认删除?',
+          icon: createVNode(ExclamationCircleOutlined),
+          onCancel() {},
+          onOk() {
+            if(isLeft){
+              return delLeftItem({id:selectLeftId.value}).then(res => {
+                getLeftTreeData()
+                typeId.value = ''
+                reload()
+              }).catch(err => {
+                console.log(err)
+              })
+            }else{
+              console.log(getSelectRows())
+              if(getSelectRows().length !== 1){
+                message.warning('请选择一条数据')
+                return
+              } 
+              let selectRightId = getSelectRows()[0].itemDetailId
+              console.log(selectRightId)
+              return delRightItem({id:selectRightId}).then(res => {
+                reload()
+              }).catch(err => {
+                console.log(err)
+              })
+            }
+          }
+        })
+      break;
+    case 'edit':
+      if(getSelectRows().length !== 1){
+        message.warning('请选择一条数据')
+        return 
+      } 
+      let editData = getSelectRows()[0]
+      console.log(editData)
+      modalData.title = '编辑'
+      modalData.data = {...editData}
+      modalData.type = `${diff}${type}`
+      openModal.value = true
+      break;
+  }
+}
+const closeModal = () => {
+  openModal.value = false
+}
+const clearModal = () => {
+  modalForm.value.clearModalData()
+}
+</script>
+
+<style lang="scss" scoped>
+.page-div{
+  position: relative;
+  top:10px;
+  left:10px;
+  width:calc(100% - 20px);
+  height:calc(100% - 20px);
+  display:flex;
+  border: 1px solid #ccc;
+  .left-div{
+    width:230px;
+    border-right: 1px solid #ccc;
+    display: flex;
+    flex-direction: column;
+    .header{
+      display: flex;
+      flex-direction: column;
+      padding:10px;
+      .buttons-div{
+        display: flex;
+        justify-content: space-between;
+      }
+      .search-div{
+        margin-top:10px;
+        display: flex;
+      } 
+    }
+    .content{
+      background-color: #fff;
+      border-radius: 5px;
+      height:100%;
+      .show-all-button{
+        height:34px;
+        line-height: 34px;
+        padding-left: 20px;
+        border-bottom: 1px solid #ccc;
+      }
+    }
+    
+  }
+  .right-div{
+    width: calc(100% - 230px);
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    .header{
+      height: 42px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding-right: 10px;
+      .buttons-div > button{
+        margin-left: 10px;
+      }
+    }
+    .content{
+      flex: 1;
+      background-color: #fff;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.categories-page{
+  .left-div{
+    .h-full{
+      height:auto;
+    }
+  }
+}
+.categories-modal{
+  .ant-modal-footer > button{
+    display: none;
+  }
+  .ant-modal-footer{
+    margin-top:0px;
+    border-top: 0px;
+  }
+}
+// ant-table-header
+</style>

src/views/demo/Categories/util.ts

@@ -0,0 +1,92 @@
+export const columns = [
+  {
+    title: '名称',
+    dataIndex: 'itemName',
+    resizable:true,
+    width:100,
+  },
+  {
+    title: '代码',
+    dataIndex: 'isDefault',
+    resizable:true,
+    width:100,
+  },
+  {
+    title: '值',
+    dataIndex: 'itemValue',
+    resizable:true,
+    width:100,
+  },
+  {
+    title: '是否可用',
+    dataIndex: 'enabledMark',
+    resizable:true,
+    width:100,
+  },
+  {
+    title: '排序号',
+    dataIndex: 'sortCode',
+    resizable:true,
+    width:100,
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    resizable:true,
+    width:100,
+  },
+  {
+    title: '分类标识',
+    dataIndex: 'itemCode',
+    resizable:true,
+    width:100,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createDate',
+    resizable:true,
+    width:100,
+  },
+  {
+    title: '创建人',
+    dataIndex: 'createUserName',
+    resizable:true,
+    width:100,
+  },
+  {
+    title: '最后更新时间',
+    dataIndex: 'modifyDate',
+    resizable:true,
+    width:100,
+  },
+  {
+    title: '最后更新人',
+    dataIndex: 'modifyUserName',
+    resizable:true,
+    width:100,
+  },
+]
+export const emptyLeftItem = {
+  itemCode:"",
+  itemName:"",
+}
+export const emptyRightItem = {
+  id:"",
+  itemCode:"",
+  itemName:"",
+  itemValue:"",
+  enabledMark:"1",
+  sortCode:"",
+  description:"",
+  typeId:"",
+}
+export const dataProcess = (list) => {
+  return list.map((item) => {
+      return {
+        id: item.itemId,
+        title:item.itemName,
+        icon: 'home|svg',
+        key: item.itemCode,
+      }
+  })
+}

src/views/demo/caseauditing/module/HandleCase.vue

@@ -0,0 +1,552 @@
+<template>
+  <div>
+    <a-form :model="caseHandlingData" name="basic" :label-col="{ span: 6 }" disabled>
+      <a-form-item>
+        <a-divider orientation="left">【案件核查信息】</a-divider>
+      </a-form-item>
+      <a-form-item label="核查人：">
+        <a-input v-model:value="caseHandlingData.createusername" />
+      </a-form-item>
+      <a-form-item label="核查时间：">
+        <a-input v-model:value="caseHandlingData.createtime" />
+      </a-form-item>
+      <a-form-item label="是否违法：">
+        <a-radio-group v-model:value="illegal">
+          <a-radio value="0">合法</a-radio>
+          <a-radio value="1">违法</a-radio>
+          <a-radio value="2">伪变化</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="现场照片：">
+        <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="现场视频：">
+        <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-select
+          v-model:value="caseHandlingData.measure_name"
+          placeholder="请选择处理措施"
+          :options="dealMeasuresList"
+        />
+      </a-form-item>
+
+      <a-col :span="24" v-if="illegal == '0'">
+        <a-form-item label="项目名称: ">
+          <a-input v-model:value="caseHandlingData.result_name" />
+        </a-form-item>
+        <a-form-item label="建设情况: ">
+          <a-input v-model:value="caseHandlingData.actual_scene_case" />
+        </a-form-item>
+        <a-form-item label="建筑结构: ">
+          <a-input v-model:value="caseHandlingData.build_structure" />
+        </a-form-item>
+        <a-form-item label="实际用途: ">
+          <a-input v-model:value="caseHandlingData.actual_use_to" />
+        </a-form-item>
+        <a-form-item label="当事人: ">
+          <a-input v-model:value="caseHandlingData.illegal_contact" />
+        </a-form-item>
+        <a-form-item label="当事人电话: ">
+          <a-input v-model:value="caseHandlingData.illegal_contact_phone" />
+        </a-form-item>
+
+        <a-divider orientation="left">【案件办理信息-合法】</a-divider>
+        <a-form-item label="批准文件名称: ">
+          <a-input v-model:value="caseHandlingData.evidence_file_name" />
+        </a-form-item>
+        <a-form-item label="批准文件编号: ">
+          <a-input v-model:value="caseHandlingData.evidence_file_number" />
+        </a-form-item>
+        <a-form-item label="批准文件有效期: ">
+          <a-input v-model:value="caseHandlingData.evidence_file_indate" />
+        </a-form-item>
+
+        <a-form-item label="合法批准文件: " v-if="illegal == '0'">
+          <div
+            v-for="(item, num) in evidenceFileList"
+            :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-empty v-if="evidenceFileList.length <= 0">
+            <template #description>
+              <span>暂无图片</span>
+            </template>
+          </a-empty>
+        </a-form-item>
+
+        <a-form-item label="勘测定界图: " v-if="illegal == '0'">
+          <div
+            v-for="(item, num) in boundaryImageList"
+            :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-empty v-if="boundaryImageList.length <= 0">
+            <template #description>
+              <span>暂无图片</span>
+            </template>
+          </a-empty>
+        </a-form-item>
+
+        <a-form-item label="是否超范围: ">
+          <a-radio-group v-model:value="caseHandlingData.is_out_boundary">
+            <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 :value="1">是</a-radio>
+            <a-radio :value="0">否</a-radio>
+          </a-radio-group>
+        </a-form-item>
+
+        <a-form-item label="办理人: ">
+          <a-input v-model:value="caseHandlingData.transactor_name" />
+        </a-form-item>
+        <a-form-item label="办理时间: ">
+          <a-input v-model:value="caseHandlingData.transact_time" />
+        </a-form-item>
+      </a-col>
+
+      <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>
+        <a-form-item label="当事人: ">
+          <a-input v-model:value="caseHandlingData.illegal_contact" />
+        </a-form-item>
+        <a-form-item label="当事人电话: ">
+          <a-input v-model:value="caseHandlingData.illegal_contact_phone" />
+        </a-form-item>
+        <a-form-item label="建设情况: ">
+          <a-radio-group v-model:value="caseHandlingData.is_build_complete">
+            <a-radio :value="1">已建成</a-radio>
+            <a-radio :value="0">建设中</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="建筑结构: ">
+          <a-input v-model:value="caseHandlingData.build_structure" />
+        </a-form-item>
+        <a-divider orientation="left">【案件办理信息-拆除】</a-divider>
+        <a-form-item label="拆除后照片: ">
+          <div
+            v-for="(item, num) in afterImageList"
+            :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-empty v-if="afterImageList.length <= 0">
+            <template #description>
+              <span>暂无图片</span>
+            </template>
+          </a-empty>
+        </a-form-item>
+        <a-form-item label="办理人: ">
+          <a-input v-model:value="caseHandlingData.transactor_name" />
+        </a-form-item>
+        <a-form-item label="办理时间: ">
+          <a-input v-model:value="caseHandlingData.transact_time" />
+        </a-form-item>
+      </a-col>
+
+      <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>
+        <a-form-item label="当事人: ">
+          <a-input v-model:value="caseHandlingData.illegal_contact" />
+        </a-form-item>
+        <a-form-item label="当事人电话: ">
+          <a-input v-model:value="caseHandlingData.illegal_contact_phone" />
+        </a-form-item>
+        <a-form-item label="建筑结构: ">
+          <a-input v-model:value="caseHandlingData.build_structure" />
+        </a-form-item>
+        <a-form-item label="违法类型: ">
+          <a-radio-group v-model:value="caseHandlingData.illegal_type">
+            <a-radio value="违法建筑类">违法建筑类</a-radio>
+            <a-radio value="非法采矿类">非法采矿类</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-divider orientation="left">【案件办理信息-查处】</a-divider>
+
+        <a-form-item label="立案号: ">
+          <a-input v-model:value="caseHandlingData.registr_number" />
+        </a-form-item>
+        <a-form-item label="当事人姓名: ">
+          <a-input v-model:value="caseHandlingData.illegal_contact" />
+        </a-form-item>
+        <a-form-item label="身份证号码: ">
+          <a-input v-model:value="caseHandlingData.illegal_contact_idcard" />
+        </a-form-item>
+
+        <a-form-item label="处罚通知书: ">
+          <div
+            v-for="(item, num) in punishImageList"
+            :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-empty v-if="punishImageList.length <= 0">
+            <template #description>
+              <span>暂无图片</span>
+            </template>
+          </a-empty>
+        </a-form-item>
+        <a-form-item label="交款通知书: ">
+          <div
+            v-for="(item, num) in paymentImagesList"
+            :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-empty v-if="paymentImagesList.length <= 0">
+            <template #description>
+              <span>暂无图片</span>
+            </template>
+          </a-empty>
+        </a-form-item>
+
+        <a-form-item label="办理人: ">
+          <a-input v-model:value="caseHandlingData.transactor_name" />
+        </a-form-item>
+        <a-form-item label="办理时间: ">
+          <a-input v-model:value="caseHandlingData.transact_time" />
+        </a-form-item>
+      </a-col>
+
+      <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>
+        <a-form-item label="当事人: ">
+          <a-input v-model:value="caseHandlingData.illegal_contact" />
+        </a-form-item>
+        <a-form-item label="当事人电话: ">
+          <a-input v-model:value="caseHandlingData.illegal_contact_phone" />
+        </a-form-item>
+        <a-form-item label="拟完善手续名称: ">
+          <a-input v-model:value="caseHandlingData.result_name" />
+        </a-form-item>
+        <a-form-item label="完善手续条件: ">
+          <a-radio-group v-model:value="caseHandlingData.is_have_checkout_condition">
+            <a-radio :value="1">是</a-radio>
+            <a-radio :value="0">否</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-divider orientation="left">【案件办理信息-完善手续】</a-divider>
+
+        <a-form-item label="政府同意完善手续证明: ">
+          <div
+            v-for="(item, num) in agreeImageList"
+            :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-empty v-if="agreeImageList.length <= 0">
+            <template #description>
+              <span>暂无图片</span>
+            </template>
+          </a-empty>
+        </a-form-item>
+        <a-form-item label="办理手续照片: ">
+          <div
+            v-for="(item, num) in checkoutImageList"
+            :key="num"
+            style="
+              position: relative;
+              width: 125px;
+              height: 112px;
+              overflow: hidden;
+              float: left;
+              background: #f9f9f9;
+              margin-left: 6px;
+              margin-bottom: 6px;
+            "
+          >
+            <a-image :width="124" :src="item.s_filePath" />
+          </div>
+          <a-empty v-if="checkoutImageList.length <= 0">
+            <template #description>
+              <span>暂无图片</span>
+            </template>
+          </a-empty>
+        </a-form-item>
+        <a-form-item label="勘测定界图: ">
+          <div
+            v-for="(item, num) in boundaryImageList"
+            :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-empty v-if="boundaryImageList.length <= 0">
+            <template #description>
+              <span>暂无图片</span>
+            </template>
+          </a-empty>
+        </a-form-item>
+        <a-form-item label="手续有效期: ">
+          <a-input v-model:value="caseHandlingData.procedure_indate" />
+        </a-form-item>
+        <a-form-item label="办理人: ">
+          <a-input v-model:value="caseHandlingData.transactor_name" />
+        </a-form-item>
+        <a-form-item label="办理时间: ">
+          <a-input v-model:value="caseHandlingData.transact_time" />
+        </a-form-item>
+      </a-col>
+
+      <a-col :span="24" v-if="illegal == '2'">
+        <a-form-item label="伪变化原因: ">
+          <a-input v-model:value="caseHandlingData.pseudo_change_reason" />
+        </a-form-item>
+        <a-form-item label="实际用途: ">
+          <a-input v-model:value="caseHandlingData.actual_use_to" />
+        </a-form-item>
+        <a-form-item label="实际面积: ">
+          <a-input v-model:value="caseHandlingData.actual_area" />
+        </a-form-item>
+        <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 :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 :value="1">是</a-radio>
+            <a-radio :value="0">否</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="办理人: ">
+          <a-input v-model:value="caseHandlingData.transactor_name" />
+        </a-form-item>
+        <a-form-item label="办理时间: ">
+          <a-input v-model:value="caseHandlingData.transact_time" />
+        </a-form-item>
+      </a-col>
+    </a-form>
+  </div>
+</template>
+<script lang="ts" setup>
+  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: '',
+    result_name: '',
+    is_assist: 0,
+    assist_people: '',
+    assist_company: '',
+    illegal_contact: null, //违法人
+    illegal_contact_phone: null, //违法人联系方式
+    actual_scene_case: null, //现场实际情况
+  });
+  const illegal: any = ref();
+  const dealMeasuresList: any = ref([]);
+  const evidenceFileList: any = ref([]);
+  const boundaryImageList: any = ref([]);
+  const afterImageList: any = ref([]);
+  const punishImageList: any = ref([]);
+  const paymentImagesList: any = ref([]);
+  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>

src/views/demo/caseauditing/module/index.data.ts

@@ -0,0 +1,120 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '案件编号',
+    dataIndex: 'case_no',
+  },
+  {
+    title: '案件详情',
+    dataIndex: 'case_description',
+  },
+  {
+    title: '办理人',
+    dataIndex: 'deal_username',
+  },
+  {
+    title: '办理时间',
+    dataIndex: 'deal_time',
+  },
+  {
+    title: '新增退回',
+    dataIndex: 'is_drawback',
+    customRender: ({ record }) => {
+      const status = record.is_drawback;
+      const enable = ~~status === 1;
+      const text = enable ? '退回案件' : '新增案件';
+      return text;
+    },
+  },
+  {
+    title: '是否违法',
+    dataIndex: 'is_illegal',
+    customRender: ({ record }) => {
+      const status = record.is_illegal;
+      if (status == 1) {
+        const text = '违法';
+        return text;
+      } else if (status == 2) {
+        const text = '伪变化';
+        return text;
+      } else {
+        const text = '合法';
+        return text;
+      }
+    },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'case_no',
+    label: '案件编号：',
+    component: 'Input',
+    dynamicDisabled: true,
+  },
+  {
+    field: 'typename',
+    label: '案件类型：',
+    component: 'Input',
+    dynamicDisabled: true,
+  },
+  {
+    field: 'case_description',
+    label: '案件描述：',
+    component: 'Input',
+    dynamicDisabled: true,
+  },
+  {
+    field: 'homeAddress',
+    label: '案件地址：',
+    component: 'Input',
+    dynamicDisabled: true,
+  },
+  {
+    field: 'area',
+    label: '占用土地面积：',
+    component: 'Input',
+    dynamicDisabled: true,
+  },
+  {
+    field: 'handle_status_name',
+    label: '案件状态：',
+    component: 'Input',
+    dynamicDisabled: true,
+  },
+  {
+    field: 'verifystatusname',
+    label: '审核状态：',
+    component: 'Input',
+    dynamicDisabled: true,
+  },
+  {
+    field: 'lngLat',
+    label: '经纬度：',
+    component: 'Input',
+    dynamicDisabled: true,
+  },
+  {
+    field: 'field1',
+    label: '现场照片：',
+    slot: 'imgSlot',
+  },
+  {
+    field: 'field1',
+    label: '现场视频：',
+    slot: 'videoSlot',
+  },
+  {
+    field: 'identification_user',
+    label: '上报人：',
+    component: 'Input',
+    dynamicDisabled: true,
+  },
+  {
+    field: 'identification_time',
+    label: '上报时间：',
+    component: 'Input',
+    dynamicDisabled: true,
+  },
+];

src/views/demo/caseauditing/module/index.vue

@@ -0,0 +1,592 @@
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <div :class="`${prefixCls}`">
+      <div :class="`${prefixCls}-header`">
+        <div>
+          <a-button type="primary" :icon="h(StarOutlined)" @click="openCollenction">
+            收藏夹（ {{ favoriteNum }} ）
+          </a-button>
+        </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="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="!collenctionVisible">
+              <template #bodyCell="{ column, record }">
+                <template v-if="column.key === 'action'">
+                  <TableAction
+                    :actions="[
+                      {
+                        label: '收藏',
+                        color: 'warning',
+                        onClick: () => {
+                          handleCollention(record);
+                        },
+                      },
+                      {
+                        label: '审核',
+                        onClick: () => {
+                          handleAuditing(record);
+                        },
+                      },
+                    ]"
+                  />
+                </template>
+              </template>
+            </BasicTable>
+            <div :class="`${prefixCls}-content-tabbox-left-collenction`" v-if="collenctionVisible">
+              <div :class="`${prefixCls}-content-tabbox-left-collenction-header`">
+                <div> <StarOutlined /> 收藏案件 </div>
+                <div
+                  :class="`${prefixCls}-content-tabbox-left-collenction-header-close`"
+                  @click="closeCollenction"
+                  ><CloseOutlined
+                /></div>
+              </div>
+              <div>
+                <BasicTable @register="registerCollenctionTable">
+                  <template #bodyCell="{ column, record }">
+                    <template v-if="column.key === 'action'">
+                      <TableAction
+                        :actions="[
+                          {
+                            label: '移除',
+                            type: 'link',
+                            color: 'warning',
+                            onClick: () => {
+                              handleRemoveCollention(record);
+                            },
+                          },
+                          {
+                            label: '审核',
+                            onClick: () => {
+                              handleAuditing(record);
+                            },
+                          },
+                        ]"
+                      />
+                    </template>
+                  </template>
+                </BasicTable>
+              </div>
+            </div>
+          </div>
+          <div :class="`${prefixCls}-content-tabbox-right`" v-if="auditingVisible">
+            <div :class="`${prefixCls}-content-tabbox-right-header`">
+              <div
+                :class="`${prefixCls}-content-tabbox-right-header-tabs`"
+                v-for="(item, index) in tabsArr"
+                :key="index"
+              >
+                <div
+                  :class="tabsActiveIndex == index ? 'active' : 'tabsnormal'"
+                  @click="tabsClick(index)"
+                  >{{ item }}</div
+                >
+              </div>
+              <div :class="`${prefixCls}-content-tabbox-right-header-close`" @click="auditingClose"
+                ><CloseOutlined
+              /></div>
+            </div>
+            <div :class="`${prefixCls}-content-tabbox-right-content`">
+              <BasicForm ref="formRef" @register="registerForm" v-show="tabsActiveIndex == 0">
+                <template #imgSlot>
+                  <div
+                    v-for="(item, num) in fileList"
+                    :key="num"
+                    style="
+                      position: relative;
+                      width: 125px;
+                      height: 90px;
+                      overflow: hidden;
+                      float: left;
+                      background: #f9f9f9;
+                      margin-left: 6px;
+                      margin-bottom: 6px;
+                    "
+                  >
+                    <a-image :width="125" :src="item.url" />
+                  </div>
+                  <a-empty v-show="fileList.length <= 0">
+                    <template #description>
+                      <span>暂无图片</span>
+                    </template>
+                  </a-empty>
+                </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 :id="selectRowDetail.id" v-show="tabsActiveIndex == 1" />
+            </div>
+            <div :class="`${prefixCls}-content-tabbox-right-footer`">
+              <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`">
+          <MapDetail :ruleForm="selectRowDetail"></MapDetail>
+        </div>
+      </div>
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, h } from 'vue';
+  import {
+    SearchOutlined,
+    StarOutlined,
+    DownloadOutlined,
+    CloseOutlined,
+  } from '@ant-design/icons-vue';
+  import HandleCase from './HandleCase.vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { PageWrapper } from '@/components/Page';
+  import {
+    getTableDataList,
+    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 { MapDetail } from '@/views/demo/summaryverification/index';
+
+  const { createMessage } = useMessage();
+  const favoriteNum: any = ref();
+  const tabsActiveIndex: any = ref('0');
+  const tabsArr: any = ref(['案件信息', '核查办理']);
+  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 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 is_drawback: any = ref();
+  const selectOptions3: any = ref([
+    { label: '新增', value: 0 },
+    { label: '退回', value: 1 },
+  ]);
+
+  const fileList: any = ref([]);
+
+  const [registerTable, { reload: reload1 }] = useTable({
+    title: '',
+    api: getTableDataList,
+    columns,
+    rowKey: 'id',
+    formConfig: {
+      labelWidth: 120,
+    },
+    isTreeTable: true,
+    striped: false,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 200,
+      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;
+    },
+  });
+  const [registerCollenctionTable, { reload: reload2 }] = useTable({
+    title: '',
+    api: getCollectionCaseList,
+    columns,
+    rowKey: 'id',
+    formConfig: {
+      labelWidth: 120,
+    },
+    isTreeTable: true,
+    striped: false,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+  const [registerForm, { setFieldsValue }] = useForm({
+    labelWidth: 120,
+    labelAlign: 'right',
+    schemas: formSchema,
+    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;
+    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;
+  }
+  function closeCollenction() {
+    collenctionVisible.value = false;
+    reload1();
+  }
+  function tabsClick(index: any) {
+    tabsActiveIndex.value = index;
+  }
+  function auditingClose() {
+    auditingVisible.value = false;
+  }
+  function getCollentionLength() {
+    getCollectionCaseList().then((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>
+<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%;
+
+            &-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;
+              }
+            }
+          }
+        }
+
+        &-right {
+          flex: 1;
+          margin-left: 15px;
+          margin-bottom: 15px;
+          border: 1px solid #eee;
+          background: #fff;
+
+          &-header {
+            position: relative;
+            padding: 0 10px;
+            height: 50px;
+            overflow: auto;
+            border-bottom: 1px solid #eee;
+            display: flex;
+
+            &-tabs {
+              cursor: pointer;
+              margin: 0 10px;
+
+              .active {
+                color: #409eff;
+                height: 100%;
+                display: flex;
+                align-items: center;
+              }
+
+              .tabsnormal {
+                height: 100%;
+                display: flex;
+                align-items: center;
+                &:hover {
+                  color: #409eff;
+                  border-bottom: 1px solid #409eff;
+                }
+              }
+            }
+
+            &-close {
+              position: absolute;
+              right: 20px;
+              top: 50%;
+              transform: translate(0, -50%);
+              cursor: pointer;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+          }
+
+          &-content {
+            height: calc(100% - 140px);
+            overflow: auto;
+            padding: 15px 20px 15px 10px;
+            margin: 10px 0;
+          }
+
+          &-footer {
+            height: 60px;
+            border-top: 1px solid #eee;
+            display: flex;
+            align-items: center;
+            padding-right: 15px;
+          }
+        }
+      }
+
+      &-mapbox {
+        width: calc(30% - 20px);
+        margin: 0 15px 15px 15px;
+        border: 1px solid red;
+      }
+    }
+  }
+</style>

src/views/demo/h5html/index.data.ts

@@ -3,7 +3,6 @@ import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 
 export const columns: BasicColumn[] = [
-
   {
     title: '名称',
     dataIndex: 'name',
@@ -26,11 +25,11 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '创建人',
-    dataIndex: 'createUserName'
+    dataIndex: 'createUserName',
   },
   {
     title: '创建时间',
-    dataIndex: 'createDate'
+    dataIndex: 'createDate',
   },
   // {
   //   title: '备注',
@@ -46,4 +45,3 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 8 },
   },
 ];
-  

src/views/demo/leadreporting/InfoComponent/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="leadreport-information-component">
+    <div style="display: flex;height:calc(100% - 62px);">
+      <div style="flex: 1;">
+        <a-divider>【线索详情】</a-divider>
+        <a-descriptions :column="1" bordered>
+          <a-descriptions-item>
+            <template #label>
+              <TabletOutlined />
+              举报人
+            </template>
+            <!-- TODO 加密 -->
+            {{detail.name}}
+          </a-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <TabletOutlined />
+              手机号
+            </template>
+            <!-- TODO 加密 -->
+            {{detail.phone}}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <TabletOutlined />
+              地点
+            </template>
+            {{detail.address}}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <TabletOutlined />
+              举报内容
+            </template>
+            {{detail.content}}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <TabletOutlined />
+              举报时间
+            </template>
+            {{detail.createTime}}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <TabletOutlined />
+              图片
+            </template>
+            <a-image-preview-group>
+              <a-image :width="200" v-for="(item,index) in imageList" :key="index" :src="item" />
+            </a-image-preview-group>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <TabletOutlined />
+              视频
+            </template>
+            <video-player class="video-player vjs-custom-skin" v-for="(item,index) in videoList"
+              :key="index" ref="videoPlayer" :playsinline="true" :options="item"
+              style="width:400px;margin-top: 10px;">
+            </video-player>
+          </el-descriptions-item>
+        </a-descriptions>
+      </div>
+      <div style="flex: 1;">
+        <a-divider>【地址】</a-divider>
+        <div class="amap-wrapper">
+          <!-- <MapboxMaps :mapOptions="mapOptions" @map-on-load="mapOnLoad"/> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TabletOutlined } from "@ant-design/icons-vue";
+import MapboxMaps from '@/components/MapboxMaps/index.vue'
+
+
+import {defineProps, onMounted,ref,reactive} from 'vue'
+const props = defineProps(['showInfoId'])
+const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL
+let detail = ref({})
+const mapOptions = reactive({
+  center: [0,0],
+  zoom: 13,
+})
+let imageList:string[] = reactive([])
+let videoList = reactive([])
+
+const mapOnload = (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).addLineLayer('layerId',{
+    source: 'sourceId',
+    'source-layer': 'lindi'
+  });
+}
+onMounted(() => {
+  console.log(props.showInfoId,detail)
+  loadDetailCaseInfo()
+  console.log(detail)
+})
+const loadDetailCaseInfo = () => {
+  // TODO request /ClueReporting/GetClueReportingDetail?id=   暂时只显示列表
+  let response = {
+    result:{
+      reporting:{
+        id:1,
+        name:"张三",
+        phone:"11111111111",
+        address:"啊手动阀啊手动阀啊手动阀啊手动阀",
+        createTime:"2022-08-09 12:00:00",
+        content:"aaa",
+        lng:116.404,
+        lat:39.915
+      },
+      imageFiles:[
+        "x43I27A55%26/photo-1438109491414-7198515b166b.webp",
+        "cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp",
+        "LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp",
+      ],
+      videoFiles:[
+        // "1.mp4",
+        // "2.mp4",
+        // "3.mp4"
+      ]
+    }
+  }
+  Promise.resolve(response).then((res) => {
+    let obj = res.result.reporting
+    detail.value = {...obj}
+    mapOptions.center = [obj.lng, obj.lat]
+    if (res.result.imageFiles) {
+      res.result.imageFiles.forEach(element => {
+        imageList.push(
+          // BASE_IMAGE_URL + "/" + element
+          `https://gw.alipayobjects.com/zos/antfincdn/${element}`
+        )
+      });
+    }
+    if (res.result.videoFiles) {
+      res.result.videoFiles.forEach(element => {
+        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 + "/" + element//url地址
+            }
+          ],
+          poster: "", //你的封面地址
+          // width: document.documentElement.clientWidth,
+          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+          controlBar: {
+            timeDivider: true,//当前时间和持续时间的分隔符
+            durationDisplay: true,//显示持续时间
+            remainingTimeDisplay: false,//是否显示剩余时间功能
+            fullscreenToggle: true  //全屏按钮
+          }
+        }
+        videoList.push(options)
+      });
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.leadreport-information-component{
+  height: 600px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.amap-wrapper{
+  width: 100%;
+  height: 100%
+}
+.amap-demo{
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/demo/leadreporting/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="page-div">
+    <!-- <Header @reload="reload" @setPagination="setPagination" @getSelectRows="getSelectRows"></Header> -->
+    <div class="report-content filter-container" style="display:flex;overflow:auto;height:50px; background-color:#f8f8f8;align-items: center;
+      justify-content: flex-end;padding-right: 20px;">
+      <div style="margin-right:10px;">
+        <a-range-picker :presets="rangePresets" @change="onRangeChange" >
+        </a-range-picker>
+      </div>
+      <div style="margin-right:10px">
+        <a-input v-model:value="content" placeholder="请输入举报内容" />
+      </div>
+      <a-button style="background-color: #0076c8;" type="primary" :icon="h(SearchOutlined)" @click="searchTable">查询</a-button>
+      <a-button style="background-color: #409167; margin-left:10px" type="primary" 
+        :icon="h(VerticalAlignBottomOutlined)" @click="distribute">下发</a-button>
+    </div>
+    <div class="content">
+      <BasicTable rowKey="id" @register="registerTable">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'isDistribute'">
+            <a-tag  v-if="record.isDistribute" color="success">是</a-tag>
+            <a-tag v-else color="error">否</a-tag>
+          </template>
+          <template v-if="column.key === 'action'">
+            <a-button @click="openInfo(record)">详情</a-button>
+          </template>
+        </template>
+      </BasicTable>
+    </div>
+    <a-modal style="width: 80vw;height:600px" v-model:open="modal" title="案件详情" :mask="true" 
+      :maskClosable="false" :keyboard="false" :afterClose="closeModal">
+      <InfoComponent v-if="modal" :showInfoId="showInfoId"></InfoComponent>
+    </a-modal>
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+// import Header from './header/index.vue'
+// import Table from './Table/index.vue'
+import InfoComponent from './InfoComponent/index.vue'
+import dayjs, {Dayjs} from 'dayjs';
+import {ref, h, } from "vue"
+import { SearchOutlined, VerticalAlignBottomOutlined  } from '@ant-design/icons-vue';
+import {BasicTable, useTable} from '@/components/Table'
+import { getLoadPage } from '@/api/sys/leadreporting';
+import {message,} from 'ant-design-vue'
+type RangeValue = [Dayjs, Dayjs];
+let beginDate = ref()
+let endDate = ref()
+let content = ref()
+let modal = ref(false)
+let showInfoId = ref()
+const rangePresets = ref([
+  { label: '今天', value: [dayjs(), dayjs()] },
+  { label: '最近一周', value: [dayjs().add(-1, 'w'), dayjs()] },
+  { label: '最近一个月', value: [dayjs().add(-1, 'M'), dayjs()] },
+  { label: '最近三个月', value: [dayjs().add(-3, 'M'), dayjs()] },
+  { label: '最近六个月', value: [dayjs().add(-6, 'M'), dayjs()] },
+  { label: '最近一年', value: [dayjs().add(-1, 'y'), dayjs()] },
+]);
+const columns = [
+  {
+    title: '举报人',
+    dataIndex: 'name',
+  },
+  {
+    title: '手机号',
+    dataIndex: 'phone',
+  },
+  {
+    title: '地点',
+    dataIndex: 'address',
+  },
+  {
+    title: '举报内容',
+    dataIndex: 'content',
+  },
+  {
+    title: '举报时间',
+    dataIndex: 'createTime',
+  },
+  {
+    title: '是否下发',
+    dataIndex: 'isDistribute',
+  },
+
+];
+const onRangeChange = (dates: RangeValue, dateStrings: string[]) => {
+  if (dates) {
+    beginDate.value = dateStrings[0]
+    endDate.value = dateStrings[1]
+  } else {
+    beginDate.value = null
+    endDate.value = null
+  }
+}
+const [registerTable,{reload, setPagination,getSelectRows}] = useTable({
+  beforeFetch: (params) => {
+    console.log(params)
+    let useParams = {...params}
+    if(beginDate.value) useParams = {...useParams,beginDate:beginDate.value}
+    if(endDate.value) useParams = {...useParams,endDate:endDate.value}
+    if(content.value) useParams = {...useParams,content:content.value}
+    return useParams
+  },
+  api:getLoadPage,
+  columns,
+  showIndexColumn: false,
+  rowSelection: {
+    type: 'checkbox',
+  },
+  actionColumn:{
+    width: 80,
+    title: '操作',
+    dataIndex: 'action',
+  }
+})
+const distribute = () => {
+  const selectList = getSelectRows()
+  if(selectList.length == 1){
+    if(selectList[0].isDistribute){
+      message.warning('已经下发的不能再次下发')
+      return
+    }
+    let query = {id: selectList[0].id}
+    // TODO request  暂时不下发
+    Promise.resolve("success").then(res => {
+      message.success(res)
+    })
+    reload()
+  }else{
+    message.warning('选中一个进行下发')
+  }
+  console.log(selectList)
+}
+const searchTable = () => {
+  setPagination({current:1,pageSize:10})
+  reload()
+}
+const openInfo = (info) => {
+  modal.value = true
+  showInfoId.value = info.id
+}
+const closeModal = () => {
+  modal.value = false
+  showInfoId.value = null
+}
+</script>
+
+<style lang="scss" scoped>
+.content{
+  width: calc(100% - 20px);
+  margin: auto;
+  height: 823px;
+  background-color: #fff;
+  padding: 10px;
+  overflow: hidden;
+}
+.page-div{
+  background-color: #efefef;
+}
+.amap-wrapper {
+  width: 100%;
+height: 100%;
+
+}
+
+.desc-container {
+  overflow-y: scroll;
+}
+
+/* 滑道样式 */
+.desc-container::-webkit-scrollbar {
+  width: 5px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+}
+
+/* 定义滑块的样式 */
+.desc-container::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+/* 定义滑块鼠标移入时的样式 */
+.desc-container::-webkit-scrollbar-thumb:hover {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.4);
+}
+</style>

src/views/demo/monitor/caselist/list.data.ts

@@ -92,7 +92,6 @@ export const columns: BasicColumn[] = [
   },
 ];
 export const searchFormSchema: FormSchema[] = [
- 
   {
     field: 'is_drawback',
     component: 'Select',

src/views/demo/monitor/caseview/src/audit.vue

@@ -33,7 +33,7 @@
 </script>
 <style lang="less" scoped>
   ::v-deep .ant-image .ant-image-img {
-    width: 85px;
+    width: 100px;
     margin-bottom: 10px;
   }
 </style>

src/views/demo/monitor/caseview/src/dismantle.vue

@@ -13,7 +13,7 @@
     </a-descriptions-item>
     <a-descriptions-item label="视频">
       <div v-if="videoOptions.length > 0">
-        <video-player
+        <!-- <video-player
           class="video-player vjs-custom-skin"
           v-for="(item, index) in videoOptions"
           :key="index"
@@ -21,7 +21,11 @@
           :playsinline="true"
           :options="item"
           style="width: 200px"
-        ></video-player>
+        ></video-player> -->
+        <!-- <video v-for="(item, index) in videoOptions" :src="item.sources[0].src" style="width: 200px"></video> -->
+        <video ref="videoPlayer" class="video-js vjs-default-skin" controls preload="auto" width="1024" v-for="(item, index) in videoOptions"  style="width: 200px">
+          <source :src="item.sources[0].src" type="video/mp4" />
+        </video>
       </div>
     </a-descriptions-item>
   </a-descriptions>
@@ -58,6 +62,7 @@
       },
     },
   });
+  console.log(props.videoOptions)
   caseHandleInfo.value = props.data;
   videoOptions.value = props.videoOptions;
   threadAfterImageList.value = props.threadImageList;
@@ -79,7 +84,7 @@
 </script>
 <style lang="less" scoped>
   ::v-deep .ant-image .ant-image-img {
-    width: 85px;
+    width: 100px;
     margin-bottom: 10px;
   }
 </style>

src/views/demo/monitor/caseview/src/evidence.vue

@@ -90,7 +90,7 @@
   </script>
   <style lang="less" scoped>
     ::v-deep .ant-image .ant-image-img {
-      width: 85px;
+      width: 100px;
       margin-bottom: 10px;
     }
   </style>

src/views/demo/monitor/caseview/src/inspect.vue

@@ -175,7 +175,7 @@
     </a-descriptions-item>
     <a-descriptions-item label="现场视频">
       <div v-if="playerOptions.length > 0">
-        <video-player
+        <!-- <video-player
           class="video-player vjs-custom-skin"
           v-for="(item, index) in playerOptions"
           :key="index"
@@ -183,7 +183,11 @@
           :playsinline="true"
           :options="item"
           style="width: 200px"
-        ></video-player>
+        ></video-player> -->
+        <!-- <video v-for="(item, index) in playerOptions" :src="item.sources[0].src" style="width: 200px"></video> -->
+        <video ref="videoPlayer" class="video-js vjs-default-skin" controls preload="auto" width="1024" v-for="(item, index) in playerOptions"  style="width: 200px">
+          <source :src="item.sources[0].src" type="video/mp4" />
+        </video>
       </div>
     </a-descriptions-item>
   </a-descriptions>
@@ -192,6 +196,8 @@
   import { reactive, watch, ref } from 'vue';
   import { ImagePreview } from '@/components/Preview';
   import { caseHandleInfoObj } from '../model';
+  import { videoPlayer } from 'vue-video-player/src';
+  import 'vue-video-player/src/custom-theme.css';
   const labelStyle = ref({
     width: '100px',
   });
@@ -221,6 +227,7 @@
     },
   });
   caseHandleInfo.value = props.data;
+  console.log(props.playerOptions);
   playerOptions.value = props.playerOptions;
   threadImageList.value = props.threadImageList;
   const imgList = ref([
@@ -240,7 +247,7 @@
 </script>
 <style lang="less" scoped>
   ::v-deep .ant-image .ant-image-img {
-    width: 85px;
+    width: 100px;
     margin-bottom: 10px;
   }
 </style>

src/views/demo/monitor/caseview/src/investigate.vue

@@ -93,7 +93,7 @@
   </script>
   <style lang="less" scoped>
     ::v-deep .ant-image .ant-image-img {
-      width: 85px;
+      width: 100px;
       margin-bottom: 10px;
     }
   </style>

src/views/demo/monitor/caseview/src/issue.vue

@@ -25,7 +25,7 @@
     <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.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>
@@ -76,7 +76,7 @@
 </script>
 <style lang="less" scoped>
   ::v-deep .ant-image .ant-image-img {
-    width: 85px;
+    width: 100px;
     margin-bottom: 10px;
   }
 </style>

src/views/demo/monitor/caseview/src/procedure.vue

@@ -105,7 +105,7 @@
 </script>
 <style lang="less" scoped>
   ::v-deep .ant-image .ant-image-img {
-    width: 85px;
+    width: 100px;
     margin-bottom: 10px;
   }
 </style>

src/views/demo/monitor/interpretation/index.vue

@@ -56,7 +56,7 @@
                 <template #avatar>
                   <a-image
                     :width="60"
-                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                    :src="uploadUrl+'/'+item.case_pic_list[0]"
                   />
                 </template>
                 <template #title>
@@ -92,7 +92,7 @@
         </template>
         <a-tabs v-model:activeKey="activeKey">
           <a-tab-pane key="1" tab="案件判读">
-            <Interpret :interpretData="interpretData" @close="changeType"></Interpret>
+            <Interpret ref="interpretRef" :interpretData="interpretData" @close="changeType"></Interpret>
           </a-tab-pane>
           <a-tab-pane key="2" tab="案件处理">
             <Dispose :id="interpretData.id"></Dispose>
@@ -113,10 +113,13 @@
   import MapboxMaps from '@/components/MapboxMaps/index.vue';
   import { getCaseInfoList } from '@/api/monitor/index';
   import { Interpret, Dispose, InterpretMap } from '../index';
-  const disabledType = ref(true);
+  import { useGlobSetting } from '@/hooks/setting';
+  const { uploadUrl } = useGlobSetting();
+  const disabledType = ref(true); 
   const prefixCls = 'list-basic';
   const activeKey = ref('1');
   const interpretData = ref({});
+  const interpretRef = ref()
   const pagination = ref({
     onChange: (page: number) => {
       console.log(page);
@@ -172,6 +175,7 @@
   }
   function setArea(area) {
     interpretData.value.area = area;
+    interpretRef.value.setMap(area)
   }
   onMounted(() => {
     getList();

src/views/demo/monitor/interpretation/src/dispose.vue

@@ -376,7 +376,7 @@
 </script>
 <style lang="less" scoped>
   ::v-deep .ant-image .ant-image-img {
-    width: 85px;
+    width: 100px;
     margin-bottom: 10px;
   }
 </style>

src/views/demo/monitor/interpretation/src/interpret.vue

@@ -64,7 +64,7 @@
           />
         </a-form-item>
         <a-form-item label="现场照片">
-          <ImagePreview :imageList="abbreviationPicListData" />
+          <ImagePreview :imageList="picListData" />
           <ImageUpload
             file-list="fileList"
             :maxSize="20"
@@ -88,11 +88,14 @@
   import { ImageUpload } from '@/components/Upload';
   import { ref, reactive, watch, onMounted } from 'vue';
   import { ImagePreview } from '@/components/Preview';
-  import { getCaseInfo } from '@/api/monitor/index';
+  import { getCaseInfo, addDroneCaseInfo, updateDroneCaseInfoIntact } from '@/api/monitor/index';
   import { uploadApi } from '@/api/sys/upload';
   // 图片服务器地址
   import { useGlobSetting } from '@/hooks/setting';
   const { uploadUrl } = useGlobSetting();
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createMessage, createConfirm } = useMessage();
+
   const emit = defineEmits(['close']);
   const formRef = ref();
   const labelCol = { span: 7 };
@@ -102,7 +105,7 @@
   const filSuccessList = ref([]);
   const formData = ref({});
   const picListData = ref([]);
-  const abbreviationPicListData = ref(['https://picsum.photos/id/66/346/216']);
+  const abbreviationPicListData = ref([]);
   const data = reactive({
     violationOptions: [],
     communtDatas: [],
@@ -143,12 +146,9 @@
     const data = await getCaseInfo({ id: ruleForm.value.id });
     formData.value = data;
     data.pics.forEach((item) => {
-      let src = item.path;
-      item.path = uploadUrl + '/' + item.path;
-      item.thumbnail = uploadUrl + '/S_' + src;
-      picListData.value.push(item);
+      picListData.value.push(uploadUrl + '/' + item.path);
       // 缩略图
-      abbreviationPicListData.value.push(item.thumbnail);
+      abbreviationPicListData.value.push(uploadUrl + '/S_' + item.path);
     });
   }
   async function imgApi(file, progress) {
@@ -206,26 +206,62 @@
 
   // 保存
   async function saveForm() {
-    this.formData.info = this.ruleForm;
-    let arr = this.picListData;
-    // console.log("arr",arr);
-    this.formData.pic_list = [];
-    for (let i = 0; i < arr.length; i++) {
-      // this.formData.pic_list[i]=this.picListData[i].split("6001/")[1];
-      this.formData.pic_list[i] = this.handleImagePath(this.picListData[i].path);
+    formData.value.info = ruleForm.value;
+    filSuccessList.value.forEach((element) => {
+      formData.value.pic_list.push(element.filePath);
+    });
+    console.log(formData.value);
+    const data = await addDroneCaseInfo(formData.value);
+    if (data) {
+      resetForm();
+      return createMessage.success('成功');
+    } else {
+      return createMessage.error('失败');
     }
-    postMethodCommon('/DroneCaseinfo/AddDroneCaseInfo', this.formData).then((res) => {
-      if (res.code == 200) {
-        this.$notify({
-          title: '成功',
-          message: '保存成功',
-          type: 'success',
-          duration: 2000,
-        });
-        this.close();
-      }
+  }
+  // 提交
+  async function submitForm() {
+    const success = await validateForm();
+    console.log(success);
+    if (!success) {
+      return;
+    }
+    formData.value.info = ruleForm.value;
+    formData.value.info.is_intact = 1;
+    filSuccessList.value.forEach((element) => {
+      formData.value.pic_list.push(element.filePath);
+    });
+    console.log(formData.value);
+    const data = await updateDroneCaseInfoIntact(formData.value);
+    if (data) {
+      resetForm();
+      return createMessage.success('成功');
+    } else {
+      return createMessage.error('失败');
+    }
+  }
+  // 关闭
+  async function eventClose() {
+    createConfirm({
+      iconType: 'warning',
+      title: '关闭',
+      content: '确认关闭此案件?',
+      onOk: async () => {
+        const data = await closeDroneCaseInfo({ id: ruleForm.value.id });
+        if (data) {
+          return createMessage.success('成功');
+        } else {
+          return createMessage.error('失败');
+        }
+      },
     });
   }
+  function setMap(data) {
+    ruleForm.value.area = data;
+  }
+  defineExpose({
+    setMap,
+  });
 </script>
 <style lang="less" scoped>
   .interpret-box {
@@ -251,10 +287,14 @@
         }
       }
     }
-    ::v-deep .ant-image-img{
+    ::v-deep .ant-image-img {
       width: 50%;
     }
   }
+  ::v-deep .ant-image .ant-image-img {
+    width: 100px;
+    margin-bottom: 10px;
+  }
   .btn-box {
     width: 100%;
     padding: 10px 10%;

src/views/demo/monitor/interpretation/src/interpretMap.vue

@@ -9,7 +9,7 @@
   import MapboxMaps from '@/components/MapboxMaps/index.vue';
   import { DrawingType } from '@/enums/mapEnum';
   const mapControl: DrawingType[] = [DrawingType.Polygon];
-
+  const emit = defineEmits(['setArea']);
   const mapOptions = {
     center: [117.84714891969796, 35.22152309532066],
     zoom: 10,
@@ -55,6 +55,7 @@
   const handlerMapDraw = (type: string, data: any) => {
     console.log('data::: ', data);
     console.log('type::: ', type);
+    emit('setArea',data)
   };
   //   案件位置显示无人机图标
   function loadDroneMarker(lng, lat) {

src/views/demo/monitor/uploadpictures/data.ts

@@ -0,0 +1,60 @@
+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: 'taskName',
+  },
+  {
+    title: '任务时间',
+    dataIndex: 'taskDate',
+  },
+
+  {
+    title: '图片数量',
+    dataIndex: 'imageCount',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'taskName',
+    label: '任务名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: '[beginDate, endDate]',
+    component: 'RangePicker',
+    label: '日期范围',
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      placeholder: ['开始日期', '结束日期'],
+    },
+    colProps: { span: 8 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'taskName',
+    label: '任务名称',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'taskDate',
+    label: '任务时间',
+    required: true,
+    component: 'DatePicker',
+  },
+];

src/views/demo/monitor/uploadpictures/index.vue

@@ -0,0 +1,150 @@
+<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="[
+                {
+                  // icon: 'ant-design:ellipsis-outlined',
+                  label: '查看',
+                  onClick: viewAccount.bind(null, record),
+                },
+              ]"
+            />
+          </template>
+        </template>
+      </BasicTable>
+      <TaskModal @register="registerModal" @success="handleSuccess" />
+    </div>
+  </template>
+  <script lang="ts" setup>
+    import { reactive } from 'vue';
+    import { BasicTable, useTable, TableAction } from '@/components/Table';
+    import { getRoleListByPage, deleteRole } from '@/api/demo/system';
+    import { useMessage } from '@/hooks/web/useMessage';
+    import { useModal } from '@/components/Modal';
+    import  TaskModal  from './src/taskModel.vue';
+    import { PermissionBtn } from '@/components/PermissionBtn/index';
+  
+    import { columns, searchFormSchema } from './data';
+  
+    defineOptions({ name: 'RoleManagement' });
+  
+    const { createConfirm, createMessage } = useMessage();
+    const [registerModal, { openModal: openRoleModal }] = useModal();
+    const [registerModulesModal, { openModal: openModulesModal }] = useModal();
+    const [registerAccountModal, { openModal: openAccountModal }] = useModal();
+    const searchInfo = reactive<Recordable>({});
+  
+    const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
+      // 表格名称
+      title: '任务列表',
+      // 获取数据的接口
+      api: getRoleListByPage,
+      // 表单列信息 BasicColumn[]
+      columns,
+      rowKey: 'id',
+      formConfig: {
+        labelWidth: 120,
+        schemas: searchFormSchema,
+      },
+      // 使用搜索表单
+      useSearchForm: true,
+      // 显示表格设置工具
+      showTableSetting: true,
+      // 是否显示表格边框
+      bordered: true,
+      // 序号列
+      showIndexColumn: false,
+      // 勾选列
+      rowSelection: {
+        //多选框
+        // type: 'checkbox',
+        type: 'radio',
+      },
+      // 搜索
+      handleSearchInfoFn(info) {
+        return info;
+      },
+    });
+  
+    function handleCreate() {
+      openRoleModal(true, {
+        isUpdate: false,
+      });
+    }
+    function viewAccount(record: Recordable) {
+      openAccountModal(true, {
+        record,
+      });
+    }
+  
+    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();
+            return createMessage.success('删除成功');
+          } else {
+            return createMessage.error('删除失败');
+          }
+        },
+      });
+    }
+  
+    function handleSuccess() {
+      clearSelectedRowKeys();
+      reload();
+    }
+    function onBtnClicked(domId) {
+      switch (domId) {
+        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;
+        default:
+          break;
+      }
+    }
+  </script>
+  

src/views/demo/monitor/uploadpictures/src/taskModel.vue

@@ -0,0 +1,53 @@
+<template>
+    <BasicModal v-bind="$attrs" @register="registerModal" title="添加任务" @ok="handleSubmit">
+      <BasicForm @register="registerForm" />
+    </BasicModal>
+  </template>
+  <script lang="ts" setup>
+    import { ref, computed, unref } from 'vue';
+    import { BasicModal, useModalInner } from '@/components/Modal';
+    import { BasicForm, useForm } from '@/components/Form';
+    import { formSchema } from '../data';
+    import { addPicTask } from '@/api/monitor/index';
+    import { useMessage } from '@/hooks/web/useMessage';
+    const { createMessage } = useMessage();
+  
+    defineOptions({ name: 'DeptModal' });
+  
+    const emit = defineEmits(['success', 'register']);
+  
+    const isUpdate = ref(true);
+  
+    const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+      labelWidth: 100,
+      baseColProps: { span: 24 },
+      schemas: formSchema,
+      showActionButtonGroup: false,
+    });
+  
+    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+      resetFields();
+      setModalProps({ confirmLoading: false });
+    });
+  
+  
+    async function handleSubmit() {
+      try {
+        const values = await validate();
+        let query = values;
+        const data = await addPicTask(query);
+          if (data) {
+            setModalProps({ confirmLoading: true });
+            // TODO custom api
+            closeModal();
+            emit('success');
+            return createMessage.success('新增成功');
+          } else {
+            return createMessage.error('新增失败');
+          }
+      } finally {
+        setModalProps({ confirmLoading: false });
+      }
+    }
+  </script>
+  

src/views/demo/onlineform/formCall/index.vue

@@ -34,7 +34,6 @@
   import { BasicTree, TreeItem, TreeActionItem, TreeActionType } from '@/components/Tree';
   import { getFormsDesignData, getFormsPageData, delFormsData } from '@/api/formrender/index';
   import { getOutKeyList } from '@/api/formdesign/index';
-  // import { searchFormSchema } from './index.data';
   import { PageWrapper } from '@/components/Page';
   import { cloneDeep } from 'lodash-es';
   import { IFormConfig } from '../../form-design/typings/v-form-component';
@@ -70,7 +69,6 @@
     columns: callColumns,
     formConfig: {
       labelWidth: 120,
-      // schemas: searchFormSchema,
     },
     rowSelection: {
       type: 'radio',

src/views/demo/query/complete/columns.data.ts

@@ -0,0 +1,58 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+
+export const tableColums: BasicColumn[] = [
+  {
+    title: '案件编号',
+    dataIndex: 'case_no',
+    width: 120,
+  },
+  {
+    title: '上报时间',
+    dataIndex: 'createtime',
+    width: 120,
+  },
+  {
+    title: '地点',
+    dataIndex: 'address',
+    width: 120,
+  },
+  {
+    title: '案件描述',
+    dataIndex: 'case_description',
+    width: 120,
+  },
+  {
+    title: '处理时间',
+    dataIndex: 'deal_time',
+    width: 120,
+  },
+  {
+    title: '案件处理人',
+    dataIndex: 'deal_username',
+    width: 120,
+  },
+  {
+    title: '处理进度',
+    dataIndex: 'verifystatusname',
+    width: 120,
+  },
+  {
+    title: '处理状态',
+    dataIndex: 'handle_status_name',
+    width: 120,
+  },
+  {
+    title: '办结时间',
+    dataIndex: 'verifytime',
+    width: 120,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'keyword',
+    label: '关键字',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];

src/views/demo/query/complete/index.vue

@@ -0,0 +1,336 @@
+<!-- eslint-disable vue/no-deprecated-v-on-native-modifier -->
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable
+      class="w-4/4 xl:w-5/5"
+      @register="registerTable"
+      @fetch-success="onFetchSuccess"
+      :searchInfo="searchInfo"
+    >
+      <template #toolbar>
+        <!-- 日期选择框 -->
+        <div style="display: inline; margin-right: 10px; width: 200px">
+          <a-range-picker
+            v-model:value="startEndTime"
+            size="mini"
+            align="right"
+            :presets="rangePresets"
+            @change="getCaseList"
+          />
+        </div>
+        <!-- 案件类型 -->
+        <div style="display: inline; margin-right: 10px; width: 100px">
+          <a-select
+            :options="caseTypeOptions"
+            v-model:value="listQuery.typeid"
+            placeholder="案件类型"
+            style="width: 100px"
+            :field-names="{ label: 'name', value: 'id' }"
+            @change="getCaseList"
+          />
+        </div>
+        <!-- 查询地区 -->
+        <div style="display: inline; margin-right: 10px; width: 100px">
+          <a-cascader
+            :options="OrgList"
+            v-model:value="listQuery.org"
+            placeholder="查询地区"
+            size="mini"
+            style="width: 100px"
+            @change="handleChange"
+          />
+        </div>
+        <!-- 现场状况 -->
+        <div style="display: inline; margin-right: 10px; width: 100px">
+          <a-select
+            :options="illegalOptions"
+            v-model:value="listQuery.is_illegal"
+            placeholder="现场状况"
+            style="width: 100px"
+            :field-names="{ label: 'name', value: 'id' }"
+            @change="getCaseList"
+          />
+        </div>
+        <!-- 案件编号 -->
+        <div style="display: inline; margin-right: 10px">
+          <a-input
+            @keyup.enter="getCaseList"
+            size="mini"
+            style="width: 120px"
+            class="filter-item"
+            :placeholder="'案件编号'"
+            v-model:value="listQuery.case_no"
+          />
+        </div>
+        <!-- 处理人姓名 -->
+        <div style="display: inline; margin-right: 10px">
+          <a-input
+            @keyup.enter="getCaseList"
+            size="mini"
+            style="width: 120px"
+            class="filter-item"
+            :placeholder="'处理人姓名'"
+            v-model:value="listQuery.deal_username"
+          />
+        </div>
+        <!-- 审核人姓名 -->
+        <div style="display: inline; margin-right: 10px">
+          <a-input
+            @keyup.enter="getCaseList"
+            size="mini"
+            style="width: 120px"
+            class="filter-item"
+            :placeholder="'审核人姓名'"
+            v-model:value="listQuery.verifyuser"
+          />
+        </div>
+        <!-- 请输入关键字 -->
+        <div style="display: inline; margin-right: 10px">
+          <a-input
+            @keyup.enter="getCaseList"
+            size="mini"
+            style="width: 120px"
+            class="filter-item"
+            :placeholder="'请输入关键字'"
+            v-model:value="listQuery.key"
+          />
+        </div>
+        <!-- 搜索按钮 -->
+        <a-button class="filter-item" type="primary" @click="getCaseList" size="mini">
+          查询
+        </a-button>
+        <a-button class="filter-item" @click="resetListQuery" size="mini"> 重置 </a-button>
+        <a-button class="filter-item" type="success" @click="exportExcelList" size="mini">
+          导出
+        </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <!-- 地点特殊处理 -->
+        <template v-if="column.key === 'address'">
+          <span>{{ record.streetname }}</span>
+          <span>{{ record.streetname }}</span>
+          <span>{{ record.communityname }}</span>
+        </template>
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '详情',
+                onClick: () => {
+                  openDetailModal(record);
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <DetailModal
+      @register="registerModal"
+      @close-modal="closeModal"
+      :caseDetailId="caseDetailId"
+      :isShowMap="true"
+      width="80%"
+    />
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  // vue
+  import { ref, reactive, onMounted } from 'vue';
+  // vben
+  import { PageWrapper } from '@/components/Page';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { TreeItem } from '@/components/Tree';
+  import { useModal } from '@/components/Modal';
+  import dayjs, { Dayjs } from 'dayjs';
+  // 子组件
+  import DetailModal from './detailModal.vue';
+  // api
+  import {
+    fun_LoadDataBaseInfo,
+    fun_LoadList,
+    fun_load,
+    fun_OrgList,
+    fun_ExportCaseInfoList,
+  } from '@/api/demo/query';
+  // ts
+  import { tableColums, searchFormSchema } from './columns.data';
+
+  // 日期选择框
+  type RangeValue = [Dayjs, Dayjs];
+  const startEndTime = ref<RangeValue>();
+  // 日期选择表-事件预选项
+  const rangePresets = ref([
+    { label: '今天', value: [dayjs(), dayjs()] },
+    { label: '最近三天', value: [dayjs().add(-3, 'd'), dayjs()] },
+    { label: '最近一周', value: [dayjs().add(-7, 'd'), dayjs()] },
+    { label: '最近两周', value: [dayjs().add(-14, 'd'), dayjs()] },
+    { label: '最近一个月', value: [dayjs().add(-30, 'd'), dayjs()] },
+    { label: '最近三个月', value: [dayjs().add(-90, 'd'), dayjs()] },
+    { label: '最近半年', value: [dayjs().add(-180, 'd'), dayjs()] },
+    { label: '最近一年', value: [dayjs().add(-365, 'd'), dayjs()] },
+  ]);
+  // 搜索条件
+  const searchInfo = reactive<Recordable>({});
+  // 导出
+  const BASE_API = process.env.VUE_APP_BASE;
+
+  // 查询条件
+  let listQuery = ref({
+    typeid: null,
+    org: null,
+    is_illegal: null,
+    case_no: null,
+    key: undefined,
+    deal_username: null,
+    verifyuser: null,
+    report_start_time: null,
+    report_end_time: null,
+    countyid: null,
+    streetid: null,
+    communityid: null,
+  });
+  // 现场状况
+  let illegalOptions = [
+    { id: 0, name: '合法' },
+    { id: 1, name: '违法' },
+    { id: 2, name: '伪变化' },
+  ];
+  // 案件类型
+  const caseTypeOptions = ref<[]>([]);
+  // 查询地区
+  const OrgList = ref<TreeItem[]>([]);
+
+  // 弹窗
+  const [registerModal, { openModal }] = useModal();
+  // 办结查询列表
+  const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
+    api: fun_LoadDataBaseInfo,
+    columns: tableColums,
+    rowKey: 'id',
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    striped: false,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    // 序号列
+    showIndexColumn: true,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    beforeFetch: (data) => {
+      // 接口请求前 参数处理
+      var temp = {
+        page: data.page,
+        rows: data.limit,
+        value: data.value,
+        handle_status_id: 2, //处理进度为：审核完成
+      };
+      return temp;
+    },
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+
+  // 搜索条件-查询地区
+  function handleChange(itemIdArr) {
+    if (itemIdArr.length === 0) {
+      listQuery.value.countyid = null;
+      listQuery.value.streetid = null;
+      listQuery.value.communityid = null;
+    }
+    if (itemIdArr.length === 1) {
+      listQuery.value.countyid = itemIdArr[0];
+      listQuery.value.streetid = null;
+      listQuery.value.communityid = null;
+    } else if (itemIdArr.length == 2) {
+      listQuery.value.countyid = null;
+      listQuery.value.streetid = itemIdArr[1];
+      listQuery.value.communityid = null;
+    } else if (itemIdArr.length == 3) {
+      listQuery.value.countyid = null;
+      listQuery.value.streetid = null;
+      listQuery.value.communityid = itemIdArr[2];
+    }
+    getCaseList();
+  }
+
+  // 条件搜索
+  async function getCaseList() {
+    // 日期选择框
+    if (startEndTime.value != null) {
+      listQuery.value.report_start_time = startEndTime.value[0].format('YYYY-MM-DD');
+      listQuery.value.report_end_time = startEndTime.value[1].format('YYYY-MM-DD');
+    } else {
+      listQuery.value.report_start_time = null;
+      listQuery.value.report_end_time = null;
+    }
+    searchInfo.value = listQuery.value;
+    clearSelectedRowKeys();
+    reload();
+  }
+
+  // 重置
+  function resetListQuery() {
+    startEndTime.value = null;
+    // 查询条件
+    listQuery.value = {
+      typeid: null,
+      org: null,
+      is_illegal: null,
+      case_no: null,
+      key: undefined,
+      deal_username: null,
+      verifyuser: null,
+      report_start_time: null,
+      report_end_time: null,
+      countyid: null,
+      streetid: null,
+      communityid: null,
+    };
+    getCaseList();
+  }
+
+  // 导出
+  async function exportExcelList() {
+    await fun_ExportCaseInfoList(listQuery.value).then((res) => {
+      console.log('导出', res);
+      if (res.code === 200) {
+        window.location.href = BASE_API + '/' + res.result;
+      }
+    });
+  }
+
+  // 打开详情窗口
+  let caseDetailId = '';
+  function openDetailModal(record: Recordable) {
+    caseDetailId = record.id;
+    openModal(true, { record });
+  }
+
+  // 初始化
+  async function fetch() {
+    getCaseList();
+    let data0 = await fun_LoadList({ typeid: 'SYS_NOBUILD_TYPE' });
+    console.log(data0);
+    // 案件类型
+    let data1 = await fun_load({ page: 1, limit: 99, typeid: 'DRONE_CASE_TYPE' });
+    // caseTypeOptions.value =
+    console.log(data1);
+
+    // 查询地区
+    let data2 = await fun_OrgList({ name: '费县' });
+    // OrgList.value =
+    console.log(data2);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+</script>

src/views/demo/query/complete/mapDetail.vue

@@ -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>

src/views/demo/query/return/columns.data.ts

@@ -0,0 +1,48 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+
+export const tableColums: BasicColumn[] = [
+  {
+    title: '案件编号',
+    dataIndex: 'case_no',
+    width: 120,
+  },
+  {
+    title: '上报时间',
+    dataIndex: 'createtime',
+    width: 120,
+  },
+  {
+    title: '地点',
+    dataIndex: 'address',
+    width: 120,
+  },
+  {
+    title: '案件描述',
+    dataIndex: 'case_description',
+    width: 120,
+  },
+  {
+    title: '处理时间',
+    dataIndex: 'deal_time',
+    width: 120,
+  },
+  {
+    title: '案件处理人',
+    dataIndex: 'deal_username',
+    width: 120,
+  },
+  {
+    title: '退回次数',
+    dataIndex: 'drawbackcount',
+    width: 80,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'keyword',
+    label: '关键字',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];

src/views/demo/query/return/index.vue

@@ -0,0 +1,328 @@
+<!-- eslint-disable vue/no-deprecated-v-on-native-modifier -->
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable
+      class="w-4/4 xl:w-5/5"
+      @register="registerTable"
+      @fetch-success="onFetchSuccess"
+      :searchInfo="searchInfo"
+    >
+      <template #toolbar>
+        <!-- 日期选择框 -->
+        <div style="display: inline; margin-right: 10px; width: 200px">
+          <a-range-picker
+            v-model:value="startEndTime"
+            size="mini"
+            align="right"
+            :presets="rangePresets"
+            @change="getCaseList"
+          />
+        </div>
+        <!-- 案件类型 -->
+        <div style="display: inline; margin-right: 10px; width: 100px">
+          <a-select
+            :options="caseTypeOptions"
+            v-model:value="listQuery.typeid"
+            placeholder="案件类型"
+            style="width: 100px"
+            :field-names="{ label: 'name', value: 'id' }"
+            @change="getCaseList"
+          />
+        </div>
+        <!-- 查询地区 -->
+        <div style="display: inline; margin-right: 10px; width: 100px">
+          <a-cascader
+            :options="OrgList"
+            v-model:value="listQuery.org"
+            placeholder="查询地区"
+            size="mini"
+            style="width: 100px"
+            @change="handleChange"
+          />
+        </div>
+        <!-- 现场状况 -->
+        <div style="display: inline; margin-right: 10px; width: 100px">
+          <a-select
+            :options="illegalOptions"
+            v-model:value="listQuery.is_illegal"
+            placeholder="现场状况"
+            style="width: 100px"
+            :field-names="{ label: 'name', value: 'id' }"
+            @change="getCaseList"
+          />
+        </div>
+        <!-- 案件编号 -->
+        <div style="display: inline; margin-right: 10px">
+          <a-input
+            @keyup.enter="getCaseList"
+            size="mini"
+            style="width: 120px"
+            class="filter-item"
+            :placeholder="'案件编号'"
+            v-model:value="listQuery.case_no"
+          />
+        </div>
+        <!-- 处理人姓名 -->
+        <div style="display: inline; margin-right: 10px">
+          <a-input
+            @keyup.enter="getCaseList"
+            size="mini"
+            style="width: 120px"
+            class="filter-item"
+            :placeholder="'处理人姓名'"
+            v-model:value="listQuery.deal_username"
+          />
+        </div>
+        <!-- 请输入关键字 -->
+        <div style="display: inline; margin-right: 10px">
+          <a-input
+            @keyup.enter="getCaseList"
+            size="mini"
+            style="width: 120px"
+            class="filter-item"
+            :placeholder="'请输入关键字'"
+            v-model:value="listQuery.key"
+          />
+        </div>
+        <!-- 搜索按钮 -->
+        <a-button class="filter-item" type="primary" @click="getCaseList" size="mini">
+          查询
+        </a-button>
+        <a-button class="filter-item" @click="resetListQuery" size="mini"> 重置 </a-button>
+        <a-button class="filter-item" type="success" @click="exportExcelList" size="mini">
+          导出
+        </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <!-- 地点特殊处理 -->
+        <template v-if="column.key === 'address'">
+          <span>{{ record.streetname }}</span>
+          <span>{{ record.streetname }}</span>
+          <span>{{ record.communityname }}</span>
+        </template>
+        <template v-if="column.key === 'drawbackcount'">
+          <span>{{ record.drawbackcount >= 1 ? record.drawbackcount : 1 }}</span>
+        </template>
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '详情',
+                onClick: () => {
+                  openDetailModal(record);
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <DetailModal
+      @register="registerModal"
+      @close-modal="closeModal"
+      :caseDetailId="caseDetailId"
+      :isShowMap="true"
+      width="80%"
+    />
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  // vue
+  import { ref, reactive, onMounted } from 'vue';
+  // vben
+  import { PageWrapper } from '@/components/Page';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { TreeItem } from '@/components/Tree';
+  import { useModal } from '@/components/Modal';
+  import dayjs, { Dayjs } from 'dayjs';
+  // 子组件
+  import DetailModal from './detailModal.vue';
+  // api
+  import {
+    fun_LoadDataBaseInfo,
+    fun_LoadList,
+    fun_load,
+    fun_OrgList,
+    fun_ExportCaseInfoList,
+  } from '@/api/demo/query';
+  // ts
+  import { tableColums, searchFormSchema } from './columns.data';
+
+  // 日期选择框
+  type RangeValue = [Dayjs, Dayjs];
+  const startEndTime = ref<RangeValue>();
+  // 日期选择表-事件预选项
+  const rangePresets = ref([
+    { label: '今天', value: [dayjs(), dayjs()] },
+    { label: '最近三天', value: [dayjs().add(-3, 'd'), dayjs()] },
+    { label: '最近一周', value: [dayjs().add(-7, 'd'), dayjs()] },
+    { label: '最近两周', value: [dayjs().add(-14, 'd'), dayjs()] },
+    { label: '最近一个月', value: [dayjs().add(-30, 'd'), dayjs()] },
+    { label: '最近三个月', value: [dayjs().add(-90, 'd'), dayjs()] },
+    { label: '最近半年', value: [dayjs().add(-180, 'd'), dayjs()] },
+    { label: '最近一年', value: [dayjs().add(-365, 'd'), dayjs()] },
+  ]);
+  // 搜索条件
+  const searchInfo = reactive<Recordable>({});
+  // 导出
+  const BASE_API = process.env.VUE_APP_BASE;
+
+  // 查询条件
+  let listQuery = ref({
+    typeid: null,
+    org: null,
+    is_illegal: null,
+    case_no: null,
+    key: undefined,
+    deal_username: null,
+    report_start_time: null,
+    report_end_time: null,
+    countyid: null,
+    streetid: null,
+    communityid: null,
+    is_drawback: 1,
+  });
+  // 现场状况
+  let illegalOptions = [
+    { id: 0, name: '合法' },
+    { id: 1, name: '违法' },
+    { id: 2, name: '伪变化' },
+  ];
+  // 案件类型
+  const caseTypeOptions = ref<[]>([]);
+  // 查询地区
+  const OrgList = ref<TreeItem[]>([]);
+
+  // 弹窗
+  const [registerModal, { openModal }] = useModal();
+  // 办结查询列表
+  const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
+    api: fun_LoadDataBaseInfo,
+    columns: tableColums,
+    rowKey: 'id',
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    striped: false,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    // 序号列
+    showIndexColumn: true,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+    beforeFetch: (data) => {
+      // 接口请求前 参数处理
+      var temp = {
+        page: data.page,
+        rows: data.limit,
+        value: data.value,
+        is_drawback: 1, //处理进度为：退回
+      };
+      return temp;
+    },
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+
+  // 搜索条件-查询地区
+  function handleChange(itemIdArr) {
+    if (itemIdArr.length === 0) {
+      listQuery.value.countyid = null;
+      listQuery.value.streetid = null;
+      listQuery.value.communityid = null;
+    }
+    if (itemIdArr.length === 1) {
+      listQuery.value.countyid = itemIdArr[0];
+      listQuery.value.streetid = null;
+      listQuery.value.communityid = null;
+    } else if (itemIdArr.length == 2) {
+      listQuery.value.countyid = null;
+      listQuery.value.streetid = itemIdArr[1];
+      listQuery.value.communityid = null;
+    } else if (itemIdArr.length == 3) {
+      listQuery.value.countyid = null;
+      listQuery.value.streetid = null;
+      listQuery.value.communityid = itemIdArr[2];
+    }
+    getCaseList();
+  }
+
+  // 条件搜索
+  async function getCaseList() {
+    // 日期选择框
+    if (startEndTime.value != null) {
+      listQuery.value.report_start_time = startEndTime.value[0].format('YYYY-MM-DD');
+      listQuery.value.report_end_time = startEndTime.value[1].format('YYYY-MM-DD');
+    } else {
+      listQuery.value.report_start_time = null;
+      listQuery.value.report_end_time = null;
+    }
+    searchInfo.value = listQuery.value;
+    clearSelectedRowKeys();
+    reload();
+  }
+
+  // 重置
+  function resetListQuery() {
+    startEndTime.value = null;
+    // 查询条件
+    listQuery.value = {
+      typeid: null,
+      org: null,
+      is_illegal: null,
+      case_no: null,
+      key: undefined,
+      deal_username: null,
+      report_start_time: null,
+      report_end_time: null,
+      countyid: null,
+      streetid: null,
+      communityid: null,
+      is_drawback: 1,
+    };
+    getCaseList();
+  }
+
+  // 导出
+  async function exportExcelList() {
+    await fun_ExportCaseInfoList(listQuery.value).then((res) => {
+      console.log('导出', res);
+      if (res.code === 200) {
+        window.location.href = BASE_API + '/' + res.result;
+      }
+    });
+  }
+
+  // 打开详情窗口
+  let caseDetailId = '';
+  function openDetailModal(record: Recordable) {
+    caseDetailId = record.id;
+    openModal(true, { record });
+  }
+
+  // 初始化
+  async function fetch() {
+    getCaseList();
+    let data0 = await fun_LoadList({ typeid: 'SYS_NOBUILD_TYPE' });
+    console.log(data0);
+    // 案件类型
+    let data1 = await fun_load({ page: 1, limit: 99, typeid: 'DRONE_CASE_TYPE' });
+    // caseTypeOptions.value =
+    console.log(data1);
+
+    // 查询地区
+    let data2 = await fun_OrgList({ name: '费县' });
+    // OrgList.value =
+    console.log(data2);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+</script>

src/views/demo/query/return/mapDetail.vue

@@ -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>

src/views/demo/summaryverification/index.ts

@@ -0,0 +1,2 @@
+// 地图位置
+export { default as MapDetail } from './module/mapDetail.vue';

src/views/demo/summaryverification/module/index.data.ts

@@ -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',
+  },
+];

src/views/demo/summaryverification/module/index.vue

@@ -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>

src/views/demo/summaryverification/module/mapDetail.vue

@@ -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>