493 lines
16 KiB
JavaScript
493 lines
16 KiB
JavaScript
// 1512P017007Y01-凌云变 1612P021000T01-红枫变
|
|
let dataList = [{
|
|
bidCode: '1512P017007Y01',
|
|
list: [{
|
|
userName: '宋跃进',
|
|
teamName: '变电土建-朱润生3班',
|
|
postName: '组塔工',
|
|
attDay: 22,
|
|
workTime: 176,
|
|
completeWorkload: '15座',
|
|
unitTimeOutput: '0.085座/小时',
|
|
rateLevel: '高效',
|
|
},
|
|
{
|
|
userName: '刘振',
|
|
teamName: '变电土建-朱润生3班',
|
|
postName: '导线压线工',
|
|
attDay: 22,
|
|
workTime: 176,
|
|
completeWorkload: '15座',
|
|
unitTimeOutput: '0.085座/小时',
|
|
rateLevel: '高效',
|
|
},
|
|
{
|
|
userName: '黄照飞',
|
|
teamName: '变电土建-朱润生3班',
|
|
postName: '组塔工',
|
|
attDay: 22,
|
|
workTime: 176,
|
|
completeWorkload: '15座',
|
|
unitTimeOutput: '0.085座/小时',
|
|
rateLevel: '高效',
|
|
},
|
|
{
|
|
userName: '王玉华',
|
|
teamName: '变电土建-朱润生3班',
|
|
postName: '组塔工',
|
|
attDay: 22,
|
|
workTime: 176,
|
|
completeWorkload: '15座',
|
|
unitTimeOutput: '0.085座/小时',
|
|
rateLevel: '高效',
|
|
},
|
|
{
|
|
userName: '黄丹',
|
|
teamName: '变电土建-朱润生3班',
|
|
postName: '组塔工',
|
|
attDay: 22,
|
|
workTime: 176,
|
|
completeWorkload: '15座',
|
|
unitTimeOutput: '0.085座/小时',
|
|
rateLevel: '高效',
|
|
},
|
|
{
|
|
userName: '赵光伟',
|
|
teamName: '变电土建-朱润生3班',
|
|
postName: '组塔工',
|
|
attDay: 22,
|
|
workTime: 176,
|
|
completeWorkload: '15座',
|
|
unitTimeOutput: '0.085座/小时',
|
|
rateLevel: '高效',
|
|
},
|
|
{
|
|
userName: '刘磊',
|
|
teamName: '变电土建-朱润生3班',
|
|
postName: '组塔工',
|
|
attDay: 22,
|
|
workTime: 176,
|
|
completeWorkload: '15座',
|
|
unitTimeOutput: '0.085座/小时',
|
|
rateLevel: '高效',
|
|
},
|
|
{
|
|
userName: '化苏碧',
|
|
teamName: '变电土建-朱润生3班',
|
|
postName: '组塔工',
|
|
attDay: 22,
|
|
workTime: 176,
|
|
completeWorkload: '15座',
|
|
unitTimeOutput: '0.085座/小时',
|
|
rateLevel: '高效',
|
|
},
|
|
{
|
|
userName: '曹先应',
|
|
teamName: '变电土建-朱润生3班',
|
|
postName: '组塔工',
|
|
attDay: 22,
|
|
workTime: 176,
|
|
completeWorkload: '15座',
|
|
unitTimeOutput: '0.085座/小时',
|
|
rateLevel: '高效',
|
|
},
|
|
{
|
|
userName: '陆乃怀',
|
|
teamName: '变电土建-朱润生3班',
|
|
postName: '组塔工',
|
|
attDay: 22,
|
|
workTime: 176,
|
|
completeWorkload: '15座',
|
|
unitTimeOutput: '0.085座/小时',
|
|
rateLevel: '高效',
|
|
},
|
|
{
|
|
userName: '袁加纯',
|
|
teamName: '变电土建-朱润生3班',
|
|
postName: '组塔工',
|
|
attDay: 22,
|
|
workTime: 176,
|
|
completeWorkload: '15座',
|
|
unitTimeOutput: '0.085座/小时',
|
|
rateLevel: '高效',
|
|
},
|
|
{
|
|
userName: '张友顺',
|
|
teamName: '变电土建-朱润生3班',
|
|
postName: '组塔工',
|
|
attDay: 22,
|
|
workTime: 176,
|
|
completeWorkload: '15座',
|
|
unitTimeOutput: '0.085座/小时',
|
|
rateLevel: '高效',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
bidCode: '1612P021000T01',
|
|
list: [{
|
|
userName: '宋跃进',
|
|
teamName: '变电土建-宋鹏2班',
|
|
postName: '组塔工',
|
|
attDay: 22,
|
|
workTime: 176,
|
|
completeWorkload: '15座',
|
|
unitTimeOutput: '0.085座/小时',
|
|
rateLevel: '高效',
|
|
}]
|
|
}];
|
|
|
|
let table, layer, form;
|
|
let myChart = null, myChart2 = null;
|
|
layui.use(['layer', 'table', 'form'], function () {
|
|
layer = layui.layer;
|
|
table = layui.table;
|
|
form = layui.form;
|
|
let bidCode = parent.parent.$('#bidPro').val()
|
|
let filterList = dataList.filter(item => {
|
|
return item.bidCode === bidCode;
|
|
});
|
|
initTable(filterList[0].list || []);
|
|
});
|
|
|
|
|
|
function initTable(data) {
|
|
table.render({
|
|
elem: '#demo2',
|
|
id: 'demo2',
|
|
skin: 'line',
|
|
page: true,
|
|
height: 'full-120',
|
|
headers: {
|
|
"decrypt": "decrypt",
|
|
"Authorization": token
|
|
},
|
|
data: data,
|
|
cols: [[
|
|
{ type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
|
|
{ field: 'userName', title: '工人/班组', align: 'center', width: '10%' },
|
|
{ field: 'teamName', title: '班组', align: 'center', width: '10%' },
|
|
{ field: 'postName', title: '工种', align: 'center', width: '10%' },
|
|
{ field: 'attDay', title: '出勤天数', align: 'center', width: '10%' },
|
|
{ field: 'workTime', title: '工作时长', align: 'center', width: '10%' },
|
|
{ field: 'completeWorkload', title: '完成工作量', align: 'center', width: '15%' },
|
|
{ field: 'unitTimeOutput', title: '单位时间产量', align: 'center', width: '15%' },
|
|
{
|
|
field: 'rateLevel', title: '效率评级', align: 'center', width: '10%',
|
|
templet: function (d) {
|
|
let color = '';
|
|
if (d.rateLevel === '高效') {
|
|
color = 'green';
|
|
} else if (d.rateLevel === '达标') {
|
|
color = 'yellow';
|
|
} else if (d.rateLevel === '低效') {
|
|
color = 'red';
|
|
}
|
|
return '<p style="color:' + color + '">' + d.rateLevel + '</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);
|
|
}
|
|
})
|
|
table.on('rowDouble(demo2)', function (obj) {
|
|
console.log(obj.data);
|
|
});
|
|
}
|
|
|
|
function query(type) {
|
|
let userName = $('#userName').val();
|
|
let bidCode = parent.parent.$('#bidPro').val()
|
|
let filterList = dataList.filter(item => {
|
|
return item.bidCode === bidCode;
|
|
});
|
|
let list = filterList[0].list || []
|
|
let data = [];
|
|
if (userName) {
|
|
data = list.filter(item => {
|
|
return item.userName.indexOf(userName) > -1;
|
|
});
|
|
} else {
|
|
data = list;
|
|
}
|
|
initTable(data);
|
|
}
|
|
|
|
// 初始化 echarts
|
|
function initEcharts() {
|
|
myChart.dispose();
|
|
myChart2.dispose();
|
|
myChart = echarts.init(document.getElementById("oneEcharts"));
|
|
myChart2 = echarts.init(document.getElementById("twoEcharts"));
|
|
initEchartsOne();
|
|
}
|
|
|
|
function initEchartsOne() {
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
|
const graphicColors = [
|
|
['rgba(7, 209, 250, 1)', 'rgba(7, 209, 250, .2)'],
|
|
['rgba(7, 131, 250, 1)', 'rgba(7, 131, 250, .2)'],
|
|
['rgba(31, 237, 190, 1)', 'rgba(31, 237, 190, .2)'],
|
|
['rgba(255, 209, 92, 1)', 'rgba(255, 209, 92, .2)'],
|
|
['rgba(255, 136, 136, 1)', 'rgba(255, 136, 136, .2)'],
|
|
['rgba(157, 222, 255, 1)', 'rgba(157, 222, 255, .2)'],
|
|
['rgba(94, 255, 108, 1)', 'rgba(94, 255, 108, .2)'],
|
|
['rgba(146, 119, 255, 1)', 'rgba(146, 119, 255, .2)'],
|
|
['rgba(0, 246, 255, 1)', 'rgba(0, 246, 255, .2)'],
|
|
['rgba(255, 162, 77, 1)', 'rgba(255, 162, 77, .2)'],
|
|
['rgba(255, 105, 207, 1)', 'rgba(255, 105, 207, .2)']
|
|
]
|
|
const option = {
|
|
backgroundColor: "#08244d",
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 12
|
|
},
|
|
confine: true, // 超出范围
|
|
backgroundColor: 'rgba(17,95,182,0.5)', //设置背景颜色
|
|
formatter: params => {
|
|
let str = `<div>${params[0]?.name}</div>`
|
|
params.map((item, index) => {
|
|
if ([0, 2, 4].includes(index)) {
|
|
let str1 = ''
|
|
if (item.data[index + 2]) {
|
|
str1 = `${item.data[index + 2]} : ${item.data[index + 3]}`
|
|
str += `<div>${item.marker} ${str1} 批</div>`
|
|
}
|
|
}
|
|
})
|
|
return str
|
|
}
|
|
},
|
|
legend: {},
|
|
dataset: {
|
|
dimensions: ['product', 'sort', 'company1', 'num1', 'company2', 'num2', 'company3', 'num3'],
|
|
source: [
|
|
['总匝开关', 1, 'a', 43.3, 'b', 85.8, 'c', 93.7],
|
|
['电线', 2, 'd', 83.1, 'e', 73.4, 'f', 55.1],
|
|
['电池', 3, 'g', 86.4, 'h', 65.2, 'i', 82.5],
|
|
['外壳', 4, 'j', 72.4, 'k', 53.9, 'l', 39.1],
|
|
['充电器', 4, 'j', 62.4, 'k', 43.9, 'l', 79.1]
|
|
]
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisLabel: {
|
|
width: 80,
|
|
padding: [8, 0],
|
|
borderColor: '#6AAFFF',
|
|
borderWidth: 1,
|
|
borderRadius: 4,
|
|
margin: 20,
|
|
backgroundColor: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(7, 131, 250, 1)' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(7, 131, 250, 0.2)'// 100% 处的颜色
|
|
}
|
|
],
|
|
global: false // 缺省为 false
|
|
},
|
|
color: '#fff',
|
|
}
|
|
},
|
|
yAxis: {
|
|
// show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
|
// axisTick: {
|
|
// show: false // 不显示坐标轴刻度线
|
|
// },
|
|
// axisLine: {
|
|
// show: false, // 不显示坐标轴线
|
|
// },
|
|
// axisLabel: {
|
|
// show: false, // 不显示坐标轴上的文字
|
|
// },
|
|
// splitLine: {
|
|
// show: false // 不显示网格线
|
|
// },
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#D9E7FF33'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
stack: 'num1',
|
|
label: {
|
|
// show: true,
|
|
// rotate: 90,
|
|
// position: 'insideBottom',
|
|
// align: 'left',
|
|
// verticalAlign: 'middle'
|
|
show: true,
|
|
position: 'bottom',
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
opacity: 1,
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: graphicColors[0][0] || 'rgba(7, 209, 250, 1)' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: graphicColors[0][1] || 'rgba(7, 209, 250, .2)' // 100% 处的颜色
|
|
}
|
|
],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
},
|
|
encode: { x: 'product', y: 'num1', label: ['company1'] }
|
|
},
|
|
{
|
|
type: 'bar',
|
|
stack: 'num1',
|
|
itemStyle: {
|
|
color: 'transparent' //颜色透明
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top'
|
|
},
|
|
encode: { x: 'product', y: 'sort', label: ['num1'] }
|
|
},
|
|
{
|
|
type: 'bar',
|
|
stack: 'num2',
|
|
label: {
|
|
// show: true,
|
|
// rotate: 90,
|
|
// position: 'insideBottom',
|
|
// align: 'left',
|
|
// verticalAlign: 'middle'
|
|
show: true,
|
|
position: 'bottom',
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
opacity: 1,
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: graphicColors[1][0] || 'rgba(7, 209, 250, 1)' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: graphicColors[1][1] || 'rgba(7, 209, 250, .2)' // 100% 处的颜色
|
|
}
|
|
],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
},
|
|
encode: { x: 'product', y: 'num2', label: ['company2'] }
|
|
},
|
|
{
|
|
type: 'bar',
|
|
stack: 'num2',
|
|
itemStyle: {
|
|
color: 'transparent' //颜色透明
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top'
|
|
},
|
|
encode: { x: 'product', y: 'sort', label: ['num1'] }
|
|
},
|
|
{
|
|
type: 'bar',
|
|
stack: 'num3',
|
|
label: {
|
|
// show: true,
|
|
// rotate: 90,
|
|
// position: 'insideBottom',
|
|
// align: 'left',
|
|
// verticalAlign: 'middle'
|
|
show: true,
|
|
position: 'bottom',
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
opacity: 1,
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: graphicColors[2][0] || 'rgba(7, 209, 250, 1)' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: graphicColors[2][1] || 'rgba(7, 209, 250, .2)' // 100% 处的颜色
|
|
}
|
|
],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
},
|
|
encode: { x: 'product', y: 'num3', label: ['company3'] }
|
|
},
|
|
{
|
|
type: 'bar',
|
|
stack: 'num3',
|
|
itemStyle: {
|
|
color: 'transparent' //颜色透明
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top'
|
|
},
|
|
encode: { x: 'product', y: 'sort', label: ['num3'] }
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option, true);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
} |