|
|
|
|
|
<!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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.summary-cards {
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
|
|
|
|
gap: 20px;
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.summary-card {
|
|
|
|
|
|
background: white;
|
|
|
|
|
|
padding: 25px;
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.summary-card:hover {
|
|
|
|
|
|
transform: translateY(-5px);
|
|
|
|
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.summary-card-header {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.summary-card-title {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.summary-card-icon {
|
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.summary-card-icon.overall {
|
|
|
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.summary-card-icon.high {
|
|
|
|
|
|
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.summary-card-icon.medium {
|
|
|
|
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.summary-card-icon.low {
|
|
|
|
|
|
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.summary-card-value {
|
|
|
|
|
|
font-size: 36px;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.summary-card-change {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
gap: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.summary-card-change.positive {
|
|
|
|
|
|
color: #10b981;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.summary-card-change.negative {
|
|
|
|
|
|
color: #ef4444;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.rate-badge {
|
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 4px 12px;
|
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.rate-badge.excellent {
|
|
|
|
|
|
background-color: #d1fae5;
|
|
|
|
|
|
color: #065f46;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.rate-badge.good {
|
|
|
|
|
|
background-color: #dbeafe;
|
|
|
|
|
|
color: #1e40af;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.rate-badge.warning {
|
|
|
|
|
|
background-color: #fef3c7;
|
|
|
|
|
|
color: #92400e;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.rate-badge.danger {
|
|
|
|
|
|
background-color: #fee2e2;
|
|
|
|
|
|
color: #991b1b;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.table-container {
|
|
|
|
|
|
padding: 25px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.table {
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.table thead th {
|
|
|
|
|
|
border-top: none;
|
|
|
|
|
|
border-bottom: 2px solid #e5e7eb;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
padding: 12px;
|
|
|
|
|
|
background-color: #f8f9fa;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.table tbody td {
|
|
|
|
|
|
padding: 15px 12px;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
border-bottom: 1px solid #f3f4f6;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.table tbody tr:hover {
|
|
|
|
|
|
background-color: #f8f9fa;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.progress-cell {
|
|
|
|
|
|
min-width: 200px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.progress {
|
|
|
|
|
|
height: 10px;
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
background-color: #e5e7eb;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.progress-bar {
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
transition: width 0.3s;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.progress-bar.excellent {
|
|
|
|
|
|
background-color: #10b981;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.progress-bar.good {
|
|
|
|
|
|
background-color: #3b82f6;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.progress-bar.warning {
|
|
|
|
|
|
background-color: #f59e0b;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.progress-bar.danger {
|
|
|
|
|
|
background-color: #ef4444;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-container {
|
|
|
|
|
|
padding: 25px;
|
|
|
|
|
|
border-bottom: 1px solid #e5e7eb;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-title {
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-grid {
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
|
|
|
|
gap: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-item {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-circle {
|
|
|
|
|
|
width: 150px;
|
|
|
|
|
|
height: 150px;
|
|
|
|
|
|
margin: 0 auto 15px;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-circle svg {
|
|
|
|
|
|
transform: rotate(-90deg);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-circle-text {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-circle-value {
|
|
|
|
|
|
font-size: 32px;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-circle-label {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chart-item-title {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #666;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.department-badge {
|
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
gap: 5px;
|
|
|
|
|
|
padding: 4px 10px;
|
|
|
|
|
|
background-color: #f0f0ff;
|
|
|
|
|
|
color: #667eea;
|
|
|
|
|
|
border-radius: 15px;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.btn-action {
|
|
|
|
|
|
padding: 5px 12px;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.empty-state {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
padding: 60px 20px;
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.empty-state i {
|
|
|
|
|
|
font-size: 64px;
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
opacity: 0.3;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<!-- 页面头部 -->
|
|
|
|
|
|
<div class="page-header">
|
|
|
|
|
|
<h1 class="page-title">
|
|
|
|
|
|
<i class="bi bi-percent"></i> 执行率管理
|
|
|
|
|
|
</h1>
|
|
|
|
|
|
<div class="department-badge">
|
|
|
|
|
|
<i class="bi bi-building"></i>
|
|
|
|
|
|
当前科室：技术研发部
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 筛选区域 -->
|
|
|
|
|
|
<div class="filter-section">
|
|
|
|
|
|
<form id="filterForm">
|
|
|
|
|
|
<div class="filter-row">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label class="form-label">统计年度</label>
|
|
|
|
|
|
<select class="form-select" id="statYear">
|
|
|
|
|
|
<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="statPeriod">
|
|
|
|
|
|
<option value="year" selected>年度</option>
|
|
|
|
|
|
<option value="quarter">季度</option>
|
|
|
|
|
|
<option value="month">月度</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>
|
|
|
|
|
|
<select class="form-select" id="rateRange">
|
|
|
|
|
|
<option value="">全部</option>
|
|
|
|
|
|
<option value="excellent">优秀 (≥80%)</option>
|
|
|
|
|
|
<option value="good">良好 (60%-80%)</option>
|
|
|
|
|
|
<option value="warning">一般 (40%-60%)</option>
|
|
|
|
|
|
<option value="danger">较低 (<40%)</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<button type="button" class="btn btn-primary w-100" onclick="searchExecutionRate()">
|
|
|
|
|
|
<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-cards">
|
|
|
|
|
|
<div class="summary-card">
|
|
|
|
|
|
<div class="summary-card-header">
|
|
|
|
|
|
<div class="summary-card-title">科室总体执行率</div>
|
|
|
|
|
|
<div class="summary-card-icon overall">
|
|
|
|
|
|
<i class="bi bi-graph-up-arrow"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="summary-card-value">65.5%</div>
|
|
|
|
|
|
<div class="summary-card-change positive">
|
|
|
|
|
|
<i class="bi bi-arrow-up"></i>
|
|
|
|
|
|
<span>较上月 +2.3%</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="summary-card">
|
|
|
|
|
|
<div class="summary-card-header">
|
|
|
|
|
|
<div class="summary-card-title">高执行率项目 (≥80%)</div>
|
|
|
|
|
|
<div class="summary-card-icon high">
|
|
|
|
|
|
<i class="bi bi-check-circle"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="summary-card-value">8</div>
|
|
|
|
|
|
<div class="summary-card-change positive">
|
|
|
|
|
|
<i class="bi bi-arrow-up"></i>
|
|
|
|
|
|
<span>较上月 +2</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="summary-card">
|
|
|
|
|
|
<div class="summary-card-header">
|
|
|
|
|
|
<div class="summary-card-title">中等执行率 (60%-80%)</div>
|
|
|
|
|
|
<div class="summary-card-icon medium">
|
|
|
|
|
|
<i class="bi bi-exclamation-circle"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="summary-card-value">12</div>
|
|
|
|
|
|
<div class="summary-card-change">
|
|
|
|
|
|
<span>与上月持平</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="summary-card">
|
|
|
|
|
|
<div class="summary-card-header">
|
|
|
|
|
|
<div class="summary-card-title">低执行率项目 (<60%)</div>
|
|
|
|
|
|
<div class="summary-card-icon low">
|
|
|
|
|
|
<i class="bi bi-x-circle"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="summary-card-value">5</div>
|
|
|
|
|
|
<div class="summary-card-change negative">
|
|
|
|
|
|
<i class="bi bi-arrow-down"></i>
|
|
|
|
|
|
<span>较上月 -1</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 主要内容 -->
|
|
|
|
|
|
<div class="main-content">
|
|
|
|
|
|
<!-- 图表区域 -->
|
|
|
|
|
|
<div class="chart-container">
|
|
|
|
|
|
<div class="chart-title">
|
|
|
|
|
|
<i class="bi bi-bar-chart"></i> 执行率分布图表
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="chart-grid">
|
|
|
|
|
|
<div class="chart-item">
|
|
|
|
|
|
<div class="chart-circle">
|
|
|
|
|
|
<svg width="150" height="150">
|
|
|
|
|
|
<circle cx="75" cy="75" r="70" fill="none" stroke="#e5e7eb" stroke-width="10"/>
|
|
|
|
|
|
<circle cx="75" cy="75" r="70" fill="none" stroke="#10b981" stroke-width="10"
|
|
|
|
|
|
stroke-dasharray="439.8" stroke-dashoffset="151.5" stroke-linecap="round"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
<div class="chart-circle-text">
|
|
|
|
|
|
<div class="chart-circle-value">65.5%</div>
|
|
|
|
|
|
<div class="chart-circle-label">总体执行率</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="chart-item-title">科室总体执行率</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="chart-item">
|
|
|
|
|
|
<div class="chart-circle">
|
|
|
|
|
|
<svg width="150" height="150">
|
|
|
|
|
|
<circle cx="75" cy="75" r="70" fill="none" stroke="#e5e7eb" stroke-width="10"/>
|
|
|
|
|
|
<circle cx="75" cy="75" r="70" fill="none" stroke="#3b82f6" stroke-width="10"
|
|
|
|
|
|
stroke-dasharray="439.8" stroke-dashoffset="87.96" stroke-linecap="round"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
<div class="chart-circle-text">
|
|
|
|
|
|
<div class="chart-circle-value">80%</div>
|
|
|
|
|
|
<div class="chart-circle-label">科研项目</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="chart-item-title">科研项目预算执行率</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="chart-item">
|
|
|
|
|
|
<div class="chart-circle">
|
|
|
|
|
|
<svg width="150" height="150">
|
|
|
|
|
|
<circle cx="75" cy="75" r="70" fill="none" stroke="#e5e7eb" stroke-width="10"/>
|
|
|
|
|
|
<circle cx="75" cy="75" r="70" fill="none" stroke="#f59e0b" stroke-width="10"
|
|
|
|
|
|
stroke-dasharray="439.8" stroke-dashoffset="175.92" stroke-linecap="round"/>
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
<div class="chart-circle-text">
|
|
|
|
|
|
<div class="chart-circle-value">60%</div>
|
|
|
|
|
|
<div class="chart-circle-label">行政运行</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="chart-item-title">行政运行预算执行率</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 明细表格 -->
|
|
|
|
|
|
<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="exportData()">
|
|
|
|
|
|
<i class="bi bi-download"></i> 导出数据
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="table-container">
|
|
|
|
|
|
<div class="table-responsive">
|
|
|
|
|
|
<table class="table table-hover">
|
|
|
|
|
|
<thead>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<th>一级预算</th>
|
|
|
|
|
|
<th>二级预算</th>
|
|
|
|
|
|
<th>预算金额</th>
|
|
|
|
|
|
<th>已使用</th>
|
|
|
|
|
|
<th>剩余金额</th>
|
|
|
|
|
|
<th>执行率</th>
|
|
|
|
|
|
<th>执行进度</th>
|
|
|
|
|
|
<th>状态</th>
|
|
|
|
|
|
<th>操作</th>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</thead>
|
|
|
|
|
|
<tbody>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td><strong>科研项目预算</strong></td>
|
|
|
|
|
|
<td>课题A - 海洋环境监测</td>
|
|
|
|
|
|
<td>¥2,500,000</td>
|
|
|
|
|
|
<td>¥1,680,000</td>
|
|
|
|
|
|
<td>¥820,000</td>
|
|
|
|
|
|
<td><strong>67.2%</strong></td>
|
|
|
|
|
|
<td class="progress-cell">
|
|
|
|
|
|
<div class="progress">
|
|
|
|
|
|
<div class="progress-bar good" style="width: 67.2%"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td><span class="rate-badge good">良好</span></td>
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(1)">
|
|
|
|
|
|
<i class="bi bi-eye"></i> 详情
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td><strong>科研项目预算</strong></td>
|
|
|
|
|
|
<td>课题B - 数据分析平台</td>
|
|
|
|
|
|
<td>¥1,800,000</td>
|
|
|
|
|
|
<td>¥1,200,000</td>
|
|
|
|
|
|
<td>¥600,000</td>
|
|
|
|
|
|
<td><strong>66.7%</strong></td>
|
|
|
|
|
|
<td class="progress-cell">
|
|
|
|
|
|
<div class="progress">
|
|
|
|
|
|
<div class="progress-bar good" style="width: 66.7%"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td><span class="rate-badge good">良好</span></td>
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(2)">
|
|
|
|
|
|
<i class="bi bi-eye"></i> 详情
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td><strong>科研项目预算</strong></td>
|
|
|
|
|
|
<td>课题C - 设备维护升级</td>
|
|
|
|
|
|
<td>¥900,000</td>
|
|
|
|
|
|
<td>¥570,000</td>
|
|
|
|
|
|
<td>¥330,000</td>
|
|
|
|
|
|
<td><strong>63.3%</strong></td>
|
|
|
|
|
|
<td class="progress-cell">
|
|
|
|
|
|
<div class="progress">
|
|
|
|
|
|
<div class="progress-bar good" style="width: 63.3%"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td><span class="rate-badge good">良好</span></td>
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(3)">
|
|
|
|
|
|
<i class="bi bi-eye"></i> 详情
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td><strong>行政运行预算</strong></td>
|
|
|
|
|
|
<td>办公用品采购</td>
|
|
|
|
|
|
<td>¥800,000</td>
|
|
|
|
|
|
<td>¥450,000</td>
|
|
|
|
|
|
<td>¥350,000</td>
|
|
|
|
|
|
<td><strong>56.3%</strong></td>
|
|
|
|
|
|
<td class="progress-cell">
|
|
|
|
|
|
<div class="progress">
|
|
|
|
|
|
<div class="progress-bar warning" style="width: 56.3%"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td><span class="rate-badge warning">一般</span></td>
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(4)">
|
|
|
|
|
|
<i class="bi bi-eye"></i> 详情
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td><strong>行政运行预算</strong></td>
|
|
|
|
|
|
<td>会议培训费用</td>
|
|
|
|
|
|
<td>¥1,200,000</td>
|
|
|
|
|
|
<td>¥695,680</td>
|
|
|
|
|
|
<td>¥504,320</td>
|
|
|
|
|
|
<td><strong>58.0%</strong></td>
|
|
|
|
|
|
<td class="progress-cell">
|
|
|
|
|
|
<div class="progress">
|
|
|
|
|
|
<div class="progress-bar warning" style="width: 58.0%"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td><span class="rate-badge warning">一般</span></td>
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(5)">
|
|
|
|
|
|
<i class="bi bi-eye"></i> 详情
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td><strong>行政运行预算</strong></td>
|
|
|
|
|
|
<td>差旅费用</td>
|
|
|
|
|
|
<td>¥1,000,000</td>
|
|
|
|
|
|
<td>¥600,000</td>
|
|
|
|
|
|
<td>¥400,000</td>
|
|
|
|
|
|
<td><strong>60.0%</strong></td>
|
|
|
|
|
|
<td class="progress-cell">
|
|
|
|
|
|
<div class="progress">
|
|
|
|
|
|
<div class="progress-bar good" style="width: 60.0%"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td><span class="rate-badge good">良好</span></td>
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(6)">
|
|
|
|
|
|
<i class="bi bi-eye"></i> 详情
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td><strong>设备购置预算</strong></td>
|
|
|
|
|
|
<td>科研设备采购</td>
|
|
|
|
|
|
<td>¥1,500,000</td>
|
|
|
|
|
|
<td>¥950,000</td>
|
|
|
|
|
|
<td>¥550,000</td>
|
|
|
|
|
|
<td><strong>63.3%</strong></td>
|
|
|
|
|
|
<td class="progress-cell">
|
|
|
|
|
|
<div class="progress">
|
|
|
|
|
|
<div class="progress-bar good" style="width: 63.3%"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td><span class="rate-badge good">良好</span></td>
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(7)">
|
|
|
|
|
|
<i class="bi bi-eye"></i> 详情
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td><strong>设备购置预算</strong></td>
|
|
|
|
|
|
<td>办公设备采购</td>
|
|
|
|
|
|
<td>¥680,000</td>
|
|
|
|
|
|
<td>¥450,000</td>
|
|
|
|
|
|
<td>¥230,000</td>
|
|
|
|
|
|
<td><strong>66.2%</strong></td>
|
|
|
|
|
|
<td class="progress-cell">
|
|
|
|
|
|
<div class="progress">
|
|
|
|
|
|
<div class="progress-bar good" style="width: 66.2%"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td><span class="rate-badge good">良好</span></td>
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(8)">
|
|
|
|
|
|
<i class="bi bi-eye"></i> 详情
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td><strong>设备购置预算</strong></td>
|
|
|
|
|
|
<td>设备维护费用</td>
|
|
|
|
|
|
<td>¥400,000</td>
|
|
|
|
|
|
<td>¥250,000</td>
|
|
|
|
|
|
<td>¥150,000</td>
|
|
|
|
|
|
<td><strong>62.5%</strong></td>
|
|
|
|
|
|
<td class="progress-cell">
|
|
|
|
|
|
<div class="progress">
|
|
|
|
|
|
<div class="progress-bar good" style="width: 62.5%"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td><span class="rate-badge good">良好</span></td>
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(9)">
|
|
|
|
|
|
<i class="bi bi-eye"></i> 详情
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
|
|
|
<td><strong>人员支出预算</strong></td>
|
|
|
|
|
|
<td>工资福利</td>
|
|
|
|
|
|
<td>¥1,000,000</td>
|
|
|
|
|
|
<td>¥1,000,000</td>
|
|
|
|
|
|
<td>¥0</td>
|
|
|
|
|
|
<td><strong>100%</strong></td>
|
|
|
|
|
|
<td class="progress-cell">
|
|
|
|
|
|
<div class="progress">
|
|
|
|
|
|
<div class="progress-bar excellent" style="width: 100%"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
<td><span class="rate-badge excellent">优秀</span></td>
|
|
|
|
|
|
<td>
|
|
|
|
|
|
<button class="btn btn-sm btn-outline-primary btn-action" onclick="viewDetail(10)">
|
|
|
|
|
|
<i class="bi bi-eye"></i> 详情
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
</tbody>
|
|
|
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.staticfile.org/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
// 查询执行率
|
|
|
|
|
|
function searchExecutionRate() {
|
|
|
|
|
|
const year = document.getElementById('statYear').value;
|
|
|
|
|
|
const period = document.getElementById('statPeriod').value;
|
|
|
|
|
|
const level1 = document.getElementById('level1Budget').value;
|
|
|
|
|
|
const range = document.getElementById('rateRange').value;
|
|
|
|
|
|
|
|
|
|
|
|
// 这里应该调用后端API进行查询
|
|
|
|
|
|
console.log('查询参数:', { year, period, level1, range });
|
|
|
|
|
|
|
|
|
|
|
|
// 模拟查询结果
|
|
|
|
|
|
alert('查询功能待对接后端API');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 重置筛选
|
|
|
|
|
|
function resetFilter() {
|
|
|
|
|
|
document.getElementById('statYear').value = '2024';
|
|
|
|
|
|
document.getElementById('statPeriod').value = 'year';
|
|
|
|
|
|
document.getElementById('level1Budget').value = '';
|
|
|
|
|
|
document.getElementById('rateRange').value = '';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 查看详情
|
|
|
|
|
|
function viewDetail(id) {
|
|
|
|
|
|
// 这里可以打开详情模态框或跳转到详情页面
|
|
|
|
|
|
alert('执行率详情功能待开发，项目ID: ' + id);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 导出数据
|
|
|
|
|
|
function exportData() {
|
|
|
|
|
|
// 这里应该调用后端API导出数据
|
|
|
|
|
|
alert('导出功能待对接后端API');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 根据执行率获取状态
|
|
|
|
|
|
function getRateStatus(rate) {
|
|
|
|
|
|
if (rate >= 80) {
|
|
|
|
|
|
return { class: 'excellent', text: '优秀' };
|
|
|
|
|
|
} else if (rate >= 60) {
|
|
|
|
|
|
return { class: 'good', text: '良好' };
|
|
|
|
|
|
} else if (rate >= 40) {
|
|
|
|
|
|
return { class: 'warning', text: '一般' };
|
|
|
|
|
|
} else {
|
|
|
|
|
|
return { class: 'danger', text: '较低' };
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 根据执行率获取进度条样式
|
|
|
|
|
|
function getProgressBarClass(rate) {
|
|
|
|
|
|
if (rate >= 80) {
|
|
|
|
|
|
return 'excellent';
|
|
|
|
|
|
} else if (rate >= 60) {
|
|
|
|
|
|
return 'good';
|
|
|
|
|
|
} else if (rate >= 40) {
|
|
|
|
|
|
return 'warning';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
return 'danger';
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 页面加载时的动画效果
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
|
const cards = document.querySelectorAll('.summary-card');
|
|
|
|
|
|
cards.forEach((card, index) => {
|
|
|
|
|
|
card.style.opacity = '0';
|
|
|
|
|
|
card.style.transform = 'translateY(20px)';
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
card.style.transition = 'all 0.5s ease';
|
|
|
|
|
|
card.style.opacity = '1';
|
|
|
|
|
|
card.style.transform = 'translateY(0)';
|
|
|
|
|
|
}, index * 100);
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
|
