| | |
| | | <template> |
| | | <div class="header">Media Files</div> |
| | | <div class="header">媒体文件</div> |
| | | <a-spin :spinning="loading" :delay="1000" tip="downloading" size="large"> |
| | | <div class="media-panel-wrapper"> |
| | | <a-table class="media-table" :columns="columns" :data-source="mediaData.data" row-key="fingerprint" |
| | |
| | | import { downloadFile } from '../utils/common' |
| | | import { downloadMediaFile, getMediaFiles } from '/@/api/media' |
| | | import { DownloadOutlined } from '@ant-design/icons-vue' |
| | | import { Pagination } from 'ant-design-vue' |
| | | import { message, Pagination } from 'ant-design-vue' |
| | | import { load } from '@amap/amap-jsapi-loader' |
| | | |
| | | const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)! |
| | |
| | | |
| | | const columns = [ |
| | | { |
| | | title: 'File Name', |
| | | title: '文件名称', |
| | | dataIndex: 'file_name', |
| | | ellipsis: true, |
| | | slots: { customRender: 'name' } |
| | | }, |
| | | { |
| | | title: 'File Path', |
| | | dataIndex: 'file_path', |
| | | ellipsis: true, |
| | | slots: { customRender: 'path' } |
| | | }, |
| | | // { |
| | | // title: 'FileSize', |
| | | // dataIndex: 'size', |
| | | // title: '文件路径', |
| | | // dataIndex: 'file_path', |
| | | // ellipsis: true, |
| | | // slots: { customRender: 'path' } |
| | | // }, |
| | | { |
| | | title: 'Drone', |
| | | dataIndex: 'drone' |
| | | }, |
| | | { |
| | | title: 'Payload Type', |
| | | title: '拍摄负载', |
| | | dataIndex: 'payload' |
| | | }, |
| | | { |
| | | title: 'Original', |
| | | dataIndex: 'is_original', |
| | | slots: { customRender: 'original' } |
| | | title: '大小', |
| | | dataIndex: 'size', |
| | | }, |
| | | // { |
| | | // title: '拍摄负载', |
| | | // dataIndex: 'drone' |
| | | // }, |
| | | // { |
| | | // title: 'Original', |
| | | // dataIndex: 'is_original', |
| | | // slots: { customRender: 'original' } |
| | | // }, |
| | | { |
| | | title: 'Created', |
| | | title: '创建时间', |
| | | dataIndex: 'create_time' |
| | | }, |
| | | { |
| | | title: 'Action', |
| | | title: '操作', |
| | | slots: { customRender: 'action' } |
| | | } |
| | | ] |
| | |
| | | file_name: string, |
| | | file_path: string, |
| | | create_time: string, |
| | | file_id: string, |
| | | } |
| | | |
| | | const mediaData = reactive({ |
| | |
| | | }) |
| | | |
| | | onMounted(() => { |
| | | getFiles() |
| | | // getFiles() |
| | | }) |
| | | |
| | | function getFiles () { |
| | |
| | | |
| | | function downloadMedia (media: MediaFile) { |
| | | loading.value = true |
| | | downloadMediaFile(workspaceId, media.fingerprint).then(res => { |
| | | if (res.code && res.code !== 0) { |
| | | downloadMediaFile(workspaceId, media.file_id).then(res => { |
| | | if (!res) { |
| | | return |
| | | } |
| | | const suffix = media.file_name.substring(media.file_name.lastIndexOf('.')) |
| | | const data = new Blob([res.data], { type: suffix === '.mp4' ? 'video/mp4' : 'image/jpeg' }) |
| | | const data = new Blob([res]) |
| | | downloadFile(data, media.file_name) |
| | | }).finally(() => { |
| | | loading.value = false |