From 02409bfbe15f22fc3b5dccadabfd860a660a49d9 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 11 Oct 2025 10:37:14 +0800
Subject: [PATCH] feat: 名称修改
---
src/views/dataCenter/dataCenter.vue | 334 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 243 insertions(+), 91 deletions(-)
diff --git a/src/views/dataCenter/dataCenter.vue b/src/views/dataCenter/dataCenter.vue
index 79d8ead..2a53060 100644
--- a/src/views/dataCenter/dataCenter.vue
+++ b/src/views/dataCenter/dataCenter.vue
@@ -4,35 +4,66 @@
>
<div class="dataCenter-table">
<searchData
- :jobName ="jobName"
+ ref="searchBoxRef"
+ :searchjobId="searchjobId"
:switchFolders="switchFolders"
+ :switchStar = "switchStar"
@search="searchClick"
@downFun="downloadFile"
@allDownFun="aLLDownloadFile"
@handleswitchFolders="handleswitchFolders"
+ @handleswitchList="handleswitchList"
+ @handleStartList="handleStartList"
+ @handleBack ="handleBack"
+ :viewDetails ="viewDetails"
+
></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)"
+ <div v-if="switchFolders" class="dataTable">
+ <el-table
+
+ class="custom-header custom-body"
+ v-loading="loadings"
+ 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="recordName" 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
>
- <img :src="fileimg" alt="" />
- <el-checkbox v-model="folderItem.checked" @click.stop />
- <div class="itemName" :title="folderItem.name">
- <div>{{ folderItem.name }}</div>
- </div>
- </div>
+ </template>
+ </el-table-column>
+ </el-table>
</div>
<!-- 表格部分 -->
- <div class="dataTable" v-else v-loading="loadings" element-loading-text="加载中">
+ <div class="dataTable" v-else>
<el-table
border
- stripe
v-loading="loadings"
- element-loading-text="加载中"
+ element-loading-text=""
:data="tableData"
class="custom-header"
@selection-change="handleSelectionChange"
@@ -117,7 +148,7 @@
<span>{{ resultTypeMap[row?.resultType] }}</span>
</template>
</el-table-column>
- <el-table-column label="操作" width="200" align="center">
+ <el-table-column label="操作" width="240" align="center">
<template #default="scope">
<el-button icon="el-icon-view" type="text" @click="lookDetail(scope.row)"
>查看</el-button
@@ -136,15 +167,29 @@
>
<img :src="positionicon" class="custom-icon" />定位</el-button
>
+ <el-button type="text" @click="handleStar(scope.row)"><el-icon><Star /></el-icon>{{ scope.row.isFavorite ? '取消收藏':'收藏' }}</el-button>
+ <el-popover
+ placement="top-start"
+ title="扫二维码分享"
+ :width="148"
+ trigger="click"
+ popper-class="custom-qrcode-popover-share"
+ @show="handleShare(scope.row)"
+ >
+ <template #reference>
+ <el-button type="text"><el-icon><Share /></el-icon>分享</el-button>
+ </template>
+ <div class="qrcode-content">
+ <div class="myQrCode" :id="`myQrCode-${scope.row.id}`" :ref="setQrCodeRef(scope.row.id)"></div>
+ </div>
+ </el-popover>
</template>
</el-table-column>
</el-table>
</div>
-
-
<!-- 分页 -->
<div class="pagination">
- <el-pagination
+ <el-pagination
:current-page="switchFolders ? FolderListParams.page : jobListParams.current"
:page-size="switchFolders ? FolderListParams.page_size : jobListParams.size"
:page-sizes="[10, 20, 30, 40]"
@@ -154,7 +199,7 @@
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
- </div>
+ </div>
<!-- 查看弹框 -->
<el-dialog
v-model="dialogVisible"
@@ -312,19 +357,12 @@
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'; //全景
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
import searchData from '@/views/dataCenter/components/searchData.vue';
+import QRCode from 'qrcodejs2-fix'
import fy1 from '@/assets/images/dataCenter/1.jpeg';
import _ from 'lodash';
import {
@@ -333,10 +371,18 @@
deleteFileMultipleApi,
downloadApi,
updataTitleApi,
- getOrthoimageInfo, getDownloadStatusApi,getJobIdsBySnApi
+ getOrthoimageInfo, getDownloadStatusApi,getJobIdsBySnApi, starAdd, cancelStar
} from '@/api/dataCenter/dataCenter';
+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 switchStar = ref(false)
function bytesToMB(bytes, decimalPlaces = 2) {
if (typeof bytes !== 'number' || bytes < 0) return '0';
return (bytes / 1048576).toFixed(decimalPlaces) + ' MB';
@@ -417,18 +463,18 @@
current: 1,
size: 10,
orderByCreateTime: true,
- searchParams: { startTime: timeRange[0], endTime: timeRange[1] },
+ searchParams: { startTime: timeRange[0], endTime: timeRange[1], isFavorite: false },
});
const FolderListParams = reactive({
- page: 1,
- page_size: 30,
+ page: 1,
+ page_size: 10,
startTime: jobListParams.searchParams.startTime?.slice(0, 10),
endTime: jobListParams.searchParams.endTime?.slice(0, 10),
- waylineName:'',
-
+ waylineName:'',
+ dockSn:'',
+ areaCode:''
});
const tableData = ref([]);
-
// 获取列表数据
const getaiImagesPage = () => {
loadings.value = true;
@@ -436,6 +482,9 @@
orderByCreateTime: jobListParams.orderByCreateTime,
...jobListParams.searchParams,
};
+ if( searchjobId.value === ''){
+ params.wayLineJobId = ''
+ }
getaiImagesPageAPI(params, {
current: jobListParams.current,
size: jobListParams.size,
@@ -455,83 +504,109 @@
console.error('获取数据失败:', error);
})
.finally(() => {
- loadings.value = false;
+ loadings.value = false;
});
};
+
const folderList = ref([])
// 获取文件夹数据
const getFolderList=()=>{
- loadings.value = true;
- const apiParams = {
- ...FolderListParams,
- };
- getJobIdsBySnApi(apiParams)
+ 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
+ total.value = res.data.data.total
})
.finally(() => {
- loadings.value = false;
+ loadings.value = false;
})
}
-const jobName = ref('')
+const searchjobId = ref('')
+const viewDetails = ref('')
+// 文件夹查看
const foldersOpen = (val)=>{
-loadings.value = true;
-tableData.value=[]
-jobName.value = val.name
-switchFolders.value = false
-
+ loadings.value = true;
+ tableData.value=[]
+ searchjobId.value = val.job_id
+ switchFolders.value = false
+ viewDetails.value = true
}
// 获取数据时使用各自的分页参数
const fetchData = () => {
- loadings.value = true;
if (switchFolders.value) {
getFolderList();
} else {
getaiImagesPage();
-
-
}
};
+// 列表
+function handleswitchList() {
+ switchFolders.value = false;
+ switchStar.value = false;
+ jobListParams.current = 1;
+ jobListParams.size = 10;
+ jobListParams.searchParams.isFavorite = false;
+ getaiImagesPage();
+}
// 切换文件夹
const handleswitchFolders = () => {
- switchFolders.value = !switchFolders.value;
+ searchjobId.value = ''
+ switchFolders.value = true;
+ switchStar.value = false;
jobListParams.current = 1;
FolderListParams.page = 1;
- fetchData();
+
+ searchBoxRef.value?.handleReset();
+ fetchData();
};
-// 查询
-const searchClick = async (params) => {
- loadings.value = true;
- total.value = 0;
-
- 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,
- await getFolderList();
- } else {
- // 表格
+ const handleBack =()=>{
+ searchjobId.value = ''
+ switchFolders.value = true
+ viewDetails.value = false
jobListParams.current = 1;
- jobListParams.size = 10;
- jobListParams.searchParams = {
- ...jobListParams.searchParams,
- ...params
- };
- await getaiImagesPage();
+ FolderListParams.page = 1;
+ fetchData();
+ }
+ const searchBoxRef = ref(null);
+// 收藏列表
+const handleStartList = () => {
+ switchFolders.value = false;
+ switchStar.value = true;
+ jobListParams.current = 1;
+ jobListParams.size = 10;
+ jobListParams.searchParams.isFavorite = true;
+ getaiImagesPage();
+}
+// 查询
+const searchClick = params => {
+ 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()
}
-
- loadings.value = false;
};
const handleSizeChange = (val) => {
if (switchFolders.value) {
- FolderListParams.page_size = val;
+ FolderListParams.page_size = val;
} else {
- jobListParams.size = val;
+ jobListParams.size = val;
}
fetchData();
};
@@ -550,9 +625,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('您确定删除吗?', '提示', {
@@ -617,7 +699,7 @@
};
// 文件夹打包下载
async function folderDownload() {
- const jobId = folderList.value.filter(i => i.checked).map(i => i.job_id)
+ 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')){
@@ -627,7 +709,6 @@
}
// 下载
const downloadFile = () => {
-
switchFolders.value?folderDownload(): fileDownload();
};
const detailDownLoad = val => {
@@ -729,6 +810,7 @@
flatMode: false,
terrain: false,
mapFilter: true,
+ layerMode: 4
});
viewer = viewInstance.value.getViewer();
viewerRef.value = viewer;
@@ -839,6 +921,57 @@
})
}
}
+
+// 收藏 or 取消收藏
+function handleStar(row) {
+ if (row.isFavorite) {
+ cancelStar(row.id).then(res => {
+ ElMessage.success('取消收藏成功')
+ getaiImagesPage();
+ })
+ } else {
+ starAdd({ attachId: row.id }).then(res => {
+ ElMessage.success('收藏成功')
+ getaiImagesPage();
+ })
+ }
+}
+
+// 分享
+const myQrCode = ref(null)
+let qrCodeInstance = null
+
+const qrCodeRefs = ref({});
+
+// 设置动态ref的方法
+const setQrCodeRef = (id) => (el) => {
+ if (el) {
+ qrCodeRefs.value[id] = el;
+ }
+};
+
+async function handleShare(row) {
+ try {
+ await nextTick();
+ const qrCodeElement = qrCodeRefs.value[row.id]
+
+ if (qrCodeInstance) {
+ qrCodeInstance.clear();
+ qrCodeInstance = null;
+ qrCodeElement.innerHTML = '';
+ }
+ // await nextTick();
+ qrCodeInstance = new QRCode(qrCodeElement, {
+ width: 130,
+ height: 130,
+ text: row.link,
+ });
+ qrCodeElement.removeAttribute('title');
+ } catch (error) {
+ console.error('生成二维码失败:', error);
+ }
+}
+
onMounted(() => {
getaiImagesPage();
// 监听打开全景事件
@@ -854,7 +987,11 @@
viewInstance.value?.viewerDestroy();
});
</script>
-
+<style lang="scss">
+.custom-qrcode-popover-share {
+ width: 120px;
+}
+</style>
<style scoped lang="scss">
.dataCenter-table {
height: 0;
@@ -890,11 +1027,16 @@
}
}
.fileshow {
- display: grid;
- grid-template-columns: repeat(6, 1fr);
- gap: 10px;
+ 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;
@@ -904,7 +1046,7 @@
img {
width: 111px;
height: 111px;
- margin-left: 56px;
+
}
.el-checkbox {
@@ -919,6 +1061,8 @@
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;
@@ -926,7 +1070,7 @@
font-size: 14px;
color: #ffffff;
line-height: 23px;
-
+
display: flex;
align-items: center;
justify-content: space-between;
@@ -992,8 +1136,11 @@
: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;
@@ -1028,6 +1175,11 @@
.editname {
cursor: pointer;
+ :deep(.el-icon) {
+ width: 20px; // 调整图标宽度（默认通常14px左右）
+ height: 20px; // 调整图标高度（与宽度保持一致）
+ font-size: 20px; // 部分图标可能依赖font-size控制大小，同步设置
+ }
}
.inputEdit {
--
Gitblit v1.9.3