软件工程

Shadowlover
38 阅读3分钟

软件工程

科技政策一点通前端页面 ` 科技政策一点通 # 科技政策一点通

  • 首页

  • 政策动态

  • 科技政策

  • 政策解读

  • 政策问答

  • 政策培训

  • 综合

  • 科研机构改革

  • 科技计划管理

  • 科技经费与财务

  • 基础研究与科研基地 * 基础研究

  • 平台基地

  • 企业技术进步与高新技术产业化 * 企业

  • 产业

  • 创新载体

  • 农村科技与社会发展

  • 科技人才

  • 科技中介服务

  • 科技条件与标准

  • 科技金融与税收

  • 科技成果与知识产权

  • 科技奖励

  • 科学技术普及 政策标题： 政策内容： 发文机构： 政策分类： 全部 综合 科研机构改革 科技计划管理 政策文号： 查询 ```

<div id="detailModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h2 id="detailTitle"></h2>
        <div class="detail-meta" id="detailMeta"></div>
        <div class="content" id="detailContent"></div>
    </div>
</div>
``` ` `document.addEventListener('DOMContentLoaded', function() { let currentPage = 0; const pageSize = 10; ``` // 初始化加载第一页数据 loadPolicies({}, currentPage);

// 查询按钮点击事件 document.getElementById('searchBtn').addEventListener('click', function() { currentPage = 0; // 重置到第一页

const searchParams = {
    name: document.getElementById('nameKeyword').value,
    text: document.getElementById('textKeyword').value,
    organ: document.getElementById('organKeyword').value,
    type: document.getElementById('typeSelect').value,
    document: document.getElementById('documentKeyword').value
};

loadPolicies(searchParams, currentPage);

});

// 加载政策列表 function loadPolicies(params, page) { const urlParams = new URLSearchParams({ page: page, size: pageSize });

// 添加查询参数
if (params.name) urlParams.append('name', params.name);
if (params.text) urlParams.append('text', params.text);
if (params.organ) urlParams.append('organ', params.organ);
if (params.type) urlParams.append('type', params.type);
if (params.document) urlParams.append('document', params.document);

fetch(`/api/policy/search?${urlParams.toString()}`)
    .then(response => response.json())
    .then(data => {
        displayPolicies(data.content);
        setupPagination(data.totalPages, page);
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('policyList').innerHTML =
            '<div class="error">加载失败，请稍后再试</div>';
    });

}

// 显示政策列表 function displayPolicies(policies) { const container = document.getElementById('policyList'); container.innerHTML = '';

if (policies.length === 0) {
    container.innerHTML = '<div class="no-data">没有找到符合条件的政策</div>';
    return;
}

policies.forEach(policy => {
    const item = document.createElement('div');
    item.className = 'policy-item';
    item.onclick = () => showDetail(policy.id);
    item.innerHTML = `
        <h3>${policy.name || '未命名政策'}</h3>
        <p class="meta">
            发文机构：${policy.organ || '未知'} | 
            文号：${policy.document || '无'} | 
            分类：${policy.type || '未分类'}
        </p>
    `;
    container.appendChild(item);
});

}

// 设置分页 function setupPagination(totalPages, currentPage) { const pagination = document.getElementById('pagination'); pagination.innerHTML = '';

// 上一页按钮
if (currentPage > 0) {
    const prevBtn = document.createElement('button');
    prevBtn.innerHTML = '&laquo; 上一页';
    prevBtn.addEventListener('click', () => {
        loadPolicies(getCurrentSearchParams(), currentPage - 1);
    });
    pagination.appendChild(prevBtn);
}

// 页码按钮
for (let i = 0; i < totalPages; i++) {
    const pageBtn = document.createElement('button');
    pageBtn.innerText = i + 1;
    pageBtn.className = i === currentPage ? 'active' : '';
    pageBtn.addEventListener('click', () => {
        loadPolicies(getCurrentSearchParams(), i);
    });
    pagination.appendChild(pageBtn);
}

// 下一页按钮
if (currentPage < totalPages - 1) {
    const nextBtn = document.createElement('button');
    nextBtn.innerHTML = '下一页 &raquo;';
    nextBtn.addEventListener('click', () => {
        loadPolicies(getCurrentSearchParams(), currentPage + 1);
    });
    pagination.appendChild(nextBtn);
}

}

// 获取当前搜索条件 function getCurrentSearchParams() { return { name: document.getElementById('nameKeyword').value, text: document.getElementById('textKeyword').value, organ: document.getElementById('organKeyword').value, type: document.getElementById('typeSelect').value, document: document.getElementById('documentKeyword').value }; }

// 显示详情弹窗（保持不变） function showDetail(id) { fetch(/api/policy/detail/${id}) .then(response => response.json()) .then(policy => { document.getElementById('detailTitle').textContent = policy.name; document.getElementById('detailMeta').innerHTML = 发文机构：${policy.organ || '未知'}<br> 文号：${policy.document || '无'}<br> 分类：${policy.type || '未分类'}<br> 发布日期：${policy.pubdata ? new Date(policy.pubdata).toLocaleDateString() : '未公布'} ; document.getElementById('detailContent').textContent = policy.text || '暂无详细内容'; document.getElementById('detailModal').style.display = 'block'; }); }

// 关闭弹窗（保持不变） window.closeModal = function() { document.getElementById('detailModal').style.display = 'none'; };

 }); `` /* 导航栏样式 / nav ul { list-style-type: none; padding: 0; display: flex; / 使用 Flexbox 布局 / justify-content: space-between; / 水平均匀分布 */ } nav ul li { margin: 0 10px; /* 调整项目之间的间距 */ } nav ul li a { text-decoration: none; color: #333; font-size: 16px; } /* 政策列表样式 */ .policy-list { display: grid; gap: 15px; } .policy-item { padding: 15px; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; transition: all 0.3s; } .policy-item:hover { background-color: #f5f5f5; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .policy-item h3 { margin: 0 0 8px 0; color: #333; } .policy-item .meta { margin: 0; color: #666; font-size: 14px; } /* 详情弹窗样式 */ .modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); } .modal-content { background-color: #fff; margin: 5% auto; padding: 20px; width: 70%; max-width: 800px; border-radius: 5px; } .close { float: right; font-size: 24px; cursor: pointer; } .detail-meta { color: #666; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px; } .search-filter { background: #f5f5f5; padding: 15px; border-radius: 5px; margin-bottom: 20px; } .search-row { display: flex; margin-bottom: 10px; } .search-item { flex: 1; margin-right: 15px; } .search-item:last-child { margin-right: 0; } .search-item label { display: block; margin-bottom: 5px; font-weight: bold; } .search-item input, .search-item select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } # searchBtn {

padding: 8px 20px; background: #1890ff; color: white; border: none; border-radius: 4px; cursor: pointer;

 } # searchBtn:hover {

background: #40a9ff;

 } .pagination { margin-top: 20px; text-align: center; } .pagination button { margin: 0 5px; padding: 5px 10px; border: 1px solid #ddd; background: white; cursor: pointer; } .pagination button.active { background: #1890ff; color: white; border-color: #1890ff; } .error, .no-data { padding: 20px; text-align: center; color: #f5222d; } /* 详情弹窗样式保持不变 */ body { font-family: Arial, sans-serif; } header { background-color: #007bff; color: white; padding: 10px; } .search-bar { margin-top: 10px; } aside { width: 200px; float: left; padding: 10px; } section { margin-left: 220px; padding: 10px; } .policy-item { margin-bottom: 10px; } .search-filter { margin-bottom: 10px; } `

> 原文链接: https://www.cnblogs.com/ytrkkaa/p/18806905
avatar
文章
阅读
粉丝