工程进度分析接口调试以及图表显示

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

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);
+    if ($("#demo2").is(":visible")) {
-        $("#right-table-box").removeAttr("style");
+        initTable(type, currentBidCode);
-        $("#no-data-box").css({ display: "none" });
-        $("#right-box").css({ display: "none" });
     }
+
+    $("#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
+            statusName: "code",
-            statusCode: 200, // 规定成功的状态码，默认：0
+            statusCode: 200,
-            countName: "count", // 规定数据总数的字段名称，默认：count
+            countName: "count",
-            dataName: "rows", // 规定数据列表的字段名称，默认：data
+            dataName: "rows",
         },
-        cols: [setCols(type)],
+        cols: [setCols(type)], // 现在可以正确访问setCols函数
-        initComplete: function () {
+        done: function (res, curr, count) {
-            // 在表格渲染完成后，重新渲染序号列
+            if (res.code !== 200 || !res.rows || res.rows.length === 0) {
-            var that = this.elem.next();
+                layer.msg("暂无数据", { icon: 2 });
-            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) {
+        error: function () {
-            // console.log(res);
+            layer.msg("数据加载失败", { icon: 2 });
         },
     });
-
+}
-    function setCols(type) {
+
-        if (type === 1) {
+$(".list-view").click(function () {
-            // 工程质量分析
+    if ($(this).hasClass("active")) return;
-            return [
+
-                { type: "numbers", title: "序号", width: "10%" }, // 添加序号列
+    $(".list-view").addClass("active");
-                {
+    $(".chart-view").removeClass("active");
-                    field: "projectName",
+
-                    title: "项目名称",
+    $(".chart-box").hide();
-                    align: "center",
+    $("#demo2").show();
-                },
+    initTable(currentType, currentBidCode);
-                {
+});
-                    field: "taskName",
+
-                    title: "作业任务名称",
+$(".chart-view").click(function () {
-                    align: "center",
+    if ($(this).hasClass("active")) return;
-                },
+
-                {
+    $(".list-view").removeClass("active");
-                    field: "taskCode",
+    $(".chart-view").addClass("active");
-                    title: "任务编号",
+
-                    align: "center",
+    $("#demo2").hide();
-                },
+    $("#demo2").next(".layui-table-view").remove();
-                {
+    $(".chart-box").show();
-                    field: "planStartTime",
+
-                    title: "计划开始时间",
+    initLineChart();
-                    align: "center",
+    initPieChart();
-                },
+});
-                {
+
-                    field: "planEndTime",
+// 初始化左侧双折线图
-                    title: "计划完成时间",
+function initLineChart() {
-                    align: "center",
+    const leftChart = echarts.init(document.getElementById("left-chart"));
-                },
+
-                {
+    const option = {
-                    field: "actualStartTime",
+        textStyle: {
-                    title: "实际开始时间",
+            color: "#fff",
-                    align: "center",
+        },
-                },
+        title: {
-                {
+            text: "进度偏差统计",
-                    field: "actualEndTime",
+            textStyle: {
-                    title: "实际完成时间",
+                // 标题文字样式
-                    align: "center",
+                color: "#fff", // 标题颜色
-                },
+                fontSize: 18, // 可以同时设置其他样式
-                {
+            },
-                    field: "processDiff",
+        },
-                    title: "进度偏差",
+        tooltip: {
-                    align: "center",
+            trigger: "axis",
-                },
+        },
-                {
+        legend: {
-                    field: "completeEffort",
+            data: ["计划进度", "实际进度"],
-                    title: "已完成工程量",
+            textStyle: {
-                    align: "center",
+                // 图例文字样式
-                },
+                color: "#fff", // 图例文字颜色
-                {
+            },
-                    field: "totalEffort",
+            itemStyle: {
-                    title: "总工程量",
+                color: function (name) {
-                    align: "center",
+                    return name === "计划进度" ? "#5470C6" : "#FF0000";
-                },
+                },
-                {
+            },
-                    field: "delayActor",
+        },
-                    title: "延误因素分析",
+        grid: {
-                    align: "center",
+            left: "3%",
-                },
+            right: "4%",
-                {
+            bottom: "3%",
-                    field: "resourceMatchStatus",
+            containLabel: true,
-                    title: "资源匹配状态",
+        },
-                    align: "center",
+        xAxis: {
-                },
+            type: "category",
-                {
+            boundaryGap: false,
-                    field: "keyPathFlag",
+            data: ["一月", "二月", "三月", "四月", "五月", "六月"],
-                    title: "关键路径任务标识",
+        },
-                    align: "center",
+        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();
+    });
 }

pages/newDataAnalysis/projectProgress.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
     <link rel="stylesheet" href="../../css/coreTable.css" />
     <link rel="stylesheet" href="../../css/accessMge/accessMge.css">
+    <script src="../../js/publics/echarts.js"></script>
     <script src="../../js/publics/sm4.js" type="text/javascript"></script>
     <script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
     <script src="../../js/publics/public.js"></script>
@@ -21,6 +22,7 @@
     <script src="../../api/commonRequest.js"></script>
     <!-- <script src="../../js/publics/shuiYin.js"></script> -->
     <script src="../../plugin/watermark.js"></script>
+    <link rel="stylesheet" href="../../css/newDataAnalysis/projectProgress.css">
     <title>工程进度分析</title>
 </head>
 <script type="text/javascript">
@@ -29,7 +31,22 @@
 </script>
 
 <body>
-    <table id="demo2" lay-filter="test"></table>
+    <!-- tap 切换按钮 -->
+    <div class="tap-box">
+        <div class="list-view active">列表视图</div>
+        <div class="chart-view">图表视图</div>
+    </div>
+    <!-- 列表视图 -->
+    <table id="demo2" class="list-table" lay-filter="test"></table>
+    <!-- 图表视图 -->
+    <div class="chart-box">
+        <div class="chart-box-left" id="left-chart">
+            左侧折线图
+        </div>
+        <div class="chart-box-right" id="right-chart">
+            右侧饼图
+        </div>
+    </div>
 </body>
 <style>
     .layui-table-init {