|
|
<!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>
|
|
|
|
