diff --git a/src/api/sys/model/layerModel.ts b/src/api/sys/model/layerModel.ts
index 5f8c4ff6..45206b11 100644
--- a/src/api/sys/model/layerModel.ts
+++ b/src/api/sys/model/layerModel.ts
@@ -31,7 +31,7 @@ export interface GetGeomParams {
   FieldValue:Array<string>,
   page:number,
   limit:number,
-  key:string
+  key:string | null,
 }
   
   export interface RoleInfo {
diff --git a/src/components/illegalmining/PaginationComponent/index.vue b/src/components/illegalmining/PaginationComponent/index.vue
new file mode 100644
index 00000000..be6d2361
--- /dev/null
+++ b/src/components/illegalmining/PaginationComponent/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="pagination-div">
+    <a-pagination 
+      size="small" 
+      v-model:pageSize="props.pageData.limit"
+      v-model:current="props.pageData.page" 
+      :total="props.total" 
+      show-size-changer 
+      show-quick-jumper
+      @change="changePage" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from "vue"
+
+const props = defineProps(["pageData","total"])
+const emits = defineEmits(["changePageData"])
+
+const changePage = (page, pageSize) => {
+  console.log(page,pageSize)
+  emits('changePageData',page,pageSize)
+}
+</script>
+
+<style lang="scss" scoped>
+.pagination-div{
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/src/components/illegalmining/SearchComponent/index.vue b/src/components/illegalmining/SearchComponent/index.vue
new file mode 100644
index 00000000..7938a995
--- /dev/null
+++ b/src/components/illegalmining/SearchComponent/index.vue
@@ -0,0 +1,192 @@
+<template>
+  <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:99px;"
+        v-model:value="props.screenData.year"
+        :options="yearOptions"
+        @change="(value) => emits('screenDataChange',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:144px;"
+        v-model:value="props.screenData.tubanlaiyuan"
+        :options="polygonSourceOptions"
+        @change="(value) => emits('screenDataChange',value,'tubanlaiyuan')"
+      />
+    </div>
+    <div class="screen-item" style="margin-bottom:12px;">
+      <div class="screen-item-label">县区</div>
+      <a-select
+        allowClear
+        style="width:120px;"
+        v-model:value="props.screenData.countyid"
+        :options="countiesOptions"
+        @change="(value) => changeCounties(value)"
+      />
+    </div>
+    
+    
+    <div class="screen-item" style="margin-right: 13px;margin-bottom:12px;">
+      <div class="screen-item-label">乡镇</div>
+      <a-select
+        allowClear
+        style="width:120px;"
+        v-model:value="props.screenData.streetId"
+        :options="streetsOptions"
+        @change="(value) => emits('screenDataChange',value,'streetId')"
+      />
+    </div>
+    <div class="screen-item" style="margin-bottom:12px;">
+      <div class="screen-item-label">处理状态</div>
+      <a-select
+        allowClear
+        mode="multiple"
+        style="width:312px;"
+        v-model:value="props.screenData.nowStatus"
+        :options="statusOptions"
+        :max-tag-count="1"
+        @change="(value) => emits('screenDataChange',value,'nowStatus')"
+      />
+    </div>
+    <div class="screen-item" style="margin-right: 13px;margin-bottom:12px;">
+      <div class="screen-item-label">图斑类型</div>
+      <a-select
+        allowClear
+        style="width: 97px"
+        :options="polygonTypeOptions"
+        v-model:value="props.screenData.typename"
+        @change="(value) => emits('screenDataChange',value,'typename')"
+      />
+    </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: 300px;"
+        class="item-time-select"
+        v-model:value="props.screenData.time"
+        @change="(value) => emits('screenDataChange',value,'time')"
+      />
+    </div>
+    <div class="screen-item" style="margin-right: 14px;">
+      <a-input
+        allowClear
+        placeholder="请输入图斑编号"
+        class="item-input"
+        v-model:value="props.screenData.mapNo"
+        @change="(value) => emits('screenDataChange',value.target.value,'mapNo')"
+        style="width:404px;"
+      />
+    </div>
+    <div class="screen-item" style="margin-left: 10px;cursor: pointer;">
+      <a-button 
+        class="item-button"
+        type="primary"
+        :icon="h(SearchOutlined)"
+        @click="emits('search')">查询</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>
+</template>
+
+<script setup lang="ts">
+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 } from '@/components/illegalmining/util'
+import { getChildrenTree } from '@/api/demo/system';
+
+const props = defineProps(["screenData"])
+const emits = defineEmits(["screenDataChange","search","resetScreenData"])
+
+const streetsOptions = ref([])
+
+const changeCounties = (value) => {
+  emits('screenDataChange',value,'countyid')
+  emits('screenDataChange','','streetId')
+  if(value){
+    getChildrenTree({ parentId: value }).then(res => {
+      let data = res
+      streetsOptions.value = data.map(item => {
+        return {
+          label: item.name,
+          value: item.id
+        }
+      })
+    })
+  }
+  
+}
+
+</script>
+
+<style lang="scss" scoped>
+.screen-div{
+  padding: 22px 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: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;
+    }
+  }
+}
+</style>
diff --git a/src/components/illegalmining/ShowListComponent/index.vue b/src/components/illegalmining/ShowListComponent/index.vue
new file mode 100644
index 00000000..b47e3615
--- /dev/null
+++ b/src/components/illegalmining/ShowListComponent/index.vue
@@ -0,0 +1,307 @@
+<template>
+  <div class="data-list-div" style="padding-top: 1px;">
+    <div v-for="(item, index) in props.dataList" :key="index" class="data-list-item">
+      <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" 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" style="width: 130px;">
+            <div class="info-label">违法</div>
+            <div class="info-data" :title="dataProcessing(item.nongyongdiarea)">{{dataProcessing(item.nongyongdiarea)}}</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>
+        </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.png" class="img-box"   @click="collectItem(item)"  v-else/>
+          </div>
+        </div>
+      </div>
+    </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"
+        @closeModel="closeMolder"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits, ref } from "vue"
+import {showDrawBack, drawBackSpan} from '@/views/demo/util'
+import { dataProcessing } from '@/views/demo/tiankongdi/util'
+import { message } from 'ant-design-vue'
+import { useUserStore } from '@/store/modules/user'
+import { flowStore } from '@/store/modules/flow';
+import { getDetail } from '@/api/sys/WFSchemeInfo';
+import { Audit } from '@/views/demo/workflow/task/process/page';
+// TODO 更换接口
+import { addTaskFavorite,deleteTaskCase } from '@/api/tiankongdi/index';
+
+const userStore = useUserStore()
+const flowWfDataStore = flowStore();
+
+const props = defineProps(["dataList"])
+const emits = defineEmits(["changeTask","query"])
+
+const mapNo = ref('')
+const searchList = ref([])
+const showDataId = ref()
+const auditOpen = ref(false);
+const processId = ref('');
+const taskId = ref('');
+const type = ref('');
+const isRead: any = ref(0);
+const handoffShow = ref(true)
+
+const locationFun = (record) => {
+  console.log(record);
+  emits('changeTask', record.geomid);
+}
+const goAudit = async (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;
+}
+const collectItem = (item) => {
+  console.log(item,userStore.getUserInfo)
+  if(item.fid){
+    cancelCollectItem(item)
+    return
+  }
+  let userInfo = userStore.getUserInfo
+  let params = {
+    taskId: item.taskid,
+    favoriteUserId: userInfo.id
+  }
+  addTaskFavorite(params).then(res => {
+    console.log(res)
+    message.success('收藏成功')
+    emits('query')
+  })
+}
+const cancelCollectItem = (item) => {
+  deleteTaskCase(item.fid).then(res => {
+    message.success('取消收藏成功')
+    emits('query')
+  })
+}
+const prevData = () => {
+}
+const nextData = () => {
+}
+const closeMolder = () => {
+}
+</script>
+
+<style lang="scss" scoped>
+.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 */
+}
+.img-box{
+  width: 25px;
+  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;
+  }
+}
+.handoff{
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 25px;
+}
+</style>
diff --git a/src/components/illegalmining/SortComponent/index.vue b/src/components/illegalmining/SortComponent/index.vue
new file mode 100644
index 00000000..a630ef16
--- /dev/null
+++ b/src/components/illegalmining/SortComponent/index.vue
@@ -0,0 +1,123 @@
+<template>
+  <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">
+      <img src="@/assets/images/tiankongdi/collect-active.png" class="img-box"  @click="getCollectList(0)" v-if="openCollect"/>
+      <img src="@/assets/images/tiankongdi/collect.png" class="img-box"  @click="getCollectList(1)" v-else/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits, ref, computed } from "vue"
+import { orderUtils } from '@/components/illegalmining/util'
+
+const props = defineProps(["sortData","screenData"])
+const emits = defineEmits(["changeSort","collectChange"])
+
+const order = ref(0) // 0: 不排序 1: 升序 2: 降序
+const openCollect = computed(() => {
+  if(props.screenData.type === '') return false
+  return true
+})
+
+const dataListSort = (type) => {
+  if(props.sortData.sortType === '' || props.sortData.sortType === type){
+    order.value = (order.value + 1) % 3
+  }else{
+    order.value = 1
+  }
+  let str_order = orderUtils[order.value]
+  if(order.value == 0){
+     type = null
+  }
+  emits('changeSort', type, str_order)
+}
+const showSortMark = (key, sort) => {
+  if(props.sortData.sortType === key && sort === order.value){
+    return true
+  }
+  return false
+}
+const getCollectList = (type) => {
+  if(type == 0){
+    type = ""
+  }
+  emits('collectChange', type)
+}
+</script>
+
+<style lang="scss" scoped>
+.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;
+  }
+}
+.img-box{
+  width: 25px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/illegalmining/util.ts b/src/components/illegalmining/util.ts
new file mode 100644
index 00000000..b3a35ea0
--- /dev/null
+++ b/src/components/illegalmining/util.ts
@@ -0,0 +1,73 @@
+/**
+ * 年份       year
+ * 图斑来源   tubanlaiyuan
+ * 图斑类型   typename
+ * 县区       countyid
+ * 乡镇       streetid
+ * 处理状态   nowStatus
+ * 下发时间段 startTime-endTime
+ * 图斑号     caseNo
+ */
+// 图斑来源
+import { getChildrenTree } from '@/api/demo/system';
+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 polygonTypeOptions= [
+  { label: '开采', value: '开采'},
+  { label: '加工', value: '加工'},
+]
+// 当前状态
+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 countiesOptions = counties.map(item => {
+  return {
+    label: item.name,
+    value: item.id
+  }
+})
+export const orderUtils = {
+  0: null,
+  1: 'asc',
+  2: 'desc',
+}
\ No newline at end of file
diff --git a/src/views/demo/illegalmining/patternfilling/MapList/index.vue b/src/views/demo/illegalmining/patternfilling/MapList/index.vue
new file mode 100644
index 00000000..f6d18934
--- /dev/null
+++ b/src/views/demo/illegalmining/patternfilling/MapList/index.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="out-div">
+    <SearchComponent
+      :screenData="screenData"
+      @screenDataChange="screenDataChange"
+      @search="search"
+      @resetScreenData="resetScreenData"/>
+    <SortComponent
+      :sortData="sortData"
+      :screenData="screenData"
+      @changeSort="changeSort"
+      @collectChange="collectChange"/>
+    <ShowListComponent
+      :dataList="dataList"
+      @changeTask="changeTask"
+      @query="query"/>
+    <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';
+  // TODO 换接口
+import { getLoadDroneCaseInfoDetail } from '@/api/tiankongdi/index';
+
+const emits = defineEmits(['changeLoading','changeTask'])
+
+const screenData = ref({
+  year: '',
+  tubanlaiyuan: '',
+  typename: '',
+  countyid:'',
+  streetid: '',
+  nowStatus: [],
+  time: null,
+  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.time){
+          params['startTime'] = dayjs(screenData.value.time[0]).format('YYYY-MM-DD')
+          params['endTime'] = dayjs(screenData.value.time[1]).format('YYYY-MM-DD')
+        }
+        break
+      case 'nowStatus':
+        if(screenData.value.nowStatus.length > 0){
+          params['nowStatus'] = screenData.value.nowStatus.join(',')
+        }
+        break
+      default:
+        if(screenData.value[key] && screenData.value[key] !== ''){
+          params[key] = screenData.value[key]
+        }
+        break
+    }
+  })
+  emits('changeLoading',true)
+  // TODO 换接口
+  getLoadDroneCaseInfoDetail(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
+  query()
+}
+const resetScreenData = () => {
+  screenData.value = {
+    year: '',
+    tubanlaiyuan: '',
+    typename: '',
+    countyid:'',
+    streetid: '',
+    nowStatus: [],
+    time: null,
+    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)
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.out-div{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // background-color: aqua;
+}
+</style>
diff --git a/src/views/demo/illegalmining/patternfilling/index.vue b/src/views/demo/illegalmining/patternfilling/index.vue
new file mode 100644
index 00000000..78cb45ca
--- /dev/null
+++ b/src/views/demo/illegalmining/patternfilling/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>
diff --git a/types/store.d.ts b/types/store.d.ts
index 3bd85830..754954a0 100644
--- a/types/store.d.ts
+++ b/types/store.d.ts
@@ -36,6 +36,7 @@ export interface ErrorLogInfo {
 }
 
 export interface UserInfo {
+  id?: string | number;
   userId: string | number;
   username: string;
   realName: string;