代码提交

js/pages/newDataAnalysis/proQualityAnalysis.js

@@ -1,4 +1,5 @@
 let table, layer, form;
+let myChart = null, myChart2 = null;
 layui.use(['layer', 'table', 'form'], function () {
     layer = layui.layer;
     table = layui.table;
@@ -31,8 +32,8 @@ function changeData(that, type) {
     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' });
+        $('#no-data-box').css({'display': 'none'});
-        $('#right-box').css({ 'display': 'none' });
+        $('#right-box').css({'display': 'none'});
     }
 
 }
@@ -64,21 +65,204 @@ function initTable(type, bidCode) {
             });
         },
         done: function (res, curr, count, origin) {
-            // console.log(res);
+            if (res.data && res.data.length > 0) {
+                initEcharts(res.data);
+            }
         }
     })
 
     function setCols(type) {
         if (type === 1) { // 工程质量分析
             return [
-                { type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
+                {type: 'numbers', title: '序号', width: '10%'}, // 添加序号列
-                { field: 'projectName', title: '工程名称', align: 'center', width: '15%' },
+                {field: 'projectName', title: '工程名称', align: 'center'},
-                { field: 'projectNumber', title: '工程编号', align: 'center', width: '15%' },
+                // { field: 'projectNumber', title: '工程编号', align: 'center'},
-                { field: 'projectAddress', title: '项目地址', align: 'center', width: '15%' },
+                // { field: 'projectAddress', title: '项目地址', align: 'center'},
-                { field: 'contractorName', title: '合同编号', align: 'center', width: '15%' },
+                // { field: 'contractorName', title: '承包商名称', align: 'center',},
-                { field: 'qualityLevel', title: '质量等级', align: 'center', width: '15%' },
+                // { field: 'qualityLevel', title: '质量等级', align: 'center'},
-                { field: 'isContract', title: '是否签订合同', align: 'center', width: '15%' },
+                {field: 'projectManager', title: '项目经理', align: 'center'},
+                {field: 'team', title: '专业队伍', align: 'center'},
+                {field: 'startTime', title: '开始时间', align: 'center'},
+                {field: 'checkNum', title: '检查数量', align: 'center'},
+                {field: 'passNum', title: '合格数量', align: 'center'},
+                {field: 'passRate', title: '合格率', align: 'center'},
+                {field: 'score', title: '得分', align: 'center'},
+                {field: 'unqualifiedItems', title: '不合格原因', align: 'center'},
+                {
+                    title: '操作', align: 'center', templet: function (row) {
+                        // 注意：Layui 的 templet 函数参数是 row，即当前行数据
+                        return `
+                        <button class="layui-btn layui-btn-xs" onclick="handleUpload('${row.projectNumber}')">
+                            上传
+                        </button>
+                    `;
+                    }
+                }
             ];
         }
     }
-}
+}
+
+
+// 初始化 echarts
+function initEcharts(data) {
+    if (myChart && myChart2) {
+        myChart.dispose();
+        myChart2.dispose();
+    }
+    myChart = echarts.init(document.getElementById("oneEcharts"));
+    myChart2 = echarts.init(document.getElementById("twoEcharts"));
+    initEchartsOne(data[0]);
+    initEchartsTwo(data);
+}
+
+function initEchartsOne(data) {
+    // 从传入的数据中提取 passRate 和 noPassRate，并转为数字
+    const passRate = parseFloat(data.passRate);
+    const noPassRate = parseFloat(data.noPassRate);
+
+    const option = {
+        grid: {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+        },
+        title: {
+            text: data.team || "合格率对比",
+            x: "center",
+        },
+        tooltip: {
+            trigger: "item",
+            formatter: "{b}: {c}%"
+        },
+        legend: {
+            show: true,
+            data: ['合格率', '不合格率'],
+            bottom: 10
+        },
+        series: [
+            {
+                name: "合格率分析",
+                type: "pie",
+                radius: "65%",
+                center: ["50%", "50%"],
+                label: {
+                    show: true,
+                    formatter: "{b}: {c}%"
+                },
+                data: [
+                    { value: passRate, name: "合格率" },
+                    { value: noPassRate, name: "不合格率" }
+                ],
+                itemStyle: {
+                    borderRadius: 5,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                }
+            }
+        ]
+    };
+    // 设置图表（假设你已定义 myChart2）
+    myChart.setOption(option, true);
+    window.addEventListener("resize", function () {
+        myChart.resize();
+    });
+}
+
+function initEchartsTwo(data) {
+    const teams = data.map(item => item.team);
+    const scores = data.map(item => item.score);
+
+    const option = {
+        title: {
+            text: '队伍得分柱状图',
+            left: 'center',
+            textStyle: {
+                color: '#fff'
+            }
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'none' // 移除鼠标悬停时的阴影效果
+            },
+            formatter: function(params) {
+                // 自定义tooltip显示内容，移除了百分号
+                return params[0].name + '<br/>' +
+                    params[0].seriesName + ': ' +
+                    params[0].value;
+            }
+        },
+        grid: {
+            left: '10%',
+            right: '10%',
+            bottom: '20%',
+            top: '20%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: teams,
+            axisLabel: {
+                color: '#fff',
+                interval: 0,
+                formatter: function(value) {
+                    // 每4个字符换行
+                    return value.match(/.{1,4}/g).join('\n');
+                }
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#fff'
+                }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            name: '得分',
+            min: 0,
+            max: 100,
+            interval: 10,
+            axisLabel: {
+                color: '#fff',
+                formatter: function(value) {
+                    return value; // 确保y轴标签也不显示百分号
+                }
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#fff'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,0.1)'
+                }
+            }
+        },
+        series: [{
+            name: '得分',
+            type: 'bar',
+            data: scores,
+            barWidth: '30%',
+            label: {
+                show: true,
+                position: 'top',
+                color: '#fff',
+                formatter: function(params) {
+                    return params.value;
+                }
+            },
+            itemStyle: {
+                color: '#409EFF'
+            }
+        }]
+    };
+
+    // 初始化 ECharts 图表（假设你已定义 myChart）
+    myChart2.setOption(option);
+    window.addEventListener('resize', function () {
+        myChart2.resize();
+    });
+}

pages/newDataAnalysis/proQualityAnalysis.html

@@ -14,7 +14,7 @@
     <script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
     <script src="../../js/publics/public.js"></script>
     <script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
-<!--&lt;!&ndash;    <script src="../../js/publics/echarts.js"></script>&ndash;&gt;-->
+    <script src="../../js/publics/echarts.js"></script>
     <script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
     <script src="../../js/publics/aescbc.js"></script>
     <script src="../../js/publics/sm3.js"></script>
@@ -28,7 +28,15 @@
    // watermark.load({ watermark_txt: text });
 </script>
 <body>
-<table id="demo2" lay-filter="test"></table>
+<div id="proQuality">
+    <table id="demo2" lay-filter="test"></table>
+</div>
+
+<div id="oneEcharts">
+</div>
+
+<div id="twoEcharts">
+</div>
 </body>
 <style>
     .layui-table-init {
@@ -37,6 +45,17 @@
     #demo2{
         margin-top: 26px;
     }
+    #proQuality{
+        width: 75%;
+    }
+    #oneEcharts{
+        width: 500px;
+        height: 500px;
+    }
+    #twoEcharts{
+        width: 500px;
+        height: 500px;
+    }
 </style>
 <script src="../../js/pages/newDataAnalysis/proQualityAnalysis.js" type="text/javascript"></script>