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);
            }

            // $(".layui-table-body table.layui-table tbody tr").on(
            //     "click",
            //     function () {
            //         // 获取当前行的数据
            //         var index = $(this).index();
            //         var rowData = res.data[index]; // 获取对应行的数据

            //         const passRate = rowData.passRate || 0;
            //         const noPassRate = rowData.noPassRate || 0;
            //         // initEchartsOne(passRate, noPassRate);

            //         // 增加一个 400 * 400 的弹框把饼图放进去 并修改弹框背景样式为透明
            //         layer.open({
            //             type: 1,
            //             title: "合格率对比",
            //             content: "<div id='oneEcharts'></div>",
            //             area: ["600px", "600px"],
            //         });
            //         initEchartsOne(passRate, noPassRate);
            //     }
            // );

            $(".layui-table-body table.layui-table tbody tr").on(
                "click",
                function () {
                    // 获取当前行的数据
                    var index = $(this).index();
                    var rowData = res.data[index]; // 获取对应行的数据

                    const passRate = rowData.passRate || 0;
                    const noPassRate = rowData.noPassRate || 0;

                    // 弹框配置
                    layer.open({
                        type: 1,
                        title: "合格率对比",
                        content:
                            "<div id='oneEcharts' style='width:100%;height:100%;'></div>",
                        area: ["600px", "600px"],
                        shade: 0.3, // 遮罩透明度
                        skin: "custom-layer-style", // 自定义皮肤
                        success: function (layero, index) {
                            // 修改弹框背景颜色
                            $(layero).css(
                                "background",
                                "rgba(13, 34, 37, 0.9)"
                            ); // 半透明黑色背景
                            $(layero).find(".layui-layer-title").css({
                                color: "#fff", // 标题文字颜色
                                background: "transparent", // 标题背景透明
                                "border-bottom":
                                    "1px solid rgba(255, 255, 255, 0.2)", // 标题底部边框
                            });
                            $(layero).find(".layui-layer-content").css({
                                background: "transparent", // 内容区域透明
                            });

                            $(layero)
                                .find(".layui-layer-setwin .layui-layer-close")
                                .css({
                                    color: "#fff", // 文字颜色
                                    "border-color": "#fff", // 边框颜色（如果按钮有边框）
                                });

                            // 重新渲染 ECharts（因为 DOM 刚被创建）
                            setTimeout(() => {
                                initEchartsOne(passRate, noPassRate);
                            }, 100);
                        },
                    });
                }
            );
        },
    });

    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();
    }

    myChart2 = echarts.init(document.getElementById("rightLineBox"));

    initEchartsTwo(data);
}
layui.use('upload', function () {
    var upload = layui.upload;

    // 执行上传
    upload.render({
        elem: '#uploadBtn', // 绑定元素
        url: commonUrl + "screen/largeScreen/dataAnalysis/uploadProQuality",
        accept: 'file', // 允许上传任意文件
        exts: 'docx', // 允许的文件类型
        size: 1024 * 10, // 限制文件大小，单位 KB（10MB）
        headers: {
            decrypt: "decrypt",
            Authorization: token,
        },
        before: function (obj) {
            // 上传前回调
            layer.msg('上传中...', { icon: 16, time: 0 });
        },
        done: function (res) {
            // 上传完成后回调（成功）
            layer.closeAll('loading');
            layer.msg('上传成功');
            console.log('服务器返回:', res);

            // 显示文件名或路径
            document.getElementById('fileName').innerText = '已上传文件：' + res.fileName;
        },
        error: function () {
            // 上传失败回调
            layer.msg('上传失败', { icon: 5 });
        }
    });
});

function initEchartsOne(passRate, noPassRate) {
    // 从传入的数据中提取 passRate 和 noPassRate，并转为数字
    // const passRate = parseFloat(pieData.passRate);
    // const noPassRate = parseFloat(pieData.noPassRate);
    myChart = echarts.init(document.getElementById("oneEcharts"));

    console.log(passRate, noPassRate, "passRate, noPassRate");

    const option = {
        grid: {
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
        },
        title: {
            x: "center",
            textStyle: {
                color: "#fff",
            },
        },
        tooltip: {
            trigger: "item",
            formatter: "{b}: {c}%",
        },
        legend: {
            show: true,
            data: ["合格率", "不合格率"],
            bottom: 10,
            textStyle: {
                color: "#fff",
            },
        },
        series: [
            {
                name: "合格率分析",
                type: "pie",
                radius: "50%",
                center: ["50%", "50%"],
                label: {
                    show: true,
                    formatter: "{b}: {c}%",
                },
                data: [
                    { value: parseFloat(passRate), name: "合格率" },
                    { value: parseFloat(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;
                },
            },
            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();
    });
}