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

src/components/Audit/InfoModal/index.vue

@@ -104,12 +104,18 @@
           <a-input v-model:value="props.infoData.zhongdianquyu_area" :disabled="!props.control"/>
         </div>
       </div>
-      <div class="item">
-        <div class="label">占生态红线面积：</div>
+      <div class="item" v-if="props.type == '违法用地'">
+        <div class="label">图斑来源：</div>
         <div class="item-value">
-          <a-input v-model:value="props.infoData.shengtaibaohuhongxian_area" :disabled="!props.control"/>
+          <a-select 
+            style="width: 100%"
+            v-model:value="props.infoData.tubanlaiyuan"
+            :options="tubanlaiyuanOptions"
+            placeholder="请选择图斑来源"
+            :disabled="!props.control"/>
         </div>
       </div>
+      <div class="item" v-else></div>
     </div>
     <div class="row">
       <div class="item">
@@ -131,6 +137,12 @@
         </div>
       </div>
       <div class="item">
+        <div class="label">占生态红线面积：</div>
+        <div class="item-value">
+          <a-input v-model:value="props.infoData.shengtaibaohuhongxian_area" :disabled="!props.control"/>
+        </div>
+      </div>
+      <!-- <div class="item">
         <div class="label" v-if="false">是否县级访问：</div>
         <div class="item-value" v-if="false">
           <a-select
@@ -140,7 +152,7 @@
             :defaultValue="1"
             :disabled="!props.control"/>
         </div>
-      </div>
+      </div> -->
     </div>
     <div class="row">
       <div class="item">
@@ -269,6 +281,7 @@ const props = defineProps(['infoData','control','type','modalLoading'])
 const emits = defineEmits(['handleOk','closeModal','closeCase','reSubmit','changeLoading'])
 
 const typenameOptions = ref([])
+const tubanlaiyuanOptions = ref([])
 const countyOptions = ref([])
 const streetOptions = ref([])
 const communityOptions = ref([])
@@ -299,6 +312,14 @@ onMounted(() => {
       }
     })
   })
+  getLoad({code: 'wfydtbly'}).then(res => {
+    tubanlaiyuanOptions.value = res.map(item => {
+      return {
+        label: item.itemName,
+        value: item.itemValue
+      }
+    })
+  })
   getChildrenTree({ parentId: 371300 }).then(res => {
     countyOptions.value = res.map(item => {
       return {

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>

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

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>

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

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

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 = () => {