| | |
| | | > |
| | | <div class="dataCenter-table"> |
| | | <searchData |
| | | :searchjobId="searchjobId" |
| | | :switchFolders="switchFolders" |
| | | @search="searchClick" |
| | | @downFun="downloadFile" |
| | | @allDownFun="aLLDownloadFile" |
| | | @handleswitchFolders="handleswitchFolders" |
| | | ></searchData> |
| | | <!-- 文件夹 --> |
| | | <div class="fileshow" v-if="switchFolders" v-loading="loadings " element-loading-text="加载中"> |
| | | <div |
| | | class="filePackage" |
| | | v-for="(folderItem, fileIndex) in folderList" |
| | | :key="fileIndex" |
| | | @click.stop="foldersOpen(folderItem)" |
| | | > |
| | | <img :src="fileimg" alt="" /> |
| | | <el-checkbox v-model="folderItem.checked" @click.stop /> |
| | | <div class="itemName" :title="folderItem.name"> |
| | | <div>{{ folderItem.name }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 表格部分 --> |
| | | <div class="dataTable"> |
| | | <div class="dataTable" v-else> |
| | | <el-table |
| | | border |
| | | stripe |
| | |
| | | </div> |
| | | <!-- 分页 --> |
| | | <div class="pagination"> |
| | | <el-pagination |
| | | v-model:current-page="jobListParams.current" |
| | | v-model:page-size="jobListParams.size" |
| | | :page-sizes="[10, 20, 30, 40]" |
| | | background |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="total" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | <el-pagination |
| | | :current-page="switchFolders ? FolderListParams.page : jobListParams.current" |
| | | :page-size="switchFolders ? FolderListParams.page_size : jobListParams.size" |
| | | :page-sizes="[10, 20, 30, 40]" |
| | | background |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="total" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | </div> |
| | | <!-- 查看弹框 --> |
| | | <el-dialog |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import fileimg from '@/assets/images/dataCenter/filePackage.png' |
| | | import { getShowImg, getSmallImg, getzsSmallImg } from '@/utils/util'; |
| | | import { onMounted, watch } from 'vue'; |
| | | import dayjs from 'dayjs'; |
| | | import ElTooltipCopy from '@/components/ElTooltipCopy.vue'; |
| | | import videoplay from '@/assets/images/dataCenter/videoplay.png'; |
| | | import positionicon from '@/assets/images/dataCenter/positionicon.png'; |
| | | import { useStore } from 'vuex'; |
| | |
| | | deleteFileMultipleApi, |
| | | downloadApi, |
| | | updataTitleApi, |
| | | getOrthoimageInfo, getDownloadStatusApi |
| | | getOrthoimageInfo, getDownloadStatusApi,getJobIdsBySnApi |
| | | } from '@/api/dataCenter/dataCenter'; |
| | | import { getShowImg, getSmallImg, getzsSmallImg } from '@/utils/util'; |
| | | import { onMounted, watch } from 'vue'; |
| | | import dayjs from 'dayjs'; |
| | | import ElTooltipCopy from '@/components/ElTooltipCopy.vue'; |
| | | const switchFolders = ref(false) |
| | | |
| | | function bytesToMB(bytes, decimalPlaces = 2) { |
| | | if (typeof bytes !== 'number' || bytes < 0) return '0'; |
| | |
| | | orderByCreateTime: true, |
| | | searchParams: { startTime: timeRange[0], endTime: timeRange[1] }, |
| | | }); |
| | | const FolderListParams = reactive({ |
| | | page: 1, |
| | | page_size: 30, |
| | | startTime: jobListParams.searchParams.startTime?.slice(0, 10), |
| | | endTime: jobListParams.searchParams.endTime?.slice(0, 10), |
| | | waylineName:'', |
| | | |
| | | }); |
| | | const tableData = ref([]); |
| | | |
| | | // 获取列表数据 |
| | |
| | | orderByCreateTime: jobListParams.orderByCreateTime, |
| | | ...jobListParams.searchParams, |
| | | }; |
| | | |
| | | getaiImagesPageAPI(params, { |
| | | current: jobListParams.current, |
| | | size: jobListParams.size, |
| | |
| | | })); |
| | | }) |
| | | .catch(error => { |
| | | // 可选:这里可以添加错误处理逻辑 |
| | | console.error('获取数据失败:', error); |
| | | }) |
| | | .finally(() => { |
| | | loadings.value = false; // 无论成功失败都会执行 |
| | | loadings.value = false; |
| | | }); |
| | | }; |
| | | const folderList = ref([]) |
| | | // 获取文件夹数据 |
| | | const getFolderList=()=>{ |
| | | loadings.value = true; |
| | | const apiParams = { |
| | | ...FolderListParams, |
| | | }; |
| | | getJobIdsBySnApi(apiParams) |
| | | .then(res => { |
| | | folderList.value = res.data.data.records.map(i => ({ ...i, checked: false })) |
| | | total.value = res.data.data.total |
| | | }) |
| | | .finally(() => { |
| | | loadings.value = false; |
| | | }) |
| | | } |
| | | const searchjobId = ref('') |
| | | const foldersOpen = (val)=>{ |
| | | loadings.value = true; |
| | | tableData.value=[] |
| | | searchjobId.value = val.job_id |
| | | switchFolders.value = false |
| | | |
| | | } |
| | | // 获取数据时使用各自的分页参数 |
| | | const fetchData = () => { |
| | | loadings.value = true; |
| | | if (switchFolders.value) { |
| | | getFolderList(); |
| | | } else { |
| | | getaiImagesPage(); |
| | | } |
| | | }; |
| | | // 切换文件夹 |
| | | const handleswitchFolders = () => { |
| | | switchFolders.value = !switchFolders.value; |
| | | jobListParams.current = 1; |
| | | FolderListParams.page = 1; |
| | | fetchData(); |
| | | }; |
| | | // 查询 |
| | | const searchClick = params => { |
| | | jobListParams.current = 1; |
| | | jobListParams.size = 10; |
| | | jobListParams.searchParams = params; |
| | | getaiImagesPage(); |
| | | if(switchFolders.value){ |
| | | FolderListParams.page = 1; |
| | | FolderListParams.page_size = 30; |
| | | FolderListParams.startTime = params.startTime?.slice(0, 10); |
| | | FolderListParams.endTime = params.endTime?.slice(0, 10); |
| | | FolderListParams.waylineName=params.jobName, |
| | | getFolderList() |
| | | }else{ |
| | | jobListParams.current = 1; |
| | | jobListParams.size = 10; |
| | | jobListParams.searchParams = { |
| | | ...jobListParams.searchParams, |
| | | ...params |
| | | }; |
| | | getaiImagesPage() |
| | | } |
| | | }; |
| | | const handleSizeChange = val => { |
| | | jobListParams.size = val; |
| | | getaiImagesPage(); |
| | | const handleSizeChange = (val) => { |
| | | if (switchFolders.value) { |
| | | FolderListParams.page_size = val; |
| | | } else { |
| | | jobListParams.size = val; |
| | | } |
| | | fetchData(); |
| | | }; |
| | | const handleCurrentChange = val => { |
| | | jobListParams.current = val; |
| | | getaiImagesPage(); |
| | | const handleCurrentChange = (val) => { |
| | | if (switchFolders.value) { |
| | | FolderListParams.page = val; |
| | | } else { |
| | | jobListParams.current = val; |
| | | } |
| | | fetchData(); |
| | | }; |
| | | // 多选 |
| | | const selectedRows = ref([]); |
| | |
| | | }); |
| | | } |
| | | }; |
| | | // 文件夹打包下载 |
| | | async function folderDownload() { |
| | | const jobId = folderList.value.filter(i => i.checked).map(i => i.job_id) |
| | | if (!jobId?.length) return ElMessage.warning('请选择文件夹') |
| | | const res = await getDownloadStatusApi({type: 'dpsjzx'}) |
| | | if (!['CANCELLED','COMPLETED'].includes(res.data.data?.status || 'COMPLETED')){ |
| | | return ElMessage.warning('还有正在处理的') |
| | | } |
| | | await downloadApi({ wayLineJobIds:jobId, withFolder: true, resultType: 0, type:'htsjzx' }) |
| | | } |
| | | // 下载 |
| | | const downloadFile = () => { |
| | | fileDownload(); |
| | | |
| | | switchFolders.value?folderDownload(): fileDownload(); |
| | | }; |
| | | const detailDownLoad = val => { |
| | | const suffix = val.link?.split('.').pop(); |
| | |
| | | isMapInitialized.value = false; |
| | | } |
| | | function handleCellClick(row, column) { |
| | | console.log(row,column.no) |
| | | if (column.no === 5) { |
| | | navigator.clipboard.writeText(row.nickName).then(() => { |
| | | ElMessage.success('复制文件名称成功') |
| | |
| | | viewInstance.value?.viewerDestroy(); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .dataCenter-table { |
| | | height: 0; |
| | |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | .fileshow { |
| | | display: grid; |
| | | grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); |
| | | gap: 10px; |
| | | overflow: auto; |
| | | flex: 1; |
| | | min-height: 0; /* 关键:解决 flex 容器中的最小高度问题 */ |
| | | align-content: flex-start; /* 让内容从顶部开始排列 */ |
| | | .filePackage { |
| | | display: flex; |
| | | justify-content: center; |
| | | width: 260px; |
| | | height: 146px; |
| | | border-radius: 4px 4px 4px 4px; |
| | | position: relative; |
| | | background: #ddd; |
| | | cursor: pointer; |
| | | img { |
| | | width: 111px; |
| | | height: 111px; |
| | | |
| | | } |
| | | |
| | | .el-checkbox { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 6px; |
| | | } |
| | | |
| | | .itemName { |
| | | position: absolute; |
| | | bottom: 0; |
| | | left: 0; |
| | | height: 23px; |
| | | width: 100%; |
| | | padding: 0 10px; |
| | | box-sizing: border-box; |
| | | background: rgba(22, 56, 101, 0.3); |
| | | border-radius: 0px 0px 4px 4px; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | line-height: 23px; |
| | | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | |
| | | div { |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | img { |
| | | width: 14px; |
| | | height: 14px; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .pagination { |
| | | display: flex; |
| | | justify-content: end; |
| | |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </style> |