109 lines
3.5 KiB
HTML
109 lines
3.5 KiB
HTML
|
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
.layui-container {
|
|||
|
|
width: 100% !important;
|
|||
|
|
padding: 20px;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
}
|
|||
|
|
h2 {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 24px;
|
|||
|
|
}
|
|||
|
|
.layui-table {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
.layui-table tbody tr:nth-child(odd) {
|
|||
|
|
background-color: #f9f9f9;
|
|||
|
|
}
|
|||
|
|
.layui-table tbody tr:nth-child(even) {
|
|||
|
|
background-color: #eaf6f6;
|
|||
|
|
}
|
|||
|
|
.stats-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
.stats-container p {
|
|||
|
|
margin: 0 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.stats-container span {
|
|||
|
|
color: #2de5cf;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div class="layui-container">
|
|||
|
|
<h2>任务列表</h2>
|
|||
|
|
|
|||
|
|
<table id="taskTable" lay-filter="taskTable"></table>
|
|||
|
|
|
|||
|
|
<div class="stats-container">
|
|||
|
|
<p>总任务数量: <span id="totalCount">0</span></p>
|
|||
|
|
<p>分类统计:
|
|||
|
|
<span id="videoTypeCount"></span>
|
|||
|
|
</p>
|
|||
|
|
<p>状态统计:
|
|||
|
|
成功: <span id="completedCount">0</span>，
|
|||
|
|
失败: <span id="failedCount">0</span>，
|
|||
|
|
进行中: <span id="inProgressCount">0</span>，
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{% verbatim %}
|
|||
|
|
<script type="text/html" id="actionToolbar">
|
|||
|
|
<a class="layui-btn layui-btn-sm" href="{{ d.video_url }}" target="_blank">查看视频</a>
|
|||
|
|
</script>
|
|||
|
|
{% endverbatim %}
|
|||
|
|
<script>
|
|||
|
|
layui.use(['jquery', 'table', 'layer'], function() {
|
|||
|
|
const $ = layui.jquery;
|
|||
|
|
const table = layui.table;
|
|||
|
|
const layer = layui.layer;
|
|||
|
|
|
|||
|
|
// 加载任务列表
|
|||
|
|
function loadTaskList() {
|
|||
|
|
table.render({
|
|||
|
|
elem: '#taskTable',
|
|||
|
|
url: '/custom_admin/home/task-list/',
|
|||
|
|
method: 'post',
|
|||
|
|
page: true, // 开启分页
|
|||
|
|
limit: 10, // 每页显示的数量
|
|||
|
|
cols: [[
|
|||
|
|
{field: 'video_id', title: '视频ID', width: '15%'},
|
|||
|
|
{field: 'user_id', title: '用户ID', width: '10%'},
|
|||
|
|
{field: 'text', title: '生成文本', width: '20%'},
|
|||
|
|
{field: 'slug', title: '视频类型', width: '10%'},
|
|||
|
|
{field: 'time_duration', title: '生成时长', width: '10%'},
|
|||
|
|
{field: 'created_at', title: '生成时间', width: '15%'},
|
|||
|
|
{field: 'status', title: '状态', width: '10%'},
|
|||
|
|
{title: '操作', width: '10%', toolbar: '#actionToolbar'}
|
|||
|
|
]],
|
|||
|
|
done: function(res) {
|
|||
|
|
// 更新总任务数
|
|||
|
|
$('#totalCount').text(res.count);
|
|||
|
|
|
|||
|
|
// 分类统计（视频类型）
|
|||
|
|
let videoTypeCount = '';
|
|||
|
|
res.video_type_count.forEach(item => {
|
|||
|
|
videoTypeCount += `${item.slug}: ${item.count} `;
|
|||
|
|
});
|
|||
|
|
$('#videoTypeCount').text(videoTypeCount);
|
|||
|
|
|
|||
|
|
// 状态统计
|
|||
|
|
$('#completedCount').text(res.status_count.completed);
|
|||
|
|
$('#failedCount').text(res.status_count.failed);
|
|||
|
|
$('#inProgressCount').text(res.status_count.in_progress);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loadTaskList(); // 初始化加载任务列表
|
|||
|
|
});
|
|||
|
|
</script>
|