初始化
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);
|
||||
}
|
||||
Reference in New Issue
Block a user