wangyifang
/
cz-hjjc-budget
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '8b69aefc7b'
${ noResults }
cz-hjjc-budget/ui/pages/budget.html

867 lines
34 KiB
Raw Normal View History Unescape

first ui
5 months ago
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>预算查询 - 资金使用管理系统</title>
<link href="https://cdn.staticfile.org/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
background-color: #f5f7fa;
padding: 20px;
}
.page-header {
background: white;
padding: 25px 30px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-between;
align-items: center;
}
.page-title {
font-size: 24px;
font-weight: 600;
color: #333;
margin: 0;
}
.page-title i {
margin-right: 10px;
color: #667eea;
}
.filter-section {
background: white;
padding: 20px 25px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.filter-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
align-items: end;
}
.form-label {
font-weight: 500;
color: #333;
margin-bottom: 8px;
font-size: 14px;
}
.main-content {
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.content-header {
padding: 20px 25px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.content-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0;
}
.permission-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.permission-badge.department {
background-color: #dbeafe;
color: #1e40af;
}
.permission-badge.authorized {
background-color: #d1fae5;
color: #065f46;
}
.budget-tree {
padding: 20px 25px;
}
.budget-level-1 {
margin-bottom: 15px;
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
background: #fafafa;
}
.budget-level-1-header {
padding: 15px 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all 0.3s;
}
.budget-level-1-header:hover {
opacity: 0.9;
}
.budget-level-1-header.collapsed {
background: #f3f4f6;
color: #333;
}
.budget-level-1-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 16px;
}
.budget-level-1-title i {
font-size: 20px;
}
.budget-level-1-info {
display: flex;
gap: 30px;
align-items: center;
}
.budget-info-item {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.budget-info-label {
font-size: 12px;
opacity: 0.8;
margin-bottom: 3px;
}
.budget-info-value {
font-size: 18px;
font-weight: 700;
}
.budget-level-1-content {
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.budget-level-1-content.show {
max-height: 5000px;
}
.budget-level-2 {
padding: 15px 20px;
border-bottom: 1px solid #e5e7eb;
background: white;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 150px;
gap: 15px;
align-items: center;
transition: background-color 0.3s;
}
.budget-level-2:hover {
background-color: #f8f9fa;
}
.budget-level-2:last-child {
border-bottom: none;
}
.budget-level-2-name {
font-weight: 500;
color: #333;
display: flex;
align-items: center;
gap: 8px;
}
.budget-level-2-name i {
color: #667eea;
font-size: 14px;
}
.budget-amount {
text-align: right;
font-weight: 600;
color: #333;
}
.budget-used {
text-align: right;
color: #666;
}
.budget-remaining {
text-align: right;
font-weight: 600;
}
.budget-remaining.positive {
color: #10b981;
}
.budget-remaining.negative {
color: #ef4444;
}
.budget-progress {
display: flex;
align-items: center;
gap: 10px;
}
.progress {
flex: 1;
height: 8px;
border-radius: 10px;
background-color: #e5e7eb;
}
.progress-bar {
border-radius: 10px;
transition: width 0.3s;
}
.progress-text {
font-size: 12px;
color: #666;
min-width: 45px;
text-align: right;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
}
.empty-state i {
font-size: 64px;
margin-bottom: 20px;
opacity: 0.3;
}
.empty-state p {
font-size: 16px;
}
.btn-action {
padding: 5px 12px;
font-size: 12px;
}
.summary-card {
background: white;
padding: 20px 25px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.summary-item {
text-align: center;
}
.summary-label {
font-size: 14px;
color: #666;
margin-bottom: 8px;
}
.summary-value {
font-size: 28px;
font-weight: 700;
color: #333;
}
.summary-value.positive {
color: #10b981;
}
.summary-value.negative {
color: #ef4444;
}
</style>
</head>
<body>
<!-- 页面头部 -->
<div class="page-header">
<h1 class="page-title">
<i class="bi bi-calculator"></i> 预算查询
</h1>
<div>
<span class="permission-badge department">
<i class="bi bi-shield-check"></i>
科室内权限
</span>
</div>
</div>
<!-- 筛选区域 -->
<div class="filter-section">
<form id="filterForm">
<div class="filter-row">
<div>
<label class="form-label">预算年度</label>
<select class="form-select" id="budgetYear">
<option value="2024" selected>2024年</option>
<option value="2023">2023年</option>
<option value="2022">2022年</option>
</select>
</div>
<div>
<label class="form-label">数据权限</label>
<select class="form-select" id="dataPermission">
<option value="department" selected>科室内</option>
<option value="authorized">授权给本科室/本人使用</option>
</select>
</div>
<div>
<label class="form-label">一级预算</label>
<select class="form-select" id="level1Budget">
<option value="">全部</option>
<option value="1">科研项目预算</option>
<option value="2">行政运行预算</option>
<option value="3">设备购置预算</option>
<option value="4">人员支出预算</option>
</select>
</div>
<div>
<label class="form-label">搜索</label>
<input type="text" class="form-control" id="searchKeyword" placeholder="输入预算名称搜索">
</div>
<div>
<button type="button" class="btn btn-primary w-100" onclick="searchBudget()">
<i class="bi bi-search"></i> 查询
</button>
</div>
<div>
<button type="button" class="btn btn-outline-secondary w-100" onclick="resetFilter()">
<i class="bi bi-arrow-clockwise"></i> 重置
</button>
</div>
</div>
</form>
</div>
<!-- 汇总统计 -->
<div class="summary-card">
<div class="summary-grid">
<div class="summary-item">
<div class="summary-label">总预算</div>
<div class="summary-value">¥12,580,000</div>
</div>
<div class="summary-item">
<div class="summary-label">已使用</div>
<div class="summary-value">¥8,245,680</div>
</div>
<div class="summary-item">
<div class="summary-label">剩余预算</div>
<div class="summary-value positive">¥4,334,320</div>
</div>
<div class="summary-item">
<div class="summary-label">执行率</div>
<div class="summary-value">65.5%</div>
</div>
</div>
</div>
<!-- 主要内容 -->
<div class="main-content">
<div class="content-header">
<h2 class="content-title">
<i class="bi bi-list-ul"></i> 预算明细
</h2>
<div>
<button class="btn btn-sm btn-outline-primary" onclick="expandAll()">
<i class="bi bi-arrows-expand"></i> 全部展开
</button>
<button class="btn btn-sm btn-outline-secondary" onclick="collapseAll()">
<i class="bi bi-arrows-collapse"></i> 全部收起
</button>
</div>
</div>
<div class="budget-tree" id="budgetTree">
<!-- 一级预算 1 -->
<div class="budget-level-1">
<div class="budget-level-1-header" onclick="toggleLevel1(this)">
<div class="budget-level-1-title">
<i class="bi bi-folder-fill"></i>
<span>科研项目预算</span>
</div>
<div class="budget-level-1-info">
<div class="budget-info-item">
<span class="budget-info-label">总预算</span>
<span class="budget-info-value">¥5,200,000</span>
</div>
<div class="budget-info-item">
<span class="budget-info-label">已使用</span>
<span class="budget-info-value">¥3,450,000</span>
</div>
<div class="budget-info-item">
<span class="budget-info-label">剩余</span>
<span class="budget-info-value" style="color: #10b981;">¥1,750,000</span>
</div>
<i class="bi bi-chevron-down" style="margin-left: 15px;"></i>
</div>
</div>
<div class="budget-level-1-content show">
<!-- 二级预算 -->
<div class="budget-level-2">
<div class="budget-level-2-name">
<i class="bi bi-file-earmark-text"></i>
课题A - 海洋环境监测
</div>
<div class="budget-amount">¥2,500,000</div>
<div class="budget-used">¥1,680,000</div>
<div class="budget-remaining positive">¥820,000</div>
<div class="budget-progress">
<div class="progress">
<div class="progress-bar bg-primary" style="width: 67.2%"></div>
</div>
<span class="progress-text">67.2%</span>
</div>
<div>
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(1)">
<i class="bi bi-eye"></i> 查看
</button>
</div>
</div>
<div class="budget-level-2">
<div class="budget-level-2-name">
<i class="bi bi-file-earmark-text"></i>
课题B - 数据分析平台
</div>
<div class="budget-amount">¥1,800,000</div>
<div class="budget-used">¥1,200,000</div>
<div class="budget-remaining positive">¥600,000</div>
<div class="budget-progress">
<div class="progress">
<div class="progress-bar bg-primary" style="width: 66.7%"></div>
</div>
<span class="progress-text">66.7%</span>
</div>
<div>
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(2)">
<i class="bi bi-eye"></i> 查看
</button>
</div>
</div>
<div class="budget-level-2">
<div class="budget-level-2-name">
<i class="bi bi-file-earmark-text"></i>
课题C - 设备维护升级
</div>
<div class="budget-amount">¥900,000</div>
<div class="budget-used">¥570,000</div>
<div class="budget-remaining positive">¥330,000</div>
<div class="budget-progress">
<div class="progress">
<div class="progress-bar bg-primary" style="width: 63.3%"></div>
</div>
<span class="progress-text">63.3%</span>
</div>
<div>
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(3)">
<i class="bi bi-eye"></i> 查看
</button>
</div>
</div>
</div>
</div>
<!-- 一级预算 2 -->
<div class="budget-level-1">
<div class="budget-level-1-header collapsed" onclick="toggleLevel1(this)">
<div class="budget-level-1-title">
<i class="bi bi-folder-fill"></i>
<span>行政运行预算</span>
</div>
<div class="budget-level-1-info">
<div class="budget-info-item">
<span class="budget-info-label">总预算</span>
<span class="budget-info-value">¥3,800,000</span>
</div>
<div class="budget-info-item">
<span class="budget-info-label">已使用</span>
<span class="budget-info-value">¥2,145,680</span>
</div>
<div class="budget-info-item">
<span class="budget-info-label">剩余</span>
<span class="budget-info-value" style="color: #10b981;">¥1,654,320</span>
</div>
<i class="bi bi-chevron-right" style="margin-left: 15px;"></i>
</div>
</div>
<div class="budget-level-1-content">
<div class="budget-level-2">
<div class="budget-level-2-name">
<i class="bi bi-file-earmark-text"></i>
办公用品采购
</div>
<div class="budget-amount">¥800,000</div>
<div class="budget-used">¥450,000</div>
<div class="budget-remaining positive">¥350,000</div>
<div class="budget-progress">
<div class="progress">
<div class="progress-bar bg-success" style="width: 56.3%"></div>
</div>
<span class="progress-text">56.3%</span>
</div>
<div>
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(4)">
<i class="bi bi-eye"></i> 查看
</button>
</div>
</div>
<div class="budget-level-2">
<div class="budget-level-2-name">
<i class="bi bi-file-earmark-text"></i>
会议培训费用
</div>
<div class="budget-amount">¥1,200,000</div>
<div class="budget-used">¥695,680</div>
<div class="budget-remaining positive">¥504,320</div>
<div class="budget-progress">
<div class="progress">
<div class="progress-bar bg-success" style="width: 58.0%"></div>
</div>
<span class="progress-text">58.0%</span>
</div>
<div>
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(5)">
<i class="bi bi-eye"></i> 查看
</button>
</div>
</div>
<div class="budget-level-2">
<div class="budget-level-2-name">
<i class="bi bi-file-earmark-text"></i>
差旅费用
</div>
<div class="budget-amount">¥1,000,000</div>
<div class="budget-used">¥600,000</div>
<div class="budget-remaining positive">¥400,000</div>
<div class="budget-progress">
<div class="progress">
<div class="progress-bar bg-success" style="width: 60.0%"></div>
</div>
<span class="progress-text">60.0%</span>
</div>
<div>
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(6)">
<i class="bi bi-eye"></i> 查看
</button>
</div>
</div>
<div class="budget-level-2">
<div class="budget-level-2-name">
<i class="bi bi-file-earmark-text"></i>
其他行政支出
</div>
<div class="budget-amount">¥800,000</div>
<div class="budget-used">¥400,000</div>
<div class="budget-remaining positive">¥400,000</div>
<div class="budget-progress">
<div class="progress">
<div class="progress-bar bg-success" style="width: 50.0%"></div>
</div>
<span class="progress-text">50.0%</span>
</div>
<div>
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(7)">
<i class="bi bi-eye"></i> 查看
</button>
</div>
</div>
</div>
</div>
<!-- 一级预算 3 -->
<div class="budget-level-1">
<div class="budget-level-1-header collapsed" onclick="toggleLevel1(this)">
<div class="budget-level-1-title">
<i class="bi bi-folder-fill"></i>
<span>设备购置预算</span>
</div>
<div class="budget-level-1-info">
<div class="budget-info-item">
<span class="budget-info-label">总预算</span>
<span class="budget-info-value">¥2,580,000</span>
</div>
<div class="budget-info-item">
<span class="budget-info-label">已使用</span>
<span class="budget-info-value">¥1,650,000</span>
</div>
<div class="budget-info-item">
<span class="budget-info-label">剩余</span>
<span class="budget-info-value" style="color: #10b981;">¥930,000</span>
</div>
<i class="bi bi-chevron-right" style="margin-left: 15px;"></i>
</div>
</div>
<div class="budget-level-1-content">
<div class="budget-level-2">
<div class="budget-level-2-name">
<i class="bi bi-file-earmark-text"></i>
科研设备采购
</div>
<div class="budget-amount">¥1,500,000</div>
<div class="budget-used">¥950,000</div>
<div class="budget-remaining positive">¥550,000</div>
<div class="budget-progress">
<div class="progress">
<div class="progress-bar bg-warning" style="width: 63.3%"></div>
</div>
<span class="progress-text">63.3%</span>
</div>
<div>
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(8)">
<i class="bi bi-eye"></i> 查看
</button>
</div>
</div>
<div class="budget-level-2">
<div class="budget-level-2-name">
<i class="bi bi-file-earmark-text"></i>
办公设备采购
</div>
<div class="budget-amount">¥680,000</div>
<div class="budget-used">¥450,000</div>
<div class="budget-remaining positive">¥230,000</div>
<div class="budget-progress">
<div class="progress">
<div class="progress-bar bg-warning" style="width: 66.2%"></div>
</div>
<span class="progress-text">66.2%</span>
</div>
<div>
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(9)">
<i class="bi bi-eye"></i> 查看
</button>
</div>
</div>
<div class="budget-level-2">
<div class="budget-level-2-name">
<i class="bi bi-file-earmark-text"></i>
设备维护费用
</div>
<div class="budget-amount">¥400,000</div>
<div class="budget-used">¥250,000</div>
<div class="budget-remaining positive">¥150,000</div>
<div class="budget-progress">
<div class="progress">
<div class="progress-bar bg-warning" style="width: 62.5%"></div>
</div>
<span class="progress-text">62.5%</span>
</div>
<div>
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(10)">
<i class="bi bi-eye"></i> 查看
</button>
</div>
</div>
</div>
</div>
<!-- 一级预算 4 -->
<div class="budget-level-1">
<div class="budget-level-1-header collapsed" onclick="toggleLevel1(this)">
<div class="budget-level-1-title">
<i class="bi bi-folder-fill"></i>
<span>人员支出预算</span>
</div>
<div class="budget-level-1-info">
<div class="budget-info-item">
<span class="budget-info-label">总预算</span>
<span class="budget-info-value">¥1,000,000</span>
</div>
<div class="budget-info-item">
<span class="budget-info-label">已使用</span>
<span class="budget-info-value">¥1,000,000</span>
</div>
<div class="budget-info-item">
<span class="budget-info-label">剩余</span>
<span class="budget-info-value" style="color: #ef4444;">¥0</span>
</div>
<i class="bi bi-chevron-right" style="margin-left: 15px;"></i>
</div>
</div>
<div class="budget-level-1-content">
<div class="budget-level-2">
<div class="budget-level-2-name">
<i class="bi bi-file-earmark-text"></i>
工资福利
</div>
<div class="budget-amount">¥1,000,000</div>
<div class="budget-used">¥1,000,000</div>
<div class="budget-remaining negative">¥0</div>
<div class="budget-progress">
<div class="progress">
<div class="progress-bar bg-danger" style="width: 100%"></div>
</div>
<span class="progress-text">100%</span>
</div>
<div>
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(11)">
<i class="bi bi-eye"></i> 查看
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
// 切换一级预算展开/收起
function toggleLevel1(element) {
const content = element.nextElementSibling;
const icon = element.querySelector('.bi-chevron-down, .bi-chevron-right');
if (content.classList.contains('show')) {
content.classList.remove('show');
element.classList.add('collapsed');
icon.classList.remove('bi-chevron-down');
icon.classList.add('bi-chevron-right');
} else {
content.classList.add('show');
element.classList.remove('collapsed');
icon.classList.remove('bi-chevron-right');
icon.classList.add('bi-chevron-down');
}
}
// 全部展开
function expandAll() {
document.querySelectorAll('.budget-level-1').forEach(item => {
const header = item.querySelector('.budget-level-1-header');
const content = item.querySelector('.budget-level-1-content');
const icon = header.querySelector('.bi-chevron-down, .bi-chevron-right');
content.classList.add('show');
header.classList.remove('collapsed');
icon.classList.remove('bi-chevron-right');
icon.classList.add('bi-chevron-down');
});
}
// 全部收起
function collapseAll() {
document.querySelectorAll('.budget-level-1').forEach(item => {
const header = item.querySelector('.budget-level-1-header');
const content = item.querySelector('.budget-level-1-content');
const icon = header.querySelector('.bi-chevron-down, .bi-chevron-right');
content.classList.remove('show');
header.classList.add('collapsed');
icon.classList.remove('bi-chevron-down');
icon.classList.add('bi-chevron-right');
});
}
// 查询预算
function searchBudget() {
const year = document.getElementById('budgetYear').value;
const permission = document.getElementById('dataPermission').value;
const level1 = document.getElementById('level1Budget').value;
const keyword = document.getElementById('searchKeyword').value;
// 更新权限标识
const permissionBadge = document.querySelector('.permission-badge');
if (permission === 'department') {
permissionBadge.className = 'permission-badge department';
permissionBadge.innerHTML = '<i class="bi bi-shield-check"></i> 科室内权限';
} else {
permissionBadge.className = 'permission-badge authorized';
permissionBadge.innerHTML = '<i class="bi bi-key"></i> 授权给本科室/本人使用';
}
// 这里应该调用后端API进行查询
console.log('查询参数:', { year, permission, level1, keyword });
// 模拟查询结果
alert('查询功能待对接后端API');
}
// 重置筛选
function resetFilter() {
document.getElementById('budgetYear').value = '2024';
document.getElementById('dataPermission').value = 'department';
document.getElementById('level1Budget').value = '';
document.getElementById('searchKeyword').value = '';
// 重置权限标识
const permissionBadge = document.querySelector('.permission-badge');
permissionBadge.className = 'permission-badge department';
permissionBadge.innerHTML = '<i class="bi bi-shield-check"></i> 科室内权限';
}
// 查看详情
function viewDetail(budgetId) {
// 这里可以打开详情模态框或跳转到详情页面
alert('预算详情功能待开发，预算ID: ' + budgetId);
}
// 数据权限切换
document.getElementById('dataPermission').addEventListener('change', function() {
const permission = this.value;
const permissionBadge = document.querySelector('.permission-badge');
if (permission === 'department') {
permissionBadge.className = 'permission-badge department';
permissionBadge.innerHTML = '<i class="bi bi-shield-check"></i> 科室内权限';
} else {
permissionBadge.className = 'permission-badge authorized';
permissionBadge.innerHTML = '<i class="bi bi-key"></i> 授权给本科室/本人使用';
}
});
</script>
</body>
</html>