wangyifang
/
sz-kjsxy-web
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

数据统计

Browse Source
dev
lion 2 months ago
parent be88d62cc9
commit ec0dc0a112
1 changed files with 0 additions and 804 deletions
Show Stats Download Patch File Download Diff File

804
src/views/statistics/数据统计页面.html
Unescape View File

@ -1,804 +0,0 @@
<!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.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #0f4c75 0%, #1e3c72 50%, #2a5298 100%);
min-height: 100vh;
font-family: 'Microsoft YaHei', sans-serif;
}
.dashboard-container {
background: rgba(255, 255, 255, 0.98);
border-radius: 25px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
margin: 20px;
padding: 35px;
backdrop-filter: blur(10px);
}
.section-title {
color: #0f4c75;
font-weight: bold;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 4px solid #e8f4fd;
position: relative;
font-size: 1.35rem;
}
.section-title::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(90deg, #00a8ff, #0097e6);
border-radius: 2px;
}
.filter-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
border-radius: 20px;
padding: 25px;
margin-bottom: 35px;
border: 1px solid #e8f4fd;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.stats-card {
border-radius: 20px;
padding: 24px;
margin-bottom: 25px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.stats-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #00a8ff, #0097e6);
}
.stats-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.stats-card h3 {
font-size: 2.24rem;
font-weight: bold;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.stats-card p {
font-size: 1.08rem;
opacity: 0.95;
margin: 0;
font-weight: 500;
}
.stats-icon {
font-size: 2.8rem;
opacity: 0.9;
margin-bottom: 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 学员维度卡片配色 */
.stats-card.student-card-1 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.stats-card.student-card-2 {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
}
.stats-card.student-card-3 {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
}
.stats-card.student-card-4 {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
color: #2c3e50;
}
.stats-card.student-card-5 {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
color: #2c3e50;
}
/* 课程维度卡片配色 */
.stats-card.course-card-1 {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
color: #2c3e50;
}
.stats-card.course-card-2 {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
color: #2c3e50;
}
.stats-card.course-card-3 {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
color: #2c3e50;
}
.stats-card.course-card-4 {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
color: #2c3e50;
}
/* 师资维度卡片配色 */
.stats-card.teacher-card-1 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.stats-card.teacher-card-2 {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
}
.stats-card.teacher-card-3 {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
}
.detail-table {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid #e8f4fd;
}
.table th {
background: linear-gradient(135deg, #0f4c75 0%, #1e3c72 100%);
color: white;
border: none;
font-weight: 600;
padding: 18px 15px;
font-size: 0.99rem;
}
.table td {
vertical-align: middle;
border-color: #f1f5f9;
padding: 15px;
color: #2c3e50;
font-weight: 500;
font-size: 0.9rem;
}
.table-hover tbody tr:hover {
background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
transform: scale(1.01);
transition: all 0.3s ease;
}
.btn-filter {
background: linear-gradient(135deg, #00a8ff 0%, #0097e6 100%);
border: none;
border-radius: 30px;
padding: 12px 30px;
color: white;
font-weight: 600;
font-size: 0.99rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 168, 255, 0.3);
}
.btn-filter:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 168, 255, 0.4);
background: linear-gradient(135deg, #0097e6 0%, #0088d4 100%);
}
.form-control, .form-select {
border-radius: 15px;
border: 2px solid #e8f4fd;
transition: all 0.3s ease;
padding: 12px 18px;
font-size: 0.9rem;
background: rgba(255, 255, 255, 0.9);
}
.form-control:focus, .form-select:focus {
border-color: #00a8ff;
box-shadow: 0 0 0 0.2rem rgba(0, 168, 255, 0.25);
background: white;
}
/* 多选下拉框样式优化 */
select[multiple] {
min-height: 120px;
}
select[multiple] option {
padding: 8px 12px;
border-bottom: 1px solid #f1f5f9;
}
select[multiple] option:checked {
background: linear-gradient(135deg, #00a8ff 0%, #0097e6 100%);
color: white;
}
select[multiple] option:hover {
background: #e3f2fd;
}
/* 课程体系checkbox样式 */
.course-checkboxes {
background: #f8f9fa;
border-radius: 10px;
padding: 15px;
border: 1px solid #e9ecef;
}
.course-checkboxes .form-check {
margin-right: 20px;
margin-bottom: 10px;
}
.course-checkboxes .form-check-input {
border-color: #00a8ff;
margin-right: 8px;
}
.course-checkboxes .form-check-input:checked {
background-color: #00a8ff;
border-color: #00a8ff;
}
.course-checkboxes .form-check-input:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 168, 255, 0.25);
}
.course-checkboxes .form-check-label {
color: #2c3e50;
font-weight: 500;
cursor: pointer;
}
/* 导出按钮样式 */
.btn-export {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
border: none;
border-radius: 20px;
padding: 8px 20px;
color: white;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
}
.btn-export:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
}
.btn-export i {
margin-right: 6px;
}
/* 5等分宽度布局 */
.col-md-2-4 {
flex: 0 0 20%;
max-width: 20%;
}
@media (max-width: 767.98px) {
.col-md-2-4 {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 15px;
}
}
/* 课程分类明细统计表格样式 */
.course-system-row {
background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
}
.course-system-row:hover {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}
.course-item-row {
background: white;
}
.course-item-row:hover {
background: #f8f9fa;
}
.course-system-name {
font-weight: bold;
text-align: center;
vertical-align: middle;
}
.course-item {
padding-left: 20px;
color: #2c3e50;
font-weight: 500;
}
.course-item-row .course-item {
border-left: 3px solid #00a8ff;
margin-left: 10px;
}
.table th {
background: linear-gradient(135deg, #0f4c75 0%, #1e3c72 100%);
color: white;
border: none;
font-weight: 600;
padding: 18px 15px;
font-size: 0.99rem;
text-align: center;
}
.table td {
vertical-align: middle;
border-color: #f1f5f9;
padding: 15px;
color: #2c3e50;
font-weight: 500;
font-size: 0.9rem;
}
.form-label {
color: #0f4c75;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 8px;
}
.table-title {
color: #0f4c75;
font-weight: bold;
margin-bottom: 20px;
font-size: 1.17rem;
}
.table-title i {
color: #00a8ff;
margin-right: 10px;
}
hr {
border-color: #e8f4fd;
border-width: 3px;
border-radius: 2px;
opacity: 0.8;
}
.main-title {
background: linear-gradient(135deg, #0f4c75 0%, #00a8ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: bold;
font-size: 2.25rem;
margin-bottom: 40px;
}
.main-title i {
background: linear-gradient(135deg, #00a8ff 0%, #0097e6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="dashboard-container">
<div class="filter-section">
<div class="row">
<div class="col-md-6">
<label class="form-label">时间周期</label>
<select class="form-select" id="studentTimeRange">
<option value="all" selected>全周期</option>
<option value="thisYear">今年</option>
<option value="lastYear">去年</option>
<option value="custom">自定义时间段</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">自定义时间</label>
<div class="d-flex gap-2">
<input type="date" class="form-control" id="studentStartDate" placeholder="开始日期">
<input type="date" class="form-control" id="studentEndDate" placeholder="结束日期">
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<label class="form-label">课程体系</label>
<div class="course-checkboxes">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="courseAll" value="all">
<label class="form-check-label" for="courseAll" style="font-weight: bold; color: #0f4c75;">全选</label>
</div>
<hr class="my-2" style="border-color: #dee2e6; opacity: 0.6;">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="courseIndustry" value="industry">
<label class="form-check-label" for="courseIndustry">产业加速营</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="coursePeak" value="peak">
<label class="form-check-label" for="coursePeak">攀峰班</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="courseSecond" value="second">
<label class="form-check-label" for="courseSecond">第二课堂</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="courseStartup" value="startup">
<label class="form-check-label" for="courseStartup">初创班</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="courseLecture" value="lecture">
<label class="form-check-label" for="courseLecture">科技大讲堂</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="courseTraining" value="training">
<label class="form-check-label" for="courseTraining">人才培训</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="courseAdvanced" value="advanced">
<label class="form-check-label" for="courseAdvanced">高研班</label>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12 text-center">
<button class="btn btn-filter" onclick="filterStudentData()">
<i class="bi bi-search"></i> 查询统计
</button>
</div>
</div>
</div>
<!-- 学员统计卡片 -->
<div class="row mb-4">
<div class="col-md-2-4">
<div class="stats-card student-card-1 text-center">
<div class="stats-icon">
<i class="bi bi-person-plus"></i>
</div>
<h3 id="totalRegistrations">1,247</h3>
<p>报名人数（未去重）</p>
</div>
</div>
<div class="col-md-2-4">
<div class="stats-card student-card-2 text-center">
<div class="stats-icon">
<i class="bi bi-clipboard-check"></i>
</div>
<h3 id="totalReviews">1,156</h3>
<p>培养人数（未去重）</p>
</div>
</div>
<div class="col-md-2-4">
<div class="stats-card student-card-3 text-center">
<div class="stats-icon">
<i class="bi bi-people"></i>
</div>
<h3 id="totalReviewPeople">892</h3>
<p>培养人数（已去重）</p>
</div>
</div>
<div class="col-md-2-4">
<div class="stats-card student-card-4 text-center">
<div class="stats-icon">
<i class="bi bi-calendar-event"></i>
</div>
<h3 id="totalCourseSessions">56</h3>
<p>开课场次</p>
</div>
</div>
<div class="col-md-2-4">
<div class="stats-card student-card-5 text-center">
<div class="stats-icon">
<i class="bi bi-calendar-week"></i>
</div>
<h3 id="totalCourseDays">89</h3>
<p>开课天数</p>
</div>
</div>
</div>
<!-- 学员明细表格 -->
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="table-title mb-0">
<i class="bi bi-book"></i> 课程分类明细统计
</h5>
<button class="btn btn-export" onclick="exportCourseData()">
<i class="bi bi-download"></i> 导出数据
</button>
</div>
<div class="detail-table">
<table class="table table-hover mb-0">
<thead>
<tr>
<th style="width: 20%;">课程体系</th>
<th style="width: 18%;">培养人数（未去重）</th>
<th style="width: 18%;">培养人数（课程体系内已去重）</th>
<th style="width: 24%;">开课</th>
<th style="width: 20%;">课程培养人数</th>
</tr>
</thead>
<tbody>
<tr class="course-system-row">
<td rowspan="3" class="course-system-name">
<strong>科技大讲堂</strong>
</td>
<td rowspan="3" class="text-center">824</td>
<td rowspan="3" class="text-center">612</td>
<td class="course-item">智能制造专题讲座</td>
<td class="text-center">45</td>
</tr>
<tr class="course-item-row">
<td class="course-item">数字化转型研讨会</td>
<td class="text-center">38</td>
</tr>
<tr class="course-item-row">
<td class="course-item">科技创新前沿分享</td>
<td class="text-center">73</td>
</tr>
<tr class="course-system-row">
<td rowspan="2" class="course-system-name">
<strong>高研班</strong>
</td>
<td rowspan="2" class="text-center">566</td>
<td rowspan="2" class="text-center">445</td>
<td class="course-item">高级管理研修班</td>
<td class="text-center">52</td>
</tr>
<tr class="course-item-row">
<td class="course-item">战略思维提升班</td>
<td class="text-center">37</td>
</tr>
<tr class="course-system-row">
<td rowspan="2" class="course-system-name">
<strong>产业加速营</strong>
</td>
<td rowspan="2" class="text-center">218</td>
<td rowspan="2" class="text-center">189</td>
<td class="course-item">智能制造加速营</td>
<td class="text-center">28</td>
</tr>
<tr class="course-item-row">
<td class="course-item">生物医药加速营</td>
<td class="text-center">17</td>
</tr>
<tr class="course-system-row">
<td class="course-system-name">
<strong>人才培训</strong>
</td>
<td class="text-center">153</td>
<td class="text-center">134</td>
<td class="course-item">专业技能培训</td>
<td class="text-center">32</td>
</tr>
<tr class="course-system-row">
<td rowspan="2" class="course-system-name">
<strong>第二课堂</strong>
</td>
<td rowspan="2" class="text-center">320</td>
<td rowspan="2" class="text-center">298</td>
<td class="course-item">创新创业实践</td>
<td class="text-center">45</td>
</tr>
<tr class="course-item-row">
<td class="course-item">团队协作训练</td>
<td class="text-center">33</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="table-title mb-0">
<i class="bi bi-geo-alt"></i> 区域明细统计
</h5>
<button class="btn btn-export" onclick="exportRegionData()">
<i class="bi bi-download"></i> 导出数据
</button>
</div>
<div class="detail-table">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>区域</th>
<th>培养人数（未去重）</th>
<th>培养人数（已去重）</th>
</tr>
</thead>
<tbody>
<tr>
<td>吴中区</td>
<td>125</td>
<td>98</td>
</tr>
<tr>
<td>相城区</td>
<td>82</td>
<td>65</td>
</tr>
<tr>
<td>昆山市</td>
<td>74</td>
<td>58</td>
</tr>
<tr>
<td>太仓市</td>
<td>74</td>
<td>62</td>
</tr>
<tr>
<td>姑苏区</td>
<td>65</td>
<td>52</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 学员数据筛选
function filterStudentData() {
const timeRange = document.getElementById('studentTimeRange').value;
const courseSystem = getSelectedCourseSystems();
const startDate = document.getElementById('studentStartDate').value;
const endDate = document.getElementById('studentEndDate').value;
console.log('学员数据筛选:', { timeRange, courseSystem, startDate, endDate });
// 这里可以添加实际的数据筛选逻辑
alert('学员数据筛选功能已触发！');
}
// 获取选中的课程体系
function getSelectedCourseSystems() {
const checkboxes = document.querySelectorAll('.course-checkboxes input[type="checkbox"]:checked:not(#courseAll)');
return Array.from(checkboxes).map(checkbox => checkbox.value);
}
// 导出课程分类明细数据
function exportCourseData() {
const timeRange = document.getElementById('studentTimeRange').value;
const courseSystem = getSelectedCourseSystems();
const startDate = document.getElementById('studentStartDate').value;
const endDate = document.getElementById('studentEndDate').value;
console.log('导出课程分类明细数据:', { timeRange, courseSystem, startDate, endDate });
// 这里可以添加实际的导出逻辑，比如生成Excel文件
alert('课程分类明细数据导出功能已触发！');
}
// 导出区域明细数据
function exportRegionData() {
const timeRange = document.getElementById('studentTimeRange').value;
const courseSystem = getSelectedCourseSystems();
const startDate = document.getElementById('studentStartDate').value;
const endDate = document.getElementById('studentEndDate').value;
console.log('导出区域明细数据:', { timeRange, courseSystem, startDate, endDate });
// 这里可以添加实际的导出逻辑，比如生成Excel文件
alert('区域明细数据导出功能已触发！');
}
// 全选功能
function toggleAllCourses() {
const allCheckbox = document.getElementById('courseAll');
const courseCheckboxes = document.querySelectorAll('.course-checkboxes input[type="checkbox"]:not(#courseAll)');
courseCheckboxes.forEach(checkbox => {
checkbox.checked = allCheckbox.checked;
});
}
// 同步全选状态
function syncAllCheckboxState() {
const allCheckbox = document.getElementById('courseAll');
const courseCheckboxes = document.querySelectorAll('.course-checkboxes input[type="checkbox"]:not(#courseAll)');
const checkedCount = Array.from(courseCheckboxes).filter(checkbox => checkbox.checked).length;
if (checkedCount === 0) {
allCheckbox.checked = false;
allCheckbox.indeterminate = false;
} else if (checkedCount === courseCheckboxes.length) {
allCheckbox.checked = true;
allCheckbox.indeterminate = false;
} else {
allCheckbox.checked = false;
allCheckbox.indeterminate = true;
}
}
// 控制自定义时间输入框的启用/禁用状态
function toggleCustomDateInputs() {
const timeRange = document.getElementById('studentTimeRange').value;
const startDateInput = document.getElementById('studentStartDate');
const endDateInput = document.getElementById('studentEndDate');
if (timeRange === 'custom') {
startDateInput.disabled = false;
endDateInput.disabled = false;
startDateInput.style.opacity = '1';
endDateInput.style.opacity = '1';
} else {
startDateInput.disabled = true;
endDateInput.disabled = true;
startDateInput.style.opacity = '0.5';
endDateInput.style.opacity = '0.5';
}
}
// 页面加载完成后设置事件监听器
document.addEventListener('DOMContentLoaded', function() {
const today = new Date();
const thirtyDaysAgo = new Date(today.getTime() - (30 * 24 * 60 * 60 * 1000));
document.getElementById('studentStartDate').value = thirtyDaysAgo.toISOString().split('T')[0];
document.getElementById('studentEndDate').value = today.toISOString().split('T')[0];
document.getElementById('courseStartDate').value = thirtyDaysAgo.toISOString().split('T')[0];
document.getElementById('courseEndDate').value = today.toISOString().split('T')[0];
// 添加学员维度时间周期选择的事件监听器
document.getElementById('studentTimeRange').addEventListener('change', toggleCustomDateInputs);
// 添加全选checkbox的事件监听器
document.getElementById('courseAll').addEventListener('change', toggleAllCourses);
// 添加课程checkbox的事件监听器
const courseCheckboxes = document.querySelectorAll('.course-checkboxes input[type="checkbox"]:not(#courseAll)');
courseCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', syncAllCheckboxState);
});
// 初始化时调用一次
toggleCustomDateInputs();
});
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save