diff --git a/src/views/demo/minerals/patchsummaryData/detail/index.vue b/src/views/demo/minerals/patchsummaryData/detail/index.vue
new file mode 100644
index 00000000..3bd45c4d
--- /dev/null
+++ b/src/views/demo/minerals/patchsummaryData/detail/index.vue
@@ -0,0 +1,1180 @@
+<template>
+  <div class="detail-container">
+    <div class="map-container" v-if="!props.hiddenInfoMap">
+      <MapboxMap
+        :caseno="caseInfo.case_no"
+        :countyname="caseInfo.countyname"
+        :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="图斑编号">{{ caseInfo.case_no }}</a-descriptions-item>
+            <a-descriptions-item label="所属年度">{{ caseInfo.syear_base }}</a-descriptions-item>
+            <a-descriptions-item label="接收时间">{{ caseInfo.jieshou_time }}</a-descriptions-item>
+            <a-descriptions-item label="发放批次">{{
+              caseInfo.fafangpici_base
+            }}</a-descriptions-item>
+            <a-descriptions-item label="经纬度"
+              >{{ caseInfo.centerlng_base }} / {{ caseInfo.centerlat_base }}</a-descriptions-item
+            >
+            <a-descriptions-item label="图斑来源">{{ caseInfo.tubanlaiyuan }}</a-descriptions-item>
+            <a-descriptions-item label="疑似违法涉矿图斑面积(亩)">{{
+              // dataProcessing(caseInfo.weifaarea_base)
+              caseInfo.weifaarea_base
+            }}</a-descriptions-item>
+            <a-descriptions-item label="图斑描述">{{
+              caseInfo.case_description
+            }}</a-descriptions-item>
+            <a-descriptions-item label="是否重点矿区">{{
+              caseInfo.zhongdianflag_base
+            }}</a-descriptions-item>
+            <a-descriptions-item label="重点矿区名称">{{
+              caseInfo.zhongdianname_base
+            }}</a-descriptions-item>
+            <a-descriptions-item label="是否在国家自然保护区范围内">{{
+              getLabel('ziranbaohuflag_base', caseInfo.ziranbaohuflag_base)
+            }}</a-descriptions-item>
+            <a-descriptions-item label="所属国家自然保护区名称">{{
+              caseInfo.ziranbaohuname_base
+            }}</a-descriptions-item>
+            <a-descriptions-item label="违法开采面积(亩)">{{
+              caseInfo.weifakaicaiarea_base
+            }}</a-descriptions-item>
+            <a-descriptions-item label="下发时间">{{
+              caseInfo.xiafatime_base
+            }}</a-descriptions-item>
+            <a-descriptions-item label="区/县">{{ caseInfo.countyname }}</a-descriptions-item>
+            <a-descriptions-item label="镇/街">{{ caseInfo.streetname }}</a-descriptions-item>
+            <a-descriptions-item label="村/社">{{ caseInfo.communityname }}</a-descriptions-item>
+            <a-descriptions-item label="基本农田面积(加工)(平方米)">{{
+              caseInfo.jbntarea_base
+            }}</a-descriptions-item>
+            <a-descriptions-item label="城市开发边界面积(加工)(平方米)">{{
+              caseInfo.cskfbjarea_base
+            }}</a-descriptions-item>
+            <a-descriptions-item label="生态保护红线面积(加工)(平方米)">{{
+              caseInfo.stbhhxarea_base
+            }}</a-descriptions-item>
+            <a-descriptions-item label="是否符合土地利用总体规划（加工）">{{
+              caseInfo.tudiliyongflag_base
+            }}</a-descriptions-item>
+            <a-descriptions-item label="违法占地面积（加工）(亩)">{{
+              caseInfo.weifazhandiarea_base
+            }}</a-descriptions-item>
+            <a-descriptions-item label="到期时限">{{
+              caseInfo.chulishixian_base
+            }}</a-descriptions-item>
+            <a-descriptions-item label="图斑图片">
+              <div class="image-div">
+                <a-image-preview-group
+                  :preview="{
+                    getContainer: getContainer,
+                  }"
+                >
+                  <template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
+                    <a-image
+                      v-if="imageItem"
+                      width="100px"
+                      height="100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    />
+                  </template>
+                </a-image-preview-group>
+              </div>
+            </a-descriptions-item>
+          </a-descriptions>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="填报" force-render>
+          <a-descriptions
+            :column="2"
+            bordered
+            :contentStyle="{
+              'text-align': 'center',
+              'min-width': '250px',
+              'word-break': 'break-all',
+            }"
+          >
+            <a-descriptions-item label="图斑类型">{{ caseInfo.typename }}</a-descriptions-item>
+            <a-descriptions-item label="合法性判定" v-if="caseInfo.typename">{{
+              getLabel('hefapanding_fill', caseInfo.hefapanding_fill)
+            }}</a-descriptions-item>
+            <!-- 开采 -->
+            <template v-if="caseInfo.typename == '开采'">
+              <!-- 开采-合法 -->
+              <template v-if="caseInfo.hefapanding_fill == 1">
+                <a-descriptions-item label="合法情形（开采）">{{
+                  getLabel('hefaqingxing_kcfill', caseInfo.hefaqingxing_kcfill)
+                }}</a-descriptions-item>
+                <a-descriptions-item label="审批类型（开采）">{{
+                  caseInfo.shenpitype_kcfill
+                }}</a-descriptions-item>
+                <a-descriptions-item label="审批时间（开采）">{{
+                  caseInfo.shenpitime_kcfill
+                }}</a-descriptions-item>
+                <a-descriptions-item label="审批文号（开采）">{{
+                  caseInfo.shenpinum_kcfill
+                }}</a-descriptions-item>
+                <a-descriptions-item label="有效期（开采）">{{
+                  caseInfo.youxiaoqi_kcfill
+                }}</a-descriptions-item>
+              </template>
+              <!-- 开采-违法 -->
+              <template v-if="caseInfo.hefapanding_fill == 2">
+                <a-descriptions-item label="违法类型（开采）">{{
+                  getLabel('weifaleixing', caseInfo.weifaleixing)
+                }}</a-descriptions-item>
+                <a-descriptions-item label="是否属于国家规划矿区（开采）">{{
+                  caseInfo.isguihua_kcfill
+                }}</a-descriptions-item>
+                <a-descriptions-item label="是否重大典型问题（开采）">{{
+                  caseInfo.iszhongda_kcfill
+                }}</a-descriptions-item>
+                <a-descriptions-item label="是否重点敏感区域范围内（开采）">{{
+                  caseInfo.iszhongdian_kcfill
+                }}</a-descriptions-item>
+                <a-descriptions-item label="开采主体（开采）">{{
+                  caseInfo.kaicaizhuti_kcfill
+                }}</a-descriptions-item>
+                <a-descriptions-item label="主体类型（开采）">{{
+                  getLabel('zhutitype_kcfill', caseInfo.zhutitype_kcfill)
+                }}</a-descriptions-item>
+                <a-descriptions-item label="发生时间（开采）">{{
+                  caseInfo.fashentime_kcfill
+                }}</a-descriptions-item>
+                <a-descriptions-item label="结束时间（开采）">{{
+                  caseInfo.endtime_kcfill
+                }}</a-descriptions-item>
+                <a-descriptions-item label="矿种">{{
+                  caseInfo.kuangzhong_kcfill
+                }}</a-descriptions-item>
+                <a-descriptions-item label="开采面积（开采）">{{
+                  caseInfo.kaicaiarea_kcfill
+                }}</a-descriptions-item>
+                <a-descriptions-item label="方量（开采）">{{
+                  caseInfo.fangliang_kcfill
+                }}</a-descriptions-item>
+                <a-descriptions-item label="采出的矿产品查封方量（开采）">{{
+                  caseInfo.chafengliang_kcfill
+                }}</a-descriptions-item>
+                <a-descriptions-item label="采出的矿产品价值（开采）">{{
+                  caseInfo.caichujiazhi_kcfill
+                }}</a-descriptions-item>
+                <a-descriptions-item label="是否新增（开采）">{{
+                  caseInfo.isnewadd_kcfill
+                }}</a-descriptions-item>
+              </template>
+              <!-- 开采-其他 -->
+              <template v-if="caseInfo.hefapanding_fill == 2">
+                <a-descriptions-item label="是否河道采砂（开采）">{{
+                  caseInfo.ishedaocaisha_kcfill
+                }}</a-descriptions-item>
+              </template>
+            </template>
+            <!-- 加工 -->
+            <template v-if="caseInfo.typename == '加工'">
+              <a-descriptions-item label="违法类型">{{
+                getLabel('weifatype_jgfill', caseInfo.weifatype_jgfill)
+              }}</a-descriptions-item>
+              <a-descriptions-item label="设计产能（加工）">{{
+                caseInfo.shejichanneng_base
+              }}</a-descriptions-item>
+            </template>
+            <a-descriptions-item label="图斑变化情况说明">{{
+              caseInfo.shuoming_fill
+            }}</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 xianchangzhaopianList"
+                    :key="imageIndex"
+                  >
+                    <a-image
+                      v-if="imageItem"
+                      @click="handlerPreviewImage(imageIndex, imageItem)"
+                      width="100px"
+                      height="100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                      :preview="{
+                        getContainer,
+                      }"
+                    />
+                  </template>
+                </a-image-preview-group>
+              </div>
+            </a-descriptions-item>
+            <a-descriptions-item 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 }"
+                  />
+                  <div v-else>
+                    <Icon
+                      v-if="item"
+                      :style="`font-size: 30px; cursor: pointer;`"
+                      icon="ion:document-attach-outline"
+                      @click="hanlderPreViewFile(item)"
+                    />
+                    {{ item }}
+                  </div>
+                </template>
+              </a-image-preview-group>
+            </a-descriptions-item>
+            <a-descriptions-item label="填报人">{{ caseInfo.tianbaoren_fill }}</a-descriptions-item>
+            <a-descriptions-item label="填报时间">{{
+              caseInfo.tianbaotime_fill
+            }}</a-descriptions-item>
+          </a-descriptions>
+        </a-tab-pane>
+        <template v-if="caseInfo.typename == '开采' && caseInfo.hefapanding_fill == 2">
+          <a-tab-pane key="4" 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="审核结果">{{
+                caseInfo.xianshenhejieguo_fill
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核意见">{{
+                caseInfo.xianbohuinote_fill
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核人">{{
+                caseInfo.xianshenheren_fill
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核时间">{{
+                caseInfo.xianshenhetime_fill
+              }}</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="市级审核人">{{
+                caseInfo.shishenheren_fill
+              }}</a-descriptions-item>
+              <a-descriptions-item label="市级审核时间">{{
+                caseInfo.shishenhetime_fill
+              }}</a-descriptions-item>
+              <a-descriptions-item label="是否通过">{{
+                caseInfo.shishenhejieguo_fill
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核意见">{{
+                caseInfo.shibohuinote_fill
+              }}</a-descriptions-item>
+            </a-descriptions>
+          </a-tab-pane>
+          <a-tab-pane key="5" tab="查处">
+            <a-descriptions
+              :column="2"
+              bordered
+              :contentStyle="{
+                'text-align': 'center',
+                'min-width': '250px',
+                'word-break': 'break-all',
+              }"
+            >
+              <a-descriptions-item label="是否立案">{{
+                getName(caseInfo.islian_punish)
+              }}</a-descriptions-item>
+              <a-descriptions-item label="立案时间">{{
+                caseInfo.liantime_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="立案机关">{{
+                caseInfo.lianjiguan_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="是否结案">{{
+                caseInfo.isjiean_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="违法主体">{{
+                caseInfo.weifazhuti_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="违法开采矿产品数量（吨）">{{
+                caseInfo.weifashuliang_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="违法开采矿产品价值（万元）">{{
+                caseInfo.weifajiazhi_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="违法面积（亩）">{{
+                caseInfo.weifaarea_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="相关地类">{{
+                caseInfo.xiangguandilei_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="渉嫌犯罪移送司法机关">{{
+                caseInfo.isyisongsifa_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="党纪政务处分情况">{{
+                caseInfo.dangjichufen_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="是否作出行政处罚决定">{{
+                caseInfo.isxingzhengchufa_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="行政处罚决定书编号">{{
+                caseInfo.xingzhengchufanum_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="没收违法所得金额（万元)">{{
+                caseInfo.moshoujine_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="罚款金额（万元)">{{
+                caseInfo.fakuanjine_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="没收矿产品数量（吨)">{{
+                caseInfo.moshoushuliang_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="处罚附件">
+                <a-image-preview-group :preview="{ getContainer }">
+                  <template v-for="(item, itemIndex) in chufafujianList" :key="itemIndex">
+                    <a-image
+                      v-if="showImage(item)"
+                      style="width: 100px; height: 100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
+                      :preview="{ getContainer }"
+                    />
+                    <div v-else>
+                      <Icon
+                        v-if="item"
+                        :style="`font-size: 30px; cursor: pointer;`"
+                        icon="ion:document-attach-outline"
+                        @click="hanlderPreViewFile(item)"
+                      />
+                      {{ item }}
+                    </div>
+                  </template>
+                </a-image-preview-group>
+              </a-descriptions-item>
+              <a-descriptions-item label="落实到位文件">
+                <a-image-preview-group :preview="{ getContainer }">
+                  <template v-for="(item, itemIndex) in luoshidaoweiwenjianList" :key="itemIndex">
+                    <a-image
+                      v-if="showImage(item)"
+                      style="width: 100px; height: 100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
+                      :preview="{ getContainer }"
+                    />
+                    <div v-else>
+                      <Icon
+                        v-if="item"
+                        :style="`font-size: 30px; cursor: pointer;`"
+                        icon="ion:document-attach-outline"
+                        @click="hanlderPreViewFile(item)"
+                      />
+                      {{ item }}
+                    </div>
+                  </template>
+                </a-image-preview-group>
+              </a-descriptions-item>
+              <a-descriptions-item label="是否移送法院强制执行">{{
+                caseInfo.isqiangzhizhixing_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="查处人">{{
+                caseInfo.chachuren_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="查处时间">{{
+                caseInfo.chachutime_punish
+              }}</a-descriptions-item>
+            </a-descriptions>
+          </a-tab-pane>
+          <!-- <a-tab-pane key="6" 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="审核结果">{{
+                caseInfo.xianshenhejieguo_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核意见">{{
+                caseInfo.xianbohuinote_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核人">{{
+                caseInfo.xianshenheren_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核时间">{{
+                caseInfo.xianshenhetime_punish
+              }}</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="审核结果">{{
+                caseInfo.shishenhejieguo_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核意见">{{
+                caseInfo.shibohuinote_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="市级审核人">{{
+                caseInfo.shishenheren_punish
+              }}</a-descriptions-item>
+              <a-descriptions-item label="市级审核时间">{{
+                caseInfo.shishenhetime_punish
+              }}</a-descriptions-item>
+            </a-descriptions>
+          </a-tab-pane> -->
+          <a-tab-pane key="7" tab="整改">
+            <a-descriptions
+              :column="2"
+              bordered
+              :contentStyle="{
+                'text-align': 'center',
+                'min-width': '250px',
+                'word-break': 'break-all',
+              }"
+            >
+              <a-descriptions-item label="情况说明">{{
+                caseInfo.qingkuangnote_reform
+              }}</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 zhenggaizhaopianList"
+                      :key="imageIndex"
+                    >
+                      <a-image
+                        v-if="imageItem"
+                        @click="handlerPreviewImage(imageIndex, imageItem)"
+                        width="100px"
+                        height="100px"
+                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                        :preview="{
+                          getContainer,
+                        }"
+                      />
+                    </template>
+                  </a-image-preview-group>
+                </div>
+              </a-descriptions-item>
+              <a-descriptions-item 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 }"
+                    />
+                    <div v-else>
+                      <Icon
+                        v-if="item"
+                        :style="`font-size: 30px; cursor: pointer;`"
+                        icon="ion:document-attach-outline"
+                        @click="hanlderPreViewFile(item)"
+                      />
+                      {{ item }}
+                    </div>
+                  </template>
+                </a-image-preview-group>
+              </a-descriptions-item>
+              <a-descriptions-item label="上报人">{{
+                caseInfo.zhenggairen_reform
+              }}</a-descriptions-item>
+              <a-descriptions-item label="上报时间">{{
+                caseInfo.zhenggaitime_reform
+              }}</a-descriptions-item>
+            </a-descriptions>
+          </a-tab-pane>
+          <a-tab-pane key="8" 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="审核结果">{{
+                caseInfo.xianshenhejieguo_reform
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核意见">{{
+                caseInfo.xianbohuinote_reform
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核人">{{
+                caseInfo.xianshenheren_reform
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核时间">{{
+                caseInfo.xianshenhetime_reform
+              }}</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="是否通过">{{
+                caseInfo.shishenhejieguo_reform
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核意见">{{
+                caseInfo.shibohuinote_reform
+              }}</a-descriptions-item>
+              <a-descriptions-item label="市级审核人">{{
+                caseInfo.shishenheren_reform
+              }}</a-descriptions-item>
+              <a-descriptions-item label="市级审核时间">{{
+                caseInfo.shishenhetime_reform
+              }}</a-descriptions-item>
+            </a-descriptions>
+          </a-tab-pane>
+        </template>
+        <a-tab-pane
+          key="3"
+          tab="审核"
+          v-if="caseInfo.typename == '开采' && caseInfo.hefapanding_fill != 2"
+        >
+          <a-divider>县级审核</a-divider>
+          <a-descriptions
+            :column="2"
+            bordered
+            :contentStyle="{
+              'text-align': 'center',
+              'min-width': '250px',
+              'word-break': 'break-all',
+            }"
+          >
+            <a-descriptions-item label="县级审核人">{{
+              caseInfo.xianshenheren_fill
+            }}</a-descriptions-item>
+            <a-descriptions-item label="县级审核时间">{{
+              caseInfo.xianshenhetime_fill
+            }}</a-descriptions-item>
+            <a-descriptions-item label="是否通过">{{
+              caseInfo.xianshenhejieguo_fill
+            }}</a-descriptions-item>
+            <a-descriptions-item label="审核意见">{{
+              caseInfo.xianbohuinote_fill
+            }}</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="市级审核人">{{
+              caseInfo.shishenheren_fill
+            }}</a-descriptions-item>
+            <a-descriptions-item label="市级审核时间">{{
+              caseInfo.shishenhetime_fill
+            }}</a-descriptions-item>
+            <a-descriptions-item label="是否通过">{{
+              caseInfo.shishenhejieguo_fill
+            }}</a-descriptions-item>
+            <a-descriptions-item label="审核意见">{{
+              caseInfo.shibohuinote_fill
+            }}</a-descriptions-item>
+          </a-descriptions>
+        </a-tab-pane>
+
+        <!-- 整改类型（加工） -->
+        <template v-if="caseInfo.typename == '加工' && caseInfo.hefapanding_jgfill == 2">
+          <a-tab-pane key="9" tab="整改">
+            <a-descriptions
+              :column="2"
+              bordered
+              :contentStyle="{
+                'text-align': 'center',
+                'min-width': '250px',
+                'word-break': 'break-all',
+              }"
+            >
+              <a-descriptions-item label="整改类型">{{
+                caseInfo.zhenggaitype_jgzhg
+              }}</a-descriptions-item>
+              <a-descriptions-item label="保留承诺">{{
+                caseInfo.baoliuchengnuo_jgzhg
+              }}</a-descriptions-item>
+              <a-descriptions-item label="单位或个人名称">{{
+                caseInfo.danweiname_jgzhg
+              }}</a-descriptions-item>
+              <a-descriptions-item label="具体位置">{{
+                caseInfo.jutiweizhi_jgzhg
+              }}</a-descriptions-item>
+              <a-descriptions-item label="存在问题">{{
+                caseInfo.cunzaiwenti_jgzhg
+              }}</a-descriptions-item>
+              <a-descriptions-item label="图斑变化情况说明">{{
+                caseInfo.shuoming_jgzhg
+              }}</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 zhenggaiqianzhaopianList"
+                      :key="imageIndex"
+                    >
+                      <a-image
+                        v-if="imageItem"
+                        @click="handlerPreviewImage(imageIndex, imageItem)"
+                        width="100px"
+                        height="100px"
+                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                        :preview="{
+                          getContainer,
+                        }"
+                      />
+                    </template>
+                  </a-image-preview-group>
+                </div>
+              </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 zhenggaihouzhaopianList"
+                      :key="imageIndex"
+                    >
+                      <a-image
+                        v-if="imageItem"
+                        @click="handlerPreviewImage(imageIndex, imageItem)"
+                        width="100px"
+                        height="100px"
+                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
+                        :preview="{
+                          getContainer,
+                        }"
+                      />
+                    </template>
+                  </a-image-preview-group>
+                </div>
+              </a-descriptions-item>
+              <a-descriptions-item label="附件">
+                <a-image-preview-group :preview="{ getContainer }">
+                  <template v-for="(item, itemIndex) in jiagongzhenggaifujianList" :key="itemIndex">
+                    <a-image
+                      v-if="showImage(item)"
+                      style="width: 100px; height: 100px"
+                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
+                      :preview="{ getContainer }"
+                    />
+                    <div v-else>
+                      <Icon
+                        v-if="item"
+                        :style="`font-size: 30px; cursor: pointer;`"
+                        icon="ion:document-attach-outline"
+                        @click="hanlderPreViewFile(item)"
+                      />
+                      {{ item }}
+                    </div>
+                  </template>
+                </a-image-preview-group>
+              </a-descriptions-item>
+              <a-descriptions-item label="上报人">{{
+                caseInfo.zhenggairen_jgzhg
+              }}</a-descriptions-item>
+              <a-descriptions-item label="上报时间">{{
+                caseInfo.zhenggaitime_jgzhg
+              }}</a-descriptions-item>
+            </a-descriptions>
+          </a-tab-pane>
+          <a-tab-pane key="10" 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="审核结果">{{
+                caseInfo.xianshenhejieguo_fill
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核意见">{{
+                caseInfo.xianbohuinote_fill
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核人">{{
+                caseInfo.xianshenheren_fill
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核时间">{{
+                caseInfo.xianshenhetime_fill
+              }}</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="审核结果">{{
+                caseInfo.shishenhejieguo_fill
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核意见">{{
+                caseInfo.shibohuinote_fill
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核人">{{
+                caseInfo.shishenheren_fill
+              }}</a-descriptions-item>
+              <a-descriptions-item label="审核时间">{{
+                caseInfo.shishenhetime_fill
+              }}</a-descriptions-item>
+            </a-descriptions>
+          </a-tab-pane>
+        </template>
+      </a-tabs>
+    </div>
+    <!-- File Preview && Download Start -->
+    <a-modal
+      v-model:open="previewFileModalVisible"
+      style="width: 100vw"
+      title="文件预览"
+      wrap-class-name="full-modal"
+    >
+      <FilePreview v-if="previewFileModalVisible" :fileUrl="previewFileUrl"></FilePreview>
+      <template #footer>
+        <a-button key="cancel" @click="handleCancelPreviewFile">取消</a-button>
+        <a-button key="confirm" type="primary" @click="handlerDownloadFle">下载</a-button>
+      </template>
+    </a-modal>
+    <!--File Preview && Download End -->
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { defineProps, ref, computed, onBeforeMount, onMounted, watch } from 'vue';
+  import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
+  import { getConfig, getGeom } from '@/api/sys/layerManagement';
+  import { getLoadCaseImgList } from '@/api/tiankongdi';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import axios from 'axios';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { getAppEnvConfig } from '@/utils/env';
+  import { asyncGetOptions } from '@/utils/global';
+  import { getCaseInfoById } from '@/api/minerals/index';
+
+  const { createMessage } = useMessage();
+  const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
+
+  const MapboxComponent = ref();
+  const mapConfig = ref({});
+  const props = defineProps(['id', 'hiddenInfoMap']);
+  const activeKey = ref('1');
+
+  const geomsList = ref();
+  const caseInfo: any = ref({});
+  function getCaseInfo() {
+    getCaseInfoById({ id: props.id }).then((res) => {
+      caseInfo.value = res;
+      getConfig({ code: 'mapsetting' }).then((res) => {
+        mapConfig.value = JSON.parse(res.codeValue);
+      });
+      changeTask();
+    });
+  }
+  watch(
+    () => props.id,
+    () => {
+      getCaseInfo();
+      getOptions();
+    },
+  );
+  onMounted(() => {
+    getCaseInfo();
+    getOptions();
+  });
+  const imageList = ref([]);
+  async function getCaseImgList() {
+    imageList.value = await getLoadCaseImgList({ caseid: props.id, category: '非法采矿工作管理' });
+    MapboxComponent.value.handlerLoadPictureAzimuth(imageList.value);
+    // 匹配去除无效图片
+    // let zhengshiImageList = [];
+    // console.log("anjianzhaopianList",anjianzhaopianList.value)
+    // imageList.value?.forEach((item, index) => {
+    //   let obj = anjianzhaopianList.value?.find((it, idx) => {
+    //     return item.filePath == it;
+    //   });
+    //   if (obj) {
+    //     zhengshiImageList.push(imageList.value[index]);
+    //   }
+    // });
+
+    // console.log("imageList",imageList.value);
+    // console.log("anjianzhaopianList",anjianzhaopianList.value);
+    // console.log("zhengshiImageList",zhengshiImageList);
+    //  console.log("zhengshiImageList",zhengshiImageList);
+    // MapboxComponent.value.handlerLoadPictureAzimuth(zhengshiImageList);
+  }
+
+  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 {
+    isInitImageLisener.value = false;
+    if (e && !isInitImageLisener.value) {
+      setTimeout(function () {
+        const targetNode = document.getElementsByClassName('ant-image-preview-img');
+        targetNode?.forEach((node, index) => {
+          let imageObserver = new MutationObserver((mutationsList) => {
+            for (const mutation of mutationsList) {
+              if (node.getAttribute(mutation.attributeName).match('http')) {
+                handlerPreviewImage(0, node.getAttribute(mutation.attributeName));
+              }
+            }
+          });
+          const config = { attributes: true };
+          imageObserver.observe(node, config);
+          isInitImageLisener.value = true;
+        });
+      }, 250);
+    }
+  }
+
+  onBeforeMount(() => {});
+
+  const anjianzhaopianList = computed(() => {
+    getCaseImgList();
+    return caseInfo.value.tubanpic_base ? caseInfo.value.tubanpic_base.split(',') : [];
+  });
+  const xianchangzhaopianList = computed(() => {
+    return caseInfo.value.zhaopian_fill ? caseInfo.value.zhaopian_fill.split(',') : [];
+  });
+  const zhenggaizhaopianList = computed(() => {
+    return caseInfo.value.zhaopian_reform ? caseInfo.value.zhaopian_reform.split(',') : [];
+  });
+  const zhenggaiqianzhaopianList = computed(() => {
+    return caseInfo.value.zhaopianqian_jgzhg ? caseInfo.value.zhaopianqian_jgzhg.split(',') : [];
+  });
+  const zhenggaihouzhaopianList = computed(() => {
+    return caseInfo.value.zhaopianhou_jgzhg ? caseInfo.value.zhaopianhou_jgzhg.split(',') : [];
+  });
+
+  const qitafujianList = computed(() => {
+    return caseInfo.value.fujian ? caseInfo.value.fujian.split(',') : [];
+  });
+  const chufafujianList = computed(() => {
+    return caseInfo.value.chufafile_punish ? caseInfo.value.chufafile_punish.split(',') : [];
+  });
+  const luoshidaoweiwenjianList = computed(() => {
+    return caseInfo.value.luoshifile_punish ? caseInfo.value.luoshifile_punish.split(',') : [];
+  });
+  const zhenggaifujianList = computed(() => {
+    return caseInfo.value.zhenggaifujian ? caseInfo.value.zhenggaifujian.split(',') : [];
+  });
+  const jiagongzhenggaifujianList = computed(() => {
+    return caseInfo.value.fujian_jgzhg ? caseInfo.value.fujian_jgzhg.split(',') : [];
+  });
+
+  function onMapboxLoad() {
+    // changeTask();
+  }
+  const kcpandingjieguo = ref([]);
+  const hefaqingxing = ref([]);
+  const kaicaiweifa = ref([]);
+  const zhutileixing = ref([]);
+  const jiagongweifa = ref([]);
+  async function getOptions() {
+    kcpandingjieguo.value = await asyncGetOptions('kcpandingjieguo');
+    hefaqingxing.value = await asyncGetOptions('hefaqingxing');
+    kaicaiweifa.value = await asyncGetOptions('kaicaiweifa');
+    zhutileixing.value = await asyncGetOptions('zhutileixing');
+    jiagongweifa.value = await asyncGetOptions('jiagongweifa');
+  }
+  const getLabel = (type, value) => {
+    let result: any[] = [];
+    let label = '';
+    switch (type) {
+      case 'hefapanding_fill':
+        result = kcpandingjieguo.value;
+        break;
+      case 'hefaqingxing_kcfill':
+        result = hefaqingxing.value;
+        break;
+      case 'weifaleixing':
+        result = kaicaiweifa.value;
+        break;
+      case 'zhutitype_kcfill':
+        result = zhutileixing.value;
+        break;
+      case 'weifatype_jgfill':
+        result = jiagongweifa.value;
+        break;
+      case 'ziranbaohuflag_base':
+        result = [
+          { label: '是', value: 1 },
+          { label: '否', value: 0 },
+        ];
+        break;
+    }
+    result.forEach((item) => {
+      if (item.value == value) {
+        label = item.label;
+      }
+    });
+    return label;
+  };
+  const getName = (value) => {
+    let name = '';
+    if (value == 1) {
+      name = '是';
+    } else if (value == 2) {
+      name = '否';
+    }
+    return name;
+  };
+  async function changeTask() {
+    let getGeomPrams = {
+      TableName: 'drone_shp_data ',
+      FieldName: 'gid',
+      FieldValue: caseInfo.value.geomid?.split(','),
+      page: 1,
+      limit: 999,
+      key: null,
+    };
+
+    if (caseInfo.value.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 hanlderPreViewFile = (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');
+  //   }
+  // };
+
+  ///////// File Preview && Download  ////////
+
+  import FilePreview from '@/components/Upload/src/components/FilePreview.vue';
+
+  const previewFileModalVisible = ref(false);
+  const previewFileUrl = ref('');
+
+  const hanlderPreViewFile = (url) => {
+    previewFileUrl.value = `${VITE_GLOB_INFO_IMAGE_URL}/${url}`;
+    previewFileModalVisible.value = true;
+  };
+
+  const handlerDownloadFle = () => {
+    window.open(previewFileUrl.value, 'mozillaTab');
+  };
+
+  const handleCancelPreviewFile = () => {
+    previewFileModalVisible.value = false;
+  };
+  ///////
+  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;
+    }
+  };
+
+  defineExpose({
+    caseInfo,
+  });
+</script>
+
+<style lang="scss" scoped>
+  .image-div {
+    min-width: 340px;
+    max-height: 220px;
+    overflow: auto;
+  }
+  .detail-container {
+    width: 100%;
+    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>
diff --git a/src/views/demo/minerals/patchsummaryData/index.vue b/src/views/demo/minerals/patchsummaryData/index.vue
new file mode 100644
index 00000000..24ac3206
--- /dev/null
+++ b/src/views/demo/minerals/patchsummaryData/index.vue
@@ -0,0 +1,538 @@
+<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">
+        <div class="handoff">
+          <a-button type="primary" style="margin-right: 25px" @click="downloadFilesAsZip">
+            下载
+          </a-button>
+          <a-button type="primary" style="margin-right: 25px" @click="prevData">上一条</a-button>
+          <a-button type="primary" @click="nextData">下一条</a-button>
+        </div>
+        <Detail ref="detailRef" :id="caseId" />
+      </div>
+    </a-modal>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, watch } 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 JSZip from 'jszip';
+  import { saveAs } from 'file-saver';
+  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';
+  import { message } from 'ant-design-vue';
+
+  const { VITE_GLOB_API_URL, VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
+  const nextShowDataId = ref();
+  const prevShowDataId = ref();
+  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/DroneCaseInfoMinerals/ExportIllegalCaiKuangShapefile';
+      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);
+  }
+  async function getTableData(querys) {
+    if (querys.tubanlaiyuan) {
+      querys.tubanlaiyuan = querys.tubanlaiyuan.join(',');
+    }
+    setLoading(true);
+    await 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,
+      status_base: undefined,
+    };
+    nowStatus.value = undefined;
+    tablePaginationRight.value.current = 1;
+    getTableData(searchParams.value);
+  }
+  onMounted(() => {
+    getTableData(searchParams.value);
+    getOptions();
+  });
+  watch(
+    () => caseId.value,
+    () => {
+      let index = tableData.value.findIndex((item) => item.Id == caseId.value);
+      if (index < tableData.value.length - 1) {
+        nextShowDataId.value = tableData.value[index + 1].Id;
+      } else {
+        nextShowDataId.value = 0;
+      }
+      if (index > 0) {
+        prevShowDataId.value = tableData.value[index - 1].Id;
+      } else {
+        prevShowDataId.value = 0;
+      }
+    },
+  );
+
+  // 获取到files
+  function getFiles(caseInfo) {
+    const files: any = [];
+    // 详情_图斑图片
+    if (caseInfo.tubanpic_base) {
+      caseInfo.tubanpic_base.split(',').forEach((item) => {
+        files.push({
+          name: item.split('\\').pop(),
+          url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
+          path: '详情_图斑图片',
+        });
+      });
+    }
+    // 填报_现场照片
+    if (caseInfo.zhaopian_fill) {
+      caseInfo.zhaopian_fill.split(',').forEach((item) => {
+        files.push({
+          name: item.split('\\').pop(),
+          url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
+          path: '填报_现场照片',
+        });
+      });
+    }
+    // 填报_附件
+    if (caseInfo.fujian) {
+      caseInfo.fujian.split(',').forEach((item) => {
+        files.push({
+          name: item.split('\\').pop(),
+          url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
+          path: '填报_附件',
+        });
+      });
+    }
+    // 查处_处罚附件
+    if (caseInfo.chufafile_punish) {
+      caseInfo.chufafile_punish.split(',').forEach((item) => {
+        files.push({
+          name: item.split('\\').pop(),
+          url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
+          path: '查处_处罚附件',
+        });
+      });
+    }
+    // 查处_落实到位文件
+    if (caseInfo.luoshifile_punish) {
+      caseInfo.luoshifile_punish.split(',').forEach((item) => {
+        files.push({
+          name: item.split('\\').pop(),
+          url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
+          path: '查处_落实到位文件',
+        });
+      });
+    }
+    // 整改_现场照片
+    if (caseInfo.zhaopian_reform) {
+      caseInfo.zhaopian_reform.split(',').forEach((item) => {
+        files.push({
+          name: item.split('\\').pop(),
+          url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
+          path: '整改_现场照片',
+        });
+      });
+    }
+    // 整改_附件
+    if (caseInfo.zhenggaifujian) {
+      caseInfo.zhenggaifujian.split(',').forEach((item) => {
+        files.push({
+          name: item.split('\\').pop(),
+          url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
+          path: '整改_附件',
+        });
+      });
+    }
+    // 整改_现场照片-整改前
+    if (caseInfo.zhaopianqian_jgzhg) {
+      caseInfo.zhaopianqian_jgzhg.split(',').forEach((item) => {
+        files.push({
+          name: item.split('\\').pop(),
+          url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
+          path: '整改_现场照片-整改前',
+        });
+      });
+    }
+    // 整改_现场照片-整改后
+    if (caseInfo.zhaopianhou_jgzhg) {
+      caseInfo.zhaopianhou_jgzhg.split(',').forEach((item) => {
+        files.push({
+          name: item.split('\\').pop(),
+          url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
+          path: '整改_现场照片-整改后',
+        });
+      });
+    }
+    // 整改类型（加工）_附件
+    if (caseInfo.fujian_jgzhg) {
+      caseInfo.fujian_jgzhg.split(',').forEach((item) => {
+        files.push({
+          name: item.split('\\').pop(),
+          url: VITE_GLOB_INFO_IMAGE_URL + '/' + item,
+          path: '整改_附件',
+        });
+      });
+    }
+    return files;
+  }
+
+  const detailRef = ref();
+  // 下载
+  async function downloadFilesAsZip() {
+    let caseInfo: any = detailRef.value.caseInfo;
+    const files = getFiles(caseInfo);
+    const zip = new JSZip();
+    // 添加文件到ZIP
+    for (const file of files) {
+      try {
+        const response = await fetch(file.url + '?t=' + Date.now(), {
+          mode: 'cors',
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP 错误: ${response.status} - ${response.statusText}`);
+        }
+        const blob = await response.blob();
+        zip.file(`${file.path}/${file.name}`, blob, { binary: true });
+      } catch (error) {
+        console.error('请求失败:', error);
+      }
+    }
+    // 生成ZIP文件并触发下载
+    try {
+      const blob = await zip.generateAsync({ type: 'blob' });
+      saveAs(blob, caseInfo.case_no + '.zip'); // 下载的ZIP文件名
+    } catch (error) {
+      console.error('生成ZIP文件时出错:', error);
+    }
+  }
+
+  async function prevData() {
+    if (prevShowDataId.value === 0) {
+      if (searchParams.value.page === 1) {
+        message.warning('已经是第一条数据了');
+        return;
+      }
+      searchParams.value.page--;
+      tablePaginationRight.value.current--;
+      await getTableData(searchParams.value);
+      setTimeout(() => {
+        caseId.value = tableData.value[tableData.value.length - 1].Id;
+      }, 10);
+      return;
+    } else {
+      caseId.value = prevShowDataId.value;
+    }
+  }
+  async function nextData() {
+    if (nextShowDataId.value === 0) {
+      if (
+        Math.ceil(tablePaginationRight.value.total / searchParams.value.limit) <=
+        searchParams.value.page
+      ) {
+        message.warning('已经是最后一条数据了');
+        return;
+      }
+      searchParams.value.page++;
+      tablePaginationRight.value.current++;
+      await getTableData(searchParams.value);
+      setTimeout(() => {
+        caseId.value = tableData.value[0].Id;
+      }, 10);
+    } else {
+      caseId.value = nextShowDataId.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%;
+    }
+  }
+  ::v-deep .ant-select-selection-overflow-item:first-child .ant-select-selection-item {
+    width: 80px;
+  }
+  .handoff {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 25px;
+  }
+</style>
diff --git a/src/views/demo/minerals/patchsummaryData/patchsummary.data.ts b/src/views/demo/minerals/patchsummaryData/patchsummary.data.ts
new file mode 100644
index 00000000..59df81bb
--- /dev/null
+++ b/src/views/demo/minerals/patchsummaryData/patchsummary.data.ts
@@ -0,0 +1,327 @@
+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',
+        mode: 'multiple',
+        maxTagCount: 1
+      };
+    },
+  },
+  {
+    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 },
+  },
+];
diff --git a/src/views/sys/exception/Converge.vue b/src/views/sys/exception/Converge.vue
index 59d14256..057dd25e 100644
--- a/src/views/sys/exception/Converge.vue
+++ b/src/views/sys/exception/Converge.vue
@@ -1,4 +1,5 @@
 <template>
+<a-spin size="large" tip="图层加载中..." :spinning="spinning" wrapperClassName="solid-spin">
   <div class="statistical" id="bg-pan" ref="container">
     <Map
       @onload="handlerOnMapLoad"
@@ -17,6 +18,7 @@
       @handlerQueryIntersectTif="handlerQueryIntersectTif"
       :layer="layerSettings"
       :defaultColor="defaultColor"
+      @changeLoading="changeLoading"
     />
 
     <div style="position: absolute; left: 60px; bottom: 20px; z-index: 1" v-if="false">
@@ -140,6 +142,7 @@
       />
     </div>
   </div>
+</a-spin>
 </template>
 
 <script lang="ts" setup>
@@ -198,6 +201,7 @@
   const preTransformX = ref(0);
   const preTransformY = ref(0);
   const hiddenInfoMap = ref(false)
+  const spinning = ref(false)
 
   watch([x, y], () => {
   if (!startedDrag.value) {
@@ -420,8 +424,12 @@ watchEffect(() => {
 
 
   onMounted(() => {
+    spinning.value = true
     getLayerSettings();
   });
+  const changeLoading = (type: boolean) => {
+    spinning.value = type
+  }
   const goRouter = () => {
     route.push({ path: '/caseoffence/feifacaikuang' })
   }
@@ -527,7 +535,7 @@ watchEffect(() => {
     -ms-user-select: none; /* IE/Edge */
     user-select: none;
     width:100%;
-    height:100vh;
+    height:calc(-80px + 100vh);
     position:relative;
   }
 
@@ -644,7 +652,6 @@ watchEffect(() => {
   .layer-center-container {
     width:285px;
     position: absolute;
-    z-index: 1000;
   }
   .drag-area{
     width:245px;
@@ -692,3 +699,11 @@ watchEffect(() => {
     font-size: 14px;
   }
 </style>
+<style>
+.solid-spin.ant-spin-nested-loading > .ant-spin-blur::after {
+  opacity: 1;
+}
+.solid-spin.ant-spin-nested-loading  .ant-spin{
+  max-height: none;
+}
+</style>
diff --git a/src/views/sys/exception/Converge/SearchComponent.vue b/src/views/sys/exception/Converge/SearchComponent.vue
index ef67ef9a..e5a5b9b4 100644
--- a/src/views/sys/exception/Converge/SearchComponent.vue
+++ b/src/views/sys/exception/Converge/SearchComponent.vue
@@ -112,7 +112,6 @@
     },
   ]);
 
-
   const showSearchResult = ref(false);
   const showFilterOptions = ref(false);
   const currentFilter = ref('全部');
@@ -177,6 +176,13 @@
         });
       }
       showSearchResult.value = true;
+    } else if (keyword.value.includes(',')) {
+      // 通过坐标直接移动
+      let location = keyword.value.split(',');
+      let newCoord = transformGCJ2WGS(location[1], location[0]);
+      if (newCoord) {
+        emits('toPosition', [newCoord.lon, newCoord.lat]);
+      }
     } else {
       // 地名搜索
       axios
diff --git a/src/views/sys/exception/Converge/config.ts b/src/views/sys/exception/Converge/config.ts
index a6a0f6aa..6e10a59f 100644
--- a/src/views/sys/exception/Converge/config.ts
+++ b/src/views/sys/exception/Converge/config.ts
@@ -1,4 +1,4 @@
-export const MAPBOX_TOKEN = "pk.eyJ1IjoiemhhbmcxMjM4ODk5OSIsImEiOiJja3N5Ync1cXcyMTR2Mm9xempmbGE4MnBtIn0.R-j78CRvbs6JZG-MDSoh8Q";
+export const MAPBOX_TOKEN = "pk.eyJ1IjoibGllYmFvIiwiYSI6ImNsMXg1OHdtcTE3eDEza3FmODBmeXhldmIifQ.CYYMuikQnGHMtTNq60B_xA";
 
 export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";
 
diff --git a/src/views/sys/exception/Converge/index.vue b/src/views/sys/exception/Converge/index.vue
index 76a5c101..a0bc49d1 100644
--- a/src/views/sys/exception/Converge/index.vue
+++ b/src/views/sys/exception/Converge/index.vue
@@ -58,6 +58,7 @@
     'handlerGetDetails',
     'showMonitor',
     'handlerQueryIntersectTif',
+    'changeLoading'
   ]);
 
   let isZoomVisible: any = false;
@@ -141,7 +142,6 @@
       //挂载mapbox-gl-utils
       U.init(map);
       mp = new MP(map);
-
       // 添加地形数据
       map.addSource('mapbox-dem', {
         type: 'raster-dem',
@@ -151,41 +151,46 @@
         minzoom: 10,
       });
       map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 });
-
       // 设置2D地图
       map.easeTo({ pitch: 0, bearing: 0, duration: 1000 });
       map.dragRotate.disable(); // 禁用拖动旋转
       map.pitchWithRotate = false; // 禁用旋转时俯仰变化
       mapAngle.value = '2D';
-
       handlerCheckUserOrgs();
       // handlerLoadMaskLayer();
       getMaskData();
       handlerDealStreet();
       handlerDealCountry();
-
       // 视频监控
       addMonitorLayer();
-
       // 叠加遥感影像和高清影像
       try{
-          axios.get(VITE_GLOB_LAN_API_URL+"/api/DroneCloudQuery/IsPublic").then(res=>{
-              if(res.data.result){
-                networkType.value = "WAN";
-              }else{
-                networkType.value = "LAN";
-                // 加载内网影像
-                loadYingXiangLayer()
-              }
+        axios.get(VITE_GLOB_LAN_API_URL+"/api/DroneCloudQuery/IsPublic").then(res=>{
+          if(res.data.result){
+            networkType.value = "WAN";
+          }else{
+            networkType.value = "LAN";
+            // 加载内网影像
+            loadYingXiangLayer()
+          }
         })
       }catch(e){
         networkType.value = "WAN";
-      }finally{
-
-      }
+      }finally{}
+      const sources = map.getStyle().sources;
+      let loadedSources = 0;
+      Object.keys(sources).forEach(sourceId => {
+        map.on('sourcedata', (e) => {
+          if (e.sourceId === sourceId && e.isSourceLoaded) {
+            loadedSources++;
+            if (loadedSources === Object.keys(sources).length) {
+              console.log('所有图层关联的数据源已加载完成');
+              emits('changeLoading',false)
+            }
+          }
+        });
+      });
     });
-
-    
   }
 
   function loadYingXiangLayer(){
@@ -545,64 +550,53 @@
 
   // 获取县区边界数据
   const handlerDealCountry = (countyName: String = '临沂市'): void => {
-    let center = {};
-    let zoom;
-    let filterName = '';
-    if (countyName == '临沂市') {
-      center = { lng: 118.72504868812163, lat: 35.180072027132915 };
-      zoom = 7.848587811931849;
-      handlerLocation([center['lng'], center['lat']], zoom);
-    } else if (countyName) {
-      center = MAP_VIEWER[countyName].center;
-      zoom = MAP_VIEWER[countyName].zoom;
-      handlerLocation([center['lng'], center['lat']], zoom);
-      filterName = countyName;
-    }
-
-    axios({
-      method: 'get',
-      // url:`http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=xzqmc%20like%20%27%25${filterName}%25%27`,
-      url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson`,
-    }).then((res) => {
-      handlerLoadPanelLayer(res.data);
-      handlerLoadCountyLayer(res.data);
-    });
-  };
-
-  /**
-   *
-   * 县区边界：countyLayer
-   * 县区面板图层：countyPanelLayer
-   * 乡镇边界：streetLayer
-   * 乡镇名称图层：streetLabelLayer
-   * 遮罩图层：mb-tag
-   * 图斑线：historyLayerLine
-   * 图斑面：historyLayerFill
-   *
-   * */
-  // 渲染县区边界数据
-  const handlerLoadCountyLayer = (geojson) => {
-    // 绘制线
-    if (map.getSource('countySource')) {
-      map.getSource('countySource').setData(geojson);
-    } else {
-      map.addSource('countySource', {
-        type: 'geojson',
-        data: geojson,
-      });
-      map.addLayer({
-        id: 'countyLayer',
-        type: 'line',
-        source: 'countySource',
-        paint: {
-          'line-color': '#6f7ff4', // 设置线的颜色
-          'line-width': 3, // 设置线的宽度
-        },
-      });
-      if (map.getLayer('countyPanelLayer')) {
-        map.moveLayer('countyLayer', 'countyPanelLayer');
+    map.addSource("wmsSource", {
+      "type": "vector",
+      "scheme": "tms",
+      tiles: [
+      "http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Axianjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"
+      ],
+      tileSize: 512
+    })
+    map.addLayer({
+      id: "xianjie",
+      type: "line",
+      source: "wmsSource",
+      'source-layer': 'xianjie',
+      layout: {
+        visibility: "visible",
+      },
+      paint: {
+        "line-color": "#6f7ff4",
+        "line-width": 4,
       }
-    }
+    })
+    map.addSource("xianjiepoint", {
+      "type": "vector",
+      "scheme": "tms",
+      tiles: [
+      "http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Alinyishixianjie_point@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
+      ],
+      tileSize: 512,
+    })
+    map.addLayer({
+      id: "xianjiepoint",
+      type: "symbol",
+      source: "xianjiepoint",
+      'source-layer': 'linyishixianjie_point',
+      layout: {
+        visibility: "visible",
+          "text-field": "{xzqmc}",
+          "text-size": 18
+      },
+      paint: {
+        'text-color': '#041B36',
+        'text-halo-color': '#fff',
+        'text-halo-width': 2,
+      },
+      minzoom: 8,
+      maxzoom: 10,
+    });
   };
 
   // 渲染县界白板图层
@@ -669,13 +663,19 @@
   };
 
   function getMaskData() {
-    axios({
-      method: 'get',
-      url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Ashijie&maxFeatures=50&outputFormat=application%2Fjson`,
-    }).then((res) => {
-      let geojson = { DATA: res.data.features[0].geometry.coordinates[0][0] };
-
-      handlerLoadMaskLayer(geojson);
+    map.addLayer({
+      id: "linyishizhezhao",
+      type: "raster",
+      source: {
+        type: "raster",
+        tiles: [
+          "http://175.27.168.120:8080/geoserver/gwc/service/wms?service=WMS&version=1.1.0&request=GetMap&layers=linyishi%3Alinyishizhezhao&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
+        ],
+        tileSize: 256,
+      },
+      layout: {
+        visibility: "visible",
+      }
     });
   }
 
@@ -716,56 +716,55 @@
 
   // 获取乡镇数据
   const handlerDealStreet = (countyName: String = '临沂市'): void => {
-    
-    axios({
-      method: 'get',
-      url: `http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Azhenjie&maxFeatures=10000&outputFormat=application%2Fjson`,
-    }).then((res) => {
-      handlerLoadStreetLayer(res.data);
+    map.addSource("zhenjie", {
+      "type": "vector",
+      "scheme": "tms",
+      tiles: [
+      "http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Azhenjie@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
+      ],
+      tileSize: 512
+    })
+    map.addLayer({
+      id: "zhenjie",
+      type: "line",
+      source: "zhenjie",
+      'source-layer': 'zhenjie',
+      layout: {
+        visibility: "visible",
+      },
+      paint: {
+        'line-color': '#42befb', // 设置线的颜色
+        'line-width': 1, // 设置线的宽度
+      },
+      minzoom: 10,
+      maxzoom: 24,
+    })
+    map.addSource("zhenjiepoint", {
+      "type": "vector",
+      "scheme": "tms",
+      tiles: [
+      "http://175.27.168.120:8080/geoserver/gwc/service/tms/1.0.0/linyishi%3Azhenjiepoint@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
+      ],
+      tileSize: 512,
+    })
+    map.addLayer({
+      id: "zhenjiepoint",
+      type: "symbol",
+      source: "zhenjiepoint",
+      'source-layer': 'zhenjiepoint',
+      layout: {
+        visibility: "visible",
+          "text-field": "{xzqmc}",
+      },
+      paint: {
+        'text-color': '#041B36',
+        'text-halo-color': '#fff',
+        'text-halo-width': 2,
+      },
+      minzoom: 10,
+      maxzoom: 24,
     });
   };
-  // 渲染乡镇边界数据
-  const handlerLoadStreetLayer = (geojson) => {
-    // 绘制线
-    if (map.getSource('streetSource')) {
-      map.getSource('streetSource').setData(geojson);
-    } else {
-      map.addSource('streetSource', {
-        type: 'geojson',
-        data: geojson,
-      });
-      map.addLayer({
-        id: 'streetLayer',
-        type: 'line',
-        source: 'streetSource',
-        paint: {
-          'line-color': '#42befb', // 设置线的颜色
-          'line-width': 2, // 设置线的宽度
-        },
-        minzoom: 10,
-        maxzoom: 24,
-      });
-
-      map.addLayer({
-        id: 'streetLabelLayer',
-        type: 'symbol',
-        source: 'streetSource',
-        layout: {
-          'text-field': ['get', 'xzqmc'],
-          'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
-          'text-size': 12,
-          'text-anchor': 'center',
-        },
-        paint: {
-          'text-color': '#041B36',
-          'text-halo-color': '#fff',
-          'text-halo-width': 2,
-        },
-        minzoom: 10,
-        maxzoom: 24,
-      });
-    }
-  };
 
   let VillageGeojson = {};
   const handlerLoadVillageLayer = () => {