529 lines
17 KiB
HTML
529 lines
17 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('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="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>
|