| | |
| | | > |
| | | <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 v-if="switchFolders" class="dataTable"> |
| | | <el-table |
| | | border |
| | | class="custom-header custom-body" |
| | | v-loading="loadings" |
| | | element-loading-text="" |
| | | :data="folderList" |
| | | :data="folderList" |
| | | @selection-change="foldersSelectionChange" |
| | | > |
| | | <el-table-column type="selection" width="55" /> |
| | |
| | | }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column property="name" label="任务名称" show-overflow-tooltip /> |
| | | <el-table-column property="name" label="任务名称" show-overflow-tooltip /> |
| | | <el-table-column property="regionName" label="所属区域"> |
| | | <template #default="scope"> |
| | | <span>{{scope.row.regionName ? scope.row.regionName :'--'}}</span> |
| | | <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> |
| | | <el-table-column property="nickname" label="所属机巢" > |
| | | <template #default="scope"> |
| | | <span>{{scope.row.nickname ? scope.row.nickname :'--'}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="操作" align="center"> |
| | | <template #default="scope"> |
| | | <el-button icon="el-icon-view" type="text" @click="foldersOpen(scope.row)" |
| | |
| | | > |
| | | </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 |
| | | <el-table |
| | | border |
| | | v-loading="loadings" |
| | | element-loading-text="" |
| | | :data="tableData" |
| | |
| | | |
| | | <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 |
| | |
| | | /> |
| | | </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="任务时间" /> |
| | |
| | | > |
| | | </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"> |
| | | <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" |
| | |
| | | <!-- 查看弹框 --> |
| | | <el-dialog |
| | | v-model="dialogVisible" |
| | | class="ztzf-dialog-mange" |
| | | width="60%" |
| | | append-to-body |
| | | @close="dialogClose" |
| | |
| | | class="videoItem" |
| | | ref="videoRefs" |
| | | controls |
| | | autoplay |
| | | |
| | | :src="dialogDetailList.link" |
| | | ></video> |
| | | <!-- 地图 --> |
| | |
| | | <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) |
| | | }} |
| | |
| | | <!-- 视频预览 --> |
| | | <el-dialog |
| | | :title="currentVideoTitle" |
| | | class="ztzf-dialog-mange" |
| | | modal-class="videoDialog" |
| | | append-to-body |
| | | width="54%" |
| | |
| | | > |
| | | <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> |
| | |
| | | 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'; |
| | |
| | | startTime: jobListParams.searchParams.startTime?.slice(0, 10), |
| | | endTime: jobListParams.searchParams.endTime?.slice(0, 10), |
| | | waylineName:'', |
| | | |
| | | dockSn:'', |
| | | areaCode:'' |
| | | }); |
| | | const tableData = ref([]); |
| | | // 获取列表数据 |
| | |
| | | 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 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(); |
| | | getaiImagesPage(); |
| | | } |
| | | }; |
| | | // 切换文件夹 |
| | | const handleswitchFolders = (val) => { |
| | | const handleswitchFolders = () => { |
| | | searchjobId.value = '' |
| | | switchFolders.value = !switchFolders.value; |
| | | jobListParams.current = 1; |
| | | FolderListParams.page = 1; |
| | | fetchData(); |
| | | |
| | | |
| | | 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 => { |
| | | if(switchFolders.value){ |
| | | FolderListParams.page = 1; |
| | | FolderListParams.page_size = 10; |
| | | FolderListParams.startTime = params?.startTime?.slice(0, 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 |
| | | ...jobListParams.searchParams, |
| | | ...params |
| | | }; |
| | | getaiImagesPage() |
| | | } |
| | | }; |
| | | const handleSizeChange = (val) => { |
| | | if (switchFolders.value) { |
| | | FolderListParams.page_size = val; |
| | | FolderListParams.page_size = val; |
| | | } else { |
| | | jobListParams.size = val; |
| | | jobListParams.size = val; |
| | | } |
| | | fetchData(); |
| | | }; |
| | |
| | | folderList.value.forEach(item => { |
| | | item.checked = val.some(foldersselected => foldersselected.id === item.id); |
| | | }); |
| | | foldersSelectedRows.value = val; |
| | | foldersSelectedRows.value = val; |
| | | } |
| | | // 删除 |
| | | const deleteDetail = val => { |
| | |
| | | flatMode: false, |
| | | terrain: false, |
| | | mapFilter: true, |
| | | layerMode: 4 |
| | | }); |
| | | viewer = viewInstance.value.getViewer(); |
| | | viewerRef.value = viewer; |
| | |
| | | height: 0; |
| | | flex: 1; |
| | | overflow: auto; |
| | | :deep(.el-scrollbar__view) { |
| | | height: 100%; |
| | | } |
| | | :deep(.el-table--fit,.el-scrollbar__view) { |
| | | height: 100%; |
| | | } |
| | | |
| | | .look { |
| | | color: #1c5cff; |
| | |
| | | img { |
| | | width: 111px; |
| | | height: 111px; |
| | | |
| | | |
| | | } |
| | | |
| | | .el-checkbox { |
| | |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | line-height: 23px; |
| | | |
| | | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | |
| | | 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%; |
| | |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </style> |