|
|
|
|
@ -1,26 +1,95 @@
@@ -1,26 +1,95 @@
|
|
|
|
|
<template> |
|
|
|
|
<div class="header">Media Files</div> |
|
|
|
|
<a-spin :spinning="loading" :delay="1000" tip="downloading" size="large"> |
|
|
|
|
<div class="header"> |
|
|
|
|
<a-button type="primary" large class="btn-primary" @click='createFile'>创建文件夹</a-button> |
|
|
|
|
<div v-show="state.selectedRowIds.length" class="other-btn"> |
|
|
|
|
<a-button large class="btn-primary">压缩并下载</a-button> |
|
|
|
|
<a-button large class="btn-primary">移动</a-button> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="search-content"> |
|
|
|
|
<a-form> |
|
|
|
|
<a-row :gutter="16"> |
|
|
|
|
<a-col :span="10"> |
|
|
|
|
<a-form-item name="timestamp"> |
|
|
|
|
<a-range-picker v-model:value="searchParam.timestamp" show-time/> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
<a-col :span="7"> |
|
|
|
|
<a-form-item name="type"> |
|
|
|
|
<a-select placeholder="所有类型"> |
|
|
|
|
<a-select-option value="searchParam.type">所有类型</a-select-option> |
|
|
|
|
</a-select> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
<a-col :span="7"> |
|
|
|
|
<a-form-item name="type"> |
|
|
|
|
<a-select placeholder="所有负载"> |
|
|
|
|
<a-select-option value="searchParam.type">所有负载</a-select-option> |
|
|
|
|
</a-select> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
<a-row :gutter="16"> |
|
|
|
|
<a-col :span="7"> |
|
|
|
|
<a-form-item name="type"> |
|
|
|
|
<a-select placeholder="标签筛选"> |
|
|
|
|
<a-select-option value="searchParam.type">所有类型</a-select-option> |
|
|
|
|
</a-select> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
<a-col :span="7"> |
|
|
|
|
<a-form-item name="name"> |
|
|
|
|
<a-input v-model:value="searchParam.name" placeholder="按文件名称搜索"> |
|
|
|
|
<template #addonAfter> |
|
|
|
|
<ZoomInOutlined /> |
|
|
|
|
</template> |
|
|
|
|
</a-input> |
|
|
|
|
</a-form-item> |
|
|
|
|
</a-col> |
|
|
|
|
</a-row> |
|
|
|
|
</a-form> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<a-spin :spinning="loading" tip="加载中..." size="large"> |
|
|
|
|
<div class="media-panel-wrapper"> |
|
|
|
|
<a-table class="media-table" :columns="columns" :data-source="mediaData.data" row-key="fingerprint" |
|
|
|
|
:pagination="paginationProp" :scroll="{ x: '100%', y: 600 }" @change="refreshData"> |
|
|
|
|
<template v-for="col in ['name', 'path']" #[col]="{ text }" :key="col"> |
|
|
|
|
<a-tooltip :title="text"> |
|
|
|
|
<a v-if="col === 'name'">{{ text }}</a> |
|
|
|
|
<span v-else>{{ text }}</span> |
|
|
|
|
</a-tooltip> |
|
|
|
|
</template> |
|
|
|
|
<template #original="{ text }"> |
|
|
|
|
{{ text }} |
|
|
|
|
<div class="bread-content"> |
|
|
|
|
<span v-for="(item,index) in breadList" :key="item">{{ item }}<span v-if="index!=breadList.length-1" >/</span></span> |
|
|
|
|
</div> |
|
|
|
|
<a-table :columns="columns" :data-source="mediaData.data" :scroll="{ x: '100%', y: 400 }" :row-selection="rowSelection" :pagination="paginationProp"> |
|
|
|
|
<template v-for="col in ['file_name']" #[col]="{ text,index }" :key="col"> |
|
|
|
|
<div @click="goDetail(mediaData.data[index])"> |
|
|
|
|
<img src="../assets/icons/folder.svg" v-if='mediaData.data[index].file_type==0'> |
|
|
|
|
<img src="../assets/icons/zip.svg" v-if='mediaData.data[index].file_type==2'> |
|
|
|
|
<a-image :width="30" :hight="30" v-if='mediaData.data[index].file_type==1' :src="mediaData.data[index].picture_url" :preview="{ |
|
|
|
|
src: mediaData.data[index].picture_url}" |
|
|
|
|
/> |
|
|
|
|
<a-tooltip :title="text"> |
|
|
|
|
<a> {{ text }}</a> |
|
|
|
|
</a-tooltip> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template #action="{ record }"> |
|
|
|
|
<a-tooltip title="download"> |
|
|
|
|
<a class="fz18" @click="downloadMedia(record)"><DownloadOutlined /></a> |
|
|
|
|
</a-tooltip> |
|
|
|
|
</template> |
|
|
|
|
</a-table> |
|
|
|
|
</template> |
|
|
|
|
</a-table> |
|
|
|
|
</div> |
|
|
|
|
</a-spin> |
|
|
|
|
<a-modal v-model:visible="state.folderOpen" :closable="false" :maskClosable="false"> |
|
|
|
|
<template #title> |
|
|
|
|
<div ref="modalTitleRef" style="width: 100%; cursor: move" class="model-title">创建文件夹</div> |
|
|
|
|
</template> |
|
|
|
|
<a-input class="ml10" |
|
|
|
|
v-model:value="state.fileName" |
|
|
|
|
placeholder="请输入文件名"></a-input> |
|
|
|
|
<template #footer> |
|
|
|
|
<div> |
|
|
|
|
<a-button large class="btn-primary" @click='state.folderOpen=false'>取消</a-button> |
|
|
|
|
<a-button type="primary" large class="btn-primary" @click='state.folderOpen=true'>确定</a-button> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</a-modal> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
@ -31,52 +100,46 @@ import { IPage } from '../api/http/type'
@@ -31,52 +100,46 @@ import { IPage } from '../api/http/type'
|
|
|
|
|
import { ELocalStorageKey } from '../types/enums' |
|
|
|
|
import { downloadFile } from '../utils/common' |
|
|
|
|
import { downloadMediaFile, getMediaFiles } from '/@/api/media' |
|
|
|
|
import { DownloadOutlined } from '@ant-design/icons-vue' |
|
|
|
|
import { |
|
|
|
|
ZoomInOutlined, |
|
|
|
|
DownloadOutlined |
|
|
|
|
} from '@ant-design/icons-vue' |
|
|
|
|
import { message, Pagination } from 'ant-design-vue' |
|
|
|
|
import { load } from '@amap/amap-jsapi-loader' |
|
|
|
|
import EventBus from '/@/event-bus' |
|
|
|
|
|
|
|
|
|
const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)! |
|
|
|
|
const loading = ref(false) |
|
|
|
|
const pathId = ref('') |
|
|
|
|
|
|
|
|
|
const searchParam = reactive({ timestamp: [], type: [], name: '' }) |
|
|
|
|
const state = reactive({ selectedRowIds: [], folderOpen: false, fileName: '' }) |
|
|
|
|
const breadList = ref(['全部文件']) |
|
|
|
|
const breadNum = ref(0) |
|
|
|
|
const columns = [ |
|
|
|
|
{ |
|
|
|
|
title: 'File Name', |
|
|
|
|
title: '文件名称', |
|
|
|
|
dataIndex: 'file_name', |
|
|
|
|
ellipsis: true, |
|
|
|
|
slots: { customRender: 'name' } |
|
|
|
|
slots: { customRender: 'file_name' } |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: 'File Path', |
|
|
|
|
dataIndex: 'file_path', |
|
|
|
|
title: '拍摄负载', |
|
|
|
|
dataIndex: 'payload', |
|
|
|
|
ellipsis: true, |
|
|
|
|
slots: { customRender: 'path' } |
|
|
|
|
}, |
|
|
|
|
// { |
|
|
|
|
// title: 'FileSize', |
|
|
|
|
// dataIndex: 'size', |
|
|
|
|
// }, |
|
|
|
|
{ |
|
|
|
|
title: 'Drone', |
|
|
|
|
title: '大小', |
|
|
|
|
dataIndex: 'drone' |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: 'Payload Type', |
|
|
|
|
dataIndex: 'payload' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: 'Original', |
|
|
|
|
dataIndex: 'is_original', |
|
|
|
|
slots: { customRender: 'original' } |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: 'Created', |
|
|
|
|
title: '创建时间', |
|
|
|
|
dataIndex: 'create_time' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: 'Action', |
|
|
|
|
title: '操作', |
|
|
|
|
key: 'operation', |
|
|
|
|
fixed: 'right', |
|
|
|
|
width: 100, |
|
|
|
|
slots: { customRender: 'action' } |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
const body: IPage = { |
|
|
|
|
@ -88,8 +151,8 @@ const paginationProp = reactive({
@@ -88,8 +151,8 @@ const paginationProp = reactive({
|
|
|
|
|
pageSizeOptions: ['20', '50', '100'], |
|
|
|
|
showQuickJumper: true, |
|
|
|
|
showSizeChanger: true, |
|
|
|
|
pageSize: 50, |
|
|
|
|
current: 1, |
|
|
|
|
page_size: 50, |
|
|
|
|
page: 1, |
|
|
|
|
total: 0 |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
@ -111,20 +174,18 @@ const mediaData = reactive({
@@ -111,20 +174,18 @@ const mediaData = reactive({
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
// 订阅消息 |
|
|
|
|
EventBus.on('getFolderFiles', (val) => { |
|
|
|
|
pathId.value = val |
|
|
|
|
|
|
|
|
|
getFiles() |
|
|
|
|
}) |
|
|
|
|
// pathId.value = val |
|
|
|
|
getFiles() |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
function getFiles () { |
|
|
|
|
getMediaFiles(workspaceId, body, pathId.value).then(res => { |
|
|
|
|
loading.value = true |
|
|
|
|
getMediaFiles(workspaceId, paginationProp).then(res => { |
|
|
|
|
mediaData.data = res.data.list |
|
|
|
|
paginationProp.total = res.data.pagination.total |
|
|
|
|
paginationProp.current = res.data.pagination.page |
|
|
|
|
console.info(mediaData.data[0]) |
|
|
|
|
paginationProp.page = res.data.pagination.page |
|
|
|
|
}).finally(() => { |
|
|
|
|
loading.value = false |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -147,29 +208,82 @@ function downloadMedia (media: MediaFile) {
@@ -147,29 +208,82 @@ function downloadMedia (media: MediaFile) {
|
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const rowSelection = { |
|
|
|
|
onChange: (selectedRowKeys:any, selectedRows:any) => { |
|
|
|
|
state.selectedRowIds = selectedRows.map((item:any) => item.father_id) |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
const createFile = () => { |
|
|
|
|
state.folderOpen = true |
|
|
|
|
} |
|
|
|
|
const goDetail = (param:any) => { |
|
|
|
|
if (param.file_type !== 0) { return } |
|
|
|
|
loading.value = true |
|
|
|
|
breadNum.value++ |
|
|
|
|
breadList.value[breadNum.value] = param.file_name |
|
|
|
|
getMediaFiles(workspaceId, paginationProp, param.father_id).then(res => { |
|
|
|
|
mediaData.data = res.data.list |
|
|
|
|
paginationProp.total = res.data.pagination.total |
|
|
|
|
paginationProp.page = res.data.pagination.page |
|
|
|
|
}).finally(() => { |
|
|
|
|
loading.value = false |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.media-panel-wrapper { |
|
|
|
|
width: 100%; |
|
|
|
|
padding: 16px; |
|
|
|
|
.bread-content{ |
|
|
|
|
background: #fff; |
|
|
|
|
padding: 16px; |
|
|
|
|
} |
|
|
|
|
.media-table { |
|
|
|
|
background: #fff; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
} |
|
|
|
|
.action-area { |
|
|
|
|
color: $primary; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.video-img{ |
|
|
|
|
width:25px; |
|
|
|
|
height: 25px; |
|
|
|
|
margin-right: 8px; |
|
|
|
|
} |
|
|
|
|
.header { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 60px; |
|
|
|
|
background: #fff; |
|
|
|
|
padding: 16px; |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
text-align: start; |
|
|
|
|
padding: 16px 16px 0 16px; |
|
|
|
|
color: #000; |
|
|
|
|
.other-btn{ |
|
|
|
|
display: inline-block; |
|
|
|
|
} |
|
|
|
|
&::v-deep{ |
|
|
|
|
.ant-btn{ |
|
|
|
|
margin-right: 8px !important; |
|
|
|
|
} |
|
|
|
|
.ant-calendar-picker{ |
|
|
|
|
width:100% !important; |
|
|
|
|
} |
|
|
|
|
.ant-form-item{ |
|
|
|
|
margin-bottom: 8px !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.btn-primary{ |
|
|
|
|
margin-bottom: 16px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.model-title{ |
|
|
|
|
text-align: center; |
|
|
|
|
border: none; |
|
|
|
|
} |
|
|
|
|
::v-deep{ |
|
|
|
|
.ant-modal-header{ |
|
|
|
|
padding: 0 0 !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
freshman-white
2 years ago
