462 lines
14 KiB
JavaScript
462 lines
14 KiB
JavaScript
|
let table, layer, form;
|
|||
|
|
let myChart = null, myChart2 = null;
|
|||
|
|
const tipsArr = [
|
|||
|
|
'定期开展技能培训与考核，并对施工工具进行例行检查，确保安全与效率。',
|
|||
|
|
'加强技能培训，定期组织考试，同时落实施工工具的日常检查制度。',
|
|||
|
|
'定期安排技能培训及考核，并严格执行施工工具的定期检查管理。',
|
|||
|
|
'持续强化技能培训与考核，同时确保施工工具按时检查，保障作业安全。',
|
|||
|
|
'定期组织技能培训和考试，并做好施工工具的维护与定期检查工作。',
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
layui.use(['layer', 'table', 'form'], function () {
|
|||
|
|
layer = layui.layer;
|
|||
|
|
table = layui.table;
|
|||
|
|
form = layui.form;
|
|||
|
|
// 响应成功后的拦截器
|
|||
|
|
$.ajaxSetup({
|
|||
|
|
beforeSend: function (xhr, options) {
|
|||
|
|
var originalSuccess = options.success
|
|||
|
|
options.success = function (data, textStatus, jqXhr) {
|
|||
|
|
data = modifyResponseData(data);
|
|||
|
|
// success(data,textStatus, jqXhr);
|
|||
|
|
originalSuccess.apply(this, arguments)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
initTable();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
function initTable() {
|
|||
|
|
let userName = $('#userName').val();
|
|||
|
|
let teamName = $('#teamName').val();
|
|||
|
|
let bidCode = parent.parent.$('#bidPro').val()
|
|||
|
|
const url = commonUrl + "screen/largeScreen/workerEfficiency/getList";
|
|||
|
|
table.render({
|
|||
|
|
elem: '#demo2',
|
|||
|
|
id: 'demo2',
|
|||
|
|
url: url,
|
|||
|
|
skin: 'line',
|
|||
|
|
page: true,
|
|||
|
|
height: 'full-140',
|
|||
|
|
headers: {
|
|||
|
|
"decrypt": "decrypt",
|
|||
|
|
"Authorization": token
|
|||
|
|
},
|
|||
|
|
where: {
|
|||
|
|
bidCode: bidCode,
|
|||
|
|
teamName: teamName,
|
|||
|
|
userName: userName,
|
|||
|
|
},
|
|||
|
|
cols: [[
|
|||
|
|
{ type: 'numbers', title: '序号', width: '6%' }, // 添加序号列
|
|||
|
|
{ field: 'userName', title: '班组长', align: 'center', width: '10%' },
|
|||
|
|
{ field: 'teamName', title: '班组', align: 'center', width: '15%' },
|
|||
|
|
{
|
|||
|
|
field: 'gxName', title: '工序', align: 'center', width: '35%',
|
|||
|
|
templet: function (d) {
|
|||
|
|
if (d.gxName) {
|
|||
|
|
if (d.gxName.length > 100) {
|
|||
|
|
return '<span title="' + d.gxName + '">' + d.gxName.substring(0, 100) + '...</span>'
|
|||
|
|
} else {
|
|||
|
|
return '<span title="' + d.gxName + '">' + d.gxName + '</span>'
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: 'planDay', title: '计划完成天数', align: 'center', width: '12%',
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: 'actualDay', title: '实际完成天数', align: 'center', width: '12%',
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
/* {
|
|||
|
|
field: 'workStandard', title: '作业内容', align: 'center', width: '19%',
|
|||
|
|
templet: function (d) {
|
|||
|
|
if (d.workStandard) {
|
|||
|
|
if (d.workStandard.length > 60) {
|
|||
|
|
return '<span title="' + d.workStandard + '">' + d.workStandard.substring(0, 60) + '...</span>'
|
|||
|
|
} else {
|
|||
|
|
return '<span title="' + d.workStandard + '">' + d.workStandard + '</span>'
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}, */
|
|||
|
|
{
|
|||
|
|
title: '效率评级', align: 'center', width: '10%',
|
|||
|
|
templet: function (d) {
|
|||
|
|
let color = '', title = '';
|
|||
|
|
let planDay = d.planDay;
|
|||
|
|
let actualDay = d.actualDay;
|
|||
|
|
if (planDay > actualDay ) {
|
|||
|
|
color = 'green',
|
|||
|
|
title = '高效';
|
|||
|
|
} else if (planDay === actualDay) {
|
|||
|
|
color = 'yellow',
|
|||
|
|
title = '达标';
|
|||
|
|
} else if (planDay < actualDay) {
|
|||
|
|
color = 'red',
|
|||
|
|
title = '低效';
|
|||
|
|
}
|
|||
|
|
return '<p style="color:' + color + '">' + title + '</p>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
]],
|
|||
|
|
initComplete: function () {
|
|||
|
|
// 在表格渲染完成后，重新渲染序号列
|
|||
|
|
var that = this.elem.next();
|
|||
|
|
var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
|
|||
|
|
tool.find("tr").each(function (index, item) {
|
|||
|
|
$(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
done: function (res, curr, count, origin) {
|
|||
|
|
// console.log(res);
|
|||
|
|
if (res.data && res.data.length > 0) {
|
|||
|
|
initEcharts(res.data[0]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
table.on('row(demo2)', function (obj) {
|
|||
|
|
initEcharts(obj.data);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function query() {
|
|||
|
|
let userName = $('#userName').val();
|
|||
|
|
let teamName = $('#teamName').val();
|
|||
|
|
let bidCode = parent.parent.$('#bidPro').val()
|
|||
|
|
table.reload("demo2", {
|
|||
|
|
page: {
|
|||
|
|
curr: 1,
|
|||
|
|
},
|
|||
|
|
where: {
|
|||
|
|
bidCode: bidCode,
|
|||
|
|
teamName: teamName,
|
|||
|
|
userName: userName,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化 echarts
|
|||
|
|
function initEcharts(data) {
|
|||
|
|
if (myChart && myChart2) {
|
|||
|
|
myChart.dispose();
|
|||
|
|
myChart2.dispose();
|
|||
|
|
}
|
|||
|
|
myChart = echarts.init(document.getElementById("oneEcharts"));
|
|||
|
|
myChart2 = echarts.init(document.getElementById("twoEcharts"));
|
|||
|
|
$('#suggestion').empty();
|
|||
|
|
initEchartsOne(data);
|
|||
|
|
let planDay = data.planDay;
|
|||
|
|
let actualDay = data.actualDay;
|
|||
|
|
if (planDay < actualDay) {
|
|||
|
|
initEchartsTwo(data);
|
|||
|
|
const randomIndex = Math.floor(Math.random() * tipsArr.length); // 生成 0~4 的随机整数
|
|||
|
|
const randomItem = tipsArr[randomIndex];
|
|||
|
|
$('#suggestion').append('<p>建议：'+randomItem+'</p>');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
function average(a, b) {
|
|||
|
|
return +((a + b) / 2).toFixed(3); // 限制 10 位小数
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initEchartsOne(obj) {
|
|||
|
|
const data = [obj.actualDay];
|
|||
|
|
const data2 = [obj.planDay];
|
|||
|
|
const colorArr1 = ["rgba(11, 83, 128)", "rgba(2, 143, 224)", "#2a7fcc"];
|
|||
|
|
const colorArr2 = ["rgb(12, 109, 122)", "rgba(1, 241, 228)", "#5ce1d6"];
|
|||
|
|
var color1 = {
|
|||
|
|
type: "linear",
|
|||
|
|
x: 0,
|
|||
|
|
x2: 1,
|
|||
|
|
y: 0,
|
|||
|
|
y2: 0,
|
|||
|
|
colorStops: [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: colorArr1[0],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.5,
|
|||
|
|
color: colorArr1[0],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.5,
|
|||
|
|
color: colorArr1[1],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: colorArr1[1],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
var color2 = {
|
|||
|
|
type: "linear",
|
|||
|
|
x: 0,
|
|||
|
|
x2: 1,
|
|||
|
|
y: 0,
|
|||
|
|
y2: 0,
|
|||
|
|
colorStops: [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: colorArr2[0],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.5,
|
|||
|
|
color: colorArr2[0],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.5,
|
|||
|
|
color: colorArr2[1],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: colorArr2[1],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
var barWidth = 18;
|
|||
|
|
const option = {
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
legend: {
|
|||
|
|
top: '3%',
|
|||
|
|
right: '3%',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: '12px',
|
|||
|
|
color: '#FFF',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var str = params[0].name + ":";
|
|||
|
|
let gxName = '';
|
|||
|
|
if (obj.gxName) {
|
|||
|
|
if (obj.gxName.length > 80) {
|
|||
|
|
gxName = obj.gxName.substring(0, 80) + '...' ;
|
|||
|
|
} else {
|
|||
|
|
gxName = obj.gxName;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
str += "<br/>" + "工序：" + gxName;
|
|||
|
|
params.filter(function (item) {
|
|||
|
|
if (item.componentSubType == "bar") {
|
|||
|
|
str += "<br/>" + item.seriesName + "：" + item.value;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return str;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
//图表大小位置限制
|
|||
|
|
/* grid: {
|
|||
|
|
x: '5%',
|
|||
|
|
x2: '5%',
|
|||
|
|
y: '5%',
|
|||
|
|
y2: '5%',
|
|||
|
|
}, */
|
|||
|
|
xAxis: {
|
|||
|
|
data: [obj.userName],
|
|||
|
|
//坐标轴
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 1,
|
|||
|
|
color: '#214776'
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: '10'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
type: 'category',
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#C5DFFB',
|
|||
|
|
fontWeight: 500,
|
|||
|
|
fontSize: '14'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: '16'
|
|||
|
|
},
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'dashed',//线的类型 虚线
|
|||
|
|
color: '#DEDEDE',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
name: '效率对标分析',
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: '#DEDEDE',
|
|||
|
|
fontSize: 12,
|
|||
|
|
padding: 10,
|
|||
|
|
},
|
|||
|
|
// min: 0,//最小
|
|||
|
|
// max: obj.max,//最大
|
|||
|
|
// interval: obj.interval,//相差
|
|||
|
|
type: 'value',
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'dashed',//线的类型 虚线0
|
|||
|
|
opacity: 0.2//透明度
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
//坐标值标注
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#C5DFFB',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
z: 1,
|
|||
|
|
name: '实际天数',
|
|||
|
|
type: "bar",
|
|||
|
|
barWidth: barWidth,
|
|||
|
|
barGap: "0%",
|
|||
|
|
data: data,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: color1,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
z: 3,
|
|||
|
|
name: '实际天数',
|
|||
|
|
type: "pictorialBar",
|
|||
|
|
symbolPosition: "end",
|
|||
|
|
data: data,
|
|||
|
|
symbol: "diamond",
|
|||
|
|
symbolOffset: ["-75%", "-60%"],
|
|||
|
|
symbolSize: [18, 12],
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
borderWidth: 2,
|
|||
|
|
color: colorArr1[2]
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
z: 1,
|
|||
|
|
name: '计划天数',
|
|||
|
|
type: "bar",
|
|||
|
|
barWidth: barWidth,
|
|||
|
|
barGap: "50%",
|
|||
|
|
data: data2,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: color2,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
z: 3,
|
|||
|
|
name: '计划天数',
|
|||
|
|
type: "pictorialBar",
|
|||
|
|
symbolPosition: "end",
|
|||
|
|
data: data2,
|
|||
|
|
symbol: "diamond",
|
|||
|
|
symbolOffset: ["75%", "-60%"],
|
|||
|
|
symbolSize: [18, 12],
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
borderWidth: 2,
|
|||
|
|
color: colorArr2[2]
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 变化趋势 */
|
|||
|
|
function initEchartsTwo(data) {
|
|||
|
|
let nameList = ['专业技能不足', '工具故障','设备维保','环境变化'];
|
|||
|
|
let valueList = [{ name: '专业技能不足', value: 4 }, { name: '工具故障', value: 1 },{ name: '设备维保', value: 1 },{ name: '环境变化', value: 1 }];
|
|||
|
|
const option = {
|
|||
|
|
grid: {
|
|||
|
|
top: 0,
|
|||
|
|
bottom: 0,
|
|||
|
|
left: 0,
|
|||
|
|
right: 0,
|
|||
|
|
},
|
|||
|
|
/* title: {
|
|||
|
|
text: "效率低下原因",
|
|||
|
|
x: "center",
|
|||
|
|
}, */
|
|||
|
|
title: [
|
|||
|
|
// 中心比例
|
|||
|
|
{
|
|||
|
|
text: '效率低下原因',
|
|||
|
|
x: 'center',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 16,
|
|||
|
|
color: '#fff',
|
|||
|
|
// fontWeight: 'bold',
|
|||
|
|
},
|
|||
|
|
}],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "item",
|
|||
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
show: false,
|
|||
|
|
data: nameList,
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "效率低下分析",
|
|||
|
|
type: "pie",
|
|||
|
|
radius: "65%",
|
|||
|
|
center: ["50%", "50%"],
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
formatter: "{b} {d}%",
|
|||
|
|
},
|
|||
|
|
data: valueList,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
myChart2.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart2.resize();
|
|||
|
|
});
|
|||
|
|
}
|