违法用地-持续监管

src/api/demo/system.ts

@@ -138,6 +138,14 @@ enum Api {
   CaseOffenceMinerals = '/api/DroneCaseInfoMinerals/CaseOffenceMinerals',
   // 非法采矿-统计列表New
   CaseOffenceMineralsNew = '/api/DroneCaseInfoMinerals/CaseOffenceMineralsNew',
+  // 持续监管-列表
+  LoadCaseInfoCxjgTuBanList = '/api/DroneCaseInfoSingle/LoadCaseInfoCxjgTuBanList',
+  // 持续监管-图片插入
+  UpdateCxjgData = '/api/DroneCaseInfoSingle/UpdateCxjgData',
+  // 持续监管-审核
+  CheckCxjgPic = '/api/DroneCaseInfoSingle/CheckCxjgPic',
+  // 持续监管-迁入违法专题
+  MoveInIllegalSubejct = '/api/DroneCaseInfoSingle/MoveInIllegalSubejct',
 }
 export const getPositionsTree = (params?: AccountParams) =>
   defHttp.get<AccountListGetResultModel>({ url: Api.PositionsTree, params });
@@ -530,3 +538,16 @@ export const CaseOffenceMinerals = (params: ReportParams) =>
 // 非法采矿-统计列表New
 export const CaseOffenceMineralsNew = (params: ReportParams) =>
   defHttp.get<StatisticalListGetResultModel>({ url: Api.CaseOffenceMineralsNew, params });
+
+// 持续监管-列表
+export const LoadCaseInfoCxjgTuBanList = (params) =>
+  defHttp.get({ url: Api.LoadCaseInfoCxjgTuBanList, params });
+// 持续监管-图片插入
+export const UpdateCxjgData = (params) =>
+  defHttp.get({ url: Api.UpdateCxjgData, params });
+// 持续监管-审核
+export const CheckCxjgPic = (params) =>
+  defHttp.get({ url: Api.CheckCxjgPic, params });
+// 持续监管-迁入违法专题
+export const MoveInIllegalSubejct = (params) =>
+  defHttp.post({ url: Api.MoveInIllegalSubejct, params });

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

@@ -438,6 +438,12 @@
               </div>
             </a-descriptions-item> -->
           </a-descriptions>
+          <div
+            style="display: flex; justify-content: right; margin-top: 10px"
+            v-if="isKeepSupervision"
+          >
+            <a-button type="primary" @click="funMoveInIllegalSubejct">转入违法用地</a-button>
+          </div>
         </a-tab-pane>
       </a-tabs>
     </div>
@@ -462,8 +468,8 @@
 <script setup lang="ts">
   import { defineProps, ref, computed, onBeforeMount, watch } from 'vue';
   import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
-  import { getConfig } from '@/api/sys/layerManagement';
+  import { getConfig, getGeom } from '@/api/sys/layerManagement';
-  import { getGeom } from '@/api/sys/layerManagement';
+  import { MoveInIllegalSubejct } from '@/api/demo/system';
   import { getLoadCaseImgList } from '@/api/tiankongdi';
   import { useMessage } from '@/hooks/web/useMessage';
   import axios from 'axios';
@@ -725,6 +731,20 @@
       return false;
     }
   };
+
+  // 是否是持续监察
+  const isKeepSupervision = window.location.href.includes('/tiankongdi/keepSupervision');
+  // 转入违法用地
+  const funMoveInIllegalSubejct = async () => {
+    let querys = {
+      caseId: props.showInfoData.id,
+    };
+    await MoveInIllegalSubejct(querys).then((res) => {
+      if (res) {
+        createMessage.success('转移成功！');
+      }
+    });
+  };
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,446 @@
+<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"
+          />
+        </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>
+        <template #gengdimianji>
+          <div class="scope-box">
+            <a-input v-model:value="areaParams.gengdiArea1" placeholder="请输入" />
+            -
+            <a-input v-model:value="areaParams.gengdiArea2" placeholder="请输入" />
+          </div>
+        </template>
+        <template #jibennongtianmianji>
+          <div class="scope-box">
+            <a-input v-model:value="areaParams.jibenArea1" placeholder="请输入" />
+            -
+            <a-input v-model:value="areaParams.jibenArea2" placeholder="请输入" />
+          </div>
+        </template>
+      </BasicForm>
+    </div>
+    <div class="table-box">
+      <BasicTable @register="registerTable" :searchInfo="searchInfo" @change="handleChange">
+        <template #toolbar>
+          <PermissionBtn @btn-event="onBtnClicked" />
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="['area', 'gengdiarea', 'nongyongdiarea'].includes(column.key)">
+            {{ dataProcessingCount(record[column.key]) }}
+          </template>
+          <template v-if="column.key === 'action'">
+            <TableAction
+              :actions="[
+                {
+                  // icon: 'ant-design:ellipsis-outlined',
+                  label: '查看',
+                  onClick: viewAccount.bind(null, record),
+                },
+              ]"
+            />
+          </template>
+        </template>
+      </BasicTable>
+    </div>
+    <a-modal v-model:open="open" title="导出文件类型" :footer="null">
+      <div>
+        <a-button class="exportbutton" @click="handleExport('excel')">
+          持续监管列表统计报表（execl）
+        </a-button>
+        <a-button class="exportbutton" @click="handleExport('shp')">
+          持续监管列表矢量数据（shp）
+        </a-button>
+      </div>
+    </a-modal>
+    <a-modal
+      style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
+      wrap-class-name="full-modal"
+      v-model:open="showInfoOpen"
+      title="详情"
+      :footer="null"
+      :maskClosable="true"
+      :destroyOnClose="true"
+      @cancel="showInfoOpen = false"
+    >
+      <div class="modal-content">
+        <div class="handoff">
+          <a-button type="primary" style="margin-right: 25px" @click="prevData">上一条</a-button>
+          <a-button type="primary" @click="nextData">下一条</a-button>
+        </div>
+        <ShowInfoModal :showInfoData="showInfoData" />
+      </div>
+    </a-modal>
+    <a-modal
+      style="width: 50vw; margin: 0px; padding: 0px"
+      wrap-class-name="full-modal"
+      :centered="true"
+      :mask="false"
+      :maskClosable="false"
+      :keyboard="false"
+      v-model:open="uploadOpen"
+      title="上传图片"
+      :footer="null"
+      @cancel="uploadOpen = false"
+    >
+      <UploadModal />
+    </a-modal>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, watch } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { LoadCaseInfoCxjgTuBanList, loadCaseInfoTuBanList } from '@/api/demo/system';
+  import { PermissionBtn } from '@/components/PermissionBtn/index';
+  import { columns, searchFormSchema } from './keepSupervision.data';
+  import { getAppEnvConfig } from '@/utils/env';
+  import axios from 'axios';
+  import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
+  import UploadModal from './uploadModal.vue';
+  import { getCaseInfoById } from '@/api/tiankongdi/index';
+
+  import { dataProcessingCount } from '@/views/demo/tiankongdi/util';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { PageWrapper } from '@/components/Page';
+  import dayjs from 'dayjs';
+  import { nowStatusOptions } from '@/utils/global';
+  import { message } from 'ant-design-vue';
+
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+
+  defineOptions({ name: 'RoleManagement' });
+  const nextShowDataId = ref();
+  const prevShowDataId = ref();
+  const showInfoId = ref();
+  const searchInfo = reactive<Recordable>({
+    countyid: null,
+  });
+  const showInfoData = ref();
+  const showInfoOpen = ref(false);
+  const searchParams = ref({
+    page: 1,
+    limit: 10,
+  });
+  const nowStatus = ref(undefined);
+  const areaParams = ref({
+    tubanArea1: null,
+    tubanArea2: null,
+    gengdiArea1: null,
+    gengdiArea2: null,
+    jibenArea1: null,
+    jibenArea2: null,
+    nowStatus: 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/DroneCaseInfoSingle/ExportCaseInfoTuBanList';
+      fileName = '图斑列表统计报表' + new Date().getTime() + '.xls';
+    } else if (exportType == 'shp') {
+      url = VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportCaseInfoShapefile';
+      fileName = '图斑列表矢量数据' + new Date().getTime() + '.zip';
+    }
+    axios({
+      method: 'post',
+      url: url,
+      params: params,
+      headers: {
+        'X-Token': localStorage.getItem('X-Token'),
+      },
+      responseType: 'blob',
+    }).then((res) => {
+      const elink = document.createElement('a');
+      elink.download = fileName;
+      elink.style.display = 'none';
+      elink.href = URL.createObjectURL(res.data);
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href);
+      document.body.removeChild(elink);
+    });
+  }
+
+  const open = ref<boolean>(false);
+  function onBtnClicked(domId) {
+    switch (domId) {
+      case 'btnUpload':
+        uploadOpen.value = true;
+        break;
+      case 'btnExport':
+        open.value = true;
+        break;
+      default:
+        break;
+    }
+  }
+  function viewAccount(record) {
+    showInfoId.value = record.Id;
+    getDetailData();
+  }
+  function getDetailData() {
+    getCaseInfoById({ id: showInfoId.value }).then((res) => {
+      showInfoData.value = res;
+      showInfoOpen.value = true;
+    });
+  }
+  function handleChange(data) {
+    searchParams.value.page = data.current;
+    searchParams.value.limit = data.pageSize;
+    tablePaginationRight.value = data;
+    const querys = Object.assign(searchParams.value, areaParams.value);
+    getTableData(querys);
+  }
+  function changeStatus(val) {
+    areaParams.value.nowStatus = 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.startTime && querys.endTime) {
+      querys.startTime = dayjs(querys.startTime).format('YYYY-MM-DD');
+      querys.endTime = dayjs(querys.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss');
+    }
+    if (querys.tubanlaiyuan) {
+      querys.tubanlaiyuan = querys.tubanlaiyuan.join(',');
+    }
+    setLoading(true);
+    // await loadCaseInfoTuBanList(querys).then((res) => {
+    await LoadCaseInfoCxjgTuBanList(querys).then((res) => {
+      tableData.value = res.items;
+      tablePaginationRight.value.total = res.total;
+      setTableData(tableData.value);
+      setPagination(tablePaginationRight.value);
+      setLoading(false);
+    });
+  }
+  function handleReset() {
+    searchParams.value = {
+      page: 1,
+      limit: 10,
+    };
+    areaParams.value = {
+      tubanArea1: null,
+      tubanArea2: null,
+      gengdiArea1: null,
+      gengdiArea2: null,
+      jibenArea1: null,
+      jibenArea2: null,
+      nowStatus: undefined,
+    };
+    nowStatus.value = undefined;
+    tablePaginationRight.value.current = 1;
+    getTableData(searchParams.value);
+  }
+  onMounted(() => {
+    getTableData(searchParams.value);
+  });
+  watch(
+    () => showInfoId.value,
+    () => {
+      let index = tableData.value.findIndex((item) => item.Id == showInfoId.value);
+      getDetailData();
+      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;
+      }
+    },
+  );
+  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(() => {
+        showInfoId.value = tableData.value[tableData.value.length - 1].Id;
+      }, 10);
+      return;
+    } else {
+      showInfoId.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(() => {
+        showInfoId.value = tableData.value[0].Id;
+      }, 10);
+    } else {
+      showInfoId.value = nextShowDataId.value;
+    }
+  }
+  // 上传
+  const uploadOpen = ref(false);
+</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/tiankongdi/keepSupervision/keepSupervision.data.ts

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

src/views/demo/tiankongdi/keepSupervision/uploadModal.vue

@@ -0,0 +1,228 @@
+<template>
+  <div>
+    <div class="upload">
+      <a-upload
+        v-model:file-list="fileList"
+        list-type="picture-card"
+        multiple
+        :showUploadList="false"
+        :custom-request="customRequest"
+      >
+        <div>
+          <PlusOutlined />
+          <div style="margin-top: 8px">上传图片</div>
+        </div>
+      </a-upload>
+    </div>
+    <div class="table">
+      状态筛选：
+      <a-select
+        v-model:value="selectStatus"
+        mode="multiple"
+        style="width: 90%; margin-top: 5px; margin-bottom: 5px"
+        allowClear
+        :options="[
+          {
+            value: 'uploading',
+            label: '上传中',
+          },
+          {
+            value: 'done',
+            label: '上传成功',
+          },
+          {
+            value: 'error',
+            label: '上传失败',
+          },
+          {
+            value: 'updateSuccess',
+            label: '插入成功',
+          },
+          {
+            value: 'updateError',
+            label: '插入失败',
+          },
+        ]"
+      />
+      <a-table
+        :columns="uploadColumns"
+        :data-source="filterData"
+        :pagination="false"
+        bordered
+        :scroll="{ y: 600 }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.dataIndex === 'size'">
+            {{ parseFloat(record.size / 1024 / 1024).toFixed(2) }} MB
+          </template>
+          <template v-if="column.dataIndex === 'percent'">
+            <a-progress
+              v-if="record.status == 'error'"
+              :percent="record.percent"
+              status="exception"
+            />
+            <a-progress
+              v-if="['done', 'updateSuccess', 'updateError'].includes(record.status)"
+              :percent="record.percent"
+            />
+          </template>
+          <template v-if="column.dataIndex === 'status'">
+            <a-tag color="processing" v-if="record.status == 'uploading'">上传中</a-tag>
+            <a-tag color="success" v-if="record.status == 'done'">上传成功</a-tag>
+            <a-tag color="error" v-if="record.status == 'error'">上传失败</a-tag>
+            <a-tag color="green" v-if="record.status == 'updateSuccess'">插入成功</a-tag>
+            <a-tag color="red" v-if="record.status == 'updateError'">插入失败</a-tag>
+          </template>
+          <template v-if="column.dataIndex === 'url' || column.dataIndex === 'message'">
+            {{ record.url || record.message }}
+          </template>
+        </template>
+      </a-table>
+      <div class="update">
+        <a-button type="primary" @click="startUploadCXJGData">
+          将上传成功的图片插入到数据库
+        </a-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { defineProps, ref, watch, onMounted, defineEmits, computed } from 'vue';
+  import { PlusOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
+  import { getAppEnvConfig } from '@/utils/env';
+  import axios from 'axios';
+  import { UpdateCxjgData, CheckCxjgPic } from '@/api/demo/system';
+  import { uploadColumns } from './keepSupervision.data';
+
+  const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
+
+  // 上传列表
+  const fileList: any = ref();
+  const selectStatus = ref([]);
+  const filterData = computed(() => {
+    if (fileList.value && selectStatus.value.length > 0) {
+      return fileList.value.filter((item) => selectStatus.value.includes(item.status));
+    } else {
+      return fileList.value;
+    }
+  });
+
+  // 上传
+  const customRequest = (file) => {
+    const formData = new FormData();
+    formData.append('files', file.file);
+    axios({
+      method: 'post',
+      url: `${VITE_GLOB_INFO_IMAGE_URL}/api/Platform/Upload`,
+      params: { project: 'DroneEnforcement' },
+      data: formData,
+      headers: {
+        'Content-type': 'multipart/form-data',
+      },
+    }).then((res) => {
+      const index = fileList.value.findIndex((item) => item.uid === file.file.uid);
+      // 上传成功
+      if (res.data.code == '200') {
+        let data = res.data.result;
+        fileList.value[index] = {
+          ...fileList.value[index],
+          percent: 100,
+          status: 'done',
+          url: data[0].filePath,
+        };
+      } else {
+        // 上传失败
+        fileList.value[index] = {
+          ...fileList.value[index],
+          percent: 0,
+          status: 'error',
+          url: '',
+          message: res.data.message,
+        };
+      }
+    });
+  };
+
+  // 持续监管-图片插入启动
+  async function startUploadCXJGData() {
+    const list = fileList.value;
+    if (!list || list.length === 0) return;
+    for (let i = 0; i < list.length; i++) {
+      const item = list[i];
+      if (item.status === 'done' || item.status === 'updateError') {
+        // 等待上传完成并返回 true 后，再继续下一个循环
+        await UpdateUploadCXJGData(item);
+      }
+    }
+  }
+
+  // 持续监管-图片插入
+  async function UpdateUploadCXJGData(value) {
+    let caseid = value.name.split('.').slice(0, -1).join('.');
+    if (caseid.includes('_')) {
+      caseid = caseid.split('_').slice(0, 1).join('_');
+    }
+    const index = fileList.value.findIndex((item) => item.uid === value.uid);
+    if (index === -1) return false; // 如果找不到对应文件项，直接返回
+    let querys = {
+      caseid: caseid,
+      path: value.url,
+    };
+    try {
+      const res1 = await UpdateCxjgData(querys);
+      if (res1) {
+        // 图片上传成功，开始审核
+        const res2 = await CheckCxjgPic({ id: caseid });
+        if (res2) {
+          // 审核通过
+          fileList.value[index] = {
+            ...fileList.value[index],
+            status: 'updateSuccess',
+          };
+          return true;
+        } else {
+          // 审核失败
+          fileList.value[index] = {
+            ...fileList.value[index],
+            status: 'updateError',
+          };
+          return false;
+        }
+      } else {
+        // 上传失败
+        fileList.value[index] = {
+          ...fileList.value[index],
+          status: 'updateError',
+        };
+        return false;
+      }
+    } catch (error) {
+      console.error('上传或审核出错:', error);
+      fileList.value[index] = {
+        ...fileList.value[index],
+        status: 'updateError',
+      };
+      return false;
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .upload {
+    width: 100%;
+    margin-left: 20px;
+  }
+  .table {
+    // width: 95%;
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+  .update {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+  }
+
+  ::v-deep .ant-select-selection-item {
+    width: 85px !important;
+  }
+</style>