797 lines
27 KiB
JavaScript
797 lines
27 KiB
JavaScript
let table, layer, form;
|
||
let utilizationChart = null, trendsChart = null;
|
||
let isAnimating = false; // 防止重复动画的标志位
|
||
|
||
// 模拟数据
|
||
const mockData = {
|
||
// 总体统计数据
|
||
overallStats: {
|
||
totalRate: 85.2,
|
||
personnelRate: 88.5,
|
||
equipmentRate: 82.3,
|
||
materialRate: 84.8
|
||
},
|
||
|
||
// 资源概览数据
|
||
resourceOverview: {
|
||
personnel: { count: 126, rate: 88.5 },
|
||
equipment: { count: 42, rate: 82.3 },
|
||
material: { count: 89, rate: 84.8 },
|
||
energy: { count: 76, rate: 91.2 }
|
||
},
|
||
|
||
// 资源详细列表
|
||
resourceDetails: [
|
||
{ type: '人员', name: '土建班组A', status: 'active', rate: 92.5, assessment: '优秀' },
|
||
{ type: '人员', name: '钢筋班组B', status: 'working', rate: 88.2, assessment: '良好' },
|
||
{ type: '人员', name: '混凝土班组C', status: 'rest', rate: 85.7, assessment: '良好' },
|
||
{ type: '设备', name: '塔吊001', status: 'running', rate: 89.3, assessment: '优秀' },
|
||
{ type: '设备', name: '挖掘机002', status: 'normal', rate: 78.6, assessment: '一般' },
|
||
{ type: '设备', name: '混凝土泵车', status: 'maintenance', rate: 76.4, assessment: '一般' },
|
||
{ type: '设备', name: '起重机003', status: 'offline', rate: 0, assessment: '较差' },
|
||
{ type: '材料', name: '钢筋', status: 'sufficient', rate: 91.2, assessment: '优秀' },
|
||
{ type: '材料', name: '混凝土', status: 'normal', rate: 83.5, assessment: '良好' },
|
||
{ type: '材料', name: '砂石料', status: 'low_stock', rate: 79.8, assessment: '一般' },
|
||
{ type: '材料', name: '水泥', status: 'critical', rate: 65.2, assessment: '较差' },
|
||
{ type: '能源', name: '电力系统', status: 'stable', rate: 93.1, assessment: '优秀' },
|
||
{ type: '能源', name: '柴油储备', status: 'high_consumption', rate: 88.4, assessment: '良好' },
|
||
{ type: '能源', name: '天然气', status: 'available', rate: 85.6, assessment: '良好' },
|
||
{ type: '能源', name: '备用电源', status: 'standby', rate: 100, assessment: '优秀' }
|
||
],
|
||
|
||
// 利用率分布数据
|
||
utilizationData: [
|
||
{ name: '人员', value: 88.5, color: '#16baaa' },
|
||
{ name: '设备', value: 82.3, color: '#20d3c2' },
|
||
{ name: '材料', value: 84.8, color: '#25e5d0' },
|
||
{ name: '能源', value: 91.2, color: '#2af0dd' }
|
||
],
|
||
|
||
// 趋势数据（最近7天）
|
||
trendsData: {
|
||
dates: ['2024-01-15', '2024-01-16', '2024-01-17', '2024-01-18', '2024-01-19', '2024-01-20', '2024-01-21'],
|
||
personnel: [85.2, 87.1, 88.5, 89.2, 88.8, 87.9, 88.5],
|
||
equipment: [78.9, 80.3, 82.1, 81.7, 82.3, 83.1, 82.3],
|
||
material: [82.1, 83.5, 84.2, 84.8, 85.1, 84.6, 84.8],
|
||
energy: [89.5, 90.2, 91.2, 90.8, 91.5, 91.0, 91.2]
|
||
},
|
||
|
||
// 优化建议
|
||
optimizationSuggestions: [
|
||
{
|
||
title: '设备调度优化',
|
||
description: '挖掘机002利用率偏低，建议调整作业计划，提高设备运转效率',
|
||
priority: '高优先级'
|
||
},
|
||
{
|
||
title: '材料库存管理',
|
||
description: '砂石料库存不足，建议提前采购补充，避免影响施工进度',
|
||
priority: '中优先级'
|
||
},
|
||
{
|
||
title: '人员配置调整',
|
||
description: '土建班组A效率突出，建议增加人员配置或分配更多任务',
|
||
priority: '中优先级'
|
||
},
|
||
{
|
||
title: '能源消耗监控',
|
||
description: '柴油消耗偏高，建议检查设备运行状态，优化燃油使用',
|
||
priority: '低优先级'
|
||
},
|
||
{
|
||
title: '设备维护计划',
|
||
description: '混凝土泵车正在维护中，建议制定预防性维护计划减少停机时间',
|
||
priority: '高优先级'
|
||
}
|
||
]
|
||
};
|
||
|
||
// 页面初始化
|
||
layui.use(['layer', 'table', 'form'], function () {
|
||
layer = layui.layer;
|
||
table = layui.table;
|
||
form = layui.form;
|
||
|
||
// 初始化粒子背景
|
||
initParticles();
|
||
|
||
// 模拟加载延迟
|
||
setTimeout(() => {
|
||
// 隐藏加载动画
|
||
$('#loadingOverlay').fadeOut(500);
|
||
|
||
// 初始化页面数据
|
||
initPageData();
|
||
|
||
// 初始化图表
|
||
initCharts();
|
||
|
||
// 启动数据更新定时器
|
||
startDataRefresh();
|
||
}, 2000);
|
||
});
|
||
|
||
// 初始化粒子背景
|
||
function initParticles() {
|
||
if (typeof particlesJS !== 'undefined') {
|
||
particlesJS('particles-js', {
|
||
"particles": {
|
||
"number": {
|
||
"value": 80,
|
||
"density": {
|
||
"enable": true,
|
||
"value_area": 800
|
||
}
|
||
},
|
||
"color": {
|
||
"value": "#16baaa"
|
||
},
|
||
"shape": {
|
||
"type": "circle",
|
||
"stroke": {
|
||
"width": 0,
|
||
"color": "#000000"
|
||
}
|
||
},
|
||
"opacity": {
|
||
"value": 0.5,
|
||
"random": false,
|
||
"anim": {
|
||
"enable": false,
|
||
"speed": 1,
|
||
"opacity_min": 0.1,
|
||
"sync": false
|
||
}
|
||
},
|
||
"size": {
|
||
"value": 3,
|
||
"random": true,
|
||
"anim": {
|
||
"enable": false,
|
||
"speed": 40,
|
||
"size_min": 0.1,
|
||
"sync": false
|
||
}
|
||
},
|
||
"line_linked": {
|
||
"enable": true,
|
||
"distance": 150,
|
||
"color": "#16baaa",
|
||
"opacity": 0.4,
|
||
"width": 1
|
||
},
|
||
"move": {
|
||
"enable": true,
|
||
"speed": 2,
|
||
"direction": "none",
|
||
"random": false,
|
||
"straight": false,
|
||
"out_mode": "out",
|
||
"bounce": false,
|
||
"attract": {
|
||
"enable": false,
|
||
"rotateX": 600,
|
||
"rotateY": 1200
|
||
}
|
||
}
|
||
},
|
||
"interactivity": {
|
||
"detect_on": "canvas",
|
||
"events": {
|
||
"onhover": {
|
||
"enable": true,
|
||
"mode": "repulse"
|
||
},
|
||
"onclick": {
|
||
"enable": true,
|
||
"mode": "push"
|
||
},
|
||
"resize": true
|
||
},
|
||
"modes": {
|
||
"grab": {
|
||
"distance": 400,
|
||
"line_linked": {
|
||
"opacity": 1
|
||
}
|
||
},
|
||
"bubble": {
|
||
"distance": 400,
|
||
"size": 40,
|
||
"duration": 2,
|
||
"opacity": 8,
|
||
"speed": 3
|
||
},
|
||
"repulse": {
|
||
"distance": 200,
|
||
"duration": 0.4
|
||
},
|
||
"push": {
|
||
"particles_nb": 4
|
||
},
|
||
"remove": {
|
||
"particles_nb": 2
|
||
}
|
||
}
|
||
},
|
||
"retina_detect": true
|
||
});
|
||
}
|
||
}
|
||
|
||
// 初始化页面数据
|
||
function initPageData() {
|
||
// 直接设置初始值，不使用动画
|
||
const stats = mockData.overallStats;
|
||
$('#totalRate').text(stats.totalRate.toFixed(1) + '%');
|
||
$('#personnelRate').text(stats.personnelRate.toFixed(1) + '%');
|
||
$('#equipmentRate').text(stats.equipmentRate.toFixed(1) + '%');
|
||
$('#materialRate').text(stats.materialRate.toFixed(1) + '%');
|
||
|
||
// 设置资源概览初始值
|
||
const overview = mockData.resourceOverview;
|
||
$('#personnelCount').text(overview.personnel.count);
|
||
$('#equipmentCount').text(overview.equipment.count);
|
||
$('#materialCount').text(overview.material.count);
|
||
$('#energyCount').text(overview.energy.count + '%');
|
||
|
||
// 更新资源详细表格
|
||
updateResourceTable();
|
||
|
||
// 更新优化建议
|
||
updateOptimizationSuggestions();
|
||
}
|
||
|
||
// 更新头部统计数据
|
||
function updateHeaderStats() {
|
||
const stats = mockData.overallStats;
|
||
|
||
// 获取当前值，如果不存在则从0开始
|
||
const currentTotal = parseFloat($('#totalRate').text()) || 0;
|
||
const currentPersonnel = parseFloat($('#personnelRate').text()) || 0;
|
||
const currentEquipment = parseFloat($('#equipmentRate').text()) || 0;
|
||
const currentMaterial = parseFloat($('#materialRate').text()) || 0;
|
||
|
||
animateValue('totalRate', currentTotal, stats.totalRate, '%');
|
||
animateValue('personnelRate', currentPersonnel, stats.personnelRate, '%');
|
||
animateValue('equipmentRate', currentEquipment, stats.equipmentRate, '%');
|
||
animateValue('materialRate', currentMaterial, stats.materialRate, '%');
|
||
}
|
||
|
||
// 数值动画函数
|
||
function animateValue(elementId, start, end, suffix = '') {
|
||
const element = document.getElementById(elementId);
|
||
if (!element) return;
|
||
|
||
// 如果起始值无效，设为0
|
||
if (isNaN(start) || start < 0) start = 0;
|
||
if (isNaN(end)) return;
|
||
|
||
// 如果数值相同，直接设置，不需要动画
|
||
if (Math.abs(end - start) < 0.1) {
|
||
element.textContent = end.toFixed(1) + suffix;
|
||
return;
|
||
}
|
||
|
||
const range = end - start;
|
||
const duration = 1000; // 动画持续时间(毫秒)
|
||
const startTime = Date.now();
|
||
|
||
const animate = () => {
|
||
const now = Date.now();
|
||
const elapsed = now - startTime;
|
||
const progress = Math.min(elapsed / duration, 1);
|
||
|
||
// 使用缓动函数
|
||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||
const current = start + (range * easeOutQuart);
|
||
|
||
element.textContent = current.toFixed(1) + suffix;
|
||
|
||
if (progress < 1) {
|
||
requestAnimationFrame(animate);
|
||
} else {
|
||
element.textContent = end.toFixed(1) + suffix;
|
||
}
|
||
};
|
||
|
||
animate();
|
||
}
|
||
|
||
// 更新资源概览
|
||
function updateResourceOverview() {
|
||
const overview = mockData.resourceOverview;
|
||
|
||
// 获取当前值，如果不存在则从0开始
|
||
const currentPersonnel = parseInt($('#personnelCount').text()) || 0;
|
||
const currentEquipment = parseInt($('#equipmentCount').text()) || 0;
|
||
const currentMaterial = parseInt($('#materialCount').text()) || 0;
|
||
const currentEnergy = parseInt($('#energyCount').text()) || 0;
|
||
|
||
animateValue('personnelCount', currentPersonnel, overview.personnel.count);
|
||
animateValue('equipmentCount', currentEquipment, overview.equipment.count);
|
||
animateValue('materialCount', currentMaterial, overview.material.count);
|
||
animateValue('energyCount', currentEnergy, overview.energy.count, '%');
|
||
}
|
||
|
||
// 更新资源详细表格
|
||
function updateResourceTable() {
|
||
const tableBody = $('#resourceTableBody');
|
||
tableBody.empty();
|
||
|
||
mockData.resourceDetails.forEach((item, index) => {
|
||
const assessmentClass = getAssessmentClass(item.assessment);
|
||
const statusClass = getStatusClass(item.status);
|
||
|
||
const row = `
|
||
<tr class="table-row-animate" style="animation-delay: ${index * 0.1}s;">
|
||
<td>${item.type}</td>
|
||
<td>${item.name}</td>
|
||
<td><span class="${statusClass}">${translateStatus(item.status)}</span></td>
|
||
<td><span class="rate-value">${item.rate}%</span></td>
|
||
<td><span class="${assessmentClass}">${item.assessment}</span></td>
|
||
</tr>
|
||
`;
|
||
tableBody.append(row);
|
||
});
|
||
}
|
||
|
||
// 获取效率评估样式类
|
||
function getAssessmentClass(assessment) {
|
||
switch(assessment) {
|
||
case '优秀': return 'assessment-excellent';
|
||
case '良好': return 'assessment-good';
|
||
case '一般': return 'assessment-normal';
|
||
default: return '';
|
||
}
|
||
}
|
||
|
||
// 获取状态样式类
|
||
function getStatusClass(status) {
|
||
// 处理英文状态和中英文对照状态
|
||
const lowerStatus = status.toLowerCase();
|
||
|
||
// 正常/良好状态
|
||
if (lowerStatus.includes('active') || lowerStatus.includes('normal') || lowerStatus.includes('sufficient') ||
|
||
lowerStatus.includes('running') || lowerStatus.includes('working') || lowerStatus.includes('available') ||
|
||
lowerStatus.includes('stable') || lowerStatus.includes('good') ||
|
||
status.includes('工作中') || status.includes('运行中') || status.includes('充足') ||
|
||
status.includes('正常') || status.includes('可用') || status.includes('稳定')) {
|
||
return 'status-active';
|
||
}
|
||
// 警告/异常状态
|
||
else if (lowerStatus.includes('rest') || lowerStatus.includes('maintenance') || lowerStatus.includes('low') ||
|
||
lowerStatus.includes('high_consumption') || lowerStatus.includes('low_stock') || lowerStatus.includes('warning') ||
|
||
lowerStatus.includes('critical') || lowerStatus.includes('offline') || lowerStatus.includes('error') ||
|
||
lowerStatus.includes('unavailable') || lowerStatus.includes('unstable') || lowerStatus.includes('poor') ||
|
||
status.includes('休息中') || status.includes('维护中') || status.includes('库存低') || status.includes('偏高') ||
|
||
status.includes('警告') || status.includes('紧急') || status.includes('离线') || status.includes('故障') ||
|
||
status.includes('不可用') || status.includes('不稳定') || status.includes('较差')) {
|
||
return 'status-warning';
|
||
}
|
||
// 默认状态
|
||
return 'status-normal';
|
||
}
|
||
|
||
// 状态中英文对照
|
||
function translateStatus(status) {
|
||
const statusMap = {
|
||
'active': '运行中',
|
||
'normal': '正常',
|
||
'sufficient': '充足',
|
||
'rest': '休息中',
|
||
'maintenance': '维护中',
|
||
'low_stock': '库存不足',
|
||
'high_consumption': '消耗偏高',
|
||
'offline': '离线',
|
||
'error': '故障',
|
||
'warning': '警告',
|
||
'good': '良好',
|
||
'poor': '较差',
|
||
'working': '工作中',
|
||
'running': '运行中',
|
||
'idle': '空闲',
|
||
'standby': '待机',
|
||
'busy': '繁忙',
|
||
'available': '可用',
|
||
'unavailable': '不可用',
|
||
'critical': '紧急',
|
||
'low': '偏低',
|
||
'high': '偏高',
|
||
'stable': '稳定',
|
||
'unstable': '不稳定'
|
||
};
|
||
|
||
// 检查是否为纯英文状态（不包含中文字符）
|
||
const isEnglishOnly = /^[a-zA-Z_\-\s]+$/.test(status);
|
||
|
||
if (isEnglishOnly) {
|
||
const lowerStatus = status.toLowerCase().trim();
|
||
// 如果是英文状态，返回中文翻译+英文原文
|
||
if (statusMap[lowerStatus]) {
|
||
return `${statusMap[lowerStatus]} (${status})`;
|
||
} else {
|
||
// 如果没有对应翻译，但是是英文，则添加提示
|
||
return `${status} (英文状态)`;
|
||
}
|
||
}
|
||
|
||
// 如果已经是中文或混合文本，直接返回
|
||
return status;
|
||
}
|
||
|
||
// 更新优化建议
|
||
function updateOptimizationSuggestions() {
|
||
const container = $('#optimizationList');
|
||
container.empty();
|
||
|
||
mockData.optimizationSuggestions.forEach((suggestion, index) => {
|
||
const priorityClass = getPriorityClass(suggestion.priority);
|
||
const iconClass = getPriorityIcon(suggestion.priority);
|
||
const item = `
|
||
<div class="optimization-item animate__animated animate__fadeInUp" style="animation-delay: ${index * 0.1}s;">
|
||
<div class="optimization-title">
|
||
<i class="${iconClass}"></i>
|
||
${suggestion.title}
|
||
<span class="optimization-priority ${priorityClass}">${suggestion.priority}</span>
|
||
</div>
|
||
<div class="optimization-desc">${suggestion.description}</div>
|
||
</div>
|
||
`;
|
||
container.append(item);
|
||
});
|
||
}
|
||
|
||
// 获取优先级样式类
|
||
function getPriorityClass(priority) {
|
||
switch(priority) {
|
||
case '高优先级': return 'priority-high';
|
||
case '中优先级': return 'priority-medium';
|
||
case '低优先级': return 'priority-low';
|
||
default: return '';
|
||
}
|
||
}
|
||
|
||
// 获取优先级图标
|
||
function getPriorityIcon(priority) {
|
||
switch(priority) {
|
||
case '高优先级': return 'fas fa-exclamation-triangle priority-icon-high';
|
||
case '中优先级': return 'fas fa-info-circle priority-icon-medium';
|
||
case '低优先级': return 'fas fa-check-circle priority-icon-low';
|
||
default: return 'fas fa-circle';
|
||
}
|
||
}
|
||
|
||
// 初始化图表
|
||
function initCharts() {
|
||
initUtilizationChart();
|
||
initTrendsChart();
|
||
}
|
||
|
||
// 初始化利用率分布图表
|
||
function initUtilizationChart() {
|
||
const chartDom = document.getElementById('utilizationChart');
|
||
utilizationChart = echarts.init(chartDom);
|
||
|
||
const option = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: {
|
||
trigger: 'item',
|
||
backgroundColor: 'rgba(22, 186, 170, 0.9)',
|
||
borderColor: '#16baaa',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 'left',
|
||
top: 'center',
|
||
textStyle: {
|
||
color: '#16baaa',
|
||
fontSize: 12
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '资源利用率',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ['65%', '50%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 8,
|
||
borderColor: '#0a1e2b',
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'outside',
|
||
color: '#8cc8c1',
|
||
fontSize: 11,
|
||
formatter: '{b}: {c}%'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 12,
|
||
fontWeight: 'bold',
|
||
color: '#16baaa'
|
||
},
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(22, 186, 170, 0.5)'
|
||
}
|
||
},
|
||
data: mockData.utilizationData.map(item => ({
|
||
name: item.name,
|
||
value: item.value,
|
||
itemStyle: {
|
||
color: item.color
|
||
}
|
||
}))
|
||
}
|
||
]
|
||
};
|
||
|
||
utilizationChart.setOption(option);
|
||
}
|
||
|
||
// 初始化趋势图表
|
||
function initTrendsChart() {
|
||
const chartDom = document.getElementById('trendsChart');
|
||
trendsChart = echarts.init(chartDom);
|
||
|
||
const option = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(22, 186, 170, 0.9)',
|
||
borderColor: '#16baaa',
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
axisPointer: {
|
||
type: 'cross',
|
||
lineStyle: {
|
||
color: '#16baaa'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['人员', '设备', '材料', '能源'],
|
||
textStyle: {
|
||
color: '#16baaa'
|
||
},
|
||
top: 10
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
top: '15%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: mockData.trendsData.dates.map(date => date.substring(5)),
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#16baaa'
|
||
}
|
||
},
|
||
axisTick: {
|
||
lineStyle: {
|
||
color: '#16baaa'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#8cc8c1'
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
min: 70,
|
||
max: 95,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#16baaa'
|
||
}
|
||
},
|
||
axisTick: {
|
||
lineStyle: {
|
||
color: '#16baaa'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#8cc8c1',
|
||
formatter: '{value}%'
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(22, 186, 170, 0.2)'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '人员',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: mockData.trendsData.personnel,
|
||
lineStyle: {
|
||
color: '#16baaa',
|
||
width: 2
|
||
},
|
||
itemStyle: {
|
||
color: '#16baaa'
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: 'rgba(22, 186, 170, 0.3)' },
|
||
{ offset: 1, color: 'rgba(22, 186, 170, 0.1)' }
|
||
])
|
||
}
|
||
},
|
||
{
|
||
name: '设备',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: mockData.trendsData.equipment,
|
||
lineStyle: {
|
||
color: '#20d3c2',
|
||
width: 2
|
||
},
|
||
itemStyle: {
|
||
color: '#20d3c2'
|
||
}
|
||
},
|
||
{
|
||
name: '材料',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: mockData.trendsData.material,
|
||
lineStyle: {
|
||
color: '#25e5d0',
|
||
width: 2
|
||
},
|
||
itemStyle: {
|
||
color: '#25e5d0'
|
||
}
|
||
},
|
||
{
|
||
name: '能源',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: mockData.trendsData.energy,
|
||
lineStyle: {
|
||
color: '#2af0dd',
|
||
width: 2
|
||
},
|
||
itemStyle: {
|
||
color: '#2af0dd'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
trendsChart.setOption(option);
|
||
}
|
||
|
||
// 启动数据刷新定时器
|
||
function startDataRefresh() {
|
||
setInterval(() => {
|
||
// 模拟数据更新
|
||
updateMockData();
|
||
updatePageData();
|
||
updateCharts();
|
||
}, 60000); // 每60秒更新一次，减少频率
|
||
}
|
||
|
||
// 更新模拟数据
|
||
function updateMockData() {
|
||
// 随机更新一些数据，但变化幅度较小
|
||
const variation = 2; // 最大变化幅度
|
||
|
||
mockData.overallStats.totalRate = Math.round((mockData.overallStats.totalRate + (Math.random() - 0.5) * variation) * 10) / 10;
|
||
mockData.overallStats.personnelRate = Math.round((mockData.overallStats.personnelRate + (Math.random() - 0.5) * variation) * 10) / 10;
|
||
mockData.overallStats.equipmentRate = Math.round((mockData.overallStats.equipmentRate + (Math.random() - 0.5) * variation) * 10) / 10;
|
||
mockData.overallStats.materialRate = Math.round((mockData.overallStats.materialRate + (Math.random() - 0.5) * variation) * 10) / 10;
|
||
|
||
// 限制数值范围
|
||
mockData.overallStats.totalRate = Math.max(75, Math.min(95, mockData.overallStats.totalRate));
|
||
mockData.overallStats.personnelRate = Math.max(75, Math.min(95, mockData.overallStats.personnelRate));
|
||
mockData.overallStats.equipmentRate = Math.max(70, Math.min(90, mockData.overallStats.equipmentRate));
|
||
mockData.overallStats.materialRate = Math.max(75, Math.min(95, mockData.overallStats.materialRate));
|
||
|
||
// 同步更新资源概览数据
|
||
mockData.resourceOverview.personnel.rate = mockData.overallStats.personnelRate;
|
||
mockData.resourceOverview.equipment.rate = mockData.overallStats.equipmentRate;
|
||
mockData.resourceOverview.material.rate = mockData.overallStats.materialRate;
|
||
}
|
||
|
||
// 更新页面数据
|
||
function updatePageData() {
|
||
if (isAnimating) return; // 如果正在动画中，跳过更新
|
||
|
||
isAnimating = true;
|
||
updateHeaderStats();
|
||
updateResourceOverview();
|
||
|
||
// 1.5秒后重置动画标志
|
||
setTimeout(() => {
|
||
isAnimating = false;
|
||
}, 1500);
|
||
}
|
||
|
||
// 更新图表数据
|
||
function updateCharts() {
|
||
if (utilizationChart) {
|
||
// 更新利用率分布图
|
||
mockData.utilizationData[0].value = mockData.overallStats.personnelRate;
|
||
mockData.utilizationData[1].value = mockData.overallStats.equipmentRate;
|
||
mockData.utilizationData[2].value = mockData.overallStats.materialRate;
|
||
|
||
utilizationChart.setOption({
|
||
series: [{
|
||
data: mockData.utilizationData.map(item => ({
|
||
name: item.name,
|
||
value: parseFloat(item.value.toFixed(1)),
|
||
itemStyle: {
|
||
color: item.color
|
||
}
|
||
}))
|
||
}]
|
||
});
|
||
}
|
||
}
|
||
|
||
// 窗口大小改变时重新调整图表
|
||
window.addEventListener('resize', function() {
|
||
if (utilizationChart) {
|
||
utilizationChart.resize();
|
||
}
|
||
if (trendsChart) {
|
||
trendsChart.resize();
|
||
}
|
||
});
|
||
|
||
// 添加状态和评估样式
|
||
$(document).ready(function() {
|
||
$('<style>').prop('type', 'text/css').html(`
|
||
.status-active { color: #16baaa; font-weight: bold; }
|
||
.status-warning { color: #ffa726; font-weight: bold; }
|
||
.status-normal { color: #8cc8c1; }
|
||
.assessment-excellent { color: #16baaa; font-weight: bold; }
|
||
.assessment-good { color: #20d3c2; font-weight: bold; }
|
||
.assessment-normal { color: #ffa726; font-weight: bold; }
|
||
.priority-high { color: #ff5722; }
|
||
.priority-medium { color: #ffa726; }
|
||
.priority-low { color: #4caf50; }
|
||
.priority-icon-high { color: #ff5722; margin-right: 5px; animation: blink 1s infinite; }
|
||
.priority-icon-medium { color: #ffa726; margin-right: 5px; }
|
||
.priority-icon-low { color: #4caf50; margin-right: 5px; }
|
||
.rate-value {
|
||
color: #20d3c2;
|
||
font-weight: bold;
|
||
text-shadow: 0 0 5px rgba(32, 211, 194, 0.5);
|
||
}
|
||
.table-row-animate {
|
||
animation: slideInFromLeft 0.5s ease forwards;
|
||
opacity: 0;
|
||
transform: translateX(-20px);
|
||
}
|
||
@keyframes slideInFromLeft {
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
@keyframes blink {
|
||
0%, 50% { opacity: 1; }
|
||
51%, 100% { opacity: 0.3; }
|
||
}
|
||
`).appendTo('head');
|
||
});
|