346 lines
10 KiB
JavaScript
346 lines
10 KiB
JavaScript
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 || []);
|
||
initEcharts(filterList[0].list[0]);
|
||
});
|
||
|
||
|
||
function initTable(data) {
|
||
table.render({
|
||
elem: '#demo2',
|
||
id: 'demo2',
|
||
skin: 'line',
|
||
page: true,
|
||
height: 'full-140',
|
||
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%',
|
||
templet: function (d) {
|
||
return d.workTime + '小时';
|
||
}
|
||
},
|
||
{
|
||
field: 'completeWorkload', title: '完成工作量', align: 'center', width: '10%',
|
||
templet: function (d) {
|
||
return d.completeWorkload + d.completeWorkloadUnit;
|
||
}
|
||
},
|
||
{
|
||
field: 'unitTimeOutput', title: '单位时间产量', align: 'center', width: '10%',
|
||
templet: function (d) {
|
||
return d.unitTimeOutput + d.unitTimeOutputUnit;
|
||
}
|
||
},
|
||
{
|
||
field: 'unitTimeOutput', title: '单位时间标准产量', align: 'center', width: '10%',
|
||
templet: function (d) {
|
||
return d.standardTimeOutput + d.unitTimeOutputUnit;
|
||
}
|
||
},
|
||
{
|
||
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) {
|
||
initEcharts(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);
|
||
if(data && data.length > 0){
|
||
initEcharts(data[0]);
|
||
}
|
||
}
|
||
|
||
// 初始化 echarts
|
||
function initEcharts(data) {
|
||
if (myChart && myChart2) {
|
||
myChart.dispose();
|
||
myChart2.dispose();
|
||
}
|
||
myChart = echarts.init(document.getElementById("oneEcharts"));
|
||
myChart2 = echarts.init(document.getElementById("twoEcharts"));
|
||
initEchartsOne(data);
|
||
}
|
||
|
||
function initEchartsOne(obj) {
|
||
const data = [obj.unitTimeOutput];
|
||
const data2 = [obj.standardTimeOutput];
|
||
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 + ":";
|
||
params.filter(function (item) {
|
||
if (item.componentSubType == "bar") {
|
||
str += "<br/>" + item.seriesName + "：" + item.value + obj.unitTimeOutputUnit;
|
||
}
|
||
});
|
||
return str;
|
||
},
|
||
},
|
||
//图表大小位置限制
|
||
grid: {
|
||
x: '10%',
|
||
x2: '5%',
|
||
y: '15%',
|
||
y2: '15%',
|
||
},
|
||
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();
|
||
});
|
||
} |