From b87037236854234659cc749b2739f2cc9b910a7a Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 11 Aug 2025 15:07:16 +0800
Subject: [PATCH] feat:添加文件夹
---
src/views/dataCenter/dataCenter.vue | 182 ++++++++++++++++++++++++++++++++++++++------
1 files changed, 155 insertions(+), 27 deletions(-)
diff --git a/src/views/dataCenter/dataCenter.vue b/src/views/dataCenter/dataCenter.vue
index 2ddb099..67f0042 100644
--- a/src/views/dataCenter/dataCenter.vue
+++ b/src/views/dataCenter/dataCenter.vue
@@ -7,9 +7,10 @@
@search="searchClick"
@downFun="downloadFile"
@allDownFun="aLLDownloadFile"
+ @handleswitchFolders="handleswitchFolders"
></searchData>
<!-- 表格部分 -->
- <div class="dataTable">
+ <div class="dataTable" v-if="!switchFolders" >
<el-table
border
stripe
@@ -122,19 +123,34 @@
</el-table-column>
</el-table>
</div>
+ <!-- 文件夹 -->
+ <div class="fileshow" v-else v-loading="loadings ">
+ <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="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"
- />
- </div>
+ <el-pagination
+ :current-page="switchFolders ? FolderListParams.page : jobListParams.current"
+ :page-size="switchFolders ? FolderListParams.page_size : jobListParams.size"
+ background
+ layout="total,size prev, pager, next, jumper"
+ :total="total"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
<!-- 查看弹框 -->
<el-dialog
v-model="dialogVisible"
@@ -278,6 +294,11 @@
</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';
@@ -308,12 +329,9 @@
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';
@@ -397,6 +415,12 @@
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)
+});
const tableData = ref([]);
// 获取列表数据
@@ -406,7 +430,8 @@
orderByCreateTime: jobListParams.orderByCreateTime,
...jobListParams.searchParams,
};
-
+ console.log('jobListParams',jobListParams);
+
getaiImagesPageAPI(params, {
current: jobListParams.current,
size: jobListParams.size,
@@ -423,27 +448,76 @@
}));
})
.catch(error => {
- // 可选：这里可以添加错误处理逻辑
console.error('获取数据失败:', error);
})
.finally(() => {
- loadings.value = false; // 无论成功失败都会执行
+ loadings.value = false;
});
};
+const folderList = ref([])
+// 获取文件夹数据
+const getFolderList=()=>{
+ const apiParams = {
+ ...FolderListParams,
+ };
+ console.log('apiParams',FolderListParams);
+
+ getJobIdsBySnApi(apiParams)
+ .then(res => {
+ folderList.value = res.data.data.records.map(i => ({ ...i, checked: false }))
+ total.value = res.data.data.total
+ console.log('文件夹', res.data.data);
+ })
+ .finally(() => {
+ loadings.value = false;
+ })
+}
+// 获取数据时使用各自的分页参数
+const fetchData = () => {
+ if (switchFolders.value) {
+ getFolderList();
+ } else {
+ getaiImagesPage();
+ }
+};
+// 切换文件夹
+ const handleswitchFolders = () => {
+ switchFolders.value = !switchFolders.value;
+
+ jobListParams.current = 1;
+ FolderListParams.page = 1;
+ fetchData();
+ };
// 查询
const searchClick = params => {
+ if(switchFolders.value){
+ FolderListParams.page = 1
+ FolderListParams.page_size=30
+ FolderListParams.startTime = params.startTime?.slice(0, 10);
+ FolderListParams.endTime = params.endTime?.slice(0, 10);
+getFolderList()
+ }else{
jobListParams.current = 1;
jobListParams.size = 10;
jobListParams.searchParams = params;
- getaiImagesPage();
+ 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([]);
@@ -733,6 +807,7 @@
}
onMounted(() => {
getaiImagesPage();
+ getFolderList()
// 监听打开全景事件
EventBus.on('open-panorama', params => {
panoramaParamsShow.value = params.show;
@@ -781,7 +856,60 @@
cursor: pointer;
}
}
+ .fileshow {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ gap: 10px;
+ overflow: auto;
+ .filePackage {
+ width: 260px;
+ height: 146px;
+ border-radius: 4px 4px 4px 4px;
+ position: relative;
+ background: #ddd;
+ cursor: pointer;
+ img {
+ width: 111px;
+ height: 111px;
+ margin-left: 56px;
+ }
+ .el-checkbox {
+ position: absolute;
+ top: 0;
+ left: 6px;
+ }
+
+ .itemName {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 23px;
+ width: 100%;
+ 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;
--
Gitblit v1.9.3