初始化
This commit is contained in:
445
public/app.js
Normal file
445
public/app.js
Normal file
@@ -0,0 +1,445 @@
|
||||
const API_BASE = 'http://localhost:3000/api';
|
||||
let currentReport = null;
|
||||
let currentListPage = 1;
|
||||
|
||||
function toggleDateRange() {
|
||||
const useDateRange = document.getElementById('useDateRange').checked;
|
||||
document.getElementById('dateRangeFields').style.display = useDateRange ? 'block' : 'none';
|
||||
document.getElementById('normalFields').style.display = useDateRange ? 'none' : 'block';
|
||||
}
|
||||
|
||||
function toggleDetailDateRange() {
|
||||
const useDetailDateRange = document.getElementById('useDetailDateRange').checked;
|
||||
document.getElementById('detailDateRangeFields').style.display = useDetailDateRange ? 'block' : 'none';
|
||||
document.getElementById('detailNormalFields').style.display = useDetailDateRange ? 'none' : 'block';
|
||||
}
|
||||
|
||||
function switchTab(tabName) {
|
||||
// 隐藏所有标签内容
|
||||
document.querySelectorAll('.tab-content').forEach(content => {
|
||||
content.classList.remove('active');
|
||||
});
|
||||
document.querySelectorAll('.tab').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
|
||||
// 显示选中的标签
|
||||
document.getElementById(tabName).classList.add('active');
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
|
||||
async function fetchList(pageNum) {
|
||||
const url = document.getElementById('listUrl').value;
|
||||
const page = pageNum || parseInt(document.getElementById('listPage').value) || 1;
|
||||
const loading = document.getElementById('listLoading');
|
||||
const results = document.getElementById('listResults');
|
||||
const pagination = document.getElementById('listPagination');
|
||||
|
||||
currentListPage = page;
|
||||
document.getElementById('listPage').value = page;
|
||||
|
||||
loading.classList.add('active');
|
||||
results.innerHTML = '';
|
||||
pagination.style.display = 'none';
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/list?url=${encodeURIComponent(url)}&page=${page}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
displayList(data.data, results);
|
||||
updateListPagination(page, data.data.length > 0);
|
||||
} else {
|
||||
results.innerHTML = `<div class="error">错误: ${data.error}</div>`;
|
||||
}
|
||||
} catch (error) {
|
||||
results.innerHTML = `<div class="error">请求失败: ${error.message}</div>`;
|
||||
} finally {
|
||||
loading.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
function goToListPage(page) {
|
||||
if (page < 1) return;
|
||||
fetchList(page);
|
||||
}
|
||||
|
||||
function updateListPagination(page, hasData) {
|
||||
const pagination = document.getElementById('listPagination');
|
||||
const currentPageSpan = document.getElementById('listCurrentPage');
|
||||
const prevBtn = document.getElementById('listPrevPage');
|
||||
const firstBtn = document.getElementById('listFirstPage');
|
||||
const nextBtn = document.getElementById('listNextPage');
|
||||
|
||||
if (hasData) {
|
||||
pagination.style.display = 'flex';
|
||||
currentPageSpan.textContent = page;
|
||||
|
||||
prevBtn.disabled = page <= 1;
|
||||
firstBtn.disabled = page <= 1;
|
||||
nextBtn.disabled = !hasData;
|
||||
}
|
||||
}
|
||||
|
||||
function displayList(items, container) {
|
||||
if (items.length === 0) {
|
||||
container.innerHTML = '<p>没有找到公告</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const html = `
|
||||
<div class="simple-list">
|
||||
<h3 style="margin-bottom: 15px;">找到 ${items.length} 条公告</h3>
|
||||
${items.map((item, index) => `
|
||||
<div class="list-item">
|
||||
<h3>${index + 1}. ${item.title}</h3>
|
||||
<div class="meta">发布日期: ${item.date}</div>
|
||||
<a href="${item.href}" target="_blank">查看详情 →</a>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
async function fetchDetails() {
|
||||
const useDetailDateRange = document.getElementById('useDetailDateRange').checked;
|
||||
const loading = document.getElementById('detailLoading');
|
||||
const results = document.getElementById('detailResults');
|
||||
|
||||
loading.classList.add('active');
|
||||
results.innerHTML = '';
|
||||
|
||||
try {
|
||||
let listData;
|
||||
|
||||
if (useDetailDateRange) {
|
||||
// 时间范围模式
|
||||
const startDate = document.getElementById('detailStartDate').value;
|
||||
const endDate = document.getElementById('detailEndDate').value;
|
||||
const maxPages = parseInt(document.getElementById('detailMaxPages').value);
|
||||
|
||||
if (!startDate && !endDate) {
|
||||
results.innerHTML = '<div class="error">请至少填写开始日期或结束日期</div>';
|
||||
loading.classList.remove('active');
|
||||
return;
|
||||
}
|
||||
|
||||
const dateRangeResponse = await fetch(`${API_BASE}/list-daterange`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ startDate, endDate, maxPages })
|
||||
});
|
||||
|
||||
listData = await dateRangeResponse.json();
|
||||
} else {
|
||||
// 普通模式
|
||||
const url = document.getElementById('detailUrl').value;
|
||||
const listResponse = await fetch(`${API_BASE}/list?url=${encodeURIComponent(url)}`);
|
||||
listData = await listResponse.json();
|
||||
}
|
||||
|
||||
if (!listData.success) {
|
||||
results.innerHTML = `<div class="error">错误: ${listData.error}</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
// 抓取详情
|
||||
const limit = useDetailDateRange ? listData.data.length : parseInt(document.getElementById('detailLimit').value);
|
||||
const detailResponse = await fetch(`${API_BASE}/details`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ items: listData.data, limit })
|
||||
});
|
||||
|
||||
const detailData = await detailResponse.json();
|
||||
|
||||
if (detailData.success) {
|
||||
displayDetails(detailData.data, results);
|
||||
} else {
|
||||
results.innerHTML = `<div class="error">错误: ${detailData.error}</div>`;
|
||||
}
|
||||
} catch (error) {
|
||||
results.innerHTML = `<div class="error">请求失败: ${error.message}</div>`;
|
||||
} finally {
|
||||
loading.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
function displayDetails(items, container) {
|
||||
const html = `
|
||||
<div style="max-height: 380px; overflow-y: auto;">
|
||||
<h3 style="margin-bottom: 15px;">抓取了 ${items.length} 条详情</h3>
|
||||
${items.map((item, index) => `
|
||||
<div class="list-item">
|
||||
<h3>${index + 1}. ${item.title}</h3>
|
||||
<div class="meta">发布日期: ${item.date}</div>
|
||||
${item.detail ? `
|
||||
<div class="meta">发布时间: ${item.detail.publishTime || '未知'}</div>
|
||||
${item.detail.budget ? `
|
||||
<span class="budget">${item.detail.budget.amount}${item.detail.budget.unit}</span>
|
||||
` : '<div class="meta">未找到预算信息</div>'}
|
||||
` : '<div class="error">抓取失败</div>'}
|
||||
<br><a href="${item.href}" target="_blank">查看原文 →</a>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
async function generateReport() {
|
||||
const useDateRange = document.getElementById('useDateRange').checked;
|
||||
const threshold = parseFloat(document.getElementById('reportThreshold').value);
|
||||
const loading = document.getElementById('reportLoading');
|
||||
const results = document.getElementById('reportResults');
|
||||
const exportBtn = document.getElementById('exportBtn');
|
||||
|
||||
loading.classList.add('active');
|
||||
results.innerHTML = '';
|
||||
exportBtn.style.display = 'none';
|
||||
|
||||
try {
|
||||
let response;
|
||||
|
||||
if (useDateRange) {
|
||||
// 时间范围模式
|
||||
const startDate = document.getElementById('startDate').value;
|
||||
const endDate = document.getElementById('endDate').value;
|
||||
const maxPages = parseInt(document.getElementById('maxPages').value);
|
||||
|
||||
if (!startDate && !endDate) {
|
||||
results.innerHTML = '<div class="error">请至少填写开始日期或结束日期</div>';
|
||||
loading.classList.remove('active');
|
||||
return;
|
||||
}
|
||||
|
||||
response = await fetch(`${API_BASE}/report-daterange`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ startDate, endDate, threshold, maxPages })
|
||||
});
|
||||
} else {
|
||||
// 普通模式
|
||||
const url = document.getElementById('reportUrl').value;
|
||||
const limit = parseInt(document.getElementById('reportLimit').value);
|
||||
|
||||
response = await fetch(`${API_BASE}/report`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url, limit, threshold })
|
||||
});
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
currentReport = data.data;
|
||||
displayReport(data.data, results);
|
||||
exportBtn.style.display = 'inline-block';
|
||||
} else {
|
||||
results.innerHTML = `<div class="error">错误: ${data.error}</div>`;
|
||||
}
|
||||
} catch (error) {
|
||||
results.innerHTML = `<div class="error">请求失败: ${error.message}</div>`;
|
||||
} finally {
|
||||
loading.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
function displayReport(report, container) {
|
||||
const html = `
|
||||
<div class="summary">
|
||||
<h2>统计摘要</h2>
|
||||
<div class="stat">
|
||||
<div class="stat-label">总项目数</div>
|
||||
<div class="stat-value">${report.summary.total_count}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">符合条件</div>
|
||||
<div class="stat-value">${report.summary.filtered_count}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">总金额</div>
|
||||
<div class="stat-value">${report.summary.total_amount}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">阈值</div>
|
||||
<div class="stat-value">${report.summary.threshold}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${report.projects.length === 0 ? '<p>暂无符合条件的项目</p>' : `
|
||||
<h3 style="margin-bottom: 15px;">项目列表</h3>
|
||||
${report.projects.map((project, index) => `
|
||||
<div class="list-item">
|
||||
<h3>${index + 1}. ${project.title}</h3>
|
||||
<div class="meta">发布日期: ${project.date}</div>
|
||||
<div class="meta">发布时间: ${project.publish_time}</div>
|
||||
<span class="budget">${project.budget.amount}${project.budget.unit}</span>
|
||||
<div class="meta" style="margin-top: 8px;">金额描述: ${project.budget.text}</div>
|
||||
<br><a href="${project.url}" target="_blank">查看详情 →</a>
|
||||
</div>
|
||||
`).join('')}
|
||||
`}
|
||||
`;
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
async function exportReport() {
|
||||
if (!currentReport) return;
|
||||
|
||||
// 检查docx库是否加载
|
||||
if (!window.docx) {
|
||||
alert('Word导出库正在加载中,请稍后再试...');
|
||||
return;
|
||||
}
|
||||
|
||||
const report = currentReport;
|
||||
const { Document, Packer, Paragraph, TextRun, HeadingLevel, AlignmentType } = window.docx;
|
||||
|
||||
// 构建文档段落
|
||||
const paragraphs = [];
|
||||
|
||||
// 标题
|
||||
paragraphs.push(
|
||||
new Paragraph({
|
||||
text: '南京公共工程建设项目报告',
|
||||
heading: HeadingLevel.HEADING_1,
|
||||
alignment: AlignmentType.CENTER,
|
||||
spacing: { after: 200 }
|
||||
})
|
||||
);
|
||||
|
||||
// 生成时间
|
||||
paragraphs.push(
|
||||
new Paragraph({
|
||||
children: [
|
||||
new TextRun({
|
||||
text: '生成时间: ',
|
||||
bold: true
|
||||
}),
|
||||
new TextRun({
|
||||
text: new Date(report.summary.generated_at).toLocaleString('zh-CN')
|
||||
})
|
||||
],
|
||||
spacing: { after: 200 }
|
||||
})
|
||||
);
|
||||
|
||||
// 统计摘要标题
|
||||
paragraphs.push(
|
||||
new Paragraph({
|
||||
text: '统计摘要',
|
||||
heading: HeadingLevel.HEADING_2,
|
||||
spacing: { before: 200, after: 100 }
|
||||
})
|
||||
);
|
||||
|
||||
// 统计数据
|
||||
paragraphs.push(
|
||||
new Paragraph({
|
||||
children: [new TextRun({ text: `• 总项目数: ${report.summary.total_count}` })],
|
||||
spacing: { after: 50 }
|
||||
}),
|
||||
new Paragraph({
|
||||
children: [new TextRun({ text: `• 超过${report.summary.threshold}的项目: ${report.summary.filtered_count}` })],
|
||||
spacing: { after: 50 }
|
||||
}),
|
||||
new Paragraph({
|
||||
children: [new TextRun({ text: `• 总金额: ${report.summary.total_amount}` })],
|
||||
spacing: { after: 200 }
|
||||
})
|
||||
);
|
||||
|
||||
// 项目列表标题
|
||||
paragraphs.push(
|
||||
new Paragraph({
|
||||
text: '项目列表',
|
||||
heading: HeadingLevel.HEADING_2,
|
||||
spacing: { before: 200, after: 100 }
|
||||
})
|
||||
);
|
||||
|
||||
// 项目详情
|
||||
if (report.projects.length === 0) {
|
||||
paragraphs.push(
|
||||
new Paragraph({
|
||||
text: '暂无符合条件的项目。',
|
||||
spacing: { after: 100 }
|
||||
})
|
||||
);
|
||||
} else {
|
||||
report.projects.forEach((project, index) => {
|
||||
// 项目标题
|
||||
paragraphs.push(
|
||||
new Paragraph({
|
||||
text: `${index + 1}. ${project.title}`,
|
||||
heading: HeadingLevel.HEADING_3,
|
||||
spacing: { before: 150, after: 100 }
|
||||
})
|
||||
);
|
||||
|
||||
// 项目详情
|
||||
paragraphs.push(
|
||||
new Paragraph({
|
||||
children: [
|
||||
new TextRun({ text: '发布日期: ', bold: true }),
|
||||
new TextRun({ text: project.date })
|
||||
],
|
||||
spacing: { after: 50 }
|
||||
}),
|
||||
new Paragraph({
|
||||
children: [
|
||||
new TextRun({ text: '发布时间: ', bold: true }),
|
||||
new TextRun({ text: project.publish_time })
|
||||
],
|
||||
spacing: { after: 50 }
|
||||
}),
|
||||
new Paragraph({
|
||||
children: [
|
||||
new TextRun({ text: '预算金额: ', bold: true }),
|
||||
new TextRun({ text: `${project.budget.amount}${project.budget.unit}` })
|
||||
],
|
||||
spacing: { after: 50 }
|
||||
}),
|
||||
new Paragraph({
|
||||
children: [
|
||||
new TextRun({ text: '链接: ', bold: true }),
|
||||
new TextRun({ text: project.url, color: '0000FF' })
|
||||
],
|
||||
spacing: { after: 50 }
|
||||
}),
|
||||
new Paragraph({
|
||||
children: [
|
||||
new TextRun({ text: '金额描述: ', bold: true }),
|
||||
new TextRun({ text: project.budget.text })
|
||||
],
|
||||
spacing: { after: 100 }
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// 创建文档
|
||||
const doc = new Document({
|
||||
sections: [{
|
||||
properties: {},
|
||||
children: paragraphs
|
||||
}]
|
||||
});
|
||||
|
||||
// 生成并下载Word文件
|
||||
const blob = await Packer.toBlob(doc);
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `report_${new Date().getTime()}.docx`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
476
public/index.html
Normal file
476
public/index.html
Normal file
@@ -0,0 +1,476 @@
|
||||
<!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>
|
||||
</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>
|
||||
|
||||
<div id="reportLoading" class="loading">
|
||||
<div class="spinner"></div>
|
||||
<p>正在生成报告...</p>
|
||||
</div>
|
||||
|
||||
<div id="reportResults" class="results"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/docx@7.8.2/build/index.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user