ah_jjzhgd_webscreen/js/pages/newDataAnalysis/projectManagement.js

// let table, layer, form;
// 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/tb_project_new/list";
//     table.render({
//         elem: "#demo2",
//         url: url,
//         skin: "line",
//         page: true,
//         height: "full-100",
//         headers: {
//             decrypt: "decrypt",
//             Authorization: token,
//         },
//         where: {
//             bidCode: bidCode,
//             type: type,
//         },
//         response: {
//             statusName: "code", // 规定数据状态的字段名称，默认：code
//             statusCode: 200, // 规定成功的状态码，默认：0
//             countName: "count", // 规定数据总数的字段名称，默认：count
//             dataName: "rows", // 规定数据列表的字段名称，默认：data
//         },
//         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) {
//             $(".layui-table-body table.layui-table tbody tr #exportBtn").on(
//                 "click",
//                 function () {
//                     // 获取当前行的数据
//                     var index = $(this).index();
//                     var rowData = res.rows[index]; // 获取对应行的数据
//                     console.log(rowData, "rowData导出");

//                     const url =
//                         commonUrl +
//                         "screen/largeScreen/tb_project_new/export?proName=" +
//                         rowData.taskName +
//                         "&token=" +
//                         sessionStorage.getItem("zhgd_token");

//                     // window.location.href = url;
//                     window.open(url, "_blank");
//                     // $.ajax({
//                     //     url: url,
//                     //     type: "get",

//                     //     headers: {
//                     //         authorization: sessionStorage.getItem("zhgd_token"),
//                     //     },
//                     //     success: function (data) {
//                     //         console.log(data, "导出的数据结果");
//                     //     },
//                     // });
//                 }
//             );
//         },
//     });

//     function setCols(type) {
//         if (type === 1) {
//             return [
//                 { type: "numbers", title: "序号", width: "10%" }, // 添加序号列
//                 {
//                     field: "taskName",
//                     title: "工程名称",
//                     align: "center",
//                 },
//                 {
//                     field: "projectNumber",
//                     title: "任务名称",
//                     align: "center",
//                 },
//                 {
//                     field: "planStartTime",
//                     title: "计划开始时间",
//                     align: "center",
//                 },
//                 {
//                     field: "planEndTime",
//                     title: "实际开始时间",
//                     align: "center",
//                 },
//                 {
//                     field: "diffDay",
//                     title: "偏差天数",
//                     align: "center",
//                 },
//                 {
//                     field: "planCost",
//                     title: "成本预算",
//                     align: "center",
//                 },
//                 {
//                     field: "actualCost",
//                     title: "实际成本",
//                     align: "center",
//                 },
//                 {
//                     field: "riskLevel",
//                     title: "风险等级",
//                     align: "center",
//                 },
//                 {
//                     field: "suggestion",
//                     title: "建议策略",
//                     align: "center",
//                 },
//                 {
//                     title: "操作",
//                     align: "center",
//                     templet: (d) => {
//                         let text = "";
//                         text +=
//                             '<a id="exportBtn" style="color: #007bff;cursor: pointer;font-size: 16px">分析报告</a>';
//                         return text;
//                     },
//                 },
//             ];
//         }
//     }
// }

let table, layer, form;
let currentType = 1;
let currentBidCode = "";
let xData = [];
let yData_1 = [];
let yData_2 = [];
let pieData = [];
let pieData_1 = [];
let tableData = [];
let barData = [];
let barData_1 = [];
let barData_2 = [];

// 将setCols函数提取到外部，使其可以被全局访问
function setCols(type) {
    if (type === 1) {
        return [
            { type: "numbers", title: "序号", width: "10%" }, // 添加序号列
            {
                field: "proName",
                title: "工程名称",
                align: "center",
            },
            {
                field: "taskName",
                title: "任务名称",
                align: "center",
            },
            {
                field: "planStartTime",
                title: "计划开始时间",
                align: "center",
            },
            {
                field: "planEndTime",
                title: "实际开始时间",
                align: "center",
            },
            {
                field: "diffDay",
                title: "偏差天数",
                align: "center",
            },
            {
                field: "planCost",
                title: "成本预算",
                align: "center",
            },
            {
                field: "actualCost",
                title: "实际成本",
                align: "center",
            },
            // {
            //     title: "风险等级",
            //     align: "center",
            //     templet: (d) => {
            //         let text = "";
            //         text +=
            //             '<a style="color:rgb(226, 154, 11);font-size: 16px">' +
            //             d.riskLevel +
            //             "级" +
            //             "</a>";
            //         return text;
            //     },
            // },
            {
                title: "风险数量",
                align: "center",
                templet: (d) => {
                    let text = "";
                    text +=
                        '<a id="riskLevel" style="color: #007bff;cursor: pointer;font-size: 16px">' +
                        d.riskSize +
                        "</a>";
                    return text;
                },
            },
            // {
            //     field: "suggestion",
            //     title: "建议策略",
            //     align: "center",
            // },
            {
                title: "操作",
                align: "center",
                templet: (d) => {
                    let text = "";
                    text +=
                        '<a id="exportBtn" style="color: #007bff;cursor: pointer;font-size: 16px">分析报告</a>';
                    return text;
                },
            },
        ];
    }
    // 可以添加其他type的情况
    return []; // 默认返回空数组
}

function setCols2(type) {
    if (type === 1) {
        return [
            { type: "numbers", title: "序号", width: "10%" }, // 添加序号列
            {
                field: "proPart",
                title: "工序名称",
                align: "center",
            },
            {
                field: "riskDesc",
                title: "风险描述",
                align: "center",
            },
        ];
    }
}

layui.use(["layer", "table", "form"], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;

    currentBidCode = parent.$("#bidPro").val();
    initTable(currentType, currentBidCode);

    $.ajaxSetup({
        beforeSend: function (xhr, options) {
            var originalSuccess = options.success;
            options.success = function (data, textStatus, jqXhr) {
                data = modifyResponseData(data);
                originalSuccess.apply(this, arguments);
            };
        },
    });
});

function changeData(that, type) {
    currentType = type;
    currentBidCode = parent.$("#bidPro").val();

    $(".ul-box li").each(function () {
        if ($(this).hasClass("check")) {
            $(this).removeClass("check").addClass("nocheck");
        }
    });

    $(that).removeClass("nocheck").addClass("check");

    if ($("#demo2").is(":visible")) {
        initTable(type, currentBidCode);
    }

    $("#right-table-box").removeAttr("style");
    $("#no-data-box").css({ display: "none" });
    $("#right-box").css({ display: "none" });
}

let data1 = [
    "由于大气影响，导致施工进度延误",
    "由于设备判断延迟，导致施工进度延误",
    "由于人员不足，导致施工进度延误",
    "由于设计变更，导致施工进度延误",
    "由于其他原因，导致施工进度延误",
];
// 自动生成一些结果描述
let data2 = [
    "此次结果较上次有所恶化，由于大气影响（如暴雨、雾霾），现场停工3天，需调整后续工期计划。",
    "此次结果与上次持平，由于设备判断延迟（如检测仪器故障），延误2天，但通过加班追回部分进度。",
    "此次结果较上次有所改善，尽管人员不足（原计划10人，实际到岗7人），但通过优化分工仅延误1天。",
    "此次结果出现新问题，由于设计变更（业主临时要求修改图纸），导致关键路径延期5天，需紧急协调资源。",
    "此次结果较上次无显著变化，其他原因（如临时停电）导致延误1天，属于可控范围内。",
];

function initTable(type, bidCode) {
    if ($("#demo2").next(".layui-table-view").length > 0) {
        $("#demo2").next(".layui-table-view").remove();
    }

    const url = commonUrl + "screen/largeScreen/tb_project_new/list";
    table.render({
        elem: "#demo2",
        url: url,
        skin: "line",
        page: true,
        height: "full-100",
        headers: {
            decrypt: "decrypt",
            Authorization: token,
        },
        where: {
            bidCode: bidCode,
            type: type,
        },
        response: {
            statusName: "code",
            statusCode: 200,
            countName: "count",
            dataName: "rows",
        },
        cols: [setCols(type)], // 现在可以正确访问setCols函数
        done: function (res, curr, count) {
            tableData = res.rows;

            barData = tableData.map((item) => {
                return item.proName;
            });
            barData_1 = tableData.map((item) => {
                return item.actualCost;
            });

            barData_2 = tableData.map((item) => {
                return item.riskLevel;
            });

            if (res.code !== 200 || !res.rows || res.rows.length === 0) {
                layer.msg("暂无数据", { icon: 2 });
            }

            // 查看按钮点击;
            $(".layui-table-body table.layui-table tbody tr #riskLevel").on(
                "click",
                function () {
                    const index = $(this).closest("tr").data("index");
                    console.log(index, "index");
                    var rowData = res.rows[index]; // 获取对应行的数据

                    // 弹框配置
                    layer.open({
                        type: 1,
                        title: "风险详情",
                        content: "<div id='risk-detail-table'></div>",
                        area: ["800px", "400px"],
                        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({
                                fontSize: "18px",
                                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", // 边框颜色（如果按钮有边框）
                                });

                            // table.render({
                            //     elem: "#table-box",
                            //     url:
                            //         commonUrl +
                            //         "screen/largeScreen/tb_project_new/listRiskDetail",
                            //     skin: "line",
                            //     page: true,
                            //     height: "full-100",
                            //     headers: {
                            //         decrypt: "decrypt",
                            //         Authorization: token,
                            //     },
                            //     where: {
                            //         bidCode: bidCode,
                            //         type: type,
                            //         proId: rowData.proId,
                            //     },
                            //     response: {
                            //         statusName: "code",
                            //         statusCode: 200,
                            //         countName: "count",
                            //         dataName: "rows",
                            //     },
                            //     cols: [setCols2(type)],
                            // });

                            $.ajax({
                                url:
                                    commonUrl +
                                    "screen/largeScreen/tb_project_new/listRiskDetail",
                                type: "GET",
                                headers: {
                                    decrypt: "decrypt",
                                    Authorization: token,
                                },
                                data: {
                                    bidCode: bidCode,
                                    type: type,
                                    proId: rowData.proId,
                                },
                                success: function (res) {
                                    console.log(res, "res");

                                    if (res.code === 200 && res.rows) {
                                        // 渲染表格
                                        table.render({
                                            elem: "#risk-detail-table",
                                            data: res.rows,
                                            skin: "line",
                                            even: true,
                                            page: false,
                                            cols: [
                                                [
                                                    {
                                                        field: "number",
                                                        title: "序号",
                                                        width: 100,
                                                    },
                                                    {
                                                        field: "proPart",
                                                        title: "工程部位",
                                                        align: "center",
                                                    },
                                                    {
                                                        field: "riskDesc",
                                                        title: "风险描述",
                                                        align: "center",
                                                    },
                                                ],
                                            ],
                                            done: function () {
                                                // 确保表格渲染后可见
                                                this.elem.next().show();
                                                $(this.elem).removeAttr(
                                                    "lay-even"
                                                );
                                            },
                                        });
                                    } else {
                                        $("#risk-detail-table").html(
                                            '<div class="layui-nodata">暂无风险详情数据</div>'
                                        );
                                    }
                                },
                                error: function () {
                                    $("#risk-detail-table").html(
                                        '<div class="layui-nodata">数据加载失败，请稍后重试</div>'
                                    );
                                },
                            });
                        },
                    });
                }
            );

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

                    const url =
                        commonUrl +
                        "screen/largeScreen/tb_project_new/export?proName=" +
                        rowData.taskName +
                        "&token=" +
                        sessionStorage.getItem("zhgd_token");

                    // window.location.href = url;
                    window.open(url, "_blank");
                    // $.ajax({
                    //     url: url,
                    //     type: "get",

                    //     headers: {
                    //         authorization: sessionStorage.getItem("zhgd_token"),
                    //     },
                    //     success: function (data) {
                    //         console.log(data, "导出的数据结果");
                    //     },
                    // });
                }
            );
        },
        error: function () {
            layer.msg("数据加载失败", { icon: 2 });
        },
    });
}

$(".chart-box").hide();
$(".chart-box2").hide();

$(".list-view").click(function () {
    if ($(this).hasClass("active")) return;

    $(".list-view").addClass("active");
    $(".chart-view").removeClass("active");

    $(".chart-box").hide();
    $(".chart-box2").hide();
    $("#demo2").show();
    initTable(currentType, currentBidCode);
});

$(".chart-view").click(function () {
    if ($(this).hasClass("active")) return;

    $(".list-view").removeClass("active");
    $(".chart-view").addClass("active");

    $("#demo2").hide();
    $("#demo2").next(".layui-table-view").remove();
    $(".chart-box").show();
    $(".chart-box2").show();

    initLineChart();
    initPieChart();
    initBottomPieChart();
});

// 初始化左侧双折线图
function initLineChart() {
    const leftChart = echarts.init(document.getElementById("left-chart"));
    //

    const option = {
        textStyle: {
            color: "#fff",
        },
        title: {
            text: "项目进度趋势",
            textStyle: {
                // 标题文字样式
                color: "#fff", // 标题颜色
                fontSize: 18, // 可以同时设置其他样式
            },
        },
        tooltip: {
            trigger: "axis",
        },
        legend: {
            show: true,
            data: ["计划进度", "实际进度"],
            textStyle: {
                // 图例文字样式
                color: "#fff", // 图例文字颜色
            },
            itemStyle: {
                color: "auto",
            },
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: xData,
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                name: "计划进度",
                type: "line",
                data: yData_1,
                smooth: false,
                lineStyle: {
                    color: "#5470C6",
                    width: 2,
                },
                itemStyle: {
                    color: "#5470C6",
                    borderWidth: 0, // 去除白色边框
                },
                symbolSize: 8, // 可以调整小圆点的大小
            },
            {
                name: "实际进度",
                type: "line",
                data: yData_2,
                smooth: false,
                lineStyle: {
                    color: "#FF0000", // 红色
                    width: 2,
                },
                itemStyle: {
                    color: "#FF0000",
                    borderWidth: 0, // 去除白色边框
                },
                symbolSize: 10, // 可以调整小圆点的大小
            },
        ],
    };

    leftChart.setOption(option);
    // bottomChart.setOption(option);

    // 响应式调整
    window.addEventListener("resize", function () {
        leftChart.resize();
    });
}

// 初始化右侧饼图
function initPieChart() {
    const rightChart = echarts.init(document.getElementById("right-chart"));

    // const barData = {
    //     projects: ["项目A", "项目B"],
    //     costs: [120000, 180000],
    // };

    const option = {
        title: {
            text: "项目成本对比",
            left: "center",
            textStyle: {
                color: "#fff",
                fontSize: 18,
            },
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
            formatter: "项目: {b}<br/>成本: {c} 元",
        },
        grid: {
            left: "10%",
            right: "10%",
            bottom: "15%",
            top: "20%",
            containLabel: true,
        },
        xAxis: {
            type: "category",
            data: barData,
            axisLabel: {
                color: "#fff",
                fontSize: 12,
                interval: 0, // 强制显示所有标签
                rotate: barData.length > 5 ? 30 : 0, // 如果项目多就旋转标签
            },
            axisLine: {
                lineStyle: {
                    color: "#fff", // x轴线颜色设为白色
                },
            },
        },
        yAxis: {
            type: "value",
            name: "成本金额(元)",
            nameTextStyle: {
                color: "#fff", // y轴名称颜色设为白色
            },
            axisLabel: {
                color: "#fff", // y轴文字颜色设为白色
                fontSize: 12,
            },
            axisLine: {
                lineStyle: {
                    color: "#fff", // y轴线颜色设为白色
                },
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.2)", // 网格线颜色设为半透明白色
                },
            },
        },
        series: [
            {
                name: "成本金额",
                type: "bar",
                barWidth: "40%",
                data: barData_1,
                itemStyle: {
                    color: function (params) {
                        // 自定义柱状颜色
                        const colorList = ["#409EFF", "#67C23A"];
                        return colorList[params.dataIndex];
                    },
                    borderRadius: [5, 5, 0, 0], // 柱子上部圆角
                },
                label: {
                    show: true,
                    position: "top",
                    color: "#fff", // 柱顶文字颜色
                    formatter: "{c} 元",
                },
            },
        ],
    };

    rightChart.setOption(option);

    // 响应式调整
    window.addEventListener("resize", function () {
        rightChart.resize();
    });
}

// 初始化底部饼图
function initBottomPieChart() {
    const bottomChart = echarts.init(document.getElementById("bottom-chart"));

    // 定义一组更现代化的颜色方案
    const colorPalette = [
        "#4E79A7",
        "#F28E2B",
        "#E15759",
        "#76B7B2",
        "#59A14F",
        "#EDC948",
        "#B07AA1",
        "#FF9DA7",
    ];

    const option = {
        title: {
            text: "项目风险等级分布", // 修改标题以反映显示的是等级
            left: "center",
            textStyle: {
                color: "#fff",
                fontSize: 18,
                fontWeight: "bold",
            },
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
            formatter: "项目: {b}<br/>风险等级: {c}",
        },
        grid: {
            left: "12%",
            right: "12%",
            bottom: "15%",
            top: "25%",
            containLabel: true,
        },
        xAxis: {
            type: "category",
            data: barData, // ['项目A','项目B']
            axisLabel: {
                color: "#fff",
                fontSize: 12,
                interval: 0, // 强制显示所有标签
                rotate: barData.length > 5 ? 30 : 0, // 如果项目多就旋转标签
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.8)",
                    width: 2,
                },
            },
            axisTick: {
                alignWithLabel: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.6)",
                },
            },
        },
        yAxis: {
            type: "value",
            name: "风险等级",
            nameTextStyle: {
                color: "#fff",
                fontSize: 14,
                padding: [0, 0, 0, 40], // 调整名称位置
            },
            min: 0,
            max: 10, // 假设风险等级最高为10
            interval: 1, // 固定间隔为1
            axisLabel: {
                color: "#fff",
                fontSize: 12,
                formatter: function (value) {
                    return value + "级"; // 显示为1级、2级等
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.8)",
                    width: 2,
                },
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.15)",
                    type: "dashed",
                },
            },
        },
        series: [
            {
                name: "风险等级",
                type: "bar",
                barWidth: "60%", // 加宽柱子
                data: barData_2, // [3,6]
                itemStyle: {
                    color: function (params) {
                        // 根据风险等级设置颜色，等级越高颜色越深
                        const riskLevel = barData_2[params.dataIndex];
                        if (riskLevel <= 3) return "#5B8FF9"; // 低风险
                        if (riskLevel <= 6) return "#F6BD16"; // 中风险
                        return "#E86452"; // 高风险
                    },
                    borderRadius: [6, 6, 0, 0],
                    shadowColor: "rgba(0, 0, 0, 0.3)",
                    shadowBlur: 5,
                    shadowOffsetY: 3,
                },
                label: {
                    show: true,
                    position: "top",
                    color: "#fff",
                    fontWeight: "bold",
                    formatter: function (params) {
                        return params.value + "级"; // 显示为3级、6级等
                    },
                },
                // 添加渐变色效果
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
            },
        ],
        // 添加背景色
        backgroundColor: "rgba(10, 20, 40, 0.7)",
    };

    bottomChart.setOption(option);

    // 响应式调整
    window.addEventListener("resize", function () {
        bottomChart.resize();
    });
}

// 获取图表数据
function getChartData() {
    const url = commonUrl + "screen/largeScreen/tb_project_new/list4progress";
    $.ajax({
        url: url,
        type: "get",
        headers: {
            authorization: sessionStorage.getItem("zhgd_token"),
        },
        success: function (data) {
            console.log(data, "图表数据1===折线图");

            if (data.rows && data.rows.length > 0) {
                // initPieChart(data.rows);

                const result = data.rows;

                result.forEach((item) => {
                    xData.push(item.month);
                    yData_1.push(item.monthProgress || 0);
                    yData_2.push(item.monthProgress2 || 0);
                });
            }
        },
    });
    const url2 =
        commonUrl + "screen/largeScreen//tb_project_progress_new/list4bing";
    $.ajax({
        url: url2,
        type: "get",
        headers: {
            authorization: sessionStorage.getItem("zhgd_token"),
        },
        success: function (data) {
            console.log(data, "图表数据2===饼图");

            if (data.rows && data.rows.length > 0) {
                const result = data.rows;

                result.forEach((item) => {
                    pieData.push(item.category);
                    pieData_1.push(item.monthValue || 0);
                });
            }
        },
    });
}

getChartData();