关键字管理
This commit is contained in:
511
src/components/page/crawlTaskMonitor.vue
Normal file
511
src/components/page/crawlTaskMonitor.vue
Normal file
@@ -0,0 +1,511 @@
|
||||
<template>
|
||||
<div class="monitor-container">
|
||||
|
||||
|
||||
<div class="control-panel">
|
||||
<div class="panel-left">
|
||||
<el-radio-group v-model="filterStatus" size="small" class="status-group" @change="handleFilter">
|
||||
<el-radio-button label="">{{ $t('crawlTask.allKeywords') }}</el-radio-button>
|
||||
<el-radio-button label="0">{{ $t('crawlTask.enabled') }}</el-radio-button>
|
||||
<el-radio-button label="1">{{ $t('crawlTask.disabled') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-input
|
||||
v-model="searchText"
|
||||
:placeholder="$t('crawlTask.searchPlaceholder')"
|
||||
prefix-icon="el-icon-search"
|
||||
size="small"
|
||||
class="search-box"
|
||||
clearable
|
||||
@input="handleFilter"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-search"
|
||||
@click="handleSearchClick"
|
||||
>
|
||||
{{ $t('crawlTask.searchBtn') }}
|
||||
</el-button>
|
||||
|
||||
</div>
|
||||
<div class="panel-right">
|
||||
|
||||
<el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">{{ $t('crawlTask.addKeyword') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
:title="$t('crawlTask.addKeyword')"
|
||||
:visible.sync="addDialogVisible"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
@closed="resetAddForm"
|
||||
>
|
||||
<el-form label-width="120px" size="small">
|
||||
<el-form-item :label="$t('crawlTask.keyword')">
|
||||
<el-input
|
||||
v-model="addForm.field"
|
||||
:placeholder="$t('crawlTask.keywordPlaceholder')"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('crawlTask.runOnce')">
|
||||
<el-switch
|
||||
v-model="addForm.runNow"
|
||||
:active-text="$t('crawlTask.yes')"
|
||||
:inactive-text="$t('crawlTask.no')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button size="small" @click="addDialogVisible = false">{{ $t('crawlTask.cancel') }}</el-button>
|
||||
<el-button type="primary" size="small" :loading="addLoading" @click="submitAddKeyword">
|
||||
{{ $t('crawlTask.confirm') }}
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<div v-loading="loading" class="task-list">
|
||||
<el-empty v-if="list.length === 0" :description="$t('crawlTask.emptyResult')" />
|
||||
|
||||
<div v-for="item in list" :key="item.id" class="task-row" :class="'status-' + item.stateClass">
|
||||
<div class="col-base">
|
||||
<div class="status-dot"></div>
|
||||
<div class="id-info">
|
||||
<span class="task-id">#{{ item.id}}</span>
|
||||
<span class="task-name">{{ item.task_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-metrics">
|
||||
<div class="metric-item">
|
||||
<span class="m-label">{{ $t('crawlTask.source') }}</span>
|
||||
<span class="m-value mini-text">{{ item.source }}</span>
|
||||
</div>
|
||||
<div class="metric-item highlight">
|
||||
<span class="m-label">{{ $t('crawlTask.totalPages') }}</span>
|
||||
<span class="m-value">{{ item.total_pages }}</span>
|
||||
</div>
|
||||
<div class="metric-item highlight">
|
||||
<span class="m-label">{{ $t('crawlTask.crawledPages') }}</span>
|
||||
<span class="m-value">{{ item.last_page }}</span>
|
||||
</div>
|
||||
<div class="metric-item highlight">
|
||||
<span class="m-label">{{ $t('crawlTask.expertCountLabel') }}</span>
|
||||
<span class="m-value expert-num">{{ item.expert_count }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-timeline">
|
||||
<div class="time-block">
|
||||
<i class="el-icon-time"></i>
|
||||
<div class="time-detail">
|
||||
<span>{{ $t('crawlTask.created') }}: {{ item.create_time }}</span>
|
||||
<span :class="item.state === 'done' ? 'success-text' : ''">
|
||||
{{ item.state === 'done' ? $t('crawlTask.completed') : $t('crawlTask.updated') }}: {{ item.update_time }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="duration-tag" v-if="item.duration">
|
||||
<i class="el-icon-odometer"></i> {{ item.duration }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-action">
|
||||
<div class="prog-box">
|
||||
<span class="prog-num">{{ item.progress }}%</span>
|
||||
<el-progress
|
||||
:percentage="item.progress"
|
||||
:show-text="false"
|
||||
:stroke-width="4"
|
||||
:status="item.state === 'error' ? 'exception' : (item.state === 'done' ? 'success' : '')"
|
||||
/>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<!-- <el-tooltip content="查看日志" placement="top">
|
||||
<el-button type="text" icon="el-icon-document" @click="handleAction('logs', item)"></el-button>
|
||||
</el-tooltip> -->
|
||||
<!-- <el-tooltip content="执行单次抓取" placement="top" > -->
|
||||
<el-button
|
||||
type="text"
|
||||
:icon="runOnceLoadingId === item.id ? 'el-icon-loading' : 'el-icon-finished'"
|
||||
class="op-run-once"
|
||||
:disabled="runOnceLoadingId === item.id"
|
||||
@click="handleRunOnce(item)"
|
||||
>{{ runOnceLoadingId === item.id ? $t('crawlTask.runOnceLoading') : $t('crawlTask.runOnceBtn') }}</el-button>
|
||||
<!-- </el-tooltip> -->
|
||||
<!-- <el-tooltip :content="item.state == 'running' ? '暂停抓取' : '恢复抓取'" placement="top"> -->
|
||||
<el-button
|
||||
type="text"
|
||||
:icon="item.state === 'running' ? 'el-icon-video-pause' : 'el-icon-video-play'"
|
||||
:class="['toggle-btn', item.state === 'running' ? 'op-pause' : 'op-resume']"
|
||||
@click="handleToggleTask(item)"
|
||||
>{{ item.state === 'running' ? $t('crawlTask.disabled') : $t('crawlTask.enabled') }}</el-button>
|
||||
<!-- </el-tooltip> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:current-page.sync="currentPage"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[5, 10, 20, 50]"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
searchText: '',
|
||||
filterStatus: '',
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
list: [],
|
||||
addDialogVisible: false,
|
||||
addLoading: false,
|
||||
runOnceLoading: false,
|
||||
runOnceLoadingId: null,
|
||||
addForm: {
|
||||
field: '',
|
||||
runNow: false
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchList();
|
||||
},
|
||||
methods: {
|
||||
calcProgress(lastPage, totalPages) {
|
||||
const current = Number(lastPage || 0);
|
||||
const total = Number(totalPages || 0);
|
||||
if (total <= 0) return 0;
|
||||
let percent = (current / total) * 100;
|
||||
if (percent > 100) percent = 100;
|
||||
return Number(percent.toFixed(2));
|
||||
},
|
||||
normalizeItem(item) {
|
||||
const totalPages = Number(item.total_pages || 0);
|
||||
const lastPage = Number(item.last_page || 0);
|
||||
const percent = this.calcProgress(lastPage, totalPages);
|
||||
const stateNum = Number(item.state);
|
||||
const stateClass = stateNum === 0 ? 'running' : 'paused';
|
||||
const source = (item.source || '').toUpperCase() === 'PUBMED' ? 'PubMed' : (item.source || '-');
|
||||
return {
|
||||
id: item.expert_fetch_id || item.id || 0,
|
||||
field: item.field || '',
|
||||
expert_count: item.expert_count || 0,
|
||||
task_name: item.field ? `${item.field}`:'-',
|
||||
source,
|
||||
state: stateClass,
|
||||
stateClass,
|
||||
progress: percent,
|
||||
create_time: item.ctime_text || '-',
|
||||
update_time: item.last_time_text || '-',
|
||||
duration: '',
|
||||
total_pages: Number(item.total_pages || 0),
|
||||
last_page: Number(item.last_page || 0),
|
||||
duplicates: 0,
|
||||
failed: 0
|
||||
};
|
||||
},
|
||||
async fetchList() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const params = {
|
||||
keyword: this.searchText || '',
|
||||
pageIndex: this.currentPage,
|
||||
pageSize: this.pageSize
|
||||
};
|
||||
if (this.filterStatus !== '') {
|
||||
params.state = this.filterStatus;
|
||||
}
|
||||
const res = await this.$api.post('api/expert_manage/getFetchList', params);
|
||||
if (res && res.code === 0 && res.data) {
|
||||
const rows = res.data.list || [];
|
||||
this.list = rows.map(this.normalizeItem);
|
||||
this.total = Number(res.data.total || rows.length || 0);
|
||||
} else {
|
||||
this.list = [];
|
||||
this.total = 0;
|
||||
}
|
||||
} catch (e) {
|
||||
this.list = [];
|
||||
this.total = 0;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
handleFilter() {
|
||||
this.currentPage = 1;
|
||||
this.fetchList();
|
||||
},
|
||||
handleSearchClick() {
|
||||
this.handleFilter();
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.currentPage = 1;
|
||||
this.fetchList();
|
||||
},
|
||||
handlePageChange(val) {
|
||||
this.currentPage = val;
|
||||
this.fetchList();
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
},
|
||||
resetQuery() {
|
||||
this.searchText = '';
|
||||
this.filterStatus = '';
|
||||
this.currentPage = 1;
|
||||
this.fetchList();
|
||||
},
|
||||
openAddDialog() {
|
||||
this.addDialogVisible = true;
|
||||
},
|
||||
resetAddForm() {
|
||||
this.addLoading = false;
|
||||
this.runOnceLoading = false;
|
||||
this.addForm = {
|
||||
field: '',
|
||||
runNow: false
|
||||
};
|
||||
},
|
||||
async submitAddKeyword() {
|
||||
const field = (this.addForm.field || '').trim();
|
||||
if (!field) {
|
||||
this.$message.warning(this.$t('crawlTask.enterKeyword'));
|
||||
return;
|
||||
}
|
||||
const runNow = !!this.addForm.runNow;
|
||||
this.addLoading = true;
|
||||
try {
|
||||
const addRes = await this.$api.post('api/expert_manage/addFetchField', { field });
|
||||
if (!addRes || addRes.code !== 0) {
|
||||
this.$message.error((addRes && addRes.msg) || this.$t('crawlTask.addKeywordFailed'));
|
||||
return;
|
||||
}
|
||||
|
||||
this.$message.success(this.$t('crawlTask.addKeywordSuccess'));
|
||||
this.addDialogVisible = false;
|
||||
this.currentPage = 1;
|
||||
await this.fetchList();
|
||||
|
||||
if (runNow) {
|
||||
// 勾选“单次抓取”时，在列表对应行按钮上显示 loading
|
||||
const lowerField = field.toLowerCase();
|
||||
const target = this.list.find(
|
||||
(row) => ((row.field || '').trim().toLowerCase() === lowerField)
|
||||
);
|
||||
this.runOnceLoading = true;
|
||||
this.runOnceLoadingId = target ? target.id : null;
|
||||
const runRes = await this.$api.post('api/expert_finder/fetchOneField', { field });
|
||||
if (!runRes || runRes.code !== 0) {
|
||||
this.$message.warning((runRes && runRes.msg) || this.$t('crawlTask.runOnceFailed'));
|
||||
} else {
|
||||
this.$message.success(this.$t('crawlTask.runOnceSuccess'));
|
||||
}
|
||||
await this.fetchList();
|
||||
}
|
||||
} catch (e) {
|
||||
this.$message.error(this.$t('crawlTask.operationRetry'));
|
||||
} finally {
|
||||
this.addLoading = false;
|
||||
this.runOnceLoading = false;
|
||||
this.runOnceLoadingId = null;
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
async handleToggleTask(item) {
|
||||
const isRunning = item.state === 'running';
|
||||
const newState = isRunning ? '1' : '0';
|
||||
try {
|
||||
this.loading = true;
|
||||
const res = await this.$api.post('api/expert_manage/editFetchField', {
|
||||
expert_fetch_id: item.id,
|
||||
state: newState
|
||||
});
|
||||
if (res && res.code === 0) {
|
||||
item.state = isRunning ? 'paused' : 'running';
|
||||
item.stateClass = item.state;
|
||||
this.$message.success(isRunning ? this.$t('crawlTask.disabledMsg') : this.$t('crawlTask.enabledMsg'));
|
||||
} else {
|
||||
this.$message.error((res && res.msg) || (isRunning ? this.$t('crawlTask.pauseFailed') : this.$t('crawlTask.resumeFailed')));
|
||||
}
|
||||
} catch (e) {
|
||||
this.$message.error(isRunning ? this.$t('crawlTask.pauseFailed') : this.$t('crawlTask.resumeFailed'));
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
handleRestart(item) {
|
||||
item.state = 'running';
|
||||
item.stateClass = 'running';
|
||||
item.progress = 0;
|
||||
this.$message.success(this.$t('crawlTask.restartSuccess'));
|
||||
},
|
||||
async handleRunOnce(item) {
|
||||
const field = (item.field || item.task_name || '').trim();
|
||||
if (!field) {
|
||||
this.$message.warning(this.$t('crawlTask.missingKeyword'));
|
||||
return;
|
||||
}
|
||||
this.runOnceLoadingId = item.id;
|
||||
try {
|
||||
const res = await this.$api.post('/api/expert_finder/fetchOneField', { field });
|
||||
if (res && res.code === 0) {
|
||||
this.$message.success(this.$t('crawlTask.runOnceSuccess'));
|
||||
await this.fetchList();
|
||||
} else {
|
||||
this.$message.error((res && res.msg) || this.$t('crawlTask.runOnceFailed'));
|
||||
}
|
||||
} catch (e) {
|
||||
this.$message.error(this.$t('crawlTask.runOnceFailed'));
|
||||
} finally {
|
||||
this.runOnceLoadingId = null;
|
||||
}
|
||||
},
|
||||
handleAction(msg, item) {
|
||||
if (msg === 'logs') {
|
||||
this.$message.info(`${this.$t('crawlTask.viewLogs')}: #${item.id}`);
|
||||
return;
|
||||
}
|
||||
this.$message.info(msg);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.monitor-container {
|
||||
padding:0px 20px;
|
||||
background: #f4f7f9;
|
||||
min-height: 100vh;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
/* 统计卡片 */
|
||||
.stat-overview { display: flex; gap: 16px; margin-bottom: 24px; }
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
padding: 16px 20px;
|
||||
border-radius: 8px;
|
||||
flex: 1;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||||
border-top: 3px solid #0a3088; /* 呼应你偏好的深蓝色 */
|
||||
}
|
||||
.stat-val { font-size: 22px; font-weight: bold; color: #0a3088; display: block; }
|
||||
.stat-label { font-size: 12px; color: #64748b; margin-top: 4px; }
|
||||
|
||||
/* 过滤工具栏 */
|
||||
.control-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.panel-left { display: flex; align-items: center; gap: 12px; }
|
||||
.search-box { width: 200px; }
|
||||
.date-picker { width: 240px !important; }
|
||||
|
||||
/* 任务行核心样式 */
|
||||
.task-list { min-height: 400px; }
|
||||
.task-row {
|
||||
background: #fff;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.status-paused {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
.task-row:hover {
|
||||
border-color: #cbd5e1;
|
||||
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* 列定义 */
|
||||
.col-base { flex: 1.5; display: flex; align-items: center; gap: 15px; }
|
||||
.col-metrics { flex: 2; display: flex; justify-content: space-around; border-left: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; }
|
||||
.col-timeline { flex: 1.1; padding: 0 25px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.col-action { flex:1.8; display: flex; align-items: center; gap: 15px; }
|
||||
|
||||
/* 状态点 */
|
||||
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; position: relative; }
|
||||
.status-dot { width: 10px; height: 10px; }
|
||||
.status-running .status-dot { background: #3b82f6; }
|
||||
.status-running .status-dot::after {
|
||||
content: ''; position: absolute; width: 100%; height: 100%; background: inherit;
|
||||
border-radius: 50%; animation: pulse 1.5s infinite;
|
||||
}
|
||||
.status-done .status-dot { background: #10b981; }
|
||||
.status-paused .status-dot { background: #ef4444; }
|
||||
.status-error .status-dot { background: #ef4444; }
|
||||
|
||||
/* 文字样式 */
|
||||
.task-id { font-family: monospace; color: #94a3b8; font-size: 12px; display: block; }
|
||||
.task-name { font-weight: 600; font-size: 14px; color: #1e293b; }
|
||||
|
||||
.metric-item { text-align: center; }
|
||||
.m-label { font-size: 11px; color: #94a3b8; display: block; margin-bottom: 2px; }
|
||||
.m-value { font-size: 16px; font-weight: bold; color: #475569; }
|
||||
.m-value.mini-text { font-size: 12px; font-weight: normal; }
|
||||
.m-value.expert-num { color: #006699; }
|
||||
.success-text { color: #10b981; }
|
||||
.danger { color: #ef4444; }
|
||||
|
||||
/* 时间线样式 */
|
||||
.time-block { display: flex; align-items: center; gap: 10px; color: #64748b; font-size: 12px; }
|
||||
.time-block i { font-size: 16px; }
|
||||
.time-detail span { display: block; line-height: 1.4; }
|
||||
.duration-tag { background: #f1f5f9; padding: 2px 8px; border-radius: 4px; font-size: 11px; color: #475569; }
|
||||
|
||||
/* 进度与分页 */
|
||||
.prog-box { flex: 1; }
|
||||
.prog-num { font-size: 12px; font-weight: bold; display: block; text-align: right; margin-bottom: 4px; min-width: 56px; }
|
||||
.pagination-container { margin-top: 20px; display: flex; justify-content: flex-end; padding: 10px; }
|
||||
.btn-group .el-button.op-pause,
|
||||
.btn-group .el-button.op-pause i { color: #fc4d4d !important; }
|
||||
.btn-group .el-button.op-resume,
|
||||
.btn-group .el-button.op-resume i { color: #67c23a !important; }
|
||||
.btn-group .el-button.op-restart,
|
||||
.btn-group .el-button.op-restart i { color: #409eff !important; }
|
||||
.btn-group .el-button.op-run-once,
|
||||
.btn-group .el-button.op-run-once i { color: #006699 !important; }
|
||||
.btn-group .el-button {
|
||||
font-size: 20px;
|
||||
padding: 6px;
|
||||
}
|
||||
.btn-group .el-button.op-run-once {
|
||||
font-size: 13px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
.btn-group .el-button.toggle-btn {
|
||||
font-size: 13px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); opacity: 0.8; }
|
||||
100% { transform: scale(2.5); opacity: 0; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user