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/projectProgress.js b/js/pages/newDataAnalysis/projectProgress.js
index 3b788af..ebeb691 100644
--- a/js/pages/newDataAnalysis/projectProgress.js
+++ b/js/pages/newDataAnalysis/projectProgress.js
@@ -1,42 +1,88 @@
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);
- // success(data,textStatus, jqXhr);
originalSuccess.apply(this, arguments);
};
},
});
- initTable(1, parent.$("#bidPro").val());
});
-/* 切换数据 */
function changeData(that, type) {
- const bidCode = parent.$("#bidPro").val();
+ currentType = type;
+ currentBidCode = 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" });
+
+ 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",
@@ -53,102 +99,217 @@ function initTable(type, bidCode) {
type: type,
},
response: {
- statusName: "code", // 规定数据状态的字段名称，默认：code
- statusCode: 200, // 规定成功的状态码，默认：0
- countName: "count", // 规定数据总数的字段名称，默认：count
- dataName: "rows", // 规定数据列表的字段名称，默认：data
+ statusName: "code",
+ statusCode: 200,
+ countName: "count",
+ dataName: "rows",
},
- 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);
- });
+ cols: [setCols(type)], // 现在可以正确访问setCols函数
+ done: function (res, curr, count) {
+ if (res.code !== 200 || !res.rows || res.rows.length === 0) {
+ layer.msg("暂无数据", { icon: 2 });
+ }
},
- done: function (res, curr, count, origin) {
- // console.log(res);
+ error: function () {
+ layer.msg("数据加载失败", { icon: 2 });
},
});
-
- 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",
- },
- ];
- }
- }
+}
+
+$(".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/projectProgress.html b/pages/newDataAnalysis/projectProgress.html
index 3f8affb..414a63a 100644
--- a/pages/newDataAnalysis/projectProgress.html
+++ b/pages/newDataAnalysis/projectProgress.html
@@ -10,6 +10,7 @@
+
@@ -21,6 +22,7 @@
+
工程进度分析
-
+
+
+
+
+
+