// 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 += // '分析报告'; // 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 = []; // 将setCols函数提取到外部,使其可以被全局访问 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 += '分析报告'; return text; }, }, ]; } // 可以添加其他type的情况 return []; // 默认返回空数组 } 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.taskName; }); barData_1 = tableData.map((item) => { return item.actualCost; }); if (res.code !== 200 || !res.rows || res.rows.length === 0) { layer.msg("暂无数据", { icon: 2 }); } // 查看按钮点击 // $(".layui-table-body table.layui-table tbody tr #viewBtn").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: // "
" + // "
延误原因:" + // rowData.delayActor + // "
" + // "
其他原因:" + // data1[index] + // "
" + // "
分析结果:" + // data2[index] + // "
" + // "
", // area: ["600px", "300px"], // 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", // 边框颜色(如果按钮有边框) // }); // }, // }); // } // ); $(".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(); $(".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(); }); // 初始化左侧双折线图 function initLineChart() { const leftChart = echarts.init(document.getElementById("left-chart")); const bottomChart = echarts.init(document.getElementById("bottom-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}
成本: {c} 元", }, grid: { left: "10%", right: "10%", bottom: "15%", top: "20%", containLabel: true, }, xAxis: { type: "category", data: barData, axisLabel: { color: "#fff", // x轴文字颜色设为白色 fontSize: 12, }, 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 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();