From 5808f76456ca0d40de5074f132b73a5a488e3e13 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 09 Dec 2025 09:12:03 +0800
Subject: [PATCH] Merge branch 'refs/heads/feature/v9.0/9.0.1' into test
---
src/views/dataCenter/dataCenter.vue | 449 +++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 378 insertions(+), 71 deletions(-)
diff --git a/src/views/dataCenter/dataCenter.vue b/src/views/dataCenter/dataCenter.vue
index 4acc33f..130dfb8 100644
--- a/src/views/dataCenter/dataCenter.vue
+++ b/src/views/dataCenter/dataCenter.vue
@@ -4,18 +4,77 @@
>
<div class="dataCenter-table">
<searchData
+ ref="searchBoxRef"
+ :searchjobId="searchjobId"
+ :switchFolders="switchFolders"
@search="searchClick"
@downFun="downloadFile"
@allDownFun="aLLDownloadFile"
+ @handleswitchFolders="handleswitchFolders"
+ @handleBack ="handleBack"
+ :viewDetails ="viewDetails"
+
></searchData>
- <!-- 表格部分 -->
- <div class="dataTable">
- <el-table
+ <!-- 文件夹 -->
+ <div v-if="switchFolders" class="dataTable">
+ <el-table
+ border
+ class="custom-header custom-body"
v-loading="loadings"
- element-loading-text="加载中"
+ element-loading-text=""
+ :data="folderList"
+ @selection-change="foldersSelectionChange"
+ >
+ <el-table-column type="selection" width="55" />
+ <el-table-column label="序号" type="index" width="60">
+ <template #default="{ $index }">
+ {{
+ ($index + 1 + (FolderListParams.page - 1) * FolderListParams.page_size)
+ .toString()
+ .padStart(2, '0')
+ }}
+ </template>
+ </el-table-column>
+ <el-table-column property="name" label="任务名称" show-overflow-tooltip />
+ <el-table-column property="regionName" label="所属区域">
+ <template #default="scope">
+ <span>{{scope.row.city_name ? scope.row.city_name :'--'}},{{scope.row.area_name ? scope.row.area_name :'--'}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column property="nickname" label="所属机巢" >
+ <template #default="scope">
+ <span>{{scope.row.nickname ? scope.row.nickname :'--'}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button icon="el-icon-view" type="text" @click="foldersOpen(scope.row)"
+ >查看</el-button
+ >
+ </template>
+ </el-table-column>
+ <template #empty>
+ <el-empty
+ class="custom-empty"
+ :image-size="100"
+ >
+ <template #description>
+ <span class="custom-text">暂无数据</span>
+ </template>
+ </el-empty>
+ </template>
+ </el-table>
+ </div>
+ <!-- 表格部分 -->
+ <div class="dataTable" v-else>
+ <el-table
+ border
+ v-loading="loadings"
+ element-loading-text=""
:data="tableData"
class="custom-header"
@selection-change="handleSelectionChange"
+ @cell-click="handleCellClick"
>
<el-table-column type="selection" width="55" />
<el-table-column label="序号" type="index" width="60">
@@ -34,16 +93,25 @@
</el-table-column>
<el-table-column property="nestName" label="所属机巢" />
<el-table-column property="jobName" label="任务名称" show-overflow-tooltip />
- <el-table-column prop="nickName" label="文件名称" show-overflow-tooltip />
+ <el-table-column prop="nickName" label="文件名称" width="160">
+ <template #default="scope">
+ <el-tooltip-copy :content="scope.row.nickName" :showCopyText="true">
+ {{scope.row.nickName}}
+ </el-tooltip-copy>
+ </template>
+ </el-table-column>
+
<el-table-column property="link" label="缩略图" width="120">
<template #default="scope">
- <img
+ <div v-if="scope.row?.resultType === 5" class="videoItem1">
+ <img
class="quanjing"
@click="clickpanorama(scope.row)"
- v-if="scope.row?.resultType === 5"
+
:src="scope.row?.smallUrl"
alt=""
/>
+ </div>
<!-- 视频 -->
<div v-else-if="scope.row?.resultType === 1" class="videoItem1">
<img
@@ -60,20 +128,23 @@
/>
</div>
<!-- 正射 -->
- <el-image
- v-else-if="scope.row?.resultType === 4"
+ <div v-else-if="scope.row?.resultType === 4" class="videoItem1">
+ <el-image
+
:src="getzsSmallImg(scope.row?.link)"
:preview-src-list="[getzsSmallImg(scope.row?.link)]"
fit="cover"
preview-teleported
/>
- <el-image
- v-else
+ </div>
+ <div v-else class="videoItem1">
+ <el-image
:src="scope.row?.smallUrl"
:preview-src-list="[scope.row?.showUrl]"
fit="cover"
preview-teleported
/>
+ </div>
</template>
</el-table-column>
<el-table-column prop="jobTime" label="任务时间" />
@@ -110,24 +181,35 @@
>
</template>
</el-table-column>
+ <template #empty>
+ <el-empty
+ class="custom-empty"
+ :image-size="100"
+ >
+ <template #description>
+ <span class="custom-text">暂无数据</span>
+ </template>
+ </el-empty>
+ </template>
</el-table>
</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 class="pagination" v-if="!switchFolders ? tableData.length > 0 : folderList.length > 0">
+ <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
v-model="dialogVisible"
+ class="ztzf-dialog-mange"
width="60%"
append-to-body
@close="dialogClose"
@@ -148,7 +230,7 @@
class="videoItem"
ref="videoRefs"
controls
- autoplay
+
:src="dialogDetailList.link"
></video>
<!-- 地图 -->
@@ -185,7 +267,7 @@
<div>
拍摄机巢：{{ dialogDetailList?.nestName ? dialogDetailList?.nestName : '--' }}
</div>
- <div v-if="dialogDetailList?.resultType != 4">
+ <div v-if="dialogDetailList?.resultType == 0">
照片位置：{{ _.round(dialogDetailList?.longitude, 3) }},{{
_.round(dialogDetailList?.latitude, 3)
}}
@@ -236,6 +318,7 @@
<!-- 视频预览 -->
<el-dialog
:title="currentVideoTitle"
+ class="ztzf-dialog-mange"
modal-class="videoDialog"
append-to-body
width="54%"
@@ -246,11 +329,13 @@
>
<div class="video-container">
<video
- style="width: 100%"
+ style="width: 100%;height: 500px"
class="videoBox"
ref="videoRefs"
controls
- autoplay
+ preload="auto"
+ @play="handleVideoPlay"
+ @ended="handleVideoEnded(index)"
:src="currentVideoUrl"
></video>
</div>
@@ -268,6 +353,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';
@@ -277,14 +367,6 @@
import EventPopUpBox from '@/hooks/components/EventPopUpBox.vue';
import { nextTick, render } from 'vue';
import defaultIcon from '@/assets/images/dataCenter/datamap/eventCompleted.png';
-const userInfo = computed(() => store.getters.userInfo);
-const isShow = defineModel('show');
-const viewerRef = shallowRef(null);
-let viewer = null;
-const viewInstance = shallowRef(null);
-const store = useStore();
-const currentAreaPosition = ref({ height: 1987280, latitude: 27.636112, longitude: 115.732975 });
-let handler = null;
import EventBus from '@/utils/eventBus';
import dataCenterMap from '@/views/dataCenter/components/dataCenterMap.vue';
import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue'; //全景
@@ -298,12 +380,34 @@
deleteFileMultipleApi,
downloadApi,
updataTitleApi,
- getOrthoimageInfo,
+ getOrthoimageInfo, getDownloadStatusApi,getJobIdsBySnApi
} from '@/api/dataCenter/dataCenter';
-import { getShowImg, getSmallImg, getzsSmallImg } from '@/utils/util';
-import { onMounted, watch } from 'vue';
-import dayjs from 'dayjs';
+const userInfo = computed(() => store.getters.userInfo);
+const isShow = defineModel('show');
+const viewerRef = shallowRef(null);
+let viewer = null;
+const viewInstance = shallowRef(null);
+const store = useStore();
+const currentAreaPosition = ref({ height: 1987280, latitude: 27.636112, longitude: 115.732975 });
+let handler = null;
+const switchFolders = ref(false)
+// 视频播放事件处理
+const handleVideoPlay = (event) => {
+ if (event.target.playbackRate !== 0.75) {
+ event.target.playbackRate = 0.75
+ }
+}
+const handleVideoEnded = index => {
+ // 获取当前视频
+ const video = videoRefs.value[index]
+
+ // 重置视频播放时间为 0
+ video.currentTime = 0
+
+ // 重新加载视频
+ video.load()
+}
function bytesToMB(bytes, decimalPlaces = 2) {
if (typeof bytes !== 'number' || bytes < 0) return '0';
return (bytes / 1048576).toFixed(decimalPlaces) + ' MB';
@@ -386,8 +490,16 @@
orderByCreateTime: true,
searchParams: { startTime: timeRange[0], endTime: timeRange[1] },
});
+const FolderListParams = reactive({
+ page: 1,
+ page_size: 10,
+ startTime: jobListParams.searchParams.startTime?.slice(0, 10),
+ endTime: jobListParams.searchParams.endTime?.slice(0, 10),
+ waylineName:'',
+ dockSn:'',
+ areaCode:''
+});
const tableData = ref([]);
-
// 获取列表数据
const getaiImagesPage = () => {
loadings.value = true;
@@ -395,7 +507,9 @@
orderByCreateTime: jobListParams.orderByCreateTime,
...jobListParams.searchParams,
};
-
+ if( searchjobId.value === ''){
+ params.wayLineJobId = ''
+ }
getaiImagesPageAPI(params, {
current: jobListParams.current,
size: jobListParams.size,
@@ -412,27 +526,105 @@
}));
})
.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 viewDetails = ref('')
+// 文件夹查看
+const foldersOpen = (val)=>{
+ loadings.value = true;
+ tableData.value=[]
+ searchjobId.value = val.job_id
+ switchFolders.value = false
+ viewDetails.value = true
+}
+// 获取数据时使用各自的分页参数
+const fetchData = () => {
+ if (switchFolders.value) {
+ getFolderList();
+ } else {
+ getaiImagesPage();
+ }
+};
+// 切换文件夹
+ const handleswitchFolders = () => {
+ searchjobId.value = ''
+ switchFolders.value = !switchFolders.value;
+ jobListParams.current = 1;
+ FolderListParams.page = 1;
+
+ searchBoxRef.value?.handleReset();
+ fetchData();
+ };
+ const handleBack =()=>{
+ searchjobId.value = ''
+ switchFolders.value = true
+ viewDetails.value = false
+ jobListParams.current = 1;
+ FolderListParams.page = 1;
+ fetchData();
+
+ }
+ const searchBoxRef = ref(null);
+
// 查询
const searchClick = params => {
- jobListParams.current = 1;
- jobListParams.size = 10;
- jobListParams.searchParams = params;
- getaiImagesPage();
+ if(switchFolders.value){
+ FolderListParams.page = 1;
+ FolderListParams.page_size = 10;
+ FolderListParams.startTime = params?.startTime?.slice(0, 10);
+ FolderListParams.endTime = params?.endTime?.slice(0, 10);
+ FolderListParams.waylineName=params?.jobName,
+ FolderListParams.dockSn = params?.deviceSn
+ FolderListParams.areaCode = params?.areaCode
+ 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([]);
@@ -441,9 +633,16 @@
tableData.value.forEach(item => {
item.checked = val.some(selected => selected.id === item.id);
});
-
selectedRows.value = val;
};
+// 文件夹多选
+const foldersSelectedRows = ref([]);
+const foldersSelectionChange =(val)=>{
+ folderList.value.forEach(item => {
+ item.checked = val.some(foldersselected => foldersselected.id === item.id);
+ });
+ foldersSelectedRows.value = val;
+}
// 删除
const deleteDetail = val => {
ElMessageBox.confirm('您确定删除吗?', '提示', {
@@ -473,7 +672,7 @@
a.click();
document.body.removeChild(a);
}
-const fileDownload = () => {
+const fileDownload = async () => {
const list = selectedRows.value.filter(i => i.checked);
if (!list?.length) return ElMessage.warning('请选择文件');
if (list.length === 1) {
@@ -494,18 +693,31 @@
jobName: '',
resultType: '',
startTime: '',
- wayLineJobIds: [],
+ type:'htsjzx'
};
-
- downloadApi(aaa).then(res => {
- aLinkDownload(res.data.data, `sjzx-file-pack-${dayjs().format('YYYYMMDDHHmmss')}.zip`);
+ const res = await getDownloadStatusApi({type: 'htsjzx'})
+ if (!['CANCELLED','COMPLETED'].includes(res.data.data?.status || 'COMPLETED')){
+ loading.close()
+ return ElMessage.warning('还有正在处理的')
+ }
+ downloadApi(aaa).finally(res => {
loading.close();
});
}
};
+// 文件夹打包下载
+async function folderDownload() {
+ const jobId = foldersSelectedRows.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();
@@ -606,6 +818,7 @@
flatMode: false,
terrain: false,
mapFilter: true,
+ layerMode: 4
});
viewer = viewInstance.value.getViewer();
viewerRef.value = viewer;
@@ -709,6 +922,13 @@
viewer = null;
isMapInitialized.value = false;
}
+function handleCellClick(row, column) {
+ if (column.no === 5) {
+ navigator.clipboard.writeText(row.nickName).then(() => {
+ ElMessage.success('复制文件名称成功')
+ })
+ }
+}
onMounted(() => {
getaiImagesPage();
// 监听打开全景事件
@@ -724,7 +944,6 @@
viewInstance.value?.viewerDestroy();
});
</script>
-
<style scoped lang="scss">
.dataCenter-table {
height: 0;
@@ -736,6 +955,12 @@
height: 0;
flex: 1;
overflow: auto;
+ :deep(.el-scrollbar__view) {
+ height: 100%;
+ }
+ :deep(.el-table--fit,.el-scrollbar__view) {
+ height: 100%;
+ }
.look {
color: #1c5cff;
@@ -759,7 +984,67 @@
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;
@@ -773,17 +1058,30 @@
width: 76px;
height: 72px;
}
+
.videoItem1 {
- .playBox {
- width: 20px;
- height: 20px;
- position: absolute;
- top: 46%;
- left: 43%;
- transform: translate(-50%, -50%);
- cursor: pointer;
- }
- }
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+
+ min-height: 80px;
+}
+
+.playBox {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ z-index: 1;
+}
.videoDialog :deep(.el-dialog) {
height: 600px;
width: 54%;
@@ -808,8 +1106,12 @@
:deep(.custom-header th.el-table__cell) {
color: rgba(0, 0, 0, 0.85);
+ background: #fafafa;
+ height: 60px !important;
}
-
+:deep(.custom-body .el-table__body tr) {
+ height: 53px !important;
+}
// 弹框
.detailContainer {
display: flex;
@@ -844,6 +1146,11 @@
.editname {
cursor: pointer;
+ :deep(.el-icon) {
+ width: 20px; // 调整图标宽度（默认通常14px左右）
+ height: 20px; // 调整图标高度（与宽度保持一致）
+ font-size: 20px; // 部分图标可能依赖font-size控制大小，同步设置
+ }
}
.inputEdit {
--
Gitblit v1.9.3