164 lines
4.6 KiB
Vue
164 lines
4.6 KiB
Vue
<template>
|
|
<a-modal
|
|
:visible="visible"
|
|
title="爬虫设置"
|
|
width="800px"
|
|
@cancel="handleCancel"
|
|
@ok="handleOk"
|
|
:mask-closable="false"
|
|
>
|
|
<a-form :model="form" layout="vertical">
|
|
<a-form-item label="爬取频率">
|
|
<a-select v-model="form.frequency">
|
|
<a-option value="hourly">每小时</a-option>
|
|
<a-option value="daily">每天</a-option>
|
|
<a-option value="weekly">每周</a-option>
|
|
<a-option value="monthly">每月</a-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="关键词过滤">
|
|
<a-input-tag
|
|
v-model="form.keywords"
|
|
placeholder="输入关键词后回车"
|
|
allow-clear
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="来源平台">
|
|
<a-checkbox-group v-model="form.platforms">
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="8">
|
|
<a-checkbox value="国能e招">国能e招</a-checkbox>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-checkbox value="中国节能">中国节能</a-checkbox>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-checkbox value="科幻集团">科幻集团</a-checkbox>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-checkbox value="三峡招标">三峡招标</a-checkbox>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-checkbox value="三峡采购">三峡采购</a-checkbox>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-checkbox value="北京京能">北京京能</a-checkbox>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-checkbox value="华润守正">华润守正</a-checkbox>
|
|
</a-col>
|
|
</a-row>
|
|
</a-checkbox-group>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="自动通知">
|
|
<a-switch v-model="form.autoNotify" />
|
|
</a-form-item>
|
|
|
|
<template v-if="form.autoNotify">
|
|
<a-form-item label="通知方式">
|
|
<a-checkbox-group v-model="form.notifyMethods">
|
|
<a-checkbox value="inApp">站内消息</a-checkbox>
|
|
<a-checkbox value="email">电子邮件</a-checkbox>
|
|
</a-checkbox-group>
|
|
</a-form-item>
|
|
|
|
<a-form-item v-if="form.notifyMethods.includes('email')" label="通知邮箱">
|
|
<a-input v-model="form.notifyEmail" placeholder="请输入接收通知的邮箱" />
|
|
</a-form-item>
|
|
</template>
|
|
|
|
<a-divider />
|
|
|
|
<a-form-item label="爬虫日志">
|
|
<div class="log-container">
|
|
<div v-for="(log, index) in logs" :key="index" class="log-item">
|
|
[{{ log.time }}] {{ log.message }}
|
|
</div>
|
|
</div>
|
|
</a-form-item>
|
|
</a-form>
|
|
|
|
<template #footer>
|
|
<a-button @click="handleCancel">取消</a-button>
|
|
<a-button type="primary" @click="handleOk">保存设置</a-button>
|
|
</template>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, watch } from 'vue'
|
|
import { Message } from '@arco-design/web-vue'
|
|
|
|
interface LogEntry {
|
|
time: string
|
|
message: string
|
|
}
|
|
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:visible', 'save'])
|
|
|
|
const form = reactive({
|
|
frequency: 'daily',
|
|
keywords: ['风电', '叶片', '检查', '运维'],
|
|
platforms: ['国能e招', '中国节能', '三峡招标'],
|
|
autoNotify: true,
|
|
notifyMethods: ['inApp', 'email'],
|
|
notifyEmail: 'user@example.com'
|
|
})
|
|
|
|
const logs = ref<LogEntry[]>([
|
|
{ time: '2025-07-30 22:00', message: '爬虫任务已启动' },
|
|
{ time: '2025-07-30 21:00', message: '爬虫任务已启动' },
|
|
{ time: '2023-11-01 09:30', message: '成功爬取中国招标投标网数据' },
|
|
{ time: '2023-11-01 09:32', message: '成功爬取某省公共资源交易中心数据' },
|
|
{ time: '2023-11-02 10:15', message: '爬取企业自有招标平台失败：连接超时' }
|
|
])
|
|
|
|
const handleCancel = () => {
|
|
emit('update:visible', false)
|
|
}
|
|
|
|
const handleOk = () => {
|
|
Message.success('设置保存成功')
|
|
emit('save', form)
|
|
emit('update:visible', false)
|
|
}
|
|
|
|
// Watch for email notification toggle
|
|
watch(() => form.notifyMethods, (newVal) => {
|
|
if (!newVal.includes('email')) {
|
|
form.notifyEmail = ''
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.log-container {
|
|
height: 200px;
|
|
overflow-y: auto;
|
|
padding: 8px;
|
|
border: 1px solid var(--color-border-2);
|
|
border-radius: 4px;
|
|
background-color: var(--color-fill-2);
|
|
}
|
|
|
|
.log-item {
|
|
padding: 4px 0;
|
|
font-family: monospace;
|
|
font-size: 13px;
|
|
color: var(--color-text-2);
|
|
}
|
|
|
|
.log-item:not(:last-child) {
|
|
border-bottom: 1px dashed var(--color-border-2);
|
|
}
|
|
</style> |