235 lines
9.4 KiB
JavaScript
235 lines
9.4 KiB
JavaScript
// 资源利用率页面（前端模拟数据，方便对照设计稿）
|
|
let table, layer, form;
|
|
let trendChart = null;
|
|
let equipmentChart = null;
|
|
|
|
layui.use(['layer', 'table', 'form'], function () {
|
|
layer = layui.layer;
|
|
table = layui.table;
|
|
form = layui.form;
|
|
|
|
initCards();
|
|
initTeamTable();
|
|
initTrendChart();
|
|
initEquipmentChart();
|
|
initAnalysisList();
|
|
|
|
window.addEventListener('resize', debounce(() => {
|
|
if (trendChart) trendChart.resize();
|
|
if (equipmentChart) equipmentChart.resize();
|
|
}, 300));
|
|
});
|
|
|
|
function debounce(fn, delay) {
|
|
let t = null;
|
|
return function () {
|
|
clearTimeout(t);
|
|
t = setTimeout(() => fn.apply(this, arguments), delay);
|
|
};
|
|
}
|
|
|
|
// 顶部/中部数字卡片模拟数据
|
|
function initCards() {
|
|
$('#workerUtilization').text('75%');
|
|
$('#deviceUtilization').text('80%');
|
|
$('#todayDutyRate').text('96');
|
|
$('#yesterdayDutyRate').text('104');
|
|
}
|
|
|
|
// 班组人员利用率表格（模拟数据）
|
|
function initTeamTable() {
|
|
const data = [
|
|
{ workType: '电气专业', teamName: 'XXX电气1班', teamLeader: '黄忠平', totalPeople: 50, todayDuty: 50, utilizationRate: 100 },
|
|
{ workType: '土建专业', teamName: 'XXX土建1班', teamLeader: '黄忠平', totalPeople: 50, todayDuty: 50, utilizationRate: 99 },
|
|
{ workType: '电气专业', teamName: 'XXX电气2班', teamLeader: '黄忠平', totalPeople: 50, todayDuty: 50, utilizationRate: 95 },
|
|
{ workType: '电气专业', teamName: 'XXX电气3班', teamLeader: '黄忠平', totalPeople: 50, todayDuty: 50, utilizationRate: 91 },
|
|
];
|
|
|
|
table.render({
|
|
elem: '#teamTable',
|
|
data,
|
|
page: false,
|
|
skin: 'line',
|
|
cols: [[
|
|
{ type: 'numbers', title: '序号', width: '8%', align: 'center' },
|
|
{ field: 'workType', title: '专业', width: '16%', align: 'center' },
|
|
{ field: 'teamName', title: '班组', width: '18%', align: 'center' },
|
|
{ field: 'teamLeader', title: '班组负责人', width: '16%', align: 'center' },
|
|
{ field: 'totalPeople', title: '班组人数', width: '14%', align: 'center' },
|
|
{ field: 'todayDuty', title: '当日到岗', width: '14%', align: 'center' },
|
|
{
|
|
field: 'utilizationRate',
|
|
title: '利用率',
|
|
align: 'center',
|
|
templet: d => (d.utilizationRate || 0) + '%'
|
|
}
|
|
]]
|
|
});
|
|
}
|
|
|
|
// 一周到岗趋势（折线面积图）
|
|
function initTrendChart() {
|
|
trendChart = echarts.init(document.getElementById('trendChart'));
|
|
const dates = ['xxx-xx-01', 'xxx-xx-02', 'xxx-xx-03', 'xxx-xx-04', 'xxx-xx-05', 'xxx-xx-06', 'xxx-xx-07'];
|
|
const actual = [60, 62, 58, 65, 68, 66, 70];
|
|
const should = [90, 92, 91, 92, 94, 93, 95];
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
backgroundColor: 'rgba(19,51,55,.8)',
|
|
borderColor: 'rgba(255,255,255,.2)',
|
|
textStyle: { color: '#fff' },
|
|
formatter: params => {
|
|
if (!params || !params.length) return '';
|
|
const name = params[0].name;
|
|
let html = `<div style="font-weight:bold;margin-bottom:6px;">${name}</div>`;
|
|
params.forEach(p => {
|
|
html += `
|
|
<div style="display:flex;align-items:center;margin-bottom:2px;min-width:140px;">
|
|
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${p.color};margin-right:8px;"></span>
|
|
<span style="color:#B9D6D9;margin-right:6px;">${p.seriesName}</span>
|
|
<span style="color:#fff;margin-left:auto;font-weight:bold;">${p.value}</span>
|
|
</div>`;
|
|
});
|
|
return html;
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['实到', '应到'],
|
|
top: 8,
|
|
right: 20,
|
|
textStyle: { color: '#fff' }
|
|
},
|
|
grid: { top: '22%', left: '6%', right: '4%', bottom: '15%' },
|
|
xAxis: {
|
|
type: 'category',
|
|
data: dates,
|
|
axisLabel: { color: '#fff' },
|
|
axisLine: { lineStyle: { color: '#5A6E71' } }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: { color: 'rgba(255,255,255,0.8)' },
|
|
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.2)', type: 'dashed' } }
|
|
},
|
|
series: [
|
|
{
|
|
name: '实到',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: actual,
|
|
lineStyle: { width: 2, color: '#00FEFC' },
|
|
itemStyle: { color: '#00FEFC' },
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: 'rgba(18,86,100,0.6)' },
|
|
{ offset: 1, color: 'rgba(16,72,81,0.7)' }
|
|
])
|
|
}
|
|
},
|
|
{
|
|
name: '应到',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: should,
|
|
lineStyle: { width: 2, color: 'rgba(25,196,134,1)' },
|
|
itemStyle: { color: 'rgba(25,196,134,1)' },
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: 'rgba(17,95,82,0.6)' },
|
|
{ offset: 1, color: 'rgba(16,72,67,0.7)' }
|
|
])
|
|
}
|
|
}
|
|
],
|
|
dataZoom: [
|
|
{ show: true, height: 12, bottom: '8%', start: 0, end: 100 },
|
|
{ type: 'inside', start: 0, end: 100 }
|
|
]
|
|
};
|
|
trendChart.setOption(option);
|
|
}
|
|
|
|
// 设备情况柱状图
|
|
function initEquipmentChart() {
|
|
equipmentChart = echarts.init(document.getElementById('equipmentStatus'));
|
|
const devName = ['挖掘机', '吊车', '搅拌机', 'xxx1', 'xxx2', 'xxx3', 'xxx4'];
|
|
const einDay = [12, 10, 11, 8, 9, 10, 11];
|
|
const usedDay = [8, 6, 7, 5, 6, 7, 8];
|
|
|
|
const color1 = { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: [{ offset: 0, color: '#1CFFA3' }, { offset: 1, color: '#1CFFA3' }] };
|
|
const color2 = { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: [{ offset: 0, color: '#00FEFC' }, { offset: 1, color: '#00FEFC' }] };
|
|
|
|
const option = {
|
|
legend: {
|
|
top: '10%',
|
|
right: '3%',
|
|
textStyle: { fontSize: 12, color: '#FFF' },
|
|
selectedMode: false,
|
|
icon: 'circle',
|
|
itemWidth: 12,
|
|
itemHeight: 10,
|
|
itemGap: 15
|
|
},
|
|
grid: { x: '6%', x2: '4%', y: '25%', y2: '18%' },
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
backgroundColor: 'rgba(19,51,55,.8)',
|
|
borderColor: 'rgba(255,255,255,.2)',
|
|
textStyle: { color: '#fff' },
|
|
formatter: params => {
|
|
if (!params || !params.length) return '';
|
|
const name = params[0].name;
|
|
let html = `<div style="font-weight:bold;margin-bottom:6px;">${name}</div>`;
|
|
params.forEach(p => {
|
|
html += `
|
|
<div style="display:flex;align-items:center;margin-bottom:2px;min-width:140px;">
|
|
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${p.color};margin-right:8px;"></span>
|
|
<span style="color:#B9D6D9;margin-right:6px;">${p.seriesName}</span>
|
|
<span style="color:#fff;margin-left:auto;font-weight:bold;">${p.value}</span>
|
|
</div>`;
|
|
});
|
|
return html;
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: devName,
|
|
axisLine: { lineStyle: { color: '#214776' } },
|
|
axisLabel: { color: '#C5DFFB', fontSize: 12 },
|
|
axisTick: { show: false }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: { lineStyle: { type: 'dashed', opacity: 0.2 } },
|
|
axisTick: { show: false },
|
|
axisLine: { show: false },
|
|
axisLabel: { color: '#C5DFFB' }
|
|
},
|
|
dataZoom: [
|
|
{ show: true, height: 12, bottom: '8%', start: 0, end: 100 },
|
|
{ type: 'inside', start: 0, end: 100 }
|
|
],
|
|
series: [
|
|
{ name: '入场天数', type: 'bar', barWidth: 18, data: einDay, itemStyle: { color: color1 } },
|
|
{ name: '使用天数', type: 'bar', barWidth: 18, data: usedDay, itemStyle: { color: color2 } }
|
|
]
|
|
};
|
|
equipmentChart.setOption(option, true);
|
|
}
|
|
|
|
// 右下分析提醒列表
|
|
function initAnalysisList() {
|
|
const list = [
|
|
'xx班组质量控制合格率低于80%，请持续关注该班组施工质量情况。',
|
|
'吊车设备使用率较低，如暂时不用，可进行出厂维护，避免设备进行其他项目施工。',
|
|
'xx班组质量控制合格率低于80%，请持续关注该班组施工质量情况。',
|
|
'xx班组质量控制合格率低于80%，请持续关注该班组施工质量情况。',
|
|
'xx班组质量控制合格率低于80%，请持续关注该班组施工质量情况。'
|
|
];
|
|
const html = list.map(text => `<div class="analysis-item">${text}</div>`).join('');
|
|
$('#analysisList').html(html);
|
|
}
|