118 lines
4.1 KiB
Vue
118 lines
4.1 KiB
Vue
<template>
|
||
<div class="p-4 bg-white rounded-lg shadow-md min-h-[500px]">
|
||
<h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2">
|
||
TidySlide 任务结果预览 (ID: {{ taskId }})
|
||
</h2>
|
||
|
||
<div v-if="loading" class="flex justify-center items-center h-64">
|
||
<el-icon class="is-loading text-4xl text-blue-500"><Loading /></el-icon>
|
||
<span class="ml-2 text-gray-500">加载中...</span>
|
||
</div>
|
||
|
||
<div v-else-if="taskResult" class="space-y-6">
|
||
<!-- 基本信息卡片 -->
|
||
<div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div class="flex items-center">
|
||
<span class="font-bold text-gray-600 w-24">任务ID:</span>
|
||
<span class="text-gray-800">{{ taskResult.videoTaskId }}</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span class="font-bold text-gray-600 w-24">VOD VideoId:</span>
|
||
<span class="font-mono text-blue-600 bg-blue-50 px-2 py-1 rounded">{{ taskResult.videoId }}</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span class="font-bold text-gray-600 w-24">创建时间:</span>
|
||
<span class="text-gray-800">{{ formatDate(taskResult.createTime) }}</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span class="font-bold text-gray-600 w-24">媒体地址:</span>
|
||
<span v-if="taskResult.mediaUrl" class="text-gray-800 truncate max-w-xs" :title="taskResult.mediaUrl">{{ taskResult.mediaUrl }}</span>
|
||
<span v-else class="text-gray-400 italic">暂无播放地址</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 播放器区域 (如果有播放地址) -->
|
||
<div v-if="taskResult.mediaUrl" class="mt-6">
|
||
<h3 class="text-lg font-semibold mb-3 text-gray-700">视频预览</h3>
|
||
<div class="aspect-w-16 aspect-h-9 bg-black rounded-lg overflow-hidden shadow-lg">
|
||
<video
|
||
controls
|
||
class="w-full h-full object-contain"
|
||
:src="taskResult.mediaUrl"
|
||
>
|
||
您的浏览器不支持 HTML5 视频。
|
||
</video>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="mt-6 p-8 text-center bg-yellow-50 rounded-lg border border-yellow-100">
|
||
<el-icon class="text-yellow-500 text-3xl mb-2"><Warning /></el-icon>
|
||
<p class="text-yellow-700">
|
||
该视频已上传至 VOD，但尚未生成播放地址。<br/>
|
||
请前往阿里云 VOD 控制台查看 VideoId: <strong>{{ taskResult.videoId }}</strong>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="flex flex-col justify-center items-center h-64 text-gray-400">
|
||
<el-icon class="text-5xl mb-4"><DocumentDelete /></el-icon>
|
||
<span>未找到相关任务结果</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from "vue";
|
||
import { useRoute } from "vue-router";
|
||
import { ShowTidySlideTaskInfo } from "@/api/videoTask";
|
||
import { message } from "@/utils/message";
|
||
import { isEmpty } from "@pureadmin/utils";
|
||
import { Loading, Warning, DocumentDelete } from "@element-plus/icons-vue";
|
||
|
||
defineOptions({
|
||
name: "showTidySlideTask",
|
||
});
|
||
|
||
const route = useRoute();
|
||
const loading = ref(false);
|
||
const taskId = ref("");
|
||
const taskResult = ref<any>(null);
|
||
|
||
function formatDate(dateString: string) {
|
||
if (!dateString) return "-";
|
||
return new Date(dateString).toLocaleString();
|
||
}
|
||
|
||
onMounted(async () => {
|
||
const data = isEmpty(route.params) ? route.query : route.params;
|
||
|
||
if (isEmpty(data.id) || data.id == null) {
|
||
message("无效的任务ID", { type: "warning" });
|
||
return;
|
||
}
|
||
|
||
taskId.value = data.id.toString();
|
||
loading.value = true;
|
||
|
||
try {
|
||
const res = await ShowTidySlideTaskInfo(taskId.value);
|
||
if (res) {
|
||
taskResult.value = res;
|
||
} else {
|
||
message("未找到任务结果数据", { type: "info" });
|
||
}
|
||
} catch (error) {
|
||
console.error(error);
|
||
message("获取任务结果失败", { type: "error" });
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 使用 Tailwind CSS 类，无需额外样式 */
|
||
</style>
|