714 lines
26 KiB
JavaScript
714 lines
26 KiB
JavaScript
const state = {
|
||
age: { page: 1, size: 10, totalPages: 0, total: 0 },
|
||
score: { page: 1, size: 10, totalPages: 0, total: 0 },
|
||
nopass: { page: 1, size: 10, totalPages: 0, total: 0 },
|
||
examAvg: { page: 1, size: 10, totalPages: 0, total: 0 },
|
||
timeSize: { page: 1, size: 10, totalPages: 0, total: 0 },
|
||
classAvgTime: { page: 1, size: 10, totalPages: 0, total: 0 }
|
||
};
|
||
|
||
const pages = [
|
||
{ id: 'age', name: '按年龄区间查询', icon: '👤' },
|
||
{ id: 'class-stats', name: '指定班级人数统计', icon: '🏫' },
|
||
{ id: 'all-class-stats', name: '所有班级人数统计', icon: '📊' },
|
||
{ id: 'score', name: '按分数段查询', icon: '📝' },
|
||
{ id: 'no-pass', name: '不合格学生查询', icon: '⚠️' },
|
||
{ id: 'exam-avg', name: '班级考试平均分', icon: '📈' },
|
||
{ id: 'salary-top', name: '薪资TOP排行', icon: '💰' },
|
||
{ id: 'time-size', name: '就业时长查询', icon: '⏱️' },
|
||
{ id: 'class-avg-time', name: '班级平均就业时长', icon: '📅' }
|
||
];
|
||
|
||
function renderSidebar() {
|
||
const nav = document.getElementById('nav');
|
||
nav.innerHTML = pages.map((p, i) =>
|
||
`<div class="nav-item ${i === 0 ? 'active' : ''}" data-page="${p.id}">
|
||
<span class="icon">${p.icon}</span>${p.name}
|
||
</div>`
|
||
).join('');
|
||
|
||
nav.querySelectorAll('.nav-item').forEach(item => {
|
||
item.addEventListener('click', () => {
|
||
nav.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
||
item.classList.add('active');
|
||
showPage(item.dataset.page);
|
||
});
|
||
});
|
||
}
|
||
|
||
function showPage(id) {
|
||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||
const target = document.getElementById('page-' + id);
|
||
if (target) target.classList.add('active');
|
||
document.getElementById('top-title').textContent =
|
||
pages.find(p => p.id === id)?.name || '';
|
||
|
||
if (id === 'all-class-stats') loadAllClassStats();
|
||
if (id === 'salary-top') loadSalaryTop();
|
||
if (id === 'exam-avg') loadExamAvg();
|
||
if (id === 'time-size') loadTimeSize();
|
||
if (id === 'class-avg-time') loadClassAvgTime();
|
||
}
|
||
|
||
function toast(msg, type = 'success') {
|
||
const div = document.createElement('div');
|
||
div.className = 'toast ' + type;
|
||
div.textContent = msg;
|
||
document.body.appendChild(div);
|
||
setTimeout(() => div.remove(), 2000);
|
||
}
|
||
|
||
function renderPagination(container, s, onChange) {
|
||
if (s.totalPages <= 1) {
|
||
container.innerHTML = '';
|
||
return;
|
||
}
|
||
let html = `<span class="page-info">共 ${s.total} 条 / 第 ${s.page}/${s.totalPages} 页</span>`;
|
||
html += `<button ${s.page <= 1 ? 'disabled' : ''} data-act="prev">上一页</button>`;
|
||
|
||
const range = [];
|
||
const start = Math.max(1, s.page - 2);
|
||
const end = Math.min(s.totalPages, start + 4);
|
||
for (let i = start; i <= end; i++) range.push(i);
|
||
|
||
range.forEach(p => {
|
||
html += `<button class="${p === s.page ? 'active' : ''}" data-p="${p}">${p}</button>`;
|
||
});
|
||
|
||
html += `<button ${s.page >= s.totalPages ? 'disabled' : ''} data-act="next">下一页</button>`;
|
||
html += `<span style="margin-left:12px">跳至</span>`;
|
||
html += `<input type="number" min="1" max="${s.totalPages}" value="${s.page}" data-act="jumpto" style="width:60px;padding:4px 8px;border:1px solid #d9d9d9;border-radius:4px;text-align:center">`;
|
||
html += `<span>页</span>`;
|
||
|
||
container.innerHTML = html;
|
||
|
||
container.querySelectorAll('button').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
let p = btn.dataset.p ? parseInt(btn.dataset.p) : null;
|
||
if (btn.dataset.act === 'prev') p = s.page - 1;
|
||
if (btn.dataset.act === 'next') p = s.page + 1;
|
||
if (p && p !== s.page) onChange(p);
|
||
});
|
||
});
|
||
|
||
const jumpInput = container.querySelector('input[data-act="jumpto"]');
|
||
if (jumpInput) {
|
||
jumpInput.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter') {
|
||
let p = parseInt(jumpInput.value);
|
||
if (!isNaN(p)) {
|
||
p = Math.max(1, Math.min(s.totalPages, p));
|
||
if (p !== s.page) onChange(p);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
function formatDate(d) {
|
||
if (!d) return '-';
|
||
return d.toString().slice(0, 10);
|
||
}
|
||
|
||
function createPages() {
|
||
const container = document.getElementById('pages-container');
|
||
container.innerHTML = `
|
||
<!-- 年龄区间查询 -->
|
||
<div class="page active" id="page-age">
|
||
<div class="card">
|
||
<div class="card-title">查询条件</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>最小年龄：</label>
|
||
<input type="number" id="age-min" value="18" min="0" max="100">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>最大年龄：</label>
|
||
<input type="number" id="age-max" value="30" min="0" max="100">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>每页条数(m)：</label>
|
||
<input type="number" id="age-size" value="10" min="1" max="100" style="width:80px">
|
||
</div>
|
||
<button class="btn btn-primary" onclick="searchAge()">查询</button>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">查询结果</div>
|
||
<div class="table-wrapper">
|
||
<table id="age-table">
|
||
<thead>
|
||
<tr>
|
||
<th>学号</th><th>姓名</th><th>性别</th><th>身份证号</th>
|
||
<th>出生日期</th><th>民族</th><th>专业</th><th>班级</th>
|
||
<th>入学日期</th><th>学籍状态</th><th>学历</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="pagination" id="age-pagination"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 指定班级人数 -->
|
||
<div class="page" id="page-class-stats">
|
||
<div class="card">
|
||
<div class="card-title">查询条件</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>班级编号：</label>
|
||
<input type="text" id="class-id" placeholder="如 CLS001">
|
||
</div>
|
||
<button class="btn btn-primary" onclick="searchClassInfo()">查询</button>
|
||
</div>
|
||
</div>
|
||
<div id="class-stats-result"></div>
|
||
</div>
|
||
|
||
<!-- 所有班级人数 -->
|
||
<div class="page" id="page-all-class-stats">
|
||
<div class="card">
|
||
<div class="card-title">所有班级人数统计</div>
|
||
<div id="all-class-chart" class="chart-container"></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="table-wrapper">
|
||
<table id="all-class-table">
|
||
<thead>
|
||
<tr>
|
||
<th>班级编号</th><th>班级名称</th><th>总人数</th><th>男生</th><th>女生</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分数段查询 -->
|
||
<div class="page" id="page-score">
|
||
<div class="card">
|
||
<div class="card-title">查询条件</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>及格分数线：</label>
|
||
<input type="number" id="score-val" value="60" min="0" max="100" step="0.5">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>每页条数(m)：</label>
|
||
<input type="number" id="score-size" value="10" min="1" max="100" style="width:80px">
|
||
</div>
|
||
<button class="btn btn-primary" onclick="searchScore()">查询</button>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">分数 ≥ 指定值的学生</div>
|
||
<div class="table-wrapper">
|
||
<table id="score-table">
|
||
<thead><tr><th>学号</th><th>姓名</th><th>分数</th></tr></thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="pagination" id="score-pagination"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 不合格学生 -->
|
||
<div class="page" id="page-no-pass">
|
||
<div class="card">
|
||
<div class="card-title">查询条件</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>不及格门数 ≥</label>
|
||
<input type="number" id="fail-count" value="1" min="1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>每页条数(m)：</label>
|
||
<input type="number" id="nopass-size" value="10" min="1" max="100" style="width:80px">
|
||
</div>
|
||
<button class="btn btn-primary" onclick="searchNoPass()">查询</button>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">不合格学生列表</div>
|
||
<div class="table-wrapper">
|
||
<table id="nopass-table">
|
||
<thead><tr><th>学号</th><th>姓名</th><th>不及格门数</th></tr></thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="pagination" id="nopass-pagination"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 班级考试平均分 -->
|
||
<div class="page" id="page-exam-avg">
|
||
<div class="card">
|
||
<div class="card-title">每次考试每个班级平均分（从高到低）</div>
|
||
<div class="form-row" style="margin-bottom:16px">
|
||
<div class="form-group">
|
||
<label>每页条数(m)：</label>
|
||
<input type="number" id="exam-avg-size" value="10" min="1" max="100" style="width:80px">
|
||
</div>
|
||
<button class="btn btn-primary" onclick="reloadExamAvg()">刷新</button>
|
||
</div>
|
||
<div id="exam-avg-chart" class="chart-container"></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="table-wrapper">
|
||
<table id="exam-avg-table">
|
||
<thead>
|
||
<tr><th>课程编号</th><th>班级编号</th><th>班级名称</th><th>平均分</th></tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="pagination" id="exam-avg-pagination"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 薪资TOP -->
|
||
<div class="page" id="page-salary-top">
|
||
<div class="card">
|
||
<div class="card-title">薪资排行 TOP</div>
|
||
<div class="form-row" style="margin-bottom:16px">
|
||
<div class="form-group">
|
||
<label>TOP N：</label>
|
||
<input type="number" id="salary-n" value="5" min="1">
|
||
</div>
|
||
<button class="btn btn-primary" onclick="loadSalaryTop()">查询</button>
|
||
</div>
|
||
<div id="salary-chart" class="chart-container"></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="table-wrapper">
|
||
<table id="salary-table">
|
||
<thead>
|
||
<tr><th>姓名</th><th>班级</th><th>公司</th><th>入职时间</th><th>薪资(元/月)</th></tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 就业时长 -->
|
||
<div class="page" id="page-time-size">
|
||
<div class="card">
|
||
<div class="card-title">每个学生的就业时长</div>
|
||
<div class="form-row" style="margin-bottom:16px">
|
||
<div class="form-group">
|
||
<label>每页条数(m)：</label>
|
||
<input type="number" id="time-size" value="10" min="1" max="100" style="width:80px">
|
||
</div>
|
||
<button class="btn btn-primary" onclick="reloadTimeSize()">刷新</button>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table id="time-table">
|
||
<thead>
|
||
<tr><th>学号</th><th>姓名</th><th>开放简历时间</th><th>Offer时间</th><th>就业时长(天)</th></tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="pagination" id="time-pagination"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 班级平均就业时长 -->
|
||
<div class="page" id="page-class-avg-time">
|
||
<div class="card">
|
||
<div class="card-title">每个班级的平均就业时长</div>
|
||
<div class="form-row" style="margin-bottom:16px">
|
||
<div class="form-group">
|
||
<label>每页条数(m)：</label>
|
||
<input type="number" id="class-avg-time-size" value="10" min="1" max="100" style="width:80px">
|
||
</div>
|
||
<button class="btn btn-primary" onclick="reloadClassAvgTime()">刷新</button>
|
||
</div>
|
||
<div id="class-avg-time-chart" class="chart-container"></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="table-wrapper">
|
||
<table id="class-avg-time-table">
|
||
<thead>
|
||
<tr><th>班级编号</th><th>班级名称</th><th>平均就业时长(天)</th></tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="pagination" id="class-avg-time-pagination"></div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// ============ 各页面加载函数 ============
|
||
|
||
async function searchAge() {
|
||
const min = parseInt(document.getElementById('age-min').value);
|
||
const max = parseInt(document.getElementById('age-max').value);
|
||
state.age.page = 1;
|
||
await loadAge(min, max);
|
||
}
|
||
|
||
async function loadAge(min, max) {
|
||
const s = state.age;
|
||
s.size = parseInt(document.getElementById('age-size').value) || 10;
|
||
document.querySelector('#age-table tbody').innerHTML = '<tr><td colspan="11" class="loading">加载中...</td></tr>';
|
||
try {
|
||
const res = await API.getStudentsByAgeRange(s.page, s.size, min, max);
|
||
if (res.code !== 200) { toast(res.message, 'error'); return; }
|
||
s.total = res.total;
|
||
s.totalPages = res.total_pages;
|
||
|
||
const tbody = document.querySelector('#age-table tbody');
|
||
if (!res.data || res.data.length === 0) {
|
||
tbody.innerHTML = '<tr><td colspan="11" class="empty">暂无数据</td></tr>';
|
||
} else {
|
||
tbody.innerHTML = res.data.map(r => `
|
||
<tr>
|
||
<td>${r.student_id}</td><td>${r.student_name}</td><td>${r.gender}</td>
|
||
<td>${r.id_card}</td><td>${formatDate(r.birthday)}</td><td>${r.ethnicity}</td>
|
||
<td>${r.major}</td><td>${r.class_id}</td><td>${formatDate(r.enrollment_date)}</td>
|
||
<td>${r.student_status}</td><td>${r.education_level}</td>
|
||
</tr>`).join('');
|
||
}
|
||
renderPagination(document.getElementById('age-pagination'), s, (p) => {
|
||
s.page = p; loadAge(min, max);
|
||
});
|
||
} catch (e) {
|
||
document.querySelector('#age-table tbody').innerHTML = '<tr><td colspan="11" class="empty">请求失败，请检查后端服务是否启动</td></tr>';
|
||
}
|
||
}
|
||
|
||
async function searchClassInfo() {
|
||
const classId = document.getElementById('class-id').value.trim();
|
||
if (!classId) { toast('请输入班级编号', 'error'); return; }
|
||
const box = document.getElementById('class-stats-result');
|
||
box.innerHTML = '<div class="loading">加载中...</div>';
|
||
try {
|
||
const res = await API.getClassInfo(classId);
|
||
if (res.code !== 200) { toast(res.message, 'error'); box.innerHTML = ''; return; }
|
||
const d = res.data;
|
||
box.innerHTML = `
|
||
<div class="card">
|
||
<div class="card-title">班级：${d.class_id} - ${d.class_name}</div>
|
||
<div class="stats-grid">
|
||
<div class="stat-card total">
|
||
<div class="stat-label">总人数</div>
|
||
<div class="stat-value">${d.total_count}</div>
|
||
</div>
|
||
<div class="stat-card male">
|
||
<div class="stat-label">男生</div>
|
||
<div class="stat-value">${d.male_count}</div>
|
||
</div>
|
||
<div class="stat-card female">
|
||
<div class="stat-label">女生</div>
|
||
<div class="stat-value">${d.female_count}</div>
|
||
</div>
|
||
</div>
|
||
<div id="class-info-chart" class="chart-container" style="margin-top:20px"></div>
|
||
</div>`;
|
||
|
||
const chart = echarts.init(document.getElementById('class-info-chart'));
|
||
chart.setOption({
|
||
tooltip: { trigger: 'item' },
|
||
legend: { bottom: 10 },
|
||
series: [{
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
|
||
label: { show: true, formatter: '{b}: {c} ({d}%)' },
|
||
data: [
|
||
{ value: d.male_count, name: '男生', itemStyle: { color: '#1890ff' } },
|
||
{ value: d.female_count, name: '女生', itemStyle: { color: '#eb2f96' } }
|
||
]
|
||
}]
|
||
});
|
||
} catch (e) {
|
||
box.innerHTML = '<div class="empty">请求失败，请检查后端服务是否启动</div>';
|
||
}
|
||
}
|
||
|
||
async function loadAllClassStats() {
|
||
try {
|
||
const res = await API.getAllClassStats();
|
||
if (res.code !== 200) { toast(res.message, 'error'); return; }
|
||
const data = res.data || [];
|
||
|
||
const tbody = document.querySelector('#all-class-table tbody');
|
||
if (!data.length) {
|
||
tbody.innerHTML = '<tr><td colspan="5" class="empty">暂无数据</td></tr>';
|
||
} else {
|
||
tbody.innerHTML = data.map(r => `
|
||
<tr>
|
||
<td>${r.class_id}</td><td>${r.class_name}</td>
|
||
<td>${r.total_count}</td><td>${r.male_count}</td><td>${r.female_count}</td>
|
||
</tr>`).join('');
|
||
}
|
||
|
||
const chart = echarts.init(document.getElementById('all-class-chart'));
|
||
chart.setOption({
|
||
tooltip: { trigger: 'axis' },
|
||
legend: { data: ['男生', '女生', '总人数'] },
|
||
grid: { left: 50, right: 30, top: 50, bottom: 80 },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: data.map(d => d.class_name),
|
||
axisLabel: { rotate: 30 }
|
||
},
|
||
yAxis: { type: 'value' },
|
||
series: [
|
||
{ name: '男生', type: 'bar', data: data.map(d => d.male_count), itemStyle: { color: '#1890ff' } },
|
||
{ name: '女生', type: 'bar', data: data.map(d => d.female_count), itemStyle: { color: '#eb2f96' } },
|
||
{ name: '总人数', type: 'bar', data: data.map(d => d.total_count), itemStyle: { color: '#52c41a' } }
|
||
]
|
||
});
|
||
} catch (e) {
|
||
console.error(e);
|
||
}
|
||
}
|
||
|
||
async function searchScore() {
|
||
state.score.page = 1;
|
||
await loadScore();
|
||
}
|
||
|
||
async function loadScore() {
|
||
const s = state.score;
|
||
s.size = parseInt(document.getElementById('score-size').value) || 10;
|
||
const score = parseFloat(document.getElementById('score-val').value);
|
||
try {
|
||
const res = await API.getStudentsByScore(s.page, s.size, score);
|
||
if (res.code !== 200) { toast(res.message, 'error'); return; }
|
||
s.total = res.total; s.totalPages = res.total_pages;
|
||
|
||
const tbody = document.querySelector('#score-table tbody');
|
||
if (!res.data.length) {
|
||
tbody.innerHTML = '<tr><td colspan="3" class="empty">暂无数据</td></tr>';
|
||
} else {
|
||
tbody.innerHTML = res.data.map(r =>
|
||
`<tr><td>${r.student_id}</td><td>${r.student_name}</td><td>${r.score}</td></tr>`
|
||
).join('');
|
||
}
|
||
renderPagination(document.getElementById('score-pagination'), s, (p) => {
|
||
s.page = p; loadScore();
|
||
});
|
||
} catch (e) { toast('请求失败', 'error'); }
|
||
}
|
||
|
||
async function searchNoPass() {
|
||
state.nopass.page = 1;
|
||
await loadNoPass();
|
||
}
|
||
|
||
async function loadNoPass() {
|
||
const s = state.nopass;
|
||
s.size = parseInt(document.getElementById('nopass-size').value) || 10;
|
||
const fc = parseInt(document.getElementById('fail-count').value);
|
||
try {
|
||
const res = await API.getNoPassStudents(s.page, s.size, fc);
|
||
if (res.code !== 200) { toast(res.message, 'error'); return; }
|
||
s.total = res.total; s.totalPages = res.total_pages;
|
||
|
||
const tbody = document.querySelector('#nopass-table tbody');
|
||
if (!res.data.length) {
|
||
tbody.innerHTML = '<tr><td colspan="3" class="empty">暂无数据</td></tr>';
|
||
} else {
|
||
tbody.innerHTML = res.data.map(r =>
|
||
`<tr><td>${r.student_id}</td><td>${r.student_name}</td><td>${r.fail_count}</td></tr>`
|
||
).join('');
|
||
}
|
||
renderPagination(document.getElementById('nopass-pagination'), s, (p) => {
|
||
s.page = p; loadNoPass();
|
||
});
|
||
} catch (e) { toast('请求失败', 'error'); }
|
||
}
|
||
|
||
async function loadExamAvg() {
|
||
const s = state.examAvg;
|
||
s.size = parseInt(document.getElementById('exam-avg-size').value) || 10;
|
||
try {
|
||
const res = await API.getClassExamAvg(s.page, s.size);
|
||
if (res.code !== 200) { toast(res.message, 'error'); return; }
|
||
s.total = res.total; s.totalPages = res.total_pages;
|
||
|
||
const data = res.data || [];
|
||
|
||
const tbody = document.querySelector('#exam-avg-table tbody');
|
||
if (!data.length) {
|
||
tbody.innerHTML = '<tr><td colspan="4" class="empty">暂无数据</td></tr>';
|
||
} else {
|
||
tbody.innerHTML = data.map(r =>
|
||
`<tr><td>${r.course_id}</td><td>${r.class_id}</td><td>${r.class_name}</td><td>${r.avg_score.toFixed(2)}</td></tr>`
|
||
).join('');
|
||
}
|
||
|
||
const chart = echarts.init(document.getElementById('exam-avg-chart'));
|
||
chart.setOption({
|
||
tooltip: { trigger: 'axis' },
|
||
grid: { left: 50, right: 30, top: 30, bottom: 80 },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: data.map(d => d.class_name + '-' + d.course_id),
|
||
axisLabel: { rotate: 40 }
|
||
},
|
||
yAxis: { type: 'value', min: 0, max: 100 },
|
||
series: [{
|
||
type: 'bar',
|
||
data: data.map(d => d.avg_score.toFixed(2)),
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#2a5298' },
|
||
{ offset: 1, color: '#1e3c72' }
|
||
])
|
||
},
|
||
label: { show: true, position: 'top', formatter: '{c}' }
|
||
}]
|
||
});
|
||
|
||
renderPagination(document.getElementById('exam-avg-pagination'), s, (p) => {
|
||
s.page = p; loadExamAvg();
|
||
});
|
||
} catch (e) { toast('请求失败', 'error'); }
|
||
}
|
||
|
||
async function loadSalaryTop() {
|
||
const m = parseInt(document.getElementById('salary-n').value) || 5;
|
||
try {
|
||
const res = await API.getSalaryTop(m);
|
||
if (res.code !== 200) { toast(res.message, 'error'); return; }
|
||
const data = res.data || [];
|
||
|
||
const tbody = document.querySelector('#salary-table tbody');
|
||
if (!data.length) {
|
||
tbody.innerHTML = '<tr><td colspan="5" class="empty">暂无数据</td></tr>';
|
||
} else {
|
||
tbody.innerHTML = data.map(r =>
|
||
`<tr><td>${r.student_name}</td><td>${r.class_name}</td><td>${r.company_name}</td>
|
||
<td>${formatDate(r.part_time)}</td><td>${r.salary}</td></tr>`
|
||
).join('');
|
||
}
|
||
|
||
const chart = echarts.init(document.getElementById('salary-chart'));
|
||
chart.setOption({
|
||
tooltip: { trigger: 'axis' },
|
||
grid: { left: 80, right: 30, top: 30, bottom: 30 },
|
||
xAxis: { type: 'value' },
|
||
yAxis: { type: 'category', data: data.map(d => d.student_name).reverse() },
|
||
series: [{
|
||
type: 'bar',
|
||
data: data.map(d => d.salary).reverse(),
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: '#fa709a' },
|
||
{ offset: 1, color: '#fee140' }
|
||
])
|
||
},
|
||
label: { show: true, position: 'right', formatter: '{c}' }
|
||
}]
|
||
});
|
||
} catch (e) { toast('请求失败', 'error'); }
|
||
}
|
||
|
||
async function loadTimeSize() {
|
||
const s = state.timeSize;
|
||
s.size = parseInt(document.getElementById('time-size').value) || 10;
|
||
try {
|
||
const res = await API.getTimeSize(s.page, s.size);
|
||
if (res.code !== 200) { toast(res.message, 'error'); return; }
|
||
s.total = res.total; s.totalPages = res.total_pages;
|
||
|
||
const tbody = document.querySelector('#time-table tbody');
|
||
if (!res.data.length) {
|
||
tbody.innerHTML = '<tr><td colspan="5" class="empty">暂无数据</td></tr>';
|
||
} else {
|
||
tbody.innerHTML = res.data.map(r =>
|
||
`<tr><td>${r.student_id}</td><td>${r.student_name}</td>
|
||
<td>${formatDate(r.resume_open_date)}</td>
|
||
<td>${formatDate(r.offer_date)}</td><td>${r.time_size}</td></tr>`
|
||
).join('');
|
||
}
|
||
renderPagination(document.getElementById('time-pagination'), s, (p) => {
|
||
s.page = p; loadTimeSize();
|
||
});
|
||
} catch (e) { toast('请求失败', 'error'); }
|
||
}
|
||
|
||
async function loadClassAvgTime() {
|
||
const s = state.classAvgTime;
|
||
s.size = parseInt(document.getElementById('class-avg-time-size').value) || 10;
|
||
try {
|
||
const res = await API.getClassAvgTimeSize(s.page, s.size);
|
||
if (res.code !== 200) { toast(res.message, 'error'); return; }
|
||
s.total = res.total; s.totalPages = res.total_pages;
|
||
|
||
const data = res.data || [];
|
||
|
||
const tbody = document.querySelector('#class-avg-time-table tbody');
|
||
if (!data.length) {
|
||
tbody.innerHTML = '<tr><td colspan="3" class="empty">暂无数据</td></tr>';
|
||
} else {
|
||
tbody.innerHTML = data.map(r =>
|
||
`<tr><td>${r.class_id}</td><td>${r.class_name}</td><td>${r.avg_time_size.toFixed(1)}</td></tr>`
|
||
).join('');
|
||
}
|
||
|
||
const chart = echarts.init(document.getElementById('class-avg-time-chart'));
|
||
chart.setOption({
|
||
tooltip: { trigger: 'axis' },
|
||
grid: { left: 50, right: 30, top: 30, bottom: 80 },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: data.map(d => d.class_name),
|
||
axisLabel: { rotate: 30 }
|
||
},
|
||
yAxis: { type: 'value', name: '天数' },
|
||
series: [{
|
||
type: 'bar',
|
||
data: data.map(d => d.avg_time_size.toFixed(1)),
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#43e97b' },
|
||
{ offset: 1, color: '#38f9d7' }
|
||
])
|
||
},
|
||
label: { show: true, position: 'top', formatter: '{c}天' }
|
||
}]
|
||
});
|
||
|
||
renderPagination(document.getElementById('class-avg-time-pagination'), s, (p) => {
|
||
s.page = p; loadClassAvgTime();
|
||
});
|
||
} catch (e) { toast('请求失败', 'error'); }
|
||
}
|
||
|
||
function reloadExamAvg() { state.examAvg.page = 1; loadExamAvg(); }
|
||
function reloadTimeSize() { state.timeSize.page = 1; loadTimeSize(); }
|
||
function reloadClassAvgTime() { state.classAvgTime.page = 1; loadClassAvgTime(); }
|
||
|
||
// ============ 启动 ============
|
||
window.addEventListener('DOMContentLoaded', () => {
|
||
createPages();
|
||
renderSidebar();
|
||
window.searchAge = searchAge;
|
||
window.searchClassInfo = searchClassInfo;
|
||
window.searchScore = searchScore;
|
||
window.searchNoPass = searchNoPass;
|
||
window.loadSalaryTop = loadSalaryTop;
|
||
window.reloadExamAvg = reloadExamAvg;
|
||
window.reloadTimeSize = reloadTimeSize;
|
||
window.reloadClassAvgTime = reloadClassAvgTime;
|
||
window.addEventListener('resize', () => {
|
||
document.querySelectorAll('.chart-container').forEach(el => {
|
||
const inst = echarts.getInstanceByDom(el);
|
||
if (inst) inst.resize();
|
||
});
|
||
});
|
||
});
|
||
|
||
// 页面切换时也触发对应数据加载
|
||
const origShowPage = showPage; |