From a5ad16639fd8afa38e0bd4acf4991c5c358b52d8 Mon Sep 17 00:00:00 2001
From: rain <1679827795@qq.com>
Date: Sat, 01 Mar 2025 17:40:02 +0800
Subject: [PATCH] 媒体文件页面
---
src/api/resource/media.js | 0
src/views/resource/media.vue | 252 +++++++++++++++++++++++++------------------------
2 files changed, 128 insertions(+), 124 deletions(-)
diff --git a/src/api/media/media.js b/src/api/resource/media.js
similarity index 100%
rename from src/api/media/media.js
rename to src/api/resource/media.js
diff --git a/src/views/resource/media.vue b/src/views/resource/media.vue
index 205dfe0..a09389e 100644
--- a/src/views/resource/media.vue
+++ b/src/views/resource/media.vue
@@ -21,110 +21,122 @@
</template>
<script>
-import { getMedia, deleteAllFile } from '@/api/media/media'; // 导入媒体相关的 API 方法
-import { getAirportList } from '@/api/device/device'; // 导入设备相关的 API 方法
-import { mapGetters } from 'vuex'; // 从 Vuex 导入 mapGetters
-import func from '@/utils/func'; // 导入工具函数
+import { getMedia, deleteAllFile } from '@/api/resource/media';
+import { getAirportList } from '@/api/device/device';
+import { mapGetters } from 'vuex';
+import func from '@/utils/func';
export default {
data() {
+ // 计算默认的开始和结束日期
+ const endDate = new Date(); // 当前日期
+ const startDate = new Date(); // 一个月前的日期
+ startDate.setMonth(startDate.getMonth() - 1);
+
+ // 格式化为 YYYY-MM-DD 字符串，与 valueFormat 一致
+ const defaultStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;
+ const defaultEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`;
+
return {
- form: {}, // 表单数据对象
- query: {}, // 搜索查询条件
- loading: true, // 表格加载状态
- page: { // 分页数据
- pageSize: 10, // 每页显示数量
- currentPage: 1, // 当前页码
- total: 0, // 总记录数
+ form: {},
+ // 初始化 query，设置默认时间范围
+ query: {
+ daterange: [defaultStartDate, defaultEndDate]
},
- taskBox: false, // 控制弹窗显示状态
- selectionList: [], // 选中的行数据列表
- selectedWorkspaceId: null, // 选中的工作区 ID
- option: { // Avue CRUD 表格配置
- height: 'auto', // 表格高度自动调整
- calcHeight: 32, // 计算高度的偏移量
- tip: false, // 不显示提示
- searchShow: true, // 显示搜索栏
- searchMenuSpan: 6,// 搜索栏宽度占比
- border: true, // 显示边框
- index: true, // 显示序号列
- viewBtn: true, // 显示查看按钮
- selection: true, // 允许多选
- dialogClickModal: false, // 对话框点击遮罩不关闭
- delBtn: false, // 不显示默认删除按钮
- column: [ // 表格列配置
+ loading: true,
+ page: {
+ pageSize: 10,
+ currentPage: 1,
+ total: 0,
+ },
+ taskBox: false,
+ selectionList: [],
+ selectedWorkspaceId: null,
+ option: {
+ height: 'auto',
+ calcHeight: 32,
+ tip: false,
+ searchShow: true,
+ searchMenuSpan: 6,
+ border: true,
+ index: true,
+ viewBtn: true,
+ selection: true,
+ dialogClickModal: false,
+ delBtn: false,
+ column: [
{
- label: '机场选择', // 列标题
- prop: 'airportNickname', // 数据字段
- type: 'select', // 下拉选择类型
- search: true, // 可搜索
- searchSpan: 5, // 搜索栏宽度占比
- dicData: [], // 下拉选项数据
- props: { // 下拉选项映射
+ label: '机场选择',
+ prop: 'airportNickname',
+ type: 'select',
+ search: true,
+ searchSpan: 5,
+ dicData: [],
+ props: {
label: 'nickname',
value: 'nickname',
},
- hide: true, // 默认隐藏
+ hide: true,
},
{
- label: '创建日期', // 列标题
- prop: 'daterange', // 数据字段
- type: 'daterange', // 日期范围选择类型
- search: true, // 可搜索
- searchRange: true, // 支持范围搜索
- searchSpan: 6, // 搜索栏宽度占比
- format: 'YYYY-MM-DD', // 显示格式
- valueFormat: 'YYYY-MM-DD', // 值格式
- startPlaceholder: '开始时间', // 开始时间占位符
- endPlaceholder: '结束时间', // 结束时间占位符
- viewDisplay: false, // 查看时不显示
- hide: true, // 默认隐藏
- value: [new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date()], // 默认值：过去一个月至今
+ label: '创建日期',
+ prop: 'daterange',
+ type: 'daterange',
+ search: true,
+ searchRange: true,
+ searchSpan: 6,
+ format: 'YYYY-MM-DD',
+ valueFormat: 'YYYY-MM-DD',
+ startPlaceholder: '开始时间',
+ endPlaceholder: '结束时间',
+ viewDisplay: false,
+ hide: true,
+ searchValue: [defaultStartDate, defaultEndDate] // 设置搜索表单默认值，确保显示
},
- { label: '任务名称', prop: 'job_name' }, // 任务名称列
- { label: '文件名称', prop: 'file_name' }, // 文件名称列
- { label: '拍摄时间', prop: 'create_time' }, // 拍摄时间列
- { label: '文件路径', prop: 'object_key' }, // 文件路径列
- { label: '设备负载', prop: 'payload' }, // 设备负载列
+ { label: '任务名称', prop: 'job_name' },
+ { label: '文件名称', prop: 'file_name' },
+ { label: '拍摄时间', prop: 'create_time' },
+ { label: '文件路径', prop: 'object_key' },
+ { label: '设备负载', prop: 'payload' },
],
},
- data: [], // 表格数据
- taskForm: {}, // 弹窗表单数据
- taskOption: { // 弹窗表单配置
- submitBtn: false, // 不显示提交按钮
- emptyBtn: false, // 不显示清空按钮
- column: [ // 表单列配置
+ data: [],
+ taskForm: {},
+ taskOption: {
+ submitBtn: false,
+ emptyBtn: false,
+ column: [
{
- label: '任务上传', // 上传字段标题
- prop: 'taskFile', // 数据字段
- type: 'upload', // 上传类型
- drag: true, // 支持拖拽上传
- loadText: '任务上传中，请稍等', // 上传中提示
- span: 24, // 占用整行
- propsHttp: { // HTTP 响应映射
+ label: '任务上传',
+ prop: 'taskFile',
+ type: 'upload',
+ drag: true,
+ loadText: '任务上传中，请稍等',
+ span: 24,
+ propsHttp: {
res: 'data',
},
- action: '/blade-resource/oss/endpoint/put-file-task', // 上传接口地址
+ action: '/blade-resource/oss/endpoint/put-file-task',
},
],
},
- domainUrl: '', // 媒体文件域名，从 API 获取
+ domainUrl: '',
};
},
computed: {
- func() { // 计算属性，返回工具函数
+ func() {
return func;
},
- ...mapGetters(['permission']), // 从 Vuex 获取权限数据
- permissionList() { // 计算权限列表
+ ...mapGetters(['permission']),
+ permissionList() {
return {
- addBtn: false, // 不显示添加按钮
- editBtn: false, // 不显示编辑按钮
- viewBtn: this.validData(this.permission.attach_view, false), // 查看权限
- delBtn: this.validData(this.permission.attach_delete, false), // 删除权限
+ addBtn: false,
+ editBtn: false,
+ viewBtn: this.validData(this.permission.attach_view, false),
+ delBtn: this.validData(this.permission.attach_delete, false),
};
},
- ids() { // 计算选中的行 ID 列表
+ ids() {
let ids = [];
this.selectionList.forEach(ele => {
ids.push(ele.id);
@@ -132,12 +144,13 @@
return ids.join(',');
},
},
- mounted() { // 组件挂载时执行
- this.loadAirportList(); // 加载机场列表
- this.onLoad(this.page); // 加载初始数据
+ mounted() {
+ this.loadAirportList();
+ // 初始化时强制设置搜索表单默认值并加载数据
+ this.$refs.crud.setSearch({ daterange: this.query.daterange });
+ this.onLoad(this.page, this.query);
},
methods: {
- // 加载机场下拉列表数据
loadAirportList() {
getAirportList().then(res => {
const airportData = res.data.data || [];
@@ -152,17 +165,14 @@
console.error('加载机场列表时出错:', error);
});
},
- // 打开上传弹窗
handleUpload() {
this.taskBox = true;
},
- // 处理上传完成后的操作
uploadAfter(res, done) {
- this.taskBox = false; // 关闭弹窗
- this.refreshChange(); // 刷新表格
- done(); // 完成上传
+ this.taskBox = false;
+ this.refreshChange();
+ done();
},
- // 删除单行数据
handleRowDelete(row) {
this.$confirm('确定删除此文件?', {
confirmButtonText: '确定',
@@ -170,10 +180,10 @@
type: 'warning',
})
.then(() => {
- return deleteAllFile(row.id); // 调用删除 API
+ return deleteAllFile(row.id);
})
.then(() => {
- this.onLoad(this.page); // 重新加载数据
+ this.onLoad(this.page);
this.$message({
type: 'success',
message: '删除成功!',
@@ -187,7 +197,6 @@
});
});
},
- // 删除行（由 avue-crud 触发）
rowDel(row) {
this.$confirm('确定将选择数据及对应的文件删除?', {
confirmButtonText: '确定',
@@ -195,23 +204,31 @@
type: 'warning',
})
.then(() => {
- return deleteAllFile(row.id); // 调用删除 API
+ return deleteAllFile(row.id);
})
.then(() => {
- this.onLoad(this.page); // 重新加载数据
+ this.onLoad(this.page);
this.$message({
type: 'success',
message: '操作成功!',
});
});
},
- // 重置搜索条件
searchReset() {
- this.query = {};
+ // 重置时恢复默认值
+ const endDate = new Date();
+ const startDate = new Date();
+ startDate.setMonth(startDate.getMonth() - 1);
+ const defaultStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;
+ const defaultEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`;
+ this.query = {
+ daterange: [defaultStartDate, defaultEndDate]
+ };
this.selectedWorkspaceId = null;
- this.onLoad(this.page);
+ // 更新搜索表单显示
+ this.$refs.crud.setSearch({ daterange: this.query.daterange });
+ this.onLoad(this.page, this.query);
},
- // 处理搜索条件变化
searchChange(params, done) {
this.query = params;
this.page.currentPage = 1;
@@ -223,35 +240,29 @@
this.onLoad(this.page, params);
done();
},
- // 更新选中的行列表
selectionChange(list) {
this.selectionList = list;
},
- // 清空选择
selectionClear() {
this.selectionList = [];
this.$refs.crud.toggleSelection();
},
- // 处理页码变化
currentChange(currentPage) {
this.page.currentPage = currentPage;
this.onLoad(this.page, this.query);
},
- // 处理每页数量变化
sizeChange(pageSize) {
this.page.pageSize = pageSize;
this.onLoad(this.page, this.query);
},
- // 刷新表格数据
refreshChange() {
this.onLoad(this.page, this.query);
},
- // 从 API 加载表格数据
onLoad(page, params = {}) {
this.loading = true;
const { daterange } = params;
- let create_time = this.create_time;
- let end_time = this.end_time;
+ let create_time = null; // 修改为 null，避免未定义变量引用
+ let end_time = null;
if (daterange && Array.isArray(daterange) && daterange.length === 2) {
const startStr = daterange[0];
@@ -291,7 +302,7 @@
airportNickname: item.airportNickname,
id: item.id,
}));
- this.domainUrl = data.data.list.length > 0 ? data.data.list[0].domain_url : 'http://localhost:2888/manage/resource'; // 设置域名
+ this.domainUrl = data.data.list.length > 0 ? data.data.list[0].domain_url : 'http://localhost:2888/manage/resource';
} else {
this.data = [];
}
@@ -303,7 +314,6 @@
console.error('加载媒体数据时出错:', error);
});
},
- // 格式化时间戳为可读日期
formatCreateTime(createTime) {
if (typeof createTime !== 'number' || isNaN(createTime)) {
return '';
@@ -321,36 +331,31 @@
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
- // 处理查看行（打开图片或视频）
handleRowView(row) {
- const mediaUrl = this.domainUrl + row.object_key; // 拼接完整媒体 URL
- const mediaType = this.getMediaType(row.object_key); // 判断媒体类型
+ const mediaUrl = this.domainUrl + row.object_key;
+ const mediaType = this.getMediaType(row.object_key);
if (mediaType === 'image') {
- window.open(mediaUrl, '_blank'); // 图片在新窗口打开
- } else if (mediaType === 'video') {
- // 临时测试：视频也在新窗口打开
window.open(mediaUrl, '_blank');
- // this.showVideo(mediaUrl); // 原逻辑：视频在弹窗中播放
+ } else if (mediaType === 'video') {
+ window.open(mediaUrl, '_blank');
}
},
- // 判断文件是图片还是视频
getMediaType(objectKey) {
- const extension = objectKey.split('.').pop().toLowerCase(); // 获取文件扩展名
+ const extension = objectKey.split('.').pop().toLowerCase();
if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) {
- return 'image'; // 是图片
+ return 'image';
} else if (['mp4', 'avi', 'mov'].includes(extension)) {
- return 'video'; // 是视频
+ return 'video';
}
- return 'unknown'; // 未知类型
+ return 'unknown';
},
- // 在弹窗中显示视频
showVideo(url) {
- this.taskBox = true; // 打开弹窗
+ this.taskBox = true;
this.taskForm = {
- videoUrl: url, // 设置视频 URL
+ videoUrl: url,
};
- this.taskOption = { // 配置视频播放选项
+ this.taskOption = {
submitBtn: false,
emptyBtn: false,
column: [
@@ -360,14 +365,13 @@
type: 'video',
span: 24,
props: {
- controls: true, // 显示控制条
- autoplay: false, // 不自动播放
+ controls: true,
+ autoplay: false,
},
},
],
};
},
- // 检查权限有效性（假设这是定义在其他地方的工具方法）
validData(val, def) {
return typeof val !== 'undefined' ? val : def;
},
--
Gitblit v1.9.3