ah_jjzhgd_webscreen/js/pages/newDataAnalysis/proQualityAnalysis.js

let table, layer, form;
let myChart = null, myChart2 = null;
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(1, parent.$('#bidPro').val());
});

/* 切换数据 */
function changeData(that, type) {
    const bidCode = parent.$('#bidPro').val();
    $(".ul-box li").each(function () {
        if ($(this).hasClass("check")) {
            $(this).removeClass("check").addClass("nocheck");
        }
    });
    var tableElem = $('#demo2').parents('.layui-table-view');
    tableElem.remove();
    $(that).removeClass("nocheck").addClass("check");
    if (type === 1 || type === 2 || type === 3 || type === 6 || type === 12) {
        initTable(type, bidCode);
        $('#right-table-box').removeAttr('style');
        $('#no-data-box').css({'display': 'none'});
        $('#right-box').css({'display': 'none'});
    }

}


function initTable(type, bidCode) {
    const url = commonUrl + "screen/largeScreen/dataAnalysis/getEngqualityAnalysis";
    table.render({
        elem: '#demo2',
        url: url,
        skin: 'line',
        page: true,
        height: 'full-100',
        headers: {
            "decrypt": "decrypt",
            "Authorization": token
        },
        where: {
            bidCode: bidCode,
            type: type
        },
        cols: [setCols(type)],
        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) {
            if (res.data && res.data.length > 0) {
                initEcharts(res.data);
            }
        }
    })

    function setCols(type) {
        if (type === 1) { // 工程质量分析
            return [
                {type: 'numbers', title: '序号', width: '10%'}, // 添加序号列
                {field: 'projectName', title: '工程名称', align: 'center'},
                // { field: 'projectNumber', title: '工程编号', align: 'center'},
                // { field: 'projectAddress', title: '项目地址', align: 'center'},
                // { field: 'contractorName', title: '承包商名称', align: 'center',},
                // { field: 'qualityLevel', title: '质量等级', align: 'center'},
                {field: 'projectManager', title: '项目经理', align: 'center'},
                {field: 'team', title: '专业队伍', align: 'center'},
                {field: 'startTime', title: '开始时间', align: 'center'},
                {field: 'checkNum', title: '检查数量', align: 'center'},
                {field: 'passNum', title: '合格数量', align: 'center'},
                {field: 'passRate', title: '合格率', align: 'center'},
                {field: 'score', title: '得分', align: 'center'},
                {field: 'unqualifiedItems', title: '不合格原因', align: 'center'},
                {
                    title: '操作', align: 'center', templet: function (row) {
                        // 注意：Layui 的 templet 函数参数是 row，即当前行数据
                        return `
                        <button class="layui-btn layui-btn-xs" onclick="handleUpload('${row.projectNumber}')">
                            上传
                        </button>
                    `;
                    }
                }
            ];
        }
    }
}


// 初始化 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[0]);
    initEchartsTwo(data);
}

function initEchartsOne(data) {
    // 从传入的数据中提取 passRate 和 noPassRate，并转为数字
    const passRate = parseFloat(data.passRate);
    const noPassRate = parseFloat(data.noPassRate);

    const option = {
        grid: {
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
        },
        title: {
            text: data.team || "合格率对比",
            x: "center",
        },
        tooltip: {
            trigger: "item",
            formatter: "{b}: {c}%"
        },
        legend: {
            show: true,
            data: ['合格率', '不合格率'],
            bottom: 10
        },
        series: [
            {
                name: "合格率分析",
                type: "pie",
                radius: "65%",
                center: ["50%", "50%"],
                label: {
                    show: true,
                    formatter: "{b}: {c}%"
                },
                data: [
                    { value: passRate, name: "合格率" },
                    { value: noPassRate, name: "不合格率" }
                ],
                itemStyle: {
                    borderRadius: 5,
                    borderColor: '#fff',
                    borderWidth: 2
                }
            }
        ]
    };
    // 设置图表（假设你已定义 myChart2）
    myChart.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

function initEchartsTwo(data) {
    const teams = data.map(item => item.team);
    const scores = data.map(item => item.score);

    const option = {
        title: {
            text: '队伍得分柱状图',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none' // 移除鼠标悬停时的阴影效果
            },
            formatter: function(params) {
                // 自定义tooltip显示内容，移除了百分号
                return params[0].name + '<br/>' +
                    params[0].seriesName + ': ' +
                    params[0].value;
            }
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '20%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: teams,
            axisLabel: {
                color: '#fff',
                interval: 0,
                formatter: function(value) {
                    // 每4个字符换行
                    return value.match(/.{1,4}/g).join('\n');
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            name: '得分',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
                color: '#fff',
                formatter: function(value) {
                    return value; // 确保y轴标签也不显示百分号
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            }
        },
        series: [{
            name: '得分',
            type: 'bar',
            data: scores,
            barWidth: '30%',
            label: {
                show: true,
                position: 'top',
                color: '#fff',
                formatter: function(params) {
                    return params.value;
                }
            },
            itemStyle: {
                color: '#409EFF'
            }
        }]
    };

    // 初始化 ECharts 图表（假设你已定义 myChart）
    myChart2.setOption(option);
    window.addEventListener('resize', function () {
        myChart2.resize();
    });
}