From 89a1cf25f83f7d63a904759fdf176109a24ec88e Mon Sep 17 00:00:00 2001 From: "liang.chao" <1360241448@qq.com> Date: Wed, 23 Jul 2025 22:31:39 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../newDataAnalysis/proQualityAnalysis.js | 206 +++++++++++++++++- pages/newDataAnalysis/proQualityAnalysis.html | 23 +- 2 files changed, 216 insertions(+), 13 deletions(-) diff --git a/js/pages/newDataAnalysis/proQualityAnalysis.js b/js/pages/newDataAnalysis/proQualityAnalysis.js index 8965a32..ca4a8e7 100644 --- a/js/pages/newDataAnalysis/proQualityAnalysis.js +++ b/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' }); - $('#right-box').css({ 'display': 'none' }); + $('#no-data-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%' }, // 添加序号列 - { field: 'projectName', title: '工程名称', align: 'center', width: '15%' }, - { field: 'projectNumber', title: '工程编号', align: 'center', width: '15%' }, - { field: 'projectAddress', title: '项目地址', align: 'center', width: '15%' }, - { field: 'contractorName', title: '合同编号', align: 'center', width: '15%' }, - { field: 'qualityLevel', title: '质量等级', align: 'center', width: '15%' }, - { field: 'isContract', title: '是否签订合同', align: 'center', width: '15%' }, + {type: 'numbers', title: '序号', width: '10%'}, // 添加序号列 + {field: 'projectName', title: '工程名称', align: 'center'}, + // { field: 'projectNumber', title: '工程编号', align: 'center'}, + // { field: 'projectAddress', title: '项目地址', align: 'center'}, + // { field: 'contractorName', title: '承包商名称', align: 'center',}, + // { field: 'qualityLevel', title: '质量等级', align: 'center'}, + {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 ` + + `; + } + } ]; } } -} \ No newline at end of file +} + + +// 初始化 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 + '
' + + 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(); + }); +} diff --git a/pages/newDataAnalysis/proQualityAnalysis.html b/pages/newDataAnalysis/proQualityAnalysis.html index e2ae75f..5e193a2 100644 --- a/pages/newDataAnalysis/proQualityAnalysis.html +++ b/pages/newDataAnalysis/proQualityAnalysis.html @@ -14,7 +14,7 @@ - + @@ -28,7 +28,15 @@ // watermark.load({ watermark_txt: text }); -
+
+
+
+ +
+
+ +
+