Files
tool-node/public/index.html
zhaojunlong b4afc1ce5a ```
feat(scheduler): 添加定时任务功能并集成前端配置界面

- 引入 node-cron 依赖以支持定时任务调度
- 新增定时任务相关 API 接口:获取配置、更新配置、查询状态、手动触发任务
- 前端新增“定时任务”标签页,支持 Cron 表达式配置与友好时间展示
- 支持通过 Web 界面启用/禁用定时任务、设置执行计划和金额阈值
- 定时任务可自动采集数据并发送邮件报告,无需重启服务即可生效新配置
- 优化配置保存逻辑,避免敏感信息泄露
```
2025-12-15 15:22:42 +08:00

642 lines
24 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>南京公共工程建设中心 - 公告采集工具</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 28px;
margin-bottom: 10px;
}
.header p {
opacity: 0.9;
font-size: 14px;
}
.tabs {
display: flex;
background: #f5f5f5;
border-bottom: 2px solid #e0e0e0;
}
.tab {
flex: 1;
padding: 15px;
text-align: center;
cursor: pointer;
background: #f5f5f5;
border: none;
font-size: 16px;
transition: all 0.3s;
}
.tab:hover {
background: #e8e8e8;
}
.tab.active {
background: white;
color: #667eea;
font-weight: bold;
border-bottom: 3px solid #667eea;
}
.content {
padding: 30px;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #333;
}
.form-group input {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
transition: border 0.3s;
}
.form-group input:focus {
outline: none;
border-color: #667eea;
}
.btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
margin-right: 10px;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.loading {
display: none;
text-align: center;
padding: 20px;
color: #667eea;
}
.loading.active {
display: block;
}
.spinner {
border: 3px solid #f3f3f3;
border-top: 3px solid #667eea;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.results {
margin-top: 20px;
}
.list-item {
background: #f9f9f9;
padding: 15px;
margin-bottom: 10px;
border-radius: 8px;
border-left: 4px solid #667eea;
}
.list-item h3 {
font-size: 16px;
margin-bottom: 8px;
color: #333;
}
.list-item .meta {
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
.list-item .budget {
display: inline-block;
background: #667eea;
color: white;
padding: 4px 12px;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
margin-top: 8px;
}
.list-item a {
color: #667eea;
text-decoration: none;
font-size: 14px;
}
.list-item a:hover {
text-decoration: underline;
}
.summary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.summary h2 {
margin-bottom: 15px;
font-size: 20px;
}
.summary .stat {
display: inline-block;
margin-right: 30px;
margin-bottom: 10px;
}
.summary .stat-label {
opacity: 0.9;
font-size: 14px;
}
.summary .stat-value {
font-size: 24px;
font-weight: bold;
margin-top: 5px;
}
.export-btn {
background: #28a745;
margin-top: 10px;
}
.export-btn:hover {
box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
}
.simple-list {
max-height: 380px;
overflow-y: auto;
}
.error {
background: #f8d7da;
color: #721c24;
padding: 15px;
border-radius: 8px;
margin-top: 10px;
}
.checkbox-wrapper {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: #f8f9ff;
border: 2px solid #e0e5ff;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
user-select: none;
}
.checkbox-wrapper:hover {
background: #eef1ff;
border-color: #667eea;
}
.checkbox-wrapper input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #667eea;
}
.checkbox-wrapper label {
margin: 0;
cursor: pointer;
font-size: 15px;
color: #333;
font-weight: 500;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 20px;
padding: 20px 0;
}
.pagination button {
background: white;
border: 2px solid #667eea;
color: #667eea;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
min-width: 40px;
}
.pagination button:hover:not(:disabled) {
background: #667eea;
color: white;
}
.pagination button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pagination button.active {
background: #667eea;
color: white;
font-weight: bold;
}
.pagination .page-info {
color: #666;
font-size: 14px;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>南京公共工程建设中心</h1>
<p>公告采集与分析工具</p>
</div>
<div class="tabs">
<button class="tab active" onclick="switchTab('list')">公告列表</button>
<button class="tab" onclick="switchTab('detail')">详情采集</button>
<button class="tab" onclick="switchTab('report')">生成报告</button>
<button class="tab" onclick="switchTab('scheduler')">定时任务</button>
<button class="tab" onclick="switchTab('email')">邮件配置</button>
</div>
<div class="content">
<!-- 公告列表 -->
<div id="list" class="tab-content active">
<div class="form-group">
<label>列表页URL (可选)</label>
<input type="text" id="listUrl" placeholder="默认: https://gjzx.nanjing.gov.cn/gggs/">
</div>
<div class="form-group">
<label>页码 (第1页为最新公告)</label>
<input type="number" id="listPage" value="1" min="1" max="100">
</div>
<button class="btn" onclick="fetchList()">获取公告列表</button>
<div id="listLoading" class="loading">
<div class="spinner"></div>
<p>正在采集...</p>
</div>
<div id="listResults" class="results"></div>
<div id="listPagination" class="pagination" style="display:none;">
<button onclick="goToListPage(1)" id="listFirstPage">首页</button>
<button onclick="goToListPage(currentListPage - 1)" id="listPrevPage">上一页</button>
<span class="page-info"><span id="listCurrentPage">1</span></span>
<button onclick="goToListPage(currentListPage + 1)" id="listNextPage">下一页</button>
</div>
</div>
<!-- 详情采集 -->
<div id="detail" class="tab-content">
<div class="form-group">
<div class="checkbox-wrapper" onclick="document.getElementById('useDetailDateRange').click();">
<input type="checkbox" id="useDetailDateRange" onchange="toggleDetailDateRange()" onclick="event.stopPropagation();">
<label for="useDetailDateRange">按时间范围采集</label>
</div>
</div>
<div id="detailDateRangeFields" style="display:none;">
<div class="form-group">
<label>开始日期</label>
<input type="date" id="detailStartDate">
</div>
<div class="form-group">
<label>结束日期</label>
<input type="date" id="detailEndDate">
</div>
<div class="form-group">
<label>最大采集页数</label>
<input type="number" id="detailMaxPages" value="1" min="1">
</div>
</div>
<div id="detailNormalFields">
<div class="form-group">
<label>列表页URL (可选)</label>
<input type="text" id="detailUrl" placeholder="默认: https://gjzx.nanjing.gov.cn/gggs/">
</div>
<div class="form-group">
<label>采集数量</label>
<input type="number" id="detailLimit" value="5" min="1" max="50">
</div>
</div>
<button class="btn" onclick="fetchDetails()">开始采集</button>
<div id="detailLoading" class="loading">
<div class="spinner"></div>
<p>正在采集详情...</p>
</div>
<div id="detailResults" class="results"></div>
</div>
<!-- 生成报告 -->
<div id="report" class="tab-content">
<div class="form-group">
<div class="checkbox-wrapper" onclick="document.getElementById('useDateRange').click();">
<input type="checkbox" id="useDateRange" onchange="toggleDateRange()" onclick="event.stopPropagation();">
<label for="useDateRange">按时间范围采集</label>
</div>
</div>
<div id="dateRangeFields" style="display:none;">
<div class="form-group">
<label>开始日期</label>
<input type="date" id="startDate">
</div>
<div class="form-group">
<label>结束日期</label>
<input type="date" id="endDate">
</div>
<div class="form-group">
<label>最大采集页数</label>
<input type="number" id="maxPages" value="1" min="1" >
</div>
</div>
<div id="normalFields">
<div class="form-group">
<label>列表页URL (可选)</label>
<input type="text" id="reportUrl" placeholder="默认: https://gjzx.nanjing.gov.cn/gggs/">
</div>
<div class="form-group">
<label>采集数量</label>
<input type="number" id="reportLimit" value="15" min="1" max="50">
</div>
</div>
<div class="form-group">
<label>金额阈值 (万元)</label>
<input type="number" id="reportThreshold" value="50" min="0" step="0.1">
</div>
<button class="btn" onclick="generateReport()">生成报告</button>
<button class="btn export-btn" onclick="exportReport()" id="exportBtn" style="display:none;">导出Word</button>
<button class="btn" onclick="sendReportByEmail()" id="sendEmailBtn" style="display:none; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">发送邮件</button>
<div id="reportLoading" class="loading">
<div class="spinner"></div>
<p>正在生成报告...</p>
</div>
<div id="reportResults" class="results"></div>
</div>
<!-- 定时任务 -->
<div id="scheduler" class="tab-content">
<h2 style="margin-bottom: 20px; color: #667eea;">定时任务配置</h2>
<p style="color: #666; margin-bottom: 20px;">配置定时任务自动采集本月大于指定金额的项目并发送邮件报告</p>
<!-- 任务状态 -->
<div id="schedulerStatus" style="margin-bottom: 30px; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px;">
<h3 style="margin-top: 0; margin-bottom: 15px;">任务状态</h3>
<div style="display: flex; gap: 30px; flex-wrap: wrap;">
<div>
<div style="opacity: 0.9; font-size: 14px;">运行状态</div>
<div style="font-size: 20px; font-weight: bold; margin-top: 5px;" id="schedulerRunningStatus">加载中...</div>
</div>
<div>
<div style="opacity: 0.9; font-size: 14px;">执行时间</div>
<div style="font-size: 20px; font-weight: bold; margin-top: 5px;" id="schedulerCronTime">-</div>
</div>
<div>
<div style="opacity: 0.9; font-size: 14px;">金额阈值</div>
<div style="font-size: 20px; font-weight: bold; margin-top: 5px;" id="schedulerThreshold">-</div>
</div>
</div>
</div>
<!-- 配置表单 -->
<div class="form-group">
<div class="checkbox-wrapper" onclick="document.getElementById('schedulerEnabled').click();">
<input type="checkbox" id="schedulerEnabled" onclick="event.stopPropagation();">
<label for="schedulerEnabled">启用定时任务</label>
</div>
</div>
<div class="form-group">
<label>执行计划</label>
<select id="schedulerCronPreset" style="width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px;" onchange="handleCronPresetChange()">
<option value="0 9 * * *">每天上午9点</option>
<option value="0 6 * * *">每天上午6点</option>
<option value="0 12 * * *">每天中午12点</option>
<option value="0 18 * * *">每天下午18点</option>
<option value="0 9,18 * * *">每天9点和18点</option>
<option value="0 */6 * * *">每6小时</option>
<option value="0 */12 * * *">每12小时</option>
<option value="0 9 * * 1">每周一上午9点</option>
<option value="0 9 1 * *">每月1日上午9点</option>
<option value="custom">自定义时间...</option>
</select>
</div>
<!-- 自定义时间配置 -->
<div class="form-group" id="customCronGroup" style="display: none;">
<label>自定义执行时间</label>
<div style="display: flex; gap: 10px; align-items: center;">
<div style="flex: 1;">
<label style="font-size: 12px; color: #666;">小时 (0-23)</label>
<input type="number" id="customHour" min="0" max="23" value="9" style="width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px;">
</div>
<div style="flex: 1;">
<label style="font-size: 12px; color: #666;">分钟 (0-59)</label>
<input type="number" id="customMinute" min="0" max="59" value="0" style="width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px;">
</div>
</div>
<small style="color: #666; display: block; margin-top: 5px;">
将在每天指定的时间执行
</small>
</div>
<!-- 隐藏的Cron表达式字段 -->
<input type="hidden" id="schedulerCronInput" value="0 9 * * *">
<div class="form-group">
<label>采集时间段</label>
<select id="schedulerTimeRange" style="width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px;">
<option value="today">今日</option>
<option value="thisWeek">本周</option>
<option value="thisMonth" selected>本月</option>
</select>
<small style="color: #666; display: block; margin-top: 5px;">
今日:今天 | 本周:本周一至今 | 本月:本月1日至今
</small>
</div>
<div class="form-group">
<label>金额阈值 (万元)</label>
<input type="number" id="schedulerThresholdInput" value="100000" min="0" step="1000">
<small style="color: #666; display: block; margin-top: 5px;">
10亿 = 100000万元 | 5亿 = 50000万元 | 1亿 = 10000万元
</small>
</div>
<div class="form-group">
<label>任务描述 (可选)</label>
<input type="text" id="schedulerDescription" placeholder="例如: 每天9点采集大于10亿的项目">
</div>
<button class="btn" onclick="saveSchedulerConfig()">保存配置</button>
<button class="btn" onclick="testSchedulerNow()" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">立即测试运行</button>
<button class="btn" onclick="loadSchedulerConfig()" style="background: #6c757d;">刷新状态</button>
<div id="schedulerConfigStatus" style="margin-top: 20px;"></div>
<div style="margin-top: 30px; padding: 20px; background: #fff3cd; border-radius: 8px; border-left: 4px solid #ffc107;">
<h3 style="margin-top: 0; color: #856404;">使用说明</h3>
<ul style="line-height: 1.8; color: #856404;">
<li><strong>定时任务功能:</strong> 自动采集选中时间段的所有公告</li>
<li><strong>筛选条件:</strong> 只保留预算金额大于设定阈值的项目</li>
<li><strong>邮件发送:</strong> 自动将筛选结果生成HTML报告并发送到配置的邮箱</li>
<li><strong>执行时间:</strong> 通过下拉菜单或自定义时间设置定时执行时间</li>
<li><strong>注意事项:</strong> 保存配置后会自动重启定时任务,无需重启服务器</li>
</ul>
</div>
</div>
<!-- 邮件配置 -->
<div id="email" class="tab-content">
<h2 style="margin-bottom: 20px; color: #667eea;">邮件配置</h2>
<p style="color: #666; margin-bottom: 20px;">配置SMTP邮件服务器信息,用于发送报告到指定邮箱</p>
<div class="form-group">
<label>SMTP服务器地址 *</label>
<input type="text" id="smtpHost" placeholder="例如: smtp.qq.com, smtp.163.com, smtp.gmail.com">
</div>
<div class="form-group">
<label>SMTP端口 *</label>
<input type="number" id="smtpPort" value="587" placeholder="通常为 587 (TLS) 或 465 (SSL)">
</div>
<div class="form-group">
<label>发件人邮箱 (SMTP用户名) *</label>
<input type="email" id="smtpUser" placeholder="your-email@example.com">
</div>
<div class="form-group">
<label>SMTP密码/授权码 *</label>
<input type="password" id="smtpPass" placeholder="邮箱密码或授权码">
</div>
<div class="form-group">
<label>收件人邮箱 (多个用逗号分隔) *</label>
<input type="text" id="recipients" placeholder="email1@example.com, email2@example.com">
</div>
<button class="btn" onclick="saveEmailConfig()">保存配置</button>
<button class="btn" onclick="testEmailConfig()" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">测试连接</button>
<div id="emailConfigStatus" style="margin-top: 20px;"></div>
<div style="margin-top: 30px; padding: 20px; background: #f0f8ff; border-radius: 8px; border-left: 4px solid #667eea;">
<h3 style="margin-top: 0; color: #667eea;">常用邮箱配置参考</h3>
<ul style="line-height: 1.8; color: #666;">
<li><strong>QQ邮箱:</strong> smtp.qq.com, 端口 587 或 465, 需要使用授权码</li>
<li><strong>163邮箱:</strong> smtp.163.com, 端口 465 或 25, 需要使用授权码</li>
<li><strong>Gmail:</strong> smtp.gmail.com, 端口 587 或 465, 需要开启"允许不够安全的应用"</li>
<li><strong>Outlook:</strong> smtp-mail.outlook.com, 端口 587</li>
<li><strong>企业邮箱:</strong> 请咨询您的IT管理员获取SMTP配置</li>
</ul>
<p style="margin: 10px 0 0 0; color: #999; font-size: 13px;">
提示: QQ和163邮箱需要在邮箱设置中开启SMTP服务并生成授权码,授权码不是邮箱密码。
</p>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/docx@7.8.2/build/index.js"></script>
<script src="app.js"></script>
</body>
</html>