feat:导出，图斑数据结构变化

张含笑

2025-09-02 38d20755f3c5e248aa1efda2dee0860c3e9a6bfd

feat:导出，图斑数据结构变化

 src/api/patchManagement/index.js

@@ -73,10 +73,18 @@
    })
}
// 导出
export const exportExcel = ids => {
// export const exportExcel = ids => {
//     return request({
//         url: `/drone-device-core/patches/api/v1/Patches/getExcel?ids=${ids}`,
//         method: 'get',
//         responseType: 'blob',
//     })
// }
export const exportExcel = data => {
    return request({
        url: `/drone-device-core/patches/api/v1/Patches/getExcel?ids=${ids}`,
        method: 'get',
        url: `/drone-device-core/patches/api/v1/Patches/exportExcel`,
        method: 'post',
        data,
        responseType: 'blob',
    })
}

 src/views/resource/components/spotDetails.vue

@@ -58,7 +58,6 @@
          <div class="table-content">
            <div class="tabname">图斑列表</div>
            <el-table
             
              ref="polygonTableEle"
              highlight-current-row
              :row-class-name="tableRowClassName"
@@ -67,10 +66,12 @@
            >
              <el-table-column type="index" align="center" width="30" label="序号">
                <template #default="{ $index }">
                  {{ ($index + 1).toString().padStart(2, '0') }}
                  {{
                    ($index + 1 + (params.page - 1) * params.pageSize).toString().padStart(2, '0')
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="dkbh" align="center" label="图斑名称" show-overflow-tooltip/>
              <el-table-column prop="dkbh" align="center" label="图斑名称" show-overflow-tooltip />
              <el-table-column prop="is_exception" align="center" label="图斑状态">
                <template #default="scope">
                  <span>{{ scope.row.is_exception === 2 ? '异常' : '正常' }}</span>
@@ -176,7 +177,7 @@
    if (newOptions) {
      spotTypeOptions.value = newOptions.map(opt => ({
        label: opt.label,
        value: String(opt.value),
        value: opt.value,
      }));
    }
  },
@@ -235,28 +236,26 @@
  const requestParams = {
    patchesInfoId: props.detailid,
    page: params.value.page,
    pageSize: params.value.pageSize
    pageSize: params.value.pageSize,
  };
  
  tableMapListApi(requestParams).then(res => {
    tableData.value = res.data.data.map(item => ({
    tableData.value = res.data.data.records?.map(item => ({
      ...item,
      dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
    }));
    total.value = res.data.total || res.data.data.length;
    
    total.value = res.data.data.total || res.data.data.length;
    tbJwdList = [];
    viewer?.entities.removeAll();
    entitiesAddSpot();
  });
};

const handleSizeChange = (val) => {
const handleSizeChange = val => {
  params.value.pageSize = val;
  params.value.page = 1; // 重置到第一页
  params.value.page = 1;
  getTableList();
};
const handleCurrentChange = (val) => {
const handleCurrentChange = val => {
  params.value.page = val;
  getTableList();
};
@@ -322,7 +321,10 @@

    if (tbJwdList.length > 0) {
      const positions = tbJwdList.flatMap(item => Cesium.Cartesian3.fromDegreesArray(item.grouped));
      homeViewer.value?.camera.flyToBoundingSphere(new Cesium.BoundingSphere.fromPoints(positions));
      const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
      homeViewer.value?.camera.flyToBoundingSphere(boundingSphere, {
        duration: 0,
      });
    }
    viewInstance.value?.removeLeftClickEvent('spotHighlighting');
    viewInstance.value?.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting');
@@ -389,7 +391,7 @@

      lastentity.polygon.material = originalColor;
      lastentity.polygon.outlineColor = originalOutline;
      lastentity.polygon.outlineWidth = 2; // 恢复默认边框宽度
      lastentity.polygon.outlineWidth = 2;
    }
  }

@@ -402,7 +404,7 @@
    destination: Cesium.Cartesian3.fromDegrees(
      Number(polygonCenter.lng),
      Number(polygonCenter.lat),
      2000
      1500
    ),
    zIndex: 100,
  });
@@ -448,8 +450,8 @@
  const patchTypeItem = infoList.value.find(item => item.name === '图斑类型');
  const updateParams = {
    file_name: fileNameItem?.value || '',
    lot_type_id: patchTypeItem?.originalValue || patchTypeItem?.value || '',
    type: patchTypeItem?.originalValue || patchTypeItem?.value || '',
    lot_type_id: patchTypeItem?.value || '',
    type: patchTypeItem?.value || '',
    id: props.detailList.id,
  };
  patchEditApi(updateParams).then(res => {
@@ -493,21 +495,19 @@
  destroyMap();
});
</script>
<style lang="scss">
.spotDialog {
  .el-dialog.is-align-center .el-dialog__header .el-dialog__title {
    padding-left: 16px !important;
  }
}
</style>

<style scoped lang="scss">
// :deep(.el-dialog.is-align-center) {
//   :deep(.el-dialog__header) {
//     .el-dialog__title {
//       padding-left: 14px !important;
//     }
//   }
// }
:global(.spotDialog .el-dialog__header span) {
  padding-left: 16px !important;
  display: inline-block;

}
:global(.spotDialog .el-dialog__header) .el-dialog__title {
  font-family: "Source Han Sans CN" !important;
  font-weight: bold !important;
  font-size: 16px !important;
  color: #363636 !important;
}
.container {
  display: flex;
  flex-direction: column;
@@ -530,7 +530,7 @@
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0;
    padding: 0; // 移除内边距，让边框贴合
    padding: 0;
    font-size: 14px;
  }

@@ -554,7 +554,7 @@
    height: 33px;
    padding: 0 10px;
    border-right: 1px solid #e8e8e8;
    border-bottom: none; // 由.itemCon控制底部边框
    border-bottom: none;

    .itemTitle {
      width: 202px;
@@ -567,7 +567,7 @@
      height: 100%;
      line-height: 33px;
      padding-right: 10px;
      margin: 0 -10px 0 -10px; // 拉伸背景色
      margin: 0 -10px 0 -10px;
    }

    .itemContent {

 src/views/resource/patchManagement.vue

@@ -55,7 +55,7 @@
        <el-form-item label="图斑类型" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择图斑类型">
            <el-option
              v-for="item in spotTypeOption"
              v-for="item in allspotTypeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
@@ -83,9 +83,8 @@
      :title="spotDetailsTitle"
      :detailid="detailid"
      :detailList="detailList"
      :spotTypeOption="spotTypeOption"
      :spotTypeOption="allspotTypeOption"
    ></SpotDetails>
  
  </basic-container>
</template>
<script setup>
@@ -96,6 +95,7 @@
  tableMapListApi,
  exportExcel,
  patchDeleteApi,
  listOfSpotTypesApi,
} from '@/api/patchManagement/index';
import { getRegionTreeAll } from '@/api/job/task';
import { ref, computed, watch } from 'vue';
@@ -107,7 +107,7 @@
import patchDetails from '@/views/resource/components/patchDetails.vue';
import SpotDetails from '@/views/resource/components/spotDetails.vue';
const spotDetailsTitle = ref('');
const detailList = ref('')
const detailList = ref('');
const store = useStore();
const router = useRouter();
const ruleFormRef = ref(null);
@@ -136,21 +136,19 @@
const query = ref({});
const loading = ref(true);
const box = ref(false);

const page = ref({
  pageSize: 20,
  currentPage: 1,
  total: 0,
  lotTypeId: '',
  createUser: '',
  areaCode:'',
  fileName:''
  areaCode: '',
  fileName: '',
});

const selectionList = ref([]);

const option = ref({
 align: 'center', 
  align: 'center',
  headerAlign: 'center',
  addBtn: false,
  tip: false,
@@ -180,8 +178,8 @@
      prop: 'file_name',
      span: 24,
      search: true,
       overHidden: true, 
        showOverflowTooltip: true,
      overHidden: true,
      showOverflowTooltip: true,
      searchSpan: 4,
      rules: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
    },
@@ -216,7 +214,7 @@
      label: '行政区划',
      prop: 'areaName',
      span: 24,
      width:180,
      width: 180,
      searchLabelWidth: 100,
      search: true,
      searchSpan: 4,
@@ -275,11 +273,11 @@

const ids = computed(() => selectionList.value.map(ele => ele.id).join(','));
// 获取行政区划
const regionalData = ref([])
const regionalData = ref([]);
const requestDockInfo = () => {
  getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => { 
    const rawData = res.data.data ? [res.data.data] : []; 
    regionalData.value = rawData; 
  getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => {
    const rawData = res.data.data ? [res.data.data] : [];
    regionalData.value = rawData;
    const filterTree = nodes => {
      return nodes.filter(node => {
        const nodeCodeStr = node.id.toString();
@@ -296,7 +294,7 @@
      });
    };
    deptTreeData.value = filterTree(rawData);
    onLoad(page.value); 
    onLoad(page.value);
  });
};
// 获取搜索数据
@@ -309,7 +307,7 @@
        uniqueMap.set(key, value);
      }
    });
        const creatorOptionuniqueMap = new Map();
    const creatorOptionuniqueMap = new Map();
    res.data.data.user_names.forEach(item => {
      const [key, value] = Object.entries(item)[0];
      if (!creatorOptionuniqueMap.has(key)) {
@@ -326,8 +324,20 @@
    }));
    regionalScope.value = res.data.data.area_codes;
    requestDockInfo();
 
    
  });
};
const allspotTypeOption = ref([]);
// 获取上传图斑类型
const getlistOfSpotTypesApi = () => {
  const searchparams = {
    current: 1,
    size: 9999,
  };
  listOfSpotTypesApi(searchparams).then(res => {
    allspotTypeOption.value = res.data.data.records.map(item => ({
      label: item.patches_type,
      value: item.id,
    }));
  });
};
// ===== watch =====
@@ -372,26 +382,25 @@
};

const rowDel = row => {
 
 ElMessageBox.confirm('确定将选择数据删除?', '提示', {
  ElMessageBox.confirm('确定将选择数据删除?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  .then(() => patchDeleteApi(row.id))  // 直接传递ID
  .then(() => {
    onLoad(page.value)
    ElMessage.success('操作成功!')
  })
    .then(() => patchDeleteApi(row.id)) // 直接传递ID
    .then(() => {
      onLoad(page.value);
      ElMessage.success('操作成功!');
    });
};

const searchReset = () => {
page.value.areaCode=''
page.value.createUser=''
page.value.fileName=''
  page.value.lotTypeId =''
page.value.currentPage=1
page.value.pageSize=20
  page.value.areaCode = '';
  page.value.createUser = '';
  page.value.fileName = '';
  page.value.lotTypeId = '';
  page.value.currentPage = 1;
  page.value.pageSize = 20;
  onLoad(page.value);
};

@@ -399,9 +408,9 @@
  page.value.currentPage = 1;
  page.value.lotTypeId = params.patches_type_desc;
  page.value.createUser = params.user_name;
  page.value.fileName=params.file_name
  page.value.areaCode=params.areaName
  page.value.createUser= params.user_name
  page.value.fileName = params.file_name;
  page.value.areaCode = params.areaName;
  page.value.createUser = params.user_name;
  onLoad(page.value);
  done();
};
@@ -443,29 +452,28 @@
    current: pageInfo.currentPage,
    size: pageInfo.pageSize,
    lotTypeId: pageInfo.lotTypeId,
    fileName:pageInfo.fileName,
    areaCode:pageInfo.areaCode,
    createUser:pageInfo.createUser
    fileName: pageInfo.fileName,
    areaCode: pageInfo.areaCode,
    createUser: pageInfo.createUser,
  };
  loading.value = true;
  spotManagementTableApi(searchparams).then(res => {
    const d = res.data.data;
    page.value.total = d.total;
    data.value = d.records
    .map(i=>({
    data.value = d.records.map(i => ({
      ...i,
      dataFrom:i.date_from === 0? '本地上传':'国土调查云',
      areaName: findAreaName(i.area_code)
      dataFrom: i.date_from === 0 ? '本地上传' : '国土调查云',
      areaName: findAreaName(i.area_code),
    }));
    loading.value = false;
    selectionClear();
  });
};
const findAreaName = (areaCode) => {
const findAreaName = areaCode => {
  const nodes = regionalData.value;
  if (!nodes || nodes.length === 0) return areaCode;

  const normalizeCode = (code) => {
  const normalizeCode = code => {
    if (!code) return '';
    const strCode = String(code).replace(/0+$/, '');
    return strCode.length >= 6 ? strCode : '';
@@ -474,7 +482,7 @@
  const findInTree = (treeNodes, needFullPath = false, parentPath = []) => {
    for (const node of treeNodes) {
      const currentPath = [...parentPath, node.name];
      

      if (normalizeCode(node.id) === targetCode) {
        return needFullPath ? currentPath.join('/') : node.name;
      }
@@ -494,7 +502,7 @@
  detailid.value = row.id;
  uploadPatchDialog.value = true;
  spotDetailsTitle.value = type === 'detail' ? '图斑详情' : '图斑编辑';
  detailList.value = row
  detailList.value = row;
};

// 跳转至图斑类型管理页面
@@ -507,7 +515,8 @@
  if (!selectionList.value.length) {
    return ElMessage.warning('请选择需要导出的数据');
  }
  exportExcel(selectionList.value?.map(i => i.id).join(',')).then(res => {
  const a = selectionList.value.map(i => Number(i.id));
  exportExcel(a).then(res => {
    const elink = document.createElement('a');
    elink.download = new Date().getTime() + '.xls';
    elink.style.display = 'none';
@@ -527,7 +536,7 @@
  if (!['kmz', 'kml', 'zip'].includes(fileSuffix)) {
    return ElMessage.error('请上传zip/kmz/kml格式的文件');
  }
  

  let data = new FormData();
  let type = t === '3' ? '' : t;
  const params = {
@@ -535,34 +544,34 @@
    fileName: ruleForm.name,
    LotTypeId: ruleForm.region,
  };
  

  Object.keys(params).forEach(key => {
    data.append(key, params[key]);
  });
  

  uploadManagementApi(data).then(res => {
    if (res.data.code !== 0) {
      return ElMessage.error('上传失败');
    }
    

    ElMessage.success('上传成功');
  

    box.value = false;

    ruleForm.name = '';
    ruleForm.region = '';
   

    if (ruleFormRef.value) {
      ruleFormRef.value.resetFields();
    }
 

    searchReset();
  });
};
provide('searchReset', searchReset);
onMounted(() => {
  getsearchManagementApi();

  getlistOfSpotTypesApi();
});
</script>