1024 lines
28 KiB
Vue
1024 lines
28 KiB
Vue
|
<template>
|
||
|
|
<div class="material-verify-container">
|
||
|
|
<!-- 头部 -->
|
||
|
|
<div class="header">
|
||
|
|
<h1>素材送检状态管理</h1>
|
||
|
|
<p>腾讯图片/视频素材自动校验系统 - 基于易盾内容安全检测</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 统计卡片 -->
|
||
|
|
<div class="stats-card">
|
||
|
|
<div class="stat-item pending">
|
||
|
|
<div class="stat-value">{{ imageStats.pending + videoStats.pending || 0 }}</div>
|
||
|
|
<div class="stat-label">待校验</div>
|
||
|
|
<div class="stat-breakdown">
|
||
|
|
<div class="stat-breakdown-item">
|
||
|
|
<span class="type-tag image">图</span>
|
||
|
|
<span>图片: </span>
|
||
|
|
<span class="num">{{ imageStats.pending || 0 }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="stat-breakdown-item">
|
||
|
|
<span class="type-tag video">视</span>
|
||
|
|
<span>视频: </span>
|
||
|
|
<span class="num">{{ videoStats.pending || 0 }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-item verified">
|
||
|
|
<div class="stat-value">{{ imageStats.verified + videoStats.verified || 0 }}</div>
|
||
|
|
<div class="stat-label">校验通过</div>
|
||
|
|
<div class="stat-breakdown">
|
||
|
|
<div class="stat-breakdown-item">
|
||
|
|
<span class="type-tag image">图</span>
|
||
|
|
<span>图片: </span>
|
||
|
|
<span class="num">{{ imageStats.verified || 0 }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="stat-breakdown-item">
|
||
|
|
<span class="type-tag video">视</span>
|
||
|
|
<span>视频: </span>
|
||
|
|
<span class="num">{{ videoStats.verified || 0 }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-item rejected">
|
||
|
|
<div class="stat-value">{{ imageStats.rejected + videoStats.rejected || 0 }}</div>
|
||
|
|
<div class="stat-label">校验不通过</div>
|
||
|
|
<div class="stat-breakdown">
|
||
|
|
<div class="stat-breakdown-item">
|
||
|
|
<span class="type-tag image">图</span>
|
||
|
|
<span>图片: </span>
|
||
|
|
<span class="num">{{ imageStats.rejected || 0 }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="stat-breakdown-item">
|
||
|
|
<span class="type-tag video">视</span>
|
||
|
|
<span>视频: </span>
|
||
|
|
<span class="num">{{ videoStats.rejected || 0 }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Tabs -->
|
||
|
|
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
||
|
|
<el-tab-pane label="图片素材" name="image">
|
||
|
|
<div class="card">
|
||
|
|
<!-- 筛选 -->
|
||
|
|
<div class="filter-bar">
|
||
|
|
<div class="filter-item">
|
||
|
|
<label>状态:</label>
|
||
|
|
<el-select v-model="imageFilters.status" placeholder="全部" clearable style="width: 120px">
|
||
|
|
<el-option label="全部" value=""></el-option>
|
||
|
|
<el-option label="待校验" value="PENDING"></el-option>
|
||
|
|
<el-option label="送检中" value="SUBMITTING"></el-option>
|
||
|
|
<el-option label="校验通过" value="VERIFIED"></el-option>
|
||
|
|
<el-option label="校验不通过" value="REJECTED"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
<div class="filter-item">
|
||
|
|
<label>账户ID:</label>
|
||
|
|
<el-input v-model="imageFilters.accountId" placeholder="账户ID" style="width: 120px" clearable @keyup.enter="searchImage"></el-input>
|
||
|
|
</div>
|
||
|
|
<el-button type="primary" @click="searchImage">搜索</el-button>
|
||
|
|
<el-button @click="resetImageFilter">重置</el-button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 操作按钮 -->
|
||
|
|
<div class="action-bar">
|
||
|
|
<el-button type="success" @click="batchVerifyImage" :loading="batchLoading"> 批量校验图片 </el-button>
|
||
|
|
<el-button type="primary" plain @click="pollImageResults" :loading="pollLoading">
|
||
|
|
<el-icon><Refresh /></el-icon> 刷新检测结果
|
||
|
|
</el-button>
|
||
|
|
<el-button type="warning" plain @click="exportImageUrls">
|
||
|
|
<el-icon><Download /></el-icon> 导出
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 表格 -->
|
||
|
|
<el-table :data="imageList" border style="width: 100%" v-loading="imageLoading">
|
||
|
|
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
||
|
|
<el-table-column prop="imageId" label="图片ID" width="180"></el-table-column>
|
||
|
|
<el-table-column prop="accountId" label="账户ID" width="100"></el-table-column>
|
||
|
|
<el-table-column prop="imageUsage" label="用途" width="100"></el-table-column>
|
||
|
|
<el-table-column label="预览" width="120">
|
||
|
|
<template #default="scope">
|
||
|
|
<img
|
||
|
|
v-if="scope.row.previewUrl"
|
||
|
|
:src="scope.row.previewUrl"
|
||
|
|
class="media-preview"
|
||
|
|
@click="previewMedia(scope.row.previewUrl, 'image')"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="verifyStatus" label="校验状态" width="110">
|
||
|
|
<template #default="scope">
|
||
|
|
<span :class="'table-status status-' + (scope.row.verifyStatus || 'pending').toLowerCase()">
|
||
|
|
{{ getStatusText(scope.row.verifyStatus) }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="description" label="描述" min-width="150">
|
||
|
|
<template #default="scope">
|
||
|
|
<span class="description-text" :title="scope.row.description">{{ scope.row.description || '-' }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" width="200" fixed="right">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-button size="small" type="text" @click="showLogs('IMAGE', scope.row.imageId)">查看日志</el-button>
|
||
|
|
<el-button size="small" type="text" @click="verifyImage(scope.row.imageId)">送检</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<!-- 分页 -->
|
||
|
|
<div class="pagination">
|
||
|
|
<el-pagination
|
||
|
|
@current-change="handleImagePageChange"
|
||
|
|
v-model:current-page="imagePage"
|
||
|
|
:page-size="imagePageSize"
|
||
|
|
layout="total, prev, pager, next"
|
||
|
|
:total="imageTotal"
|
||
|
|
>
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
|
||
|
|
<el-tab-pane label="视频素材" name="video">
|
||
|
|
<div class="card">
|
||
|
|
<!-- 筛选 -->
|
||
|
|
<div class="filter-bar">
|
||
|
|
<div class="filter-item">
|
||
|
|
<label>状态:</label>
|
||
|
|
<el-select v-model="videoFilters.status" placeholder="全部" clearable style="width: 120px">
|
||
|
|
<el-option label="全部" value=""></el-option>
|
||
|
|
<el-option label="待校验" value="PENDING"></el-option>
|
||
|
|
<el-option label="送检中" value="SUBMITTING"></el-option>
|
||
|
|
<el-option label="校验通过" value="VERIFIED"></el-option>
|
||
|
|
<el-option label="校验不通过" value="REJECTED"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
<div class="filter-item">
|
||
|
|
<label>账户ID:</label>
|
||
|
|
<el-input v-model="videoFilters.accountId" placeholder="账户ID" style="width: 120px" clearable @keyup.enter="searchVideo"></el-input>
|
||
|
|
</div>
|
||
|
|
<el-button type="primary" @click="searchVideo">搜索</el-button>
|
||
|
|
<el-button @click="resetVideoFilter">重置</el-button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 操作按钮 -->
|
||
|
|
<div class="action-bar">
|
||
|
|
<el-button type="success" @click="batchVerifyVideo" :loading="batchLoading"> 批量校验视频 </el-button>
|
||
|
|
<el-button type="primary" plain @click="pollVideoResults" :loading="pollLoading">
|
||
|
|
<el-icon><Refresh /></el-icon> 刷新检测结果
|
||
|
|
</el-button>
|
||
|
|
<el-button type="warning" plain @click="exportVideoUrls">
|
||
|
|
<el-icon><Download /></el-icon> 导出
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 表格 -->
|
||
|
|
<el-table :data="videoList" border style="width: 100%" v-loading="videoLoading">
|
||
|
|
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
||
|
|
<el-table-column prop="videoId" label="视频ID" width="180"></el-table-column>
|
||
|
|
<el-table-column prop="accountId" label="账户ID" width="100"></el-table-column>
|
||
|
|
<el-table-column label="预览" width="120">
|
||
|
|
<template #default="scope">
|
||
|
|
<div class="video-preview" @click="previewMedia(scope.row.previewUrl, 'video')">
|
||
|
|
<el-icon><VideoPlay style="font-size: 32px" /></el-icon>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="verifyStatus" label="校验状态" width="110">
|
||
|
|
<template #default="scope">
|
||
|
|
<span :class="'table-status status-' + (scope.row.verifyStatus || 'pending').toLowerCase()">
|
||
|
|
{{ getStatusText(scope.row.verifyStatus) }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="description" label="描述" min-width="150">
|
||
|
|
<template #default="scope">
|
||
|
|
<span class="description-text" :title="scope.row.description">{{ scope.row.description || '-' }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" width="200" fixed="right">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-button size="small" type="text" @click="showLogs('VIDEO', scope.row.videoId)">查看日志</el-button>
|
||
|
|
<el-button size="small" type="text" @click="verifyVideo(scope.row.videoId)">送检</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<!-- 分页 -->
|
||
|
|
<div class="pagination">
|
||
|
|
<el-pagination
|
||
|
|
@current-change="handleVideoPageChange"
|
||
|
|
v-model:current-page="videoPage"
|
||
|
|
:page-size="videoPageSize"
|
||
|
|
layout="total, prev, pager, next"
|
||
|
|
:total="videoTotal"
|
||
|
|
>
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
|
||
|
|
<el-tab-pane label="校验日志" name="log">
|
||
|
|
<div class="card">
|
||
|
|
<!-- 筛选 -->
|
||
|
|
<div class="filter-bar">
|
||
|
|
<div class="filter-item">
|
||
|
|
<label>素材类型:</label>
|
||
|
|
<el-select v-model="logFilters.materialType" placeholder="全部" clearable style="width: 120px">
|
||
|
|
<el-option label="全部" value=""></el-option>
|
||
|
|
<el-option label="图片" value="IMAGE"></el-option>
|
||
|
|
<el-option label="视频" value="VIDEO"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
<div class="filter-item">
|
||
|
|
<label>校验状态:</label>
|
||
|
|
<el-select v-model="logFilters.verifyStatus" placeholder="全部" clearable style="width: 120px">
|
||
|
|
<el-option label="全部" value=""></el-option>
|
||
|
|
<el-option label="待校验" value="PENDING"></el-option>
|
||
|
|
<el-option label="校验通过" value="VERIFIED"></el-option>
|
||
|
|
<el-option label="校验不通过" value="REJECTED"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
<div class="filter-item">
|
||
|
|
<label>素材ID:</label>
|
||
|
|
<el-input v-model="logFilters.materialId" placeholder="素材ID" style="width: 150px" clearable></el-input>
|
||
|
|
</div>
|
||
|
|
<el-button type="primary" @click="searchLog">搜索</el-button>
|
||
|
|
<el-button @click="resetLogFilter">重置</el-button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 表格 -->
|
||
|
|
<el-table :data="logList" border style="width: 100%" v-loading="logLoading">
|
||
|
|
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
||
|
|
<el-table-column prop="materialType" label="类型" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
{{ scope.row.materialType === 'IMAGE' ? '图片' : '视频' }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="materialId" label="素材ID" width="180"></el-table-column>
|
||
|
|
<el-table-column prop="accountId" label="账户ID" width="100"></el-table-column>
|
||
|
|
<el-table-column prop="taskId" label="任务ID" width="180"></el-table-column>
|
||
|
|
<el-table-column prop="verifyStatus" label="校验状态" width="110">
|
||
|
|
<template #default="scope">
|
||
|
|
<span :class="'table-status status-' + (scope.row.verifyStatus || 'pending').toLowerCase()">
|
||
|
|
{{ getStatusText(scope.row.verifyStatus) }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="suggestion" label="建议" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
{{ getSuggestionText(scope.row.suggestion) }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="createdAt" label="创建时间" width="160">
|
||
|
|
<template #default="scope">
|
||
|
|
{{ formatTime(scope.row.createdAt) }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" width="120" fixed="right">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-button size="small" type="text" @click="showLogDetail(scope.row)">详情</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<!-- 分页 -->
|
||
|
|
<div class="pagination">
|
||
|
|
<el-pagination
|
||
|
|
@current-change="handleLogPageChange"
|
||
|
|
v-model:current-page="logPage"
|
||
|
|
:page-size="logPageSize"
|
||
|
|
layout="total, prev, pager, next"
|
||
|
|
:total="logTotal"
|
||
|
|
>
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
|
||
|
|
<!-- 日志详情对话框 -->
|
||
|
|
<el-dialog title="校验日志详情" v-model="logDialogVisible" width="800px">
|
||
|
|
<div v-if="currentLog">
|
||
|
|
<el-descriptions :column="2" border>
|
||
|
|
<el-descriptions-item label="日志ID">{{ currentLog.id }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="素材类型">{{ currentLog.materialType === 'IMAGE' ? '图片' : '视频' }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="素材ID">{{ currentLog.materialId }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="账户ID">{{ currentLog.accountId }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="任务ID">{{ currentLog.taskId || '-' }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="校验状态">
|
||
|
|
<span :class="'table-status status-' + (currentLog.verifyStatus || 'pending').toLowerCase()">
|
||
|
|
{{ getStatusText(currentLog.verifyStatus) }}
|
||
|
|
</span>
|
||
|
|
</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="处置建议">{{ getSuggestionText(currentLog.suggestion) }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="创建时间">{{ formatTime(currentLog.createdAt) }}</el-descriptions-item>
|
||
|
|
</el-descriptions>
|
||
|
|
|
||
|
|
<h4 style="margin-top: 20px">请求参数:</h4>
|
||
|
|
<div class="log-detail">
|
||
|
|
<pre>{{ currentLog.requestParams || '无' }}</pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h4>响应结果:</h4>
|
||
|
|
<div class="log-detail">
|
||
|
|
<pre>{{ currentLog.responseResult || '无' }}</pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h4>错误信息:</h4>
|
||
|
|
<div class="log-detail" v-if="currentLog.errorMsg">
|
||
|
|
<pre style="color: #f56c6c">{{ currentLog.errorMsg }}</pre>
|
||
|
|
</div>
|
||
|
|
<div class="log-detail" v-else>
|
||
|
|
<pre>无</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
|
||
|
|
<!-- 预览对话框 -->
|
||
|
|
<el-dialog title="媒体预览" v-model="previewVisible" width="60%">
|
||
|
|
<div style="text-align: center">
|
||
|
|
<img v-if="previewType === 'image'" :src="previewUrl" style="max-width: 100%" />
|
||
|
|
<video v-if="previewType === 'video'" :src="previewUrl" controls style="max-width: 100%"></video>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
|
||
|
|
<!-- 日志列表对话框 -->
|
||
|
|
<el-dialog title="校验日志" v-model="logsDialogVisible" width="900px">
|
||
|
|
<el-table :data="materialLogs" border style="width: 100%" size="small">
|
||
|
|
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
||
|
|
<el-table-column prop="taskId" label="任务ID" width="180"></el-table-column>
|
||
|
|
<el-table-column prop="verifyStatus" label="状态" width="100">
|
||
|
|
<template #default="scope">
|
||
|
|
<span :class="'table-status status-' + (scope.row.verifyStatus || 'pending').toLowerCase()">
|
||
|
|
{{ getStatusText(scope.row.verifyStatus) }}
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="suggestion" label="建议" width="80">
|
||
|
|
<template #default="scope">
|
||
|
|
{{ getSuggestionText(scope.row.suggestion) }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="errorMsg" label="错误信息" show-overflow-tooltip></el-table-column>
|
||
|
|
<el-table-column prop="createdAt" label="时间" width="160">
|
||
|
|
<template #default="scope">
|
||
|
|
{{ formatTime(scope.row.createdAt) }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, reactive, onMounted } from 'vue';
|
||
|
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
||
|
|
import { Refresh, Download, VideoPlay } from '@element-plus/icons-vue';
|
||
|
|
import {
|
||
|
|
getImageStats,
|
||
|
|
getVideoStats,
|
||
|
|
getImageList,
|
||
|
|
getVideoList,
|
||
|
|
getVerifyLogList,
|
||
|
|
manualVerifyImage,
|
||
|
|
manualVerifyVideo,
|
||
|
|
pollImageResults as pollImageResultsApi,
|
||
|
|
pollVideoResults as pollVideoResultsApi,
|
||
|
|
batchVerifyImage as batchVerifyImageApi,
|
||
|
|
batchVerifyVideo as batchVerifyVideoApi,
|
||
|
|
} from '/@/api/ads/compliance/tencent/materialVerify';
|
||
|
|
|
||
|
|
// 响应式状态
|
||
|
|
const activeTab = ref('image');
|
||
|
|
const pollLoading = ref(false);
|
||
|
|
const batchLoading = ref(false);
|
||
|
|
|
||
|
|
// 图片统计
|
||
|
|
const imageStats = reactive({ pending: 0, verified: 0, rejected: 0 });
|
||
|
|
// 视频统计
|
||
|
|
const videoStats = reactive({ pending: 0, verified: 0, rejected: 0 });
|
||
|
|
|
||
|
|
// 图片列表
|
||
|
|
const imageList = ref<any[]>([]);
|
||
|
|
const imageLoading = ref(false);
|
||
|
|
const imagePage = ref(1);
|
||
|
|
const imagePageSize = ref(20);
|
||
|
|
const imageTotal = ref(0);
|
||
|
|
const imageFilters = reactive({ status: '', accountId: '' });
|
||
|
|
|
||
|
|
// 视频列表
|
||
|
|
const videoList = ref<any[]>([]);
|
||
|
|
const videoLoading = ref(false);
|
||
|
|
const videoPage = ref(1);
|
||
|
|
const videoPageSize = ref(20);
|
||
|
|
const videoTotal = ref(0);
|
||
|
|
const videoFilters = reactive({ status: '', accountId: '' });
|
||
|
|
|
||
|
|
// 日志列表
|
||
|
|
const logList = ref<any[]>([]);
|
||
|
|
const logLoading = ref(false);
|
||
|
|
const logPage = ref(1);
|
||
|
|
const logPageSize = ref(20);
|
||
|
|
const logTotal = ref(0);
|
||
|
|
const logFilters = reactive({ materialType: '', verifyStatus: '', materialId: '' });
|
||
|
|
|
||
|
|
// 对话框
|
||
|
|
const logDialogVisible = ref(false);
|
||
|
|
const previewVisible = ref(false);
|
||
|
|
const logsDialogVisible = ref(false);
|
||
|
|
const currentLog = ref<any>(null);
|
||
|
|
const previewUrl = ref('');
|
||
|
|
const previewType = ref('image');
|
||
|
|
const materialLogs = ref<any[]>([]);
|
||
|
|
|
||
|
|
// 加载统计
|
||
|
|
const loadStats = async () => {
|
||
|
|
try {
|
||
|
|
const [imgRes, vidRes] = await Promise.all([getImageStats(), getVideoStats()]);
|
||
|
|
const imgStats = imgRes.data || {};
|
||
|
|
const vidStats = vidRes.data || {};
|
||
|
|
Object.assign(imageStats, {
|
||
|
|
pending: imgStats.pending || 0,
|
||
|
|
verified: imgStats.verified || 0,
|
||
|
|
rejected: imgStats.rejected || 0,
|
||
|
|
});
|
||
|
|
Object.assign(videoStats, {
|
||
|
|
pending: vidStats.pending || 0,
|
||
|
|
verified: vidStats.verified || 0,
|
||
|
|
rejected: vidStats.rejected || 0,
|
||
|
|
});
|
||
|
|
} catch (err) {
|
||
|
|
console.error('加载统计失败', err);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 加载图片列表
|
||
|
|
const loadImageList = () => {
|
||
|
|
imageLoading.value = true;
|
||
|
|
getImageList({
|
||
|
|
page: imagePage.value,
|
||
|
|
pageSize: imagePageSize.value,
|
||
|
|
status: imageFilters.status,
|
||
|
|
accountId: imageFilters.accountId,
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
imageList.value = res.data?.list || [];
|
||
|
|
imageTotal.value = res.data?.total || 0;
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
ElMessage.error('加载图片列表失败');
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
imageLoading.value = false;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 加载视频列表
|
||
|
|
const loadVideoList = () => {
|
||
|
|
videoLoading.value = true;
|
||
|
|
getVideoList({
|
||
|
|
page: videoPage.value,
|
||
|
|
pageSize: videoPageSize.value,
|
||
|
|
status: videoFilters.status,
|
||
|
|
accountId: videoFilters.accountId,
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
videoList.value = res.data?.list || [];
|
||
|
|
videoTotal.value = res.data?.total || 0;
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
ElMessage.error('加载视频列表失败');
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
videoLoading.value = false;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 加载日志列表
|
||
|
|
const loadLogList = () => {
|
||
|
|
logLoading.value = true;
|
||
|
|
getVerifyLogList({
|
||
|
|
page: logPage.value,
|
||
|
|
pageSize: logPageSize.value,
|
||
|
|
materialType: logFilters.materialType,
|
||
|
|
verifyStatus: logFilters.verifyStatus,
|
||
|
|
materialId: logFilters.materialId,
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
logList.value = res.data?.list || [];
|
||
|
|
logTotal.value = res.data?.total || 0;
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
ElMessage.error('加载日志列表失败');
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
logLoading.value = false;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// Tab 切换
|
||
|
|
const handleTabClick = (tab: any) => {
|
||
|
|
if (tab.name === 'image') {
|
||
|
|
loadImageList();
|
||
|
|
} else if (tab.name === 'video') {
|
||
|
|
loadVideoList();
|
||
|
|
} else if (tab.name === 'log') {
|
||
|
|
loadLogList();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 搜索
|
||
|
|
const searchImage = () => {
|
||
|
|
imagePage.value = 1;
|
||
|
|
loadImageList();
|
||
|
|
};
|
||
|
|
|
||
|
|
const searchVideo = () => {
|
||
|
|
videoPage.value = 1;
|
||
|
|
loadVideoList();
|
||
|
|
};
|
||
|
|
|
||
|
|
const searchLog = () => {
|
||
|
|
logPage.value = 1;
|
||
|
|
loadLogList();
|
||
|
|
};
|
||
|
|
|
||
|
|
// 重置筛选
|
||
|
|
const resetImageFilter = () => {
|
||
|
|
Object.assign(imageFilters, { status: '', accountId: '' });
|
||
|
|
searchImage();
|
||
|
|
};
|
||
|
|
|
||
|
|
const resetVideoFilter = () => {
|
||
|
|
Object.assign(videoFilters, { status: '', accountId: '' });
|
||
|
|
searchVideo();
|
||
|
|
};
|
||
|
|
|
||
|
|
const resetLogFilter = () => {
|
||
|
|
Object.assign(logFilters, { materialType: '', verifyStatus: '', materialId: '' });
|
||
|
|
searchLog();
|
||
|
|
};
|
||
|
|
|
||
|
|
// 分页
|
||
|
|
const handleImagePageChange = (page: number) => {
|
||
|
|
imagePage.value = page;
|
||
|
|
loadImageList();
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleVideoPageChange = (page: number) => {
|
||
|
|
videoPage.value = page;
|
||
|
|
loadVideoList();
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleLogPageChange = (page: number) => {
|
||
|
|
logPage.value = page;
|
||
|
|
loadLogList();
|
||
|
|
};
|
||
|
|
|
||
|
|
// 手动送检
|
||
|
|
const verifyImage = (imageId: string) => {
|
||
|
|
ElMessageBox.confirm('确认提交图片 ' + imageId + ' 进行校验?', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning',
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
manualVerifyImage({ materialId: imageId })
|
||
|
|
.then(() => {
|
||
|
|
ElMessage.success('提交成功');
|
||
|
|
loadImageList();
|
||
|
|
loadStats();
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
};
|
||
|
|
|
||
|
|
const verifyVideo = (videoId: string) => {
|
||
|
|
ElMessageBox.confirm('确认提交视频 ' + videoId + ' 进行校验?', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning',
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
manualVerifyVideo({ materialId: videoId })
|
||
|
|
.then(() => {
|
||
|
|
ElMessage.success('提交成功');
|
||
|
|
loadVideoList();
|
||
|
|
loadStats();
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 刷新检测结果
|
||
|
|
const pollImageResults = () => {
|
||
|
|
pollLoading.value = true;
|
||
|
|
pollImageResultsApi()
|
||
|
|
.then((res: any) => {
|
||
|
|
ElMessage.success(res?.msg || '刷新完成');
|
||
|
|
loadImageList();
|
||
|
|
loadStats();
|
||
|
|
})
|
||
|
|
.catch(() => {})
|
||
|
|
.finally(() => {
|
||
|
|
pollLoading.value = false;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const pollVideoResults = () => {
|
||
|
|
pollLoading.value = true;
|
||
|
|
pollVideoResultsApi()
|
||
|
|
.then((res: any) => {
|
||
|
|
ElMessage.success(res?.msg || '刷新完成');
|
||
|
|
loadVideoList();
|
||
|
|
loadStats();
|
||
|
|
})
|
||
|
|
.catch(() => {})
|
||
|
|
.finally(() => {
|
||
|
|
pollLoading.value = false;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 导出
|
||
|
|
const exportImageUrls = () => {
|
||
|
|
if (!imageList.value.length) {
|
||
|
|
ElMessage.warning('没有可导出的图片');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const rows = [['ID', '图片ID', '账户ID', '用途', '预览URL', '状态', '描述']];
|
||
|
|
imageList.value.forEach((item) => {
|
||
|
|
rows.push([
|
||
|
|
item.id,
|
||
|
|
item.imageId,
|
||
|
|
item.accountId,
|
||
|
|
item.imageUsage,
|
||
|
|
item.previewUrl || '-',
|
||
|
|
getStatusText(item.verifyStatus),
|
||
|
|
item.description || '-',
|
||
|
|
]);
|
||
|
|
});
|
||
|
|
downloadCsv('图片列表.csv', rows);
|
||
|
|
};
|
||
|
|
|
||
|
|
const exportVideoUrls = () => {
|
||
|
|
if (!videoList.value.length) {
|
||
|
|
ElMessage.warning('没有可导出的视频');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const rows = [['ID', '视频ID', '账户ID', '预览URL', '状态', '描述']];
|
||
|
|
videoList.value.forEach((item) => {
|
||
|
|
rows.push([item.id, item.videoId, item.accountId, item.previewUrl || '-', getStatusText(item.verifyStatus), item.description || '-']);
|
||
|
|
});
|
||
|
|
downloadCsv('视频列表.csv', rows);
|
||
|
|
};
|
||
|
|
|
||
|
|
const downloadCsv = (filename: string, rows: string[][]) => {
|
||
|
|
const csv = rows.map((r) => r.map((v) => `"${String(v).replace(/"/g, '""')}"`).join(',')).join('\n');
|
||
|
|
const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
|
||
|
|
const link = document.createElement('a');
|
||
|
|
link.href = URL.createObjectURL(blob);
|
||
|
|
link.download = filename;
|
||
|
|
document.body.appendChild(link);
|
||
|
|
link.click();
|
||
|
|
document.body.removeChild(link);
|
||
|
|
URL.revokeObjectURL(link.href);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 批量送检
|
||
|
|
const batchVerifyImage = () => {
|
||
|
|
ElMessageBox.confirm('确认批量校验待处理的图片?', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning',
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
batchLoading.value = true;
|
||
|
|
batchVerifyImageApi()
|
||
|
|
.then((res: any) => {
|
||
|
|
ElMessage.success(res?.msg || '批量校验完成');
|
||
|
|
loadImageList();
|
||
|
|
loadStats();
|
||
|
|
})
|
||
|
|
.catch(() => {})
|
||
|
|
.finally(() => {
|
||
|
|
batchLoading.value = false;
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
};
|
||
|
|
|
||
|
|
const batchVerifyVideo = () => {
|
||
|
|
ElMessageBox.confirm('确认批量校验待处理的视频?', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning',
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
batchLoading.value = true;
|
||
|
|
batchVerifyVideoApi()
|
||
|
|
.then((res: any) => {
|
||
|
|
ElMessage.success(res?.msg || '批量校验完成');
|
||
|
|
loadVideoList();
|
||
|
|
loadStats();
|
||
|
|
})
|
||
|
|
.catch(() => {})
|
||
|
|
.finally(() => {
|
||
|
|
batchLoading.value = false;
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(() => {});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 查看日志
|
||
|
|
const showLogs = (materialType: string, materialId: string) => {
|
||
|
|
getVerifyLogList({
|
||
|
|
materialType,
|
||
|
|
materialId,
|
||
|
|
pageSize: 100,
|
||
|
|
page: 1,
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
materialLogs.value = res.data?.list || [];
|
||
|
|
logsDialogVisible.value = true;
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
ElMessage.error('加载日志失败');
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 日志详情
|
||
|
|
const showLogDetail = (log: any) => {
|
||
|
|
currentLog.value = log;
|
||
|
|
logDialogVisible.value = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 预览
|
||
|
|
const previewMedia = (url: string, type: string) => {
|
||
|
|
if (!url) {
|
||
|
|
ElMessage.warning('无预览地址');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
previewUrl.value = url;
|
||
|
|
previewType.value = type;
|
||
|
|
previewVisible.value = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 工具方法
|
||
|
|
const getStatusText = (status: string) => {
|
||
|
|
const map: Record<string, string> = {
|
||
|
|
PENDING: '待校验',
|
||
|
|
SUBMITTING: '送检中',
|
||
|
|
VERIFIED: '校验通过',
|
||
|
|
REJECTED: '校验不通过',
|
||
|
|
};
|
||
|
|
return map[status] || status || '待校验';
|
||
|
|
};
|
||
|
|
|
||
|
|
const getSuggestionText = (suggestion: number) => {
|
||
|
|
const map: Record<number, string> = {
|
||
|
|
0: '通过',
|
||
|
|
1: '嫌疑',
|
||
|
|
2: '不通过',
|
||
|
|
};
|
||
|
|
return map[suggestion] || '-';
|
||
|
|
};
|
||
|
|
|
||
|
|
const formatTime = (timeStr: string) => {
|
||
|
|
if (!timeStr) return '-';
|
||
|
|
const date = new Date(timeStr);
|
||
|
|
if (isNaN(date.getTime())) return '-';
|
||
|
|
return date.toLocaleString('zh-CN', {
|
||
|
|
year: 'numeric',
|
||
|
|
month: '2-digit',
|
||
|
|
day: '2-digit',
|
||
|
|
hour: '2-digit',
|
||
|
|
minute: '2-digit',
|
||
|
|
second: '2-digit',
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 组件挂载时加载数据
|
||
|
|
onMounted(() => {
|
||
|
|
loadStats();
|
||
|
|
loadImageList();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.material-verify-container {
|
||
|
|
max-width: 1400px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 20px;
|
||
|
|
background: #f5f7fa;
|
||
|
|
min-height: calc(100vh - 60px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
background: #fff;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
color: #409eff;
|
||
|
|
font-size: 24px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
color: #909399;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.stats-card {
|
||
|
|
display: flex;
|
||
|
|
gap: 20px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-item {
|
||
|
|
background: #fff;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
flex: 1;
|
||
|
|
text-align: center;
|
||
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||
|
|
|
||
|
|
&.pending {
|
||
|
|
border-left: 4px solid #e6a23c;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.verified {
|
||
|
|
border-left: 4px solid #67c23a;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.rejected {
|
||
|
|
border-left: 4px solid #f56c6c;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-value {
|
||
|
|
font-size: 32px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #303133;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-label {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #909399;
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-breakdown {
|
||
|
|
margin-top: 12px;
|
||
|
|
padding-top: 10px;
|
||
|
|
border-top: 1px dashed #ebeef5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-breakdown-item {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
gap: 4px;
|
||
|
|
font-size: 13px;
|
||
|
|
line-height: 24px;
|
||
|
|
|
||
|
|
.type-tag {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 1px 8px;
|
||
|
|
border-radius: 3px;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: normal;
|
||
|
|
min-width: 28px;
|
||
|
|
|
||
|
|
&.image {
|
||
|
|
background: #ecf5ff;
|
||
|
|
color: #409eff;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.video {
|
||
|
|
background: #fdf6ec;
|
||
|
|
color: #e6a23c;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.num {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 20px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-bar {
|
||
|
|
display: flex;
|
||
|
|
gap: 15px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
|
||
|
|
label {
|
||
|
|
color: #606266;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-bar {
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-status {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 4px 12px;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 12px;
|
||
|
|
|
||
|
|
&.status-pending {
|
||
|
|
background: #fdf6ec;
|
||
|
|
color: #e6a23c;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.status-submitting {
|
||
|
|
background: #e8f4fd;
|
||
|
|
color: #409eff;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.status-verified {
|
||
|
|
background: #f0f9eb;
|
||
|
|
color: #67c23a;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.status-rejected {
|
||
|
|
background: #fef0f0;
|
||
|
|
color: #f56c6c;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.pagination {
|
||
|
|
margin-top: 20px;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-detail {
|
||
|
|
background: #f5f7fa;
|
||
|
|
padding: 15px;
|
||
|
|
border-radius: 4px;
|
||
|
|
margin: 10px 0;
|
||
|
|
|
||
|
|
pre {
|
||
|
|
white-space: pre-wrap;
|
||
|
|
word-wrap: break-word;
|
||
|
|
font-family: Monaco, Consolas, monospace;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.media-preview {
|
||
|
|
max-width: 200px;
|
||
|
|
max-height: 150px;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.video-preview {
|
||
|
|
width: 200px;
|
||
|
|
height: 120px;
|
||
|
|
background: #000;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 4px;
|
||
|
|
color: #fff;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.description-text {
|
||
|
|
max-width: 200px;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
</style>
|