| | |
| | | > |
| | | </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> |
| | | <!-- 表格部分 --> |
| | |
| | | |
| | | <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" |
| | |
| | | class="videoItem" |
| | | ref="videoRefs" |
| | | controls |
| | | autoplay |
| | | |
| | | :src="dialogDetailList.link" |
| | | ></video> |
| | | <!-- 地图 --> |
| | |
| | | > |
| | | <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'; |
| | |
| | | height: 0; |
| | | flex: 1; |
| | | overflow: auto; |
| | | :deep(.el-scrollbar__view) { |
| | | height: 100%; |
| | | } |
| | | :deep(.el-table--fit,.el-scrollbar__view) { |
| | | height: 100%; |
| | | } |
| | | |
| | | .look { |
| | | color: #1c5cff; |
| | |
| | | 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%; |