ah_jjzhgd_webscreen/js/pages/newDataAnalysis/workerEfficiencyAnalysis.js

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: '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: 'sgType', title: '施工类型', align: 'center', width: '10%',
            },
            {
                field: 'completeWorkload', title: '完成工作量', align: 'center', width: '10%',
                templet: function (d) {
                    return d.completeWorkload + d.unitTimeOutputUnit;
                }
            },
            {
                field: 'unitTimeOutput', title: '单位时间产量', align: 'center', width: '10%',
                templet: function (d) {
                    return d.unitTimeOutput + d.unit;
                }
            },
            {
                field: 'standardTimeOutput', title: '单位时间标准产量', align: 'center', width: '10%',
                templet: function (d) {
                    return d.standardTimeOutput + d.unit;
                }
            },
            {
                title: '效率评级', align: 'center', width: '10%',
                templet: function (d) {
                    let color = '', title = '';
                    let min = parseFloat(d.standardTimeOutput.split('~')[0]) || 0;
                    let max = parseFloat(d.standardTimeOutput.split('~')[1]) || 0;
                    let unitTimeOutput = parseFloat(d.unitTimeOutput) || 0;
                    if (unitTimeOutput > max) {
                        color = 'green',
                            title = '高效';
                    } else if (unitTimeOutput >= min && unitTimeOutput <= max) {
                        color = 'yellow',
                            title = '达标';
                    } else if (unitTimeOutput < min) {
                        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 min = parseFloat(data.standardTimeOutput.split('~')[0]) || 0;
    let max = parseFloat(data.standardTimeOutput.split('~')[1]) || 0;
    let unitTimeOutput = parseFloat(data.unitTimeOutput) || 0;
    if (unitTimeOutput < min) {
        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) {
    let min = parseFloat(obj.standardTimeOutput.split('~')[0]) || 0;
    let max = parseFloat(obj.standardTimeOutput.split('~')[1]) || 0;
    const data = [obj.unitTimeOutput];
    const data2 = [average(min,max)];
    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") {
                        if(item.seriesName === '单位时间产量'){
                            str += "<br/>" + item.seriesName + "：" + item.value + obj.unit;
                        }else if(item.seriesName === '单位时间标准产量'){
                            str += "<br/>" + item.seriesName + "：" + obj.standardTimeOutput + obj.unit;
                        }
                        
                    }
                });
                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 }];
    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();
    });
}