} catch (error) {
console.error('加载职位数据失败:', error);
this.renderEmptyTable('jobsTableBody', '职位数据');
}
}
renderApplicationsTable(applications) {
const tbody = document.getElementById('applicationsTableBody');
if (!tbody) return;
if (!applications || applications.length === 0) {
this.renderEmptyTable('applicationsTableBody', '申请记录');
return;
}
tbody.innerHTML = '';
// 只显示前10条记录
const displayApplications = applications.slice(0, 10);
displayApplications.forEach(app => {
const row = document.createElement('tr');
// 格式化时间
const applyTime = new Date(app.applyTime || Date.now());
const timeStr = applyTime.toLocaleDateString('zh-CN', {
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
// 状态标签
let statusClass = 'info';
let statusText = '待处理';
if (app.status === 'accepted') {
statusClass = 'success';
statusText = '已接受';
} else if (app.status === 'rejected') {
statusClass = 'error';
statusText = '已拒绝';
} else if (app.status === 'interviewing') {
statusClass = 'warning';
statusText = '面试中';
}
row.innerHTML = `
| ${app.applicantName || '匿名用户'} |
${app.jobTitle || '未知职位'} |
${app.companyName || '未知企业'} |
${timeStr} |
${statusText} |
`;
tbody.appendChild(row);
});
// 更新分页信息
document.getElementById('applicationsInfo').textContent =
`显示 ${displayApplications.length} 条记录`;
}
renderJobsTable(jobs) {
const tbody = document.getElementById('jobsTableBody');
if (!tbody) return;
if (!jobs || jobs.length === 0) {
this.renderEmptyTable('jobsTableBody', '职位数据');
return;
}
tbody.innerHTML = '';
// 只显示前10条记录
const displayJobs = jobs.slice(0, 10);
displayJobs.forEach(job => {
const row = document.createElement('tr');
// 格式化时间
const publishTime = new Date(job.publishTime || Date.now());
const timeStr = publishTime.toLocaleDateString('zh-CN', {
month: 'short',
day: 'numeric'
});
// 格式化薪资
const salary = job.salary || '面议';
const applicants = job.applicants || 0;
row.innerHTML = `
${job.title || '未知职位'} |
${job.company || '未知企业'} |
${salary} |
${timeStr} |
${applicants}人 |
`;
tbody.appendChild(row);
});
// 更新分页信息
document.getElementById('jobsInfo').textContent =
`显示 ${displayJobs.length} 条记录`;
}
renderEmptyTable(elementId, dataType) {
const tbody = document.getElementById(elementId);
if (!tbody) return;
tbody.innerHTML = `
|
📊
暂无${dataType}
当前没有可显示的${dataType}记录
|
`;
}
refreshData() {
if (this.isLoading) return;
const refreshBtn = document.getElementById('refreshBtn');
const refreshIcon = document.getElementById('refreshIcon');
const refreshText = document.getElementById('refreshText');
// 显示加载状态
refreshIcon.textContent = '';
refreshIcon.classList.add('loading');
refreshText.textContent = '加载中...';
refreshBtn.disabled = true;
// 加载数据
this.loadData().finally(() => {
// 恢复按钮状态
setTimeout(() => {
refreshIcon.textContent = '🔄';
refreshIcon.classList.remove('loading');
refreshText.textContent = '刷新数据';
refreshBtn.disabled = false;
}, 500);
});
}
exportData() {
// 模拟导出功能
this.showSuccess('数据导出功能开发中...');
// 实际实现时，这里可以调用导出API
// const exportUrl = `${this.apiBaseUrl}/export?range=${this.currentTimeRange}`;
// window.open(exportUrl, '_blank');
}
viewAllApplications() {
this.showInfo('正在跳转到申请管理页面...');
// 实际实现时，这里可以跳转到专门的申请管理页面
// window.location.href = 'applications-management.html';
}
viewAllJobs() {
this.showInfo('正在跳转到职位管理页面...');
// 实际实现时，这里可以跳转到专门的职位管理页面
// window.location.href = 'jobs-management.html';
}
updateApiStatus(isConnected) {
const apiStatus = document.getElementById('apiStatus');
const apiStatusIcon = document.getElementById('apiStatusIcon');
const apiStatusText = document.getElementById('apiStatusText');
if (isConnected) {
apiStatus.className = 'status-badge success';
apiStatusIcon.textContent = '✅';
apiStatusText.textContent = 'API连接正常';
} else {
apiStatus.className = 'status-badge error';
apiStatusIcon.textContent = '❌';
apiStatusText.textContent = 'API连接失败';
}
}
updateLastUpdateTime() {
const now = new Date();
const timeStr = now.toLocaleTimeString('zh-CN', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
document.getElementById('lastUpdate').textContent = `最后更新: ${timeStr}`;
}
setupAutoRefresh() {
// 每5分钟自动刷新一次
this.autoRefreshInterval = setInterval(() => {
if (this.autoRefreshEnabled && !this.isLoading) {
this.loadData();
}
}, 5 * 60 * 1000); // 5分钟
// 默认启用自动刷新
this.autoRefreshEnabled = true;
}
adaptToDevice() {
const isMobile = window.innerWidth < 768;
const isTablet = window.innerWidth >= 768 && window.innerWidth < 1024;
// 根据设备类型优化显示
if (isMobile) {
this.optimizeForMobile();
} else if (isTablet) {
this.optimizeForTablet();
} else {
this.optimizeForDesktop();
}
}
optimizeForMobile() {
// 移动端优化
document.body.classList.add('device-mobile');
// 隐藏不必要的元素
const elementsToHide = document.querySelectorAll('.desktop-only');
elementsToHide.forEach(el => {
el.style.display = 'none';
});
// 显示移动端优化元素
const elementsToShow = document.querySelectorAll('.mobile-only');
elementsToShow.forEach(el => {
el.style.display = 'block';
});
}
optimizeForTablet() {
// 平板优化
document.body.classList.add('device-tablet');
}
optimizeForDesktop() {
// 桌面端优化
document.body.classList.add('device-pc');
}
optimizeTouchInteractions() {
// 优化触摸交互
const touchElements = document.querySelectorAll('.stat-card, .btn, .navbar-link');
touchElements.forEach(element => {
element.addEventListener('touchstart', () => {
element.style.opacity = '0.7';
});
element.addEventListener('touchend', () => {
element.style.opacity = '1';
});
element.addEventListener('touchcancel', () => {
element.style.opacity = '1';
});
});
// 防止双击缩放
let lastTouchEnd = 0;
document.addEventListener('touchend', (event) => {
const now = Date.now();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, { passive: false });
}
useMockData() {
// 使用模拟数据
const mockData = {
users: 156,
companies: 42,
jobs: 89,
applications: 324,
resumes: 567,
conversionRate: 3.2,
revenue: 125000,
growthRate: 12.5
};
// 更新统计卡片
this.updateStatCard('statUsers', mockData.users);
this.updateStatCard('statCompanies', mockData.companies);
this.updateStatCard('statJobs', mockData.jobs);
this.updateStatCard('statApplications', mockData.applications);
this.updateStatCard('statResumes', mockData.resumes);
document.getElementById('statConversion').textContent = `${mockData.conversionRate.toFixed(1)}%`;
document.getElementById('statRevenue').textContent = `¥${mockData.revenue.toLocaleString()}`;
document.getElementById('statGrowth').textContent = `${mockData.growthRate.toFixed(1)}%`;
// 使用模拟的申请记录
const mockApplications = [
{ applicantName: '张三', jobTitle: '前端工程师', companyName: '科技公司', applyTime: Date.now() - 3600000, status: 'interviewing' },
{ applicantName: '李四', jobTitle: '产品经理', companyName: '互联网公司', applyTime: Date.now() - 7200000, status: 'accepted' },
{ applicantName: '王五', jobTitle: 'UI设计师', companyName: '设计公司', applyTime: Date.now() - 10800000, status: 'pending' }
];
this.renderApplicationsTable(mockApplications);
// 使用模拟的职位数据
const mockJobs = [
{ title: '高级Java开发', company: '金融科技公司', salary: '25-40K', publishTime: Date.now() - 86400000, applicants: 15 },
{ title: 'React前端工程师', company: '电商平台', salary: '20-35K', publishTime: Date.now() - 172800000, applicants: 28 },
{ title: '数据分析师', company: '大数据公司', salary: '18-30K', publishTime: Date.now() - 259200000, applicants: 12 }
];
this.renderJobsTable(mockJobs);
}
showLoading() {
// 显示加载状态
document.body.style.cursor = 'wait';
const loadingOverlay = document.createElement('div');
loadingOverlay.id = 'loadingOverlay';
loadingOverlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(2px);
`;
loadingOverlay.innerHTML = `
`;
document.body.appendChild(loadingOverlay);
}
hideLoading() {
// 隐藏加载状态
document.body.style.cursor = 'default';
const loadingOverlay = document.getElementById('loadingOverlay');
if (loadingOverlay) {
loadingOverlay.remove();
}
}
showSuccess(message) {
this.showNotification(message, 'success');
}
showError(message) {
this.showNotification(message, 'error');
}
showInfo(message) {
this.showNotification(message, 'info');
}
showNotification(message, type = 'info') {
// 创建通知元素
const notification = document.createElement('div');
notification.className = `notification notification-${type}`;
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 1rem 1.5rem;
background: ${type === 'success' ? 'var(--color-success)' :
type === 'error' ? 'var(--color-danger)' :
'var(--color-info)'};
color: white;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
z-index: 10000;
animation: slideIn 0.3s ease;
max-width: 300px;
`;
notification.textContent = message;
document.body.appendChild(notification);
// 3秒后自动移除
setTimeout(() => {
notification.style.animation = 'slideOut 0.3s ease';
setTimeout(() => {
if (notification.parentNode) {
notification.parentNode.removeChild(notification);
}
}, 300);
}, 3000);
// 添加动画样式
if (!document.getElementById('notificationStyles')) {
const style = document.createElement('style');
style.id = 'notificationStyles';
style.textContent = `
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
`;
document.head.appendChild(style);
}
}
// 设备检测
detectDevice() {
const userAgent = navigator.userAgent.toLowerCase();
if (/harmonyos/i.test(userAgent)) {
return 'harmonyos';
} else if (/android/i.test(userAgent)) {
return 'android';
} else if (/iphone|ipad|ipod/i.test(userAgent)) {
return 'ios';
} else {
return 'desktop';
}
}
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
// 初始化业务仪表板
const dashboard = new BusinessDashboard();
// 将dashboard实例挂载到window，方便调试
window.businessDashboard = dashboard;
// 设备特定优化
const device = dashboard.detectDevice();
console.log(`检测到设备: ${device}`);
// 根据设备类型进行特定优化
switch (device) {
case 'harmonyos':
// 鸿蒙系统优化
document.body.classList.add('harmonyos-optimized');
break;
case 'android':
// 安卓系统优化
document.body.classList.add('android-optimized');
break;
case 'ios':
// iOS系统优化
document.body.classList.add('ios-optimized');
break;
}
// 性能监控
const perfObserver = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.entryType === 'largest-contentful-paint') {
console.log(`最大内容绘制时间: ${entry.startTime}ms`);
if (entry.startTime > 2500) {
console.warn('页面加载性能需要优化');
}
}
}
});
perfObserver.observe({ entryTypes: ['largest-contentful-paint'] });
// 错误监控
window.addEventListener('error', (event) => {
console.error('页面错误:', event.error);
// 可以在这里将错误发送到监控服务器
// fetch('/api/log-error', {
// method: 'POST',
// body: JSON.stringify({
// message: event.error.message,
// stack: event.error.stack,
// url: window.location.href,
// timestamp: new Date().toISOString()
// })
// });
});
// 离线检测
window.addEventListener('offline', () => {
dashboard.showError('网络连接已断开，部分功能可能无法使用');
});
window.addEventListener('online', () => {
dashboard.showSuccess('网络连接已恢复');
dashboard.refreshData();
});
});
// 页面可见性变化
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
// 页面重新可见时刷新数据
if (window.businessDashboard) {
window.businessDashboard.refreshData();
}
}
});