580 lines
21 KiB
HTML
580 lines
21 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, .form-group select {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
transition: border 0.3s;
|
|
}
|
|
|
|
.form-group input:focus, .form-group select: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: 500px;
|
|
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 .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('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>页码 (第1页为最新公告)</label>
|
|
<input type="number" id="listPage" value="1" min="1" max="300">
|
|
</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="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="10" min="1" max="50">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="normalFields">
|
|
<div class="form-group">
|
|
<label>采集数量</label>
|
|
<input type="number" id="reportLimit" value="50" min="1" max="200">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>金额阈值 (万元) - 只显示大于此金额的项目</label>
|
|
<input type="number" id="reportThreshold" value="100000" min="0" step="100">
|
|
</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" 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">
|
|
</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">
|
|
</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">
|
|
<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点采集大于1亿的项目">
|
|
</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> 只保留合同估算价大于设定阈值的项目</li>
|
|
<li><strong>邮件发送:</strong> 自动将筛选结果生成HTML报告并发送到配置的邮箱</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>
|
|
</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>
|