diff --git a/css/newDataAnalysis/projectProgress.css b/css/newDataAnalysis/projectProgress.css new file mode 100644 index 0000000..2891bb3 --- /dev/null +++ b/css/newDataAnalysis/projectProgress.css @@ -0,0 +1,30 @@ +.tap-box { + margin-top: 30px; + padding: 0 10px; + display: flex; +} + +.tap-box div { + padding: 4px 10px; + border-radius: 5px; + cursor: pointer; + border: 1px solid #e0e0e0; +} + +.tap-box div:last-child { + margin-left: 10px; +} + +.active { + background-color: #0052cc; +} + +.chart-box { + padding: 10px; + display: flex; +} +.chart-box-left, +.chart-box-right { + width: 50%; + height: 400px; +} diff --git a/js/pages/newDataAnalysis/newDataAnalysis.js b/js/pages/newDataAnalysis/newDataAnalysis.js index 1a047a2..564c650 100644 --- a/js/pages/newDataAnalysis/newDataAnalysis.js +++ b/js/pages/newDataAnalysis/newDataAnalysis.js @@ -1,56 +1,68 @@ 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) - } - } - }) - $('#indexIframe').attr('src','proQualityAnalysis.html'); +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); + }; + }, + }); + $("#indexIframe").attr("src", "proQualityAnalysis.html"); }); /* 切换数据 */ function changeData(that, type) { - let src = ''; - const bidCode = parent.$('#bidPro').val(); - $(".ul-box li").each(function () { - if ($(this).hasClass("check")) { - $(this).removeClass("check").addClass("nocheck"); + let src = ""; + const bidCode = parent.$("#bidPro").val(); + $(".ul-box li").each(function () { + if ($(this).hasClass("check")) { + $(this).removeClass("check").addClass("nocheck"); + } + }); + $(that).removeClass("nocheck").addClass("check"); + if (type == 1) { + // 工程质量分析 + src = "proQualityAnalysis.html"; + } else if (type == 2) { + // 工程安全分析 + src = "engineeringSafetyAnalysis.html"; + } else if (type == 3) { + // 工程进度分析 + src = "projectProgress.html"; + } else if (type == 4) { + // 资源利用率分析 + src = ""; + } else if (type == 5) { + // 节能减排分析 + src = ""; + } else if (type == 6) { + // 工人效率分析 + src = "workerEfficiencyAnalysis.html"; + } else if (type == 7) { + // 环境监测分析 + src = "environDetection.html"; + } else if (type == 8) { + // 项目管理分析 + src = "projectManagement.html"; + } else if (type == 9) { + // 整体效能分析 + src = "overallEfficiency.html"; + } else if (type == 10) { + // 风险值班分析 + src = ""; + } else if (type == 11) { + // 穿戴设备监测设备指标分析 + src = ""; + } else if (type == 12) { + // 延期原因分析 + src = ""; } - }); - $(that).removeClass("nocheck").addClass("check"); - if(type == 1){ // 工程质量分析 - src = 'proQualityAnalysis.html'; - }else if(type == 2){ // 工程安全分析 - src = ''; - }else if(type == 3){ // 工程进度分析 - src = ''; - }else if(type == 4){ // 资源利用率分析 - src = 'resourceRateAnalysis.html'; - }else if(type == 5){ // 节能减排分析 - src = ''; - }else if(type == 6){ // 工人效率分析 - src = 'workerEfficiencyAnalysis.html'; - }else if(type == 7){ // 环境监测分析 - src = 'environDetection.html'; - }else if(type == 8){ // 项目管理分析 - src = ''; - }else if(type == 9){ // 整体效能分析 - src = 'overallEfficiency.html'; - }else if(type == 10){ // 风险值班分析 - src = ''; - }else if(type == 11){ // 穿戴设备监测设备指标分析 - src = ''; - }else if(type == 12){ // 延期原因分析 - src = ''; - } - $('#indexIframe').attr('src',src); + $("#indexIframe").attr("src", src); } diff --git a/js/pages/newDataAnalysis/projectManagement.js b/js/pages/newDataAnalysis/projectManagement.js new file mode 100644 index 0000000..62661f7 --- /dev/null +++ b/js/pages/newDataAnalysis/projectManagement.js @@ -0,0 +1,144 @@ +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) { + // console.log(res); + }, + }); + + 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; + }, + }, + ]; + } + } +} diff --git a/js/pages/newDataAnalysis/projectProgress.js b/js/pages/newDataAnalysis/projectProgress.js new file mode 100644 index 0000000..ebeb691 --- /dev/null +++ b/js/pages/newDataAnalysis/projectProgress.js @@ -0,0 +1,315 @@ +let table, layer, form; +let currentType = 1; +let currentBidCode = ""; + +// 将setCols函数提取到外部，使其可以被全局访问 +function setCols(type) { + if (type === 1) { + return [ + { type: "numbers", title: "序号", width: "10%" }, + { field: "projectName", title: "项目名称", align: "center" }, + { field: "taskName", title: "作业任务名称", align: "center" }, + { field: "taskCode", title: "任务编号", align: "center" }, + { field: "planStartTime", title: "计划开始时间", align: "center" }, + { field: "planEndTime", title: "计划完成时间", align: "center" }, + { + field: "actualStartTime", + title: "实际开始时间", + align: "center", + }, + { field: "actualEndTime", title: "实际完成时间", align: "center" }, + { field: "processDiff", title: "进度偏差", align: "center" }, + { field: "completeEffort", title: "已完成工程量", align: "center" }, + { field: "totalEffort", title: "总工程量", align: "center" }, + { field: "delayActor", title: "延误因素分析", align: "center" }, + { + field: "resourceMatchStatus", + title: "资源匹配状态", + align: "center", + }, + { + field: "keyPathFlag", + title: "关键路径任务标识", + align: "center", + }, + ]; + } + // 可以添加其他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" }); +} + +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_progress_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) { + if (res.code !== 200 || !res.rows || res.rows.length === 0) { + layer.msg("暂无数据", { icon: 2 }); + } + }, + error: function () { + layer.msg("数据加载失败", { icon: 2 }); + }, + }); +} + +$(".list-view").click(function () { + if ($(this).hasClass("active")) return; + + $(".list-view").addClass("active"); + $(".chart-view").removeClass("active"); + + $(".chart-box").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(); + + initLineChart(); + initPieChart(); +}); + +// 初始化左侧双折线图 +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: { + data: ["计划进度", "实际进度"], + textStyle: { + // 图例文字样式 + color: "#fff", // 图例文字颜色 + }, + itemStyle: { + color: function (name) { + return name === "计划进度" ? "#5470C6" : "#FF0000"; + }, + }, + }, + grid: { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + xAxis: { + type: "category", + boundaryGap: false, + data: ["一月", "二月", "三月", "四月", "五月", "六月"], + }, + yAxis: { + type: "value", + }, + series: [ + { + name: "计划进度", + type: "line", + data: [120, 132, 101, 134, 90, 230], + smooth: false, + lineStyle: { + color: "#5470C6", + width: 2, + }, + itemStyle: { + color: "#5470C6", + }, + }, + { + name: "实际进度", + type: "line", + data: [100, 120, 90, 110, 80, 150], + smooth: false, + lineStyle: { + color: "#FF0000", // 红色 + width: 2, + }, + itemStyle: { + color: "#FF0000", + }, + }, + ], + }; + + leftChart.setOption(option); + + // 响应式调整 + window.addEventListener("resize", function () { + leftChart.resize(); + }); +} + +// 初始化右侧饼图 +function initPieChart() { + const rightChart = echarts.init(document.getElementById("right-chart")); + + const option = { + title: { + text: "延误因素分布", + left: "center", + textStyle: { + color: "#fff", + fontSize: 18, + }, + }, + tooltip: { + trigger: "item", + formatter: "{a} {b}: {c} ({d}%)", + }, + legend: { + orient: "vertical", // 垂直排列 + right: 60, // 距离右侧 20px + top: "center", // 垂直居中 + textStyle: { + color: "#fff", // 图例文字颜色设为白色 + }, + data: ["大气影响", "设备判断延迟", "人员不足", "设计变更", "其他"], + }, + series: [ + { + name: "", + type: "pie", + radius: ["30%", "50%"], // 内半径 30%，外半径 60%，形成空心效果 + center: ["30%", "50%"], // 确保饼图居中 + avoidLabelOverlap: false, + label: { + show: false, // 隐藏连接线末端的标签 + }, + labelLine: { + show: false, // 隐藏连接线 + }, + itemStyle: { + borderRadius: 5, // 每块扇形圆角效果 + borderColor: "#000", // 边框颜色（用于间隙） + borderWidth: 1, // 边框宽度（1px 每边，形成 2px 间隙） + }, + data: [ + { + value: 335, + name: "大气影响", + itemStyle: { color: "#67C23A" }, + }, + { + value: 210, + name: "设备判断延迟", + itemStyle: { color: "#409EFF" }, + }, + { + value: 154, + name: "人员不足", + itemStyle: { color: "#E6A23C" }, + }, + { + value: 154, + name: "设计变更", + itemStyle: { color: "#909399" }, + }, + { + value: 154, + name: "其他", + itemStyle: { color: "#F56C6C" }, + }, + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: "rgba(0, 0, 0, 0.5)", + }, + }, + }, + ], + }; + + rightChart.setOption(option); + + // 响应式调整 + window.addEventListener("resize", function () { + rightChart.resize(); + }); +} diff --git a/pages/newDataAnalysis/projectManagement.html b/pages/newDataAnalysis/projectManagement.html new file mode 100644 index 0000000..6f8b712 --- /dev/null +++ b/pages/newDataAnalysis/projectManagement.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + 工程管理分析 + + + + +
+ + + + + \ No newline at end of file diff --git a/pages/newDataAnalysis/projectProgress.html b/pages/newDataAnalysis/projectProgress.html new file mode 100644 index 0000000..414a63a --- /dev/null +++ b/pages/newDataAnalysis/projectProgress.html @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + 工程进度分析 + + + + + +
+
列表视图
+
图表视图
+
+ +
+ +
+
+ 左侧折线图 +
+
+ 右侧饼图 +
+
+ + + + + \ No newline at end of file