Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

src/api/demo/cloudQuery.ts

@@ -7,7 +7,7 @@ enum Api {
   LoadCloudQueryById = '/api/DroneCloudQuery/LoadCloudQueryById'
 }
 
-export function AddDroneTask(params: { geomid: string }) {
+export function AddDroneTask(params: { geomid: string, caseno: string }) {
   return defHttp.post({
     url: Api.AddDroneTask + "?geomid=" + params.geomid,
     params,

src/api/illegalmining/index.ts

@@ -18,7 +18,29 @@ enum Api {
   LoadTaskIllegalDetailList = '/api/DroneCaseInfoSatellite/LoadTaskIllegalDetailList',
   // 图斑详情
   GetCaseInfoById = '/api/DroneCaseInfoSatellite/GetCaseInfoById',
+
+  /****************************************************************************************************************************/
+
+  // 图斑填报
+  LoadReportingTaskList = '/api/DroneCaseInfoMinerals/LoadReportingTaskList',
+  // 填报审核
+  LoadReportingAuditTaskList = '/api/DroneCaseInfoMinerals/LoadReportingAuditTaskList',
+  // 图斑查处
+  LoadExaminingTaskList = '/api/DroneCaseInfoMinerals/LoadExaminingTaskList',
+  // 查处审核
+  LoadExaminingAuditTaskList = '/api/DroneCaseInfoMinerals/LoadExaminingAuditTaskList',
+  // 图斑整改
+  LoadRectifyingTaskList = '/api/DroneCaseInfoMinerals/LoadRectifyingTaskList',
+  // 整改审核
+  LoadRectifyingAuditTaskList = '/api/DroneCaseInfoMinerals/LoadRectifyingAuditTaskList',
+  // 图斑调整
+  LoadModifyingTaskList = '/api/DroneCaseInfoMinerals/LoadModifyingTaskList',
+  // 图斑收藏
+  AddTaskFavorite = '/api/DroneCaseInfoMinerals/AddTaskFavorite',
+  // 取消收藏
+  CancelTaskFavorite = '/api/DroneCaseInfoMinerals/CancelTaskFavorite',
 }
+
 export function LoadCaiKuangTaskList(params) {
   return defHttp.get({ url: Api.LoadCaiKuangTaskList, params });
 }
@@ -48,4 +70,34 @@ export function LoadReformCaseCount(params) {
 }
 export function GetCaseInfoById(params?: { id: string }) {
   return defHttp.get({ url: Api.GetCaseInfoById, params });
+}
+
+/****************************************************************************************************************************/
+
+export function LoadReportingTaskList(params){
+  return defHttp.get({ url: Api.LoadReportingTaskList, params });
+}
+export function LoadReportingAuditTaskList(params){
+  return defHttp.get({ url: Api.LoadReportingAuditTaskList, params });
+}
+export function LoadExaminingTaskList(params){
+  return defHttp.get({ url: Api.LoadExaminingTaskList, params });
+}
+export function LoadExaminingAuditTaskList(params){
+  return defHttp.get({ url: Api.LoadExaminingAuditTaskList, params });
+}
+export function LoadRectifyingTaskList(params){
+  return defHttp.get({ url: Api.LoadRectifyingTaskList, params });
+}
+export function LoadRectifyingAuditTaskList(params){
+  return defHttp.get({ url: Api.LoadRectifyingAuditTaskList, params });
+}
+export function LoadModifyingTaskList(params){
+  return defHttp.get({ url: Api.LoadModifyingTaskList, params });
+}
+export function AddTaskFavorite(params){
+  return defHttp.post({ url: Api.AddTaskFavorite, params });
+}
+export function CancelTaskFavorite(params){
+  return defHttp.post({ url: Api.CancelTaskFavorite, data: params });
 }

src/api/inspectionaudit/index.ts

@@ -0,0 +1,171 @@
+// WFProcess 流程模版基本信息
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  // 获取待办任务统计数据
+  LoadTaskCount = '/api/DroneCaseInfoXcsj/LoadTaskCount',
+  //   获取图斑信息统计数据
+  LoadDroneCaseInfoCount = '/api/DroneCaseInfoXcsj/LoadDroneCaseInfoCount',
+  // 分页获取图斑信息列表
+  LoadDroneCaseInfoDetail = '/api/DroneCaseInfoXcsj/LoadTasklList',
+  // 分页获取任务信息列表
+  LoadTaskDetailList = '/api/DroneCaseInfoXcsj/LoadTaskDetailList',
+  // 收藏图斑
+  AddCaseFavorite = '/api/DroneCaseInfoXcsj/AddCaseFavorite',
+  // 获取收藏图斑列表
+  FavoriteCaseList = '/api/DroneCaseinfo/FavoriteCaseList',
+  DeleteFavoriteCase = '/api/DroneCaseInfoXcsj/DeleteFavoriteCase',
+  // 获取图斑详情
+  GetCaseInfoById = '/api/DroneCaseInfoXcsj/GetCaseInfoById',
+  // 更新图斑行政区划
+  UpdateDroneCaseInfo = '/api/DroneCaseInfoXcsj/UpdateDroneCaseInfo',
+  // 督办流程
+  Supervise = '/api/WFProcess/Supervise',
+  // 获取部门父级
+  LoadParents = '/api/Orgs/LoadParents',
+  // 审核列表收藏
+  AddtaskFavorite = '/api/DroneCaseInfoXcsj/AddtaskFavorite',
+  // 审核列表删除收藏
+  DeleteTaskCase = '/api/DroneCaseInfoXcsj/DeleteTaskCase',
+  // 获取当前账号可以看见的乡镇
+  loadStreet = '/api/DroneCaseInfoXcsj/loadStreet',
+  // 违法处理，待办任务列表
+  LoadTaskIllegalDetailList = '/api/DroneCaseInfoXcsj/LoadTaskIllegalDetailList',
+  // 分割图斑
+  SplitCase = '/api/DroneCaseInfoXcsj/CaseSplit',
+  // 恢复还原
+  RecoverCase = '/api/DroneCaseInfoXcsj/CaseRecover',
+  // 获取图斑中心点
+  GetPolygonCenter = '/api/DroneCaseInfoXcsj/GetCenterPoints',
+  // 获取用户访问机构权限
+  GetUserOrgs = '/api/Check/GetOrgs',
+  // 大屏下发图斑统计
+  IssuedStatitical = "/api/DroneScreenDisplay/CaseOffenceXiaFa",
+  // 大屏核实新增统计
+  VerifyStatitical = "/api/DroneScreenDisplay/CaseOffenceCheckAdd",
+  // 大屏整改剩余统计
+  RectificationStatitical = "/api/DroneScreenDisplay/CaseOffenceModifyRemain",
+  // 获取案件图片坐标、方位角信息
+  LoadCaseImgList = "/api/DroneCaseInfoXcsj/LoadCaseImgList",
+  // 图斑列表
+  LoadCaseInfoTuBanList = '/api/DroneCaseInfoXcsj/LoadCaseInfoTuBanList',
+  CaseOffence = '/api/DroneCaseInfoXcsj/CaseOffence',
+  LoadCaseInfoListOffence = '/api/DroneCaseInfoXcsj/LoadCaseInfoListOffence',
+}
+
+/**
+ * @description: getCaseFlowLog
+ */
+export function getLoadTaskCount(params?) {
+  return defHttp.get({ url: Api.LoadTaskCount, params });
+}
+export function getLoadStreet() {
+  return defHttp.get({ url: Api.loadStreet });
+}
+
+/**
+ * @description: getCaseFlowLog
+ */
+export function getLoadDroneCaseInfoCount(params) {
+  return defHttp.get({ url: Api.LoadDroneCaseInfoCount, params });
+}
+
+/**
+ * @description: getCaseFlowLog
+ */
+export function getLoadDroneCaseInfoDetail(params) {
+  return defHttp.get({ url: Api.LoadDroneCaseInfoDetail, params });
+}
+/**
+ * @description: getCaseFlowLog
+ */
+export function getLoadTaskDetailList(params) {
+  return defHttp.get({ url: Api.LoadTaskDetailList, params });
+}
+
+export function addCaseFavorite(params) {
+  return defHttp.post({ url: Api.AddCaseFavorite, params });
+}
+export function addTaskFavorite(params?: { taskId: string; favoriteUserId: string }) {
+  return defHttp.post({ url: Api.AddtaskFavorite, params });
+}
+export function deleteFavoriteCase(params: string) {
+  return defHttp.post({ url: Api.DeleteFavoriteCase, data: params });
+}
+export function deleteTaskCase(params: string) {
+  return defHttp.post({ url: Api.DeleteTaskCase, data: params });
+}
+
+export function getFavoriteCaseList(params?: { uid: string }) {
+  return defHttp.get({ url: Api.FavoriteCaseList, params });
+}
+export function getCaseInfoById(params?: { id: string }) {
+  return defHttp.get({ url: Api.GetCaseInfoById, params });
+}
+export const updateDroneCaseInfo = (params) =>
+  defHttp.post({ url: Api.UpdateDroneCaseInfo, params });
+
+export const updateSupervise = (params: { id: string; supervise: number }) =>
+  defHttp.post({ url: `${Api.Supervise}?id=${params.id}&supervise=${params.supervise}`, params });
+
+export const getLoadParents = (params: { childId: Number }) =>
+  defHttp.get({ url: `${Api.LoadParents}?childId=${params.childId}` });
+
+export function getLoadTaskIllegalDetailList(params) {
+  return defHttp.get({ url: Api.LoadTaskIllegalDetailList, params });
+}
+
+export function splitCase(params){
+  return defHttp.post({ url: Api.SplitCase, data: params });
+}
+
+export function recoverCase(params){
+  return defHttp.post({ url: Api.RecoverCase, data: params });
+}
+
+export function getPolygonCenter(params){
+  return defHttp.get({ url: Api.GetPolygonCenter, params });
+}
+
+export function getUserOrgs(params){
+  return defHttp.get({ url: Api.GetUserOrgs, params });
+}
+
+
+export function getIssuedStatitical(params) {
+  return defHttp.get({
+    url: Api.IssuedStatitical,
+    params,
+  });
+}
+
+export function getVerifyStatitical(params) {
+  return defHttp.get({
+    url: Api.VerifyStatitical,
+    params,
+  });
+}
+
+export function getRectificationStatitical(params) {
+  return defHttp.get({
+    url: Api.RectificationStatitical,
+    params,
+  });
+}
+
+export function getLoadCaseImgList(params){
+  return defHttp.get({
+    url: Api.LoadCaseImgList,
+    params,
+  });
+}
+export function loadCaseInfoTuBanList(params) {
+  return defHttp.get({
+    url: Api.LoadCaseInfoTuBanList,
+    params,
+  });
+}
+export const getCaseOffence = (params) =>
+  defHttp.get({ url: Api.CaseOffence, params });
+export const getLoadCaseInfoListOffence = (params) =>
+  defHttp.get({ url: Api.LoadCaseInfoListOffence, params });

src/api/minerals/index.ts

@@ -0,0 +1,26 @@
+import { defHttp } from '@/utils/http/axios';
+import { tubanListParams } from './model/index';
+
+enum Api {
+  // 获取待办任务统计数据
+  LoadCaseInfoMineralsTuBanList = '/api/DroneCaseInfoMinerals/LoadCaseInfoMineralsTuBanList',
+  LoadMineralsLedger = '/api/DroneCaseInfoMinerals/LoadMineralsLedger',
+  LoadMineralsProcess = '/api/DroneCaseInfoMinerals/LoadMineralsProcess',
+  GetCaseInfoById = '/api/DroneCaseInfoMinerals/GetCaseInfoById',
+}
+
+export function getLoadCaseInfoMineralsTuBanList(params?: tubanListParams) {
+  return defHttp.get({ url: Api.LoadCaseInfoMineralsTuBanList, params });
+}
+
+export function getLoadMineralsLedger(params?: tubanListParams) {
+  return defHttp.get({ url: Api.LoadMineralsLedger, params });
+}
+
+export function getLoadMineralsProcess(params?: tubanListParams) {
+  return defHttp.get({ url: Api.LoadMineralsProcess, params });
+}
+
+export function getCaseInfoById(params) {
+  return defHttp.get({ url: Api.GetCaseInfoById, params });
+}

src/api/minerals/model/index.ts

@@ -0,0 +1,20 @@
+export interface tubanListParams {
+  page?: number;
+  limit?: number;
+  syear_base?: string;
+  type_base?: string;
+  tubanlaiyuan?: string;
+  startTime?: string;
+  endTime?: string;
+  weifatype_jgfill?: number;
+  wefatype_kcfill?: number;
+  zhongdianflag_base?: number;
+  countyid?: string;
+  streetid?: string;
+  tubannum_base?: string;
+  hefapanding_fill?: number;
+  status_base?: string;
+  tubanArea1?: string;
+  tubanArea2?: string;
+  kuangzhong_kcfill?: string;
+}

src/components/FormViewer/cardGourp.vue

@@ -18,7 +18,7 @@
       :title="item.label"
     > -->
     <a-card style="width: 100%">
-      <BasicForm ref="cardRef" @register="registerForm" @change="changeForm">
+      <BasicForm ref="cardRef" @register="registerForm" @click="changeForm" @change="changeForm">
         <template #CardGroup>
           <template v-if="Object.keys(childItem).length > 0">
             <CardGourp

src/components/FormViewer/index.vue

@@ -508,6 +508,24 @@
           await proxy.$refs.tabsFormRef4[0].validate();
           values = proxy.$refs.tabsFormRef4[0].getFieldsValue();
           break;
+        case 5:
+          resultObj = proxy.$refs.tabsFormRef5[0].getFieldsValue();
+          proxy.$refs.tabsFormRef5[0].setFieldsValue({
+            ...resultObj,
+            ...subTableDataStore.getGroupData,
+          });
+          await proxy.$refs.tabsFormRef5[0].validate();
+          values = proxy.$refs.tabsFormRef5[0].getFieldsValue();
+          break;
+        case 6:
+          resultObj = proxy.$refs.tabsFormRef6[0].getFieldsValue();
+          proxy.$refs.tabsFormRef6[0].setFieldsValue({
+            ...resultObj,
+            ...subTableDataStore.getGroupData,
+          });
+          await proxy.$refs.tabsFormRef6[0].validate();
+          values = proxy.$refs.tabsFormRef6[0].getFieldsValue();
+          break;
         default:
           resultObj = getFieldsValue();
           setFieldsValue({

src/components/MapboxMaps/MapComponent.vue

@@ -412,6 +412,10 @@ import shp from 'shpjs'
       type: Array,
       default: null,
     },
+    caseno: {
+      type: String,
+      default: '',
+    }
   });
 
   let nextMapControl: Array<any> = reactive([]);
@@ -1668,7 +1672,7 @@ import shp from 'shpjs'
       message.warning('已有云查询运行，不能再次提交');
     } else {
       let geomidStr = props.geomsList.map((item) => item.key).join(',');
-      AddDroneTask({ geomid: geomidStr }).then((res) => {
+      AddDroneTask({ geomid: geomidStr, caseno: props.caseno }).then((res) => {
         message.success('成功提交云查询');
         useCloudQuery.setIdentification(true);
       });

src/components/illegalmining/PaginationComponent/index.vue

@@ -4,6 +4,7 @@
       size="small" 
       v-model:pageSize="props.pageData.limit"
       v-model:current="props.pageData.page" 
+      :show-total="total => `共 ${total} 条数据`"
       :total="props.total" 
       show-size-changer 
       show-quick-jumper

src/components/illegalmining/SearchComponent/index.vue

@@ -64,6 +64,16 @@
         @change="(value) => emits('screenDataChange',value,'typename')"
       />
     </div>
+    <div class="screen-item" style="margin-right: 13px;margin-bottom:12px;" v-if="showItem('register')">
+      <div class="screen-item-label">是否立案</div>
+      <a-select
+        allowClear
+        style="width: 97px"
+        :options="registerOptions"
+        v-model:value="props.screenData.register"
+        @change="(value) => emits('screenDataChange',value,'register')"
+      />
+    </div>
     <div class="screen-item" style="margin-bottom:12px;" v-if="showItem('time')">
       <div class="screen-item-label" style="margin-right: 10px;">下发时间</div>
       <a-range-picker
@@ -82,7 +92,7 @@
         class="item-input"
         v-model:value="props.screenData.caseNo"
         @change="(value) => emits('screenDataChange',value.target.value,'caseNo')"
-        style="width:404px;"
+        :style="`width:${smallInput.includes(props.usePage)? '219': '404'}px;`"
       />
     </div>
     <div class="screen-item" style="margin-left: 10px;cursor: pointer;">
@@ -101,7 +111,7 @@ import { defineProps, defineEmits, ref, h } from "vue"
 import { SearchOutlined } from "@ant-design/icons-vue"
 import Icon from '@/components/Icon/Icon.vue';
 import { yearOptions } from '@/utils/global'
-import { polygonSourceOptions, polygonTypeOptions, countiesOptions, statusOptions, usePageGetSearchItem } from '@/components/illegalmining/util'
+import { polygonSourceOptions, polygonTypeOptions, countiesOptions, statusOptions, usePageGetSearchItem, smallInput, registerOptions } from '@/components/illegalmining/util'
 import { getChildrenTree } from '@/api/demo/system';
 
 const props = defineProps(["screenData","usePage"])

src/components/illegalmining/ShowListComponent/index.vue

@@ -12,7 +12,7 @@
               <span>{{item.caseno}}</span>
             </div>
           </div>
-          <div class="item-mark" v-if="item.isbuildname">{{item.isbuildname}}</div>
+          <div class="item-mark" v-if="item.typename">{{item.typename}}</div>
         </div>
         <div class="data-item-type-div" style="cursor:pointer;" @click="goAudit(item)">
           {{item.unitname}}
@@ -22,20 +22,20 @@
         <div class="info-layout-div">
           <div class="info-item" style="width: 130px;">
             <div class="info-label">总面积</div>
-            <div class="info-data" :title="dataProcessing(item.area)">{{dataProcessing(item.area)}}</div>
+            <div class="info-data" :title="dataProcessing(item.weifaarea_base)">{{dataProcessing(item.weifaarea_base)}}</div>
           </div>
           <div class="info-item" style="width: 130px;">
             <div class="info-label">违法</div>
-            <div class="info-data" :title="dataProcessing(item.nongyongdiarea)">{{dataProcessing(item.nongyongdiarea)}}</div>
+            <div class="info-data" :title="dataProcessing(item.illegalarea)">{{dataProcessing(item.illegalarea)}}</div>
           </div>
           <div class="info-item" style="width: 130px;">
             <div class="info-label">耕地</div>
-            <div class="info-data" :title="dataProcessing(item.gengdiarea)">{{dataProcessing(item.gengdiarea)}}</div>
+            <div class="info-data" :title="dataProcessing(item.gengdi_area)">{{dataProcessing(item.gengdi_area)}}</div>
           </div>
         </div>
         <div class="info-layout-div">
           <div>
-            <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"   @click="collectItem(item)"  v-if="item.fid"/>
+            <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"   @click="collectItem(item)"  v-if="item.Fid"/>
             <img src="@/assets/images/tiankongdi/collect.png" class="img-box"   @click="collectItem(item)"  v-else/>
           </div>
         </div>
@@ -45,7 +45,7 @@
       width="100%"
       wrap-class-name="full-modal"
       v-model:open="auditOpen"
-      title="接收办理"
+      :title="modalTitle"
       footer=""
       :destroyOnClose="true"
     >
@@ -68,6 +68,7 @@
         :taskId="taskId"
         :isRead="isRead"
         :type="type"
+        :auditData="auditData"
         @closeModel="closeMolder"
       />
     </a-modal>
@@ -86,8 +87,7 @@ import { Audit } from '@/views/demo/workflow/task/process/page';
 import dayjs from 'dayjs';
 import { usePageRequestUrl } from '@/components/illegalmining/util'
 import { defHttp } from '@/utils/http/axios';
-// TODO 更换接口
-import { addTaskFavorite,deleteTaskCase } from '@/api/tiankongdi/index';
+import { AddTaskFavorite, CancelTaskFavorite } from '@/api/illegalmining/index'
 
 const userStore = useUserStore()
 const flowWfDataStore = flowStore();
@@ -101,11 +101,13 @@ const auditOpen = ref(false);
 const processId = ref('');
 const taskId = ref('');
 const type = ref('');
+const auditData = ref()
 const isRead: any = ref(0);
 const handoffShow = ref(true)
 const showDataId = ref()
 const nextShowDataId = ref()
 const prevShowDataId = ref()
+const modalTitle = ref('')
 
 watch(() => showDataId.value, () => {
   let index = props.dataList.findIndex(item => item.id == showDataId.value)
@@ -126,6 +128,7 @@ const locationFun = (record) => {
   emits('changeTask', record.geomid);
 }
 const goAudit = async (record) => {
+  modalTitle.value = record.unitname
   showDataId.value = record.id
   let data = await getDetail({ code: record.processcode });
   let scheme = JSON.parse(data.scheme.content);
@@ -135,10 +138,11 @@ const goAudit = async (record) => {
   processId.value = record.processid;
   taskId.value = record.taskid;
   type.value = record.type;
+  auditData.value = record;
 }
 const collectItem = (item) => {
   console.log(item,userStore.getUserInfo)
-  if(item.fid){
+  if(item.Fid){
     cancelCollectItem(item)
     return
   }
@@ -147,14 +151,14 @@ const collectItem = (item) => {
     taskId: item.taskid,
     favoriteUserId: userInfo.id
   }
-  addTaskFavorite(params).then(res => {
+  AddTaskFavorite(params).then(res => {
     console.log(res)
     message.success('收藏成功')
     emits('query')
   })
 }
 const cancelCollectItem = (item) => {
-  deleteTaskCase(item.fid).then(res => {
+  CancelTaskFavorite(item.Fid).then(res => {
     message.success('取消收藏成功')
     emits('query')
   })
@@ -178,6 +182,7 @@ const prevData = async () => {
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = res.items[res.items.length -1].id
+      auditData.value = res.items[res.items.length -1]
     })
     return
   }else{
@@ -193,6 +198,7 @@ const prevData = async () => {
   taskId.value = record.taskid;
   type.value = record.type;
   handoffShow.value = true
+  auditData.value = record
 }
 const nextData = async () => {
   if(nextShowDataId.value === 0){
@@ -213,6 +219,7 @@ const nextData = async () => {
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = res.items[0].id
+      auditData.value = res.items[0]
     })
     return
   }else{
@@ -228,6 +235,7 @@ const nextData = async () => {
   taskId.value = record.taskid;
   type.value = record.type;
   handoffShow.value = true
+  auditData.value = record
 }
 const getParams = (data) => {
   let params = {
@@ -248,7 +256,7 @@ const getParams = (data) => {
         }
         break
       default:
-        if(props.screenData[key] && props.screenData[key] !== ''){
+        if(props.screenData[key] !== null && props.screenData[key] !== undefined  && props.screenData[key] !== ''){
           params[key] = props.screenData[key]
         }
         break
@@ -257,6 +265,7 @@ const getParams = (data) => {
   return {...params, ...data}
 }
 const closeMolder = () => {
+  emits('query')
 }
 </script>
 

src/components/illegalmining/SortComponent/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="sift-div">
     <div class="layout-div">
-      <div class="sift-item" @click="dataListSort('area')">
+      <div class="sift-item" @click="dataListSort('weifaarea_base')">
         <div class="sift-label">总面积</div>
         <div class="sift-icon">
-          <div :style="`${showSortMark('area',1)? 'color: #086DEC;': ''}`">&#9650</div>
-          <div :style="`${showSortMark('area',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          <div :style="`${showSortMark('weifaarea_base',1)? 'color: #086DEC;': ''}`">&#9650</div>
+          <div :style="`${showSortMark('weifaarea_base',2)? 'color: #086DEC;': ''}`">&#9660</div>
         </div>
       </div>
       <div class="sift-item"  @click="dataListSort('gengdi_area')">

src/components/illegalmining/util.ts

@@ -7,59 +7,21 @@
  * 处理状态   nowStatus
  * 下发时间段 startTime-endTime
  * 图斑号     caseNo
+ * 是否立案   register
  */
 // 图斑来源
 import { getChildrenTree } from '@/api/demo/system';
+import { asyncGetOptions } from '@/utils/global';
+
 const counties = await getChildrenTree({ parentId: 371300 })
-console.log(counties,'counties')
-export const polygonSourceOptions= [
-  { label: '群众举报', value: '群众举报'},
-  { label: '舆情', value: '舆情'},
-  { label: '12345', value: '12345'},
-  { label: '矿产卫片', value: '矿产卫片'},
-  { label: '无人机巡查', value: '无人机巡查'},
-  { label: '其他部门移交', value: '其他部门移交'},
-  { label: '上级领导交班', value: '上级领导交班'},
-  { label: '县级自查上报', value: '县级自查上报'},
-]
+
+export const polygonSourceOptions= await asyncGetOptions('tubanlaiyuan')
 // 图斑类型
-export const polygonTypeOptions= [
-  { label: '开采', value: '开采'},
-  { label: '加工', value: '加工'},
-]
+export const polygonTypeOptions= await asyncGetOptions('kctubanleixing')
 // 当前状态
-export const statusOptions = [
-  { label: '待填报', value: '1'},
-  { label: '待整改', value: '2'},
-  { label: '待县级审核', value: '3'},
-  { label: '待市级审核', value: '4'},
-  { label: '待查处', value: '5'},
-  { label: '查处待县级审核', value: '6'},
-  { label: '查处待市级审核', value: '7'},
-  { label: '查处后待整改', value: '8'},
-  { label: '整改后待县级审核', value: '9'},
-  { label: '整改后待市级审核', value: '10'},
-  { label: '已归档', value: '99'},
-]
-// 整改类型
-export const rectifyTypeOptions = [
-  { label: '取缔', value: '取缔'},
-  { label: '保留', value: '保留'},
-]
-// 违法类型(开采)
-export const mineIllegalTypeOptions = [
-  { label: '无证开采类', value: '无证开采类'},
-  { label: '越界开采类', value: '越界开采类'},
-  { label: '持证矿山类', value: '持证矿山类'},
-  { label: '以项目名义类', value: '以项目名义类'},
-  { label: '其他', value: '其他'},
-]
-// 违法类型(加工)
-export const processIllegalTypeOptions = [
-  { label: '违法占地', value: '违法占地'},
-  { label: '购销非法开采矿产品', value: '购销非法开采矿产品'},
-  { label: '其他', value: '其他'},
-]
+export const statusOptions = await asyncGetOptions('kcdangqianzhuangtai')
+// 是否立案
+export const registerOptions =await asyncGetOptions('kcregister')
 export const countiesOptions = counties.map(item => {
   return {
     label: item.name,
@@ -73,7 +35,20 @@ export const orderUtils = {
 }
 export const usePageRequestUrl = {
   'patternfilling': '/api/DroneCaseInfoSingle/LoadTasklList',
+  'fillingaudit': '/api/DroneCaseInfoMinerals/LoadReportingAuditTaskList',
+  'patternexamining': '/api/DroneCaseInfoMinerals/LoadExaminingTaskList',
+  'examiningaudit': '/api/DroneCaseInfoMinerals/LoadExaminingAuditTaskList',
+  'patternrectification': '/api/DroneCaseInfoMinerals/LoadRectifyingTaskList',
+  'rectificationaudit': '/api/DroneCaseInfoMinerals/LoadRectifyingAuditTaskList',
+  'patternadjust': '/api/DroneCaseInfoMinerals/LoadModifyingTaskList',
 }
 export const usePageGetSearchItem = {
   'patternfilling': ["year", "tubanlaiyuan", "typename", "countyid", "streetid", "nowStatus", "time", "caseNo"],
-}
+  'fillingaudit': ["year", "tubanlaiyuan", "typename", "countyid", "caseNo"],
+  'patternexamining': ["year", "tubanlaiyuan", "register", "countyid", "caseNo"],
+  'examiningaudit': ["year", "tubanlaiyuan", "register", "countyid", "caseNo"],
+  'patternrectification': ["year", "tubanlaiyuan", "countyid", "caseNo"],
+  'rectificationaudit': ["year", "tubanlaiyuan", "countyid", "caseNo"],
+  'patternadjust': ["year", "tubanlaiyuan", "countyid", "caseNo"],
+}
+export const smallInput:any = ['fillingaudit','patternexamining','examiningaudit']

src/utils/global.ts

@@ -1,4 +1,6 @@
 // @/utils/global
+import { getLoad } from '@/api/sys/sysDataItemDetail';
+
 // 全局变量配置
 export const getYearList = () => {
   const num = 4;
@@ -49,7 +51,7 @@ export const mapStatusOptions = [
 export const auditMapStatusOptions = [
   { label: '市级驳回', value: '市级驳回' },
   { label: '县级驳回', value: '县级驳回' },
-]
+];
 // 标注类型
 export const markTypeOptions = [
   { label: '在建', value: '在建' },
@@ -175,3 +177,16 @@ export const monthAllOptions = () => {
   arr.reverse().unshift({ label: '全部', value: 0 });
   return arr;
 };
+// 根据字典async获取对应的筛选数据
+export const asyncGetOptions = async (code: string) => {
+  let arry: any = [];
+  await getLoad({ code: code }).then((res) => {
+    res.forEach((item: any) => {
+      arry.push({
+        label: item.itemName,
+        value: item.itemValue,
+      });
+    });
+  });
+  return arry;
+};

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

@@ -40,7 +40,7 @@
             addon-before="-"
             addon-after="+"
             :min="1"
-            :max="10"
+            :max="99"
           ></a-input-number>
         </a-form-item>
         <a-form-item label="描述" name="description">

src/views/demo/degraining/auditinfo/MapList/index.vue

@@ -172,7 +172,7 @@
       width="100%"
       wrap-class-name="full-modal"
       v-model:open="auditOpen"
-      title="审核监督"
+      title="填报审核"
       footer=""
       :destroyOnClose="true"
     >
@@ -195,6 +195,7 @@
         :taskId="taskId"
         :isRead="isRead"
         :type="type"
+        :auditData="auditData"
         @closeModel="closeMolder"
       />
     </a-modal>
@@ -230,6 +231,7 @@
   const taskId = ref('');
   const isRead: any = ref(0);
   const type = ref('');
+  const auditData = ref()
   const order = ref(0)
   const auditOpen = ref(false);
   const showDataId = ref()
@@ -312,6 +314,7 @@
     processId.value = record.processid;
     taskId.value = record.taskeid;
     type.value = record.type;
+    auditData.value = record;
   }
   async function locationFun(record) {
     emits('changeTask', record);
@@ -361,6 +364,7 @@
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = dataList.value[dataList.value.length - 1].Id
+      auditData.value = dataList.value[dataList.value.length - 1]
       return
     }else{
       showDataId.value = prevShowDataId.value
@@ -375,6 +379,7 @@
     taskId.value = record.taskeid;
     type.value = record.type;
     handoffShow.value = true
+    auditData.value = record
   }
   const nextData = async () => {
     if(nextShowDataId.value === 0){
@@ -397,6 +402,7 @@
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = dataList.value[0].Id
+      auditData.value = dataList.value[0]
       return
     }else{
       showDataId.value = nextShowDataId.value
@@ -411,6 +417,7 @@
     taskId.value = record.taskeid;
     type.value = record.type;
     handoffShow.value = true
+    auditData.value = record
   }
   const cancelCollectItem = (item) => {
     DeleteCaiKuangTaskCase(item.Fid).then(res => {

src/views/demo/degraining/curbspotcity/MapList/index.vue

@@ -31,16 +31,7 @@
           @change="(value) => emits('mapListScreenChange',value,'batch')"
         />
       </div>
-      <div class="screen-item" style="margin-right: 13px;">
-        <div class="screen-item-label">乡镇</div>
-        <a-select
-          allowClear
-          style="width:120px;"
-          v-model:value="props.infoScreenData.streetId"
-          :options="streetsAreaOptions"
-          @change="(value) => emits('mapListScreenChange',value,'streetId')"
-        />
-      </div>
+    
       <div class="screen-item" style="margin-bottom:12px;">
         <div class="screen-item-label" style="margin-right: 10px;">下发时间</div>
         <a-range-picker
@@ -51,7 +42,16 @@
           @change="(value) => emits('mapListScreenChange',value,'time')"
         />
       </div>
-     
+      <div class="screen-item" style="margin-left: 13px;">
+        <div class="screen-item-label">乡镇</div>
+        <a-select
+          allowClear
+          style="width:120px;"
+          v-model:value="props.infoScreenData.streetId"
+          :options="streetsAreaOptions"
+          @change="(value) => emits('mapListScreenChange',value,'streetId')"
+        />
+      </div>
       <div class="screen-item" style="margin-right: 14px;">
         <a-input
           allowClear
@@ -229,6 +229,7 @@
         :taskId="taskId"
         :isRead="isRead"
         :type="type"
+        :auditData="auditData"
         @closeModel="closeMolder"
       />
     </a-modal>
@@ -299,6 +300,7 @@ const auditOpen = ref(false);
 const processId = ref('');
 const taskId = ref('');
 const type = ref('');
+const auditData = ref()
 const handoffShow = ref(true)
 const isRead: any = ref(0);
 const openCollect = computed(() => {
@@ -394,6 +396,7 @@ async function goAudit(record) {
   processId.value = record.processid;
   taskId.value = record.taskid;
   type.value = record.type;
+  auditData.value = record;
 }
 const prevData = async () => {
   if(prevShowDataId.value === 0){
@@ -414,6 +417,7 @@ const prevData = async () => {
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = res.items[res.items.length -1].id
+      auditData.value = res.items[res.items.length -1]
     })
     return
   }else{
@@ -429,6 +433,7 @@ const prevData = async () => {
   taskId.value = record.taskid;
   type.value = record.type;
   handoffShow.value = true
+  auditData.value = record
 }
 const nextData = async () => {
   if(nextShowDataId.value === 0){
@@ -449,6 +454,7 @@ const nextData = async () => {
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = res.items[0].id
+      auditData.value = res.items[0]
     })
     return
   }else{
@@ -464,6 +470,7 @@ const nextData = async () => {
   taskId.value = record.taskid;
   type.value = record.type;
   handoffShow.value = true
+  auditData.value = record
 }
 const closeMolder = () => {
   emits('getInfoList')

src/views/demo/degraining/illegaltreatment/MapList/index.vue

@@ -173,7 +173,7 @@
       width="100%"
       wrap-class-name="full-modal"
       v-model:open="auditOpen"
-      title="违法处理"
+      title="整改审核"
       footer=""
       :destroyOnClose="true"
     >
@@ -196,6 +196,7 @@
         :taskId="taskId"
         :isRead="isRead"
         :type="type"
+        :auditData="auditData"
         @closeModel="closeMolder"
       />
     </a-modal>
@@ -231,6 +232,7 @@
   const taskId = ref('');
   const isRead: any = ref(0);
   const type = ref('');
+  const auditData = ref()
   const order = ref(0)
   const auditOpen = ref(false);
   const showDataId = ref()
@@ -312,6 +314,7 @@
     processId.value = record.processid;
     taskId.value = record.taskeid;
     type.value = record.type;
+    auditData.value = record;
   }
   async function locationFun(record) {
     emits('changeTask', record);
@@ -361,6 +364,7 @@
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = dataList.value[dataList.value.length - 1].Id
+      auditData.value = dataList.value[dataList.value.length - 1]
       return
     }else{
       showDataId.value = prevShowDataId.value
@@ -375,6 +379,7 @@
     taskId.value = record.taskeid;
     type.value = record.type;
     handoffShow.value = true
+    auditData.value = record
   }
   const nextData = async () => {
     if(nextShowDataId.value === 0){
@@ -397,6 +402,7 @@
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = dataList.value[0].Id
+      auditData.value = dataList.value[0]
       return
     }else{
       showDataId.value = nextShowDataId.value
@@ -411,6 +417,7 @@
     taskId.value = record.taskeid;
     type.value = record.type;
     handoffShow.value = true
+    auditData.value = record
   }
   const cancelCollectItem = (item) => {
     DeleteCaiKuangTaskCase(item.Fid).then(res => {

src/views/demo/degraining/patchsummary/index.vue

@@ -7,6 +7,18 @@
         :schemas="searchFormSchema"
         :actionColOptions="{ span: 24 }"
       >
+        <template #dangqianzhuangtai>
+          <a-select
+            allowClear
+            showArrow
+            mode="multiple"
+            v-model:value="nowStatus"
+            :options="nowStatusOptions"
+            :max-tag-count="1"
+            placeholder="请选择"
+            @change="changeStatus"
+          />
+        </template>
         <template #tubanmianji>
           <div class="scope-box">
             <a-input v-model:value="areaParams.tubanArea1" placeholder="请输入" />
@@ -36,7 +48,7 @@
           <PermissionBtn @btn-event="onBtnClicked" />
         </template>
         <template #bodyCell="{ column, record }">
-          <template v-if="['area', 'gengdiarea','nongyongdiarea'].includes(column.key)">
+          <template v-if="['area', 'gengdiarea', 'nongyongdiarea'].includes(column.key)">
             {{ dataProcessingCount(record[column.key]) }}
           </template>
           <template v-if="column.key === 'action'">
@@ -82,7 +94,7 @@
 <script lang="ts" setup>
   import { ref, reactive, onMounted } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
-  import { LoadCaseInfoWpxfTuBanList } from '@/api/degraining/index.ts'
+  import { LoadCaseInfoWpxfTuBanList } from '@/api/degraining/index.ts';
   import { PermissionBtn } from '@/components/PermissionBtn/index';
   import { columns, searchFormSchema } from './patchsummary.data';
   import { getAppEnvConfig } from '@/utils/env';
@@ -92,6 +104,7 @@
   import { dataProcessingCount } from '@/views/demo/tiankongdi/util';
   import { BasicForm, useForm } from '@/components/Form';
   import { PageWrapper } from '@/components/Page';
+  import { nowStatusOptions } from '@/utils/global';
 
   const { VITE_GLOB_API_URL } = getAppEnvConfig();
 
@@ -106,6 +119,7 @@
     page: 1,
     limit: 10,
   });
+  const nowStatus = ref(undefined);
   const areaParams = ref({
     tubanArea1: null,
     tubanArea2: null,
@@ -113,6 +127,7 @@
     gengdiArea2: null,
     jibenArea1: null,
     jibenArea2: null,
+    nowStatus: undefined,
   });
   const tableData = ref([]);
   const tablePaginationRight = ref({
@@ -214,6 +229,9 @@
     const querys = Object.assign(searchParams.value, areaParams.value);
     getTableData(querys);
   }
+  function changeStatus(val) {
+    areaParams.value.nowStatus = val.join(',');
+  }
   function handleSubmit() {
     searchParams.value = getFieldsValue();
     searchParams.value.page = 1;
@@ -319,4 +337,7 @@
       min-width: 48%;
     }
   }
+  ::v-deep .ant-select-selection-overflow-item:first-child .ant-select-selection-item {
+    width: 80px;
+  }
 </style>

src/views/demo/degraining/patchsummary/patchsummary.data.ts

@@ -141,36 +141,6 @@ export const searchFormSchema: FormSchema[] = [
       options: markTypeOptions,
     },
   },
-  {
-    field: 'isIllegal',
-    label: '判定结果',
-    component: 'Select',
-    colProps: { span: 4 },
-    componentProps: {
-      options: mapTypeOptions,
-    },
-  },
-  {
-    field: 'nowStatus',
-    label: '当前状态',
-    component: 'Select',
-    componentProps: {
-      options: nowStatusOptions,
-    },
-    colProps: { span: 4 },
-  },
-  {
-    field: 'measureName',
-    label: '整改措施',
-    component: 'Select',
-    colProps: { span: 4 },
-    componentProps: {
-      options: [
-        { label: '拆除复耕', value: '0' },
-        { label: '补办手续', value: '1' },
-      ],
-    },
-  },
   {
     field: 'countyid',
     label: '区县',
@@ -206,18 +176,39 @@ export const searchFormSchema: FormSchema[] = [
       };
     },
   },
+
   {
-    field: 'caseNo',
-    label: '图斑编号',
-    component: 'Input',
+    field: 'nowStatus',
+    label: '当前状态',
+    component: 'Select',
+    componentProps: {
+      options: nowStatusOptions,
+    },
     colProps: { span: 4 },
+    slot: 'dangqianzhuangtai',
   },
   {
-    field: 'originalcaseno',
-    label: '标识号',
-    component: 'Input',
+    field: 'isIllegal',
+    label: '判定结果',
+    component: 'Select',
     colProps: { span: 4 },
+    componentProps: {
+      options: mapTypeOptions,
+    },
   },
+  {
+    field: 'measureName',
+    label: '整改措施',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      options: [
+        { label: '拆除复耕', value: '0' },
+        { label: '补办手续', value: '1' },
+      ],
+    },
+  },
+
   // 增加图斑面积、耕地面积、永农面积的筛选项；
   {
     field: 'tubanmianji',
@@ -237,4 +228,26 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 4 },
     slot: 'jibennongtianmianji',
   },
+  {
+    field: 'originalcaseno',
+    label: '标识号',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: '[startTime, endTime]',
+    label: '下发时间',
+    component: 'RangePicker',
+    colProps: { span: 5 },
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      placeholder: ['开始日期', '结束日期'],
+    },
+  },
+  {
+    field: 'caseNo',
+    label: '图斑编号',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
 ];

src/views/demo/illegalmining/auditinfo/MapList/index.vue

@@ -172,7 +172,7 @@
       width="100%"
       wrap-class-name="full-modal"
       v-model:open="auditOpen"
-      title="审核监督"
+      title="填报审核"
       footer=""
       :destroyOnClose="true"
     >
@@ -195,6 +195,7 @@
         :taskId="taskId"
         :isRead="isRead"
         :type="type"
+        :auditData="auditData"
         @closeModel="closeMolder"
       />
     </a-modal>
@@ -230,6 +231,7 @@
   const taskId = ref('');
   const isRead: any = ref(0);
   const type = ref('');
+  const auditData = ref()
   const order = ref(0)
   const auditOpen = ref(false);
   const showDataId = ref()
@@ -312,6 +314,7 @@
     processId.value = record.processid;
     taskId.value = record.taskeid;
     type.value = record.type;
+    auditData.value = record;
   }
   async function locationFun(record) {
     emits('changeTask', record);
@@ -361,6 +364,7 @@
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = dataList.value[dataList.value.length - 1].Id
+      auditData.value = dataList.value[dataList.value.length - 1]
       return
     }else{
       showDataId.value = prevShowDataId.value
@@ -375,6 +379,7 @@
     taskId.value = record.taskeid;
     type.value = record.type;
     handoffShow.value = true
+    auditData.value = record
   }
   const nextData = async () => {
     if(nextShowDataId.value === 0){
@@ -397,6 +402,7 @@
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = dataList.value[0].Id
+      auditData.value = dataList.value[0]
       return
     }else{
       showDataId.value = nextShowDataId.value
@@ -411,6 +417,7 @@
     taskId.value = record.taskeid;
     type.value = record.type;
     handoffShow.value = true
+    auditData.value = record
   }
   const cancelCollectItem = (item) => {
     DeleteCaiKuangTaskCase(item.Fid).then(res => {

src/views/demo/illegalmining/curbspotcity/MapList/index.vue

@@ -31,16 +31,7 @@
           @change="(value) => emits('mapListScreenChange',value,'batch')"
         />
       </div>
-      <div class="screen-item" style="margin-right: 13px;">
-        <div class="screen-item-label">乡镇</div>
-        <a-select
-          allowClear
-          style="width:120px;"
-          v-model:value="props.infoScreenData.streetId"
-          :options="streetsAreaOptions"
-          @change="(value) => emits('mapListScreenChange',value,'streetId')"
-        />
-      </div>
+     
       <div class="screen-item" style="margin-bottom:12px;">
         <div class="screen-item-label" style="margin-right: 10px;">下发时间</div>
         <a-range-picker
@@ -51,7 +42,16 @@
           @change="(value) => emits('mapListScreenChange',value,'time')"
         />
       </div>
-     
+      <div class="screen-item" style="margin-left: 13px;">
+        <div class="screen-item-label">乡镇</div>
+        <a-select
+          allowClear
+          style="width:120px;"
+          v-model:value="props.infoScreenData.streetId"
+          :options="streetsAreaOptions"
+          @change="(value) => emits('mapListScreenChange',value,'streetId')"
+        />
+      </div>
       <div class="screen-item" style="margin-right: 14px;">
         <a-input
           allowClear
@@ -230,6 +230,7 @@
         :taskId="taskId"
         :isRead="isRead"
         :type="type"
+        :auditData="auditData"
         @closeModel="closeMolder"
       />
     </a-modal>
@@ -300,6 +301,7 @@ const auditOpen = ref(false);
 const processId = ref('');
 const taskId = ref('');
 const type = ref('');
+const auditData = ref()
 const handoffShow = ref(true)
 const isRead: any = ref(0);
 const openCollect = computed(() => {
@@ -395,6 +397,7 @@ async function goAudit(record) {
   processId.value = record.processid;
   taskId.value = record.taskid;
   type.value = record.type;
+  auditData.value = record;
 }
 const prevData = async () => {
   if(prevShowDataId.value === 0){
@@ -415,6 +418,7 @@ const prevData = async () => {
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = res.items[res.items.length -1].id
+      auditData.value = res.items[res.items.length -1]
     })
     return
   }else{
@@ -430,6 +434,7 @@ const prevData = async () => {
   taskId.value = record.taskid;
   type.value = record.type;
   handoffShow.value = true
+  auditData.value = record
 }
 const nextData = async () => {
   if(nextShowDataId.value === 0){
@@ -450,6 +455,7 @@ const nextData = async () => {
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = res.items[0].id
+      auditData.value = res.items[0]
     })
     return
   }else{
@@ -465,6 +471,7 @@ const nextData = async () => {
   taskId.value = record.taskid;
   type.value = record.type;
   handoffShow.value = true
+  auditData.value = record
 }
 const closeMolder = () => {
   emits('getInfoList')

src/views/demo/illegalmining/examiningaudit/MapList/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="out-div">
+    <SearchComponent
+      :usePage="'examiningaudit'"
+      :screenData="screenData"
+      @screenDataChange="screenDataChange"
+      @search="search"
+      @resetScreenData="resetScreenData"/>
+    <SortComponent
+      :sortData="sortData"
+      :screenData="screenData"
+      @changeSort="changeSort"
+      @collectChange="collectChange"/>
+    <ShowListComponent
+      :usePage="'examiningaudit'"
+      :dataList="dataList"
+      :screenData="screenData"
+      :sortData="sortData"
+      :pageData="pageData"
+      :total="total"
+      @changeTask="changeTask"
+      @query="query"
+      @flipChange="flipChange"/>
+    <PaginationComponent
+      :pageData="pageData"
+      :total="total"
+      @changePageData="changePageData"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineEmits } from "vue"
+import SearchComponent from '@/components/illegalmining/SearchComponent/index.vue'
+import SortComponent from '@/components/illegalmining/SortComponent/index.vue'
+import ShowListComponent from '@/components/illegalmining/ShowListComponent/index.vue'
+import PaginationComponent from '@/components/illegalmining/PaginationComponent/index.vue'
+import dayjs from 'dayjs';
+import { LoadExaminingAuditTaskList } from '@/api/illegalmining/index'
+
+const emits = defineEmits(['changeLoading','changeTask'])
+
+const screenData = ref({
+  year: '',
+  tubanlaiyuan: '',
+  register: '',
+  countyid:'',
+  caseNo: '',
+  type: '',
+})
+const sortData = ref({
+  sortType: null,
+  order: null,
+})
+const pageData = ref({
+  page: 1,
+  limit: 10,
+})
+const total = ref(0)
+const dataList = ref([])
+
+onMounted(() => {
+  query()
+})
+
+const query = () => {
+  let params = {
+    ...pageData.value,
+    ...sortData.value,
+  }
+  Object.keys(screenData.value).forEach(key => {
+    switch(key){
+      case 'time':
+        if(screenData.value[key]){
+          params['startTime'] = dayjs(screenData.value[key][0]).format('YYYY-MM-DD')
+          params['endTime'] = dayjs(screenData.value[key][1]).format('YYYY-MM-DD')
+        }
+        break
+      case 'nowStatus':
+        if(screenData.value[key].length > 0){
+          params['nowStatus'] = screenData.value[key].join(',')
+        }
+        break
+      default:
+        if(screenData.value[key] !== null && screenData.value[key] !== undefined && screenData.value[key] !== ''){
+          params[key] = screenData.value[key]
+        }
+        break
+    }
+  })
+  emits('changeLoading',true)
+  LoadExaminingAuditTaskList(params).then(res => {
+    console.log(res)
+    dataList.value = res.items
+    total.value = res.total
+  }).finally(() => {
+    emits('changeLoading',false)
+  })
+}
+const screenDataChange = (value, type) => {
+  console.log(value,type)
+  screenData.value[type] = value
+}
+const search = () => {
+  query()
+  console.log(screenData.value)
+}
+const changeSort = (sortType, order) => {
+  sortData.value.sortType = sortType
+  sortData.value.order = order
+  query()
+}
+const collectChange = (type) => {
+  screenData.value.type = type
+  pageData.value.page = 1
+  query()
+}
+const resetScreenData = () => {
+  screenData.value = {
+    year: '',
+    tubanlaiyuan: '',
+    register: '',
+    countyid:'',
+    caseNo: '',
+    type: screenData.value.type,
+  }
+  query()
+}
+const changePageData = (page, limit) => {
+  pageData.value.page = page
+  pageData.value.limit = limit
+  query()
+}
+const changeTask = (id) => {
+  emits('changeTask',id)
+}
+const flipChange = (list, totalNumber, page) => {
+  dataList.value = list
+  total.value = totalNumber
+  pageData.value.page = page
+}
+</script>
+
+<style lang="scss" scoped>
+
+.out-div{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // background-color: aqua;
+}
+</style>

src/views/demo/illegalmining/examiningaudit/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="curb-spot-city">
+    <div class="show-list">
+      <a-spin :spinning="spinning">
+        <MapList 
+          @changeLoading="changeLoading"
+          @changeTask="changeTask"/>
+      </a-spin>
+    </div>
+    <MapboxMap
+      :mapConfig="mapConfig"
+      @mapOnLoad="onMapboxLoad"
+      ref="MapboxComponent"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineAsyncComponent, onMounted } from "vue"
+const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
+import { getGeom, getConfig } from '@/api/sys/layerManagement';
+import { message } from 'ant-design-vue'
+import MapList from './MapList/index.vue'
+
+const spinning = ref(false)
+const mapConfig = ref({ isShowMap: false });
+const MapboxComponent = ref();
+
+const changeLoading = (value: boolean) => {
+  spinning.value = value
+}
+function onMapboxLoad(): void {
+  getConfig({ code: 'mapsetting' }).then((res) => {
+    mapConfig.value = JSON.parse(res.codeValue);
+  });
+}
+function changeTask(val) {
+  let getGeomPrams = {
+    TableName: 'drone_shp_data ',
+    FieldName: 'gid',
+    FieldValue: val?.split(','),
+    page: 1,
+    limit: 999,
+    key: null,
+  };
+  if (val) {
+    getGeom(getGeomPrams).then((res) => {
+      let geoms:any[] = [];
+      if (res) {
+        if (res.items?.length > 0) {
+          res.items.forEach((item, index) => {
+            let geom = {
+              key: item.gid,
+              mapgeom: item.geometry,
+            };
+            geoms.push(geom);
+          });
+        }
+        MapboxComponent.value.handlerDraw('Details', geoms, false);
+      } else {
+        message.error('当前数据没有图斑！');
+      }
+    });
+  } else {
+    message.error('当前数据没有图斑！');
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.curb-spot-city {
+  height: 100%;
+  display: flex;
+  .show-list {
+    width: 590px;
+    background: #efefef;
+    :deep(.ant-spin-nested-loading) {
+      height: 100%;
+      width: 590px;
+    }
+    :deep(.ant-spin-container) {
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/demo/illegalmining/fillingaudit/MapList/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="out-div">
+    <SearchComponent
+      :usePage="'fillingaudit'"
+      :screenData="screenData"
+      @screenDataChange="screenDataChange"
+      @search="search"
+      @resetScreenData="resetScreenData"/>
+    <SortComponent
+      :sortData="sortData"
+      :screenData="screenData"
+      @changeSort="changeSort"
+      @collectChange="collectChange"/>
+    <ShowListComponent
+      :usePage="'fillingaudit'"
+      :dataList="dataList"
+      :screenData="screenData"
+      :sortData="sortData"
+      :pageData="pageData"
+      :total="total"
+      @changeTask="changeTask"
+      @query="query"
+      @flipChange="flipChange"/>
+    <PaginationComponent
+      :pageData="pageData"
+      :total="total"
+      @changePageData="changePageData"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineEmits } from "vue"
+import SearchComponent from '@/components/illegalmining/SearchComponent/index.vue'
+import SortComponent from '@/components/illegalmining/SortComponent/index.vue'
+import ShowListComponent from '@/components/illegalmining/ShowListComponent/index.vue'
+import PaginationComponent from '@/components/illegalmining/PaginationComponent/index.vue'
+import dayjs from 'dayjs';
+import { LoadReportingAuditTaskList } from '@/api/illegalmining/index'
+
+const emits = defineEmits(['changeLoading','changeTask'])
+
+const screenData = ref({
+  year: '',
+  tubanlaiyuan: '',
+  typename: '',
+  countyid:'',
+  caseNo: '',
+  type: '',
+})
+const sortData = ref({
+  sortType: null,
+  order: null,
+})
+const pageData = ref({
+  page: 1,
+  limit: 10,
+})
+const total = ref(0)
+const dataList = ref([])
+
+onMounted(() => {
+  query()
+})
+
+const query = () => {
+  let params = {
+    ...pageData.value,
+    ...sortData.value,
+  }
+  Object.keys(screenData.value).forEach(key => {
+    switch(key){
+      case 'time':
+        if(screenData.value[key]){
+          params['startTime'] = dayjs(screenData.value[key][0]).format('YYYY-MM-DD')
+          params['endTime'] = dayjs(screenData.value[key][1]).format('YYYY-MM-DD')
+        }
+        break
+      case 'nowStatus':
+        if(screenData.value[key].length > 0){
+          params['nowStatus'] = screenData.value[key].join(',')
+        }
+        break
+      default:
+        if(screenData.value[key] !== null && screenData.value[key] !== undefined && screenData.value[key] !== ''){
+          params[key] = screenData.value[key]
+        }
+        break
+    }
+  })
+  emits('changeLoading',true)
+  LoadReportingAuditTaskList(params).then(res => {
+    console.log(res)
+    dataList.value = res.items
+    total.value = res.total
+  }).finally(() => {
+    emits('changeLoading',false)
+  })
+}
+const screenDataChange = (value, type) => {
+  console.log(value,type)
+  screenData.value[type] = value
+}
+const search = () => {
+  query()
+  console.log(screenData.value)
+}
+const changeSort = (sortType, order) => {
+  sortData.value.sortType = sortType
+  sortData.value.order = order
+  query()
+}
+const collectChange = (type) => {
+  screenData.value.type = type
+  pageData.value.page = 1
+  query()
+}
+const resetScreenData = () => {
+  screenData.value = {
+    year: '',
+    tubanlaiyuan: '',
+    typename: '',
+    countyid:'',
+    caseNo: '',
+    type: screenData.value.type,
+  }
+  query()
+}
+const changePageData = (page, limit) => {
+  pageData.value.page = page
+  pageData.value.limit = limit
+  query()
+}
+const changeTask = (id) => {
+  emits('changeTask',id)
+}
+const flipChange = (list, totalNumber, page) => {
+  dataList.value = list
+  total.value = totalNumber
+  pageData.value.page = page
+}
+</script>
+
+<style lang="scss" scoped>
+
+.out-div{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // background-color: aqua;
+}
+</style>

src/views/demo/illegalmining/fillingaudit/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="curb-spot-city">
+    <div class="show-list">
+      <a-spin :spinning="spinning">
+        <MapList 
+          @changeLoading="changeLoading"
+          @changeTask="changeTask"/>
+      </a-spin>
+    </div>
+    <MapboxMap
+      :mapConfig="mapConfig"
+      @mapOnLoad="onMapboxLoad"
+      ref="MapboxComponent"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineAsyncComponent, onMounted } from "vue"
+const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
+import { getGeom, getConfig } from '@/api/sys/layerManagement';
+import { message } from 'ant-design-vue'
+import MapList from './MapList/index.vue'
+
+const spinning = ref(false)
+const mapConfig = ref({ isShowMap: false });
+const MapboxComponent = ref();
+
+const changeLoading = (value: boolean) => {
+  spinning.value = value
+}
+function onMapboxLoad(): void {
+  getConfig({ code: 'mapsetting' }).then((res) => {
+    mapConfig.value = JSON.parse(res.codeValue);
+  });
+}
+function changeTask(val) {
+  let getGeomPrams = {
+    TableName: 'drone_shp_data ',
+    FieldName: 'gid',
+    FieldValue: val?.split(','),
+    page: 1,
+    limit: 999,
+    key: null,
+  };
+  if (val) {
+    getGeom(getGeomPrams).then((res) => {
+      let geoms:any[] = [];
+      if (res) {
+        if (res.items?.length > 0) {
+          res.items.forEach((item, index) => {
+            let geom = {
+              key: item.gid,
+              mapgeom: item.geometry,
+            };
+            geoms.push(geom);
+          });
+        }
+        MapboxComponent.value.handlerDraw('Details', geoms, false);
+      } else {
+        message.error('当前数据没有图斑！');
+      }
+    });
+  } else {
+    message.error('当前数据没有图斑！');
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.curb-spot-city {
+  height: 100%;
+  display: flex;
+  .show-list {
+    width: 590px;
+    background: #efefef;
+    :deep(.ant-spin-nested-loading) {
+      height: 100%;
+      width: 590px;
+    }
+    :deep(.ant-spin-container) {
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/demo/illegalmining/illegaltreatment/MapList/index.vue

@@ -173,7 +173,7 @@
       width="100%"
       wrap-class-name="full-modal"
       v-model:open="auditOpen"
-      title="违法处理"
+      title="整改审核"
       footer=""
       :destroyOnClose="true"
     >
@@ -196,6 +196,7 @@
         :taskId="taskId"
         :isRead="isRead"
         :type="type"
+        :auditData="auditData"
         @closeModel="closeMolder"
       />
     </a-modal>
@@ -231,6 +232,7 @@
   const taskId = ref('');
   const isRead: any = ref(0);
   const type = ref('');
+  const auditData = ref()
   const order = ref(0)
   const auditOpen = ref(false);
   const showDataId = ref()
@@ -312,6 +314,7 @@
     processId.value = record.processid;
     taskId.value = record.taskeid;
     type.value = record.type;
+    auditData.value = record;
   }
   async function locationFun(record) {
     emits('changeTask', record);
@@ -361,6 +364,7 @@
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = dataList.value[dataList.value.length - 1].Id
+      auditData.value = dataList.value[dataList.value.length - 1]
       return
     }else{
       showDataId.value = prevShowDataId.value
@@ -375,6 +379,7 @@
     taskId.value = record.taskeid;
     type.value = record.type;
     handoffShow.value = true
+    auditData.value = record
   }
   const nextData = async () => {
     if(nextShowDataId.value === 0){
@@ -397,6 +402,7 @@
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = dataList.value[0].Id
+      auditData.value = dataList.value[0]
       return
     }else{
       showDataId.value = nextShowDataId.value
@@ -411,6 +417,7 @@
     taskId.value = record.taskeid;
     type.value = record.type;
     handoffShow.value = true
+    auditData.value = record
   }
   const cancelCollectItem = (item) => {
     DeleteCaiKuangTaskCase(item.Fid).then(res => {

src/views/demo/illegalmining/patchsummary/index.vue

@@ -7,6 +7,18 @@
         :schemas="searchFormSchema"
         :actionColOptions="{ span: 24 }"
       >
+        <template #dangqianzhuangtai>
+          <a-select
+            allowClear
+            showArrow
+            mode="multiple"
+            v-model:value="nowStatus"
+            :options="nowStatusOptions"
+            :max-tag-count="1"
+            placeholder="请选择"
+            @change="changeStatus"
+          />
+        </template>
         <template #tubanmianji>
           <div class="scope-box">
             <a-input v-model:value="areaParams.tubanArea1" placeholder="请输入" />
@@ -92,6 +104,7 @@
   import { dataProcessingCount } from '@/views/demo/tiankongdi/util';
   import { BasicForm, useForm } from '@/components/Form';
   import { PageWrapper } from '@/components/Page';
+  import { nowStatusOptions } from '@/utils/global';
 
   const { VITE_GLOB_API_URL } = getAppEnvConfig();
 
@@ -106,6 +119,7 @@
     page: 1,
     limit: 10,
   });
+  const nowStatus = ref(undefined);
   const areaParams = ref({
     tubanArea1: null,
     tubanArea2: null,
@@ -113,6 +127,7 @@
     gengdiArea2: null,
     jibenArea1: null,
     jibenArea2: null,
+    nowStatus: undefined,
   });
   const tableData = ref([]);
   const tablePaginationRight = ref({
@@ -215,7 +230,12 @@
     const querys = Object.assign(searchParams.value, areaParams.value);
     getTableData(querys);
   }
+  function changeStatus(val) {
+    console.log(val);
+    areaParams.value.nowStatus = val.join(',');
+  }
   function handleSubmit() {
+    console.log(areaParams.value);
     searchParams.value = getFieldsValue();
     searchParams.value.page = 1;
     tablePaginationRight.value.current = 1;
@@ -320,4 +340,10 @@
       min-width: 48%;
     }
   }
+  .select-dropdown {
+    display: flex;
+  }
+  ::v-deep .ant-select-selection-overflow-item:first-child .ant-select-selection-item {
+    width: 80px;
+  }
 </style>

src/views/demo/illegalmining/patchsummary/patchsummary.data.ts

@@ -140,36 +140,6 @@ export const searchFormSchema: FormSchema[] = [
       options: markTypeOptions,
     },
   },
-  {
-    field: 'isIllegal',
-    label: '判定结果',
-    component: 'Select',
-    colProps: { span: 4 },
-    componentProps: {
-      options: mapTypeOptions,
-    },
-  },
-  {
-    field: 'nowStatus',
-    label: '当前状态',
-    component: 'Select',
-    componentProps: {
-      options: nowStatusOptions,
-    },
-    colProps: { span: 4 },
-  },
-  {
-    field: 'measureName',
-    label: '整改措施',
-    component: 'Select',
-    colProps: { span: 4 },
-    componentProps: {
-      options: [
-        { label: '拆除复耕', value: '0' },
-        { label: '补办手续', value: '1' },
-      ],
-    },
-  },
   {
     field: 'countyid',
     label: '区县',
@@ -206,16 +176,35 @@ export const searchFormSchema: FormSchema[] = [
     },
   },
   {
-    field: 'caseNo',
-    label: '图斑编号',
-    component: 'Input',
+    field: 'nowStatus',
+    label: '当前状态',
+    component: 'Select',
+    componentProps: {
+      options: nowStatusOptions,
+    },
     colProps: { span: 4 },
+    slot: 'dangqianzhuangtai',
   },
   {
-    field: 'originalcaseno',
-    label: '标识号',
-    component: 'Input',
+    field: 'isIllegal',
+    label: '判定结果',
+    component: 'Select',
     colProps: { span: 4 },
+    componentProps: {
+      options: mapTypeOptions,
+    },
+  },
+  {
+    field: 'measureName',
+    label: '整改措施',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      options: [
+        { label: '拆除复耕', value: '0' },
+        { label: '补办手续', value: '1' },
+      ],
+    },
   },
   // 增加图斑面积、耕地面积、永农面积的筛选项；
   {
@@ -236,4 +225,17 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 4 },
     slot: 'jibennongtianmianji',
   },
+
+  {
+    field: 'originalcaseno',
+    label: '标识号',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'caseNo',
+    label: '图斑编号',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
 ];

src/views/demo/illegalmining/patternadjust/MapList/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="out-div">
+    <SearchComponent
+      :usePage="'patternadjust'"
+      :screenData="screenData"
+      @screenDataChange="screenDataChange"
+      @search="search"
+      @resetScreenData="resetScreenData"/>
+    <SortComponent
+      :sortData="sortData"
+      :screenData="screenData"
+      @changeSort="changeSort"
+      @collectChange="collectChange"/>
+    <ShowListComponent
+      :usePage="'patternadjust'"
+      :dataList="dataList"
+      :screenData="screenData"
+      :sortData="sortData"
+      :pageData="pageData"
+      :total="total"
+      @changeTask="changeTask"
+      @query="query"
+      @flipChange="flipChange"/>
+    <PaginationComponent
+      :pageData="pageData"
+      :total="total"
+      @changePageData="changePageData"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineEmits } from "vue"
+import SearchComponent from '@/components/illegalmining/SearchComponent/index.vue'
+import SortComponent from '@/components/illegalmining/SortComponent/index.vue'
+import ShowListComponent from '@/components/illegalmining/ShowListComponent/index.vue'
+import PaginationComponent from '@/components/illegalmining/PaginationComponent/index.vue'
+import dayjs from 'dayjs';
+import { LoadModifyingTaskList } from '@/api/illegalmining/index'
+
+const emits = defineEmits(['changeLoading','changeTask'])
+
+const screenData = ref({
+  year: '',
+  tubanlaiyuan: '',
+  countyid:'',
+  caseNo: '',
+  type: '',
+})
+const sortData = ref({
+  sortType: null,
+  order: null,
+})
+const pageData = ref({
+  page: 1,
+  limit: 10,
+})
+const total = ref(0)
+const dataList = ref([])
+
+onMounted(() => {
+  query()
+})
+
+const query = () => {
+  let params = {
+    ...pageData.value,
+    ...sortData.value,
+  }
+  Object.keys(screenData.value).forEach(key => {
+    switch(key){
+      case 'time':
+        if(screenData.value[key]){
+          params['startTime'] = dayjs(screenData.value[key][0]).format('YYYY-MM-DD')
+          params['endTime'] = dayjs(screenData.value[key][1]).format('YYYY-MM-DD')
+        }
+        break
+      case 'nowStatus':
+        if(screenData.value[key].length > 0){
+          params['nowStatus'] = screenData.value[key].join(',')
+        }
+        break
+      default:
+        if(screenData.value[key] !== null && screenData.value[key] !== undefined && screenData.value[key] !== ''){
+          params[key] = screenData.value[key]
+        }
+        break
+    }
+  })
+  emits('changeLoading',true)
+  LoadModifyingTaskList(params).then(res => {
+    console.log(res)
+    dataList.value = res.items
+    total.value = res.total
+  }).finally(() => {
+    emits('changeLoading',false)
+  })
+}
+const screenDataChange = (value, type) => {
+  console.log(value,type)
+  screenData.value[type] = value
+}
+const search = () => {
+  query()
+  console.log(screenData.value)
+}
+const changeSort = (sortType, order) => {
+  sortData.value.sortType = sortType
+  sortData.value.order = order
+  query()
+}
+const collectChange = (type) => {
+  screenData.value.type = type
+  pageData.value.page = 1
+  query()
+}
+const resetScreenData = () => {
+  screenData.value = {
+    year: '',
+    tubanlaiyuan: '',
+    countyid:'',
+    caseNo: '',
+    type: screenData.value.type,
+  }
+  query()
+}
+const changePageData = (page, limit) => {
+  pageData.value.page = page
+  pageData.value.limit = limit
+  query()
+}
+const changeTask = (id) => {
+  emits('changeTask',id)
+}
+const flipChange = (list, totalNumber, page) => {
+  dataList.value = list
+  total.value = totalNumber
+  pageData.value.page = page
+}
+</script>
+
+<style lang="scss" scoped>
+
+.out-div{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // background-color: aqua;
+}
+</style>

src/views/demo/illegalmining/patternadjust/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="curb-spot-city">
+    <div class="show-list">
+      <a-spin :spinning="spinning">
+        <MapList 
+          @changeLoading="changeLoading"
+          @changeTask="changeTask"/>
+      </a-spin>
+    </div>
+    <MapboxMap
+      :mapConfig="mapConfig"
+      @mapOnLoad="onMapboxLoad"
+      ref="MapboxComponent"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineAsyncComponent, onMounted } from "vue"
+const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
+import { getGeom, getConfig } from '@/api/sys/layerManagement';
+import { message } from 'ant-design-vue'
+import MapList from './MapList/index.vue'
+
+const spinning = ref(false)
+const mapConfig = ref({ isShowMap: false });
+const MapboxComponent = ref();
+
+const changeLoading = (value: boolean) => {
+  spinning.value = value
+}
+function onMapboxLoad(): void {
+  getConfig({ code: 'mapsetting' }).then((res) => {
+    mapConfig.value = JSON.parse(res.codeValue);
+  });
+}
+function changeTask(val) {
+  let getGeomPrams = {
+    TableName: 'drone_shp_data ',
+    FieldName: 'gid',
+    FieldValue: val?.split(','),
+    page: 1,
+    limit: 999,
+    key: null,
+  };
+  if (val) {
+    getGeom(getGeomPrams).then((res) => {
+      let geoms:any[] = [];
+      if (res) {
+        if (res.items?.length > 0) {
+          res.items.forEach((item, index) => {
+            let geom = {
+              key: item.gid,
+              mapgeom: item.geometry,
+            };
+            geoms.push(geom);
+          });
+        }
+        MapboxComponent.value.handlerDraw('Details', geoms, false);
+      } else {
+        message.error('当前数据没有图斑！');
+      }
+    });
+  } else {
+    message.error('当前数据没有图斑！');
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.curb-spot-city {
+  height: 100%;
+  display: flex;
+  .show-list {
+    width: 590px;
+    background: #efefef;
+    :deep(.ant-spin-nested-loading) {
+      height: 100%;
+      width: 590px;
+    }
+    :deep(.ant-spin-container) {
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/demo/illegalmining/patternexamining/MapList/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="out-div">
+    <SearchComponent
+      :usePage="'patternexamining'"
+      :screenData="screenData"
+      @screenDataChange="screenDataChange"
+      @search="search"
+      @resetScreenData="resetScreenData"/>
+    <SortComponent
+      :sortData="sortData"
+      :screenData="screenData"
+      @changeSort="changeSort"
+      @collectChange="collectChange"/>
+    <ShowListComponent
+      :usePage="'patternexamining'"
+      :dataList="dataList"
+      :screenData="screenData"
+      :sortData="sortData"
+      :pageData="pageData"
+      :total="total"
+      @changeTask="changeTask"
+      @query="query"
+      @flipChange="flipChange"/>
+    <PaginationComponent
+      :pageData="pageData"
+      :total="total"
+      @changePageData="changePageData"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineEmits } from "vue"
+import SearchComponent from '@/components/illegalmining/SearchComponent/index.vue'
+import SortComponent from '@/components/illegalmining/SortComponent/index.vue'
+import ShowListComponent from '@/components/illegalmining/ShowListComponent/index.vue'
+import PaginationComponent from '@/components/illegalmining/PaginationComponent/index.vue'
+import dayjs from 'dayjs';
+import { LoadExaminingTaskList } from '@/api/illegalmining/index'
+
+const emits = defineEmits(['changeLoading','changeTask'])
+
+const screenData = ref({
+  year: '',
+  tubanlaiyuan: '',
+  register: '',
+  countyid:'',
+  caseNo: '',
+  type: '',
+})
+const sortData = ref({
+  sortType: null,
+  order: null,
+})
+const pageData = ref({
+  page: 1,
+  limit: 10,
+})
+const total = ref(0)
+const dataList = ref([])
+
+onMounted(() => {
+  query()
+})
+
+const query = () => {
+  let params = {
+    ...pageData.value,
+    ...sortData.value,
+  }
+  Object.keys(screenData.value).forEach(key => {
+    switch(key){
+      case 'time':
+        if(screenData.value[key]){
+          params['startTime'] = dayjs(screenData.value[key][0]).format('YYYY-MM-DD')
+          params['endTime'] = dayjs(screenData.value[key][1]).format('YYYY-MM-DD')
+        }
+        break
+      case 'nowStatus':
+        if(screenData.value[key].length > 0){
+          params['nowStatus'] = screenData.value[key].join(',')
+        }
+        break
+      default:
+        if(screenData.value[key] !== null && screenData.value[key] !== undefined && screenData.value[key] !== ''){
+          params[key] = screenData.value[key]
+        }
+        break
+    }
+  })
+  emits('changeLoading',true)
+  LoadExaminingTaskList(params).then(res => {
+    console.log(res)
+    dataList.value = res.items
+    total.value = res.total
+  }).finally(() => {
+    emits('changeLoading',false)
+  })
+}
+const screenDataChange = (value, type) => {
+  console.log(value,type)
+  screenData.value[type] = value
+}
+const search = () => {
+  query()
+  console.log(screenData.value)
+}
+const changeSort = (sortType, order) => {
+  sortData.value.sortType = sortType
+  sortData.value.order = order
+  query()
+}
+const collectChange = (type) => {
+  screenData.value.type = type
+  pageData.value.page = 1
+  query()
+}
+const resetScreenData = () => {
+  screenData.value = {
+    year: '',
+    tubanlaiyuan: '',
+    register: '',
+    countyid:'',
+    caseNo: '',
+    type: screenData.value.type,
+  }
+  query()
+}
+const changePageData = (page, limit) => {
+  pageData.value.page = page
+  pageData.value.limit = limit
+  query()
+}
+const changeTask = (id) => {
+  emits('changeTask',id)
+}
+const flipChange = (list, totalNumber, page) => {
+  dataList.value = list
+  total.value = totalNumber
+  pageData.value.page = page
+}
+</script>
+
+<style lang="scss" scoped>
+
+.out-div{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // background-color: aqua;
+}
+</style>

src/views/demo/illegalmining/patternexamining/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="curb-spot-city">
+    <div class="show-list">
+      <a-spin :spinning="spinning">
+        <MapList 
+          @changeLoading="changeLoading"
+          @changeTask="changeTask"/>
+      </a-spin>
+    </div>
+    <MapboxMap
+      :mapConfig="mapConfig"
+      @mapOnLoad="onMapboxLoad"
+      ref="MapboxComponent"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineAsyncComponent, onMounted } from "vue"
+const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
+import { getGeom, getConfig } from '@/api/sys/layerManagement';
+import { message } from 'ant-design-vue'
+import MapList from './MapList/index.vue'
+
+const spinning = ref(false)
+const mapConfig = ref({ isShowMap: false });
+const MapboxComponent = ref();
+
+const changeLoading = (value: boolean) => {
+  spinning.value = value
+}
+function onMapboxLoad(): void {
+  getConfig({ code: 'mapsetting' }).then((res) => {
+    mapConfig.value = JSON.parse(res.codeValue);
+  });
+}
+function changeTask(val) {
+  let getGeomPrams = {
+    TableName: 'drone_shp_data ',
+    FieldName: 'gid',
+    FieldValue: val?.split(','),
+    page: 1,
+    limit: 999,
+    key: null,
+  };
+  if (val) {
+    getGeom(getGeomPrams).then((res) => {
+      let geoms:any[] = [];
+      if (res) {
+        if (res.items?.length > 0) {
+          res.items.forEach((item, index) => {
+            let geom = {
+              key: item.gid,
+              mapgeom: item.geometry,
+            };
+            geoms.push(geom);
+          });
+        }
+        MapboxComponent.value.handlerDraw('Details', geoms, false);
+      } else {
+        message.error('当前数据没有图斑！');
+      }
+    });
+  } else {
+    message.error('当前数据没有图斑！');
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.curb-spot-city {
+  height: 100%;
+  display: flex;
+  .show-list {
+    width: 590px;
+    background: #efefef;
+    :deep(.ant-spin-nested-loading) {
+      height: 100%;
+      width: 590px;
+    }
+    :deep(.ant-spin-container) {
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/demo/illegalmining/patternfilling/MapList/index.vue

@@ -35,8 +35,7 @@ import SortComponent from '@/components/illegalmining/SortComponent/index.vue'
 import ShowListComponent from '@/components/illegalmining/ShowListComponent/index.vue'
 import PaginationComponent from '@/components/illegalmining/PaginationComponent/index.vue'
 import dayjs from 'dayjs';
-  // TODO 换接口
-import { getLoadDroneCaseInfoDetail } from '@/api/tiankongdi/index';
+import { LoadReportingTaskList } from '@/api/illegalmining/index'
 
 const emits = defineEmits(['changeLoading','changeTask'])
 
@@ -85,15 +84,14 @@ const query = () => {
         }
         break
       default:
-        if(screenData.value[key] && screenData.value[key] !== ''){
+        if(screenData.value[key] !== null && screenData.value[key] !== undefined && screenData.value[key] !== ''){
           params[key] = screenData.value[key]
         }
         break
     }
   })
   emits('changeLoading',true)
-  // TODO 换接口
-  getLoadDroneCaseInfoDetail(params).then(res => {
+  LoadReportingTaskList(params).then(res => {
     console.log(res)
     dataList.value = res.items
     total.value = res.total

src/views/demo/illegalmining/patternrectification/MapList/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="out-div">
+    <SearchComponent
+      :usePage="'patternrectification'"
+      :screenData="screenData"
+      @screenDataChange="screenDataChange"
+      @search="search"
+      @resetScreenData="resetScreenData"/>
+    <SortComponent
+      :sortData="sortData"
+      :screenData="screenData"
+      @changeSort="changeSort"
+      @collectChange="collectChange"/>
+    <ShowListComponent
+      :usePage="'patternrectification'"
+      :dataList="dataList"
+      :screenData="screenData"
+      :sortData="sortData"
+      :pageData="pageData"
+      :total="total"
+      @changeTask="changeTask"
+      @query="query"
+      @flipChange="flipChange"/>
+    <PaginationComponent
+      :pageData="pageData"
+      :total="total"
+      @changePageData="changePageData"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineEmits } from "vue"
+import SearchComponent from '@/components/illegalmining/SearchComponent/index.vue'
+import SortComponent from '@/components/illegalmining/SortComponent/index.vue'
+import ShowListComponent from '@/components/illegalmining/ShowListComponent/index.vue'
+import PaginationComponent from '@/components/illegalmining/PaginationComponent/index.vue'
+import dayjs from 'dayjs';
+import { LoadRectifyingTaskList } from '@/api/illegalmining/index'
+
+const emits = defineEmits(['changeLoading','changeTask'])
+
+const screenData = ref({
+  year: '',
+  tubanlaiyuan: '',
+  countyid:'',
+  caseNo: '',
+  type: '',
+})
+const sortData = ref({
+  sortType: null,
+  order: null,
+})
+const pageData = ref({
+  page: 1,
+  limit: 10,
+})
+const total = ref(0)
+const dataList = ref([])
+
+onMounted(() => {
+  query()
+})
+
+const query = () => {
+  let params = {
+    ...pageData.value,
+    ...sortData.value,
+  }
+  Object.keys(screenData.value).forEach(key => {
+    switch(key){
+      case 'time':
+        if(screenData.value[key]){
+          params['startTime'] = dayjs(screenData.value[key][0]).format('YYYY-MM-DD')
+          params['endTime'] = dayjs(screenData.value[key][1]).format('YYYY-MM-DD')
+        }
+        break
+      case 'nowStatus':
+        if(screenData.value[key].length > 0){
+          params['nowStatus'] = screenData.value[key].join(',')
+        }
+        break
+      default:
+        if(screenData.value[key] !== null && screenData.value[key] !== undefined && screenData.value[key] !== ''){
+          params[key] = screenData.value[key]
+        }
+        break
+    }
+  })
+  emits('changeLoading',true)
+  LoadRectifyingTaskList(params).then(res => {
+    console.log(res)
+    dataList.value = res.items
+    total.value = res.total
+  }).finally(() => {
+    emits('changeLoading',false)
+  })
+}
+const screenDataChange = (value, type) => {
+  console.log(value,type)
+  screenData.value[type] = value
+}
+const search = () => {
+  query()
+  console.log(screenData.value)
+}
+const changeSort = (sortType, order) => {
+  sortData.value.sortType = sortType
+  sortData.value.order = order
+  query()
+}
+const collectChange = (type) => {
+  screenData.value.type = type
+  pageData.value.page = 1
+  query()
+}
+const resetScreenData = () => {
+  screenData.value = {
+    year: '',
+    tubanlaiyuan: '',
+    countyid:'',
+    caseNo: '',
+    type: screenData.value.type,
+  }
+  query()
+}
+const changePageData = (page, limit) => {
+  pageData.value.page = page
+  pageData.value.limit = limit
+  query()
+}
+const changeTask = (id) => {
+  emits('changeTask',id)
+}
+const flipChange = (list, totalNumber, page) => {
+  dataList.value = list
+  total.value = totalNumber
+  pageData.value.page = page
+}
+</script>
+
+<style lang="scss" scoped>
+
+.out-div{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // background-color: aqua;
+}
+</style>

src/views/demo/illegalmining/patternrectification/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="curb-spot-city">
+    <div class="show-list">
+      <a-spin :spinning="spinning">
+        <MapList 
+          @changeLoading="changeLoading"
+          @changeTask="changeTask"/>
+      </a-spin>
+    </div>
+    <MapboxMap
+      :mapConfig="mapConfig"
+      @mapOnLoad="onMapboxLoad"
+      ref="MapboxComponent"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineAsyncComponent, onMounted } from "vue"
+const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
+import { getGeom, getConfig } from '@/api/sys/layerManagement';
+import { message } from 'ant-design-vue'
+import MapList from './MapList/index.vue'
+
+const spinning = ref(false)
+const mapConfig = ref({ isShowMap: false });
+const MapboxComponent = ref();
+
+const changeLoading = (value: boolean) => {
+  spinning.value = value
+}
+function onMapboxLoad(): void {
+  getConfig({ code: 'mapsetting' }).then((res) => {
+    mapConfig.value = JSON.parse(res.codeValue);
+  });
+}
+function changeTask(val) {
+  let getGeomPrams = {
+    TableName: 'drone_shp_data ',
+    FieldName: 'gid',
+    FieldValue: val?.split(','),
+    page: 1,
+    limit: 999,
+    key: null,
+  };
+  if (val) {
+    getGeom(getGeomPrams).then((res) => {
+      let geoms:any[] = [];
+      if (res) {
+        if (res.items?.length > 0) {
+          res.items.forEach((item, index) => {
+            let geom = {
+              key: item.gid,
+              mapgeom: item.geometry,
+            };
+            geoms.push(geom);
+          });
+        }
+        MapboxComponent.value.handlerDraw('Details', geoms, false);
+      } else {
+        message.error('当前数据没有图斑！');
+      }
+    });
+  } else {
+    message.error('当前数据没有图斑！');
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.curb-spot-city {
+  height: 100%;
+  display: flex;
+  .show-list {
+    width: 590px;
+    background: #efefef;
+    :deep(.ant-spin-nested-loading) {
+      height: 100%;
+      width: 590px;
+    }
+    :deep(.ant-spin-container) {
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/demo/illegalmining/rectificationaudit/MapList/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="out-div">
+    <SearchComponent
+      :usePage="'rectificationaudit'"
+      :screenData="screenData"
+      @screenDataChange="screenDataChange"
+      @search="search"
+      @resetScreenData="resetScreenData"/>
+    <SortComponent
+      :sortData="sortData"
+      :screenData="screenData"
+      @changeSort="changeSort"
+      @collectChange="collectChange"/>
+    <ShowListComponent
+      :usePage="'rectificationaudit'"
+      :dataList="dataList"
+      :screenData="screenData"
+      :sortData="sortData"
+      :pageData="pageData"
+      :total="total"
+      @changeTask="changeTask"
+      @query="query"
+      @flipChange="flipChange"/>
+    <PaginationComponent
+      :pageData="pageData"
+      :total="total"
+      @changePageData="changePageData"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineEmits } from "vue"
+import SearchComponent from '@/components/illegalmining/SearchComponent/index.vue'
+import SortComponent from '@/components/illegalmining/SortComponent/index.vue'
+import ShowListComponent from '@/components/illegalmining/ShowListComponent/index.vue'
+import PaginationComponent from '@/components/illegalmining/PaginationComponent/index.vue'
+import dayjs from 'dayjs';
+import { LoadRectifyingAuditTaskList } from '@/api/illegalmining/index'
+
+const emits = defineEmits(['changeLoading','changeTask'])
+
+const screenData = ref({
+  year: '',
+  tubanlaiyuan: '',
+  countyid:'',
+  caseNo: '',
+  type: '',
+})
+const sortData = ref({
+  sortType: null,
+  order: null,
+})
+const pageData = ref({
+  page: 1,
+  limit: 10,
+})
+const total = ref(0)
+const dataList = ref([])
+
+onMounted(() => {
+  query()
+})
+
+const query = () => {
+  let params = {
+    ...pageData.value,
+    ...sortData.value,
+  }
+  Object.keys(screenData.value).forEach(key => {
+    switch(key){
+      case 'time':
+        if(screenData.value[key]){
+          params['startTime'] = dayjs(screenData.value[key][0]).format('YYYY-MM-DD')
+          params['endTime'] = dayjs(screenData.value[key][1]).format('YYYY-MM-DD')
+        }
+        break
+      case 'nowStatus':
+        if(screenData.value[key].length > 0){
+          params['nowStatus'] = screenData.value[key].join(',')
+        }
+        break
+      default:
+        if(screenData.value[key] !== null && screenData.value[key] !== undefined && screenData.value[key] !== ''){
+          params[key] = screenData.value[key]
+        }
+        break
+    }
+  })
+  emits('changeLoading',true)
+  LoadRectifyingAuditTaskList(params).then(res => {
+    console.log(res)
+    dataList.value = res.items
+    total.value = res.total
+  }).finally(() => {
+    emits('changeLoading',false)
+  })
+}
+const screenDataChange = (value, type) => {
+  console.log(value,type)
+  screenData.value[type] = value
+}
+const search = () => {
+  query()
+  console.log(screenData.value)
+}
+const changeSort = (sortType, order) => {
+  sortData.value.sortType = sortType
+  sortData.value.order = order
+  query()
+}
+const collectChange = (type) => {
+  screenData.value.type = type
+  pageData.value.page = 1
+  query()
+}
+const resetScreenData = () => {
+  screenData.value = {
+    year: '',
+    tubanlaiyuan: '',
+    countyid:'',
+    caseNo: '',
+    type: screenData.value.type,
+  }
+  query()
+}
+const changePageData = (page, limit) => {
+  pageData.value.page = page
+  pageData.value.limit = limit
+  query()
+}
+const changeTask = (id) => {
+  emits('changeTask',id)
+}
+const flipChange = (list, totalNumber, page) => {
+  dataList.value = list
+  total.value = totalNumber
+  pageData.value.page = page
+}
+</script>
+
+<style lang="scss" scoped>
+
+.out-div{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // background-color: aqua;
+}
+</style>

src/views/demo/illegalmining/rectificationaudit/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="curb-spot-city">
+    <div class="show-list">
+      <a-spin :spinning="spinning">
+        <MapList 
+          @changeLoading="changeLoading"
+          @changeTask="changeTask"/>
+      </a-spin>
+    </div>
+    <MapboxMap
+      :mapConfig="mapConfig"
+      @mapOnLoad="onMapboxLoad"
+      ref="MapboxComponent"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineAsyncComponent, onMounted } from "vue"
+const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
+import { getGeom, getConfig } from '@/api/sys/layerManagement';
+import { message } from 'ant-design-vue'
+import MapList from './MapList/index.vue'
+
+const spinning = ref(false)
+const mapConfig = ref({ isShowMap: false });
+const MapboxComponent = ref();
+
+const changeLoading = (value: boolean) => {
+  spinning.value = value
+}
+function onMapboxLoad(): void {
+  getConfig({ code: 'mapsetting' }).then((res) => {
+    mapConfig.value = JSON.parse(res.codeValue);
+  });
+}
+function changeTask(val) {
+  let getGeomPrams = {
+    TableName: 'drone_shp_data ',
+    FieldName: 'gid',
+    FieldValue: val?.split(','),
+    page: 1,
+    limit: 999,
+    key: null,
+  };
+  if (val) {
+    getGeom(getGeomPrams).then((res) => {
+      let geoms:any[] = [];
+      if (res) {
+        if (res.items?.length > 0) {
+          res.items.forEach((item, index) => {
+            let geom = {
+              key: item.gid,
+              mapgeom: item.geometry,
+            };
+            geoms.push(geom);
+          });
+        }
+        MapboxComponent.value.handlerDraw('Details', geoms, false);
+      } else {
+        message.error('当前数据没有图斑！');
+      }
+    });
+  } else {
+    message.error('当前数据没有图斑！');
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.curb-spot-city {
+  height: 100%;
+  display: flex;
+  .show-list {
+    width: 590px;
+    background: #efefef;
+    :deep(.ant-spin-nested-loading) {
+      height: 100%;
+      width: 590px;
+    }
+    :deep(.ant-spin-container) {
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/demo/inspectionaudit/auditinfo/AuditProgress/index.vue

@@ -0,0 +1,625 @@
+<template>
+  <div class="screen-div">
+    <!-- <div class="screen-row"> -->
+      <div class="screen-item" style="margin-bottom:12px;">
+        <div class="screen-item-label" style="margin-right: 9px">年份</div>
+        <a-select
+          allowClear
+          style="width: 103px"
+          v-model:value="props.year"
+          :options="yearOptions"
+          @change="
+            (value) => {
+              emits('auditProgressScreenChange', value, 'year');
+            }
+          "
+        />
+      </div>
+      <div class="screen-item" style="margin-left: 20px; margin-right: 17px;margin-bottom:12px;">
+        <div class="screen-item-label" style="margin-right: 11px">图斑来源</div>
+        <a-select
+          allowClear
+          style="width: 142px"
+          v-model:value="props.patchSource"
+          :options="patchSourceOptions"
+          @change="
+            (value) => {
+              emits('auditProgressScreenChange', value, 'patchSource');
+            }
+          "
+        />
+      </div>
+      <div class="screen-item" style="margin-bottom:12px;">
+        <div class="screen-item-label" style="margin-right: 9px">批次</div>
+        <a-select
+          allowClear
+          style="width: 117px"
+          v-model:value="props.batch"
+          :options="props.batchOptions"
+          @change="
+            (value) => {
+              emits('auditProgressScreenChange', value, 'batch');
+            }
+          "
+        />
+      </div>
+      <div class="screen-item" style="margin-right: 14px;">
+        <a-input
+          allowClear
+          placeholder="请输入图斑编号(模糊查询获取近十条数据)"
+          class="item-input"
+          v-model:value="mapNo"
+          style="width:443px;"
+          @press-enter="querysBtn"
+        />
+      </div>
+      <div class="screen-item" style="margin-left: 10px;cursor: pointer;">
+        <a-button 
+          class="item-button"
+          type="primary"
+          :icon="h(SearchOutlined)"
+          @click="querysBtn">查询</a-button>
+      </div>
+    <!-- </div> -->
+  </div>
+  <div class="data-list">
+    <div class="search-list-div">
+      <div
+        v-for="(item, index) in searchList"
+        :key="index"
+        class="data-list-item"
+        v-if="searchList.length > 0"
+      >
+      <div class="back-box" v-if="showDrawBack(item)">{{ drawBackSpan(item) }}</div>
+      <div class="data-list-layout-div">
+          <div class="data-list-title-div">
+            <img src="/positioning.png" class="map-mark" @click="locationFun(item)"/>
+            <div class="label-div">
+              <div class="item-label">{{item.countyname}}</div>
+              <div class="item-sub-label">
+                <span style="margin-right:12px;">{{item.streetname}}</span>
+                <span>{{item.case_no}}</span>
+                <span class="item-mark" v-if="item.is_build_name">{{item.is_build_name}}</span>
+              </div>
+            </div>
+          </div>
+          <div class="button-div">
+            <a-button type="primary" class="button-item" @click="goAudit(item)">审核</a-button>
+          </div>
+        </div>
+        <div class="data-list-info-div">
+          <div class="info-layout-div">
+            <div class="info-item">
+              <div class="info-label">总面积</div>
+              <div class="info-data" :title="dataProcessing(item.area)">{{dataProcessing(item.area)}}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">农用地</div>
+              <div class="info-data" :title="dataProcessing(item.nongyongdi_area)">{{dataProcessing(item.nongyongdi_area)}}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">耕地</div>
+              <div class="info-data" :title="dataProcessing(item.gengdi_area)">{{dataProcessing(item.gengdi_area)}}</div>
+            </div>
+            <div class="info-item" style="width:127px;">
+              <div class="info-label">永农面积</div>
+              <div class="info-data" :title="dataProcessing(item.yongjiujibennongtian_area)">{{dataProcessing(item.yongjiujibennongtian_area)}}</div>
+            </div>
+          </div>
+          <div class="info-layout-div">
+            <div style="cursor: pointer;">
+              <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"   @click="collectItem(item)"  v-if="item.Fid"/>
+              <img src="@/assets/images/tiankongdi/collect.png" class="img-box"   @click="collectItem(item)"  v-else/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="show-data-list-content">
+      <div
+        class="data-item"
+        v-for="(item, index) in dataList"
+        :key="index"
+        @click="emits('showInfo', item)"
+        v-if="dataList.length > 0"
+      >
+        <div class="name-div">
+          <div style="display: flex; align-items: center">
+            <img src="/positioning.png" class="item-mark" />
+            <div class="item-label">{{ item.areaname }}</div>
+          </div>
+          <div class="progress-div">
+            <div class="progress-label reviewed-color" style="width: 70px">待审核</div>
+            <div class="progress-data" style="width: 37px">
+              <span style="color: #ec7908">{{ item.verifytask }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="info-data-div">
+          <div class="info-data-item">
+            <div class="info-data-label">下发</div>
+            <div class="info-data-data">{{ item.totaltask }}</div>
+          </div>
+          <!-- <div style="width: 1px;margin-right:27px;margin-left:31px;background-color:#EDEDED;height: 15px;"></div> -->
+          <div class="info-data-item">
+            <div class="info-data-label">接收</div>
+            <div class="info-data-data">{{ item.receivetask }}</div>
+          </div>
+          <div class="info-data-item">
+            <div class="info-data-label">非粮化</div>
+            <div class="info-data-data">{{ item.nonfoodcase }}</div>
+          </div>
+          <!-- <div style="width: 1px;margin-right:15px;margin-left:30px;background-color:#EDEDED;height: 15px;"></div> -->
+          <div class="info-data-item">
+            <div class="info-data-label">举证合法</div>
+            <div class="info-data-data">{{ item.legalcase }}</div>
+          </div>
+          <!-- <div style="width: 1px;margin-right:18px;margin-left:17px;background-color:#EDEDED;height: 15px;"></div> -->
+          <div class="info-data-item">
+            <div class="info-data-label">举证其他</div>
+            <div class="info-data-data">{{ item.ilegalcase }}</div>
+          </div>
+        </div>
+      </div>
+      <div v-else class="no-data">
+        <a-empty :image="simpleImage" />
+      </div>
+    </div>
+    <a-modal
+      width="100%"
+      wrap-class-name="full-modal"
+      v-model:open="auditOpen"
+      title="填报审核"
+      footer=""
+      :destroyOnClose="true"
+    >
+      <template #footer> </template>
+      <Audit
+        ref="posRef"
+        :processId="processId"
+        :taskId="taskId"
+        :isRead="isRead"
+        :type="type"
+        :auditData="auditData"
+        @closeModel="closeMolder"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, defineProps, defineEmits, toRefs, h } from 'vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { Empty, message } from 'ant-design-vue';
+  import { patchSourceOptions } from '@/utils/global';
+  import { SearchOutlined} from '@ant-design/icons-vue'
+  import { getLoadTaskDetailList, deleteTaskCase, addTaskFavorite} from '@/api/inspectionaudit/index';
+  import {showDrawBack, drawBackSpan} from '@/views/demo/util'
+  import { getDetail } from '@/api/sys/WFSchemeInfo';
+  import { flowStore } from '@/store/modules/flow';
+  import { Audit } from '@/views/demo/workflow/task/process/page';
+  import { dataProcessing } from '@/views/demo/tiankongdi/util'
+  import { useUserStore } from '@/store/modules/user'
+
+  const props = defineProps([
+    'year',
+    'batch',
+    'patchSource',
+    'batchOptions',
+    'yearOptions',
+    'dataList',
+  ]);
+  const emits = defineEmits(['auditProgressScreenChange', 'showInfo', 'changeTask', 'openLoading', 'closeLoading','getCountList']);
+
+  const flowWfDataStore = flowStore();
+  const userStore = useUserStore()
+
+  const mapNo = ref('')
+  const searchList = ref([])
+  const showDataId = ref()
+  const auditOpen = ref(false);
+  const processId = ref('');
+  const taskId = ref('');
+  const type = ref('');
+  const auditData = ref()
+  const isRead: any = ref(0);
+
+  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+  // function changeParam(val,type) {
+  //   emits('auditProgressScreenChange', val, type);
+  // }
+  const querysBtn = () => {
+    let params = {
+      geomid: mapNo.value,
+      year: props.year,
+      batch: props.batch,
+      tubanlaiyuan: props.patchSource,
+      page: 1,
+      limit: 10,
+    }
+    if(mapNo.value == ''){
+      params.page = 0
+      params.limit = 0
+    }
+    emits('openLoading')
+    getLoadTaskDetailList(params).then(res => {
+      console.log(res)
+      searchList.value = res.items
+    }).finally(() => {
+      emits('closeLoading')
+    })
+  }
+  async function locationFun(record) {
+    emits('changeTask', record);
+  }
+  async function goAudit(record) {
+    showDataId.value = record.Id
+    let data = await getDetail({ code: record.processcode });
+    let scheme = JSON.parse(data.scheme.content);
+    let wfData = scheme.wfData;
+    flowWfDataStore.setWfDataAll(wfData);
+    auditOpen.value = true;
+    processId.value = record.processid;
+    taskId.value = record.taskeid;
+    type.value = record.type;
+    auditData.value = record;
+  }
+  const cancelCollectItem = (item) => {
+    deleteTaskCase(item.Fid).then(res => {
+      message.success('取消收藏成功')
+      querysBtn();
+    })
+  }
+  const collectItem = (item) => {
+    if(item.Fid){
+      cancelCollectItem(item)
+      return
+    }
+    let userInfo = userStore.getUserInfo
+    let params = {
+      taskId: item.taskeid,
+      favoriteUserId: userInfo.id
+    }
+    addTaskFavorite(params).then(res => {
+      message.success('收藏成功')
+      querysBtn();
+    })
+  }
+  const closeMolder = () => {
+    querysBtn()
+    emits('getCountList')
+  }
+</script>
+
+<style lang="less" scoped>
+  .item-button{
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    font-size: 19px;
+    color: #FFFFFF;
+    line-height: 30px;
+    height:39px;
+    width: 97px;
+    background: #086DEC;
+    // margin-left:12px;
+  }
+  .screen-div {
+    width: 590px;
+    padding: 22px 12px 14px 13px;
+    display: flex;
+    flex-wrap: wrap;
+      .screen-item {
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        font-size: 17px;
+        color: #000000;
+        // width: 33.3%;
+        display: flex;
+        .item-input {
+          width: 223px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 17px;
+          color: #000000;
+          line-height: 30px;
+          box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
+        }
+        .screen-item-label {
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 17px;
+          color: #000000;
+          line-height: 30px;
+          display: flex;
+          align-items: center;
+        }
+        :deep(.ant-select-selector) {
+          display: flex;
+          align-items: center;
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 19px;
+          color: #000000;
+          line-height: 30px;
+          height: 39px;
+          box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
+        }
+      }
+  }
+  .data-list {
+    height: calc(100% - 137px);
+    margin-top: 10px;
+    padding: 0px 11px 0px 13px;
+    display: flex;
+    flex-direction: column;
+    .data-title {
+      height: 40px;
+      background: #bab9b7;
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      color: #366198;
+    }
+    .show-data-list-content {
+      // height: 76vh;
+      overflow: auto;
+      flex: 1;
+      .data-item {
+        cursor: pointer;
+        width: 100%;
+        background: #fff;
+        border-radius: 11px;
+        padding: 0px 15px;
+        margin-bottom: 8px;
+        .name-div {
+          display: flex;
+          height: 57px;
+          align-items: center;
+          padding: 10px 0px;
+          border-bottom: 1px solid #e5e5e5;
+          justify-content: space-between;
+        }
+        .info-data-div {
+          height: 61px;
+          display: flex;
+          align-items: center;
+          // padding-left: 27px;
+          // justify-content: space-between;
+          // margin-top: 10px;
+          .info-data-item {
+            display: flex;
+            align-items: center;
+            flex: 1;
+            justify-content: center;
+            border-right: 1px solid #ededed;
+            .info-data-label {
+              font-family: Alibaba PuHuiTi;
+              font-weight: 400;
+              font-size: 16px;
+              color: #959494;
+              display: flex;
+              line-height: 30px;
+              margin-right: 11px;
+            }
+            .info-data-data {
+              font-family: HarmonyOS Sans;
+              font-weight: 500;
+              font-size: 16px;
+              color: #000000;
+              line-height: 30px;
+              display: flex;
+            }
+          }
+          .info-data-item:nth-last-child(1) {
+            border-right: 0px;
+          }
+        }
+        .data-div {
+          font-weight: 500;
+          margin-right: 5px;
+        }
+        .item-mark {
+          width: 17px;
+          height: 17px;
+          // background: #086dec;
+          // margin-left: 7px;
+          // margin-right: 7px;
+        }
+        .item-label {
+          // width: 122px;
+          padding-left: 12px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 23px;
+          color: #000000;
+          line-height: 30px;
+        }
+        .progress-div {
+          display: flex;
+          // font-weight: 500;
+          // font-size: 16px;
+          // line-height: 30px;
+          // margin-right: 17px;
+          .progress-label {
+            font-family: Alibaba PuHuiTi;
+            color: #ffffff;
+            width: 50px;
+            height: 30px;
+            border-radius: 4px 0px 0px 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .progress-data {
+            background: #efefef;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 0px 4px 4px 0px;
+            font-family: HarmonyOS Sans;
+            font-weight: 500;
+            font-size: 19px;
+            // color: #086DEC;
+            line-height: 30px;
+          }
+          .progress-color {
+            background: #086dec;
+          }
+          .extended-color {
+            background: #d03542;
+          }
+          .reviewed-color {
+            background: #ec7908;
+          }
+        }
+      }
+      .data-item:hover {
+        background-color: rgba(8, 109, 236, 0.08);
+      }
+      // .data-item:nth-child(2n) {
+      //   background: #ececec;
+      // }
+    }
+  }
+  .no-data {
+    padding: 20px 0;
+  }
+  .data-list-item{
+    background:#fff;
+    padding:20px 10px 10px 10px;
+    margin-bottom:4px;
+    position: relative;
+    .back-box{
+      position: absolute;
+      right: 0;
+      top:0;
+      background: #EA1C06;
+      padding: 3px 6px;
+      color: #fff;
+      font-size: 12px;
+      border-radius: 0px 0px 0px 8px;
+    }
+    .data-list-layout-div{
+      display:flex;
+      justify-content: space-between;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #E5E5E5;
+      height: 45px;
+      .data-list-title-div{
+        display:flex;
+        align-items: center;
+        .map-mark{
+          width:17px;
+          height:17px;
+          cursor:pointer;
+        }
+        .label-div{
+          display: flex;
+          align-items: baseline;
+          margin-right: 12px
+        }
+        .item-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 23px;
+          color: #000000;
+          margin-left: 9px;
+          margin-right:10px;
+        }
+        .item-sub-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 17px;
+          color: #000000;
+        }
+        .item-mark{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 13px;
+          color: #696969;
+          margin-left: 17px;
+          margin-top: 4px;
+        }
+      }
+      .button-div{
+        display: flex;
+        align-items: center;
+        .button-item{
+          height: 27px;
+          width: 52px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 15px;
+          color: #fff;
+          background: linear-gradient(-56deg, #0060FF, #007EFF, #0061FF);
+        }
+      }
+    }
+    .data-list-info-div{
+      display: flex;
+      justify-content: space-between;
+      margin-top: 10px;
+      height: 40px;
+      .info-layout-div{
+        display:flex;
+        align-items: center;
+        .info-time{
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 15px;
+          color: #000000;
+          margin-right: 5px;
+        }
+      }
+      .info-item{
+        display:flex;
+        background: rgba(237, 237, 237, 0.55);
+        align-items: center;
+        width: 110px;
+        border-radius: 7px;
+        margin-right: 9px;
+        height: 33px;
+        justify-content: center;
+        .info-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          font-size: 13px;
+          color: #959494;
+          // width:45%;
+          display: flex;
+          justify-content: center;
+          padding-right: 5px;
+          white-space: nowrap;
+        }
+        .info-data{
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 13px;
+          color: #000000;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+  .data-list-item:nth-last-child(1){
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .img-box{
+    width: 25px;
+    cursor: pointer;
+    height: 23px;
+  }
+  .search-list-div{
+    max-height: 387px;
+    overflow: auto;
+  }
+</style>

src/views/demo/inspectionaudit/auditinfo/MapList/index.vue

@@ -0,0 +1,789 @@
+<template>
+  <div class="map-list-content">
+    <div class="screen-div">
+      <div class="screen-item" style="margin-right:20px;margin-bottom:15px;">
+        <div class="screen-item-label">年份</div>
+        <a-select
+          allowClear
+          style="width:130px;"
+          v-model:value="params.year"
+          :options="props.yearOptions"
+        />
+      </div>
+      <div class="screen-item" style="margin-right:17px;margin-bottom:15px;">
+        <div class="screen-item-label">图斑来源</div>
+        <a-select
+          allowClear
+          style="width:130px;"
+          v-model:value="params.tubanlaiyuan"
+          :options="patchSourceOptions"
+        />
+      </div>
+      <div class="screen-item" style="margin-bottom:15px;">
+        <div class="screen-item-label">批次</div>
+        <a-select
+          allowClear
+          style="width:103px;"
+          v-model:value="params.picihao"
+          :options="props.batchOptions"
+        />
+      </div>
+      <div class="screen-item" style="margin-right:13px;">
+        <div class="screen-item-label">举证</div>
+        <a-select
+          allowClear
+          style="width:130px;"
+          v-model:value="params.is_build_name"
+          :options="markTypeOptions"
+        />
+      </div>
+      <div class="screen-item" style="margin-right:10px;">
+        <!-- <div class="screen-item-label">图斑号</div> -->
+        <a-input style="width:270px;" allowClear v-model:value="params.geomid" class="item-input" placeholder="请输入图斑编号" @press-enter="query"/>
+      </div>
+      <div class="screen-item" style="display: flex; justify-content: end;margin-bottom: 0px;">
+          <a-button type="primary" class="item-button" :icon="h(SearchOutlined)" @click="query">查询</a-button>
+      </div>
+    </div>
+    <div class="sift-div">
+      <div class="layout-div">
+        <img style="cursor: pointer;width:20px;height: 18px" src="@/assets/images/tiankongdi/back.png" class="img-box"  @click="emits('changeShowParent')"/>
+        <div class="interval-div"></div>
+        <div class="sift-item" @click="dataListSort('area')">
+          <div class="sift-label">总面积</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('area',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('area',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+        <div class="sift-item" @click="dataListSort('gengdi_area')">
+          <div class="sift-label">耕地面积</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('gengdi_area',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('gengdi_area',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+        <div class="sift-item" @click="dataListSort('yongjiujibennongtian_area')">
+          <div class="sift-label">永农面积</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('yongjiujibennongtian_area',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('yongjiujibennongtian_area',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+        <div class="sift-item" @click="dataListSort('CreateDate')">
+          <div class="sift-label">下发时间</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('CreateDate',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('CreateDate',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+      </div>
+      <div style="display: flex;align-items: center;cursor: pointer;">
+        <a-popover placement="bottom">
+          <template #content>
+            <div style="display:flex;">
+              <div>当前状态：</div>
+              <div>
+                <a-checkbox-group 
+                  v-model:value="params.nowStatus"
+                  style="width: 100%" 
+                  :options="auditMapStatusOptions"></a-checkbox-group>
+                </div>
+            </div>
+          </template>
+          <img src="@/assets/images/tiankongdi/filt.png" class="img-box mr-r-20" />
+        </a-popover>
+        <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"  @click="getCollectList" v-if="openCollect"/>
+        <img src="@/assets/images/tiankongdi/collect.png" class="img-box"  @click="getCollectList" v-else/>
+      </div>
+     </div>
+    <div class="data-list-div" style="padding-top: 3px;">
+      <div
+        v-for="(item, index) in dataList"
+        :key="index"
+        class="data-list-item"
+        v-if="dataList.length > 0"
+      >
+      <div class="back-box" v-if="showDrawBack(item)">{{ drawBackSpan(item) }}</div>
+      <div class="data-list-layout-div">
+          <div class="data-list-title-div">
+            <img src="/positioning.png" class="map-mark" @click="locationFun(item)"/>
+            <div class="label-div">
+              <div class="item-label">{{item.countyname}}</div>
+              <div class="item-sub-label">
+                <span style="margin-right:12px;">{{item.streetname}}</span>
+                <span>{{item.case_no}}</span>
+                <span class="item-mark" v-if="item.is_build_name">{{item.is_build_name}}</span>
+              </div>
+            </div>
+          </div>
+          <div class="button-div">
+            <a-button type="primary" class="button-item" @click="goAudit(item)">审核</a-button>
+          </div>
+        </div>
+        <div class="data-list-info-div">
+          <div class="info-layout-div">
+            <div class="info-item">
+              <div class="info-label">总面积</div>
+              <div class="info-data" :title="dataProcessing(item.area)">{{dataProcessing(item.area)}}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">农用地</div>
+              <div class="info-data" :title="dataProcessing(item.nongyongdi_area)">{{dataProcessing(item.nongyongdi_area)}}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">耕地</div>
+              <div class="info-data" :title="dataProcessing(item.gengdi_area)">{{dataProcessing(item.gengdi_area)}}</div>
+            </div>
+            <div class="info-item" style="width:127px;">
+              <div class="info-label">永农面积</div>
+              <div class="info-data" :title="dataProcessing(item.yongjiujibennongtian_area)">{{dataProcessing(item.yongjiujibennongtian_area)}}</div>
+            </div>
+          </div>
+          <div class="info-layout-div">
+            <!-- <div>
+              <Icon
+                :style="`font-size: 30px; color: #314A8C; cursor: pointer;${item.isouttime === 2? 'color: #D03542;': item.isouttime === 1? 'color: #F7710F;': 'color: #314A8C;'}`"
+                icon="icon-park-solid:timer"
+                @click="()=>{}" 
+              />
+            </div>
+            <div style="background: rgb(237, 237, 237);width: 1px;height: 100%;margin-right: 10px;margin-left: 10px;"></div> -->
+            <div style="cursor: pointer;">
+              <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"   @click="collectItem(item)"  v-if="item.Fid"/>
+              <img src="@/assets/images/tiankongdi/collect.png" class="img-box"   @click="collectItem(item)"  v-else/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pagination-div" v-if="dataList.length > 0">
+      <a-pagination
+        size="small"
+        v-model:current="pageNumber"
+        v-model:pageSize="pageSizeNumber"
+        :total="total"
+        :show-total="total => `共 ${total} 条数据`"
+        show-size-changer
+        show-quick-jumper
+        @change="changePagination"
+      />
+    </div>
+    <a-modal
+      width="100%"
+      wrap-class-name="full-modal"
+      v-model:open="auditOpen"
+      title="填报审核"
+      footer=""
+      :destroyOnClose="true"
+    >
+      <template #footer> </template>
+      <div class="handoff">
+        <a-button
+          type="primary" 
+          style="margin-right: 25px;"
+          @click="prevData"
+        >上一条</a-button>
+        <a-button
+          type="primary"
+          @click="nextData"
+        >下一条</a-button>
+      </div>
+      <Audit
+        v-if="handoffShow"
+        ref="posRef"
+        :processId="processId"
+        :taskId="taskId"
+        :isRead="isRead"
+        :type="type"
+        :auditData="auditData"
+        @closeModel="closeMolder"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref, defineEmits, computed, h, watch } from 'vue';
+  import { StarOutlined,StarFilled } from '@ant-design/icons-vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { getLoadTaskDetailList, updateSupervise, addTaskFavorite, deleteTaskCase } from '@/api/inspectionaudit/index';
+  import { flowStore } from '@/store/modules/flow';
+  import { getDetail } from '@/api/sys/WFSchemeInfo';
+  import { Audit } from '@/views/demo/workflow/task/process/page';
+  import { Empty } from 'ant-design-vue';
+  import { message } from 'ant-design-vue';
+  import { useUserStore } from '@/store/modules/user.ts'
+  import { SearchOutlined, RollbackOutlined } from '@ant-design/icons-vue';
+  import { patchSourceOptions, auditMapStatusOptions } from '@/utils/global'
+  import { dataProcessing } from '@/views/demo/tiankongdi/util.ts'
+  import {showDrawBack, drawBackSpan} from '@/views/demo/util'
+
+  const userStore = useUserStore()
+
+  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+  const emits = defineEmits(['changeTask', 'changeShowParent','openLoading','closeLoading']);
+
+  const flowWfDataStore = flowStore();
+
+  const props = defineProps(['areaId', 'yearOptions', 'year','level','batch','patchSource','batchOptions']);
+  const processId = ref('');
+  const taskId = ref('');
+  const isRead: any = ref(0);
+  const type = ref('');
+  const auditData = ref()
+  const order = ref(0)
+  const auditOpen = ref(false);
+  const showDataId = ref()
+  const handoffShow = ref(true)
+  const openCollect = computed(() => {
+  if(params.value.type === null) return false
+  return true
+})
+  const nextShowDataId = ref()
+  const prevShowDataId = ref()
+  watch(() => showDataId.value, () => {
+    let index = dataList.value.findIndex(item => item.Id == showDataId.value)
+    if(index < dataList.value.length - 1){
+      nextShowDataId.value =  dataList.value[index + 1].Id
+    }else{
+      nextShowDataId.value = 0
+    }
+    if(index > 0){
+      prevShowDataId.value = dataList.value[index - 1].Id
+    }else{
+      prevShowDataId.value = 0
+    }
+  })
+  const params = ref({
+    page: 1,
+    limit: 10,
+    level: props.level,
+    areaid: props.areaId,
+    geomid: null,
+    year: props.year,
+    picihao: props.batch,
+    tubanlaiyuan: props.patchSource,
+    is_build_name: null,
+    type: null,
+    sort: null,
+    order: null,
+    nowStatus: [],
+  });
+  const markTypeOptions = ref([
+    { label: '合法', value: '合法' },
+    { label: '其他', value: '其他' },
+    { label: '非粮化', value: '非粮化' },
+  ]);
+
+  const dataList = ref([]);
+  const total = ref(0);
+  const pageNumber = ref(1)
+  const pageSizeNumber = ref(10)
+  function query() {
+    params.value.page = 1;
+    getTaskList();
+  }
+  async function getTaskList() {
+    console.log(params.value);
+    let requestData = {...params.value}
+    if(requestData.nowStatus.length > 0){
+      requestData.nowStatus = requestData.nowStatus.join(',')
+    }else{
+      requestData.nowStatus = null
+    }
+    emits('openLoading')
+    const data = await getLoadTaskDetailList(requestData);
+    emits('closeLoading')
+    dataList.value = data.items;
+    total.value = data.total;
+  }
+  function changePagination(page, pageSize) {
+    console.log(page, pageSize);
+    params.value.page = page;
+    params.value.limit = pageSize;
+    getTaskList();
+  }
+  async function goAudit(record) {
+    showDataId.value = record.Id
+    let data = await getDetail({ code: record.processcode });
+    let scheme = JSON.parse(data.scheme.content);
+    let wfData = scheme.wfData;
+    flowWfDataStore.setWfDataAll(wfData);
+    auditOpen.value = true;
+    processId.value = record.processid;
+    taskId.value = record.taskeid;
+    type.value = record.type;
+    auditData.value = record;
+  }
+  async function locationFun(record) {
+    emits('changeTask', record);
+  }
+  onMounted(() => {
+    getTaskList();
+  });
+  const changeSupervise = (item) => {
+    if(item.cancelsupervise === 0 && item.issupervise === 1){
+      message.error('取消改督办权限不足')
+      return
+    }
+    let params = {
+      id: item.processid,
+      supervise: 1,
+    }
+    if(item.issupervise === 1){
+      params.supervise = 0
+    }
+    updateSupervise(params).then(res => {
+      if(params.supervise === 1){
+        message.success('成功发起督办')
+      }else{
+        message.success('取消督办成功')
+      }
+      getTaskList();
+    })
+  }
+  const prevData = async () => {
+    if(prevShowDataId.value === 0){
+      if(params.value.page === 1 || total.value == 0){
+        message.warning('已经是第一条数据了')
+        return
+      }
+      pageNumber.value = pageNumber.value - 1
+      params.value.page = params.value.page -1
+      await getTaskList();
+      // showDataIndex.value = dataList.value.length -1
+      handoffShow.value = false
+      let record = dataList.value[dataList.value.length -1]
+      let data = await getDetail({ code: record.processcode });
+      let scheme = JSON.parse(data.scheme.content);
+      let wfData = scheme.wfData;
+      flowWfDataStore.setWfDataAll(wfData);
+      processId.value = record.processid;
+      taskId.value = record.taskeid;
+      type.value = record.type;
+      handoffShow.value = true
+      showDataId.value = dataList.value[dataList.value.length - 1].Id
+      auditData.value = dataList.value[dataList.value.length - 1]
+      return
+    }else{
+      showDataId.value = prevShowDataId.value
+    }
+    handoffShow.value = false
+    let record = dataList.value.find(item => item.Id == showDataId.value)
+    let data = await getDetail({ code: record.processcode });
+    let scheme = JSON.parse(data.scheme.content);
+    let wfData = scheme.wfData;
+    flowWfDataStore.setWfDataAll(wfData);
+    processId.value = record.processid;
+    taskId.value = record.taskeid;
+    type.value = record.type;
+    handoffShow.value = true
+    auditData.value = record
+  }
+  const nextData = async () => {
+    if(nextShowDataId.value === 0){
+      if(Math.ceil(total.value / pageSizeNumber.value) <= pageNumber.value || total.value == 0){
+        message.warning('已经是最后一条数据了')
+        return
+      }
+      pageNumber.value = pageNumber.value + 1
+      params.value.page = params.value.page + 1
+      await getTaskList();
+      // showDataIndex.value = 0
+      handoffShow.value = false
+      let record = dataList.value[0]
+      let data = await getDetail({ code: record.processcode });
+      let scheme = JSON.parse(data.scheme.content);
+      let wfData = scheme.wfData;
+      flowWfDataStore.setWfDataAll(wfData);
+      processId.value = record.processid;
+      taskId.value = record.taskeid;
+      type.value = record.type;
+      handoffShow.value = true
+      showDataId.value = dataList.value[0].Id
+      auditData.value = dataList.value[0]
+      return
+    }else{
+      showDataId.value = nextShowDataId.value
+    }
+    handoffShow.value = false
+    let record = dataList.value.find(item => item.Id == showDataId.value)
+    let data = await getDetail({ code: record.processcode });
+    let scheme = JSON.parse(data.scheme.content);
+    let wfData = scheme.wfData;
+    flowWfDataStore.setWfDataAll(wfData);
+    processId.value = record.processid;
+    taskId.value = record.taskeid;
+    type.value = record.type;
+    handoffShow.value = true
+    auditData.value = record
+  }
+  const cancelCollectItem = (item) => {
+    deleteTaskCase(item.Fid).then(res => {
+      message.success('取消收藏成功')
+      getTaskList();
+    })
+  }
+  const collectItem = (item) => {
+    if(item.Fid){
+      cancelCollectItem(item)
+      return
+    }
+    let userInfo = userStore.getUserInfo
+    let params = {
+      taskId: item.taskeid,
+      favoriteUserId: userInfo.id
+    }
+    addTaskFavorite(params).then(res => {
+      message.success('收藏成功')
+      getTaskList();
+    })
+  }
+  const getCollectList = () => {
+    if(params.value.type === null){
+      params.value.type = 1
+    }else if(params.value.type === 1){
+      params.value.type = null
+    }
+    params.value.page = 1
+    pageNumber.value = 1
+    getTaskList();
+  }
+  const showSortMark = (key, sort) => {
+    if(params.value.sort === key && sort === order.value){
+      return true
+    }
+    return false
+  }
+  const dataListSort = (type) => {
+    if(params.value.sort === null || params.value.sort === type){
+      order.value = (order.value + 1) % 3
+    }else{
+      order.value = 1
+    }
+    // emits('infoDataListSort', type, order.value)
+    switch(order.value){
+      case 0:
+        params.value.sort = null
+        params.value.order = null
+        break
+      case 1:
+        params.value.sort = type
+        params.value.order = 'asc'
+        break
+      case 2:
+        params.value.sort = type
+        params.value.order = 'desc'
+        break
+    }
+    getTaskList();
+  }
+  const closeMolder = () => {
+    getTaskList();
+  }
+</script>
+<style lang="less">
+  .full-modal {
+    .ant-modal {
+      max-width: 100%;
+      top: 0;
+    }
+
+    .ant-modal-content {
+      height: calc(100vh);
+    }
+
+    .ant-modal-body {
+      height: 85%;
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .handoff{
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 25px;
+  }
+  .map-list-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .screen-div {
+    padding: 22px 12px 19px 13px;
+    display: flex;
+    width: 590px;
+    // margin-top: 10px;
+    flex-wrap: wrap;
+    // background: @component-background;
+    .screen-item {
+      // width: 33.3%;
+      display: flex;
+      // margin-bottom: 15px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 500;
+      font-size: 17px;
+      color: #000000;
+      height: 39px;
+      .screen-item-label {
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        font-size: 17px;
+        color: #000000;
+        line-height: 30px;
+        display: flex;
+        align-items: center;
+        margin-right: 9px;
+      }
+      :deep(.ant-select-selector){
+        display: flex;
+        align-items: center;
+        font-family: HarmonyOS Sans;
+        font-weight: 500;
+        font-size: 19px;
+        color: #000000;
+        line-height: 30px;
+        height: 39px;
+        box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
+      }
+      .item-input{
+        font-family: Alibaba PuHuiTi;
+        font-weight: 400;
+        font-size: 19px;
+        color: #000000;
+        line-height: 30px;
+        width:223px;
+        box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
+      }
+      .item-button{
+        font-family: Alibaba PuHuiTi;
+        font-weight: 400;
+        font-size: 19px;
+        color: #FFFFFF;
+        line-height: 30px;
+        height:38px;
+        width: 97px;
+        background:#086DEC;
+      }
+    }
+    .screen-button-div {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+  }
+  .sift-div{
+    background:#fff;
+     height: 77px;
+     padding:19px 13px;
+     margin-left: 10px;
+     margin-right: 10px;
+     border-radius: 10px 10px 0px 0px;
+     display: flex;
+     justify-content: space-between;
+     .layout-div{
+      display:flex;
+      align-items: center;
+      .back-button{
+        font-size:22px;
+        cursor:pointer;
+      }
+      .interval-div{
+        height:100%;
+        width:1px;
+        background:#EDEDED;
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+      .sift-item{
+        display: flex;
+        align-items: center;
+        margin-right:15px;
+        cursor:pointer;
+        user-select:none;
+        .sift-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 19px;
+          color: #000000;
+        }
+        .sift-icon{
+          font-size: 9px;
+          margin-left:5px;
+          opacity: 0.53;
+        }
+      }
+     }
+     .collect-div{
+      display:flex;
+      align-items:center;
+     }
+  }
+  .data-list-div {
+    flex: 1;
+    overflow: auto;
+    padding: 10px;
+    // margin-top: 10px;
+    height: 60vh;
+    scrollbar-width: none; /* firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+    .data-list-item{
+    background:#fff;
+    padding:20px 10px 10px 10px;
+    // border-radius:6px;
+    margin-bottom:4px;
+    position: relative;
+    .back-box{
+      position: absolute;
+      right: 0;
+      top:0;
+      background: #EA1C06;
+      padding: 3px 6px;
+      color: #fff;
+      font-size: 12px;
+      border-radius: 0px 0px 0px 8px;
+    }
+    .data-list-layout-div{
+      display:flex;
+      justify-content: space-between;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #E5E5E5;
+      height: 45px;
+      .data-list-title-div{
+        display:flex;
+        align-items: center;
+        .map-mark{
+          width:17px;
+          height:17px;
+          cursor:pointer;
+        }
+        .label-div{
+          display: flex;
+          align-items: baseline;
+          margin-right: 12px
+        }
+        .item-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 23px;
+          color: #000000;
+          margin-left: 9px;
+          margin-right:10px;
+        }
+        .item-sub-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 17px;
+          color: #000000;
+        }
+        .item-mark{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 13px;
+          color: #696969;
+          margin-left: 17px;
+          margin-top: 4px;
+        }
+      }
+      .button-div{
+        display: flex;
+        align-items: center;
+        .button-item{
+          height: 27px;
+          width: 52px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 15px;
+          color: #fff;
+          background: linear-gradient(-56deg, #0060FF, #007EFF, #0061FF);
+        }
+      }
+    }
+    .data-list-info-div{
+      display: flex;
+      justify-content: space-between;
+      margin-top: 10px;
+      height: 40px;
+      .info-layout-div{
+        display:flex;
+        align-items: center;
+        .info-time{
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 15px;
+          color: #000000;
+          margin-right: 5px;
+        }
+      }
+      .info-item{
+        display:flex;
+        background: rgba(237, 237, 237, 0.55);
+        align-items: center;
+        width: 110px;
+        border-radius: 7px;
+        margin-right: 9px;
+        height: 33px;
+        justify-content: center;
+        .info-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          font-size: 13px;
+          color: #959494;
+          // width:45%;
+          display: flex;
+          justify-content: center;
+          padding-right: 5px;
+          white-space: nowrap;
+        }
+        .info-data{
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 13px;
+          color: #000000;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+    }
+    .data-list-item:nth-last-child(1){
+      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+  }
+  .data-list-div::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
+  .pagination-div {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .no-data {
+    padding: 20px 0;
+  }
+  .rollback {
+    background: @component-background;
+    padding: 10px;
+  }
+  .img-box{
+    width: 25px;
+    cursor: pointer;
+    height: 23px;
+  }
+  .mr-r-20{
+    margin-right: 20px;
+  }
+  .img-box.small{
+    width: 18px;
+    margin-right: 6px;
+    margin-bottom: 2px;
+  }
+</style>

src/views/demo/inspectionaudit/auditinfo/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="curb-spot-city">
+    <div class="show-list">
+      <a-spin :spinning="spinning">
+        <AuditProgress
+          v-if="showParent"
+          :year="year"
+          :batch="batch"
+          :batchOptions="batchOptions"
+          :yearOptions="yearOptions"
+          :dataList="dataList"
+          @auditProgressScreenChange="auditProgressScreenChange"
+          @showInfo="changeShowInfo"
+          @changeTask="changeTask"
+          @openLoading="openLoading"
+          @closeLoading="closeLoading"
+          @getCountList="getCountList"
+        />
+        <MapList
+          @changeTask="changeTask"
+          @changeShowParent="changeShowParent"
+          :areaId="areaId"
+          :level="level"
+          :year="year"
+          :batch="batch"
+          :patchSource="patchSource"
+          :yearOptions="yearOptions"
+          :batchOptions="batchOptions"
+          @openLoading="openLoading"
+          @closeLoading="closeLoading"
+          v-else
+        />
+      </a-spin>
+    </div>
+    <div class="map-box-div">
+      <MapboxMap
+        :mapConfig="mapConfig"
+        @handlerDrawComplete="handlerDrawComplete"
+        @mapOnLoad="onMapboxLoad"
+        ref="MapboxComponent"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted, defineAsyncComponent } from 'vue';
+  import mapboxgl, { Map } from 'mapbox-gl';
+  import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config.ts';
+  import AuditProgress from './AuditProgress/index.vue';
+  import MapList from './MapList/index.vue';
+  import { getLoadTaskCount } from '@/api/inspectionaudit/index';
+  import { getGeom, getConfig } from '@/api/sys/layerManagement';
+  import { getDetail } from '@/api/sys/WFSchemeInfo';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { yearOptions } from '@/utils/global';
+
+  const { createMessage } = useMessage();
+
+  const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
+  const MapboxComponent = ref();
+  const mapConfig = ref({ isShowMap: false });
+
+  function onMapboxLoad(): void {
+    getConfig({ code: 'mapsetting' }).then((res) => {
+      mapConfig.value = JSON.parse(res.codeValue);
+    });
+  }
+
+  const spinning = ref(false)
+  const showParent = ref(true);
+  const year = ref();
+  const batch = ref();
+  const patchSource = ref();
+  const batchOptions = ref([]);
+  const dataList = ref([]);
+  const areaId = ref('');
+  const level = ref();
+  const auditProgressScreenChange = (value, type) => {
+    switch (type) {
+      case 'year':
+        year.value = value;
+        break;
+      case 'batch':
+        batch.value = value;
+        break;
+      case 'patchSource':
+        patchSource.value = value;
+        break;
+    }
+    getCountList();
+  };
+  const changeShowInfo = (item) => {
+    console.log(item);
+    showParent.value = false;
+    areaId.value = item.areaid;
+    level.value = item.level;
+  };
+  function changeShowParent() {
+    getCountList();
+    showParent.value = true;
+  }
+  async function getCountList() {
+    spinning.value = true
+    const data = await getLoadTaskCount({
+      year: year.value,
+      tubanlaiyuan: patchSource.value,
+      picihao: batch.value,
+      illegal: 1,
+    });
+    spinning.value = false
+    dataList.value = data;
+  }
+  onMounted(() => {
+    getCountList();
+    // TODO 获取批次
+    batchOptions.value = [];
+  });
+  const openLoading = () => {
+    spinning.value = true
+  }
+  const closeLoading = () => {
+    spinning.value = false
+  }
+  function changeTask(record) {
+    if (record?.geomid) {
+      // handlerGetMapConfigByFormId(record.processcode);
+      let val = record.geomid;
+      let getGeomPrams = {
+        TableName: 'drone_shp_data ',
+        FieldName: 'gid',
+        FieldValue: val?.split(','),
+        page: 1,
+        limit: 999,
+        key: null,
+      };
+      if (val) {
+        getGeom(getGeomPrams).then((res) => {
+          let geoms = [];
+          if (res) {
+            if (res.items?.length > 0) {
+              res.items.forEach((item, index) => {
+                let geom = {
+                  key: item.gid,
+                  mapgeom: item.geometry,
+                };
+                geoms.push(geom);
+              });
+            }
+            // MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
+            MapboxComponent.value.handlerDraw('Details', geoms, false);
+          } else {
+            createMessage.error('当前数据没有图斑！');
+          }
+        });
+      } else {
+        createMessage.error('当前数据没有图斑！');
+      }
+    }
+  }
+
+  // 根据发布表单的id获取地图配置
+  function handlerGetMapConfigByFormId(id) {
+    if (id) {
+      getDetail({ code: id }).then((res) => {
+        let data = res;
+        let scheme = JSON.parse(data.scheme.content);
+        let wfData = scheme.wfData;
+        let startFlow = wfData.find((item, index) => {
+          return item.type == 'bpmn:StartEvent';
+        });
+        if (startFlow?.mapConfig) {
+          mapConfig.value = startFlow?.mapConfig;
+        }
+      });
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .curb-spot-city {
+    height: 100%;
+    display: flex;
+    .show-list {
+      width: 590px;
+      background: #efefef;
+      :deep(.ant-spin-nested-loading) {
+        height: 100%;
+      }
+      :deep(.ant-spin-container) {
+        height: 100%;
+      }
+    }
+    .map-box-div {
+      width: 65%;
+    }
+  }
+</style>

src/views/demo/inspectionaudit/caseoffence/RecordList.vue

@@ -0,0 +1,259 @@
+<template>
+  <a-table
+    :columns="columns.col"
+    :data-source="columns.data"
+    size="small"
+    height="500"
+    bordered
+    :pagination="pagination.pagination"
+  >
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.dataIndex === 'is_illegal'">
+        {{ getRecordByColumn(column.dataIndex, record) }}
+      </template>
+      <template v-if="column.dataIndex === 'weifaleixing'">
+        {{ getRecordByColumn(column.dataIndex, record) }}
+      </template>
+      <template v-if="column.dataIndex === 'measure_name'">
+        {{ getRecordByColumn(column.dataIndex, record) }}
+      </template>
+      <template v-if="column.dataIndex === 'actual_use_to'">
+        {{ getRecordByColumn(column.dataIndex, record) }}
+      </template>
+      <template v-if="column.dataIndex === 'action'">
+        <a @click="viewDetail(record)">详情</a>
+      </template>
+    </template>
+  </a-table>
+
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="图斑详情"
+    :canFullscreen="false"
+    :defaultFullscreen="true"
+    :showCancelBtn="false"
+    :showOkBtn="false"
+    :draggable="false"
+  >
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, defineProps, watch } from 'vue';
+  import { BasicModal, useModal } from '@/components/Modal';
+  import { getCaseInfoList } from '@/api/monitor/index';
+  import { getLoadCaseInfoListOffence } from '@/api/inspectionaudit';
+  import { dataProcessingCount } from '@/views/demo/tiankongdi/util.ts';
+
+  const [registerModal, { openModal, setModalProps }] = useModal();
+
+  const props = defineProps<{
+    tablist: Object;
+    currentListQuery: Object;
+  }>();
+  const caseId = ref('');
+  let columns = reactive({
+    data: [],
+    col: [
+      {
+        title: '图斑来源',
+        dataIndex: 'tubanlaiyuan',
+      },
+      {
+        title: '县区',
+        dataIndex: 'countyname',
+      },
+      {
+        title: '乡镇',
+        dataIndex: 'streetname',
+      },
+      {
+        title: '社区/村',
+        dataIndex: 'communityname',
+      },
+      {
+        title: '图斑描述',
+        dataIndex: 'case_description',
+      },
+      {
+        title: '图斑编号',
+        dataIndex: 'case_no',
+      },
+      {
+        title: '图斑类型',
+        dataIndex: 'typename',
+      },
+      {
+        title: '图斑面积',
+        dataIndex: 'area',
+      },
+      {
+        title: '耕地面积',
+        dataIndex: 'gengdi_area',
+      },
+      {
+        title: '永农面积',
+        dataIndex: 'yongjiujibennongtianarea',
+      },
+      {
+        title: '当前状态',
+        dataIndex: 'handle_status_name',
+      },
+      {
+        title: '判定结果',
+        dataIndex: 'is_illegal',
+      },
+      {
+        title: '下发时间',
+        dataIndex: 'synchronoustime',
+      },
+      {
+        title: '项目名称',
+        dataIndex: 'xiangmumc',
+      },
+      {
+        title: '项目主体',
+        dataIndex: 'xiangmuzhuti',
+      },
+      {
+        title: '实际用途',
+        dataIndex: 'actual_use_to',
+      },
+      {
+        title: '违法类型',
+        dataIndex: 'weifaleixing',
+      },
+      {
+        title: '整改措施',
+        dataIndex: 'measure_name',
+      },
+      // {
+      //   title: '操作',
+      //   dataIndex: 'action',
+      // },
+    ],
+  });
+  let total = ref(0);
+
+  function viewDetail(record) {
+    console.log(record);
+    caseId.value = record.id;
+    openModal();
+  }
+
+  let current = ref(1);
+  let pageSize = ref(10);
+
+  let pagination = reactive({
+    pagination: {
+      pageSize: pageSize, // 每页显示的条数
+      showSizeChanger: true, // 是否可以改变每页显示的条数
+      pageSizeOptions: ['10', '50', '80', '100'], // 可选的每页显示条数
+      showQuickJumper: true, // 是否可以快速跳转到指定页
+      showTotal: (total) => `共${total}条`,
+      current: current, // 当前页数
+      total: total, // 总条数
+      onChange: handlePageChange,
+    },
+  });
+
+  function handlePageChange(page, pageSize) {
+    props.currentListQuery.page = page;
+    props.currentListQuery.limit = pageSize;
+    pagination.pagination.pageSize = pageSize;
+    pagination.pagination.current = page;
+  }
+
+  watch(
+    () => props.currentListQuery,
+    (newValue, oldValue) => {
+      pagination.pagination.pageSize = newValue.limit;
+      pagination.pagination.current = newValue.page;
+      handleGetList();
+    },
+    { immediate: true, deep: true },
+  );
+
+  function handleGetList() {
+    getLoadCaseInfoListOffence(props.currentListQuery).then((res) => {
+      res.items.forEach((item) => {
+        item.area = dataProcessingCount(item.area);
+        item.gengdi_area = dataProcessingCount(item.gengdi_area);
+      });
+      columns.data = res.items;
+      total.value = res.total;
+    });
+  }
+
+  function getRecordByColumn(dataIndex, record) {
+    let result: string = '';
+    if (dataIndex == 'is_illegal') {
+      // 判定结果
+      switch (record.is_illegal) {
+        case 0:
+          result = '合法';
+          break;
+        case 1:
+          result = '违法';
+          break;
+        case 2:
+          result = '其他';
+          break;
+      }
+    } else if (dataIndex == 'weifaleixing') {
+      // 违法类型
+      switch (record.weifaleixing) {
+        case 0:
+          result = '非农化违法用地';
+          break;
+        case 1:
+          result = '非粮化违法用地';
+          break;
+      }
+    } else if (dataIndex == 'measure_name') {
+      // 整改措施
+      switch (record.measure_name) {
+        case '0':
+          result = '拆除复耕';
+          break;
+        case '1':
+          result = '补办手续';
+          break;
+      }
+    } else if (dataIndex == 'actual_use_to') {
+      // 实际用途
+      if (record.is_illegal == 2) {
+        switch (record.qita_use_to) {
+          case '1':
+            result = '不改变原用地性质的光伏用地';
+            break;
+          case '2':
+            result = '设施农业用地';
+            break;
+          case '3':
+            result = '农村道路';
+            break;
+          case '4':
+            result = '实地未变化';
+            break;
+          case '5':
+            result = '临时用地';
+            break;
+        }
+      } else {
+        result = record.actual_use_to;
+      }
+    }
+    return result;
+  }
+</script>
+<style scoped>
+  .editable-row-operations a {
+    margin-right: 8px;
+  }
+
+  ::v-deep .ant-table {
+    height: calc(100vh - 230px) !important;
+    overflow-x: auto !important;
+  }
+</style>

src/views/demo/inspectionaudit/caseoffence/index.data.ts

@@ -0,0 +1,238 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+import dayjs from 'dayjs';
+
+// 无人机发现违法行为情况统计明细表-table
+export const columns: BasicColumn[] = [
+  {
+    title: 'countyid',
+    dataIndex: '县区id',
+    ifShow: false,
+  },
+  {
+    title: '县区',
+    dataIndex: 'countyname',
+    width: 100,
+    fixed: 'left',
+  },
+  {
+    title: '下发图斑',
+    children: [
+      {
+        title: '宗数',
+        dataIndex: 'xftbzs',
+        width: 90,
+      },
+      {
+        title: '面积',
+        dataIndex: 'xfmj',
+        width: 90,
+      },
+      {
+        title: '耕地面积',
+        dataIndex: 'xfgdmj',
+        width: 90,
+      },
+    ],
+  },
+  {
+    title: '合法',
+    children: [
+      {
+        title: '宗数',
+        dataIndex: 'hfzs',
+        width: 90,
+      },
+      {
+        title: '面积',
+        dataIndex: 'hfmj',
+        width: 90,
+      },
+      {
+        title: '耕地面积',
+        dataIndex: 'hfgdmj',
+        width: 90,
+      },
+    ],
+  },
+  {
+    title: '违法',
+    children: [
+      {
+        title: '小计',
+        children: [
+          {
+            title: '宗数',
+            dataIndex: 'wfzs',
+            width: 90,
+          },
+          {
+            title: '面积',
+            dataIndex: 'wfmj',
+            width: 90,
+          },
+          {
+            title: '耕地面积',
+            dataIndex: 'wfgdmj',
+            width: 90,
+          },
+        ],
+      },
+      {
+        title: '非农化',
+        children: [
+          {
+            title: '宗数',
+            dataIndex: 'fnhzs',
+            width: 90,
+          },
+          {
+            title: '面积',
+            dataIndex: 'fnhmj',
+            width: 90,
+          },
+          {
+            title: '耕地面积',
+            dataIndex: 'fnhgdmj',
+            width: 90,
+          },
+        ],
+      },
+      {
+        title: '非粮化',
+        children: [
+          {
+            title: '宗数',
+            dataIndex: 'flhzs',
+            width: 90,
+          },
+          {
+            title: '面积',
+            dataIndex: 'flhmj',
+            width: 90,
+          },
+          {
+            title: '耕地面积',
+            dataIndex: 'flhgdmj',
+            width: 90,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: '其他',
+    children: [
+      {
+        title: '宗数',
+        dataIndex: 'qtzs',
+        width: 90,
+      },
+      {
+        title: '面积',
+        dataIndex: 'qtmj',
+        width: 90,
+      },
+      {
+        title: '耕地面积',
+        dataIndex: 'qtgdmj',
+        width: 90,
+      },
+    ],
+  },
+  {
+    title: '整改情况',
+    children: [
+      {
+        title: '补办手续',
+        children: [
+          {
+            title: '宗数',
+            dataIndex: 'bbsxzs',
+            width: 90,
+          },
+          {
+            title: '面积',
+            dataIndex: 'bbsxmj',
+            width: 90,
+          },
+          {
+            title: '耕地面积',
+            dataIndex: 'bbsxgdmj',
+            width: 90,
+          },
+        ],
+      },
+      {
+        title: '拆除复耕',
+        children: [
+          {
+            title: '宗数',
+            dataIndex: 'cczs',
+            width: 90,
+          },
+          {
+            title: '面积',
+            dataIndex: 'ccmj',
+            width: 90,
+          },
+          {
+            title: '耕地面积',
+            dataIndex: 'ccgdmj',
+            width: 90,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: '新增违法占用耕地情况',
+    children: [
+      {
+        title: '核实后新增违法耕地',
+        children: [
+          {
+            title: '宗数',
+            dataIndex: 'hshxzwfgdzs',
+            width: 90,
+          },
+          {
+            title: '耕地面积',
+            dataIndex: 'hshxzwfgdgdmj',
+            width: 90,
+          },
+        ],
+      },
+      {
+        title: '整改后剩余违法耕地',
+        children: [
+          {
+            title: '宗数',
+            dataIndex: 'zghsywfgdzs',
+            width: 90,
+          },
+          {
+            title: '耕地面积',
+            dataIndex: 'zghsywfgdgdmj',
+            width: 90,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+// 无人机发现违法行为情况统计明细表-搜索
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: '[startTime, endTime]',
+    label: '日期范围',
+    component: 'RangePicker',
+    colProps: { span: 8 },
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      // picker: 'month',
+      placeholder: ['开始日期', '结束日期'],
+      defaultValue: [dayjs(dayjs().add(-1, 'day'), 'YYYY-MM-DD'), dayjs(dayjs().add(-1, 'day'), 'YYYY-MM-DD')]
+    },
+  },
+];

src/views/demo/inspectionaudit/caseoffence/index.vue

@@ -0,0 +1,534 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <!-- 县区 -->
+        <!-- <template v-if="column.key === 'countyname'">
+          <a @click="getOrgCaseList(column, record)">
+            {{ record.countyname }}
+          </a>
+        </template> -->
+
+        <!-- 下发图斑·宗数 -->
+        <template v-if="column.key === 'xftbzs'">
+          <a @click="handlePreViewData(column, record, 1)"> {{ record.xftbzs }} </a>
+        </template>
+        <!-- 下发图斑·面积 -->
+        <template v-if="column.key === 'xfmj'">
+          <!-- <a @click="handlePreViewData(column, record, 1)"> -->
+          {{ record.xfmj == 0 ? 0 : record.xfmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+        <!-- 下发图斑·耕地面积 -->
+        <template v-if="column.key === 'xfgdmj'">
+          <!-- <a @click="handlePreViewData(column, record, 1)"> -->
+          {{ record.xfgdmj == 0 ? 0 : record.xfgdmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+
+        <!-- 合法·宗数 -->
+        <template v-if="column.key === 'hfzs'">
+          <a @click="handlePreViewData(column, record, 2)"> {{ record.hfzs }} </a>
+        </template>
+        <!-- 合法·面积 -->
+        <template v-if="column.key === 'hfmj'">
+          <!-- <a @click="handlePreViewData(column, record, 2)"> -->
+          {{ record.hfmj == 0 ? 0 : record.hfmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+        <!-- 合法·耕地面积 -->
+        <template v-if="column.key === 'hfgdmj'">
+          <!-- <a @click="handlePreViewData(column, record, 2)"> -->
+          {{ record.hfgdmj == 0 ? 0 : record.hfgdmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+
+        <!-- 违法·小计·宗数 -->
+        <template v-if="column.key === 'wfzs'">
+          <a @click="handlePreViewData(column, record, 3)"> {{ record.wfzs }} </a>
+        </template>
+        <!-- 违法·小计·面积 -->
+        <template v-if="column.key === 'wfmj'">
+          <!-- <a @click="handlePreViewData(column, record, 3)"> -->
+          {{ record.wfmj == 0 ? 0 : record.wfmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+        <!-- 违法·小计·耕地面积 -->
+        <template v-if="column.key === 'wfgdmj'">
+          <!-- <a @click="handlePreViewData(column, record, 3)"> -->
+          {{ record.wfgdmj == 0 ? 0 : record.wfgdmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+
+        <!-- 违法·非农化·宗数 -->
+        <template v-if="column.key === 'fnhzs'">
+          <a @click="handlePreViewData(column, record, 10)"> {{ record.fnhzs }} </a>
+        </template>
+        <!-- 违法·非农化·面积 -->
+        <template v-if="column.key === 'fnhmj'">
+          <!-- <a @click="handlePreViewData(column, record, 10)"> -->
+          {{ record.fnhmj == 0 ? 0 : record.fnhmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+        <!-- 违法·非农化·耕地面积 -->
+        <template v-if="column.key === 'fnhgdmj'">
+          <!-- <a @click="handlePreViewData(column, record, 10)"> -->
+          {{ record.fnhgdmj == 0 ? 0 : record.fnhgdmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+
+        <!-- 违法·非粮化·宗数 -->
+        <template v-if="column.key === 'flhzs'">
+          <a @click="handlePreViewData(column, record, 5)"> {{ record.flhzs }} </a>
+        </template>
+        <!-- 违法·非粮化·面积 -->
+        <template v-if="column.key === 'flhmj'">
+          <!-- <a @click="handlePreViewData(column, record, 5)"> -->
+          {{ record.flhmj == 0 ? 0 : record.flhmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+        <!-- 违法·非粮化·耕地面积 -->
+        <template v-if="column.key === 'flhgdmj'">
+          <!-- <a @click="handlePreViewData(column, record, 5)"> -->
+          {{ record.flhgdmj == 0 ? 0 : record.flhgdmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+
+        <!-- 其他·宗数 -->
+        <template v-if="column.key === 'qtzs'">
+          <a @click="handlePreViewData(column, record, 4)"> {{ record.qtzs }} </a>
+        </template>
+        <!-- 其他·面积 -->
+        <template v-if="column.key === 'qtmj'">
+          <!-- <a @click="handlePreViewData(column, record, 4)"> -->
+          {{ record.qtmj == 0 ? 0 : record.qtmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+        <!-- 其他·耕地面积 -->
+        <template v-if="column.key === 'qtgdmj'">
+          <!-- <a @click="handlePreViewData(column, record, 4)"> -->
+          {{ record.qtgdmj == 0 ? 0 : record.qtgdmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+
+        <!-- 整改情况·补办手续·宗数 -->
+        <template v-if="column.key === 'bbsxzs'">
+          <a @click="handlePreViewData(column, record, 6)"> {{ record.bbsxzs }} </a>
+        </template>
+        <!-- 整改情况·补办手续·面积 -->
+        <template v-if="column.key === 'bbsxmj'">
+          <!-- <a @click="handlePreViewData(column, record, 6)"> -->
+          {{ record.bbsxmj == 0 ? 0 : record.bbsxmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+        <!-- 整改情况·补办手续·耕地面积 -->
+        <template v-if="column.key === 'bbsxgdmj'">
+          <!-- <a @click="handlePreViewData(column, record, 6)"> -->
+          {{ record.bbsxgdmj == 0 ? 0 : record.bbsxgdmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+        <!-- 整改情况·拆除复耕·宗数 -->
+        <template v-if="column.key === 'cczs'">
+          <a @click="handlePreViewData(column, record, 7)"> {{ record.cczs }} </a>
+        </template>
+        <!-- 整改情况·拆除复耕·面积 -->
+        <template v-if="column.key === 'ccmj'">
+          <!-- <a @click="handlePreViewData(column, record, 7)"> -->
+          {{ record.ccmj == 0 ? 0 : record.ccmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+        <!-- 整改情况·拆除复耕·耕地面积 -->
+        <template v-if="column.key === 'ccgdmj'">
+          <!-- <a @click="handlePreViewData(column, record, 7)"> -->
+          {{ record.ccgdmj == 0 ? 0 : record.ccgdmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+
+        <!-- 新增违法占用耕地情况·核实后新增违法耕地·宗数 -->
+        <template v-if="column.key === 'hshxzwfgdzs'">
+          <a @click="handlePreViewData(column, record, 8)"> {{ record.hshxzwfgdzs }} </a>
+        </template>
+        <!-- 新增违法占用耕地情况·核实后新增违法耕地·耕地面积 -->
+        <template v-if="column.key === 'hshxzwfgdgdmj'">
+          <!-- <a @click="handlePreViewData(column, record, 8)"> -->
+          {{ record.hshxzwfgdgdmj == 0 ? 0 : record.hshxzwfgdgdmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+        <!-- 新增违法占用耕地情况·整改后剩余违法耕地·宗数 -->
+        <template v-if="column.key === 'zghsywfgdzs'">
+          <a @click="handlePreViewData(column, record, 9)"> {{ record.zghsywfgdzs }} </a>
+        </template>
+        <!-- 新增违法占用耕地情况·整改后剩余违法耕地·耕地面积 -->
+        <template v-if="column.key === 'zghsywfgdgdmj'">
+          <!-- <a @click="handlePreViewData(column, record, 9)"> -->
+          {{ record.zghsywfgdgdmj == 0 ? 0 : record.zghsywfgdgdmj.toFixed(2) }}
+          <!-- </a> -->
+        </template>
+        <!-- 面积只取小数点后两位 -->
+        <!-- <template v-if="column.key.slice(-2) === 'mj' && record.countyname == '总计'">
+          {{ record[column.key].toFixed(2) }}
+        </template> -->
+      </template>
+    </BasicTable>
+
+    <a-modal v-model:open="open_mingxi" title="导出表格种类" :footer="null">
+      <div>
+        <a-button class="exportbutton" @click="handleExport('mingxi_1')">
+          无人机全域巡查图斑情况统计表
+        </a-button>
+        <a-button class="exportbutton" @click="handleExport('mingxi_2')">
+          土地卫片新增违法占用耕地情况统计表
+        </a-button>
+        <a-button class="exportbutton" @click="handleExport('mingxi_3')">
+          无人机全域巡查违法用地情况统计表
+        </a-button>
+      </div>
+    </a-modal>
+    <a-modal v-model:open="open_chuantou" title="导出文件类型" :footer="null">
+      <div>
+        <a-button class="exportbutton" @click="handleExport('chuantou_execl')">
+          统计明细图斑信息（execl）
+        </a-button>
+        <a-button class="exportbutton" @click="handleExport('chuantou_shp')">
+          统计明细矢量数据（shp）
+        </a-button>
+      </div>
+    </a-modal>
+    <a-modal
+      v-model:open="showRecordList"
+      width="1710px"
+      :closable="false"
+      :footer="null"
+      @ok="handleOk"
+    >
+      <div>
+        <CloseOutlined id="closeIconButton" @click="handleCloseAllRecordList" />
+        <MinusOutlined id="closeIconButton" @click="handleCloseRecordList" />
+        <CloudDownloadOutlined id="closeIconButton" @click="exportList" />
+      </div>
+      <template #footer>
+        <a-button type="primary" @click="exportList">
+          <template #icon>
+            <CloudDownloadOutlined />
+          </template>
+          导出
+        </a-button>
+      </template>
+      <a-tabs
+        v-model:activeKey="activeKey"
+        hide-add
+        type="editable-card"
+        @edit="onEdit"
+        @change="handleTabChange"
+      >
+        <a-tab-pane
+          v-for="(pane, index) in tablist"
+          :key="index.toString()"
+          :tab="pane.countyname + '-' + pane.label"
+          :closable="pane.closable"
+        />
+      </a-tabs>
+      <RecordList :tablist="tablist" :currentListQuery="currentListQuery.listQuery" />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, reactive, watch, createVNode, unref } from 'vue';
+  import { useModal } from '@/components/Modal';
+  import { BasicTable, useTable } from '@/components/Table';
+  import { PermissionBtn } from '@/components/PermissionBtn/index';
+  import { PageWrapper } from '@/components/Page';
+  import { cloneDeep } from 'lodash-es';
+  import { getCaseOffence } from '@/api/inspectionaudit';
+  import { columns, searchFormSchema } from './index.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { RecordList } from './page';
+  import { MinusOutlined, CloseOutlined, CloudDownloadOutlined } from '@ant-design/icons-vue';
+  import { getAppEnvConfig } from '@/utils/env';
+  import axios from 'axios';
+  import dayjs from 'dayjs';
+
+  const { createMessage } = useMessage();
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+
+  // 页面表格
+  const searchParams = ref();
+  const [registerTable] = useTable({
+    api: getCaseOffence,
+    columns: columns,
+    title: '无人机全域巡查图斑情况统计表',
+    titleHelpMessage: '合法、其他、非粮化、补办手续、拆除复耕均需市级审核通过才可判定为举证类型。',
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    showIndexColumn: false,
+    striped: false,
+    bordered: true,
+    canResize: false,
+    useSearchForm: true,
+    showTableSetting: true,
+    pagination: false,
+    beforeFetch: (data) => {
+      // 接口请求前 参数处理
+      // 默认展示昨天的
+      var temp = {
+        startTime: data.startTime
+          ? dayjs(data.startTime).startOf('day').format('YYYY-MM-DD')
+          : dayjs().startOf('day').add(-1, 'day').format('YYYY-MM-DD'),
+        endTime: data.endTime
+          ? dayjs(data.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+          : dayjs().endOf('day').add(-1, 'day').format('YYYY-MM-DD HH:mm:ss'),
+      };
+      searchParams.value = temp;
+      return temp;
+    },
+    afterFetch: (res) => {},
+  });
+
+  const showRecordList = ref<boolean>(false);
+
+  // 标签页面数据
+  let activeKey = ref('0');
+  const tablist = reactive<
+    { countyname: string; label: string; listQuery: searchListSchema; closable?: boolean }[]
+  >([]);
+  let currentListQuery = reactive({ listQuery: {} });
+  // 查询条件
+  interface searchListSchema {
+    AreaId?: string;
+    CaseType?: number;
+    startTime?: string;
+    endTime?: string;
+    page?: number;
+    limit?: number;
+  }
+  // 打开标签页面
+  function handlePreViewData(column, record: Recordable, CaseType: number) {
+    const searchForm = reactive<searchListSchema>({
+      AreaId: record.countyid,
+      CaseType: CaseType,
+      startTime: dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD'),
+      endTime: dayjs(searchParams.value?.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
+      page: 1,
+      limit: 10,
+    });
+    // 标签页面信息
+    let tabItem: any = {
+      countyname: record.countyname,
+      label: '',
+      listQuery: searchForm,
+    };
+    switch (CaseType) {
+      case 1:
+        tabItem.label = '下发图斑';
+        break;
+      case 2:
+        tabItem.label = '合法';
+        break;
+      case 3:
+        tabItem.label = '违法·小计';
+        break;
+      case 4:
+        tabItem.label = '其他';
+        break;
+      case 5:
+        tabItem.label = '违法·非粮化';
+        break;
+      case 6:
+        tabItem.label = '整改情况·补办手续';
+        break;
+      case 7:
+        tabItem.label = '整改情况·拆除复耕';
+        break;
+      case 8:
+        tabItem.label = '核实后新增违法耕地';
+        break;
+      case 9:
+        tabItem.label = '整改后剩余违法耕地';
+        break;
+      case 10:
+        tabItem.label = '违法·非农化';
+        break;
+      default:
+        break;
+    }
+    tablist.push(tabItem);
+    // 当前标签页面
+    activeKey.value = tablist.length > 1 ? (tablist.length - 1).toString() : '0';
+    // 打开标签页面
+    showRecordList.value = true;
+    // 标签页面的搜索条件
+    currentListQuery.listQuery = searchForm;
+  }
+  // 编辑标签页
+  function onEdit(targetKey: string) {
+    tablist.splice(parseInt(targetKey), 1);
+    if (tablist.length == 0) {
+      showRecordList.value = false;
+    }
+    if (parseInt(targetKey) > 1) {
+      activeKey.value = (parseInt(targetKey) - 1).toString();
+    } else {
+      activeKey.value = '0';
+    }
+    currentListQuery.listQuery = tablist[activeKey.value].listQuery;
+  }
+  // 修改标签页
+  function handleTabChange(e) {
+    currentListQuery.listQuery = tablist[e].listQuery;
+  }
+  // 穿透显示的明细表缩小
+  function handleCloseRecordList() {
+    showRecordList.value = false;
+  }
+  // 穿透显示的明细表关闭
+  function handleCloseAllRecordList() {
+    for (let i = 0; i < tablist.length; i++) {
+      tablist.pop();
+    }
+    showRecordList.value = false;
+  }
+  // 穿透显示的明细表导出
+  function exportList() {
+    open_chuantou.value = true;
+  }
+
+  // 导出种类
+  const open_mingxi = ref<boolean>(false);
+  const open_chuantou = ref<boolean>(false);
+
+  // 直接下载接口返回的二进制流
+  function handleExport(exportType) {
+    let url = '';
+    let fileName = '';
+    let params: any = {};
+    let afterTitle = '';
+    if (
+      dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD') ===
+      dayjs(searchParams.value?.endTime).endOf('day').format('YYYY-MM-DD')
+    ) {
+      afterTitle = dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD');
+    } else {
+      afterTitle =
+        dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD') +
+        '至' +
+        dayjs(searchParams.value?.endTime).endOf('day').format('YYYY-MM-DD');
+    }
+    switch (exportType) {
+      case 'chuantou_execl':
+        // 穿透-导出图斑明细execl
+        url = VITE_GLOB_API_URL + '/api/DroneCaseInfoXcsj/ExprotCaseListByType';
+        fileName =
+          '统计明细图斑信息 ' +
+          tablist[activeKey.value].countyname +
+          '-' +
+          tablist[activeKey.value].label +
+          ' ' +
+          afterTitle +
+          '.xls';
+        break;
+      case 'chuantou_shp':
+        // 穿透-导出图斑明细shp
+        url = VITE_GLOB_API_URL + '/api/DroneCaseInfoXcsj/ExportShapefile';
+        fileName =
+          '统计明细矢量数据 ' +
+          tablist[activeKey.value].countyname +
+          '-' +
+          tablist[activeKey.value].label +
+          ' ' +
+          afterTitle +
+          '.zip';
+        break;
+      case 'mingxi_1':
+        // 无人机全域巡查图斑情况统计表
+        url = VITE_GLOB_API_URL + '/api/DroneCaseInfoXcsj/CaseOffenceToExcel';
+        fileName = '无人机全域巡查图斑情况统计表 ' + afterTitle + '.xls';
+        break;
+      case 'mingxi_2':
+        // 土地卫片新增违法占用耕地情况统计表
+        url = VITE_GLOB_API_URL + '/api/DroneCaseInfoXcsj/CaseOffenceSimpleToExcel';
+        fileName = '土地卫片新增违法占用耕地情况统计表 ' + afterTitle + '.xls';
+        break;
+      case 'mingxi_3':
+        // 无人机全域巡查违法用地情况统计表
+        url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/CaseOffenceSimpleToExcel2';
+        fileName = '无人机全域巡查违法用地情况统计表 ' + afterTitle + '.xls';
+        break;
+      default:
+        break;
+    }
+
+    if (['chuantou_execl', 'chuantou_shp'].includes(exportType)) {
+      params = currentListQuery.listQuery;
+      delete params.limit;
+      delete params.page;
+    }
+    if (['mingxi_1', 'mingxi_2', 'mingxi_3'].includes(exportType)) {
+      params = {
+        startTime: dayjs(searchParams.value?.startTime).startOf('day').format('YYYY-MM-DD'),
+        endTime: dayjs(searchParams.value?.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
+      };
+    }
+
+    axios({
+      method: 'post',
+      url: url,
+      params: params,
+      headers: {
+        'X-Token': localStorage.getItem('X-Token'),
+      },
+      responseType: 'blob',
+    }).then((res) => {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(res.data);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    });
+  }
+  // 按键分类
+  const buttonClick = async (type) => {
+    switch (type) {
+      case 'btnExport':
+        open_mingxi.value = true;
+        break;
+      default:
+        break;
+    }
+  };
+</script>
+<style lang="less" scoped>
+  #closeIconButton {
+    width: 40px;
+    height: 50px;
+    line-height: 50px;
+    float: right;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .exportbutton {
+    width: 510px;
+    height: 60px;
+    margin: 5px;
+  }
+
+  ::v-deep .ant-table-container table {
+    line-height: 1.1 !important;
+
+    .ant-table-row {
+      td {
+        padding-top: 8px !important;
+        padding-bottom: 8px !important;
+      }
+    }
+  }
+</style>

src/views/demo/inspectionaudit/caseoffence/page.ts

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

src/views/demo/inspectionaudit/changearea/AuditProgress/index.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="screen-div">
+    <div class="screen-row">
+      <div class="screen-item">
+        <div class="screen-item-label">年份</div>
+        <a-select
+          allowClear
+          style="flex: 1"
+          v-model:value="props.year"
+          :options="yearOptions"
+          @change="
+            (value) => {
+              emits('auditProgressScreenChange', value, 'year');
+            }
+          "
+        />
+      </div>
+      <div class="screen-item">
+        <div class="screen-item-label">批次</div>
+        <a-select
+          allowClear
+          style="flex: 1"
+          v-model:value="props.batch"
+          :options="batchOptions"
+          @change="
+            (value) => {
+              emits('auditProgressScreenChange', value, 'batch');
+            }
+          "
+        />
+      </div>
+    </div>
+  </div>
+  <div class="data-list">
+    <!-- <div class="data-title">审核进度</div> -->
+    <div class="show-data-list-content">
+      <div
+        class="data-item"
+        v-for="(item, index) in dataList"
+        :key="index"
+        @click="emits('showInfo', true, item)"
+        v-if="dataList.length > 0"
+      >
+      <div class="name-div">
+          <div class="item-mark"></div>
+          <div class="item-label">{{ item.areaname }}</div>
+          <div class="progress-div">
+            <div class="progress-label progress-color">进度</div>
+            <div class="progress-data" style="width:97px">
+              <span style="color: #086DEC;">{{item.verificatedtask}}</span>/{{item.totaltask}}
+            </div>
+          </div>
+          <div class="progress-div">
+            <div class="progress-label extended-color">超期</div>
+            <div class="progress-data" style="width:50px">
+              <span style="color: #D03542">{{item.overduetask}}</span>
+            </div>
+          </div>
+          <div class="progress-div">
+            <div class="progress-label reviewed-color" style="width:70px;">待审核</div>
+            <div class="progress-data" style="width:50px">
+              <span style="color: #EC7908;">{{item.verifytask}}</span>
+            </div>
+          </div>
+        </div>
+        <div class="info-data-div">
+          <div class="info-data-item">
+            <div class="info-data-label">合法</div>
+            <div class="info-data-data">{{item.legalcase}}</div>
+          </div>
+          <div class="info-data-item">
+            <div class="info-data-label">其他</div>
+            <div class="info-data-data">{{item.ilegalcase}}</div>
+          </div>
+          <div class="info-data-item">
+            <div class="info-data-label">非粮化</div>
+            <div class="info-data-data">{{item.nonfoodcase}}</div>
+          </div>
+          <div class="info-data-item">
+            <div class="info-data-label">复耕</div>
+            <div class="info-data-data">{{item.rehabilitationcase}}</div>
+          </div>
+          <div class="info-data-item">
+            <div class="info-data-label">补手续</div>
+            <div class="info-data-data">{{item.makeupcase}}</div>
+          </div>
+        </div>
+      </div>
+      <div v-else class="no-data">
+        <a-empty :image="simpleImage" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, defineProps, defineEmits, toRefs } from 'vue';
+  import { batchOptions, yearOptions,patchSourceOptions } from '@/utils/global';
+  import { Empty } from 'ant-design-vue';
+
+  const props = defineProps(['year', 'batch', 'dataList','patchSource']);
+  const emits = defineEmits(['auditProgressScreenChange', 'showInfo']);
+  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+</script>
+
+<style lang="less" scoped>
+  .screen-div {
+    background: @component-background;
+    padding: 10px;
+    .screen-row {
+      display: flex;
+      .screen-item {
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        font-size: 17px;
+        color: #000000;
+        width: 50%;
+        display: flex;
+        .screen-item-label {
+          width: 56px;
+          padding-left: 10px;
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+  .data-list {
+    height: calc(100% - 62px);
+    // background: darkgoldenrod;
+    // background: @component-background;
+    margin-top: 10px;
+    padding: 0px 10px;
+    .data-title {
+      height: 40px;
+      background: #bab9b7;
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      color: #366198;
+    }
+    .show-data-list-content {
+      .data-item {
+        cursor: pointer;
+        width: 100%;
+        background: #fff;
+        border-radius: 11px;
+        padding: 10px;
+        margin-bottom: 10px;
+        .name-div {
+        display: flex;
+        display: flex;
+        height: 50px;
+          display: flex;
+        height: 50px;
+          align-items: center;
+          padding: 10px 0px;
+          border-bottom: 1px solid #E5E5E5;
+        }
+        .info-data-div{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-top: 10px;
+          .info-data-item{
+            display: flex;
+            align-items: center;
+            flex: 1;
+            justify-content: center;
+            border-right: 1px solid #EDEDED;
+            .info-data-label{
+              font-family: Alibaba PuHuiTi;
+              font-weight: 400;
+              font-size: 16px;
+              color: #959494;
+              display: flex;
+              justify-content: end;
+              flex: 1;
+              padding-right: 5px;
+            }
+            .info-data-data{
+              font-family: HarmonyOS Sans;
+              font-weight: 500;
+              font-size: 16px;
+              color: #000000;
+              line-height: 30px;
+              flex: 1;
+              display: flex;
+              justify-content: start;
+              padding-left: 5px;
+            }
+          }
+          .info-data-item:nth-last-child(1){
+            border-right: 0px;
+          }
+        }
+        .data-div {
+          font-weight: 500;
+          margin-right: 5px;
+        }
+        .item-mark {
+          width: 5px;
+          height: 5px;
+          background: #086dec;
+          margin-left: 7px;
+          margin-right: 7px;
+        }
+        .item-label {
+          width: 100px;
+          font-size: 16px;
+          font-weight: 600;
+          margin-left: 5px;
+        }
+        .progress-div{
+          display:flex;
+          font-weight: 500;
+          font-size: 16px;
+          line-height: 30px;
+          margin-right: 17px;
+          .progress-label{
+            font-family: Alibaba PuHuiTi;
+            color: #FFFFFF;
+            width: 50px;
+            height: 27px;
+            border-radius: 13px 0px 0px 13px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .progress-data{
+            background: #EFEFEF;
+            height: 27px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 0px 0px 11px 0px;
+          }
+          .progress-color{
+            background: #086DEC;
+          }
+          .extended-color{
+            background: #D03542
+          }
+          .reviewed-color{
+            background: #EC7908
+          }
+        }
+      }
+      .data-item:hover {
+        background-color: rgba(8, 109, 236, 0.08);
+      }
+      // .data-item:nth-child(2n) {
+      //   background: #ececec;
+      // }
+    }
+  }
+  .no-data {
+    padding: 20px 0;
+  }
+</style>

src/views/demo/inspectionaudit/changearea/MapList/amend.vue

@@ -0,0 +1,239 @@
+<template>
+  <div>
+    <a-modal
+      v-model:open="props.modalShow"
+      title="图斑调整"
+      @ok="handleSubmit"
+      @cancel="handlerCloseModal"
+    >
+      <a-form
+        ref="formRef"
+        :model="formState"
+        :rules="rules"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+      >
+        <a-form-item label="图斑编号" name="case_no">
+          <a-input v-model:value="formState.case_no" disabled />
+        </a-form-item>
+        <a-form-item label="图斑描述" name="case_description">
+          <a-input v-model:value="formState.case_description" disabled />
+        </a-form-item>
+        <a-form-item label="县区" name="countyid">
+          <a-select
+            v-model:value="formState.countyid"
+            placeholder="请选择"
+            :options="data.countyOptions"
+            @change="handleCountyChange"
+            :field-names="{ label: 'name', value: 'id' }"
+          />
+        </a-form-item>
+        <a-form-item label="乡镇" name="streetid">
+          <a-select
+            v-model:value="formState.streetid"
+            :options="data.streetOptions"
+            :field-names="{ label: 'name', value: 'id' }"
+            @change="handleStreetChange"
+          />
+        </a-form-item>
+        <a-form-item label="村/社区" name="communityid">
+          <a-select
+            v-model:value="formState.communityid"
+            :options="data.communityOptions"
+            :field-names="{ label: 'name', value: 'id' }"
+            @change="handleCommunityChange"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <a-modal
+      v-if="false"
+      v-bind="$attrs"
+      @register="registerModal"
+      title="飞地调整"
+      @ok="handleSubmit"
+    >
+      <a-form
+        ref="formRef"
+        :model="formState"
+        :rules="rules"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+      >
+        <a-form-item label="图斑编号" name="case_no">
+          <a-input v-model:value="formState.case_no" disabled />
+        </a-form-item>
+        <a-form-item label="图斑描述" name="case_description">
+          <a-input v-model:value="formState.case_description" disabled />
+        </a-form-item>
+        <a-form-item label="县区" name="countyid">
+          <a-select
+            v-model:value="formState.countyid"
+            placeholder="请选择"
+            :options="data.countyOptions"
+            @change="handleCountyChange"
+            :field-names="{ label: 'name', value: 'id' }"
+          />
+        </a-form-item>
+        <a-form-item label="乡镇" name="streetid">
+          <a-select
+            v-model:value="formState.streetid"
+            :options="data.streetOptions"
+            :field-names="{ label: 'name', value: 'id' }"
+            @change="handleStreetChange"
+          />
+        </a-form-item>
+        <a-form-item label="村/社区" name="communityid">
+          <a-select
+            v-model:value="formState.communityid"
+            :options="data.communityOptions"
+            :field-names="{ label: 'name', value: 'id' }"
+            @change="handleCommunityChange"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, defineProps, watch } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { updateDroneCaseInfo, getCaseInfoById } from '@/api/inspectionaudit/index.ts';
+  import { getChildrenTree } from '@/api/demo/system.ts';
+  const { createMessage } = useMessage();
+  defineOptions({ name: 'AccountModal' });
+  const formRef = ref();
+  const emit = defineEmits(['success', 'register', 'closeModel']);
+
+  const props = defineProps({
+    modalShow: {
+      type: Boolean,
+      default: false,
+      readonly: false,
+    },
+    record: String,
+  });
+
+  getDetail(props.record);
+  const labelCol = { span: 4 };
+  const wrapperCol = { span: 14 };
+  const formState: any = ref({});
+  const rules = ref({
+    countyid: [{ required: true, message: '县区不能为空', trigger: 'blur' }],
+    streetid: [{ required: true, message: '乡镇不能为空', trigger: 'blur' }],
+    communityid: [{ required: true, message: '村/社区不能为空', trigger: 'blur' }],
+  });
+  const data = reactive({
+    countyOptions: [],
+    streetOptions: [],
+    communityOptions: [],
+  });
+
+  watch(
+    () => props.modalShow,
+    () => {
+      if (props.modalShow) {
+        getDetail(props.record);
+      }
+    },
+  );
+  watch(
+    () => props.record,
+    (newVal, oldVal) => {},
+  );
+  async function getDetail(id) {
+    const data = await getCaseInfoById({
+      id: id,
+    });
+    formState.value = data;
+    getParent();
+  }
+  async function handleCountyChange(value, option) {
+    formState.value.countyid = value;
+    formState.value.countyname = option.name;
+    getOptions(value).then((res) => {
+      data.streetOptions = res;
+    });
+    formState.value.streetid = '';
+    formState.value.communityid = '';
+  }
+  async function handleStreetChange(value, option) {
+    formState.value.streetid = value;
+    formState.value.streetname = option.name;
+    getOptions(value).then((res) => {
+      data.communityOptions = res;
+    });
+    formState.value.communityid = '';
+  }
+  async function handleCommunityChange(value, option) {
+    formState.value.communityid = value;
+    formState.value.communityname = option.name;
+  }
+  async function getOptions(value) {
+    const data = await getChildrenTree({
+      parentId: value,
+    });
+    data.forEach((item) => {
+      item.id = item.id.toString();
+    });
+    return data;
+  }
+  async function getParent() {
+    const list = await getChildrenTree({
+      parentId: 0,
+    });
+    // 获取县级数据
+    getOptions(list[0].id).then((res) => {
+      data.countyOptions = res;
+    });
+    // 获取乡镇数据
+    getOptions(formState.value.countyid).then((res) => {
+      data.streetOptions = res;
+    });
+    // 获取村/社区数据
+    getOptions(formState.value.streetid).then((res) => {
+      data.communityOptions = res;
+    });
+  }
+
+  function handlerCloseModal() {
+    emit('closeModel');
+  }
+  async function handleSubmit() {
+    try {
+      formRef.value
+        .validate()
+        .then(async () => {
+          var querys = {
+            id: formState.value.id,
+            countyid: formState.value.countyid,
+            countyname: formState.value.countyname,
+            streetid: formState.value.streetid,
+            streetname: formState.value.streetname,
+            communityid: formState.value.communityid,
+            communityname: formState.value.communityname,
+          };
+          console.log(querys);
+          const data = await updateDroneCaseInfo(querys);
+          console.log(data);
+          if (data) {
+            // closeModal();
+            emit('closeModel');
+            emit('success');
+            return createMessage.success(data);
+          } else {
+            return createMessage.error(data);
+          }
+        })
+        .catch((error: ValidateErrorEntity<FormState>) => {
+          console.log('error', error);
+        });
+    } finally {
+    }
+  }
+  onMounted(() => {
+    getParent();
+  });
+</script>

src/views/demo/inspectionaudit/changearea/MapList/index.vue

@@ -0,0 +1,967 @@
+<template>
+  <div class="content">
+    <div class="screen-div">
+      <div class="screen-item" style="margin-right: 20px; margin-bottom: 12px">
+        <div class="screen-item-label">年份</div>
+        <a-select
+          allowClear
+          style="width: 130px"
+          v-model:value="infoScreenData.year"
+          :options="yearOptions"
+          @change="(value) => mapListScreenChange(value, 'year')"
+        />
+      </div>
+      <div class="screen-item" style="margin-right: 17px; margin-bottom: 12px">
+        <div class="screen-item-label" style="margin-right: 11px">图斑来源</div>
+        <a-select
+          allowClear
+          style="width: 130px"
+          v-model:value="infoScreenData.tubanlaiyuan"
+          :options="patchSourceOptions"
+          @change="(value) => mapListScreenChange(value, 'tubanlaiyuan')"
+        />
+      </div>
+      <div class="screen-item">
+        <div class="screen-item-label">批次</div>
+        <a-select
+          allowClear
+          style="width: 103px"
+          v-model:value="infoScreenData.picihao"
+          :options="batchOptions"
+          @change="(value) => mapListScreenChange(value, 'batch')"
+        />
+      </div>
+      
+      <div class="screen-item" style="margin-right: 56px;margin-bottom: 12px">
+        <div class="screen-item-label">县区</div>
+        <a-select
+          allowClear
+          style="width:130px;"
+          v-model:value="infoScreenData.countyid"
+          :options="countyOptions"
+          :field-names="{ label: 'name', value: 'id' }"
+          @change="changeCounty"
+        />
+      </div>
+      <div class="screen-item" style="margin-right: 13px;margin-bottom: 12px">
+        <div class="screen-item-label">乡镇</div>
+        <a-select
+          allowClear
+          style="width:130px;"
+          v-model:value="infoScreenData.streetid"
+          :options="streetsAreaOptions"
+          :field-names="{ label: 'name', value: 'id' }"
+          @change="(value) => mapListScreenChange(value, 'streetid')"
+        />
+      </div>
+      <div class="screen-item" style="margin-bottom: 12px;width:240px">
+        <a-input
+          allowClear
+          placeholder="请输入图斑编号"
+          class="item-input"
+          v-model:value="infoScreenData.caseNo"
+          @change="(value) => mapListScreenChange(value.target.value, 'caseNo')"
+          @press-enter="querysBtn"
+        />
+      </div>
+      <div class="screen-item" style="flex: 1;justify-content: flex-end;">
+        <a-button class="item-button" style="background: #2B75E1;" type="primary" :icon="h(SearchOutlined)" @click="querysBtn"
+          >查询</a-button>
+          <a-button class="item-button img" type="primary" @click="changeArea">
+            <img src="@/assets/images/tiankongdi/tiaozheng.png" class="img-box small" />
+            调整
+          </a-button>
+        <a-dropdown>
+          <template #overlay>
+            <a-menu @click="handleOperateClick">
+              <a-menu-item key="1">图斑分割</a-menu-item>
+              <a-menu-item key="2">分割还原</a-menu-item>
+              <!-- <a-menu-item key="3">分宗示意图</a-menu-item> -->
+            </a-menu>
+          </template>
+          <a-button type="primary" class="item-button img" style="background: #0CBD62">
+            <img src="@/assets/images/tiankongdi/fenge.png" class="img-box small" style="width:16px;"/>
+            分割
+            <!-- <DownOutlined /> -->
+          </a-button>
+        </a-dropdown>
+        <Icon
+          style="font-size: 25px; margin-left: 14px;cursor: pointer;"
+          icon="streamline:interface-time-reset-time-clock-reset-stopwatch-circle-measure-loading"
+          @click="resetScreenData"
+        />
+      </div>
+    </div>
+    <div class="sift-div">
+      <div class="layout-div">
+        <div class="sift-item" @click="dataListSort('area')">
+          <div class="sift-label">总面积</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('area',1)? 'color: #086DEC;' : ''}`">&#9650</div>
+            <div :style="`${showSortMark('area',2)? 'color: #086DEC;' : ''}`">&#9660</div>
+          </div>
+        </div>
+        <div class="sift-item"  @click="dataListSort('gengdi_area')">
+          <div class="sift-label">耕地面积</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('gengdi_area',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('gengdi_area',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+        <div class="sift-item"  @click="dataListSort('synchronoustime')">
+          <div class="sift-label">下发时间</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('synchronoustime',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('synchronoustime',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+      </div>
+      <div class="collect-div">
+        <a-popover placement="bottom">
+          <template #content>
+            <div style="display:flex;">
+              <div>当前状态：</div>
+              <div>
+                <a-checkbox-group 
+                  @change="(value) => mapListScreenChange(value,'mapStatus')"
+                  style="width: 100%" 
+                  v-model:value="infoScreenData.mapStatus"
+                  :options="mapStatusOptions" />
+                </div>
+            </div>
+            <div style="display:flex;align-items: center;">
+              <div>图斑面积：</div>
+              <div style="display:flex;">
+                <a-input style="width:30%;" 
+                  v-model:value="infoScreenData.tubanArea1"
+                  @change="(e) => mapListScreenChange(e.target.value,'tubanArea1')"
+                  />
+                <span>---</span>
+                <a-input  style="width:30%;margin-right: 4px;"
+                  v-model:value="infoScreenData.tubanArea2"
+                  @change="(e) => mapListScreenChange(e.target.value,'tubanArea2')"
+                  />
+                  亩
+              </div>
+            </div>
+            <div style="display:flex;margin-top: 4px;">
+              <div>耕地面积：</div>
+              <div style="display:flex;align-items: center;">
+                <a-input style="width:30%;"
+                  v-model:value="infoScreenData.gengdiArea1"
+                  @change="(e) => mapListScreenChange(e.target.value,'gengdiArea1')"
+                  />
+                <span>---</span>
+                <a-input  style="width:30%;margin-right: 4px;"
+                  v-model:value="infoScreenData.gengdiArea2"
+                  @change="(e) => mapListScreenChange(e.target.value,'gengdiArea2')"
+                  />
+                  亩
+              </div>
+            </div>
+          </template>
+          <img src="@/assets/images/tiankongdi/filt.png" class="img-box mr-r-20" />
+        </a-popover>
+        <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"  @click="getCollectList" v-if="openCollect"/>
+        <img src="@/assets/images/tiankongdi/collect.png" class="img-box"  @click="getCollectList" v-else/>
+      </div>
+    </div>
+    <div class="data-list-div" style="padding-top: 1px;">
+      <div v-for="(item, index) in infoDataList" :key="index" @click="selectAreaId(item)" :class="classFun(item)">
+        <div class="data-list-layout-div">
+          <div class="data-list-title-div">
+            <img
+              src="/positioning.png"
+              class="map-mark"
+              style="cursor: pointer"
+              @click="locationFun(item)"
+            />
+            <div class="label-div" @click="selectAreaId(item)">
+              <div class="item-label">{{ item.countyname }}</div>
+              <div class="item-sub-label">
+                <span style="margin-right: 12px">{{ item.streetname }}</span>
+                <span>{{ item.caseno }}</span>
+              </div>
+            </div>
+            <div class="item-mark" v-if="item.isbuildname">{{ item.isbuildname }}</div>
+          </div>
+          <div class="data-item-type-div" >
+            {{ item.unitname }}
+          </div>
+        </div>
+        <div class="data-list-info-div">
+          <div class="info-layout-div" @click="selectAreaId(item)">
+            <div class="info-item" style="width: 130px;">
+              <div class="info-label">总面积</div>
+              <div class="info-data" :title="dataProcessing(item.area)">{{dataProcessing(item.area)}}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">农用地</div>
+              <div class="info-data" :title="dataProcessing(item.nongyongdiarea)">{{dataProcessing(item.nongyongdiarea)}}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">耕地</div>
+              <div class="info-data" :title="dataProcessing(item.gengdiarea)">{{dataProcessing(item.gengdiarea)}}</div>
+            </div>
+            <div class="info-item" style="width: 120px;">
+              <div class="info-label">永农面积</div>
+              <div class="info-data" :title="dataProcessing(item.yongjiujibennongtianarea)">{{dataProcessing(item.yongjiujibennongtianarea)}}</div>
+            </div>
+          
+          </div>
+          <div class="info-layout-div">
+            <div>
+              <!-- <Icon
+                title="飞地调整"
+                style="font-size: 30px; cursor: pointer"
+                icon="ant-design:send-outlined"
+                @click="changeArea(item)"
+              /> -->
+              <!-- <Icon
+                title="详情"
+                style="font-size: 30px; cursor: pointer"
+                icon="bx:detail"
+                @click="showInfo(item)"
+              /> -->
+              <!-- <Icon
+                title="图斑分宗"
+                style="font-size: 30px; cursor: pointer"
+                icon="ant-design:split-cells-outlined"
+                @click="handlerSplitPolygon(item)"
+              /> -->
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div  class="no-data" v-if="infoDataList.length == 0">
+        <a-empty :image="simpleImage" />
+      </div>
+    </div>
+    <div class="pagination-div">
+      <a-pagination
+        size="small"
+        v-model:pageSize="pageSize"
+        v-model:current="pageNo"
+        :total="total"
+        :show-total="total => `共 ${total} 条数据`"
+        show-size-changer
+        show-quick-jumper
+        @change="changePage"
+      />
+    </div>
+    <!-- 飞地调整 -->
+    <Amend @success="handleSuccess" v-if="modalShow" :modalShow="modalShow" :record="modalRecord" @closeModel="closeModal"/>
+    <!-- 详情 -->
+    <a-modal
+      style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
+      wrap-class-name="full-modal"
+      v-model:open="showInfoOpen"
+      title="详情"
+      :footer="null"
+      :maskClosable="true"
+      :destroyOnClose="true"
+      @cancel="showInfoOpen = false"
+      >
+      <div class="modal-content">
+        <ShowInfoModal :showInfoData="showInfoData" />
+      </div>
+    </a-modal>
+
+    <a-modal
+      width="100%"
+      wrap-class-name="full-modal"
+      v-model:open="auditOpen"
+      title="审核"
+      footer=""
+      :destroyOnClose="true"
+    >
+      <template #footer> </template>
+      <div class="handoff">
+        <a-button
+          type="primary" 
+          style="margin-right: 25px;"
+          @click="prevData"
+        >上一条</a-button>
+        <a-button
+          type="primary"
+          @click="nextData"
+        >下一条</a-button>
+      </div>
+      <Audit
+        v-if="handoffShow"
+        ref="posRef"
+        :processId="processId"
+        :taskId="taskId"
+        :isRead="isRead"
+        :type="type"
+        @closeModel="closeMolder"
+      />
+    </a-modal>
+
+
+    <a-modal
+      style="width:100vw;top:0px;left:0px;margin:0px;padding:0px;"
+      wrap-class-name="full-modal"
+      v-model:open="showSplitPolygon"
+      title="图斑分综"
+      :footer="null"
+      :maskClosable="true"
+      :destroyOnClose="true"
+      @cancel="showSplitPolygon = false"
+    >
+      <div class="modal-content" > 
+        <SplitPolygonModal  :showInfoData="showInfoData"  @closeModal="handlerSplitComplete"/>
+      </div>
+    </a-modal>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineEmits, computed, h } from 'vue';
+import { SearchOutlined, DownOutlined, SendOutlined } from '@ant-design/icons-vue';
+import Icon from '@/components/Icon/Icon.vue';
+import { getLoadDroneCaseInfoDetail, getCaseInfoById, getLoadStreet } from '@/api/inspectionaudit/index';
+import {
+  batchOptions,
+  yearOptions,
+  patchSourceOptions,
+} from '@/utils/global';
+import Amend from './amend.vue';
+import { Empty, message,Modal } from 'ant-design-vue';
+import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
+import SplitPolygonModal from '@/views/demo/tiankongdi/curbspotcity/MapList/SplitPolygonModal/index.vue';
+import {recoverCase} from '@/api/inspectionaudit'
+import { flowStore } from '@/store/modules/flow';
+import { getDetail } from '@/api/sys/WFSchemeInfo';
+import { Audit } from '@/views/demo/workflow/task/process/page';
+import { dataProcessing } from '@/views/demo/tiankongdi/util.ts'
+import { getChildrenTree } from '@/api/demo/system';
+
+
+const modalShow = ref(false);
+const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+const pageSize = ref(10);
+const pageNo = ref(1);
+const total = ref(0);
+const mapStatusOptions = ref([
+  {
+    label: '正常',
+    value: '正常',
+  },
+  {
+    label: '分割后关闭',
+    value: '分割后关闭',
+  },
+]);
+const modalRecord = ref('');
+const emits = defineEmits(['changeSpin', 'changeTask']);
+const order = ref(0); // 0: 不排序 1: 升序 2: 降序
+const showSortMark = (key, sort) => {
+  if (infoScreenData.value.sortType === key && sort === order.value) {
+    return true;
+  }
+  return false;
+};
+
+const streetsAreaOptions =  ref<{ label: string; value: string}[]>([])
+const countyOptions = ref<[]>([])
+const infoDataList = ref([]);
+const infoScreenData: any = ref({
+  year: null,
+  picihao: null,
+  batch: null,
+  countyid: null,
+  streetid: null,
+  geomid: null,
+  nowStatus: null,
+  is_illegal: null,
+  weifaleixing: null,
+  measure_name: null,
+  handle_status_id: null,
+  is_build_complete: null,
+  areaid: null,
+  level: null,
+  page: 1,
+  limit: 10,
+  sort: null,
+  order: null,
+  type: null,
+});
+const selectItem = ref();
+const classFun = (item) => {
+  let string = 'data-list-item';
+  if (selectItem.value && item.id == selectItem.value.id) {
+    string += ' checked';
+  }
+  if (item.unitname == '已关闭') {
+    string += ' close-div';
+  }
+  return string;
+};
+const mapListScreenChange = (value, type) => {
+  switch (type) {
+    case 'year':
+      infoScreenData.value.year = value;
+      break;
+    case 'batch':
+      infoScreenData.value.picihao = value;
+      break;
+    case 'caseNo':
+      infoScreenData.value.caseNo = value;
+      break;
+    case 'countyid':
+      infoScreenData.value.countyid = value;
+      break;
+    case 'streetid':
+      infoScreenData.value.streetid = value;
+      break;
+    case 'isIllegal':
+      infoScreenData.value.isIllegal = value;
+      if (value !== 1) {
+        infoScreenData.value.weifaleixing = null;
+        infoScreenData.value.measureName = null;
+      }
+      break;
+    case 'illegalType':
+      infoScreenData.value.weifaleixing = value;
+      if (value !== 0) {
+        infoScreenData.value.measureName = null;
+      }
+      break;
+    case 'measureName':
+      infoScreenData.value.measureName = value;
+      break;
+    case 'isBuildName':
+      infoScreenData.value.isBuildName = value;
+      break;
+    case 'mapStatus':
+      if (value.length > 0) {
+        infoScreenData.value.isSplit = value.join(',');
+      } else {
+        delete infoScreenData.value.isSplit;
+      }
+      break;
+  }
+};
+const getInfoList = () => {
+  emits('changeSpin', true);
+  getLoadDroneCaseInfoDetail(infoScreenData.value)
+    .then((res) => {
+      infoDataList.value = res.items;
+      total.value = res.total;
+    })
+    .finally(() => {
+      emits('changeSpin', false);
+    });
+};
+const showInfoOpen = ref(false);
+const openCollect = computed(() => {
+  if (!infoScreenData.value.type) return false;
+  return true;
+});
+const showInfoData = ref();
+onMounted(() => {
+  // getLoadStreet().then(res => {
+  //   console.log(res)
+  //   res.forEach(item => {
+  //     streetsAreaOptions.value.push({
+  //       label: item.Name,
+  //       value: item.Id,
+  //     })
+  //   })
+  // })
+  getCountyOptions()
+  getInfoList();
+});
+// 获取区县
+function getCountyOptions(){
+  getChildrenTree({ parentId: 371300}).then(res => {
+    console.log(res)
+    countyOptions.value = res
+  })
+}
+// 选中区县，获取乡镇
+function changeCounty(value){
+  console.log(value)
+  infoScreenData.value.streetid = ''
+  getChildrenTree({ parentId: value}).then(res => {
+    console.log(res)
+    streetsAreaOptions.value = res
+  })
+  mapListScreenChange(value, 'countyid')
+}
+// 分割
+const splitPolygon = (record) => {
+  showSplitPolygon.value = true;
+  emits('changeTask', record.geomid);
+}
+const showSplitPolygon = ref(false);
+
+function handlerSplitComplete(){
+  showSplitPolygon.value=false;
+  getInfoList();
+}
+// 查看位置
+async function locationFun(record) {
+  console.log(record);
+  emits('changeTask', record.geomid);
+}
+const changePage = (page, pageSize) => {
+  infoScreenData.value.page = page;
+  infoScreenData.value.limit = pageSize;
+  getInfoList();
+};
+// 查看接受处理里收藏的
+const getCollectList = () => {
+  let collect = infoScreenData.value.type;
+  if (collect === '' || collect == null) {
+    infoScreenData.value.type = 1;
+  } else if (collect === 1) {
+    delete infoScreenData.value.type;
+  }
+  getInfoList();
+};
+const handlerRevertPolygon = (item)=>{
+  Modal.confirm({
+    title:'是否确认还原分割图斑?',
+    onCancel() {
+    },
+    async onOk() {
+      let params = {
+        "caseid": selectItem.value.id,
+        "parts": [
+          {
+            "caseid": null
+          }
+        ],
+        "type": 0,
+      };
+      recoverCase(params).then(res=>{
+        if(res){
+          message.info(res);
+          getInfoList();     
+        }
+      })
+    }
+  })
+}
+const handlerSplitPolygon = (item) => {
+  getCaseInfoById({id:item.processid}).then(res => {
+    if(res){
+      showInfoData.value = res
+      showInfoData.value['processid'] = item.processid;
+      showSplitPolygon.value = true
+    }else{
+      message.error("数据为空");
+    }
+  })
+}
+const dataListSort = (type) => {
+  order.value = (order.value + 1) % 3;
+  switch (order.value) {
+    case 0:
+      delete infoScreenData.value.sortType;
+      delete infoScreenData.value.order;
+      break;
+    case 1:
+      infoScreenData.value.sortType = type;
+      infoScreenData.value.order = 'asc';
+      break;
+    case 2:
+      infoScreenData.value.sortType = type;
+      infoScreenData.value.order = 'desc';
+      break;
+  }
+  getInfoList();
+};
+
+
+const showDataIndex = ref()
+const auditOpen = ref(false);
+const processId = ref('');
+const taskId = ref('');
+const type = ref('');
+const handoffShow = ref(true)
+const isRead: any = ref(0);
+const flowWfDataStore = flowStore();
+async function goAudit(record) {
+
+  // showDataIndex.value = props.infoDataList.findIndex(item => item.taskid === record.taskid)
+  let data = await getDetail({ code: record.processcode });
+  let scheme = JSON.parse(data.scheme.content);
+  let wfData = scheme.wfData;
+  flowWfDataStore.setWfDataAll(wfData);
+  auditOpen.value = true;
+  processId.value = record.processid;
+  taskId.value = record.taskid;
+  type.value = record.type;
+}
+
+const showInfo = (item) => {
+  getCaseInfoById({ id: item.processid }).then((res) => {
+    showInfoData.value = res;
+    showInfoOpen.value = true;
+  });
+};
+function changeArea() {
+  if (!selectItem.value) {
+    message.warning('请选择一条数据进行飞地调整');
+    return;
+  }
+  if (selectItem.value.unitname == '已关闭') {
+    message.warning('已关闭的不能进行飞地调整！');
+    return;
+  }
+  modalShow.value = true;
+  modalRecord.value = selectItem.value.id;
+}
+function selectAreaId(item) {
+  selectItem.value = item;
+}
+const resetScreenData = () => {
+  infoScreenData.value = {
+    limit: pageSize.value,
+    page: 1,
+  };
+  pageNo.value = 1;
+  getInfoList();
+};
+function closeModal() {
+  modalShow.value = false;
+  getInfoList();
+}
+function handleSuccess() {
+  getInfoList();
+}
+const handleOperateClick = (e: Event) => {
+
+  if(!selectItem.value){
+    message.warning("选择需要操作的数据");
+    return;
+  }
+  if (selectItem.value.unitname == '已关闭') {
+    message.warning('已关闭的不能进行分割操作！');
+    return;
+  }
+  if(e['key'] == 1){
+    handlerSplitPolygon(selectItem.value);
+  }else if(e['key'] == 2){
+    handlerRevertPolygon(selectItem.value);
+  }
+  
+};
+function querysBtn(){
+  pageNo.value = 1;
+  infoScreenData.value.page = 1
+  getInfoList();
+}
+</script>
+
+<style lang="less" scoped>
+.content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.screen-div {
+  padding: 10px 12px 20px 13px;
+  display: flex;
+  width: 590px;
+  flex-wrap: wrap;
+  .screen-item {
+    display: flex;
+    height: 39px;
+    .screen-item-label {
+      font-family: Alibaba PuHuiTi;
+      font-weight: 500;
+      font-size: 17px;
+      color: #000000;
+      line-height: 30px;
+      display: flex;
+      align-items: center;
+      margin-right: 9px;
+    }
+    :deep(.ant-select-selector) {
+      display: flex;
+      align-items: center;
+      font-family: HarmonyOS Sans;
+      font-weight: 500;
+      font-size: 19px;
+      color: #000000;
+      line-height: 30px;
+      height: 39px;
+      box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
+    }
+    .item-input {
+      width: 389px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 500;
+      font-size: 17px;
+      color: #000000;
+      line-height: 30px;
+      box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
+    }
+    .item-time-select {
+      box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
+      :deep(input) {
+        font-family: HarmonyOS Sans;
+        font-weight: 500;
+        font-size: 15px;
+        color: #000000;
+        line-height: 30px;
+      }
+    }
+    .item-button {
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      color: #ffffff;
+      background: #139af8;
+      margin-left: 4px;
+      height: 39px;
+      font-size: 17px;
+    }
+  }
+  .screen-button-div {
+    display: flex;
+    width: 100%;
+    button {
+      margin-right: 5px;
+    }
+  }
+}
+.pagination-div {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.no-data {
+  padding: 20px 0;
+}
+.rollback {
+  background: @component-background;
+  padding: 10px;
+}
+
+::v-deep .ant-modal-content {
+  width: 100vw;
+  height: 100vh;
+  border-radius: 0px;
+}
+
+::v-deep .ant-modal .ant-modal-content {
+  border-radius: 0px !important;
+}
+
+.full-modal {
+  .ant-modal {
+    min-width: 100vw;
+    top: 0px;
+    padding: 0px;
+    margin: 0px;
+  }
+  .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+  }
+  .ant-modal-body {
+    flex: 1;
+  }
+}
+.modal-content {
+  padding: 15px;
+  width: 100%;
+  height: calc(100vh - 65px);
+  overflow: auto;
+}
+.sift-div {
+  background: #fff;
+  height: 77px;
+  padding: 19px 13px;
+  margin-left: 10px;
+  margin-right: 10px;
+  border-radius: 10px 10px 0px 0px;
+  display: flex;
+  justify-content: space-between;
+  .layout-div {
+    display: flex;
+    .back-button {
+      font-size: 22px;
+      cursor: pointer;
+    }
+    .interval-div {
+      height: 100%;
+      width: 1px;
+      background: #ededed;
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+    .sift-item {
+      display: flex;
+      align-items: center;
+      margin-right: 15px;
+      cursor: pointer;
+      user-select: none;
+      .sift-label {
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        font-size: 19px;
+        color: #000000;
+      }
+      .sift-icon {
+        font-size: 9px;
+        margin-left: 5px;
+        opacity: 0.53;
+      }
+    }
+  }
+  .collect-div {
+    display: flex;
+    align-items: center;
+  }
+}
+.data-list-div {
+  flex: 1;
+  overflow: auto;
+  padding: 10px;
+  scrollbar-width: none; /* firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  .data-list-item {
+    background: #fff;
+    padding: 10px;
+    // border-radius:6px;
+    border:2px solid #fff;
+    margin-bottom: 1px;
+
+    .data-list-layout-div {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #e5e5e5;
+      height: 45px;
+      .data-list-title-div {
+        display: flex;
+        align-items: center;
+        .map-mark {
+          width: 17px;
+          height: 17px;
+        }
+        .label-div {
+          display: flex;
+          align-items: baseline;
+          margin-right: 12px;
+          cursor: pointer;
+        }
+        .item-label {
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 23px;
+          color: #000000;
+          margin-left: 9px;
+          margin-right: 10px;
+        }
+        .item-sub-label {
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 17px;
+          color: #000000;
+        }
+        .item-mark {
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 13px;
+          margin-left: 17px;
+          color: #696969;
+          margin-top: 4px;
+        }
+      }
+      .data-item-type-div {
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        font-size: 15px;
+        color: #696969;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        user-select: none;
+      }
+    }
+    .data-list-info-div {
+      display: flex;
+      justify-content: space-between;
+      padding-top: 10px;
+      .info-layout-div {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        .info-time {
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 15px;
+          color: #000000;
+          margin-right: 5px;
+        }
+      }
+      .info-item {
+        display: flex;
+        background: rgba(237, 237, 237, 0.55);
+        align-items: center;
+        width: 110px;
+        border-radius: 7px;
+        margin-right: 8px;
+        height: 30px;
+        justify-content: center;
+        .info-label {
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          font-size: 13px;
+          color: #959494;
+          // width:45%;
+          display: flex;
+          justify-content: center;
+          padding-right: 5px;
+          white-space: nowrap;
+        }
+        .info-data {
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 13px;
+          color: #000000;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+  .data-list-item:nth-last-child(1) {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .data-list-item.checked {
+    border: 2px solid #139af8;
+  }
+  .data-list-item.close-div {
+    background: #eff3fc;
+  }
+  .data-list-item.checked.close-div {
+    background: #eff3fc;
+    border: 1px solid #139af8;
+  }
+}
+.img-box{
+  width: 25px;
+  cursor: pointer;
+}
+.mr-r-20{
+  margin-right: 20px;
+}
+.img-box.small{
+  width: 18px;
+  margin-right: 6px;
+  margin-bottom: 2px;
+}
+
+</style>

src/views/demo/inspectionaudit/changearea/index.vue

@@ -0,0 +1,363 @@
+<template>
+  <div class="curb-spot-city">
+    <div class="show-list">
+      <a-spin :spinning="spinning">
+        <AuditProgress
+          v-if="false"
+          :year="year"
+          :batch="batch"
+          :batchOptions="batchOptions"
+          :yearOptions="yearOptions"
+          :dataList="dataList"
+          @auditProgressScreenChange="auditProgressScreenChange"
+          @showInfo="changeShowInfo"
+        />
+
+        <!-- <AuthImage 
+          style="width:180px;height:180px;" 
+          src="http://120.222.154.48:6050/DroneEnforcement/2024/20240712/2024071209474128610039.jpg"
+          type="native"
+          :preview="true"
+          @perviewImage="perviewImage"
+        ></AuthImage>
+
+      <AuthImage 
+          style="width:180px;height:180px;" 
+          src="http://120.222.154.48:6050/S_Common/2024/20240712/2024071209201354610087.jpg"
+          type="native"
+          :preview="true"
+          @perviewImage="perviewImage"
+        ></AuthImage>
+
+      <AuthImage 
+        style="width:180px;height:180px;" 
+        src="http://111.17.207.220:9001/2023/20231220/2023122014532130590143.png"
+        type="ant"
+        :preview="true"
+        @perviewImage="perviewImage"
+        ></AuthImage> -->
+
+        <MapList
+          v-if="showInfo"
+          :infoScreenData="infoScreenData"
+          :cityType="cityType"
+          :pageNo="pageNo"
+          :pageSize="pageSize"
+          :total="total"
+          :infoDataList="infoDataList"
+          :municipalAreaOptions="municipalAreaOptions"
+          :countiesAreaOptions="countiesAreaOptions"
+          @infoDataListSort="infoDataListSort"
+          @changeInfoPage="changeInfoPage"
+          @mapListScreenChange="mapListScreenChange"
+          @closeShowInfo="changeShowInfo"
+          @changeTask="changeTask"
+          @collectChange="collectChange"
+          @changeSpin="changeSpin"
+        />
+      </a-spin>
+    </div>
+    <div class="map-box-div">
+      <MapboxMap
+        :mapConfig="mapConfig"
+        @handlerDrawComplete="handlerDrawComplete"
+        @mapOnLoad="onMapboxLoad"
+        ref="MapboxComponent"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // import AuthImage from '@/components/Upload/src/components/AuthImage.vue'
+  import { ref, onMounted, onUnmounted, watch, defineAsyncComponent } from 'vue';
+  import mapboxgl, { Map } from 'mapbox-gl';
+  import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config.ts';
+  import AuditProgress from './AuditProgress/index.vue';
+  import MapList from './MapList/index.vue';
+  import { getLoadDroneCaseInfoCount, getLoadDroneCaseInfoDetail } from '@/api/inspectionaudit/index.ts';
+  import { batchOptions, yearOptions } from '@/utils/global';
+  import { getChildrenTree } from '@/api/demo/system';
+  import { getGeom, getConfig } from '@/api/sys/layerManagement';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import axios from 'axios';
+
+  const { createMessage } = useMessage();
+
+  const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
+  const MapboxComponent = ref();
+  const mapConfig = ref({ isShowMap: false });
+
+  function onMapboxLoad(): void {
+    getConfig({ code: 'mapsetting' }).then((res) => {
+      mapConfig.value = JSON.parse(res.codeValue);
+    });
+  }
+
+  function perviewImage(e): void {}
+
+  const spinning = ref(false);
+
+  const showInfo = ref(false);
+  const year = ref<number>();
+  const batch = ref();
+  const dataList = ref<any>([]);
+  const infoDataList = ref<any>([]);
+  const infoScreenData = ref({
+    year: '',
+    batch: '',
+    mapNo: '',
+    countyId: '',
+    streetId: '',
+    mapType: '',
+    illegalType: '',
+    measure: '',
+    mapStatus: '',
+    markType: '',
+    sort: '',
+    order: '',
+    type: '', // 收藏
+  });
+  const pageNo = ref(1);
+  const pageSize = ref(10);
+  const total = ref(0);
+  const municipalAreaOptions = ref([{ label: '全部', value: '' }]);
+  const countiesAreaOptions = ref([{ label: '全部', value: '' }]);
+  const cityType = ref();
+  const auditProgressScreenChange = (value, type) => {
+    switch (type) {
+      case 'year':
+        year.value = value;
+        break;
+      case 'batch':
+        batch.value = value;
+        break;
+    }
+    let params = {
+      year: year.value,
+    };
+    getLoadDroneCaseInfoCount(params).then((res) => {
+      dataList.value = res;
+    });
+  };
+  const mapListScreenChange = (value, type) => {
+    switch (type) {
+      case 'year':
+        infoScreenData.value.year = value;
+        break;
+      case 'batch':
+        infoScreenData.value.batch = value;
+        break;
+      case 'mapNo':
+        infoScreenData.value.mapNo = value;
+        break;
+      case 'countyId':
+        infoScreenData.value.countyId = value;
+        break;
+      case 'streetId':
+        infoScreenData.value.streetId = value;
+        break;
+      case 'mapType':
+        infoScreenData.value.mapType = value;
+        if (value !== 1) {
+          infoScreenData.value.illegalType = '';
+          infoScreenData.value.measure = '';
+        }
+        break;
+      case 'illegalType':
+        infoScreenData.value.illegalType = value;
+        if (value !== 0) {
+          infoScreenData.value.measure = '';
+        }
+        break;
+      case 'measure':
+        infoScreenData.value.measure = value;
+        break;
+      case 'mapStatus':
+        infoScreenData.value.mapStatus = value;
+        break;
+      case 'markType':
+        infoScreenData.value.markType = value;
+        break;
+    }
+  };
+  const changeShowInfo = (value, item) => {
+    showInfo.value = value;
+    if (item) {
+      cityType.value = 0;
+      // cityType.value = item;
+      // infoScreenData.value.countyId = item.areaid;
+
+      // municipalAreaOptions.value = [{ label: item.areaname, value: item.areaid }];
+      // getChildrenTree({ parentId: item.areaid }).then((res) => {
+      //   res.forEach((cityItem) => {
+      //     countiesAreaOptions.value.push({
+      //       label: cityItem.name,
+      //       value: cityItem.id,
+      //     });
+      //   });
+      // });
+
+      // console.log("countiesAreaOptions",municipalAreaOptions,countiesAreaOptions)
+      // debugger
+    } else {
+      cityType.value = 0;
+    }
+  };
+
+  const getParams = () => {
+    let result = {};
+    let params = {
+      year: infoScreenData.value.year,
+      // batch: batch.value,
+      countyid: infoScreenData.value.countyId,
+      streetid: infoScreenData.value.streetId,
+      geomid: infoScreenData.value.mapNo,
+      is_illegal: infoScreenData.value.mapType,
+      weifaleixing: infoScreenData.value.illegalType,
+      measure_name: infoScreenData.value.measure,
+      handle_status_id: infoScreenData.value.mapStatus,
+      is_build_complete: infoScreenData.value.markType,
+      areaid: cityType.value.areaid,
+      level: cityType.value.level,
+      page: pageNo.value,
+      limit: pageSize.value,
+      sort: infoScreenData.value.sort,
+      order: infoScreenData.value.order,
+      type: infoScreenData.value.type,
+    };
+    Object.keys(params).forEach((key) => {
+      if (params[key] !== '' && params[key] !== null) {
+        result[key] = params[key];
+      }
+    });
+    return result;
+  };
+  watch(
+    () => year.value,
+    (newVal) => {
+      infoScreenData.value.year = newVal;
+    },
+  );
+  watch(
+    () => batch.value,
+    (newVal) => {
+      infoScreenData.value.batch = newVal;
+    },
+  );
+  let map: Map;
+  onMounted(() => {
+    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
+    // map = initMap();
+    getLoadDroneCaseInfoCount()
+      .then((res) => {
+        dataList.value = res;
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+
+    changeShowInfo(true, null);
+  });
+  onUnmounted(() => {
+    map && map.remove();
+  });
+  const initMap = () => {
+    return new mapboxgl.Map({
+      container: 'showMap',
+      language: 'zh-cmn',
+      projection: 'equirectangular', // wgs84参考系
+      style: MapboxDefaultStyle,
+      maxZoom: 22,
+      minZoom: 6,
+      zoom: 10,
+      // ...props.mapOptions,
+      center: [117.984425, 35.270654],
+    });
+  };
+
+  const changeInfoPage = (page, limit) => {
+    pageNo.value = page;
+    pageSize.value = limit;
+  };
+  const collectChange = (value) => {
+    pageNo.value = 1;
+    infoScreenData.value.type = value;
+  };
+
+  function changeTask(val) {
+    let getGeomPrams = {
+      TableName: 'drone_shp_data ',
+      FieldName: 'gid',
+      FieldValue: val?.split(','),
+      page: 1,
+      limit: 999,
+      key: null,
+    };
+    if (val) {
+      getGeom(getGeomPrams).then((res) => {
+        let geoms = [];
+        if (res) {
+          if (res.items?.length > 0) {
+            res.items.forEach((item, index) => {
+              let geom = {
+                key: item.gid,
+                mapgeom: item.geometry,
+              };
+              geoms.push(geom);
+            });
+          }
+          // MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
+          MapboxComponent.value.handlerDraw('Details', geoms, false);
+        } else {
+          createMessage.error('当前数据没有图斑！');
+        }
+      });
+    } else {
+      createMessage.error('当前数据没有图斑！');
+    }
+  }
+  const infoDataListSort = (type, order) => {
+    switch (order) {
+      case 0:
+        infoScreenData.value.sort = '';
+        infoScreenData.value.order = '';
+        break;
+      case 1:
+        infoScreenData.value.sort = type;
+        infoScreenData.value.order = 'asc';
+        break;
+      case 2:
+        infoScreenData.value.sort = type;
+        infoScreenData.value.order = 'desc';
+        break;
+    }
+    getLoadDroneCaseInfoDetail(getParams()).then((res) => {
+      total.value = res.total;
+      infoDataList.value = res.items;
+      pageNo.value = 1;
+    });
+  };
+  const changeSpin = (val) => {
+    spinning.value = val;
+  };
+</script>
+
+<style lang="scss" scoped>
+  .curb-spot-city {
+    height: 100%;
+    display: flex;
+    .show-list {
+      width: 590px;
+      :deep(.ant-spin-nested-loading) {
+        height: 100%;
+      }
+      :deep(.ant-spin-container) {
+        height: 100%;
+      }
+    }
+    .map-box-div {
+      width: calc(100% - 590px);
+    }
+  }
+</style>

src/views/demo/inspectionaudit/changearea/util.ts

@@ -0,0 +1,32 @@
+export const batchOptions = [];
+export const yearOptions = [
+  { value: '2024', label: 2024 },
+  { value: '2023', label: 2023 },
+  { value: '2022', label: 2022 },
+  { value: '2021', label: 2021 },
+  { value: '2020', label: 2020 },
+];
+export const mapTypeOptions = [
+  { label: '合法', value: 0 },
+  { label: '违法', value: 1 },
+  { label: '其他', value: 2 },
+];
+export const illegalTypeOptions = [
+  { label: '非农化', value: 0 },
+  { label: '非粮化', value: 1 },
+];
+export const measureOptions = [
+  { label: '拆除复耕', value: 0 },
+  { label: '补办手续', value: 1 },
+];
+export const mapStatusOptions = [
+  { label: '待接收', value: 0 },
+  { label: '待判定', value: 1 },
+  { label: '待整改', value: 2 },
+  { label: '待审核', value: 3 },
+  { label: '已完成', value: 4 },
+];
+export const markTypeOptions = [
+  { label: '建设中', value: 0 },
+  { label: '已建成', value: 1 },
+];

src/views/demo/inspectionaudit/curbspotcity/MapList/ShowInfoModal/index.vue

@@ -0,0 +1,832 @@
+<template>
+  <div class="detail-container">
+    <div class="map-container">
+      <MapboxMap
+        :imageList="imageList"
+        :geomsList="geomsList"
+        :mapConfig="mapConfig"
+        @handlerDrawComplete="handlerDrawComplete"
+        @mapOnLoad="onMapboxLoad"
+        ref="MapboxComponent"
+      />
+    </div>
+    <div class="info-container" id="info-container">
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1" tab="线索下发">
+          <a-descriptions
+            :column="2"
+            bordered
+            :contentStyle="{
+              'text-align': 'center',
+              'min-width': '250px',
+              'word-break': 'break-all',
+            }"
+          >
+            <a-descriptions-item label="图斑编号">{{ case_no }}</a-descriptions-item>
+            <a-descriptions-item label="图斑类型">{{ typename }}</a-descriptions-item>
+            <a-descriptions-item label="县区">{{ countyname }}</a-descriptions-item>
+            <a-descriptions-item label="乡镇">{{ streetname }}</a-descriptions-item>
+            <a-descriptions-item label="社区/村">{{ communityname }}</a-descriptions-item>
+            <a-descriptions-item label="图斑面积(亩)">{{
+              dataProcessing(area)
+            }}</a-descriptions-item>
+            <a-descriptions-item label="农用地面积(亩)">{{
+              dataProcessing(nongyongdi_area)
+            }}</a-descriptions-item>
+            <a-descriptions-item label="耕地面积(亩)">{{
+              dataProcessing(gengdi_area)
+            }}</a-descriptions-item>
+            <a-descriptions-item label="永农面积(亩)">{{
+              dataProcessing(yongjiujibennongtian_area)
+            }}</a-descriptions-item>
+            <!-- <a-descriptions-item label="占重点区域面积(亩)">{{ dataProcessing(zhongdianquyu_area) }}</a-descriptions-item> -->
+            <a-descriptions-item label="占生态红线面积(亩)">{{
+              dataProcessing(shengtaibaohuhongxian_area)
+            }}</a-descriptions-item>
+            <!-- <a-descriptions-item label="占空间规划面积(亩)">{{ dataProcessing(guotukongjianguihua_area) }}</a-descriptions-item> -->
+            <a-descriptions-item label="图斑描述">{{ case_description }}</a-descriptions-item>
+            <!-- <a-descriptions-item label="图斑地址">{{ address }}</a-descriptions-item> -->
+            <a-descriptions-item label="备注">{{ remark }}</a-descriptions-item>
+            <a-descriptions-item label="经度">{{ lng }}</a-descriptions-item>
+            <a-descriptions-item label="纬度">{{ lat }}</a-descriptions-item>
+            <a-descriptions-item label="下发时间">{{ synchronoustime }}</a-descriptions-item>
+            <a-descriptions-item label="图斑照片">
+              <div class="image-div">
+                <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                  }"
+                  >
+                  <template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
+                    <a-image
+                      v-if="imageItem"
+                      width="100px"
+                      height="100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    ></a-image>
+                  </template>
+                </a-image-preview-group>
+              </div>
+            </a-descriptions-item>
+            <a-descriptions-item label="接收人">{{ jieshou_people }}</a-descriptions-item>
+            <a-descriptions-item label="接收时间">{{ jieshou_time?.split('.')[0] }}</a-descriptions-item>
+          </a-descriptions>
+        </a-tab-pane>
+        <a-tab-pane
+          key="2"
+          v-if="!['建设用地', '推堆土'].includes(typename)"
+          tab="线索填报"
+          force-render
+        >
+          <a-descriptions
+            :column="2"
+            bordered
+            :contentStyle="{
+              'text-align': 'center',
+              'min-width': '250px',
+              'word-break': 'break-all',
+            }"
+          >
+            <a-descriptions-item label="判定结果">{{
+              getLabel('is_illegal', is_illegal)
+            }}</a-descriptions-item>
+            <a-descriptions-item v-if="is_illegal == 1" label="项目名称">{{
+              xiangmumc
+            }}</a-descriptions-item>
+            <a-descriptions-item v-if="is_illegal == 1" label="项目主体">{{
+              xiangmuzhuti
+            }}</a-descriptions-item>
+            <a-descriptions-item v-if="is_illegal == 1" label="实际用途">{{
+              actual_use_to
+            }}</a-descriptions-item>
+            <a-descriptions-item v-if="is_illegal == 1" label="违法类型">{{
+              getLabel('weifaleixing', weifaleixing)
+            }}</a-descriptions-item>
+            <a-descriptions-item v-if="is_illegal == 1" label="附件">
+              <a-image-preview-group :preview="{getContainer,}">
+                <template v-for="(item, itemIndex) in fujianList" :key="itemIndex">
+                  <a-image
+                    v-if="showImage(item)"
+                    style="width:100px;height:100px;"
+                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
+                    :preview="{getContainer}"
+                  ></a-image>
+                  <div v-else>
+                    <Icon
+                      v-if="item"
+                      :style="`font-size: 30px; cursor: pointer;`"
+                      icon="ion:document-attach-outline"
+                      @click="downLoadFile(item)"
+                    />
+                    {{ handlerDealFileName(item) }}
+                  </div>
+                </template>
+              </a-image-preview-group>
+            </a-descriptions-item>
+            <a-descriptions-item v-if="is_illegal == 0" label="附件">
+              <a-image-preview-group :preview="{getContainer,}">
+                <template v-for="(item, itemIndex) in hefafujianList" :key="itemIndex">
+                  <a-image
+                    v-if="showImage(item)"
+                    style="width:100px;height:100px;"
+                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
+                    :preview="{getContainer,}"
+                  ></a-image>
+                  <div v-else>
+                    <Icon
+                      v-if="item"
+                      :style="`font-size: 30px; cursor: pointer;`"
+                      icon="ion:document-attach-outline"
+                      @click="downLoadFile(item)"
+                    />
+                    {{ handlerDealFileName(item) }}
+                  </div>
+                </template>
+              </a-image-preview-group>
+            </a-descriptions-item>
+            <a-descriptions-item v-if="is_illegal == 2" label="实际用途">{{
+              getLabel('qita_use_to', qita_use_to)
+            }}</a-descriptions-item>
+            <a-descriptions-item v-if="is_illegal == 2" label="附件">
+              <a-image-preview-group :preview="{getContainer,}">
+                <template v-for="(item, itemIndex) in qitafujianList" :key="itemIndex">
+                  <a-image
+                    v-if="showImage(item)"
+                    style="width:100px;height:100px;"
+                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
+                    :preview="{getContainer}"
+                  ></a-image>
+                  <div v-else>
+                    <Icon
+                      v-if="item"
+                      :style="`font-size: 30px; cursor: pointer;`"
+                      icon="ion:document-attach-outline"
+                      @click="downLoadFile(item)"
+                    />
+                    {{ handlerDealFileName(item) }}
+                  </div>
+                </template>
+              </a-image-preview-group>
+            </a-descriptions-item>
+            <a-descriptions-item label="判定依据说明">{{
+              pandingyijushuoming
+            }}</a-descriptions-item>
+            <a-descriptions-item label="照片">
+              <div class="image-div">
+                <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                    onVisibleChange:handlerImageChange
+                  }"
+                  >
+                  <template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
+                      <a-image
+                        v-if="imageItem"
+                        @click="handlerPreviewImage(imageIndex,imageItem)"
+                        width="100px"
+                        height="100px"
+                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                        :preview="{
+                          getContainer,
+                        }"
+                      ></a-image>
+                  </template>
+                </a-image-preview-group>
+              </div>
+            </a-descriptions-item>
+            <a-descriptions-item label="填报人">{{ examiner_name }}</a-descriptions-item>
+            <a-descriptions-item label="填报时间">{{ examine_time }}</a-descriptions-item>
+          </a-descriptions>
+        </a-tab-pane>
+        <a-tab-pane
+          key="3"
+          tab="整改情况"
+          v-if="weifaleixing == 0 && !['建设用地', '推堆土'].includes(typename)"
+        >
+          <a-descriptions
+            :column="2"
+            bordered
+            :contentStyle="{
+              'text-align': 'center',
+              'min-width': '250px',
+              'word-break': 'break-all',
+            }"
+          >
+            <a-descriptions-item label="整改措施">{{
+              getLabel('measure_name', measure_name)
+            }}</a-descriptions-item>
+            <a-descriptions-item v-if="measure_name == 0" label="附件">
+              <a-image-preview-group :preview="{getContainer,}">
+                <template v-for="(item, itemIndex) in yanshoubiaoList" :key="itemIndex">
+                  <a-image
+                    v-if="showImage(item)"
+                    style="width:100px;height:100px;"
+                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
+                     :preview="{getContainer,}"
+                  ></a-image>
+                  <div v-else>
+                    <Icon
+                      v-if="item"
+                      :style="`font-size: 30px; cursor: pointer;`"
+                      icon="ion:document-attach-outline"
+                      @click="downLoadFile(item)"
+                    />
+                    {{ handlerDealFileName(item) }}
+                  </div>
+                </template>
+              </a-image-preview-group>
+            </a-descriptions-item>
+            <a-descriptions-item v-if="measure_name == 0" label="照片">
+              <div class="image-div">
+                <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                    onVisibleChange:handlerImageChange
+                  }"
+                  >
+                  <template
+                    v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
+                    :key="imageIndex"
+                  >
+                    <a-image
+                      v-if="imageItem"
+                      width="100px"
+                      height="100px"
+                      @click="handlerPreviewImage(imageIndex,imageItem)"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    ></a-image>
+                  </template>
+                </a-image-preview-group>
+              </div>
+            </a-descriptions-item>
+            <a-descriptions-item v-if="measure_name == 1" label="附件">
+              <a-image-preview-group :preview="{getContainer,}">
+                <template v-for="(item, itemIndex) in zhenggaifujianList" :key="itemIndex">
+                  <a-image
+                    v-if="showImage(item)"
+                    style="width:100px;height:100px;"
+                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
+                    :preview="{getContainer}"
+                  ></a-image>
+                  <div v-else>
+                    <Icon
+                      v-if="item"
+                      :style="`font-size: 30px; cursor: pointer;`"
+                      icon="ion:document-attach-outline"
+                      @click="downLoadFile(item)"
+                    />
+                    {{ handlerDealFileName(item) }}
+                  </div>
+                </template>
+              </a-image-preview-group>
+            </a-descriptions-item>
+            <a-descriptions-item v-if="measure_name == 1" label="照片">
+              <div class="image-div">
+                <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                    onVisibleChange:handlerImageChange
+                  }"
+                  >
+                  <template v-for="(imageItem, imageIndex) in bubanzhaopianList" :key="imageIndex">
+                    <a-image
+                      v-if="imageItem"
+                      width="100px"
+                      height="100px"
+                      @click="handlerPreviewImage(imageIndex,imageItem)"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    ></a-image>
+                  </template>
+                </a-image-preview-group>
+              </div>
+            </a-descriptions-item>
+            <a-descriptions-item label="办理人">{{ transactor_name }}</a-descriptions-item>
+            <a-descriptions-item label="办理时间">{{ transact_time }}</a-descriptions-item>
+          </a-descriptions>
+        </a-tab-pane>
+        <a-tab-pane key="4" v-if="!['建设用地', '推堆土'].includes(typename)" tab="审核情况">
+          <a-divider>区县审核</a-divider>
+          <a-descriptions
+            :column="2"
+            bordered
+            :contentStyle="{
+              'text-align': 'center',
+              'min-width': '250px',
+              'word-break': 'break-all',
+            }"
+          >
+            <a-descriptions-item label="审核结果">{{ xjshenhejieguo }}</a-descriptions-item>
+            <a-descriptions-item label="审核意见">{{ xianjiyijian }}</a-descriptions-item>
+            <a-descriptions-item label="审核人">{{ verifyuser }}</a-descriptions-item>
+            <a-descriptions-item label="审核时间">{{ verifytime }}</a-descriptions-item>
+          </a-descriptions>
+          <a-divider>市局审核</a-divider>
+          <a-descriptions
+            :column="2"
+            bordered
+            :contentStyle="{
+              'text-align': 'center',
+              'min-width': '250px',
+              'word-break': 'break-all',
+            }"
+          >
+            <a-descriptions-item label="审核结果">{{ sjshenhejieguo }}</a-descriptions-item>
+            <a-descriptions-item label="审核意见">{{ shijiyijian }}</a-descriptions-item>
+            <a-descriptions-item label="审核人">{{ hexiaoren }}</a-descriptions-item>
+            <a-descriptions-item label="审核时间">{{ hexiaotime?.split('.')[0] }}</a-descriptions-item>
+            <a-descriptions-item v-if="weifaleixing == 0" label="无人机复飞照片" :span="2">
+              <div class="image-div">
+                <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                  }"
+                  >
+                  <template v-for="(imageItem, imageIndex) in wrjffzhaopianList" :key="imageIndex">
+                    <a-image
+                      v-if="imageItem"
+                      width="100px"
+                      height="100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    ></a-image>
+                  </template>
+                </a-image-preview-group>
+              </div>
+            </a-descriptions-item>
+            <!-- <a-descriptions-item label="现场核查照片" :span="2">
+              <div class="image-div">
+                <a-image-preview-group
+                  :preview="{
+                    getContainer:getContainer,
+                  }"
+                  >
+                  <template v-for="(imageItem, imageIndex) in xchczhaopianList" :key="imageIndex">
+                    <a-image
+                      v-if="imageItem"
+                      width="100px"
+                      height="100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    ></a-image>
+                  </template>
+                </a-image-preview-group>
+              </div>
+            </a-descriptions-item> -->
+          </a-descriptions>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { defineProps, ref, computed,onBeforeMount } from 'vue';
+  import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
+  import { getConfig } from '@/api/sys/layerManagement';
+  import { getGeom } from '@/api/sys/layerManagement';
+  import {getLoadCaseImgList} from '@/api/inspectionaudit'
+  import { useMessage } from '@/hooks/web/useMessage';
+  import axios from 'axios';
+  const { createMessage } = useMessage();
+  import Icon from '@/components/Icon/Icon.vue';
+  import { getAppEnvConfig } from '@/utils/env';
+  const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
+
+  import {
+    mapTypeOptions,
+    illegalTypeOptions,
+    measureOptions,
+    mapStatusOptions,
+    markTypeOptions,
+    illegalTypeList,
+    resultOptions,
+    qitaUseTOOptions,
+  } from '@/utils/global';
+
+  console.log('');
+
+  const MapboxComponent = ref();
+  const mapConfig = ref({});
+  getConfig({ code: 'mapsetting' }).then((res) => {
+    mapConfig.value = JSON.parse(res.codeValue);
+  });
+
+  const props = defineProps(['showInfoData']);
+  const activeKey = ref('1');
+
+
+  const geomsList = ref();
+  const {
+    id,
+    case_no,
+    case_name,
+    case_description,
+    start_time,
+    end_time,
+    address,
+    lng,
+    lat,
+    typeid,
+    typename,
+    handle_status_id,
+    handle_status_name,
+    case_status_i,
+    case_status_name,
+    createtime,
+    createuser,
+    drone_no,
+    deal_userid,
+    deal_username,
+    createusername,
+    is_delete,
+    countyid,
+    countyname,
+    streetid,
+    streetname,
+    communityid,
+    communityname,
+    remark,
+    is_closed,
+    area,
+    is_illegal,
+    close_user,
+    close_time,
+    identification_user,
+    identification_time,
+    is_intact,
+    close_userid,
+    identification_userid,
+    verifyuserid,
+    verifyuser,
+    verifytime,
+    is_improve,
+    improve_reason,
+    is_dispense,
+    dispense_userid,
+    dispense_time,
+    dispense_username,
+    verifystatus,
+    verifystatusname,
+    is_checked,
+    deal_time,
+    is_drawback,
+    examiner_id,
+    examiner_name,
+    examine_time,
+    measure_name,
+    casepic,
+    opinion,
+    result,
+    result_name,
+    opinion_name,
+    handletime,
+    handleuser,
+    handleusername,
+    is_assist,
+    measure_name_deal,
+    qita_use_to,
+    illegal_contact,
+    illegal_shenfenzhenghao,
+    investigation_type,
+    investigation_result,
+    registr_number,
+    is_build_complete,
+    actual_use_to,
+    transactor_id,
+    transactor_name,
+    transact_time,
+    geomid,
+    nongyongdi_area,
+    gengdi_area,
+    yongjiujibennongtian_area,
+    zhongdianquyu_area,
+    shengtaibaohuhongxian_area,
+    guotukongjianguihua_area,
+    fujian,
+    hefafujian,
+    qitafujian,
+    jieshou_people,
+    jieshou_time,
+    pandingyijushuoming,
+    xiangmumc,
+    xiangmuzhuti,
+    weifaleixing,
+    yanshoubiao,
+    zhenggaifujian,
+    chaichufugenghoupic,
+    bubanzhaopian,
+    is_jieshou,
+    anjianzhaopian,
+    hexiaoren,
+    hexiaotime,
+    wrjffzhaopian,
+    xchczhaopian,
+    synchronoustime,
+    xjshenhejieguo,
+    xianjiyijian,
+    sjshenhejieguo,
+    shijiyijian,
+  } = props.showInfoData;
+
+  const imageList = ref([]);
+
+  async function getCaseImgList(){
+    imageList.value = await getLoadCaseImgList({caseid:id});
+    MapboxComponent.value.handlerLoadPictureAzimuth(imageList.value);
+
+    // 匹配去除无效图片
+    // let zhengshiImageList = [];
+    // imageList.value?.forEach((item,index)=>{
+    //   let obj = anjianzhaopianList.value?.find((it,idx)=>{
+    //     return item.filePath == it;
+    //   })
+    //   if(obj){
+    //     zhengshiImageList.push(imageList.value[index]);
+    //   }
+    // })
+
+  }
+
+  function handlerDealFileName(path){
+    const regex = /([^/\\]+)(?=\.[^/\\]*$|$)/;
+    const matchStr = path.match(regex);
+    if(matchStr?.length){
+      return matchStr[0];
+    }
+  }
+  
+  function handlerPreviewImage(index,url){
+
+    const regex = /([^/\\]+)(?=\.[^/\\]*$|$)/;
+    const match = url.match(regex);
+    if (match) {
+      MapboxComponent.value.handlerCurrentImageChange(match[1]);
+    }
+  }
+
+  const isInitImageLisener = ref<Boolean>(false);
+  // 监听预览图片地址变化进行箭头切换
+  function handlerImageChange(e):void{
+    if(e && !isInitImageLisener.value){
+      setTimeout(function(){
+        const targetNode = document.getElementsByClassName('ant-image-preview-img');
+        // 创建一个观察器实例，并传入回调函数
+        const observer = new MutationObserver((mutationsList) => {
+            for (const mutation of mutationsList) {
+                if (mutation.type === 'attributes') {
+                  if(targetNode[0].getAttribute(mutation.attributeName).match("http")){
+                    handlerPreviewImage(0,targetNode[0].getAttribute(mutation.attributeName))
+                  }
+                }
+            }
+        });
+        // 配置观察选项
+        const config = { attributes: true };
+        // 开始观察目标节点
+        observer.observe(targetNode[0], config);
+        isInitImageLisener.value = true;
+      },250)
+    }
+  }
+
+  onBeforeMount(()=>{
+    
+  })
+
+
+
+
+
+  const anjianzhaopianList = computed(() => {
+    getCaseImgList();
+    return anjianzhaopian ? anjianzhaopian.split(',') : [];
+  });
+  const casepicList = computed(() => {
+    return casepic ? casepic.split(',') : [];
+  });
+  const chaichufugenghoupicList = computed(() => {
+    return chaichufugenghoupic ? chaichufugenghoupic.split(',') : [];
+  });
+  const bubanzhaopianList = computed(() => {
+    return bubanzhaopian ? bubanzhaopian.split(',') : [];
+  });
+  const fujianList = computed(() => {
+    return fujian ? fujian.split(',') : [];
+  });
+  const hefafujianList = computed(() => {
+    return hefafujian ? hefafujian.split(',') : [];
+  });
+  const qitafujianList = computed(() => {
+    return qitafujian ? qitafujian.split(',') : [];
+  });
+  const zhenggaifujianList = computed(() => {
+    return zhenggaifujian ? zhenggaifujian.split(',') : [];
+  });
+  const yanshoubiaoList = computed(() => {
+    return yanshoubiao ? yanshoubiao.split(',') : [];
+  });
+  const wrjffzhaopianList = computed(() => {
+    return wrjffzhaopian ? wrjffzhaopian.split(',') : [];
+  });
+  const xchczhaopianList = computed(() => {
+    return xchczhaopian ? xchczhaopian.split(',') : [];
+  });
+  function onMapboxLoad() {
+    changeTask();
+  }
+  const getLabel = (type, value) => {
+    let result: any[] = [];
+    let label = '';
+    switch (type) {
+      case 'is_illegal':
+        result = mapTypeOptions;
+        break;
+      case 'weifaleixing':
+        result = illegalTypeList;
+        break;
+      case 'measure_name':
+        result = measureOptions;
+        break;
+      case 'result_name':
+        result = resultOptions;
+        break;
+      case 'qita_use_to':
+        result = qitaUseTOOptions;
+        break;
+    }
+    result.forEach((item) => {
+      if (item.value == value) {
+        label = item.label;
+      }
+    });
+    return label;
+  };
+  async function changeTask() {
+    let getGeomPrams = {
+      TableName: 'drone_shp_data ',
+      FieldName: 'gid',
+      FieldValue: props.showInfoData.geomid?.split(','),
+      page: 1,
+      limit: 999,
+      key: null,
+    };
+    if (props.showInfoData.geomid) {
+      
+
+      getGeom(getGeomPrams).then((res) => {
+        let geoms = [];
+        if (res) {
+          if (res.items?.length > 0) {
+            res.items.forEach((item, index) => {
+              let geom = {
+                key: item.gid,
+                mapgeom: item.geometry,
+              };
+              geoms.push(geom);
+              geomsList.value = geoms;
+            });
+          }
+          // MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
+          MapboxComponent.value.handlerDraw('Details', geoms, false);
+        } else {
+          geomsList.value = null;
+          createMessage.error('当前数据没有图斑！');
+        }
+      });
+    } else {
+      createMessage.error('当前数据没有图斑！');
+    }
+  }
+  const downLoadFile = (url) => {
+    if(url.indexOf('.pdf') !== -1){
+      axios({
+        method: 'get',
+        url: `${VITE_GLOB_INFO_IMAGE_URL}/${url}`,
+        responseType: 'blob',
+        headers: {
+          'Content-Disposition': 'inline',
+        }
+      })
+      .then(response => {
+        let blob = new Blob([response.data], {type: 'application/pdf'});
+        let url = window.URL.createObjectURL(blob)
+        window.open(url);
+      })
+      .catch(error => {
+        console.error(error);
+      });
+    }else{
+        window.open(`${VITE_GLOB_INFO_IMAGE_URL}/${url}`, '_blank');
+    }
+    
+  };
+  const getContainer = () => {
+    return document.getElementById('info-container');
+  };
+  const dataProcessing = (value) => {
+    if (!value) {
+      return '0';
+    }
+    if (value.indexOf('.') == -1) {
+      return value;
+    } else {
+      if (value.split('.')[1].length <= 2) {
+        return value;
+      }
+      let resultString = value.replace('㎡', '');
+      return Number(resultString).toFixed(2);
+    }
+  };
+  const showImage = (url) => {
+    if(url.indexOf('.png') !== -1  || url.indexOf('.jpg') !== -1 || url.indexOf('.jpeg') !== -1 ){
+      return true
+    }else{
+      return false
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .image-div {
+    min-width: 340px;
+    max-height: 220px;
+    overflow: auto;
+  }
+  .detail-container {
+    width: 100vw;
+    height: calc(100vh - 120px);
+    display: flex;
+    padding: 0px 20px;
+  }
+  .detail-container::after {
+    content: '';
+    display: block;
+    clear: both;
+    height: 0;
+    visibility: none;
+  }
+  .map-container {
+    float: left;
+    width: 45vw;
+    height: calc(100vh - 100px);
+    margin-right: 20px;
+  }
+  :deep(.ant-image){
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+  :deep(.ant-image-preview-switch-left){
+    position: absolute;
+  }
+  :deep(.ant-image-preview-switch-right){
+    position: absolute;
+  }
+  .info-container {
+    // float: left;
+    position: relative;
+    flex: 1;
+    :deep(.ant-image-preview-wrap) {
+      position: absolute;
+    }
+    :deep(.ant-image-preview-mask) {
+      position: absolute;
+    }
+    :deep(.ant-image-preview-operations-wrapper) {
+      height: 100%;
+      position: absolute;
+      .ant-image-preview-operations {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        .ant-image-preview-operations-operation{
+          // flex:1;
+        }
+      }
+      .ant-image-preview-operations-operation:nth-last-child(1){
+        display: none;
+      }    
+      .ant-image-preview-operations-operation:nth-last-child(2){
+        display: none;
+      }
+    }
+  }
+  ::v-deep .ant-tabs .ant-tabs-content-holder {
+    overflow: auto;
+    height: 80vh;
+    overflow: auto;
+    padding-right: 10px;
+  }
+</style>

src/views/demo/inspectionaudit/curbspotcity/MapList/index.vue

@@ -0,0 +1,951 @@
+<template>
+  <div class="map-list-content">
+    <div class="top-radio-button-div">
+      <a-radio-group 
+        v-model:value="props.infoScreenData.landType"
+        @change="(e) => emits('mapListScreenChange',e.target.value,'landType')"
+        button-style="solid"
+        style="width:100%">
+        <a-radio-button :value="0" class="radio-item">农用地</a-radio-button>
+        <a-radio-button :value="1" class="radio-item">建设用地</a-radio-button>
+        <a-radio-button :value="2" class="radio-item">推堆土</a-radio-button>
+      </a-radio-group>
+    </div>
+    <div class="screen-div">
+      <div class="screen-item" style="margin-right:20px;margin-bottom:12px;">
+        <div class="screen-item-label">年份</div>
+        <a-select
+          allowClear
+          style="width:120px;"
+          v-model:value="props.infoScreenData.year"
+          :options="yearOptions"
+          @change="(value) => emits('mapListScreenChange',value,'year')"
+        />
+      </div>
+      <div class="screen-item" style="margin-right:17px;margin-bottom:12px;">
+        <div class="screen-item-label" style="margin-right: 11px;">图斑来源</div>
+        <a-select
+          allowClear
+          style="width:120px;"
+          v-model:value="props.infoScreenData.patchSource"
+          :options="patchSourceOptions"
+          @change="(value) => emits('mapListScreenChange',value,'patchSource')"
+        />
+      </div>
+      <div class="screen-item" style="margin-bottom:12px;">
+        <div class="screen-item-label">批次</div>
+        <a-select
+          allowClear
+          style="width: 118px"
+          :options="batchOptions"
+          v-model:value="props.infoScreenData.batch"
+          @change="(value) => emits('mapListScreenChange',value,'batch')"
+        />
+      </div>
+      <!-- <div class="screen-item" style="margin-right:15px;margin-bottom:12px;">
+        <div class="screen-item-label">标注</div>
+        <a-select
+          allowClear
+          style="width:130px;"
+          v-model:value="props.infoScreenData.markType"
+          :options="markTypeOptions"
+          @change="(value) => emits('mapListScreenChange',value,'markType')"
+        />
+      </div> -->
+      <div class="screen-item" style="margin-right: 13px;">
+        <div class="screen-item-label">乡镇</div>
+        <a-select
+          allowClear
+          style="width:120px;"
+          v-model:value="props.infoScreenData.streetId"
+          :options="streetsAreaOptions"
+          @change="(value) => emits('mapListScreenChange',value,'streetId')"
+        />
+      </div>
+      <div class="screen-item" style="margin-bottom:12px;">
+        <div class="screen-item-label" style="margin-right: 10px;">下发时间</div>
+        <a-range-picker
+          :format="'YYYY-MM-DD'"
+          allowClear
+          style="width: 306px;"
+          class="item-time-select"
+          @change="(value) => emits('mapListScreenChange',value,'time')"
+        />
+      </div>
+     
+      <div class="screen-item" style="margin-right: 14px;">
+        <a-input
+          allowClear
+          placeholder="请输入图斑编号"
+          class="item-input"
+          v-model:value="props.infoScreenData.mapNo"
+          @change="(value) => emits('mapListScreenChange',value.target.value,'mapNo')"
+          style="width:404px;"
+          @press-enter="querysBtn"
+        />
+      </div>
+      <div class="screen-item" style="margin-left: 10px;cursor: pointer;">
+        <a-button 
+          class="item-button"
+          type="primary"
+          :icon="h(SearchOutlined)"
+          @click="querysBtn">查询</a-button>
+        <Icon style="font-size: 25px;margin-left: 10px;" icon="streamline:interface-time-reset-time-clock-reset-stopwatch-circle-measure-loading" @click="emits('resetScreenData')" />
+      </div>
+    </div>
+    <div class="sift-div">
+      <div class="layout-div">
+        <!-- <RollbackOutlined  class="back-button" @click="emits('closeShowInfo', false)"/> -->
+        <!-- <div class="interval-div"></div> -->
+        <div class="sift-item" @click="dataListSort('area')">
+          <div class="sift-label">总面积</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('area',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('area',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+        <div class="sift-item"  @click="dataListSort('gengdi_area')">
+          <div class="sift-label">耕地面积</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('gengdi_area',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('gengdi_area',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+        <div class="sift-item"  @click="dataListSort('synchronoustime')">
+          <div class="sift-label">下发时间</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('synchronoustime',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('synchronoustime',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+      </div>
+      <div class="collect-div">
+        <a-popover placement="bottom">
+          <template #content>
+            <div style="display:flex;">
+              <div>当前状态：</div>
+              <div>
+                <a-checkbox-group 
+                  v-model:value="props.infoScreenData.mapStatus"
+                  @change="(value) => emits('mapListScreenChange',value,'mapStatus')"
+                  style="width: 100%" 
+                  :options="mapStatusOptions"></a-checkbox-group>
+                </div>
+            </div>
+            <!-- <div style="display:flex;">
+              <div>是否超期：</div>
+              <div>
+                <a-checkbox-group 
+                v-model:value="props.infoScreenData.isOverdue"
+                @change="(value) => emits('mapListScreenChange',value,'isOverdue')"
+                style="width: 100%" 
+                :options="isOverdueOptions"></a-checkbox-group>
+              </div>
+            </div> -->
+            <div style="display:flex;align-items: center;margin-top: 4px;">
+              <div>图斑面积：</div>
+              <div style="display:flex;">
+                <a-input style="width:30%;" 
+                  v-model:value="props.infoScreenData.mapAreaFirst"
+                  @change="(e) => emits('mapListScreenChange',e.target.value,'mapAreaFirst')"
+                  />
+                <span>---</span>
+                <a-input  style="width:30%;margin-right: 4px;"
+                  v-model:value="props.infoScreenData.mapAreaLast"
+                  @change="(e) => emits('mapListScreenChange',e.target.value,'mapAreaLast')"
+                  />
+                  亩
+              </div>
+            </div>
+            <div style="display:flex;margin-top: 4px;">
+              <div>耕地面积：</div>
+              <div style="display:flex;align-items: center;">
+                <a-input style="width:30%;"
+                  v-model:value="props.infoScreenData.arableAreaFirst"
+                  @change="(e) => emits('mapListScreenChange',e.target.value,'arableAreaFirst')"
+                  />
+                <span>---</span>
+                <a-input  style="width:30%;margin-right: 4px;"
+                  v-model:value="props.infoScreenData.arableAreaLast"
+                  @change="(e) => emits('mapListScreenChange',e.target.value,'arableAreaLast')"
+                  />
+                  亩
+              </div>
+            </div>
+          </template>
+          <img src="@/assets/images/tiankongdi/filt.png" class="img-box mr-r-20" />
+        </a-popover>
+        <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"  @click="getCollectList" v-if="openCollect"/>
+        <img src="@/assets/images/tiankongdi/collect.png" class="img-box"  @click="getCollectList" v-else/>
+      </div>
+    </div>
+    <div class="data-list-div" style="padding-top: 1px;">
+      <div v-for="(item, index) in props.infoDataList" :key="index" class="data-list-item">
+        <div class="back-box" v-if="showDrawBack(item,true)">{{ drawBackSpan(item,true) }}</div>
+        <div class="data-list-layout-div">
+          <div class="data-list-title-div">
+            <img src="/positioning.png" class="map-mark" style="cursor:pointer;" @click="locationFun(item)"/>
+            <div class="label-div">
+              <div class="item-label">{{item.countyname}}</div>
+              <div class="item-sub-label">
+                <span style="margin-right:12px;">{{item.streetname}}</span>
+                <span>{{item.caseno}}</span>
+              </div>
+            </div>
+            <div class="item-mark" v-if="item.isbuildname">{{item.isbuildname}}</div>
+          </div>
+          <div class="data-item-type-div" style="cursor:pointer;" @click="goAudit(item)">
+            {{item.unitname}}
+          </div>
+        </div>
+        <div class="data-list-info-div">
+          <div class="info-layout-div">
+            <div class="info-item" style="width: 130px;">
+              <div class="info-label">总面积</div>
+              <div class="info-data" :title="dataProcessing(item.area)">{{dataProcessing(item.area)}}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">农用地</div>
+              <div class="info-data" :title="dataProcessing(item.nongyongdiarea)">{{dataProcessing(item.nongyongdiarea)}}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">耕地</div>
+              <div class="info-data" :title="dataProcessing(item.gengdiarea)">{{dataProcessing(item.gengdiarea)}}</div>
+            </div>
+            <div class="info-item" style="width: 120px;">
+              <div class="info-label">永农面积</div>
+              <div class="info-data" :title="dataProcessing(item.yongjiujibennongtianarea)">{{dataProcessing(item.yongjiujibennongtianarea)}}</div>
+            </div>
+          </div>
+          <div class="info-layout-div">
+            <!-- <span class="info-time">{{item.createdate}}</span> -->
+            <div>
+              <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"   @click="collectItem(item)"  v-if="item.fid"/>
+              <img src="@/assets/images/tiankongdi/collect.png" class="img-box"   @click="collectItem(item)"  v-else/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pagination-div">
+      <a-pagination 
+        size="small" 
+        v-model:pageSize="props.pageSize"
+        v-model:current="props.pageNo" 
+        :total="props.total" 
+        :show-total="total => `共 ${total} 条数据`"
+        show-size-changer 
+        show-quick-jumper
+        @change="changePage" />
+    </div>
+    <a-modal
+      style="width:100vw;top:0px;left:0px;margin:0px;padding:0px;"
+      wrap-class-name="full-modal"
+      v-model:open="showInfoOpen"
+      title="详情"
+      :footer="null"
+      :maskClosable="true"
+      :destroyOnClose="true"
+      @cancel="showInfoOpen = false"
+    >
+      <div class="modal-content">
+        <ShowInfoModal :showInfoData="showInfoData"/>
+      </div>
+    </a-modal>
+    <a-modal
+      width="100%"
+      wrap-class-name="full-modal"
+      v-model:open="auditOpen"
+      title="接收办理"
+      footer=""
+      :destroyOnClose="true"
+    >
+      <template #footer> </template>
+      <div class="handoff">
+        <a-button
+          type="primary" 
+          style="margin-right: 25px;"
+          @click="prevData"
+        >上一条</a-button>
+        <a-button
+          type="primary"
+          @click="nextData"
+        >下一条</a-button>
+      </div>
+      <Audit
+        v-if="handoffShow"
+        ref="posRef"
+        :processId="processId"
+        :taskId="taskId"
+        :isRead="isRead"
+        :type="type"
+        :auditData="auditData"
+        @closeModel="closeMolder"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineEmits, defineProps, computed, h, watch } from "vue"
+import { StarOutlined, StarFilled, SearchOutlined, RollbackOutlined } from '@ant-design/icons-vue';
+import Icon from '@/components/Icon/Icon.vue';
+import { addCaseFavorite,addTaskFavorite,getCaseInfoById, deleteFavoriteCase,deleteTaskCase,getLoadStreet, getLoadDroneCaseInfoDetail } from '@/api/inspectionaudit/index.ts';
+import { 
+  batchOptions,
+  yearOptions,
+  mapTypeOptions,
+  illegalTypeOptions,
+  measureOptions,
+  mapStatusOptions,
+  markTypeOptions,
+  patchSourceOptions,
+  isOverdueOptions,
+} from '@/utils/global'
+import { useUserStore } from '@/store/modules/user.ts'
+import { message } from "ant-design-vue";
+import ShowInfoModal from './ShowInfoModal/index.vue'
+import { flowStore } from '@/store/modules/flow';
+import { getDetail } from '@/api/sys/WFSchemeInfo';
+import { Audit } from '@/views/demo/workflow/task/process/page';
+import { dataProcessing } from '@/views/demo/tiankongdi/util.ts'
+import {showDrawBack, drawBackSpan} from '@/views/demo/util'
+const userStore = useUserStore()
+const flowWfDataStore = flowStore();
+const emits = defineEmits([
+  "closeShowInfo",
+  "mapListScreenChange",
+  "changeInfoPage",
+  "getInfoList",
+  "changeTask",
+  "infoDataListSort",
+  "collectChange",
+  "resetScreenData",
+  "changeInfoDataList",
+])
+const props = defineProps([
+  "infoScreenData",
+  "cityType",
+  "municipalAreaOptions",
+  "countiesAreaOptions",
+  "communitiesAreaOptions",
+  "pageNo",
+  "pageSize",
+  "total",
+  "infoDataList"
+])
+const order = ref(0) // 0: 不排序 1: 升序 2: 降序
+const landType = ref(0)
+const orderMark = () => {
+  switch(order.value){
+    case 0:
+      return '-'
+    case 1:
+      return '↑'
+    case 2:
+      return '↓'
+  }
+}
+const showInfoOpen = ref(false)
+const showDataId = ref()
+const nextShowDataId = ref()
+const prevShowDataId = ref()
+watch(() => showDataId.value, () => {
+  let index = props.infoDataList.findIndex(item => item.id == showDataId.value)
+  if(index < props.infoDataList.length - 1){
+    nextShowDataId.value =  props.infoDataList[index + 1].id
+  }else{
+    nextShowDataId.value = 0
+  }
+  if(index > 0){
+    prevShowDataId.value = props.infoDataList[index - 1].id
+  }else{
+    prevShowDataId.value = 0
+  }
+})
+const auditOpen = ref(false);
+const processId = ref('');
+const taskId = ref('');
+const type = ref('');
+const auditData = ref()
+const handoffShow = ref(true)
+const isRead: any = ref(0);
+const openCollect = computed(() => {
+  if(props.infoScreenData.type === '') return false
+  return true
+})
+const showInfoData = ref()
+const streetsAreaOptions =  ref([
+  { label: '全部', value: '' },
+])
+
+onMounted(() => {
+  getLoadStreet().then(res => {
+    console.log(res)
+    res.forEach(item => {
+      streetsAreaOptions.value.push({
+        label: item.Name,
+        value: item.Id,
+      })
+    })
+  })
+  console.log('onMounted')
+})
+
+async function locationFun(record) {
+  console.log(record);
+  emits('changeTask', record.geomid);
+}
+
+const changePage = (page, pageSize) => {
+  console.log(page,pageSize)
+  emits('changeInfoPage',page,pageSize)
+}
+const querysBtn = ()=>{
+  emits('getInfoList')
+  emits('changeInfoPage',1,props.pageSize)
+
+}
+const collectItem = (item) => {
+  console.log(item)
+  if(item.fid){
+    cancelCollectItem(item)
+    return
+  }
+  let userInfo = userStore.getUserInfo
+  let params = {
+    // id: item.id,
+    taskId: item.taskid,
+    favoriteUserId: userInfo.id
+  }
+  addTaskFavorite(params).then(res => {
+    console.log(res)
+    message.success('收藏成功')
+    emits('getInfoList')
+  })
+}
+const cancelCollectItem = (item) => {
+  deleteTaskCase(item.fid).then(res => {
+    message.success('取消收藏成功')
+    emits('getInfoList')
+  })
+}
+const getCollectList = () => {
+  let collect = props.infoScreenData.type
+  let value: number|string = ''
+  if(collect === ''){
+    value = 1
+  }else if(collect === 1){
+    value = ''
+  }
+  emits('collectChange', value)
+}
+const showSortMark = (key, sort) => {
+  if(props.infoScreenData.sort === key && sort === order.value){
+    return true
+  }
+  return false
+}
+const dataListSort = (type) => {
+  if(props.infoScreenData.sort === '' || props.infoScreenData.sort === type){
+    order.value = (order.value + 1) % 3
+  }else{
+    order.value = 1
+  }
+  emits('infoDataListSort', type, order.value)
+}
+
+
+
+
+const showInfo = (item) => {
+  getCaseInfoById({id:item.id}).then(res => {
+    showInfoData.value = res
+    showInfoOpen.value = true
+  })
+}
+async function goAudit(record) {
+  showDataId.value = record.id
+  let data = await getDetail({ code: record.processcode });
+  let scheme = JSON.parse(data.scheme.content);
+  let wfData = scheme.wfData;
+  flowWfDataStore.setWfDataAll(wfData);
+  auditOpen.value = true;
+  processId.value = record.processid;
+  taskId.value = record.taskid;
+  type.value = record.type;
+  auditData.value = record;
+}
+const prevData = async () => {
+  if(prevShowDataId.value === 0){
+    if(props.pageNo === 1 || props.total == 0){
+      message.warning('已经是第一条数据了')
+      return
+    }
+    getLoadDroneCaseInfoDetail(getParams({page: props.pageNo - 1})).then(async res => {
+      emits('changeInfoDataList',res.items,res.total,props.pageNo - 1)
+      handoffShow.value = false
+      let record = res.items[res.items.length -1]
+      let data = await getDetail({ code: record.processcode });
+      let scheme = JSON.parse(data.scheme.content);
+      let wfData = scheme.wfData;
+      flowWfDataStore.setWfDataAll(wfData);
+      processId.value = record.processid;
+      taskId.value = record.taskid;
+      type.value = record.type;
+      handoffShow.value = true
+      showDataId.value = res.items[res.items.length -1].id
+      auditData.value = res.items[res.items.length -1];
+    })
+    return
+  }else{
+    showDataId.value = prevShowDataId.value
+  }
+  handoffShow.value = false
+  let record = props.infoDataList.find(item => item.id == showDataId.value)
+  let data = await getDetail({ code: record.processcode });
+  let scheme = JSON.parse(data.scheme.content);
+  let wfData = scheme.wfData;
+  flowWfDataStore.setWfDataAll(wfData);
+  processId.value = record.processid;
+  taskId.value = record.taskid;
+  type.value = record.type;
+  handoffShow.value = true
+  auditData.value = record;
+}
+const nextData = async () => {
+  if(nextShowDataId.value === 0){
+    if((Math.ceil(props.total / props.pageSize) <= props.pageNo) || props.total == 0){
+      message.warning('已经是最后一条数据了')
+      return
+    }
+    getLoadDroneCaseInfoDetail(getParams({page: props.pageNo + 1})).then(async res => {
+      emits('changeInfoDataList',res.items,res.total,props.pageNo + 1)
+      handoffShow.value = false
+      let record = res.items[0]
+      let data = await getDetail({ code: record.processcode });
+      let scheme = JSON.parse(data.scheme.content);
+      let wfData = scheme.wfData;
+      flowWfDataStore.setWfDataAll(wfData);
+      processId.value = record.processid;
+      taskId.value = record.taskid;
+      type.value = record.type;
+      handoffShow.value = true
+      showDataId.value = res.items[0].id
+      auditData.value = res.items[0]
+    })
+    return
+  }else{
+    showDataId.value = nextShowDataId.value
+  }
+  handoffShow.value = false
+  let record = props.infoDataList.find(item => item.id == showDataId.value)
+  let data = await getDetail({ code: record.processcode });
+  let scheme = JSON.parse(data.scheme.content);
+  let wfData = scheme.wfData;
+  flowWfDataStore.setWfDataAll(wfData);
+  processId.value = record.processid;
+  taskId.value = record.taskid;
+  type.value = record.type;
+  handoffShow.value = true
+  auditData.value = record;
+}
+const closeMolder = () => {
+  emits('getInfoList')
+}
+const getParams = (data) => {
+  let result = {}
+  let params = {
+    landType: props.infoScreenData.landType, //0 农用地 1建设用地
+    isOutTime: props.infoScreenData.isOverdue, //是否超期
+    year: props.infoScreenData.year, //年
+    tubanlaiyuan: props.infoScreenData.patchSource, //图斑来源
+    picihao: props.infoScreenData.batch, //批次号
+    streetid: props.infoScreenData.streetId,
+    caseNo: props.infoScreenData.mapNo, //图版编号
+    startTime: props.infoScreenData.startTime, // 下发开始时间
+    endTime: props.infoScreenData.endTime, // 下发结束时间
+    nowStatus: props.infoScreenData.mapStatus, // 当前状态
+    isBuildName: props.infoScreenData.markType, // 标注
+    tubanArea1: props.infoScreenData.mapAreaFirst, // 图斑面积1
+    tubanArea2: props.infoScreenData.mapAreaLast, // 图斑面积2
+    gengdiArea1: props.infoScreenData.arableAreaFirst, //耕地面积1
+    gengdiArea2: props.infoScreenData.arableAreaLast, //耕地面积2
+    page: props.pageNo,
+    limit: props.pageSize,
+    sortType: props.infoScreenData.sort,
+    order: props.infoScreenData.order,
+    type: props.infoScreenData.type,
+    ...data,
+  }
+  Object.keys(params).forEach(key => {
+    if(params[key] !== '' && params[key] !== null){
+      if(key === 'nowStatus'){
+        result[key] = params[key].join(',')
+      }else if(key === 'isOutTime'){
+        if(params[key].length == 1){
+          result[key] = params[key][0]
+        }
+      }else{
+        result[key] = params[key]
+      }
+    }
+  })
+  return result
+}
+</script>
+
+<style lang="scss" scoped>
+.handoff{
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 25px;
+}
+.full-modal {
+  .ant-modal {
+    min-width: 100vw;
+    top: 0px;
+    padding: 0px;
+    margin: 0px;
+  }
+  .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+  }
+  .ant-modal-body {
+    flex: 1;
+  }
+}
+::v-deep .ant-modal {
+  width: 100vw!important;
+  top: 0px;
+  padding: 0px;
+  margin: 0px;
+}
+::v-deep .ant-modal-content{
+  width: 100vw!important;
+  background:red!important;
+}
+.map-list-content{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.rollback {
+  background: #fff;
+  padding: 10px;
+}
+.screen-div{
+  padding: 10px 12px 20px 13px;
+  display: flex;
+  width:590px;
+  flex-wrap: wrap;
+  .screen-item{
+    // width: 33.3%;
+    display: flex;
+    height: 39px;
+    // margin-bottom: 12px;
+    // font-family: Alibaba PuHuiTi;
+    // font-weight: 500;
+    // font-size: 17px;
+    // color: #000000;
+    .screen-item-label{
+      font-family: Alibaba PuHuiTi;
+      font-weight: 500;
+      font-size: 17px;
+      color: #000000;
+      line-height: 30px;
+      // width: 53px;
+      // padding-left: 10px;
+      display: flex;
+      align-items: center;
+      margin-right: 9px;
+      // font-size: 15px;
+    }
+    :deep(.ant-select-selector){
+      display: flex;
+      align-items: center;
+      font-family: HarmonyOS Sans;
+      font-weight: 500;
+      font-size: 19px;
+      color: #000000;
+      line-height: 30px;
+      height: 39px;
+      box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
+    }
+    .item-input{
+      width:373px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 500;
+      font-size: 17px;
+      color: #000000;
+      line-height: 30px;
+      box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
+    }
+    .item-time-select{
+      box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
+      :deep(input){
+        font-family: HarmonyOS Sans;
+        font-weight: 500;
+        font-size: 15px;
+        color: #000000;
+        line-height: 30px;
+      }
+    }
+    .item-button{
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      font-size: 19px;
+      color: #FFFFFF;
+      line-height: 30px;
+      height:39px;
+      width: 97px;
+      background: #086DEC;
+      // margin-left:12px;
+    }
+  }
+  .screen-button-div{
+    display: flex;
+    // justify-content: space-between;
+    width: 100%;
+    button{
+      margin-right: 5px;
+    }
+  }
+}
+.top-radio-button-div{
+  width:100%;
+  padding: 33px 12px 8px 13px;
+  .ant-radio-group{
+    display: flex;
+
+  }
+  :deep(.ant-radio-button-wrapper-checked){
+    font-family: Alibaba PuHuiTi;
+    font-weight: 500 !important;
+    font-size: 20px;
+    color: #FFFFFF !important;
+    line-height: 40px;
+    background: #086DEC;
+  }
+  .radio-item{
+    width:33%;
+    text-align: center;
+    height: 40px;
+    user-select: none;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    font-size: 20px;
+    color: #000000;
+    line-height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center
+  }
+}
+.sift-div{
+    background:#fff;
+     height: 77px;
+     padding:19px 13px;
+     margin-left: 10px;
+     margin-right: 10px;
+     border-radius: 10px 10px 0px 0px;
+     display: flex;
+     justify-content: space-between;
+     .layout-div{
+      display:flex;
+      .back-button{
+        font-size:22px;
+        cursor:pointer;
+      }
+      .interval-div{
+        height:100%;
+        width:1px;
+        background:#EDEDED;
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+      .sift-item{
+        display: flex;
+        align-items: center;
+        margin-right:15px;
+        cursor:pointer;
+        user-select:none;
+        .sift-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 19px;
+          color: #000000;
+        }
+        .sift-icon{
+          font-size: 9px;
+          margin-left:5px;
+          opacity: 0.53;
+        }
+      }
+     }
+     .collect-div{
+      display:flex;
+      align-items:center;
+     }
+  }
+.data-list-div{
+  flex: 1;
+  overflow: auto;
+  padding: 10px;
+  scrollbar-width: none; /* firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  .data-list-item{
+    background:#fff;
+    padding:20px 10px 10px 10px;
+    // border-radius:6px;
+    margin-bottom:1px;
+    position: relative;
+    .back-box{
+      position: absolute;
+      right: 0;
+      top:0;
+      background: #EA1C06;
+      padding: 3px 6px;
+      color: #fff;
+      font-size: 12px;
+      border-radius: 0px 0px 0px 8px;
+    }
+    .data-list-layout-div{
+      display:flex;
+      justify-content: space-between;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #E5E5E5;
+      height: 45px;
+      .data-list-title-div{
+        display:flex;
+        align-items: center;
+        .map-mark{
+          width:17px;
+          height:17px;
+        }
+        .label-div{
+          display: flex;
+          align-items: baseline;
+          margin-right: 12px
+        }
+        .item-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 23px;
+          color: #000000;
+          margin-left: 9px;
+          margin-right:10px;
+        }
+        .item-sub-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 17px;
+          color: #000000;
+        }
+        .item-mark{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 13px;
+          margin-left: 17px;
+          color: #696969;    
+          margin-top: 4px;
+        }
+      }
+      .data-item-type-div{
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        font-size: 15px;
+        color: #696969;
+        display: flex;
+        align-items: center;
+        cursor:pointer;
+        user-select: none;
+      }
+    }
+    .data-list-info-div{
+      display: flex;
+      justify-content: space-between;
+      margin-top: 10px;
+      height: 40px;
+      .info-layout-div{
+        display:flex;
+        align-items: center;
+        .info-time{
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 15px;
+          color: #000000;
+          margin-right: 5px;
+        }
+      }
+      .info-item{
+        display:flex;
+        background: rgba(237, 237, 237, 0.55);
+        align-items: center;
+        width: 110px;
+        border-radius: 7px;
+        margin-right: 8px;
+        height: 33px;
+        justify-content: center;
+        .info-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          font-size: 13px;
+          color: #959494;
+          // width:45%;
+          display: flex;
+          justify-content: center;
+          padding-right: 5px;
+          white-space: nowrap;
+        }
+        .info-data{
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 13px;
+          color: #000000;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  } 
+  .data-list-item:nth-last-child(1){
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px
+  }
+}
+.data-list-div::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+.pagination-div{
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.modal-content{
+  padding:15px;
+  width: 100%;
+  height: calc(100vh - 65px);
+  overflow: auto;
+}
+
+::v-deep .ant-modal{
+ min-width:100vw!important;
+}
+.img-box{
+  width: 25px;
+  cursor: pointer;
+}
+.mr-r-20{
+  margin-right: 20px;
+}
+.img-box.small{
+  width: 18px;
+  margin-right: 6px;
+  margin-bottom: 2px;
+}
+</style>

src/views/demo/inspectionaudit/curbspotcity/index.vue

@@ -0,0 +1,469 @@
+<template>
+  <div class="curb-spot-city">
+    <div class="show-list">
+      <a-spin :spinning="spinning">
+        <MapList
+          :infoScreenData="infoScreenData"
+          :cityType="cityType"
+          :pageNo="pageNo"
+          :pageSize="pageSize"
+          :total="total"
+          :infoDataList="infoDataList"
+          :municipalAreaOptions="municipalAreaOptions"
+          :countiesAreaOptions="countiesAreaOptions"
+          :streetsAreaOptions="streetsAreaOptions"
+          :communitiesAreaOptions="communitiesAreaOptions"
+          @infoDataListSort="infoDataListSort"
+          @changeInfoPage="changeInfoPage"
+          @getInfoList="getInfoList"
+          @mapListScreenChange="mapListScreenChange"
+          @closeShowInfo="changeShowInfo"
+          @changeTask="changeTask"
+          @collectChange="collectChange"
+          @resetScreenData="resetScreenData"
+          @changeInfoDataList="changeInfoDataList"
+        />
+      </a-spin>
+    </div>
+    <MapboxMap
+      :mapConfig="mapConfig"
+      @handlerDrawComplete="handlerDrawComplete"
+      @mapOnLoad="onMapboxLoad"
+      ref="MapboxComponent"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted, watch, defineAsyncComponent } from 'vue';
+  import mapboxgl, { Map } from 'mapbox-gl';
+  import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config';
+  import MapList from './MapList/index.vue';
+  import {
+    getLoadDroneCaseInfoCount,
+    getLoadDroneCaseInfoDetail,
+    getLoadParents,
+  } from '@/api/inspectionaudit/index.ts';
+  import { getChildrenTree } from '@/api/demo/system';
+  import { getGeom, getConfig } from '@/api/sys/layerManagement';
+  import dayjs from 'dayjs';
+
+  const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
+  const MapboxComponent = ref();
+  const mapConfig = ref({ isShowMap: false });
+
+  function onMapboxLoad(): void {
+    getConfig({ code: 'mapsetting' }).then((res) => {
+      mapConfig.value = JSON.parse(res.codeValue);
+    });
+  }
+  const showInfo = ref(true);
+  const year = ref<number>();
+  const batch = ref();
+  const dataList = ref<any>([]);
+  const infoDataList = ref<any>([]);
+  const infoScreenData = ref({
+    landType: 0,
+    year: '',
+    batch: '',
+    patchSource: '',
+    mapNo: '',
+    mapType: '',
+    // countyId: '',
+    streetId: '',
+    // downtownId: '',
+    // communityId: '',
+    startTime: '',
+    endTime: '',
+    isOverdue: '',
+    illegalType: '',
+    measure: '',
+    mapStatus: '',
+    markType: '',
+    sort: '',
+    order: '',
+    type: '', // 收藏
+    mapAreaFirst: '',
+    mapAreaLast: '',
+    arableAreaFirst: '',
+    arableAreaLast: '',
+  });
+  const pageNo = ref(1);
+  const pageSize = ref(10);
+  const total = ref(0);
+  const municipalAreaOptions = ref<any[]>([]);
+  const countiesAreaOptions = ref([{ label: '全部', value: '' }]);
+  const streetsAreaOptions = ref([{ label: '全部', value: '' }]);
+  const communitiesAreaOptions = ref([{ label: '全部', value: '' }]);
+  const cityType = ref();
+  const spinning = ref(false);
+  const auditProgressScreenChange = (value, type) => {
+    switch (type) {
+      case 'year':
+        year.value = value;
+        break;
+      case 'batch':
+        batch.value = value;
+        break;
+    }
+    let params = {
+      year: year.value,
+    };
+    spinning.value = true;
+    getLoadDroneCaseInfoCount(params)
+      .then((res) => {
+        console.log(res);
+        dataList.value = res;
+      })
+      .finally(() => {
+        spinning.value = false;
+      });
+  };
+  const mapListScreenChange = (value, type) => {
+    switch (type) {
+      case 'landType':
+        infoScreenData.value.landType = value;
+        pageNo.value = 1;
+        getInfoList();
+        break;
+      case 'year':
+        infoScreenData.value.year = value;
+        break;
+      case 'batch':
+        infoScreenData.value.batch = value;
+        break;
+      case 'patchSource':
+        infoScreenData.value.patchSource = value;
+        break;
+      case 'mapNo':
+        infoScreenData.value.mapNo = value;
+        break;
+      // case 'countyId':
+      //   infoScreenData.value.countyId = value
+      //   break
+      case 'streetId':
+        infoScreenData.value.streetId = value;
+        break;
+      case 'time':
+        if (value) {
+          infoScreenData.value.startTime = dayjs(value[0]).format('YYYY-MM-DD');
+          infoScreenData.value.endTime = dayjs(value[1]).format('YYYY-MM-DD');
+        } else {
+          infoScreenData.value.startTime = '';
+          infoScreenData.value.endTime = '';
+        }
+        break;
+      // case 'communityId':
+      //   infoScreenData.value.communityId = value
+      //   break
+      case 'mapType':
+        infoScreenData.value.mapType = value;
+        if (value !== 1) {
+          infoScreenData.value.illegalType = '';
+          infoScreenData.value.measure = '';
+        }
+        break;
+      case 'illegalType':
+        infoScreenData.value.illegalType = value;
+        if (value !== 0) {
+          infoScreenData.value.measure = '';
+        }
+        break;
+      case 'measure':
+        infoScreenData.value.measure = value;
+        break;
+      case 'mapStatus':
+        infoScreenData.value.mapStatus = value;
+        break;
+      case 'isOverdue':
+        infoScreenData.value.isOverdue = value;
+        break;
+      case 'markType':
+        infoScreenData.value.markType = value;
+        break;
+      case 'mapAreaFirst':
+        infoScreenData.value.mapAreaFirst = value;
+        break;
+      case 'mapAreaLast':
+        infoScreenData.value.mapAreaLast = value;
+        break;
+      case 'arableAreaFirst':
+        infoScreenData.value.arableAreaFirst = value;
+        break;
+      case 'arableAreaLast':
+        infoScreenData.value.arableAreaLast = value;
+        break;
+    }
+  };
+  const changeShowInfo = async (value, item) => {
+    if (item) {
+      cityType.value = item;
+      let childList = await getChildrenTree({ parentId: item.areaid });
+      let params = {
+        childId: item.areaid,
+      };
+      let parents = await getLoadParents(params);
+      parents.forEach((parent) => {
+        switch (parent.level) {
+          case 0:
+            municipalAreaOptions.value.push({
+              label: parent.name,
+              value: parent.id,
+            });
+            infoScreenData.value.downtownId = parent.id;
+            childList.forEach((cityItem) => {
+              countiesAreaOptions.value.push({
+                label: cityItem.name,
+                value: cityItem.id,
+              });
+            });
+            break;
+          case 1:
+            countiesAreaOptions.value.push({
+              label: parent.name,
+              value: parent.id,
+            });
+            infoScreenData.value.countyId = parent.id;
+            childList.forEach((cityItem) => {
+              streetsAreaOptions.value.push({
+                label: cityItem.name,
+                value: cityItem.id,
+              });
+            });
+            break;
+          case 2:
+            streetsAreaOptions.value.push({
+              label: parent.name,
+              value: parent.id,
+            });
+            infoScreenData.value.streetId = parent.id;
+            childList.forEach((cityItem) => {
+              communitiesAreaOptions.value.push({
+                label: cityItem.name,
+                value: cityItem.id,
+              });
+            });
+            break;
+          case 3:
+            communitiesAreaOptions.value.push({
+              label: parent.name,
+              value: parent.id,
+            });
+            infoScreenData.value.communityId = parent.id;
+            break;
+        }
+      });
+      await getInfoList();
+      showInfo.value = value;
+    } else {
+      cityType.value = null;
+      showInfo.value = value;
+    }
+    console.log(item);
+  };
+  const getParams = () => {
+    let result = {};
+    let params = {
+      landType: infoScreenData.value.landType, //0 农用地 1建设用地
+      isOutTime: infoScreenData.value.isOverdue, //是否超期
+      year: infoScreenData.value.year, //年
+      tubanlaiyuan: infoScreenData.value.patchSource, //图斑来源
+      picihao: infoScreenData.value.batch, //批次号
+      // countyid: infoScreenData.value.countyId,
+      streetid: infoScreenData.value.streetId,
+      // communityId: infoScreenData.value.communityId,
+      caseNo: infoScreenData.value.mapNo, //图版编号
+      startTime: infoScreenData.value.startTime, // 下发开始时间
+      endTime: infoScreenData.value.endTime, // 下发结束时间
+      // is_illegal: infoScreenData.value.mapType,
+      // weifaleixing: infoScreenData.value.illegalType,
+      // measure_name: infoScreenData.value.measure,
+      nowStatus: infoScreenData.value.mapStatus, // 当前状态
+      isBuildName: infoScreenData.value.markType, // 标注
+      tubanArea1: infoScreenData.value.mapAreaFirst, // 图斑面积1
+      tubanArea2: infoScreenData.value.mapAreaLast, // 图斑面积2
+      gengdiArea1: infoScreenData.value.arableAreaFirst, //耕地面积1
+      gengdiArea2: infoScreenData.value.arableAreaLast, //耕地面积2
+      // areaid: cityType.value.areaid,
+      // level: cityType.value.level,
+      page: pageNo.value,
+      limit: pageSize.value,
+      sortType: infoScreenData.value.sort,
+      order: infoScreenData.value.order,
+      type: infoScreenData.value.type,
+    };
+    Object.keys(params).forEach((key) => {
+      if (params[key] !== '' && params[key] !== null) {
+        if (key === 'nowStatus') {
+          result[key] = params[key].join(',');
+        } else if (key === 'isOutTime') {
+          if (params[key].length == 1) {
+            result[key] = params[key][0];
+          }
+        } else {
+          result[key] = params[key];
+        }
+      }
+    });
+    return result;
+  };
+  watch(
+    () => year.value,
+    (newVal) => {
+      infoScreenData.value.year = newVal;
+    },
+  );
+  watch(
+    () => batch.value,
+    (newVal) => {
+      infoScreenData.value.batch = newVal;
+    },
+  );
+  let map: Map;
+  onMounted(() => {
+    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
+    // map = initMap();
+    getLoadDroneCaseInfoCount()
+      .then((res) => {
+        dataList.value = res;
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  });
+  onUnmounted(() => {
+    map && map.remove();
+  });
+  const initMap = () => {
+    return new mapboxgl.Map({
+      container: 'showMap',
+      language: 'zh-cmn',
+      projection: 'equirectangular', // wgs84参考系
+      style: MapboxDefaultStyle,
+      maxZoom: 22,
+      minZoom: 6,
+      zoom: 10,
+      // ...props.mapOptions,
+      center: [117.984425, 35.270654],
+    });
+  };
+  const getInfoList = () => {
+    spinning.value = true;
+    return getLoadDroneCaseInfoDetail(getParams())
+      .then((res) => {
+        total.value = res.total;
+        infoDataList.value = res.items;
+      })
+      .finally(() => {
+        spinning.value = false;
+      });
+  };
+  const changeInfoPage = async (page, limit) => {
+    pageNo.value = page;
+    pageSize.value = limit;
+    await getInfoList();
+  };
+  const changeInfoDataList = (list, totalNumber, page) => {
+    infoDataList.value = list;
+    total.value = totalNumber;
+    pageNo.value = page;
+  };
+  const collectChange = (value) => {
+    pageNo.value = 1;
+    infoScreenData.value.type = value;
+    getInfoList();
+  };
+
+  function changeTask(val) {
+    let getGeomPrams = {
+      TableName: 'drone_shp_data ',
+      FieldName: 'gid',
+      FieldValue: val?.split(','),
+      page: 1,
+      limit: 999,
+      key: null,
+    };
+    if (val) {
+      getGeom(getGeomPrams).then((res) => {
+        let geoms = [];
+        if (res) {
+          if (res.items?.length > 0) {
+            res.items.forEach((item, index) => {
+              let geom = {
+                key: item.gid,
+                mapgeom: item.geometry,
+              };
+              geoms.push(geom);
+            });
+          }
+          // MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
+          MapboxComponent.value.handlerDraw('Details', geoms, false);
+        } else {
+          createMessage.error('当前数据没有图斑！');
+        }
+      });
+    } else {
+      createMessage.error('当前数据没有图斑！');
+    }
+  }
+  const infoDataListSort = (type, order) => {
+    switch (order) {
+      case 0:
+        infoScreenData.value.sort = '';
+        infoScreenData.value.order = '';
+        break;
+      case 1:
+        infoScreenData.value.sort = type;
+        infoScreenData.value.order = 'asc';
+        break;
+      case 2:
+        infoScreenData.value.sort = type;
+        infoScreenData.value.order = 'desc';
+        break;
+    }
+    spinning.value = true;
+    getLoadDroneCaseInfoDetail(getParams())
+      .then((res) => {
+        total.value = res.total;
+        infoDataList.value = res.items;
+        // pageNo.value = 1
+      })
+      .finally(() => {
+        spinning.value = false;
+      });
+  };
+  const resetScreenData = () => {
+    infoScreenData.value.mapNo = '';
+    infoScreenData.value.streetId = '';
+    infoScreenData.value.mapType = '';
+    infoScreenData.value.illegalType = '';
+    infoScreenData.value.measure = '';
+    infoScreenData.value.mapStatus = '';
+    infoScreenData.value.markType = '';
+    getInfoList();
+  };
+  onMounted(() => {
+    getInfoList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .curb-spot-city {
+    height: 100%;
+    display: flex;
+    .show-list {
+      width: 590px;
+      background: #efefef;
+      :deep(.ant-spin-nested-loading) {
+        height: 100%;
+      }
+      :deep(.ant-spin-container) {
+        height: 100%;
+      }
+    }
+    .map {
+      width: 65%;
+      background: burlywood;
+    }
+  }
+</style>

src/views/demo/inspectionaudit/illegaltreatment/AuditProgress/index.vue

@@ -0,0 +1,682 @@
+<template>
+  <div class="screen-div">
+    <!-- <div class="screen-row"> -->
+      <div class="screen-item" style="margin-bottom:12px;">
+        <div class="screen-item-label" style="margin-right: 9px">年份</div>
+        <a-select
+          allowClear
+          style="width: 103px"
+          v-model:value="props.year"
+          :options="yearOptions"
+          @change="
+            (value) => {
+              emits('auditProgressScreenChange', value, 'year');
+            }
+          "
+        />
+      </div>
+      <div class="screen-item" style="margin-left: 20px; margin-right: 17px;margin-bottom:12px;">
+        <div class="screen-item-label" style="margin-right: 11px">图斑来源</div>
+        <a-select
+          allowClear
+          style="width: 142px"
+          v-model:value="props.patchSource"
+          :options="patchSourceOptions"
+          @change="
+            (value) => {
+              emits('auditProgressScreenChange', value, 'patchSource');
+            }
+          "
+        />
+      </div>
+      <div class="screen-item" style="margin-bottom:12px;">
+        <div class="screen-item-label" style="margin-right: 9px">批次</div>
+        <a-select
+          allowClear
+          style="width: 117px"
+          v-model:value="props.batch"
+          :options="props.batchOptions"
+          @change="
+            (value) => {
+              emits('auditProgressScreenChange', value, 'batch');
+            }
+          "
+        />
+      </div>
+      <div class="screen-item" style="margin-right: 14px;">
+        <a-input
+          allowClear
+          placeholder="请输入图斑编号(模糊查询获取近十条数据)"
+          class="item-input"
+          v-model:value="mapNo"
+          style="width:443px;"
+          @press-enter="querysBtn"
+        />
+      </div>
+      <div class="screen-item" style="margin-left: 10px;cursor: pointer;">
+        <a-button 
+          class="item-button"
+          type="primary"
+          :icon="h(SearchOutlined)"
+          @click="querysBtn">查询</a-button>
+      </div>
+    <!-- </div> -->
+  </div>
+  <div class="data-list">
+    <div class="search-list-div">
+      <div
+        v-for="(item, index) in searchList"
+        :key="index"
+        class="data-list-item"
+        v-if="searchList.length > 0"
+      >
+      <div class="back-box" v-if="showDrawBack(item)">{{ drawBackSpan(item) }}</div>
+      <div class="data-list-layout-div">
+          <div class="data-list-title-div">
+            <img src="/positioning.png" class="map-mark" @click="locationFun(item)"/>
+            <div class="label-div">
+              <div class="item-label">{{item.countyname}}</div>
+              <div class="item-sub-label">
+                <span style="margin-right:12px;">{{item.streetname}}</span>
+                <span>{{item.case_no}}</span>
+                <span class="item-mark" v-if="item.is_build_name">{{item.is_build_name}}</span>
+              </div>
+            </div>
+          </div>
+          <div class="button-div">
+            <a-button type="primary" class="button-item" @click="goAudit(item)">审核</a-button>
+          </div>
+        </div>
+        <div class="data-list-info-div">
+          <div class="info-layout-div">
+            <div class="info-item">
+              <div class="info-label">总面积</div>
+              <div class="info-data" :title="dataProcessing(item.area)">{{dataProcessing(item.area)}}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">农用地</div>
+              <div class="info-data" :title="dataProcessing(item.nongyongdi_area)">{{dataProcessing(item.nongyongdi_area)}}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">耕地</div>
+              <div class="info-data" :title="dataProcessing(item.gengdi_area)">{{dataProcessing(item.gengdi_area)}}</div>
+            </div>
+            <div class="info-item" style="width:127px;">
+              <div class="info-label">永农面积</div>
+              <div class="info-data" :title="dataProcessing(item.yongjiujibennongtian_area)">{{dataProcessing(item.yongjiujibennongtian_area)}}</div>
+            </div>
+          </div>
+          <div class="info-layout-div">
+            <div style="cursor: pointer;">
+              <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"   @click="collectItem(item)"  v-if="item.Fid"/>
+              <img src="@/assets/images/tiankongdi/collect.png" class="img-box"   @click="collectItem(item)"  v-else/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="show-data-list-content">
+      <div
+        class="data-item"
+        v-for="(item, index) in dataList"
+        :key="index"
+        @click="emits('showInfo', item)"
+        v-if="dataList.length > 0"
+      >
+        <div class="name-div">
+          <!-- <div class="item-mark"></div> -->
+          <div class="icon-name">
+            <img src="/positioning.png" class="item-mark" />
+            <div class="item-label">{{ item.areaname }}</div>
+          </div>
+          <!-- <div class="progress-div">
+            <div class="progress-label progress-color">进度</div>
+            <div class="progress-data" style="width:97px">
+              <span style="color: #086DEC;">{{item.verificatedtask}}</span>/{{item.totaltask}}
+            </div>
+          </div>
+          <div class="progress-div">
+            <div class="progress-label extended-color">超期</div>
+            <div class="progress-data" style="width:40px">
+              <span style="color: #D03542">{{item.overduetask}}</span>
+            </div>
+          </div> -->
+          <div class="progress-div">
+            <div class="progress-label reviewed-color" style="width: 70px">待审核</div>
+            <div class="progress-data" style="width: 40px">
+              <span style="color: #ec7908">{{ item.verifytask }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="info-data-div">
+          <div class="info-data-item">
+            <div class="info-data-label">下发</div>
+            <div class="info-data-data">{{ item.totaltask }}</div>
+          </div>
+          <!-- <div
+            style="
+              width: 1px;
+              margin-right: 15px;
+              margin-left: 15px;
+              background-color: #ededed;
+              height: 15px;
+            "
+          ></div> -->
+          <div class="info-data-item">
+            <div class="info-data-label">接收</div>
+            <div class="info-data-data">{{ item.receivetask }}</div>
+          </div>
+          <!-- <div
+            style="
+              width: 1px;
+              margin-right: 15px;
+              margin-left: 15px;
+              background-color: #ededed;
+              height: 15px;
+            "
+          ></div> -->
+          <!-- <div class="info-data-item">
+            <div class="info-data-label">非粮化</div>
+            <div class="info-data-data">{{ item.nonfoodcase }}</div>
+          </div> -->
+          <!-- <div
+            style="
+              width: 1px;
+              margin-right: 15px;
+              margin-left: 15px;
+              background-color: #ededed;
+              height: 15px;
+            "
+          ></div> -->
+          <div class="info-data-item">
+            <div class="info-data-label">拆除复耕</div>
+            <div class="info-data-data">{{ item.rehabilitationcase }}</div>
+          </div>
+          <!-- <div
+            style="
+              width: 1px;
+              margin-right: 15px;
+              margin-left: 15px;
+              background-color: #ededed;
+              height: 15px;
+            "
+          ></div> -->
+          <div class="info-data-item">
+            <div class="info-data-label">补办手续</div>
+            <div class="info-data-data">{{ item.makeupcase }}</div>
+          </div>
+        </div>
+        <!-- <div class="data-div">
+          <spam style="color: #086dec">{{ item.count }}</spam>
+        </div> -->
+      </div>
+      <div v-else class="no-data">
+        <a-empty :image="simpleImage" />
+      </div>
+    </div>
+    <a-modal
+      width="100%"
+      wrap-class-name="full-modal"
+      v-model:open="auditOpen"
+      title="整改审核"
+      footer=""
+      :destroyOnClose="true"
+    >
+      <template #footer> </template>
+      <Audit
+        ref="posRef"
+        :processId="processId"
+        :taskId="taskId"
+        :isRead="isRead"
+        :type="type"
+        :auditData="auditData"
+        @closeModel="closeMolder"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, defineProps, defineEmits, toRefs, h } from 'vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { Empty, message } from 'ant-design-vue';
+  import { patchSourceOptions } from '@/utils/global';
+  import { SearchOutlined} from '@ant-design/icons-vue'
+  import { getLoadTaskDetailList, deleteTaskCase, addTaskFavorite, getLoadTaskIllegalDetailList} from '@/api/inspectionaudit/index';
+  import {showDrawBack, drawBackSpan} from '@/views/demo/util'
+  import { getDetail } from '@/api/sys/WFSchemeInfo';
+  import { flowStore } from '@/store/modules/flow';
+  import { Audit } from '@/views/demo/workflow/task/process/page';
+  import { dataProcessing } from '@/views/demo/tiankongdi/util'
+  import { useUserStore } from '@/store/modules/user'
+
+
+  const props = defineProps([
+    'year',
+    'batch',
+    'patchSource',
+    'batchOptions',
+    'yearOptions',
+    'dataList',
+  ]);
+  const emits = defineEmits(['auditProgressScreenChange', 'showInfo', 'changeTask', 'openLoading', 'closeLoading','getCountList']);
+
+  const flowWfDataStore = flowStore();
+  const userStore = useUserStore()
+
+  const mapNo = ref('')
+  const searchList = ref([])
+  const showDataId = ref()
+  const auditOpen = ref(false);
+  const processId = ref('');
+  const taskId = ref('');
+  const type = ref('');
+  const auditData = ref()
+  const isRead: any = ref(0);
+
+  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+  // function changeParam(val,type) {
+  //   emits('auditProgressScreenChange', val, type);
+  // }
+  const querysBtn = () => {
+    let params = {
+      geomid: mapNo.value,
+      year: props.year,
+      batch: props.batch,
+      tubanlaiyuan: props.patchSource,
+      page: 1,
+      limit: 10,
+    }
+    if(mapNo.value == ''){
+      params.page = 0
+      params.limit = 0
+    }
+    emits('openLoading')
+    getLoadTaskIllegalDetailList(params).then(res => {
+      console.log(res)
+      searchList.value = res.items
+    }).finally(() => {
+      emits('closeLoading')
+    })
+  }
+  async function locationFun(record) {
+    emits('changeTask', record);
+  }
+  async function goAudit(record) {
+    showDataId.value = record.Id
+    let data = await getDetail({ code: record.processcode });
+    let scheme = JSON.parse(data.scheme.content);
+    let wfData = scheme.wfData;
+    flowWfDataStore.setWfDataAll(wfData);
+    auditOpen.value = true;
+    processId.value = record.processid;
+    taskId.value = record.taskeid;
+    type.value = record.type;
+    auditData.value = record;
+  }
+  const cancelCollectItem = (item) => {
+    deleteTaskCase(item.Fid).then(res => {
+      message.success('取消收藏成功')
+      querysBtn();
+    })
+  }
+  const collectItem = (item) => {
+    if(item.Fid){
+      cancelCollectItem(item)
+      return
+    }
+    let userInfo = userStore.getUserInfo
+    let params = {
+      taskId: item.taskeid,
+      favoriteUserId: userInfo.id
+    }
+    addTaskFavorite(params).then(res => {
+      message.success('收藏成功')
+      querysBtn();
+    })
+  }
+  const closeMolder = () => {
+    querysBtn()
+    emits('getCountList')
+  }
+</script>
+
+<style lang="less" scoped>
+  .item-button{
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    font-size: 19px;
+    color: #FFFFFF;
+    line-height: 30px;
+    height:39px;
+    width: 97px;
+    background: #086DEC;
+    // margin-left:12px;
+  }
+  .screen-div {
+    width: 590px;
+    padding: 22px 12px 14px 13px;
+    display: flex;
+    flex-wrap: wrap;
+    .screen-item {
+      font-family: Alibaba PuHuiTi;
+      font-weight: 500;
+      font-size: 17px;
+      color: #000000;
+      // width: 33.3%;
+      display: flex;
+      .item-input {
+        width: 223px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        font-size: 17px;
+        color: #000000;
+        line-height: 30px;
+        box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
+      }
+      .screen-item-label {
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        font-size: 17px;
+        color: #000000;
+        line-height: 30px;
+        display: flex;
+        align-items: center;
+      }
+      :deep(.ant-select-selector) {
+        display: flex;
+        align-items: center;
+        font-family: HarmonyOS Sans;
+        font-weight: 500;
+        font-size: 19px;
+        color: #000000;
+        line-height: 30px;
+        height: 39px;
+        box-shadow: 2px 3px 3px 1px rgba(13, 13, 13, 0.05);
+      }
+    }
+  }
+  .data-list {
+    height: calc(100% - 137px);
+    // background: darkgoldenrod;
+    // background: @component-background;
+    margin-top: 10px;
+    padding: 0px 11px 0px 13px;
+    display: flex;
+    flex-direction: column;
+    .data-title {
+      height: 40px;
+      background: #bab9b7;
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      color: #366198;
+    }
+    .show-data-list-content {
+      // height: 76vh;
+      overflow: auto;
+      flex: 1;
+      .data-item {
+        cursor: pointer;
+        width: 100%;
+        background: #fff;
+        border-radius: 11px;
+        padding: 0px 12px;
+        margin-bottom: 8px;
+        .name-div {
+          display: flex;
+          height: 57px;
+          align-items: center;
+          padding: 10px 0px;
+          border-bottom: 1px solid #e5e5e5;
+          justify-content: space-between;
+          .icon-name {
+            display: flex;
+            align-items: center;
+          }
+        }
+        .info-data-div {
+          height: 61px;
+          display: flex;
+          align-items: center;
+          // padding-left: 2px;
+          // justify-content: space-between;
+          // margin-top: 10px;
+          .info-data-item {
+            display: flex;
+            align-items: center;
+            flex: 1;
+            justify-content: center;
+            border-right: 1px solid #ededed;
+            .info-data-label {
+              font-family: Alibaba PuHuiTi;
+              font-weight: 400;
+              font-size: 16px;
+              color: #959494;
+              display: flex;
+              line-height: 30px;
+              margin-right: 11px;
+              white-space: nowrap;
+            }
+            .info-data-data {
+              font-family: HarmonyOS Sans;
+              font-weight: 500;
+              font-size: 16px;
+              color: #000000;
+              line-height: 30px;
+              display: flex;
+            }
+          }
+          .info-data-item:nth-last-child(1) {
+            border-right: 0px;
+          }
+        }
+        .data-div {
+          font-weight: 500;
+          margin-right: 5px;
+        }
+        .item-mark {
+          width: 17px;
+          height: 17px;
+          // background: #086dec;
+          // margin-left: 7px;
+          // margin-right: 7px;
+        }
+        .item-label {
+          // width: 122px;
+          padding-left: 9px;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 23px;
+          color: #000000;
+          line-height: 30px;
+        }
+        .progress-div {
+          display: flex;
+          // font-weight: 500;
+          // font-size: 16px;
+          // line-height: 30px;
+          // margin-right: 17px;
+          .progress-label {
+            font-family: Alibaba PuHuiTi;
+            color: #ffffff;
+            width: 50px;
+            height: 30px;
+            border-radius: 4px 0px 0px 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .progress-data {
+            background: #efefef;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 0px 4px 4px 0px;
+            font-family: HarmonyOS Sans;
+            font-weight: 500;
+            font-size: 19px;
+            // color: #086DEC;
+            line-height: 30px;
+          }
+          .progress-color {
+            background: #086dec;
+          }
+          .extended-color {
+            background: #d03542;
+          }
+          .reviewed-color {
+            background: #ec7908;
+          }
+        }
+      }
+      .data-item:hover {
+        background-color: rgba(8, 109, 236, 0.08);
+      }
+      // .data-item:nth-child(2n) {
+      //   background: #ececec;
+      // }
+    }
+  }
+  .no-data {
+    padding: 20px 0;
+  }
+  .data-list-item{
+    background:#fff;
+    padding:20px 10px 10px 10px;
+    margin-bottom:4px;
+    position: relative;
+    .back-box{
+      position: absolute;
+      right: 0;
+      top:0;
+      background: #EA1C06;
+      padding: 3px 6px;
+      color: #fff;
+      font-size: 12px;
+      border-radius: 0px 0px 0px 8px;
+    }
+    .data-list-layout-div{
+      display:flex;
+      justify-content: space-between;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #E5E5E5;
+      height: 45px;
+      .data-list-title-div{
+        display:flex;
+        align-items: center;
+        .map-mark{
+          width:17px;
+          height:17px;
+          cursor:pointer;
+        }
+        .label-div{
+          display: flex;
+          align-items: baseline;
+          margin-right: 12px
+        }
+        .item-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 23px;
+          color: #000000;
+          margin-left: 9px;
+          margin-right:10px;
+        }
+        .item-sub-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 17px;
+          color: #000000;
+        }
+        .item-mark{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 13px;
+          color: #696969;
+          margin-left: 17px;
+          margin-top: 4px;
+        }
+      }
+      .button-div{
+        display: flex;
+        align-items: center;
+        .button-item{
+          height: 27px;
+          width: 52px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 15px;
+          color: #fff;
+          background: linear-gradient(-56deg, #0060FF, #007EFF, #0061FF);
+        }
+      }
+    }
+    .data-list-info-div{
+      display: flex;
+      justify-content: space-between;
+      margin-top: 10px;
+      height: 40px;
+      .info-layout-div{
+        display:flex;
+        align-items: center;
+        .info-time{
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 15px;
+          color: #000000;
+          margin-right: 5px;
+        }
+      }
+      .info-item{
+        display:flex;
+        background: rgba(237, 237, 237, 0.55);
+        align-items: center;
+        width: 110px;
+        border-radius: 7px;
+        margin-right: 9px;
+        height: 33px;
+        justify-content: center;
+        .info-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          font-size: 13px;
+          color: #959494;
+          // width:45%;
+          display: flex;
+          justify-content: center;
+          padding-right: 5px;
+          white-space: nowrap;
+        }
+        .info-data{
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 13px;
+          color: #000000;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+  .data-list-item:nth-last-child(1){
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .img-box{
+    width: 25px;
+    cursor: pointer;
+    height: 23px;
+  }
+  .search-list-div{
+    max-height: 387px;
+    overflow: auto;
+  }
+</style>

src/views/demo/inspectionaudit/illegaltreatment/MapList/index.vue

@@ -0,0 +1,813 @@
+<template>
+  <div class="map-list-content">
+    <div class="screen-div">
+      <div class="screen-item" style="margin-right:20px;margin-bottom:15px;">
+        <div class="screen-item-label">年份</div>
+        <a-select
+          allowClear
+          style="width:130px;"
+          v-model:value="params.year"
+          :options="props.yearOptions"
+        />
+      </div>
+      <div class="screen-item" style="margin-right:17px;margin-bottom:15px;">
+        <div class="screen-item-label">图斑来源</div>
+        <a-select
+          allowClear
+          style="width:130px;"
+          v-model:value="params.tubanlaiyuan"
+          :options="patchSourceOptions"
+        />
+      </div>
+      <div class="screen-item" style="margin-bottom:15px;">
+        <div class="screen-item-label">批次</div>
+        <a-select
+          allowClear
+          style="width:103px;"
+          v-model:value="params.picihao"
+          :options="props.batchOptions"
+        />
+      </div>
+      <div class="screen-item" style="margin-right:13px;">
+        <div class="screen-item-label">举证</div>
+        <a-select
+          allowClear
+          style="width:130px;"
+          v-model:value="params.is_build_name"
+          :options="markTypeOptions"
+        />
+      </div>
+      <div class="screen-item" style="margin-right:10px;">
+        <!-- <div class="screen-item-label">图斑号</div> -->
+        <a-input  style="width:270px;" allowClear v-model:value="params.geomid" class="item-input" placeholder="请输入图斑编号" @press-enter="query"/>
+      </div>
+      <div class="screen-item" style="display: flex; justify-content: end;margin-bottom: 0px;">
+          <a-button type="primary" class="item-button" :icon="h(SearchOutlined)" @click="query">查询</a-button>
+      </div>
+    </div>
+    <div class="sift-div">
+      <div class="layout-div">
+        <img style="cursor: pointer;width:20px;height: 18px" src="@/assets/images/tiankongdi/back.png" class="img-box"  @click="emits('changeShowParent')"/>
+        <div class="interval-div"></div>
+        <div class="sift-item" @click="dataListSort('area')">
+          <div class="sift-label">总面积</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('area',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('area',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+        <div class="sift-item" @click="dataListSort('gengdi_area')">
+          <div class="sift-label">耕地面积</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('gengdi_area',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('gengdi_area',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+        <div class="sift-item" @click="dataListSort('yongjiujibennongtian_area')">
+          <div class="sift-label">永农面积</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('yongjiujibennongtian_area',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('yongjiujibennongtian_area',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+        <div class="sift-item" @click="dataListSort('CreateDate')">
+          <div class="sift-label">下发时间</div>
+          <div class="sift-icon">
+            <div :style="`${showSortMark('CreateDate',1)? 'color: #086DEC;': ''}`">&#9650</div>
+            <div :style="`${showSortMark('CreateDate',2)? 'color: #086DEC;': ''}`">&#9660</div>
+          </div>
+        </div>
+      </div>
+      <div class="collect-div">
+        <a-popover placement="bottom">
+          <template #content>
+            <div style="display:flex;">
+              <div>当前状态：</div>
+              <div>
+                <a-checkbox-group 
+                  v-model:value="params.nowStatus"
+                  style="width: 100%" 
+                  :options="auditMapStatusOptions"></a-checkbox-group>
+                </div>
+            </div>
+          </template>
+          <img src="@/assets/images/tiankongdi/filt.png" class="img-box mr-r-20" />
+        </a-popover>
+        <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"  @click="getCollectList" v-if="openCollect"/>
+        <img src="@/assets/images/tiankongdi/collect.png" class="img-box"  @click="getCollectList" v-else/>
+      </div>
+    </div>
+    <div class="data-list-div" style="padding-top: 3px;">
+      <div
+        v-for="(item, index) in dataList"
+        :key="index"
+        class="data-list-item"
+        v-if="dataList.length > 0"
+      >
+      <div class="back-box" v-if="showDrawBack(item)">{{ drawBackSpan(item) }}</div>
+      <div class="data-list-layout-div">
+          <div class="data-list-title-div">
+            <img src="/positioning.png" class="map-mark" @click="locationFun(item)"/>
+            <div class="label-div">
+              <div class="item-label">{{item.countyname}}</div>
+              <div class="item-sub-label">
+                <span style="margin-right:12px;">{{item.streetname}}</span>
+                <span>{{item.case_no}}</span>
+              </div>
+            </div>
+            <div class="item-mark" v-if="item.is_build_name">{{item.is_build_name}}</div>
+          </div>
+         
+            <div class="button-div">
+            <a-button type="primary" class="button-item" @click="goAudit(item)">审核</a-button>
+          </div>
+        </div>
+        <div class="data-list-info-div">
+          <div class="info-layout-div">
+            <div class="info-item"  style="width:130px;">
+              <div class="info-label">总面积</div>
+              <div class="info-data" :title="dataProcessing(item.area)">{{dataProcessing(item.area)}}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">农用地</div>
+              <div class="info-data" :title="dataProcessing(item.nongyongdi_area)">{{dataProcessing(item.nongyongdi_area)}}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">耕地</div>
+              <div class="info-data" :title="dataProcessing(item.gengdi_area)">{{dataProcessing(item.gengdi_area)}}</div>
+            </div>
+            <div class="info-item" style="width:120px;">
+              <div class="info-label">永农面积</div>
+              <div class="info-data" :title="dataProcessing(item.yongjiujibennongtian_area)">{{dataProcessing(item.yongjiujibennongtian_area)}}</div>
+            </div>
+          </div>
+          <div class="info-layout-div">
+            <!-- <div>
+              <Icon
+                :style="`font-size: 30px; color: #314A8C; cursor: pointer;${item.isouttime === 2 ? 'color: #D03542;' : item.isouttime === 1? 'color: #F7710F;' : 'color: #314A8C;'}`"
+                icon="icon-park-solid:timer"
+                @click="()=>{}" 
+              />
+            </div> -->
+            <div style="background: rgb(237, 237, 237);width: 1px;height: 100%;margin-right: 10px;margin-left: 10px;"></div>
+            <div style="cursor: pointer;">
+              <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"   @click="collectItem(item)"  v-if="item.Fid"/>
+              <img src="@/assets/images/tiankongdi/collect.png" class="img-box"   @click="collectItem(item)"  v-else/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pagination-div" v-if="dataList.length > 0">
+      <a-pagination
+        size="small"
+        v-model:current="pageNumber"
+        v-model:pageSize="pageSizeNumber"
+        :total="total"
+        :show-total="total => `共 ${total} 条数据`"
+        show-size-changer
+        show-quick-jumper
+        @change="changePagination"
+      />
+    </div>
+    <a-modal
+      width="100%"
+      wrap-class-name="full-modal"
+      v-model:open="auditOpen"
+      title="整改审核"
+      footer=""
+      :destroyOnClose="true"
+    >
+      <template #footer> </template>
+      <div class="handoff">
+        <a-button
+          type="primary" 
+          style="margin-right: 25px;"
+          @click="prevData"
+        >上一条</a-button>
+        <a-button
+          type="primary"
+          @click="nextData"
+        >下一条</a-button>
+      </div>
+      <Audit
+        v-if="handoffShow"
+        ref="posRef"
+        :processId="processId"
+        :taskId="taskId"
+        :isRead="isRead"
+        :type="type"
+        :auditData="auditData"
+        @closeModel="closeMolder"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref, defineEmits, computed, h, watch } from 'vue';
+  import { StarOutlined,StarFilled } from '@ant-design/icons-vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { getLoadTaskIllegalDetailList, updateSupervise, addTaskFavorite, deleteTaskCase } from '@/api/inspectionaudit/index';
+  import { flowStore } from '@/store/modules/flow';
+  import { getDetail } from '@/api/sys/WFSchemeInfo';
+  import { Audit } from '@/views/demo/workflow/task/process/page';
+  import { Empty } from 'ant-design-vue';
+  import { message } from 'ant-design-vue';
+  import { useUserStore } from '@/store/modules/user.ts'
+  import { SearchOutlined, RollbackOutlined } from '@ant-design/icons-vue';
+  import { patchSourceOptions, auditMapStatusOptions } from '@/utils/global'
+  import { dataProcessing } from '@/views/demo/tiankongdi/util.ts'
+  import {showDrawBack, drawBackSpan} from '@/views/demo/util'
+
+  const userStore = useUserStore()
+
+  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+  const emits = defineEmits(['changeTask', 'changeShowParent','openLoading','closeLoading']);
+
+  const flowWfDataStore = flowStore();
+
+  const props = defineProps(['areaId', 'yearOptions', 'year','level','batch','patchSource','batchOptions']);
+  const processId = ref('');
+  const taskId = ref('');
+  const isRead: any = ref(0);
+  const type = ref('');
+  const auditData = ref()
+  const order = ref(0)
+  const auditOpen = ref(false);
+  const showDataId = ref()
+  const nextShowDataId = ref()
+  const prevShowDataId = ref()
+  watch(() => showDataId.value, () => {
+    let index = dataList.value.findIndex(item => item.Id == showDataId.value)
+    if(index < dataList.value.length - 1){
+      nextShowDataId.value =  dataList.value[index + 1].Id
+    }else{
+      nextShowDataId.value = 0
+    }
+    if(index > 0){
+      prevShowDataId.value = dataList.value[index - 1].Id
+    }else{
+      prevShowDataId.value = 0
+    }
+  })
+  const handoffShow = ref(true)
+  const openCollect = computed(() => {
+  if(params.value.type === null) return false
+  return true
+})
+  const params = ref({
+    page: 1,
+    limit: 10,
+    level: props.level,
+    areaid: props.areaId,
+    geomid: null,
+    year: props.year,
+    picihao: props.batch,
+    tubanlaiyuan: props.patchSource,
+    is_build_name: null,
+    type: null,
+    sort: null,
+    order: null,
+    nowStatus: [],
+  });
+  const markTypeOptions = ref([
+    { label: '拆除复耕', value: '拆除复耕' },
+    { label: '补办手续', value: '补办手续' },
+  ]);
+
+  const dataList = ref([]);
+  const total = ref(0);
+  const pageNumber = ref(1)
+  const pageSizeNumber = ref(10)
+  function query() {
+    params.value.page = 1;
+    getTaskList();
+  }
+  async function getTaskList() {
+    console.log(params.value);
+    let requestData = {...params.value}
+    if(requestData.nowStatus.length > 0){
+      requestData.nowStatus = requestData.nowStatus.join(',')
+    }else{
+      requestData.nowStatus = null
+    }
+    emits('openLoading')
+    const data = await getLoadTaskIllegalDetailList(requestData);
+    emits('closeLoading')
+    dataList.value = data.items;
+    total.value = data.total;
+  }
+  function changePagination(page, pageSize) {
+    console.log(page, pageSize);
+    params.value.page = page;
+    params.value.limit = pageSize;
+    getTaskList();
+  }
+  async function goAudit(record) {
+    showDataId.value = record.Id
+    let data = await getDetail({ code: record.processcode });
+    let scheme = JSON.parse(data.scheme.content);
+    let wfData = scheme.wfData;
+    flowWfDataStore.setWfDataAll(wfData);
+    auditOpen.value = true;
+    processId.value = record.processid;
+    taskId.value = record.taskeid;
+    type.value = record.type;
+    auditData.value = record;
+  }
+  async function locationFun(record) {
+    emits('changeTask', record);
+  }
+  onMounted(() => {
+    getTaskList();
+  });
+  const changeSupervise = (item) => {
+    if(item.cancelsupervise === 0 && item.issupervise === 1){
+      message.error('取消改督办权限不足')
+      return
+    }
+    let params = {
+      id: item.processid,
+      supervise: 1,
+    }
+    if(item.issupervise === 1){
+      params.supervise = 0
+    }
+    updateSupervise(params).then(res => {
+      if(params.supervise === 1){
+        message.success('成功发起督办')
+      }else{
+        message.success('取消督办成功')
+      }
+      getTaskList();
+    })
+  }
+  const prevData = async () => {
+    if(prevShowDataId.value === 0){
+      if(params.value.page === 1 || total.value == 0){
+        message.warning('已经是第一条数据了')
+        return
+      }
+      pageNumber.value = pageNumber.value - 1
+      params.value.page = params.value.page -1
+      await getTaskList();
+      // showDataIndex.value = dataList.value.length -1
+      handoffShow.value = false
+      let record = dataList.value[dataList.value.length -1]
+      let data = await getDetail({ code: record.processcode });
+      let scheme = JSON.parse(data.scheme.content);
+      let wfData = scheme.wfData;
+      flowWfDataStore.setWfDataAll(wfData);
+      processId.value = record.processid;
+      taskId.value = record.taskeid;
+      type.value = record.type;
+      handoffShow.value = true
+      showDataId.value = dataList.value[dataList.value.length - 1].Id
+      auditData.value = dataList.value[dataList.value.length - 1]
+      return
+    }else{
+      showDataId.value = prevShowDataId.value
+    }
+    handoffShow.value = false
+    let record = dataList.value.find(item => item.Id == showDataId.value)
+    let data = await getDetail({ code: record.processcode });
+    let scheme = JSON.parse(data.scheme.content);
+    let wfData = scheme.wfData;
+    flowWfDataStore.setWfDataAll(wfData);
+    processId.value = record.processid;
+    taskId.value = record.taskeid;
+    type.value = record.type;
+    handoffShow.value = true
+    auditData.value = record
+  }
+  const nextData = async () => {
+    if(nextShowDataId.value === 0){
+      if(Math.ceil(total.value / pageSizeNumber.value) <= pageNumber.value || total.value == 0){
+        message.warning('已经是最后一条数据了')
+        return
+      }
+      pageNumber.value = pageNumber.value + 1
+      params.value.page = params.value.page + 1
+      await getTaskList();
+      // showDataIndex.value = 0
+      handoffShow.value = false
+      let record = dataList.value[0]
+      let data = await getDetail({ code: record.processcode });
+      let scheme = JSON.parse(data.scheme.content);
+      let wfData = scheme.wfData;
+      flowWfDataStore.setWfDataAll(wfData);
+      processId.value = record.processid;
+      taskId.value = record.taskeid;
+      type.value = record.type;
+      handoffShow.value = true
+      showDataId.value = dataList.value[0].Id
+      auditData.value = dataList.value[0]
+      return
+    }else{
+      showDataId.value = nextShowDataId.value
+    }
+    handoffShow.value = false
+    let record = dataList.value.find(item => item.Id == showDataId.value)
+    let data = await getDetail({ code: record.processcode });
+    let scheme = JSON.parse(data.scheme.content);
+    let wfData = scheme.wfData;
+    flowWfDataStore.setWfDataAll(wfData);
+    processId.value = record.processid;
+    taskId.value = record.taskeid;
+    type.value = record.type;
+    handoffShow.value = true
+    auditData.value = record
+  }
+  const cancelCollectItem = (item) => {
+    deleteTaskCase(item.Fid).then(res => {
+      message.success('取消收藏成功')
+      getTaskList();
+    })
+  }
+  const collectItem = (item) => {
+    if(item.Fid){
+      cancelCollectItem(item)
+      return
+    }
+    let userInfo = userStore.getUserInfo
+    let params = {
+      taskId: item.taskeid,
+      favoriteUserId: userInfo.id
+    }
+    addTaskFavorite(params).then(res => {
+      message.success('收藏成功')
+      getTaskList();
+    })
+  }
+  const getCollectList = () => {
+    if(params.value.type === null){
+      params.value.type = 1
+    }else if(params.value.type === 1){
+      params.value.type = null
+    }
+    params.value.page = 1
+    pageNumber.value = 1
+    getTaskList();
+  }
+  const showSortMark = (key, sort) => {
+    if(params.value.sort === key && sort === order.value){
+      return true
+    }
+    return false
+  }
+  const dataListSort = (type) => {
+    if(params.value.sort === null || params.value.sort === type){
+      order.value = (order.value + 1) % 3
+    }else{
+      order.value = 1
+    }
+    // emits('infoDataListSort', type, order.value)
+    switch(order.value){
+      case 0:
+        params.value.sort = null
+        params.value.order = null
+        break
+      case 1:
+        params.value.sort = type
+        params.value.order = 'asc'
+        break
+      case 2:
+        params.value.sort = type
+        params.value.order = 'desc'
+        break
+    }
+    getTaskList();
+  }
+  const closeMolder = () => {
+    getTaskList();
+  }
+</script>
+<style lang="less">
+  .full-modal {
+    .ant-modal {
+      max-width: 100%;
+      top: 0;
+    }
+
+    .ant-modal-content {
+      height: calc(100vh);
+    }
+
+    .ant-modal-body {
+      height: 85%;
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .handoff{
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 25px;
+  }
+  .map-list-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .screen-div {
+    padding: 22px 12px 19px 13px;
+    display: flex;
+    width: 590px;
+    // margin-top: 10px;
+    flex-wrap: wrap;
+    // background: @component-background;
+    .screen-item {
+      // width: 33.3%;
+      display: flex;
+      // margin-bottom: 15px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 500;
+      font-size: 17px;
+      color: #000000;
+      height: 39px;
+      .screen-item-label {
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        font-size: 17px;
+        color: #000000;
+        line-height: 30px;
+        display: flex;
+        align-items: center;
+        margin-right: 9px;
+      }
+      :deep(.ant-select-selector){
+        display: flex;
+        align-items: center;
+        font-family: HarmonyOS Sans;
+        font-weight: 500;
+        font-size: 19px;
+        color: #000000;
+        line-height: 30px;
+        height: 39px;
+        box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
+      }
+      .item-input{
+        font-family: Alibaba PuHuiTi;
+        font-weight: 400;
+        font-size: 19px;
+        color: #000000;
+        line-height: 30px;
+        width:223px;
+        box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
+      }
+      .item-button{
+        font-family: Alibaba PuHuiTi;
+        font-weight: 400;
+        font-size: 19px;
+        color: #FFFFFF;
+        line-height: 30px;
+        height:38px;
+        width: 97px;
+        background:#086DEC;
+      }
+    }
+    .screen-button-div {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+  }
+  .sift-div{
+    background:#fff;
+     height: 77px;
+     padding:19px 13px;
+     margin-left: 10px;
+     margin-right: 10px;
+     border-radius: 10px 10px 0px 0px;
+     display: flex;
+     justify-content: space-between;
+     .layout-div{
+      display:flex;
+      align-items: center;
+      .back-button{
+        font-size:22px;
+        cursor:pointer;
+      }
+      .interval-div{
+        height:100%;
+        width:1px;
+        background:#EDEDED;
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+      .sift-item{
+        display: flex;
+        align-items: center;
+        margin-right:15px;
+        cursor:pointer;
+        user-select:none;
+        .sift-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 19px;
+          color: #000000;
+        }
+        .sift-icon{
+          font-size: 9px;
+          margin-left:5px;
+          opacity: 0.53;
+        }
+      }
+     }
+     .collect-div{
+      display:flex;
+      align-items:center;
+     }
+  }
+  .data-list-div {
+    flex: 1;
+    overflow: auto;
+    padding: 10px;
+    // margin-top: 10px;
+    height: 60vh;
+    scrollbar-width: none; /* firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+    .data-list-item{
+    background:#fff;
+    padding:20px 10px 10px 10px;
+    // border-radius:6px;
+    margin-bottom:4px;
+    position: relative;
+    .back-box{
+      position: absolute;
+      right: 0;
+      top:0;
+      background: #EA1C06;
+      padding: 3px 6px;
+      color: #fff;
+      font-size: 12px;
+      border-radius: 0px 0px 0px 8px;
+    }
+    .data-list-layout-div{
+      display:flex;
+      justify-content: space-between;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #E5E5E5;
+      height: 45px;
+      .data-list-title-div{
+        display:flex;
+        align-items: center;
+        .map-mark{
+          width:17px;
+          height:17px;
+          cursor:pointer;
+        }
+        .label-div{
+          display: flex;
+          align-items: baseline;
+          margin-right: 12px
+        }
+        .item-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 23px;
+          color: #000000;
+          margin-left: 9px;
+          margin-right:10px;
+        }
+        .item-sub-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 17px;
+          color: #000000;
+        }
+        .item-mark{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 13px;
+          margin-left: 17px;
+          color: #696969;
+          margin-top: 4px;
+        }
+      }
+      .data-item-type-div{
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        font-size: 15px;
+        color: #000000;
+        border: 1px solid;
+        width: 37px;
+        height: 37px;
+        border-radius: 4px;
+        cursor: pointer;
+        user-select: none;
+        .type-title{
+          display:flex;
+          align-items:center;
+          justify-content: center;
+        }
+        .type-data{
+          background:#086DEC;
+          color:#fff;
+          display:flex;
+          align-items:center;
+          justify-content: center;
+        }
+      }
+        .button-div{
+        display: flex;
+        align-items: center;
+        .button-item{
+          height: 27px;
+          width: 52px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: Alibaba PuHuiTi;
+          font-weight: 500;
+          font-size: 15px;
+          color: #fff;
+          background: linear-gradient(-56deg, #0060FF, #007EFF, #0061FF);
+        }
+      }
+    }
+    .data-list-info-div{
+      display: flex;
+      justify-content: space-between;
+      margin-top: 10px;
+      height: 40px;
+      .info-layout-div{
+        display:flex;
+        align-items: center;
+        .info-time{
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 15px;
+          color: #000000;
+          margin-right: 5px;
+        }
+      }
+      .info-item{
+        display:flex;
+        background: rgba(237, 237, 237, 0.55);
+        align-items: center;
+        width: 110px;
+        border-radius: 7px;
+        margin-right: 8px;
+        height: 33px;
+        justify-content: center;
+        .info-label{
+          font-family: Alibaba PuHuiTi;
+          font-weight: 400;
+          font-size: 13px;
+          color: #959494;
+          // width:45%;
+          display: flex;
+          justify-content: center;
+          padding-right: 5px;
+          white-space: nowrap;
+        }
+        .info-data{
+          font-family: HarmonyOS Sans;
+          font-weight: 500;
+          font-size: 13px;
+          color: #000000;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+    }
+    .data-list-item:nth-last-child(1){
+      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+  }
+  .data-list-div::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
+  .pagination-div {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .no-data {
+    padding: 20px 0;
+  }
+  .rollback {
+    background: @component-background;
+    padding: 10px;
+  }
+  .img-box{
+    width: 25px;
+    height: 23px;
+    cursor: pointer;
+  }
+  .mr-r-20{
+    margin-right: 20px;
+  }
+  .img-box.small{
+    width: 18px;
+    margin-right: 6px;
+    margin-bottom: 2px;
+  }
+</style>

src/views/demo/inspectionaudit/illegaltreatment/illegaltreatment.data.ts

@@ -0,0 +1,198 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { getChildrenTree } from '@/api/demo/system';
+import {
+  resultNameOptions,
+  patchSourceOptions,
+  nowStatusOptions,
+  markTypeOptions,
+} from '@/utils/global';
+
+const getYearList = () => {
+  const num = 10;
+  const currentYear = new Date().getFullYear();
+  // 存储年份数据的数组
+  const list: any = [];
+  // 获取当前年份
+  // year.value = Number(`${currentYear}`);
+  list.push({
+    value: Number(`${currentYear}`),
+    label: Number(`${currentYear}`),
+  });
+  // 获取后面几年的数据
+  for (let i = 1; i <= num; i++) {
+    list.push({
+      value: Number(`${currentYear - i}`),
+      label: Number(`${currentYear - i}`),
+    });
+  }
+  return list;
+};
+export const columns: BasicColumn[] = [
+  {
+    title: '区县',
+    dataIndex: 'countyname',
+  },
+  {
+    title: '乡镇',
+    dataIndex: 'streetname',
+  },
+  {
+    title: '图斑编号',
+    dataIndex: 'caseno',
+    width: 200,
+  },
+  {
+    title: '下发时间',
+    dataIndex: 'identificationtime',
+  },
+  {
+    title: '图斑面积',
+    dataIndex: 'area',
+  },
+  {
+    title: '耕地面积',
+    dataIndex: 'gengdiarea',
+  },
+  {
+    title: '判定结果',
+    dataIndex: 'isillegal',
+  },
+  {
+    title: '当前状态',
+    dataIndex: 'handlestatusname',
+  },
+  {
+    title: '项目名称',
+    dataIndex: 'xiangmumc',
+  },
+  {
+    title: '项目主体',
+    dataIndex: 'xiangmuzhuti',
+  },
+  {
+    title: '违法类型',
+    dataIndex: 'weifaleixing',
+  },
+  {
+    title: '整改措施',
+    dataIndex: 'measurename',
+  },
+  {
+    title: '处理方式',
+    dataIndex: 'resultname',
+    editRow: true,
+    editComponent: 'Select',
+    editComponentProps: {
+      options: resultNameOptions,
+    },
+    fixed: 'right',
+  },
+  {
+    title: '立案号',
+    dataIndex: 'registrnumber',
+    editRow: true,
+    editComponent: 'Input',
+    fixed: 'right',
+  },
+  {
+    title: '违法联系人',
+    dataIndex: 'illegalcontact',
+    editRow: true,
+    editComponent: 'Input',
+    fixed: 'right',
+  },
+  {
+    title: '违法人身份证号',
+    dataIndex: 'illegalshenfenzhenghao',
+    editRow: true,
+    editComponent: 'Input',
+    fixed: 'right',
+    width: 160,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'year',
+    component: 'Select',
+    colProps: { span: 4 },
+    label: '年份',
+    componentProps: {
+      options: getYearList(),
+    },
+  },
+  {
+    field: 'tubanlaiyuan',
+    label: '图斑来源',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      options: patchSourceOptions,
+    },
+  },
+  {
+    field: 'picihao',
+    label: '批次',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'isBuildName',
+    label: '标注类型',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      options: markTypeOptions,
+    },
+  },
+  {
+    field: 'nowStatus',
+    label: '当前状态',
+    component: 'Select',
+    componentProps: {
+      options: nowStatusOptions,
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'countyid',
+    label: '区县',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ tableAction, formModel }) => {
+      return {
+        api: getChildrenTree,
+        params: { parentId: 371300 },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'name',
+        valueField: 'id',
+        onChange: () => {
+          formModel.streetid = '';
+        },
+      };
+    },
+  },
+  {
+    field: 'streetid',
+    label: '乡镇',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: getChildrenTree,
+        params: { parentId: formModel.countyid },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'name',
+        valueField: 'id',
+      };
+    },
+  },
+  {
+    field: 'caseNo',
+    label: '图斑编号',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+];

src/views/demo/inspectionaudit/illegaltreatment/index-old.vue

@@ -0,0 +1,234 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <PermissionBtn @btn-event="onBtnClicked" />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction :actions="createActions(record)" />
+        </template>
+      </template>
+    </BasicTable>
+    <a-modal
+      style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
+      wrap-class-name="full-modal"
+      v-model:open="showInfoOpen"
+      title="详情"
+      :footer="null"
+      :maskClosable="true"
+      :destroyOnClose="true"
+      @cancel="showInfoOpen = false"
+    >
+      <div class="modal-content">
+        <ShowInfoModal :showInfoData="showInfoData" />
+      </div>
+    </a-modal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { BasicTable, useTable, TableAction, EditRecordRow } from '@/components/Table';
+  import { loadCaseInfoIllegalList, dealIllegalCaseInfo } from '@/api/demo/system';
+  import { PermissionBtn } from '@/components/PermissionBtn/index';
+  import { columns, searchFormSchema } from './illegaltreatment.data';
+  import { getAppEnvConfig } from '@/utils/env';
+  import axios from 'axios';
+  import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
+  import { getCaseInfoById } from '@/api/inspectionaudit/index';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { cloneDeep } from 'lodash-es';
+
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+  const { createMessage } = useMessage();
+  defineOptions({ name: 'RoleManagement' });
+
+  const searchInfo = reactive<Recordable>({
+    countyid: null,
+  });
+  const showInfoData = ref();
+  const showInfoOpen = ref(false);
+  const searchParams = ref();
+  const [registerTable] = useTable({
+    title: '违法处理',
+    api: loadCaseInfoIllegalList,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      showAdvancedButton: false,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    tableSetting: { fullScreen: true },
+    // 搜索
+    handleSearchInfoFn(info) {
+      searchParams.value = info;
+      return info;
+    },
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+    },
+  });
+
+  const currentEditKeyRef = ref('');
+  function createActions(record: EditRecordRow): ActionItem[] {
+    if (!record.editable) {
+      return [
+        {
+          label: '编辑',
+          disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.Id : false,
+          onClick: handleEdit.bind(null, record),
+        },
+        {
+          // icon: 'ant-design:ellipsis-outlined',
+          label: '查看',
+          onClick: viewAccount.bind(null, record),
+        },
+      ];
+    }
+    return [
+      {
+        label: '保存',
+        onClick: handleSave.bind(null, record),
+      },
+      {
+        label: '取消',
+        popConfirm: {
+          title: '是否取消编辑',
+          confirm: handleCancel.bind(null, record),
+        },
+      },
+    ];
+  }
+  function handleEdit(record: EditRecordRow) {
+    console.log(record);
+    currentEditKeyRef.value = record.Id;
+    record.onEdit?.(true);
+  }
+
+  function handleCancel(record: EditRecordRow) {
+    currentEditKeyRef.value = '';
+    record.onEdit?.(false, false);
+  }
+
+  async function handleSave(record: EditRecordRow) {
+    console.log(record);
+    // 校验
+    createMessage.loading({ content: '正在保存...', duration: 0, key: 'saving' });
+    const valid = await record.onValid?.();
+    console.log(valid);
+    if (valid) {
+      try {
+        const data = cloneDeep(record.editValueRefs);
+        console.log(data);
+        let querys = { ...data };
+        querys.id = record.Id;
+        console.log(querys);
+        //TODO 此处将数据提交给服务器保存
+        const res = await dealIllegalCaseInfo(querys);
+        console.log(res);
+        if (res) {
+          // 保存之后提交编辑状态
+          const pass = await record.onEdit?.(false, true);
+          if (pass) {
+            currentEditKeyRef.value = '';
+          }
+          createMessage.success({ content: '数据已保存', key: 'saving' });
+        }
+      } catch (error) {
+        createMessage.error({ content: '保存失败', key: 'saving' });
+      }
+    } else {
+      // const pass = await record.onEdit?.(false, true);
+      createMessage.error({ content: '请填写正确的数据', key: 'saving' });
+    }
+  }
+
+  // 直接下载接口返回的二进制流
+  function handleExport() {
+    let params = { ...searchParams.value };
+    params.countyid = searchInfo?.countyid;
+    axios({
+      method: 'post',
+      url: VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportCaseInfoIllegalList',
+      params: params,
+      headers: {
+        'X-Token': localStorage.getItem('X-Token'),
+      },
+      responseType: 'blob',
+    }).then((res) => {
+      console.log('excel', res);
+      let fileName = '违法处理统计报表' + new Date().getTime() + '.xls';
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(res.data);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    });
+  }
+
+  function onBtnClicked(domId) {
+    switch (domId) {
+      case 'btnExport':
+        handleExport();
+        break;
+      default:
+        break;
+    }
+  }
+  function viewAccount(record) {
+    console.log(record);
+    getCaseInfoById({ id: record.Id }).then((res) => {
+      showInfoData.value = res;
+      showInfoOpen.value = true;
+    });
+  }
+</script>
+<style lang="scss" scoped>
+  .data-preview-container {
+    width: 100%;
+    height: calc(100% - 0px);
+    position: absolute;
+    padding: 30px 10px;
+    top: 0px;
+    left: 0px;
+    background: #fff;
+  }
+  .data-preview-container-option {
+    width: 120px;
+    height: 40px;
+    position: absolute;
+    top: 30px;
+    right: 0px;
+  }
+  .data-preview-container-option div {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    float: left;
+    text-align: center;
+    cursor: pointer;
+  }
+  .full-modal {
+    .ant-modal {
+      min-width: 100vw;
+      top: 0px;
+      padding: 0px;
+      margin: 0px;
+    }
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+    }
+    .ant-modal-body {
+      flex: 1;
+    }
+  }
+</style>

src/views/demo/inspectionaudit/illegaltreatment/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="curb-spot-city">
+    <div class="show-list">
+      <a-spin :spinning="spinning">
+        <AuditProgress
+          v-if="showParent"
+          :year="year"
+          :batch="batch"
+          :batchOptions="batchOptions"
+          :yearOptions="yearOptions"
+          :dataList="dataList"
+          @auditProgressScreenChange="auditProgressScreenChange"
+          @showInfo="changeShowInfo"
+          @changeTask="changeTask"
+          @openLoading="openLoading"
+          @closeLoading="closeLoading"
+          @getCountList="getCountList"
+        />
+        <MapList
+          @changeTask="changeTask"
+          @changeShowParent="changeShowParent"
+          :areaId="areaId"
+          :level="level"
+          :year="year"
+          :batch="batch"
+          :patchSource="patchSource"
+          :yearOptions="yearOptions"
+          :batchOptions="batchOptions"
+          @openLoading="openLoading"
+          @closeLoading="closeLoading"
+          v-else
+        />
+      </a-spin>
+    </div>
+    <div class="map-box-div">
+      <MapboxMap
+        :mapConfig="mapConfig"
+        @handlerDrawComplete="handlerDrawComplete"
+        @mapOnLoad="onMapboxLoad"
+        ref="MapboxComponent"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted, defineAsyncComponent } from 'vue';
+  import mapboxgl, { Map } from 'mapbox-gl';
+  import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config.ts';
+  import AuditProgress from './AuditProgress/index.vue';
+  import MapList from './MapList/index.vue';
+  import { getLoadTaskCount } from '@/api/inspectionaudit/index';
+  import { getGeom,getConfig } from '@/api/sys/layerManagement';
+  import { getDetail } from '@/api/sys/WFSchemeInfo';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { yearOptions } from '@/utils/global';
+
+  const { createMessage } = useMessage();
+
+  const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
+  const MapboxComponent = ref();
+  const mapConfig = ref({ isShowMap: false });
+
+  function onMapboxLoad():void {
+    getConfig({code:"mapsetting"}).then(res=>{
+        mapConfig.value = JSON.parse(res.codeValue)
+    })
+  }
+
+  const spinning = ref(false)
+  const showParent = ref(true);
+  const year = ref();
+  const batch = ref();
+  const patchSource = ref()
+  const batchOptions = ref([]);
+  const dataList = ref([]);
+  const areaId = ref('');
+  const level = ref()
+  const auditProgressScreenChange = (value, type) => {
+    switch (type) {
+      case 'year':
+        year.value = value;
+        break;
+      case 'batch':
+        batch.value = value;
+        break;
+      case 'patchSource':
+        patchSource.value = value;
+        break;
+    }
+    getCountList();
+  };
+  const changeShowInfo = (item) => {
+    console.log(item);
+    showParent.value = false;
+    areaId.value = item.areaid;
+    level.value = item.level
+  };
+  function changeShowParent() {
+    getCountList()
+    showParent.value = true;
+  }
+  async function getCountList() {
+    spinning.value = true
+    const data = await getLoadTaskCount({
+      year: year.value,
+      tubanlaiyuan: patchSource.value,
+      picihao: batch.value,
+    });
+    spinning.value = false
+    dataList.value = data;
+  }
+  onMounted(() => {
+    getCountList();
+  });
+  const openLoading = () => {
+    spinning.value = true
+  }
+  const closeLoading = () => {
+    spinning.value = false
+  }
+  function changeTask(record) {
+    if(record?.geomid){
+      // handlerGetMapConfigByFormId(record.processcode);
+      let val = record.geomid
+      let getGeomPrams = {
+        TableName: 'drone_shp_data ',
+        FieldName: 'gid',
+        FieldValue: val?.split(","),
+        page: 1,
+        limit: 999,
+        key: null,
+      };
+      if (val) {
+        getGeom(getGeomPrams).then((res) => {
+          let geoms = [];
+          if (res) {
+            if (res.items?.length > 0) {
+              res.items.forEach((item, index) => {
+                let geom = {
+                  key: item.gid,
+                  mapgeom: item.geometry,
+                };
+                geoms.push(geom);
+              });
+            }
+            // MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
+            MapboxComponent.value.handlerDraw('Details', geoms, false);
+          } else {
+            createMessage.error('当前数据没有图斑！');
+          }
+        });
+      } else {
+        createMessage.error('当前数据没有图斑！');
+      }
+    }
+    
+  }
+
+  // 根据发布表单的id获取地图配置
+  function handlerGetMapConfigByFormId(id){
+    if(id){
+      getDetail({ code: id }).then(res=>{
+        let data = res; 
+        let scheme = JSON.parse(data.scheme.content);
+        let wfData = scheme.wfData;
+        let startFlow = wfData.find((item,index)=>{
+          return item.type == "bpmn:StartEvent";
+        })
+        if(startFlow?.mapConfig){
+          mapConfig.value = startFlow?.mapConfig
+        }
+        
+      });
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .curb-spot-city {
+    height: 100%;
+    display: flex;
+    .show-list {
+      width: 590px;
+      background: #EFEFEF;
+      :deep(.ant-spin-nested-loading) {
+        height: 100%;
+      }
+      :deep(.ant-spin-container) {
+        height: 100%;
+      }
+    }
+    .map-box-div {
+      width: 65%;
+    }
+  }
+</style>

src/views/demo/inspectionaudit/patchsummary/index.vue

@@ -0,0 +1,328 @@
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight>
+    <div class="search-box">
+      <BasicForm
+        @register="registerForm"
+        :labelWidth="100"
+        :schemas="searchFormSchema"
+        :actionColOptions="{ span: 24 }"
+      >
+        <template #tubanmianji>
+          <div class="scope-box">
+            <a-input v-model:value="areaParams.tubanArea1" placeholder="请输入" />
+            -
+            <a-input v-model:value="areaParams.tubanArea2" placeholder="请输入" />
+          </div>
+        </template>
+        <template #gengdimianji>
+          <div class="scope-box">
+            <a-input v-model:value="areaParams.gengdiArea1" placeholder="请输入" />
+            -
+            <a-input v-model:value="areaParams.gengdiArea2" placeholder="请输入" />
+          </div>
+        </template>
+        <template #jibennongtianmianji>
+          <div class="scope-box">
+            <a-input v-model:value="areaParams.jibenArea1" placeholder="请输入" />
+            -
+            <a-input v-model:value="areaParams.jibenArea2" placeholder="请输入" />
+          </div>
+        </template>
+      </BasicForm>
+    </div>
+    <div class="table-box">
+      <BasicTable @register="registerTable" :searchInfo="searchInfo" @change="handleChange">
+        <template #toolbar>
+          <PermissionBtn @btn-event="onBtnClicked" />
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="['area', 'gengdiarea', 'nongyongdiarea'].includes(column.key)">
+            {{ dataProcessingCount(record[column.key]) }}
+          </template>
+          <template v-if="column.key === 'action'">
+            <TableAction
+              :actions="[
+                {
+                  // icon: 'ant-design:ellipsis-outlined',
+                  label: '查看',
+                  onClick: viewAccount.bind(null, record),
+                },
+              ]"
+            />
+          </template>
+        </template>
+      </BasicTable>
+    </div>
+    <a-modal v-model:open="open" title="导出文件类型" :footer="null">
+      <div>
+        <a-button class="exportbutton" @click="handleExport('excel')">
+          图斑列表统计报表（execl）
+        </a-button>
+        <a-button class="exportbutton" @click="handleExport('shp')">
+          图斑列表矢量数据（shp）
+        </a-button>
+      </div>
+    </a-modal>
+    <a-modal
+      style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
+      wrap-class-name="full-modal"
+      v-model:open="showInfoOpen"
+      title="详情"
+      :footer="null"
+      :maskClosable="true"
+      :destroyOnClose="true"
+      @cancel="showInfoOpen = false"
+    >
+      <div class="modal-content">
+        <ShowInfoModal :showInfoData="showInfoData" />
+      </div>
+    </a-modal>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { PermissionBtn } from '@/components/PermissionBtn/index';
+  import { columns, searchFormSchema } from './patchsummary.data';
+  import { getAppEnvConfig } from '@/utils/env';
+  import axios from 'axios';
+  import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
+  import { getCaseInfoById, loadCaseInfoTuBanList } from '@/api/inspectionaudit/index';
+  import { dataProcessingCount } from '@/views/demo/tiankongdi/util';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { PageWrapper } from '@/components/Page';
+  import dayjs from 'dayjs';
+
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+
+  defineOptions({ name: 'RoleManagement' });
+
+  const searchInfo = reactive<Recordable>({
+    countyid: null,
+  });
+  const showInfoData = ref();
+  const showInfoOpen = ref(false);
+  const searchParams = ref({
+    page: 1,
+    limit: 10,
+  });
+  const areaParams = ref({
+    tubanArea1: null,
+    tubanArea2: null,
+    gengdiArea1: null,
+    gengdiArea2: null,
+    jibenArea1: null,
+    jibenArea2: null,
+  });
+  const tableData = ref([]);
+  const tablePaginationRight = ref({
+    current: 1,
+    pageSize: 10,
+    size: 'small',
+    defaultPageSize: 10,
+    showSizeChanger: true,
+    pageSizeOptions: ['10', '50', '80', '100'],
+    showQuickJumper: true,
+    total: 0,
+  });
+  const [registerForm, { validate, getFieldsValue }] = useForm({
+    schemas: searchFormSchema,
+    labelWidth: 100,
+    baseColProps: { span: 6 },
+    actionColOptions: { span: 24 },
+    autoSubmitOnEnter: true,
+    submitFunc: handleSubmit,
+    resetFunc: handleReset,
+    autoSubmitOnEnter: handleSubmit,
+  });
+  const [registerTable, { setTableData, reload, clearSelectedRowKeys, setPagination, setLoading }] =
+    useTable({
+      title: '图斑列表',
+      dataSource: tableData.value,
+      columns,
+      rowKey: 'id',
+      useSearchForm: false,
+      showTableSetting: true,
+      bordered: true,
+      // 搜索
+      handleSearchInfoFn(info) {
+        searchParams.value = info;
+        return info;
+      },
+      actionColumn: {
+        width: 80,
+        title: '操作',
+        dataIndex: 'action',
+        // slots: { customRender: 'action' },
+        fixed: 'right',
+      },
+      pagination: tablePaginationRight.value,
+    });
+
+  // 直接下载接口返回的二进制流
+  function handleExport(exportType) {
+    console.log(searchParams);
+    let params = { ...searchParams.value };
+    let url = '';
+    let fileName = '';
+    if (exportType == 'excel') {
+      url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportCaseInfoTuBanList';
+      fileName = '图斑列表统计报表' + new Date().getTime() + '.xls';
+    } else if (exportType == 'shp') {
+      url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportCaseInfoShapefile';
+      fileName = '图斑列表矢量数据' + new Date().getTime() + '.zip';
+    }
+    axios({
+      method: 'post',
+      url: url,
+      params: params,
+      headers: {
+        'X-Token': localStorage.getItem('X-Token'),
+      },
+      responseType: 'blob',
+    }).then((res) => {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(res.data);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    });
+  }
+
+  const open = ref<boolean>(false);
+  function onBtnClicked(domId) {
+    switch (domId) {
+      case 'btnExport':
+        open.value = true;
+        break;
+      default:
+        break;
+    }
+  }
+  function viewAccount(record) {
+    getCaseInfoById({ id: record.Id }).then((res) => {
+      showInfoData.value = res;
+      showInfoOpen.value = true;
+    });
+  }
+  function handleChange(data) {
+    console.log(data);
+    searchParams.value.page = data.current;
+    searchParams.value.limit = data.pageSize;
+    tablePaginationRight.value = data;
+    const querys = Object.assign(searchParams.value, areaParams.value);
+    getTableData(querys);
+  }
+  function handleSubmit() {
+    searchParams.value = getFieldsValue();
+    searchParams.value.page = 1;
+    tablePaginationRight.value.current = 1;
+    searchParams.value.limit = tablePaginationRight.value.pageSize;
+    const querys = Object.assign(searchParams.value, areaParams.value);
+    getTableData(querys);
+  }
+  function getTableData(querys) {
+    if (querys.startTime && querys.endTime) {
+      querys.startTime = dayjs(querys.startTime).format('YYYY-MM-DD');
+      querys.endTime = dayjs(querys.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss');
+    }
+    setLoading(true);
+    loadCaseInfoTuBanList(querys).then((res) => {
+      tableData.value = res.items;
+      tablePaginationRight.value.total = res.total;
+      setTableData(tableData.value);
+      setPagination(tablePaginationRight.value);
+      setLoading(false);
+    });
+  }
+  function handleReset() {
+    searchParams.value = {
+      page: 1,
+      limit: 10,
+    };
+    areaParams.value = {
+      tubanArea1: null,
+      tubanArea2: null,
+      gengdiArea1: null,
+      gengdiArea2: null,
+      jibenArea1: null,
+      jibenArea2: null,
+    };
+    tablePaginationRight.value.current = 1;
+    getTableData(searchParams.value);
+  }
+  onMounted(() => {
+    getTableData(searchParams.value);
+  });
+</script>
+<style lang="less" scoped>
+  .data-preview-container {
+    width: 100%;
+    height: calc(100% - 0px);
+    position: absolute;
+    padding: 30px 10px;
+    top: 0px;
+    left: 0px;
+    background: #fff;
+  }
+  .data-preview-container-option {
+    width: 120px;
+    height: 40px;
+    position: absolute;
+    top: 30px;
+    right: 0px;
+  }
+  .data-preview-container-option div {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    float: left;
+    text-align: center;
+    cursor: pointer;
+  }
+  .full-modal {
+    .ant-modal {
+      min-width: 100vw;
+      top: 0px;
+      padding: 0px;
+      margin: 0px;
+    }
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+    }
+    .ant-modal-body {
+      flex: 1;
+    }
+  }
+  .exportbutton {
+    width: 510px;
+    height: 60px;
+    margin: 5px;
+  }
+  .search-box {
+    background: @component-background;
+    margin: 16px;
+    padding: 16px;
+  }
+  ::v-deep .ant-col-24 {
+    display: inline-block;
+    max-width: fit-content;
+    margin-left: 20px;
+  }
+  .table-box {
+    margin: 16px;
+  }
+  .scope-box {
+    display: flex;
+    width: 100%;
+    .ant-input {
+      width: 48% !important;
+      max-width: 48%;
+      min-width: 48%;
+    }
+  }
+</style>

src/views/demo/inspectionaudit/patchsummary/patchsummary.data.ts

@@ -0,0 +1,262 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { getChildrenTree } from '@/api/demo/system';
+import {
+  patchSourceOptions,
+  yearOptions,
+  markTypeOptions,
+  nowStatusOptions,
+  mapTypeOptions,
+} from '@/utils/global';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '图斑来源',
+    dataIndex: 'tubanlaiyuan',
+  },
+  {
+    title: '区县',
+    dataIndex: 'countyname',
+    width: 100,
+  },
+  {
+    title: '乡镇',
+    dataIndex: 'streetname',
+  },
+  {
+    title: '社区/村',
+    dataIndex: 'communityname',
+  },
+  {
+    title: '图斑编号',
+    dataIndex: 'caseno',
+    width: 200,
+  },
+  {
+    title: '图斑类型',
+    dataIndex: 'typename',
+  },
+  {
+    title: '图斑面积',
+    dataIndex: 'area',
+    width: 110,
+  },
+  {
+    title: '农用地面积',
+    dataIndex: 'nongyongdiarea',
+    width: 110,
+  },
+  {
+    title: '耕地面积',
+    dataIndex: 'gengdiarea',
+    width: 110,
+  },
+  {
+    title: '永农面积',
+    dataIndex: 'yongjiujibennongtianarea',
+    width: 110,
+  },
+  {
+    title: '当前状态',
+    dataIndex: 'handlestatusname',
+    width: 80,
+  },
+  {
+    title: '判定结果',
+    dataIndex: 'isillegal',
+    width: 80,
+  },
+  {
+    title: '下发时间',
+    dataIndex: 'identificationtime',
+  },
+  {
+    title: '项目名称',
+    dataIndex: 'xiangmumc',
+  },
+  {
+    title: '项目主体',
+    dataIndex: 'xiangmuzhuti',
+  },
+  {
+    title: '实际用途',
+    dataIndex: 'actualuseto',
+  },
+  {
+    title: '违法类型',
+    dataIndex: 'weifaleixing',
+  },
+  {
+    title: '整改措施',
+    dataIndex: 'measurename',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'year',
+    component: 'Select',
+    colProps: { span: 4 },
+    label: '年份',
+    componentProps: {
+      options: yearOptions,
+    },
+  },
+  {
+    field: 'tubanlaiyuan',
+    label: '图斑来源',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      options: patchSourceOptions,
+    },
+  },
+  {
+    field: 'picihao',
+    label: '批次',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      options: [],
+    },
+  },
+  {
+    field: 'typename',
+    label: '图斑类型',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      options: [
+        { label: '农用地', value: '农用地' },
+        { label: '建设用地', value: '建设用地' },
+        { label: '推堆土', value: '推堆土' },
+      ],
+    },
+  },
+  {
+    field: 'isBuildName',
+    label: '标注类型',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      options: markTypeOptions,
+    },
+  },
+  {
+    field: 'isIllegal',
+    label: '判定结果',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      options: mapTypeOptions,
+    },
+  },
+  {
+    field: 'nowStatus',
+    label: '当前状态',
+    component: 'Select',
+    componentProps: {
+      options: nowStatusOptions,
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'measureName',
+    label: '整改措施',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      options: [
+        { label: '拆除复耕', value: '0' },
+        { label: '补办手续', value: '1' },
+      ],
+    },
+  },
+  {
+    field: 'countyid',
+    label: '区县',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ tableAction, formModel }) => {
+      return {
+        api: getChildrenTree,
+        params: { parentId: 371300 },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'name',
+        valueField: 'id',
+        onChange: () => {
+          formModel.streetid = '';
+        },
+      };
+    },
+  },
+  {
+    field: 'streetid',
+    label: '乡镇',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: formModel.countyid && getChildrenTree,
+        params: { parentId: formModel.countyid },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'name',
+        valueField: 'id',
+      };
+    },
+  },
+  {
+    field: 'caseNo',
+    label: '图斑编号',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'originalcaseno',
+    label: '标识号',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'weifaleixing',
+    label: '违法类型',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      options: [
+        { label: '非农化违法用地', value: '0' },
+        { label: '非粮化违法用地', value: '1' },
+      ],
+    },
+  },
+  // 增加图斑面积、耕地面积、永农面积的筛选项；
+  {
+    field: 'tubanmianji',
+    label: '图斑面积',
+    colProps: { span: 4 },
+    slot: 'tubanmianji',
+  },
+  {
+    field: 'gengdimianji',
+    label: '耕地面积',
+    colProps: { span: 4 },
+    slot: 'gengdimianji',
+  },
+  {
+    field: 'jibennongtianmianji',
+    label: '永农面积',
+    colProps: { span: 4 },
+    slot: 'jibennongtianmianji',
+  },
+  {
+    field: '[startTime, endTime]',
+    label: '下发时间',
+    component: 'RangePicker',
+    colProps: { span: 5 },
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      placeholder: ['开始日期', '结束日期'],
+    },
+  },
+];

src/views/demo/minerals/miningstatistics/index.vue

@@ -0,0 +1,278 @@
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight>
+    <div class="table-box">
+      <BasicTable @register="registerTable" :searchInfo="searchInfo" @change="handleChange">
+        <template #toolbar>
+          <PermissionBtn @btn-event="onBtnClicked" />
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="['area', 'gengdiarea', 'nongyongdiarea'].includes(column.key)">
+            {{ dataProcessingCount(record[column.key]) }}
+          </template>
+          <template v-if="column.key === 'action'">
+            <TableAction
+              :actions="[
+                {
+                  // icon: 'ant-design:ellipsis-outlined',
+                  label: '查看',
+                  onClick: viewAccount.bind(null, record),
+                },
+              ]"
+            />
+          </template>
+        </template>
+      </BasicTable>
+    </div>
+    <a-modal v-model:open="open" title="导出文件类型" :footer="null">
+      <div>
+        <a-button class="exportbutton" @click="handleExport('excel')">
+          图斑汇总统计报表（execl）
+        </a-button>
+        <a-button class="exportbutton" @click="handleExport('shp')">
+          图斑汇总矢量数据（shp）
+        </a-button>
+      </div>
+    </a-modal>
+    <a-modal
+      style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
+      wrap-class-name="full-modal"
+      v-model:open="showInfoOpen"
+      title="详情"
+      :footer="null"
+      :maskClosable="true"
+      :destroyOnClose="true"
+      @cancel="showInfoOpen = false"
+    >
+      <div class="modal-content">
+        <ShowInfoModal :showInfoData="showInfoData" />
+      </div>
+    </a-modal>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getLoadMineralsLedger } from '@/api/minerals/index';
+  import { PermissionBtn } from '@/components/PermissionBtn/index';
+  import { columns } from './miningstatistics.data';
+  import { getAppEnvConfig } from '@/utils/env';
+  import axios from 'axios';
+  import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
+  import { GetCaseInfoById } from '@/api/illegalmining/index';
+  import { dataProcessingCount } from '@/views/demo/tiankongdi/util';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { PageWrapper } from '@/components/Page';
+
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+
+  defineOptions({ name: 'RoleManagement' });
+
+  const searchInfo = reactive<Recordable>({
+    countyid: null,
+  });
+  const showInfoData = ref();
+  const showInfoOpen = ref(false);
+  const searchParams = ref({
+    page: 1,
+    limit: 15,
+  });
+  const areaParams = ref({
+    tubanArea1: null,
+    tubanArea2: null,
+    gengdiArea1: null,
+    gengdiArea2: null,
+    jibenArea1: null,
+    jibenArea2: null,
+  });
+  const tableData = ref([]);
+  const tablePaginationRight = ref({
+    current: 1,
+    pageSize: 15,
+    size: 'small',
+    defaultPageSize: 15,
+    showSizeChanger: true,
+    pageSizeOptions: ['15', '50', '80', '100'],
+    showQuickJumper: true,
+    total: 0,
+  });
+  const [registerTable, { setTableData, reload, clearSelectedRowKeys, setPagination, setLoading }] =
+    useTable({
+      title: '统计报表-开采台账',
+      dataSource: tableData.value,
+      columns,
+      rowKey: 'id',
+      useSearchForm: false,
+      showTableSetting: true,
+      bordered: true,
+      // 搜索
+      handleSearchInfoFn(info) {
+        searchParams.value = info;
+        return info;
+      },
+      pagination: tablePaginationRight.value,
+    });
+
+  // 直接下载接口返回的二进制流
+  function handleExport(exportType) {
+    console.log(searchParams);
+    let params = { ...searchParams.value };
+    let url = '';
+    let fileName = '';
+    if (exportType == 'excel') {
+      url = VITE_GLOB_API_URL + '/api/DroneCaseInfoMinerals/ExprotMineralsLedger';
+      fileName = '图斑汇总统计报表' + new Date().getTime() + '.xls';
+    } else if (exportType == 'shp') {
+      url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSatellite/ExportCaseInfoWpxfShapefile';
+      fileName = '图斑汇总矢量数据' + new Date().getTime() + '.zip';
+    }
+    axios({
+      method: 'post',
+      url: url,
+      params: params,
+      headers: {
+        'X-Token': localStorage.getItem('X-Token'),
+      },
+      responseType: 'blob',
+    }).then((res) => {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(res.data);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    });
+  }
+
+  const open = ref<boolean>(false);
+  function onBtnClicked(domId) {
+    switch (domId) {
+      case 'btnExport':
+        // open.value = true;
+        handleExport('excel');
+        break;
+      default:
+        break;
+    }
+  }
+  function viewAccount(record) {
+    GetCaseInfoById({ id: record.Id }).then((res) => {
+      showInfoData.value = res;
+      showInfoOpen.value = true;
+    });
+  }
+  function handleChange(data) {
+    searchParams.value.page = data.current;
+    searchParams.value.limit = data.pageSize;
+    tablePaginationRight.value = data;
+    const querys = Object.assign(searchParams.value, areaParams.value);
+    getTableData(querys);
+  }
+  function handleSubmit() {
+    searchParams.value = getFieldsValue();
+    searchParams.value.page = 1;
+    tablePaginationRight.value.current = 1;
+    searchParams.value.limit = tablePaginationRight.value.pageSize;
+    const querys = Object.assign(searchParams.value, areaParams.value);
+    getTableData(querys);
+  }
+  function getTableData(querys) {
+    setLoading(true);
+    getLoadMineralsLedger(querys).then((res) => {
+      console.log(res)
+      tableData.value = res.items;
+      tablePaginationRight.value.total = res.total;
+      setTableData(tableData.value);
+      setPagination(tablePaginationRight.value);
+      setLoading(false);
+    });
+  }
+  function handleReset() {
+    searchParams.value = {
+      page: 1,
+      limit: 15,
+    };
+    areaParams.value = {
+      tubanArea1: null,
+      tubanArea2: null,
+      gengdiArea1: null,
+      gengdiArea2: null,
+      jibenArea1: null,
+      jibenArea2: null,
+    };
+    tablePaginationRight.value.current = 1;
+    getTableData(searchParams.value);
+  }
+  onMounted(() => {
+    getTableData(searchParams.value);
+  });
+</script>
+<style lang="less" scoped>
+  .data-preview-container {
+    width: 100%;
+    height: calc(100% - 0px);
+    position: absolute;
+    padding: 30px 10px;
+    top: 0px;
+    left: 0px;
+    background: #fff;
+  }
+  .data-preview-container-option {
+    width: 120px;
+    height: 40px;
+    position: absolute;
+    top: 30px;
+    right: 0px;
+  }
+  .data-preview-container-option div {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    float: left;
+    text-align: center;
+    cursor: pointer;
+  }
+  .full-modal {
+    .ant-modal {
+      min-width: 100vw;
+      top: 0px;
+      padding: 0px;
+      margin: 0px;
+    }
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+    }
+    .ant-modal-body {
+      flex: 1;
+    }
+  }
+  .exportbutton {
+    width: 510px;
+    height: 60px;
+    margin: 5px;
+  }
+  .search-box {
+    background: @component-background;
+    margin: 16px;
+    padding: 16px;
+  }
+  ::v-deep .ant-col-24 {
+    display: inline-block;
+    max-width: fit-content;
+    margin-left: 20px;
+  }
+  .table-box {
+    margin: 16px;
+  }
+  .scope-box {
+    display: flex;
+    width: 100%;
+    .ant-input {
+      width: 48% !important;
+      max-width: 48%;
+      min-width: 48%;
+    }
+  }
+</style>

src/views/demo/minerals/miningstatistics/miningstatistics.data.ts

@@ -0,0 +1,125 @@
+import { BasicColumn } from '@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '年',
+    dataIndex: 'syear_base',
+  },
+  {
+    title: '接收时间',
+    dataIndex: 'xiafatime_base',
+  },
+  {
+    title: '编号',
+    dataIndex: 'tubannum_base',
+    width: 200,
+  },
+  {
+    title: '线索来源',
+    dataIndex: 'laiyuan_base',
+  },
+  {
+    title: '线索描述',
+    dataIndex: 'miaoshu_base',
+  },
+  {
+    title: '县区',
+    dataIndex: 'weizhixianname_base',
+  },
+  {
+    title: '乡镇',
+    dataIndex: 'weizhizhenname_base',
+  },
+  {
+    title: '村居',
+    dataIndex: 'weizhicunname_base',
+  },
+  {
+    title: '开采主体',
+    dataIndex: 'kaicaizhuti_kcfill',
+  },
+  {
+    title: '主体类型',
+    dataIndex: 'zhutitype_kcfill',
+  },
+  {
+    title: '违法行为发生时间',
+    dataIndex: 'fashentime_kcfill',
+  },
+  {
+    title: '违法行为结束时间',
+    dataIndex: 'endtime_kcfill',
+  },
+  {
+    title: '矿种',
+    dataIndex: 'kuangzhong_kcfill',
+  },
+  {
+    title: '开采面积',
+    dataIndex: 'kaicaiarea_kcfill',
+  },
+  {
+    title: '方量',
+    dataIndex: 'fangliang_kcfill',
+  },
+  {
+    title: '采出的矿产品查封方量',
+    dataIndex: 'chafengliang_kcfill',
+  },
+  {
+    title: '采出的矿产品价值',
+    dataIndex: 'caichujiazhi_kcfill',
+  },
+  {
+    title: '是否村民自采自用',
+    dataIndex: 'hefaqingxing_kcfill',
+  },
+  {
+    title: '是否河道采砂',
+    dataIndex: 'ishedaocaisha_kcfill',
+  },
+  {
+    title: '是否非法采矿行为',
+    dataIndex: 'hefapanding_fill',
+  },
+  {
+    title: '是否符合立案条件',
+    dataIndex: 'islian_punish',
+  },
+  {
+    title: '是否新增',
+    dataIndex: 'isnewadd_kcfill',
+  },
+  {
+    title: '违法类型',
+    dataIndex: 'wefatype_kcfill',
+  },
+  {
+    title: '是否重大典型问题',
+    dataIndex: 'iszhongda_kcfill',
+  },
+  {
+    title: '是否位于重点敏感区域',
+    dataIndex: 'iszhongdian_kcfill',
+  },
+  {
+    title: '是否涉刑',
+    dataIndex: 'isshexing',
+  },
+  {
+    title: '核查人员名单',
+    dataIndex: 'tianbaoren_fill',
+  },
+  {
+    title: '审核人员名单',
+    dataIndex: 'xianshenheren_fill',
+  },
+  {
+    title: '办理时间限定',
+    dataIndex: 'chulishixian_base',
+  },
+  {
+    title: '是否提交核查报告',
+    dataIndex: 'shuoming_fill',
+  },
+];

src/views/demo/minerals/patchsummary/index.vue

@@ -0,0 +1,327 @@
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight>
+    <div class="search-box">
+      <BasicForm
+        @register="registerForm"
+        :labelWidth="100"
+        :schemas="searchFormSchema"
+        :actionColOptions="{ span: 24 }"
+      >
+        <template #dangqianzhuangtai>
+          <a-select
+            allowClear
+            showArrow
+            mode="multiple"
+            v-model:value="nowStatus"
+            :options="nowStatusOptions"
+            :max-tag-count="1"
+            placeholder="请选择"
+            @change="changeStatus"
+            :field-names="{ label: 'itemName', value: 'itemValue' }"
+          />
+        </template>
+        <template #tubanmianji>
+          <div class="scope-box">
+            <a-input v-model:value="areaParams.tubanArea1" placeholder="请输入" />
+            -
+            <a-input v-model:value="areaParams.tubanArea2" placeholder="请输入" />
+          </div>
+        </template>
+      </BasicForm>
+    </div>
+    <div class="table-box">
+      <BasicTable @register="registerTable" :searchInfo="searchInfo" @change="handleChange">
+        <template #toolbar>
+          <PermissionBtn @btn-event="onBtnClicked" />
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="['area', 'gengdiarea', 'nongyongdiarea'].includes(column.key)">
+            {{ dataProcessingCount(record[column.key]) }}
+          </template>
+          <template v-if="column.key === 'action'">
+            <TableAction
+              :actions="[
+                {
+                  // icon: 'ant-design:ellipsis-outlined',
+                  label: '查看',
+                  onClick: viewAccount.bind(null, record),
+                },
+              ]"
+            />
+          </template>
+        </template>
+      </BasicTable>
+    </div>
+    <a-modal v-model:open="open" title="导出文件类型" :footer="null">
+      <div>
+        <a-button class="exportbutton" @click="handleExport('excel')">
+          图斑汇总统计报表（execl）
+        </a-button>
+        <a-button class="exportbutton" @click="handleExport('shp')">
+          图斑汇总矢量数据（shp）
+        </a-button>
+      </div>
+    </a-modal>
+    <a-modal
+      style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
+      wrap-class-name="full-modal"
+      v-model:open="showInfoOpen"
+      title="详情"
+      :footer="null"
+      :maskClosable="true"
+      :destroyOnClose="true"
+      @cancel="showInfoOpen = false"
+    >
+      <div class="modal-content">
+        <Detail :id="caseId" />
+      </div>
+    </a-modal>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { PermissionBtn } from '@/components/PermissionBtn/index';
+  import { columns, searchFormSchema } from './patchsummary.data';
+  import { getAppEnvConfig } from '@/utils/env';
+  import axios from 'axios';
+  import Detail from './detail/index.vue';
+  import { dataProcessingCount } from '@/views/demo/tiankongdi/util';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { PageWrapper } from '@/components/Page';
+  import { getLoadCaseInfoMineralsTuBanList } from '@/api/minerals/index';
+  import { getLoad } from '@/api/sys/sysDataItemDetail';
+
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+
+  defineOptions({ name: 'RoleManagement' });
+  const caseId = ref();
+  const searchInfo = reactive<Recordable>({
+    countyid: null,
+  });
+  const showInfoOpen = ref(false);
+  const searchParams = ref({
+    page: 1,
+    limit: 10,
+  });
+  const nowStatusOptions = ref([]);
+  function getOptions() {
+    getLoad({ code: 'kcdangqianzhuangtai' }).then((res) => {
+      nowStatusOptions.value = res;
+    });
+  }
+  const nowStatus = ref(undefined);
+  const areaParams = ref({
+    tubanArea1: null,
+    tubanArea2: null,
+    status_base: undefined,
+  });
+  const tableData = ref([]);
+  const tablePaginationRight = ref({
+    current: 1,
+    pageSize: 10,
+    size: 'small',
+    defaultPageSize: 10,
+    showSizeChanger: true,
+    pageSizeOptions: ['10', '50', '80', '100'],
+    showQuickJumper: true,
+    total: 0,
+  });
+  const [registerForm, { validate, getFieldsValue }] = useForm({
+    schemas: searchFormSchema,
+    labelWidth: 100,
+    baseColProps: { span: 6 },
+    actionColOptions: { span: 24 },
+    autoSubmitOnEnter: true,
+    submitFunc: handleSubmit,
+    resetFunc: handleReset,
+    autoSubmitOnEnter: handleSubmit,
+  });
+  const [registerTable, { setTableData, reload, clearSelectedRowKeys, setPagination, setLoading }] =
+    useTable({
+      title: '图斑列表',
+      dataSource: tableData.value,
+      columns,
+      rowKey: 'id',
+      useSearchForm: false,
+      showTableSetting: true,
+      bordered: true,
+      // 搜索
+      handleSearchInfoFn(info) {
+        searchParams.value = info;
+        return info;
+      },
+      actionColumn: {
+        width: 80,
+        title: '操作',
+        dataIndex: 'action',
+        // slots: { customRender: 'action' },
+        fixed: 'right',
+      },
+      pagination: tablePaginationRight.value,
+    });
+
+  // 直接下载接口返回的二进制流
+  function handleExport(exportType) {
+    console.log(searchParams);
+    let params = { ...searchParams.value };
+    let url = '';
+    let fileName = '';
+    if (exportType == 'excel') {
+      url = VITE_GLOB_API_URL + '/api/DroneCaseInfoMinerals/ExportCaseInfoMineralsTuBanList';
+      fileName = '图斑汇总统计报表' + new Date().getTime() + '.xls';
+    } else if (exportType == 'shp') {
+      url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSatellite/ExportCaseInfoWpxfShapefile';
+      fileName = '图斑汇总矢量数据' + new Date().getTime() + '.zip';
+    }
+    axios({
+      method: 'post',
+      url: url,
+      params: params,
+      headers: {
+        'X-Token': localStorage.getItem('X-Token'),
+      },
+      responseType: 'blob',
+    }).then((res) => {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(res.data);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    });
+  }
+
+  const open = ref<boolean>(false);
+  function onBtnClicked(domId) {
+    switch (domId) {
+      case 'btnExport':
+        // open.value = true;
+        handleExport('excel');
+        break;
+      default:
+        break;
+    }
+  }
+  function viewAccount(record) {
+    caseId.value = record.Id;
+    showInfoOpen.value = true;
+  }
+  function handleChange(data) {
+    searchParams.value.page = data.current;
+    searchParams.value.limit = data.pageSize;
+    tablePaginationRight.value = data;
+    const querys = Object.assign(searchParams.value, areaParams.value);
+    getTableData(querys);
+  }
+  function changeStatus(val) {
+    areaParams.value.status_base = val.join(',');
+  }
+  function handleSubmit() {
+    searchParams.value = getFieldsValue();
+    searchParams.value.page = 1;
+    tablePaginationRight.value.current = 1;
+    searchParams.value.limit = tablePaginationRight.value.pageSize;
+    const querys = Object.assign(searchParams.value, areaParams.value);
+    getTableData(querys);
+  }
+  function getTableData(querys) {
+    setLoading(true);
+    getLoadCaseInfoMineralsTuBanList(querys).then((res) => {
+      tableData.value = res.items;
+      tablePaginationRight.value.total = res.total;
+      setTableData(tableData.value);
+      setPagination(tablePaginationRight.value);
+      setLoading(false);
+    });
+  }
+  function handleReset() {
+    searchParams.value = {
+      page: 1,
+      limit: 10,
+    };
+    areaParams.value = {
+      tubanArea1: null,
+      tubanArea2: null,
+    };
+    tablePaginationRight.value.current = 1;
+    getTableData(searchParams.value);
+  }
+  onMounted(() => {
+    getTableData(searchParams.value);
+    getOptions();
+  });
+</script>
+<style lang="less" scoped>
+  .data-preview-container {
+    width: 100%;
+    height: calc(100% - 0px);
+    position: absolute;
+    padding: 30px 10px;
+    top: 0px;
+    left: 0px;
+    background: #fff;
+  }
+  .data-preview-container-option {
+    width: 120px;
+    height: 40px;
+    position: absolute;
+    top: 30px;
+    right: 0px;
+  }
+  .data-preview-container-option div {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    float: left;
+    text-align: center;
+    cursor: pointer;
+  }
+  .full-modal {
+    .ant-modal {
+      min-width: 100vw;
+      top: 0px;
+      padding: 0px;
+      margin: 0px;
+    }
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+    }
+    .ant-modal-body {
+      flex: 1;
+    }
+  }
+  .exportbutton {
+    width: 510px;
+    height: 60px;
+    margin: 5px;
+  }
+  .search-box {
+    background: @component-background;
+    margin: 16px;
+    padding: 16px;
+  }
+  ::v-deep .ant-col-24 {
+    display: inline-block;
+    max-width: fit-content;
+    margin-left: 20px;
+  }
+  .table-box {
+    margin: 16px;
+  }
+  .scope-box {
+    display: flex;
+    width: 100%;
+    .ant-input {
+      width: 48% !important;
+      max-width: 48%;
+      min-width: 48%;
+    }
+  }
+  ::v-deep .ant-select-selection-overflow-item:first-child .ant-select-selection-item {
+    width: 80px;
+  }
+</style>

src/views/demo/minerals/patchsummary/patchsummary.data.ts

@@ -0,0 +1,325 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { getChildrenTree } from '@/api/demo/system';
+import { yearOptions } from '@/utils/global';
+import { getLoad } from '@/api/sys/sysDataItemDetail';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '年度',
+    dataIndex: 'syear_base',
+  },
+  {
+    title: '图斑编号',
+    dataIndex: 'tubannum_base',
+    width: 200,
+  },
+  {
+    title: '区县',
+    dataIndex: 'weizhixianname_base',
+    width: 100,
+  },
+  {
+    title: '乡镇',
+    dataIndex: 'weizhizhenname_base',
+  },
+  {
+    title: '社区/村',
+    dataIndex: 'weizhicunname_base',
+  },
+  {
+    title: '行政区划编码',
+    dataIndex: 'communityname',
+  },
+  {
+    title: '图斑类型',
+    dataIndex: 'type_base',
+  },
+  {
+    title: '矿种',
+    dataIndex: 'kuangzhong_kcfill',
+  },
+  {
+    title: '图斑变化情况说明',
+    dataIndex: 'shuoming_fill',
+  },
+  {
+    title: '所属重点矿区名称',
+    dataIndex: 'zhongdianname_base',
+  },
+  {
+    title: '所在国家自热保护区名称',
+    dataIndex: 'ziranbaohuname_base',
+    width: 200,
+  },
+  {
+    title: '图斑面积',
+    dataIndex: 'weifaarea_base',
+  },
+  {
+    title: '耕地面积',
+    dataIndex: 'gengdi_area',
+  },
+  {
+    title: '违法开采面积',
+    dataIndex: 'kaicaiarea_kcfill',
+  },
+  {
+    title: '违法占地面积',
+    dataIndex: 'weifaarea_punish',
+  },
+  {
+    title: '是否持续违法',
+    dataIndex: 'handlestatusname',
+  },
+  {
+    title: '当前状态',
+    dataIndex: 'status_base',
+  },
+  {
+    title: '判定结果',
+    dataIndex: 'hefapanding_fill',
+  },
+  {
+    title: '下发时间',
+    dataIndex: 'xiafatime_base',
+  },
+  {
+    title: '项目主体',
+    dataIndex: 'kaicaizhuti_kcfill',
+  },
+  {
+    title: '开采违法类型',
+    dataIndex: 'wefatype_kcfill',
+  },
+  {
+    title: '加工违法类型',
+    dataIndex: 'weifatype_jgfill',
+  },
+  {
+    title: '整改措施',
+    dataIndex: 'zhenggaitype_jgzhg',
+  },
+  {
+    title: '处理时限',
+    dataIndex: 'chulishixian_base',
+  },
+  // 表里没有备注
+  // {
+  //   title: '备注',
+  //   dataIndex: 'measurename',
+  // },
+];
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'syear_base',
+    component: 'Select',
+    colProps: { span: 4 },
+    label: '年度',
+    componentProps: {
+      options: yearOptions,
+    },
+  },
+  {
+    field: 'tubanlaiyuan',
+    label: '图斑来源',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: getLoad,
+        params: { code: 'tubanlaiyuan' },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'itemName',
+        valueField: 'itemValue',
+      };
+    },
+  },
+  {
+    field: 'type_base',
+    label: '图斑类型',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: getLoad,
+        params: { code: 'kctubanleixing' },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'itemName',
+        valueField: 'itemValue',
+      };
+    },
+  },
+  {
+    field: 'countyid',
+    label: '区县',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ tableAction, formModel }) => {
+      return {
+        api: getChildrenTree,
+        params: { parentId: 371300 },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'name',
+        valueField: 'id',
+        onChange: () => {
+          formModel.streetid = '';
+        },
+      };
+    },
+  },
+  {
+    field: 'streetid',
+    label: '乡镇',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: formModel.countyid && getChildrenTree,
+        params: { parentId: formModel.countyid },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'name',
+        valueField: 'id',
+      };
+    },
+  },
+  {
+    field: 'status_base',
+    label: '当前状态',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: getLoad,
+        params: { code: 'kcdangqianzhuangtai' },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'itemName',
+        valueField: 'itemValue',
+      };
+    },
+    slot: 'dangqianzhuangtai',
+  },
+
+  {
+    field: 'hefapanding_fill',
+    label: '判定结果',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: getLoad,
+        params: { code: 'kcpandingjieguo' },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'itemName',
+        valueField: 'itemValue',
+      };
+    },
+  },
+
+  {
+    field: 'zhenggaitype_jgzhg',
+    label: '整改措施',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: getLoad,
+        params: { code: 'kczhenggaicuoshi' },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'itemName',
+        valueField: 'itemValue',
+      };
+    },
+  },
+
+  {
+    field: 'wefatype_kcfill',
+    label: '开采违法类型',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: getLoad,
+        params: { code: 'kaicaiweifa' },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'itemName',
+        valueField: 'itemValue',
+      };
+    },
+  },
+  {
+    field: 'weifatype_jgfill',
+    label: '加工违法类型',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: getLoad,
+        params: { code: 'jiagongweifa' },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'itemName',
+        valueField: 'itemValue',
+      };
+    },
+  },
+  // 增加图斑面积、耕地面积、永农面积的筛选项；
+  {
+    field: 'tubanmianji',
+    label: '图斑面积',
+    colProps: { span: 4 },
+    slot: 'tubanmianji',
+  },
+  {
+    field: 'zhongdianflag_base',
+    label: '是否重点矿区',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      options: [
+        { label: '全部', value: null },
+        { label: '是', value: '是' },
+        { label: '否', value: '否' },
+      ],
+    },
+  },
+  {
+    field: 'kuangzhong_kcfill',
+    label: '权属矿种',
+    component: 'ApiSelect',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: getLoad,
+        params: { code: 'kuangzhong' },
+        // 接口参数
+        resultField: 'result',
+        labelField: 'itemName',
+        valueField: 'itemValue',
+      };
+    },
+  },
+  {
+    field: '[startTime, endTime]',
+    label: '日期范围',
+    component: 'RangePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      placeholder: ['开始日期', '结束日期'],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'tubannum_base',
+    label: '图斑编号',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];

src/views/demo/minerals/processingstatistics/index.vue

@@ -0,0 +1,277 @@
+<template>
+  <PageWrapper dense contentFullHeight fixedHeight>
+    <div class="table-box">
+      <BasicTable @register="registerTable" :searchInfo="searchInfo" @change="handleChange">
+        <template #toolbar>
+          <PermissionBtn @btn-event="onBtnClicked" />
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="['area', 'gengdiarea', 'nongyongdiarea'].includes(column.key)">
+            {{ dataProcessingCount(record[column.key]) }}
+          </template>
+          <template v-if="column.key === 'action'">
+            <TableAction
+              :actions="[
+                {
+                  // icon: 'ant-design:ellipsis-outlined',
+                  label: '查看',
+                  onClick: viewAccount.bind(null, record),
+                },
+              ]"
+            />
+          </template>
+        </template>
+      </BasicTable>
+    </div>
+    <a-modal v-model:open="open" title="导出文件类型" :footer="null">
+      <div>
+        <a-button class="exportbutton" @click="handleExport('excel')">
+          图斑汇总统计报表（execl）
+        </a-button>
+        <a-button class="exportbutton" @click="handleExport('shp')">
+          图斑汇总矢量数据（shp）
+        </a-button>
+      </div>
+    </a-modal>
+    <a-modal
+      style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
+      wrap-class-name="full-modal"
+      v-model:open="showInfoOpen"
+      title="详情"
+      :footer="null"
+      :maskClosable="true"
+      :destroyOnClose="true"
+      @cancel="showInfoOpen = false"
+    >
+      <div class="modal-content">
+        <ShowInfoModal :showInfoData="showInfoData" />
+      </div>
+    </a-modal>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getLoadMineralsProcess } from '@/api/minerals/index';
+  import { PermissionBtn } from '@/components/PermissionBtn/index';
+  import { columns } from './processingstatistics.data';
+  import { getAppEnvConfig } from '@/utils/env';
+  import axios from 'axios';
+  import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
+  import { GetCaseInfoById } from '@/api/illegalmining/index';
+  import { dataProcessingCount } from '@/views/demo/tiankongdi/util';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { PageWrapper } from '@/components/Page';
+
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+
+  defineOptions({ name: 'RoleManagement' });
+
+  const searchInfo = reactive<Recordable>({
+    countyid: null,
+  });
+  const showInfoData = ref();
+  const showInfoOpen = ref(false);
+  const searchParams = ref({
+    page: 1,
+    limit: 15,
+  });
+  const areaParams = ref({
+    tubanArea1: null,
+    tubanArea2: null,
+    gengdiArea1: null,
+    gengdiArea2: null,
+    jibenArea1: null,
+    jibenArea2: null,
+  });
+  const tableData = ref([]);
+  const tablePaginationRight = ref({
+    current: 1,
+    pageSize: 15,
+    size: 'small',
+    defaultPageSize: 15,
+    showSizeChanger: true,
+    pageSizeOptions: ['15', '50', '80', '100'],
+    showQuickJumper: true,
+    total: 0,
+  });
+  const [registerTable, { setTableData, reload, clearSelectedRowKeys, setPagination, setLoading }] =
+    useTable({
+      title: '统计报表-加工台账',
+      dataSource: tableData.value,
+      columns,
+      rowKey: 'id',
+      useSearchForm: false,
+      showTableSetting: true,
+      bordered: true,
+      // 搜索
+      handleSearchInfoFn(info) {
+        searchParams.value = info;
+        return info;
+      },
+      pagination: tablePaginationRight.value,
+    });
+
+  // 直接下载接口返回的二进制流
+  function handleExport(exportType) {
+    console.log(searchParams);
+    let params = { ...searchParams.value };
+    let url = '';
+    let fileName = '';
+    if (exportType == 'excel') {
+      url = VITE_GLOB_API_URL + '/api/DroneCaseInfoMinerals/ExprotMineralsProcess';
+      fileName = '图斑汇总统计报表' + new Date().getTime() + '.xls';
+    } else if (exportType == 'shp') {
+      url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSatellite/ExportCaseInfoWpxfShapefile';
+      fileName = '图斑汇总矢量数据' + new Date().getTime() + '.zip';
+    }
+    axios({
+      method: 'post',
+      url: url,
+      params: params,
+      headers: {
+        'X-Token': localStorage.getItem('X-Token'),
+      },
+      responseType: 'blob',
+    }).then((res) => {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(res.data);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    });
+  }
+
+  const open = ref<boolean>(false);
+  function onBtnClicked(domId) {
+    switch (domId) {
+      case 'btnExport':
+        // open.value = true;
+        handleExport('excel');
+        break;
+      default:
+        break;
+    }
+  }
+  function viewAccount(record) {
+    GetCaseInfoById({ id: record.Id }).then((res) => {
+      showInfoData.value = res;
+      showInfoOpen.value = true;
+    });
+  }
+  function handleChange(data) {
+    searchParams.value.page = data.current;
+    searchParams.value.limit = data.pageSize;
+    tablePaginationRight.value = data;
+    const querys = Object.assign(searchParams.value, areaParams.value);
+    getTableData(querys);
+  }
+  function handleSubmit() {
+    searchParams.value = getFieldsValue();
+    searchParams.value.page = 1;
+    tablePaginationRight.value.current = 1;
+    searchParams.value.limit = tablePaginationRight.value.pageSize;
+    const querys = Object.assign(searchParams.value, areaParams.value);
+    getTableData(querys);
+  }
+  function getTableData(querys) {
+    setLoading(true);
+    getLoadMineralsProcess(querys).then((res) => {
+      tableData.value = res.items;
+      tablePaginationRight.value.total = res.total;
+      setTableData(tableData.value);
+      setPagination(tablePaginationRight.value);
+      setLoading(false);
+    });
+  }
+  function handleReset() {
+    searchParams.value = {
+      page: 1,
+      limit: 15,
+    };
+    areaParams.value = {
+      tubanArea1: null,
+      tubanArea2: null,
+      gengdiArea1: null,
+      gengdiArea2: null,
+      jibenArea1: null,
+      jibenArea2: null,
+    };
+    tablePaginationRight.value.current = 1;
+    getTableData(searchParams.value);
+  }
+  onMounted(() => {
+    getTableData(searchParams.value);
+  });
+</script>
+<style lang="less" scoped>
+  .data-preview-container {
+    width: 100%;
+    height: calc(100% - 0px);
+    position: absolute;
+    padding: 30px 10px;
+    top: 0px;
+    left: 0px;
+    background: #fff;
+  }
+  .data-preview-container-option {
+    width: 120px;
+    height: 40px;
+    position: absolute;
+    top: 30px;
+    right: 0px;
+  }
+  .data-preview-container-option div {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    float: left;
+    text-align: center;
+    cursor: pointer;
+  }
+  .full-modal {
+    .ant-modal {
+      min-width: 100vw;
+      top: 0px;
+      padding: 0px;
+      margin: 0px;
+    }
+    .ant-modal-content {
+      display: flex;
+      flex-direction: column;
+    }
+    .ant-modal-body {
+      flex: 1;
+    }
+  }
+  .exportbutton {
+    width: 510px;
+    height: 60px;
+    margin: 5px;
+  }
+  .search-box {
+    background: @component-background;
+    margin: 16px;
+    padding: 16px;
+  }
+  ::v-deep .ant-col-24 {
+    display: inline-block;
+    max-width: fit-content;
+    margin-left: 20px;
+  }
+  .table-box {
+    margin: 16px;
+  }
+  .scope-box {
+    display: flex;
+    width: 100%;
+    .ant-input {
+      width: 48% !important;
+      max-width: 48%;
+      min-width: 48%;
+    }
+  }
+</style>

src/views/demo/minerals/processingstatistics/processingstatistics.data.ts

@@ -0,0 +1,65 @@
+import { BasicColumn } from '@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '年',
+    dataIndex: 'syear_base',
+  },
+  {
+    title: '接收时间',
+    dataIndex: 'xiafatime_base',
+  },
+  {
+    title: '编号',
+    dataIndex: 'tubannum_base',
+    width: 200,
+  },
+  {
+    title: '线索来源',
+    dataIndex: 'laiyuan_base',
+  },
+  {
+    title: '线索描述',
+    dataIndex: 'miaoshu_base',
+  },
+  {
+    title: '县区',
+    dataIndex: 'weizhixianname_base',
+  },
+  {
+    title: '乡镇',
+    dataIndex: 'weizhizhenname_base',
+  },
+  {
+    title: '村居',
+    dataIndex: 'weizhicunname_base',
+  },
+  {
+    title: '开采主体',
+    dataIndex: 'danweiname_jgzhg',
+  },
+  {
+    title: '违法类型',
+    dataIndex: 'weifatype_jgfill',
+  },
+  {
+    title: '整改类型',
+    dataIndex: 'zhenggaitype_jgzhg',
+  },
+  {
+    title: '核查人员名单',
+    dataIndex: 'tianbaoren_fill',
+  },
+  {
+    title: '审核人员名单',
+    dataIndex: 'xianshenheren_fill',
+  },
+  {
+    title: '办理时间限定',
+    dataIndex: 'chulishixian_base',
+  },
+  {
+    title: '是否提交核查报告',
+    dataIndex: 'shuoming_fill',
+  },
+];

src/views/demo/statistical/illegaltreatment/AuditProgress/index.vue

@@ -218,7 +218,7 @@
       width="100%"
       wrap-class-name="full-modal"
       v-model:open="auditOpen"
-      title="审核监督"
+      title="整改审核"
       footer=""
       :destroyOnClose="true"
     >
@@ -229,6 +229,7 @@
         :taskId="taskId"
         :isRead="isRead"
         :type="type"
+        :auditData="auditData"
         @closeModel="closeMolder"
       />
     </a-modal>
@@ -258,7 +259,7 @@
     'yearOptions',
     'dataList',
   ]);
-  const emits = defineEmits(['auditProgressScreenChange', 'showInfo', 'changeTask', 'openLoading', 'closeLoading']);
+  const emits = defineEmits(['auditProgressScreenChange', 'showInfo', 'changeTask', 'openLoading', 'closeLoading','getCountList']);
 
   const flowWfDataStore = flowStore();
   const userStore = useUserStore()
@@ -270,6 +271,7 @@
   const processId = ref('');
   const taskId = ref('');
   const type = ref('');
+  const auditData = ref()
   const isRead: any = ref(0);
 
   const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
@@ -310,6 +312,7 @@
     processId.value = record.processid;
     taskId.value = record.taskeid;
     type.value = record.type;
+    auditData.value = record;
   }
   const cancelCollectItem = (item) => {
     deleteTaskCase(item.Fid).then(res => {
@@ -332,6 +335,10 @@
       querysBtn();
     })
   }
+  const closeMolder = () => {
+    querysBtn()
+    emits('getCountList')
+  }
 </script>
 
 <style lang="less" scoped>

src/views/demo/statistical/illegaltreatment/MapList/index.vue

@@ -174,7 +174,7 @@
       width="100%"
       wrap-class-name="full-modal"
       v-model:open="auditOpen"
-      title="违法处理"
+      title="整改审核"
       footer=""
       :destroyOnClose="true"
     >
@@ -197,6 +197,7 @@
         :taskId="taskId"
         :isRead="isRead"
         :type="type"
+        :auditData="auditData"
         @closeModel="closeMolder"
       />
     </a-modal>
@@ -231,6 +232,7 @@
   const taskId = ref('');
   const isRead: any = ref(0);
   const type = ref('');
+  const auditData = ref()
   const order = ref(0)
   const auditOpen = ref(false);
   const showDataId = ref()
@@ -312,6 +314,7 @@
     processId.value = record.processid;
     taskId.value = record.taskeid;
     type.value = record.type;
+    auditData.value = record;
   }
   async function locationFun(record) {
     emits('changeTask', record);
@@ -361,6 +364,7 @@
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = dataList.value[dataList.value.length - 1].Id
+      auditData.value = dataList.value[dataList.value.length - 1]
       return
     }else{
       showDataId.value = prevShowDataId.value
@@ -375,6 +379,7 @@
     taskId.value = record.taskeid;
     type.value = record.type;
     handoffShow.value = true
+    auditData.value = record
   }
   const nextData = async () => {
     if(nextShowDataId.value === 0){
@@ -397,6 +402,7 @@
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = dataList.value[0].Id
+      auditData.value = dataList.value[0]
       return
     }else{
       showDataId.value = nextShowDataId.value
@@ -411,6 +417,7 @@
     taskId.value = record.taskeid;
     type.value = record.type;
     handoffShow.value = true
+    auditData.value = record
   }
   const cancelCollectItem = (item) => {
     deleteTaskCase(item.Fid).then(res => {

src/views/demo/statistical/illegaltreatment/index.vue

@@ -14,6 +14,7 @@
           @changeTask="changeTask"
           @openLoading="openLoading"
           @closeLoading="closeLoading"
+          @getCountList="getCountList"
         />
         <MapList
           @changeTask="changeTask"

src/views/demo/statistical/patchsummary/index.vue

@@ -7,6 +7,18 @@
         :schemas="searchFormSchema"
         :actionColOptions="{ span: 24 }"
       >
+        <template #dangqianzhuangtai>
+          <a-select
+            allowClear
+            showArrow
+            mode="multiple"
+            v-model:value="nowStatus"
+            :options="nowStatusOptions"
+            :max-tag-count="1"
+            placeholder="请选择"
+            @change="changeStatus"
+          />
+        </template>
         <template #tubanmianji>
           <div class="scope-box">
             <a-input v-model:value="areaParams.tubanArea1" placeholder="请输入" />
@@ -93,6 +105,7 @@
   import { BasicForm, useForm } from '@/components/Form';
   import { PageWrapper } from '@/components/Page';
   import dayjs from 'dayjs';
+  import { nowStatusOptions } from '@/utils/global';
 
   const { VITE_GLOB_API_URL } = getAppEnvConfig();
 
@@ -107,6 +120,7 @@
     page: 1,
     limit: 10,
   });
+  const nowStatus = ref(undefined);
   const areaParams = ref({
     tubanArea1: null,
     tubanArea2: null,
@@ -114,6 +128,7 @@
     gengdiArea2: null,
     jibenArea1: null,
     jibenArea2: null,
+    nowStatus: undefined,
   });
   const tableData = ref([]);
   const tablePaginationRight = ref({
@@ -217,6 +232,10 @@
     const querys = Object.assign(searchParams.value, areaParams.value);
     getTableData(querys);
   }
+  function changeStatus(val) {
+    console.log(val);
+    areaParams.value.nowStatus = val.join(',');
+  }
   function handleSubmit() {
     searchParams.value = getFieldsValue();
     searchParams.value.page = 1;
@@ -326,4 +345,7 @@
       min-width: 48%;
     }
   }
+  ::v-deep .ant-select-selection-overflow-item:first-child .ant-select-selection-item {
+    width: 80px;
+  }
 </style>

src/views/demo/statistical/patchsummary/patchsummary.data.ts

@@ -119,6 +119,7 @@ export const searchFormSchema: FormSchema[] = [
       options: [],
     },
   },
+ 
   {
     field: 'typename',
     label: '图斑类型',
@@ -141,36 +142,6 @@ export const searchFormSchema: FormSchema[] = [
       options: markTypeOptions,
     },
   },
-  {
-    field: 'isIllegal',
-    label: '判定结果',
-    component: 'Select',
-    colProps: { span: 4 },
-    componentProps: {
-      options: mapTypeOptions,
-    },
-  },
-  {
-    field: 'nowStatus',
-    label: '当前状态',
-    component: 'Select',
-    componentProps: {
-      options: nowStatusOptions,
-    },
-    colProps: { span: 4 },
-  },
-  {
-    field: 'measureName',
-    label: '整改措施',
-    component: 'Select',
-    colProps: { span: 4 },
-    componentProps: {
-      options: [
-        { label: '拆除复耕', value: '0' },
-        { label: '补办手续', value: '1' },
-      ],
-    },
-  },
   {
     field: 'countyid',
     label: '区县',
@@ -207,16 +178,23 @@ export const searchFormSchema: FormSchema[] = [
     },
   },
   {
-    field: 'caseNo',
-    label: '图斑编号',
-    component: 'Input',
+    field: 'nowStatus',
+    label: '当前状态',
+    component: 'Select',
+    componentProps: {
+      options: nowStatusOptions,
+    },
     colProps: { span: 4 },
+    slot: 'dangqianzhuangtai',
   },
   {
-    field: 'originalcaseno',
-    label: '标识号',
-    component: 'Input',
+    field: 'isIllegal',
+    label: '判定结果',
+    component: 'Select',
     colProps: { span: 4 },
+    componentProps: {
+      options: mapTypeOptions,
+    },
   },
   {
     field: 'weifaleixing',
@@ -230,6 +208,19 @@ export const searchFormSchema: FormSchema[] = [
       ],
     },
   },
+  {
+    field: 'measureName',
+    label: '整改措施',
+    component: 'Select',
+    colProps: { span: 4 },
+    componentProps: {
+      options: [
+        { label: '拆除复耕', value: '0' },
+        { label: '补办手续', value: '1' },
+      ],
+    },
+  },
+
   // 增加图斑面积、耕地面积、永农面积的筛选项；
   {
     field: 'tubanmianji',
@@ -249,6 +240,12 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 4 },
     slot: 'jibennongtianmianji',
   },
+  {
+    field: 'originalcaseno',
+    label: '标识号',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
   {
     field: '[startTime, endTime]',
     label: '下发时间',
@@ -259,4 +256,10 @@ export const searchFormSchema: FormSchema[] = [
       placeholder: ['开始日期', '结束日期'],
     },
   },
+  {
+    field: 'caseNo',
+    label: '图斑编号',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
 ];

src/views/demo/system/achievement/AchievementManage/index.vue

@@ -288,35 +288,36 @@
       type: 'FeatureCollection',
       features: [],
     };
-    // let lngList: any = [];
-    // let latList: any = [];
+    let lngList: any = [];
+    let latList: any = [];
     tasklist?.forEach((item, index) => {
-      // lngList.push(parseFloat(item.gemo.x));
-      // latList.push(parseFloat(item.gemo.y));
+      let st: any = item.geometry.slice(6, -1);
+      st = st.split(' ');
+      lngList.push(parseFloat(st[0]));
+      latList.push(parseFloat(st[1]));
       let feature: any = {
         type: 'Feature',
         geometry: {
           type: 'Point',
-          coordinates: [parseFloat(item.gemo.x), parseFloat(item.gemo.y)],
+          coordinates: [parseFloat(st[0]), parseFloat(st[1])],
         },
         properties: {
           taskName: getTaskNameBytaskId(item.taskId) + item.uploadTime,
           path: item.path,
           // model: item.model,
-          lng: item.gemo.x,
-          lat: item.gemo.y,
+          lng: parseFloat(st[0]),
+          lat: parseFloat(st[1]),
         },
       };
       taskLayerGeoJson.features.push(feature);
     });
 
     // 确定中心点和zoom等级
-    // let result = calculateCenterAndZoom(lngList, latList);
-    // console.log(result);
+    let result = calculateCenterAndZoom(lngList, latList);
     // 航飞图片-图层
     mapboxComponentRef.value.AchievementManageRaster(
       taskLayerGeoJson,
-      [118.30207505530701, 35.30123435040745],
+      result.center,
       7.848587811931849,
     );
   }
@@ -326,7 +327,7 @@
     let resultName = '';
     getDataSource().forEach((element) => {
       if (element.id == taskid) {
-        resultName = element.taskName;
+        resultName = element.taskName + '(' + element.flyer + ')';
       }
     });
     if (resultName) {
@@ -353,7 +354,7 @@
     const deltaLng = maxLng - minLng;
     const deltaLat = maxLat - minLat;
     // 估算合适的缩放级别
-    let zoom = 14 - Math.log2((Math.max(deltaLng, deltaLat) * 360) / 360); // 360度为地球一圈
+    let zoom = 14 - Math.log2(Math.max(deltaLng, deltaLat)); // 直接使用最大偏移量
     zoom = Math.max(8, Math.min(15, zoom)); // 确保缩放级别在合理范围内
     return {
       center: [centerLng, centerLat],

src/views/demo/system/achievement/Display/TimeLine.vue

@@ -0,0 +1,220 @@
+<template>
+  <div>
+    <a-row ::gutter="0">
+      <a-col :span="5">
+        <div class="RightBox">
+          <a-tooltip class="box-item" placement="top">
+            <template #title>
+              <span>上一年</span>
+            </template>
+            <a-button type="text" @click="handleSubYear">
+              <Icon icon="bi:chevron-double-left" style="color: #ffffff" :size="30" />
+            </a-button>
+          </a-tooltip>
+          <a-tooltip class="box-item" placement="top">
+            <template #title>
+              <span>上一月</span>
+            </template>
+            <a-button type="text" style="margin-left: 10px" @click="handleSubMouth">
+              <Icon icon="bi:chevron-left" style="color: #ffffff" :size="30" />
+            </a-button>
+          </a-tooltip>
+
+          <a-tooltip class="box-item" placement="top">
+            <template #title>
+              <span>播放/暂停</span>
+            </template>
+            <a-button type="text" style="margin-left: 10px" @click="handlePlay">
+              <Icon v-if="!playSwitch" icon="bi:play-circle" style="color: #ffffff" :size="30" />
+              <Icon v-if="playSwitch" icon="bi:pause-circle" style="color: #ffffff" :size="30" />
+            </a-button>
+          </a-tooltip>
+
+          <a-tooltip class="box-item" placement="top">
+            <template #title>
+              <span>下一月</span>
+            </template>
+            <a-button type="text" style="margin-left: 10px" @click="handleAddMouth">
+              <Icon icon="bi:chevron-right" style="color: #ffffff" :size="30" />
+            </a-button>
+          </a-tooltip>
+          <a-tooltip class="box-item" placement="top">
+            <template #title>
+              <span>下一年</span>
+            </template>
+            <a-button type="text" style="margin-left: 10px" @click="handleAddYear">
+              <Icon icon="bi:chevron-double-right" style="color: #ffffff" :size="30" />
+            </a-button>
+          </a-tooltip>
+        </div>
+      </a-col>
+      <a-col :span="19">
+        <div class="timeBox">
+          <a-slider
+            v-model:value="nowValue"
+            :tooltipOpen="true"
+            :tip-formatter="getValue"
+            :marks="marks"
+            :step="1"
+            :max="maxDays"
+            :min="1"
+            @afterChange="sliderChange"
+          >
+            <template #mark="{ label, point }">
+              <template v-if="label.slice(-2) == '01'">
+                <span :style="{ color: 'white' }">{{ label }}</span>
+              </template>
+              <template v-if="label.slice(-4) == '1231'">
+                <span :style="{ color: 'white' }">{{ label }}</span>
+              </template>
+            </template>
+          </a-slider>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  // vue
+  import { ref, watch, computed, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from 'vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import dayjs from 'dayjs';
+
+  const emit = defineEmits(['handleNowValueChange']);
+
+  const nowValue = ref<number>(parseInt(dayjs().dayOfYear()));
+  const marks = ref<Record<number, any>>();
+  const maxDays = ref(365);
+
+  const calculateDayOfYearAndDates = (time) => {
+    const startDate = dayjs(time).startOf('year');
+    const endDate = dayjs(time).endOf('year');
+    // 初始化 marks 为空对象
+    marks.value = {};
+    maxDays.value = parseInt(endDate.dayOfYear());
+    for (
+      let currentDate = startDate;
+      currentDate.isBefore(endDate);
+      currentDate = currentDate.add(1, 'day')
+    ) {
+      const dayOfYear = parseInt(currentDate.dayOfYear());
+      const dateString = currentDate.format('YYYYMMDD');
+      marks.value[dayOfYear] = dateString;
+    }
+  };
+
+  const getValue = (key: number) => {
+    if (marks.value) {
+      return marks.value[key];
+    } else {
+      return key;
+    }
+  };
+
+  // 发生改变
+  const sliderChange = (key: number) => {
+    emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(nowValue.value))]);
+    playSwitch.value = false;
+  };
+
+  // 播放/暂停
+  const playSwitch = ref(false);
+  const handlePlay = () => {
+    playSwitch.value = !playSwitch.value;
+    if (playSwitch.value && nowValue.value < maxDays.value) {
+      addValue();
+    }
+  };
+
+  function addValue() {
+    console.log(playSwitch.value);
+    if (playSwitch.value) {
+      setTimeout(() => {
+        nowValue.value = parseInt(dayjs(getValue(nowValue.value)).add(15, 'day').dayOfYear());
+        emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(nowValue.value))]);
+        addValue();
+      }, 3000);
+    }
+  }
+
+  // 上一年
+  const handleSubYear = () => {
+    if (isLeapYear(dayjs(getValue(nowValue.value)).year()) && nowValue.value > 58) {
+      nowValue.value -= 1;
+    }
+    if (isLeapYear(dayjs(getValue(nowValue.value)).year() - 1) && nowValue.value > 58) {
+      nowValue.value += 1;
+    }
+    calculateDayOfYearAndDates(dayjs(getValue(nowValue.value)).add(-1, 'year'));
+    emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(nowValue.value))]);
+    playSwitch.value = false;
+  };
+
+  // 上一月
+  const handleSubMouth = () => {
+    if (nowValue.value <= 31) {
+      calculateDayOfYearAndDates(dayjs(getValue(nowValue.value)).add(-1, 'month'));
+      nowValue.value = parseInt(dayjs(getValue(nowValue.value)).add(11, 'month').dayOfYear());
+    } else {
+      nowValue.value = parseInt(dayjs(getValue(nowValue.value)).add(-1, 'month').dayOfYear());
+    }
+    emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(nowValue.value))]);
+    playSwitch.value = false;
+  };
+
+  // 下一月
+  const handleAddMouth = () => {
+    if (nowValue.value >= parseInt(dayjs(dayjs().year() + '-12-01').dayOfYear())) {
+      calculateDayOfYearAndDates(dayjs(getValue(nowValue.value)).add(1, 'month'));
+      nowValue.value = parseInt(dayjs(getValue(nowValue.value)).add(-11, 'month').dayOfYear());
+    } else {
+      nowValue.value = parseInt(dayjs(getValue(nowValue.value)).add(1, 'month').dayOfYear());
+    }
+    emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(nowValue.value))]);
+    playSwitch.value = false;
+  };
+
+  // 下一年
+  const handleAddYear = () => {
+    if (isLeapYear(dayjs(getValue(nowValue.value)).year()) && nowValue.value > 58) {
+      nowValue.value -= 1;
+    }
+    if (isLeapYear(dayjs(getValue(nowValue.value)).year() + 1) && nowValue.value > 58) {
+      nowValue.value += 1;
+    }
+    calculateDayOfYearAndDates(dayjs(getValue(nowValue.value)).add(1, 'year'));
+    emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(nowValue.value))]);
+    playSwitch.value = false;
+  };
+
+  /// 判断是否为闰年的函数
+  function isLeapYear(y: number): boolean {
+    return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0;
+  }
+
+  onMounted(() => {
+    calculateDayOfYearAndDates(dayjs());
+  });
+</script>
+<style lang="less" scoped>
+  .timeBox {
+    position: relative;
+    top: 40px;
+    width: 900px;
+  }
+
+  .RightBox {
+    position: relative;
+    top: 40px;
+    width: 300px;
+  }
+
+  .box-item {
+    justify-content: center;
+    width: 25px;
+    Icon {
+      display: flex;
+    }
+  }
+</style>

src/views/demo/system/achievement/Display/index.vue

@@ -0,0 +1,425 @@
+<template>
+  <div>
+    <div class="case-tree-container">
+      <div class="title"> 图层列表 </div>
+      <div class="case-tree">
+        <a-directory-tree
+          v-model:expandedKeys="expandedKeys"
+          v-model:selectedKeys="selectedKeys"
+          v-model:checkedKeys="checkedKeys"
+          checkable
+          multiple
+          :tree-data="treeData"
+          @select="onSelect"
+          @check="onCheck"
+        />
+      </div>
+    </div>
+    <div class="timeLineBox">
+      <TimeLine @handleNowValueChange="handleNowValueChange" />
+    </div>
+    <div>
+      <MapComponent
+        ref="mapboxComponentRef"
+        :style="{
+          position: 'absolute',
+          height: `calc(100vh - 90px)`,
+          width: `100%`,
+          marginLeft: '6px',
+          top: '0px',
+          left: '0px',
+          zIndex: '0',
+        }"
+        @handleOpen="handleOpen"
+      />
+    </div>
+    <a-modal :open="modalOpen" :title="modalTitle" :footer="null" @cancel="handleCancel">
+      <a-image style="height: 100%; width: 100%" :src="modalImage" />
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, onMounted } from 'vue';
+  import { BasicTree, TreeItem, TreeActionType } from '@/components/Tree';
+  import type { TreeProps } from 'ant-design-vue';
+  // vben
+  import { useMessage } from '@/hooks/web/useMessage';
+  // 组件
+  import MapComponent from '@/views/demo/system/geoservermanagement/clound/mapComponent.vue';
+  import TimeLine from './TimeLine.vue';
+  import {
+    AchievementManageListTask,
+    AchievementManageListDroneShpImageexif,
+    GeoTiffManagerLoadPage,
+    getGeomData,
+    ShpGeoLayerLoadPage,
+  } from '@/api/demo/system';
+  import { prepareTreeData } from './util';
+  import dayjs from 'dayjs';
+  // 图片路径拼接
+  import { getAppEnvConfig } from '@/utils/env';
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
+
+  const { createMessage } = useMessage();
+
+  const selectedKeys = ref<string[]>([]);
+  const expandedKeys = ref<string[]>(['1', '2', '3']);
+  const checkedKeys = ref<string[]>([]);
+  const treeData: any = ref(prepareTreeData);
+  let tableData1: any = [];
+  let tableData2: any = [];
+  let tableData3: any = [];
+  let tableData3_tupian: any = [];
+  let tableData1_id_list: any = [];
+  let tableData2_id_list: any = [];
+  let tableData3_id_list: any = [];
+
+  let startTime = dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss');
+  let endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
+
+  // 右边树的数据
+  function fetch() {
+    // 矢量图层
+    ShpGeoLayerLoadPage({
+      page: 1,
+      limit: 10000,
+    }).then((res) => {
+      tableData1 = res.items;
+      res.items.forEach((item) => {
+        tableData1_id_list.push(item.id);
+      });
+      treeData.value[0].children = [];
+      res.items.forEach((item) => {
+        treeData.value[0].children.push({
+          key: item.id,
+          title: item.serverName,
+        });
+      });
+    });
+    // 历史影像
+    GeoTiffManagerLoadPage({
+      page: 1,
+      limit: 10000,
+    }).then((res) => {
+      tableData2 = res.items;
+      res.items.forEach((item) => {
+        tableData2_id_list.push(item.id);
+      });
+      treeData.value[1].children = [];
+      res.items.forEach((item) => {
+        treeData.value[1].children.push({
+          key: item.id,
+          title: item.layerName,
+        });
+      });
+    });
+    // 航飞图片
+    AchievementManageListTask({
+      pageIndex: 1,
+      pageSize: 10000,
+    }).then((res) => {
+      tableData3 = res.items;
+      res.items.forEach((item) => {
+        tableData3_id_list.push(item.id);
+      });
+      tableData3_tupian = [];
+      treeData.value[2].children = [];
+      res.items.forEach((item1) => {
+        if (item1.imageCount > 0) {
+          // 航飞图片-任务
+          let children: any = [];
+          AchievementManageListDroneShpImageexif({
+            pageIndex: 1,
+            pageSize: item1.imageCount,
+            taskId: item1.id,
+          }).then((res2) => {
+            res2.items.forEach((item2) => {
+              tableData3_tupian.push(item2);
+              children.push({
+                key: item2.id,
+                title: item2.uploadTime,
+              });
+            });
+            // 添加进树里
+            treeData.value[2].children.push({
+              key: item1.id,
+              title: item1.taskName + '(' + item1.imageCount + ')',
+              children: children,
+            });
+          });
+        } else {
+          treeData.value[2].children.push({
+            key: item1.id,
+            title: item1.taskName + '(' + item1.imageCount + ')',
+          });
+        }
+      });
+    });
+  }
+
+  // 航飞图片-任务
+  function DroneShpImageexif(record) {
+    let children: any = [];
+    AchievementManageListDroneShpImageexif({
+      pageIndex: 1,
+      pageSize: record.imageCount,
+    }).then((res) => {
+      res.items.forEach((item) => {
+        children.push({
+          key: item.id,
+          title: item.uploadTime,
+        });
+      });
+    });
+    return children;
+  }
+
+  // 地图ref
+  const mapboxComponentRef = ref();
+  let checkedKeys_now: any;
+  // 树选中
+  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
+    // console.log(selectedKeys, info);
+    if (!checkedKeys.value.includes(info.node.key)) {
+      checkedKeys.value.push(info.node.key);
+    }
+  };
+  // 树复选框选中
+  const onCheck: TreeProps['onCheck'] = (checkedKeys, e) => {
+    console.log(checkedKeys);
+    checkedKeys_now = checkedKeys;
+    let filter_tuceng: any = [];
+    let filter_yingxiang: any = [];
+    let filter_hangfei: any = [];
+
+    mapboxComponentRef.value.clearTaskLayer('GeoserverManagementRaster');
+    mapboxComponentRef.value.clearTaskLayer('GeoTiffManagerRaster');
+    mapboxComponentRef.value.clearTaskLayer('AchievementManageRaster');
+
+    checkedKeys_now.forEach((checkedKey) => {
+      if (!['1', '2', '3'].includes(checkedKey)) {
+        // 图层管理-图层
+        if (tableData1_id_list.includes(checkedKey)) {
+          tableData1.forEach((data) => {
+            if (checkedKey == data.id) {
+              // 时间轴筛选数据
+              if (
+                dayjs(startTime).isBefore(data.createTime) &&
+                dayjs(endTime).isAfter(data.createTime)
+              ) {
+                filter_tuceng.push(data);
+              }
+            }
+          });
+        }
+        // 影像管理-图层
+        else if (tableData2_id_list.includes(checkedKey)) {
+          tableData2.forEach((data) => {
+            if (checkedKey == data.id) {
+              // 时间轴筛选数据
+              if (
+                dayjs(startTime).isBefore(data.createTime) &&
+                dayjs(endTime).isAfter(data.createTime)
+              ) {
+                filter_yingxiang.push(data);
+              }
+            }
+          });
+        }
+        // // 航飞图片-图层
+        // else if (tableData3_id_list.includes(checkedKey)) {
+        //   tableData3.forEach((data) => {
+        //     if (checkedKey == data.id) {
+        //       if (data.imageCount > 0) {
+        //         tableData3_tupian.forEach((tupian) => {
+        //           if (tupian.taskId == data.id) {
+        //             // 时间轴筛选数据
+        //             if (
+        //               dayjs(startTime).isBefore(tupian.uploadTime) &&
+        //               dayjs(endTime).isAfter(tupian.uploadTime)
+        //             ) {
+        //               filter_hangfei.push(tupian);
+        //             }
+        //           }
+        //         });
+        //       } else {
+        //         createMessage.info('当前选中的任务并无航飞图片');
+        //       }
+        //     }
+        //   });
+        // }
+        // 航飞图片-任务
+        else {
+          let filter = tableData3_tupian.filter((item) => item.id == checkedKey);
+          filter?.forEach((f) => {
+            if (!filter_hangfei.includes(f)) {
+              filter_hangfei.push(f);
+            }
+          });
+        }
+      }
+    });
+    // 图层管理
+    if (filter_tuceng.length > 0) {
+      mapboxComponentRef.value.GeoserverManagementRaster(
+        filter_tuceng,
+        [118.30207505530701, 35.30123435040745],
+        7.848587811931849,
+      );
+    }
+    // 影像管理
+    if (filter_yingxiang.length > 0) {
+      mapboxComponentRef.value.GeoTiffManagerRaster(
+        filter_yingxiang,
+        [118.30207505530701, 35.30123435040745],
+        7.848587811931849,
+      );
+    }
+    // 航飞图片-图层、任务
+    if (filter_hangfei.length > 0) {
+      handlerUpdateTaskLayerData(filter_hangfei);
+    }
+  };
+
+  // 航飞图片-无人机图层
+  function handlerUpdateTaskLayerData(tasklist) {
+    let taskLayerGeoJson = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+    let lngList: any = [];
+    let latList: any = [];
+    tasklist?.forEach((item, index) => {
+      let st: any = item.geometry.slice(6, -1);
+      st = st.split(' ');
+      lngList.push(parseFloat(st[0]));
+      latList.push(parseFloat(st[1]));
+      let feature: any = {
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [parseFloat(st[0]), parseFloat(st[1])],
+        },
+        properties: {
+          taskName: getTaskNameBytaskId(item.taskId) + item.uploadTime,
+          path: item.path,
+          // model: item.model,
+          lng: parseFloat(st[0]),
+          lat: parseFloat(st[1]),
+        },
+      };
+      taskLayerGeoJson.features.push(feature);
+    });
+
+    // 航飞图片-图层
+    mapboxComponentRef.value.AchievementManageRaster(
+      taskLayerGeoJson,
+      [118.30207505530701, 35.30123435040745],
+      7.848587811931849,
+    );
+  }
+
+  // 航飞图片-获取任务名称
+  function getTaskNameBytaskId(taskid) {
+    let resultName = '';
+    tableData3.forEach((element) => {
+      if (element.id == taskid) {
+        resultName = element.taskName + '(' + element.flyer + ')';
+      }
+    });
+    if (resultName) {
+      return resultName + '\n';
+    } else {
+      return resultName;
+    }
+  }
+
+  // 时间轴发生改变返回值
+  function handleNowValueChange(value) {
+    startTime = dayjs(value[0]).startOf('year').format('YYYY-MM-DD HH:mm:ss');
+    endTime = dayjs(value[1]).format('YYYY-MM-DD HH:mm:ss');
+    onCheck(checkedKeys_now);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+
+  // 点击地图上的无人机图标后展示图片------------------------------------------------------------
+  // 窗口
+  const modalOpen = ref(false);
+  const modalTitle = ref('');
+  const modalImage = ref('');
+  // 打开窗口
+  const handleOpen = (path) => {
+    modalOpen.value = true;
+    modalTitle.value = '';
+    // 正则表达式验证函数
+    if (isValidUrl(path)) {
+      modalImage.value = path;
+    } else {
+      modalImage.value = VITE_GLOB_API_URL_VAR.value + path;
+    }
+  };
+  // 关闭窗口
+  const handleCancel = () => {
+    modalOpen.value = false;
+    modalTitle.value = '';
+    modalImage.value = '';
+  };
+  // 正则表达式验证函数
+  function isValidUrl(url: string): boolean {
+    const regex =
+      /^(?:http|ftp)s?:\/\/(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[?[A-F0-9]*:[A-F0-9:]+\]?)(?::\d+)?(?:\/?|[\/?]\S+)$/i;
+    return regex.test(url);
+  }
+</script>
+<style type="less" scoped>
+  ::v-deep .ant-tree-list {
+    background: #041b36;
+    color: #ffffff;
+  }
+  .case-tree-container {
+    width: 320px;
+    height: 720px;
+    background: #041b36;
+    color: #155dd8;
+    position: absolute;
+    z-index: 1;
+    bottom: 20px;
+    left: 20px;
+  }
+
+  .title {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 40px;
+    background-image: url('/videosupervision/title.png');
+    background-size: 100% 100%;
+    line-height: 40px;
+    text-indent: 18px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+
+  .case-tree {
+    padding: 10px 24px;
+    overflow: auto;
+  }
+
+  .timeLineBox {
+    position: absolute;
+    z-index: 1;
+    left: 420px;
+    bottom: 20px;
+    width: 1200px;
+    height: 120px;
+    border: 2px #155dd8;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 60px / 60px;
+  }
+</style>

src/views/demo/system/achievement/Display/util.ts

@@ -0,0 +1,19 @@
+import type { TreeProps } from 'ant-design-vue';
+
+export const prepareTreeData: TreeProps['treeData'] = [
+  {
+    title: '矢量图层',
+    key: '1',
+    children: [],
+  },
+  {
+    title: '历史影像',
+    key: '2',
+    children: [],
+  },
+  {
+    title: '航飞图片',
+    key: '3',
+    children: [],
+  },
+];

src/views/demo/system/achievement/GeoTiffManager/index.vue

@@ -81,7 +81,9 @@
   function handRowClick(record) {
     let bbox = getBboxFromUrl(record.accessUrl);
     let lngLat = getCenterPoint(bbox);
-    mapboxComponent.value.GeoTiffManagerRaster(record, lngLat, 11);
+    let chooseRows: any = [];
+    chooseRows.push(record);
+    mapboxComponent.value.GeoTiffManagerRaster(chooseRows, lngLat, 11);
   }
 
   // 从参数中获取 bbox 的值

src/views/demo/system/achievement/GeoTiffManager/util.ts

@@ -6,6 +6,11 @@ export const columns = [
       dataIndex: 'id',
       ifShow: false,
     },
+    {
+      title: '影像名称',
+      dataIndex: 'layerName',
+      width: 100,
+    },
     {
       title: '数据表名',
       dataIndex: 'dataTable',

src/views/demo/system/cloudManagement/Modal/modal.vue

@@ -78,7 +78,7 @@
             v-model:value="props.modalData.data.classField"
             placeholder="请先选择图层"
             :options="classFieldOptioins"
-            :fieldNames="{ label: 'column_name', value: 'column_name' }"
+            :fieldNames="{ label: 'nameAndValue', value: 'column_name' }"
             :disabled="props.modalData.data.layer == undefined"
             @change="classFieldChange"
           />
@@ -96,7 +96,7 @@
             v-model:value="props.modalData.data.areaField"
             placeholder="请先选择图层"
             :options="classFieldOptioins"
-            :fieldNames="{ label: 'column_name', value: 'column_name' }"
+            :fieldNames="{ label: 'nameAndValue', value: 'column_name' }"
             :disabled="props.modalData.data.layer == undefined"
           />
         </a-form-item>
@@ -205,7 +205,16 @@
   // 分类字段、选择面积计算字段options
   function getClassFieldOptioins(tableName) {
     let query = { tableName: tableName };
-    GetTableAndViewColumnList(query).then((res) => {
+    GetTableAndViewColumnList(query).then((res: any) => {
+      if (res) {
+        res.forEach((element) => {
+          if (element.description == null) {
+            element.nameAndValue = element.column_name;
+          } else {
+            element.nameAndValue = element.column_name + '(' + element.description + ')';
+          }
+        });
+      }
       classFieldOptioins.value = res;
     });
   }

src/views/demo/system/geoservermanagement/clound/mapComponent.vue

@@ -117,7 +117,9 @@
         },
       });
     }
-    map.moveLayer(layerName, '');
+    if (layerName && map.getLayer(layerName)) {
+      map.moveLayer(layerName, '');
+    }
   };
 
   // 获取乡镇数据
@@ -168,40 +170,52 @@
           'text-halo-width': 2,
         },
       });
-      map.moveLayer('countyLayer');
-      map.moveLayer(layerName, '');
+      if (map.getLayer('countyLayer')) {
+        map.moveLayer('countyLayer');
+      }
+      if (layerName && map.getLayer(layerName)) {
+        map.moveLayer(layerName, '');
+      }
     }
   };
 
   // 图层管理-图层
-  function GeoserverManagementRaster(chooseRow, lngLat, zoom) {
+  function GeoserverManagementRaster(chooseRows, lngLat, zoom) {
     // 县区边界
-    handlerDealStreet('GeoserverManagementRaster');
-    handlerDealCountry('GeoserverManagementRaster');
+    if (!map.getLayer('streetLayer')) {
+      handlerDealStreet('GeoserverManagementRaster');
+    }
+    if (!map.getLayer('countyLayer')) {
+      handlerDealCountry('GeoserverManagementRaster');
+    }
     handlerLocation(lngLat, zoom);
 
-    let format =
-      chooseRow.dataType == '点'
-        ? '&format=application/openlayers'
-        : '&format=image/png&TRANSPARENT=TRUE';
+    let tiles: any = [];
+    chooseRows.forEach((chooseRow) => {
+      let format =
+        chooseRow.dataType == '点'
+          ? '&format=application/openlayers'
+          : '&format=image/png&TRANSPARENT=TRUE';
+      // let tile =
+      //   'http://192.168.10.131:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:' +
+      //   chooseRow.dataTable +
+      //   '&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=' +
+      //   chooseRow.spatialRef +
+      //   format;
+      let tile =
+        'http://221.2.83.254:9007/geoserver/ksp/wms?service=WMS&version=1.1.0&request=GetMap&layers=ksp:linqubianyaqi&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE&cql_filter=is_del%20=0';
+      tiles.push(tile);
+    });
 
-    map.addSource('wmsSource', {
+    map.addSource('GeoserverManagementRaster' + 'wmsSource', {
       type: 'raster',
-      tiles: [
-        'http://192.168.10.131:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:' +
-          chooseRow.dataTable +
-          '&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=' +
-          chooseRow.spatialRef +
-          format,
-        // 'http://192.168.10.131:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:parse_shpinfo_text3&styles=&bbox=118.32113719388846%2C35.64528587987562%2C118.89333296872105%2C36.17725393199594&width=256&height=256&srs=EPSG:4326&format=image/png&TRANSPARENT=TRUE&exceptions=application%2Fvnd.ogc.se_inimage',
-        // 'http://175.27.168.120:8080/geoserver/yinanxian/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fjpeg&TRANSPARENT=true&LAYERS=yinanxian%3Ayingxiang_01&exceptions=application%2Fvnd.ogc.se_inimage&SRS=EPSG%3A4548&STYLES=&WIDTH=529&HEIGHT=769&BBOX=607366.3276808303%2C3919435.438766631%2C612405.5241015075%2C3926765.179014889',
-      ],
+      tiles: tiles,
       tileSize: 256,
     });
     map.addLayer({
       id: 'GeoserverManagementRaster',
       type: 'raster',
-      source: 'wmsSource',
+      source: 'GeoserverManagementRaster' + 'wmsSource',
       layout: {
         visibility: 'visible',
       },
@@ -209,20 +223,33 @@
   }
 
   // 影像管理-图层
-  function GeoTiffManagerRaster(chooseRow, lngLat, zoom) {
+  function GeoTiffManagerRaster(chooseRows, lngLat, zoom) {
     // 县区边界
-    handlerDealStreet('GeoTiffManagerRaster');
-    handlerDealCountry('GeoTiffManagerRaster');
+    if (!map.getLayer('streetLayer')) {
+      handlerDealStreet('GeoTiffManagerRaster');
+    }
+    if (!map.getLayer('countyLayer')) {
+      handlerDealCountry('GeoTiffManagerRaster');
+    }
     handlerLocation(lngLat, zoom);
-    map.addSource('wmsSource', {
+
+    let tiles: any = [];
+    chooseRows.forEach((chooseRow) => {
+      tiles.push(
+        'http://221.2.83.254:9007/geoserver/ksp/wms?service=WMS&version=1.1.0&request=GetMap&layers=ksp:linqubianyaqi&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE&cql_filter=is_del%20=0',
+      );
+      // tiles.push(chooseRow.accessUrl);
+    });
+
+    map.addSource('GeoTiffManagerRaster' + 'wmsSource', {
       type: 'raster',
-      tiles: [chooseRow.accessUrl],
+      tiles: tiles,
       tileSize: 256,
     });
     map.addLayer({
       id: 'GeoTiffManagerRaster',
       type: 'raster',
-      source: 'wmsSource',
+      source: 'GeoTiffManagerRaster' + 'wmsSource',
       layout: {
         visibility: 'visible',
       },
@@ -235,8 +262,12 @@
     // 清除图层
     clearTaskLayer('AchievementManageRaster');
     // 县区边界
-    handlerDealStreet('AchievementManageRaster');
-    handlerDealCountry('AchievementManageRaster');
+    if (!map.getLayer('streetLayer')) {
+      handlerDealStreet('AchievementManageRaster');
+    }
+    if (!map.getLayer('countyLayer')) {
+      handlerDealCountry('AchievementManageRaster');
+    }
     handlerLocation(lngLat, zoom);
     map.loadImage('/map/AchievementManage.png', function (error, image) {
       if (error) throw error;
@@ -244,14 +275,14 @@
         map.addImage('taskIcon', image);
       }
     });
-    map.addSource('wmsSource', {
+    map.addSource('AchievementManageRaster' + 'wmsSource', {
       type: 'geojson',
       data: taskLayerGeoJson,
     });
     map.addLayer({
       id: 'AchievementManageRaster',
       type: 'symbol',
-      source: 'wmsSource',
+      source: 'AchievementManageRaster' + 'wmsSource',
       layout: {
         'icon-image': 'taskIcon',
         'icon-size': 0.8,
@@ -260,8 +291,8 @@
         'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
         'text-offset': [0, 1.8],
         'text-anchor': 'top',
-        'icon-allow-overlap': true,
-        'text-allow-overlap': true,
+        'icon-allow-overlap': false,
+        'text-allow-overlap': false,
         visibility: 'visible',
       },
       paint: {
@@ -292,9 +323,9 @@
       map.removeLayer(layerName);
     }
     // 检查数据源是否存在
-    if (map.getSource('wmsSource')) {
+    if (map.getSource(layerName + 'wmsSource')) {
       // 删除数据源
-      map.removeSource('wmsSource');
+      map.removeSource(layerName + 'wmsSource');
     }
   }
 
@@ -306,6 +337,10 @@
   onMounted(() => {
     mapboxgl.accessToken = MAPBOX_TOKEN;
     map = initMap();
+    // 县区边界
+    handlerDealStreet(null);
+    handlerDealCountry(null);
+    // handlerLocation([118.30207505530701, 35.30123435040745], 7.848587811931849);
     // map.on('load', () => {
     //   map.flyTo({
     //     center: [118.30207505530701, 35.30123435040745],
@@ -320,6 +355,7 @@
     GeoTiffManagerRaster,
     AchievementManageRaster,
     resize,
+    clearTaskLayer,
   });
 </script>
 <style type="less" scoped>

src/views/demo/system/geoservermanagement/index.vue

@@ -178,7 +178,9 @@
     if (activeKey.value == '1') {
       nowChooseRow = record;
       let lngLat = handlerOnMapLoad(record);
-      mapboxComponentRef.value.GeoserverManagementRaster(record, lngLat, 11);
+      let chooseRows: any = [];
+      chooseRows.push(record);
+      mapboxComponentRef.value.GeoserverManagementRaster(chooseRows, lngLat, 11);
     } else {
       nowChooseRow = record;
       chooseRow.value = nowChooseRow;
@@ -191,7 +193,9 @@
   function handRowChange() {
     if (activeKey.value == '1') {
       let lngLat = handlerOnMapLoad(nowChooseRow);
-      mapboxComponentRef.value.GeoserverManagementRaster(nowChooseRow, lngLat, 11);
+      let chooseRows: any = [];
+      chooseRows.push(nowChooseRow);
+      mapboxComponentRef.value.GeoserverManagementRaster(chooseRows, lngLat, 11);
     } else {
       chooseRow.value = nowChooseRow;
       console.log(nowChooseRow);

src/views/demo/tiankongdi/auditinfo/AuditProgress/index.vue

@@ -169,7 +169,7 @@
       width="100%"
       wrap-class-name="full-modal"
       v-model:open="auditOpen"
-      title="审核监督"
+      title="填报审核"
       footer=""
       :destroyOnClose="true"
     >
@@ -180,6 +180,7 @@
         :taskId="taskId"
         :isRead="isRead"
         :type="type"
+        :auditData="auditData"
         @closeModel="closeMolder"
       />
     </a-modal>
@@ -208,7 +209,7 @@
     'yearOptions',
     'dataList',
   ]);
-  const emits = defineEmits(['auditProgressScreenChange', 'showInfo', 'changeTask', 'openLoading', 'closeLoading']);
+  const emits = defineEmits(['auditProgressScreenChange', 'showInfo', 'changeTask', 'openLoading', 'closeLoading','getCountList']);
 
   const flowWfDataStore = flowStore();
   const userStore = useUserStore()
@@ -220,6 +221,7 @@
   const processId = ref('');
   const taskId = ref('');
   const type = ref('');
+  const auditData = ref()
   const isRead: any = ref(0);
 
   const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
@@ -260,6 +262,7 @@
     processId.value = record.processid;
     taskId.value = record.taskeid;
     type.value = record.type;
+    auditData.value = record;
   }
   const cancelCollectItem = (item) => {
     deleteTaskCase(item.Fid).then(res => {
@@ -282,6 +285,10 @@
       querysBtn();
     })
   }
+  const closeMolder = () => {
+    querysBtn()
+    emits('getCountList')
+  }
 </script>
 
 <style lang="less" scoped>

src/views/demo/tiankongdi/auditinfo/MapList/index.vue

@@ -173,7 +173,7 @@
       width="100%"
       wrap-class-name="full-modal"
       v-model:open="auditOpen"
-      title="审核监督"
+      title="填报审核"
       footer=""
       :destroyOnClose="true"
     >
@@ -196,6 +196,7 @@
         :taskId="taskId"
         :isRead="isRead"
         :type="type"
+        :auditData="auditData"
         @closeModel="closeMolder"
       />
     </a-modal>
@@ -230,6 +231,7 @@
   const taskId = ref('');
   const isRead: any = ref(0);
   const type = ref('');
+  const auditData = ref()
   const order = ref(0)
   const auditOpen = ref(false);
   const showDataId = ref()
@@ -312,6 +314,7 @@
     processId.value = record.processid;
     taskId.value = record.taskeid;
     type.value = record.type;
+    auditData.value = record;
   }
   async function locationFun(record) {
     emits('changeTask', record);
@@ -361,6 +364,7 @@
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = dataList.value[dataList.value.length - 1].Id
+      auditData.value = dataList.value[dataList.value.length - 1]
       return
     }else{
       showDataId.value = prevShowDataId.value
@@ -375,6 +379,7 @@
     taskId.value = record.taskeid;
     type.value = record.type;
     handoffShow.value = true
+    auditData.value = record
   }
   const nextData = async () => {
     if(nextShowDataId.value === 0){
@@ -397,6 +402,7 @@
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = dataList.value[0].Id
+      auditData.value = dataList.value[0]
       return
     }else{
       showDataId.value = nextShowDataId.value
@@ -411,6 +417,7 @@
     taskId.value = record.taskeid;
     type.value = record.type;
     handoffShow.value = true
+    auditData.value = record
   }
   const cancelCollectItem = (item) => {
     deleteTaskCase(item.Fid).then(res => {

src/views/demo/tiankongdi/auditinfo/index.vue

@@ -14,6 +14,7 @@
           @changeTask="changeTask"
           @openLoading="openLoading"
           @closeLoading="closeLoading"
+          @getCountList="getCountList"
         />
         <MapList
           @changeTask="changeTask"

src/views/demo/tiankongdi/curbspotcity/MapList/index.vue

@@ -52,16 +52,7 @@
           @change="(value) => emits('mapListScreenChange',value,'markType')"
         />
       </div> -->
-      <div class="screen-item" style="margin-right: 13px;">
-        <div class="screen-item-label">乡镇</div>
-        <a-select
-          allowClear
-          style="width:120px;"
-          v-model:value="props.infoScreenData.streetId"
-          :options="streetsAreaOptions"
-          @change="(value) => emits('mapListScreenChange',value,'streetId')"
-        />
-      </div>
+   
       <div class="screen-item" style="margin-bottom:12px;">
         <div class="screen-item-label" style="margin-right: 10px;">下发时间</div>
         <a-range-picker
@@ -72,6 +63,16 @@
           @change="(value) => emits('mapListScreenChange',value,'time')"
         />
       </div>
+      <div class="screen-item" style="margin-left: 13px;">
+        <div class="screen-item-label">乡镇</div>
+        <a-select
+          allowClear
+          style="width:120px;"
+          v-model:value="props.infoScreenData.streetId"
+          :options="streetsAreaOptions"
+          @change="(value) => emits('mapListScreenChange',value,'streetId')"
+        />
+      </div>
      
       <div class="screen-item" style="margin-right: 14px;">
         <a-input
@@ -279,6 +280,7 @@
         :taskId="taskId"
         :isRead="isRead"
         :type="type"
+        :auditData="auditData"
         @closeModel="closeMolder"
       />
     </a-modal>
@@ -366,6 +368,7 @@ const auditOpen = ref(false);
 const processId = ref('');
 const taskId = ref('');
 const type = ref('');
+const auditData = ref()
 const handoffShow = ref(true)
 const isRead: any = ref(0);
 const openCollect = computed(() => {
@@ -472,6 +475,7 @@ async function goAudit(record) {
   processId.value = record.processid;
   taskId.value = record.taskid;
   type.value = record.type;
+  auditData.value = record;
 }
 const prevData = async () => {
   if(prevShowDataId.value === 0){
@@ -492,6 +496,7 @@ const prevData = async () => {
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = res.items[res.items.length -1].id
+      auditData.value = res.items[res.items.length -1];
     })
     return
   }else{
@@ -507,6 +512,7 @@ const prevData = async () => {
   taskId.value = record.taskid;
   type.value = record.type;
   handoffShow.value = true
+  auditData.value = record;
 }
 const nextData = async () => {
   if(nextShowDataId.value === 0){
@@ -527,6 +533,7 @@ const nextData = async () => {
       type.value = record.type;
       handoffShow.value = true
       showDataId.value = res.items[0].id
+      auditData.value = res.items[0]
     })
     return
   }else{
@@ -542,6 +549,7 @@ const nextData = async () => {
   taskId.value = record.taskid;
   type.value = record.type;
   handoffShow.value = true
+  auditData.value = record;
 }
 const closeMolder = () => {
   emits('getInfoList')

src/views/demo/workflow/task/process/audit.vue

@@ -10,6 +10,7 @@
 
       <div class="maper-container" v-if="mapConfig?.isShowMap">
         <MapboxMap
+          :caseno="props.auditData.caseno"
           :mapConfig="mapConfig"
           :geomsList="geomsList"
           @handlerDrawComplete="handlerDrawComplete"
@@ -26,7 +27,7 @@
       >
         <a-layout>
           <a-layout>
-            <a-layout-content>
+            <a-layout-content v-if="false">
               <a-tabs
                 v-model:activeKey="activeName"
                 tabPosition="bottom"
@@ -115,6 +116,29 @@
                 </a-tab-pane>
               </a-tabs>
             </a-layout-content>
+            <a-layout-content>
+              <div id="process-form-container">
+                <ImagePreview
+                  style="width: 100%; height:"
+                  v-if="isShowImagePreview"
+                  :globalImagePreviewUrl="globalImagePreviewUrl"
+                  :globalImagePreviewList="globalImagePreviewList"
+                  @closeImagePreview="closeImagePreview"
+                />
+
+                <FormViewer
+                  ref="formBoxRef"
+                  :formConfig="formConfig"
+                  :processId="designerData.process.id"
+                  :formVerison="designerData.formCurrentNode.formVerison"
+                  :formRelationId="designerData.formCurrentNode.formRelationId"
+                  :instanceInfo="designerData.process.instanceInfo"
+                  @getFormSuccess="getFormSuccess"
+                  v-if="formVisble"
+                />
+              </div>
+              <AsyncComponent ref="pcForm" v-if="formUrlVisble" />
+            </a-layout-content>
             <div :style="footerStyle">
               <a-tabs v-if="props.isRead == 0" v-model:activeKey="auditName">
                 <a-tab-pane key="audit" :tab="auditTitleVal">
@@ -306,6 +330,7 @@
     taskId: String,
     type: String,
     isRead: String,
+    auditData: Object,
   });
 
   const formData = ref({

vite.config.ts.timestamp-1724835087030-900b6039136be.mjs

@@ -0,0 +1,66 @@
+// vite.config.ts
+import { defineApplicationConfig } from "file:///E:/%E6%96%B0%E6%9E%B6%E6%9E%84%E9%A1%B9%E7%9B%AE/%E8%B4%A2%E6%BA%90%E4%B8%80%E4%BD%93%E5%8C%96/main/CaiYuanYiTiHua/internal/vite-config/dist/index.mjs";
+var vite_config_default = defineApplicationConfig({
+  overrides: {
+    optimizeDeps: {
+      include: [
+        "echarts/core",
+        "echarts/charts",
+        "echarts/components",
+        "echarts/renderers",
+        "qrcode",
+        "@iconify/iconify",
+        "ant-design-vue/es/locale/zh_CN",
+        "ant-design-vue/es/locale/en_US",
+        "@/../lib/vform/designer.umd.js"
+      ]
+    },
+    build: {
+      /* 其他build生产打包配置省略 */
+      //...
+      target: "esnext",
+      commonjsOptions: {
+        include: /node_modules|lib/
+        //这里记得把lib目录加进来，否则生产打包会报错！！
+      }
+    },
+    server: {
+      proxy: {
+        "/basic-api": {
+          target: "http://localhost:3000",
+          changeOrigin: true,
+          ws: true,
+          rewrite: (path) => path.replace(new RegExp(`^/basic-api`), "")
+          // only https
+          // secure: false
+        },
+        "/upload": {
+          target: "http://localhost:3300/upload",
+          changeOrigin: true,
+          ws: true,
+          rewrite: (path) => path.replace(new RegExp(`^/upload`), "")
+        }
+      },
+      warmup: {
+        clientFiles: ["./index.html", "./src/{views,components}/*"]
+      }
+    },
+    define: {
+      "process.env": {
+        BASE_URL: "/"
+      }
+    },
+    css: {
+      preprocessorOptions: {
+        less: {
+          javascriptEnabled: true
+        }
+      }
+    },
+    plugins: []
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJFOlxcXFxcdTY1QjBcdTY3QjZcdTY3ODRcdTk4NzlcdTc2RUVcXFxcXHU4RDIyXHU2RTkwXHU0RTAwXHU0RjUzXHU1MzE2XFxcXG1haW5cXFxcQ2FpWXVhbllpVGlIdWFcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkU6XFxcXFx1NjVCMFx1NjdCNlx1Njc4NFx1OTg3OVx1NzZFRVxcXFxcdThEMjJcdTZFOTBcdTRFMDBcdTRGNTNcdTUzMTZcXFxcbWFpblxcXFxDYWlZdWFuWWlUaUh1YVxcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vRTovJUU2JTk2JUIwJUU2JTlFJUI2JUU2JTlFJTg0JUU5JUExJUI5JUU3JTlCJUFFLyVFOCVCNCVBMiVFNiVCQSU5MCVFNCVCOCU4MCVFNCVCRCU5MyVFNSU4QyU5Ni9tYWluL0NhaVl1YW5ZaVRpSHVhL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQXBwbGljYXRpb25Db25maWcgfSBmcm9tICdAdmJlbi92aXRlLWNvbmZpZyc7XG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUFwcGxpY2F0aW9uQ29uZmlnKHtcbiAgb3ZlcnJpZGVzOiB7XG4gICAgb3B0aW1pemVEZXBzOiB7XG4gICAgICBpbmNsdWRlOiBbXG4gICAgICAgICdlY2hhcnRzL2NvcmUnLFxuICAgICAgICAnZWNoYXJ0cy9jaGFydHMnLFxuICAgICAgICAnZWNoYXJ0cy9jb21wb25lbnRzJyxcbiAgICAgICAgJ2VjaGFydHMvcmVuZGVyZXJzJyxcbiAgICAgICAgJ3FyY29kZScsXG4gICAgICAgICdAaWNvbmlmeS9pY29uaWZ5JyxcbiAgICAgICAgJ2FudC1kZXNpZ24tdnVlL2VzL2xvY2FsZS96aF9DTicsXG4gICAgICAgICdhbnQtZGVzaWduLXZ1ZS9lcy9sb2NhbGUvZW5fVVMnLFxuICAgICAgICAnQC8uLi9saWIvdmZvcm0vZGVzaWduZXIudW1kLmpzJyxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgLyogXHU1MTc2XHU0RUQ2YnVpbGRcdTc1MUZcdTRFQTdcdTYyNTNcdTUzMDVcdTkxNERcdTdGNkVcdTc3MDFcdTc1NjUgKi9cbiAgICAgIC8vLi4uXG4gICAgICB0YXJnZXQ6ICdlc25leHQnLFxuICAgICAgY29tbW9uanNPcHRpb25zOiB7XG4gICAgICAgIGluY2x1ZGU6IC9ub2RlX21vZHVsZXN8bGliLywgLy9cdThGRDlcdTkxQ0NcdThCQjBcdTVGOTdcdTYyOEFsaWJcdTc2RUVcdTVGNTVcdTUyQTBcdThGREJcdTY3NjVcdUZGMENcdTU0MjZcdTUyMTlcdTc1MUZcdTRFQTdcdTYyNTNcdTUzMDVcdTRGMUFcdTYyQTVcdTk1MTlcdUZGMDFcdUZGMDFcbiAgICAgIH0sXG4gICAgfSxcbiAgICBzZXJ2ZXI6IHtcbiAgICAgIHByb3h5OiB7XG4gICAgICAgICcvYmFzaWMtYXBpJzoge1xuICAgICAgICAgIHRhcmdldDogJ2h0dHA6Ly9sb2NhbGhvc3Q6MzAwMCcsXG4gICAgICAgICAgY2hhbmdlT3JpZ2luOiB0cnVlLFxuICAgICAgICAgIHdzOiB0cnVlLFxuICAgICAgICAgIHJld3JpdGU6IChwYXRoKSA9PiBwYXRoLnJlcGxhY2UobmV3IFJlZ0V4cChgXi9iYXNpYy1hcGlgKSwgJycpLFxuICAgICAgICAgIC8vIG9ubHkgaHR0cHNcbiAgICAgICAgICAvLyBzZWN1cmU6IGZhbHNlXG4gICAgICAgIH0sXG4gICAgICAgICcvdXBsb2FkJzoge1xuICAgICAgICAgIHRhcmdldDogJ2h0dHA6Ly9sb2NhbGhvc3Q6MzMwMC91cGxvYWQnLFxuICAgICAgICAgIGNoYW5nZU9yaWdpbjogdHJ1ZSxcbiAgICAgICAgICB3czogdHJ1ZSxcbiAgICAgICAgICByZXdyaXRlOiAocGF0aCkgPT4gcGF0aC5yZXBsYWNlKG5ldyBSZWdFeHAoYF4vdXBsb2FkYCksICcnKSxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgICB3YXJtdXA6IHtcbiAgICAgICAgY2xpZW50RmlsZXM6IFsnLi9pbmRleC5odG1sJywgJy4vc3JjL3t2aWV3cyxjb21wb25lbnRzfS8qJ10sXG4gICAgICB9LFxuICAgIH0sXG4gICAgZGVmaW5lOiB7XG4gICAgICAncHJvY2Vzcy5lbnYnOiB7XG4gICAgICAgIEJBU0VfVVJMOiAnLycsXG4gICAgICB9LFxuICAgIH0sXG4gICAgY3NzOiB7XG4gICAgICBwcmVwcm9jZXNzb3JPcHRpb25zOiB7XG4gICAgICAgIGxlc3M6IHtcbiAgICAgICAgICBqYXZhc2NyaXB0RW5hYmxlZDogdHJ1ZSxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXSxcbiAgfSxcbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFrWCxTQUFTLCtCQUErQjtBQUUxWixJQUFPLHNCQUFRLHdCQUF3QjtBQUFBLEVBQ3JDLFdBQVc7QUFBQSxJQUNULGNBQWM7QUFBQSxNQUNaLFNBQVM7QUFBQSxRQUNQO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLElBQ0EsT0FBTztBQUFBO0FBQUE7QUFBQSxNQUdMLFFBQVE7QUFBQSxNQUNSLGlCQUFpQjtBQUFBLFFBQ2YsU0FBUztBQUFBO0FBQUEsTUFDWDtBQUFBLElBQ0Y7QUFBQSxJQUNBLFFBQVE7QUFBQSxNQUNOLE9BQU87QUFBQSxRQUNMLGNBQWM7QUFBQSxVQUNaLFFBQVE7QUFBQSxVQUNSLGNBQWM7QUFBQSxVQUNkLElBQUk7QUFBQSxVQUNKLFNBQVMsQ0FBQyxTQUFTLEtBQUssUUFBUSxJQUFJLE9BQU8sYUFBYSxHQUFHLEVBQUU7QUFBQTtBQUFBO0FBQUEsUUFHL0Q7QUFBQSxRQUNBLFdBQVc7QUFBQSxVQUNULFFBQVE7QUFBQSxVQUNSLGNBQWM7QUFBQSxVQUNkLElBQUk7QUFBQSxVQUNKLFNBQVMsQ0FBQyxTQUFTLEtBQUssUUFBUSxJQUFJLE9BQU8sVUFBVSxHQUFHLEVBQUU7QUFBQSxRQUM1RDtBQUFBLE1BQ0Y7QUFBQSxNQUNBLFFBQVE7QUFBQSxRQUNOLGFBQWEsQ0FBQyxnQkFBZ0IsNEJBQTRCO0FBQUEsTUFDNUQ7QUFBQSxJQUNGO0FBQUEsSUFDQSxRQUFRO0FBQUEsTUFDTixlQUFlO0FBQUEsUUFDYixVQUFVO0FBQUEsTUFDWjtBQUFBLElBQ0Y7QUFBQSxJQUNBLEtBQUs7QUFBQSxNQUNILHFCQUFxQjtBQUFBLFFBQ25CLE1BQU07QUFBQSxVQUNKLG1CQUFtQjtBQUFBLFFBQ3JCO0FBQUEsTUFDRjtBQUFBLElBQ0Y7QUFBQSxJQUNBLFNBQVMsQ0FBQztBQUFBLEVBQ1o7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=