diff --git a/js/pages/newDataAnalysis/proQualityAnalysis.js b/js/pages/newDataAnalysis/proQualityAnalysis.js index ca4a8e7..4b84587 100644 --- a/js/pages/newDataAnalysis/proQualityAnalysis.js +++ b/js/pages/newDataAnalysis/proQualityAnalysis.js @@ -1,125 +1,213 @@ let table, layer, form; -let myChart = null, myChart2 = null; -layui.use(['layer', 'table', 'form'], function () { +let myChart = null, + myChart2 = null; +layui.use(["layer", "table", "form"], function () { layer = layui.layer; table = layui.table; form = layui.form; // 响应成功后的拦截器 $.ajaxSetup({ beforeSend: function (xhr, options) { - var originalSuccess = options.success + 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()); + originalSuccess.apply(this, arguments); + }; + }, + }); + initTable(1, parent.$("#bidPro").val()); }); /* 切换数据 */ function changeData(that, type) { - const bidCode = parent.$('#bidPro').val(); + 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'); + 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'}); + $("#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/dataAnalysis/getEngqualityAnalysis"; + const url = + commonUrl + "screen/largeScreen/dataAnalysis/getEngqualityAnalysis"; table.render({ - elem: '#demo2', + elem: "#demo2", url: url, - skin: 'line', + skin: "line", page: true, - height: 'full-100', + height: "full-100", headers: { - "decrypt": "decrypt", - "Authorization": token + decrypt: "decrypt", + Authorization: token, }, where: { bidCode: bidCode, - type: type + type: type, }, 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'); + 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); + $(this) + .find('td[data-field="LAY_TABLE_INDEX"]') + .text(index + 1); }); }, done: function (res, curr, count, origin) { if (res.data && res.data.length > 0) { initEcharts(res.data); } - } - }) + + // $(".layui-table-body table.layui-table tbody tr").on( + // "click", + // function () { + // // 获取当前行的数据 + // var index = $(this).index(); + // var rowData = res.data[index]; // 获取对应行的数据 + + // const passRate = rowData.passRate || 0; + // const noPassRate = rowData.noPassRate || 0; + // // initEchartsOne(passRate, noPassRate); + + // // 增加一个 400 * 400 的弹框把饼图放进去 并修改弹框背景样式为透明 + // layer.open({ + // type: 1, + // title: "合格率对比", + // content: "
", + // area: ["600px", "600px"], + // }); + // initEchartsOne(passRate, noPassRate); + // } + // ); + + $(".layui-table-body table.layui-table tbody tr").on( + "click", + function () { + // 获取当前行的数据 + var index = $(this).index(); + var rowData = res.data[index]; // 获取对应行的数据 + + const passRate = rowData.passRate || 0; + const noPassRate = rowData.noPassRate || 0; + + // 弹框配置 + layer.open({ + type: 1, + title: "合格率对比", + content: + "
", + area: ["600px", "600px"], + shade: 0.3, // 遮罩透明度 + skin: "custom-layer-style", // 自定义皮肤 + success: function (layero, index) { + // 修改弹框背景颜色 + $(layero).css( + "background", + "rgba(13, 34, 37, 0.9)" + ); // 半透明黑色背景 + $(layero).find(".layui-layer-title").css({ + color: "#fff", // 标题文字颜色 + background: "transparent", // 标题背景透明 + "border-bottom": + "1px solid rgba(255, 255, 255, 0.2)", // 标题底部边框 + }); + $(layero).find(".layui-layer-content").css({ + background: "transparent", // 内容区域透明 + }); + + $(layero) + .find(".layui-layer-setwin .layui-layer-close") + .css({ + color: "#fff", // 文字颜色 + "border-color": "#fff", // 边框颜色（如果按钮有边框） + }); + + // 重新渲染 ECharts（因为 DOM 刚被创建） + setTimeout(() => { + initEchartsOne(passRate, noPassRate); + }, 100); + }, + }); + } + ); + }, + }); function setCols(type) { - if (type === 1) { // 工程质量分析 + if (type === 1) { + // 工程质量分析 return [ - {type: 'numbers', title: '序号', width: '10%'}, // 添加序号列 - {field: 'projectName', title: '工程名称', align: 'center'}, + { 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'}, + { 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" }, { - title: '操作', align: 'center', templet: function (row) { + field: "unqualifiedItems", + title: "不合格原因", + align: "center", + }, + { + title: "操作", + align: "center", + templet: function (row) { // 注意：Layui 的 templet 函数参数是 row，即当前行数据 return ` `; - } - } + }, + }, ]; } } } - // 初始化 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]); + + myChart2 = echarts.init(document.getElementById("rightLineBox")); + initEchartsTwo(data); } -function initEchartsOne(data) { +function initEchartsOne(passRate, noPassRate) { // 从传入的数据中提取 passRate 和 noPassRate，并转为数字 - const passRate = parseFloat(data.passRate); - const noPassRate = parseFloat(data.noPassRate); + // const passRate = parseFloat(pieData.passRate); + // const noPassRate = parseFloat(pieData.noPassRate); + myChart = echarts.init(document.getElementById("oneEcharts")); + + console.log(passRate, noPassRate, "passRate, noPassRate"); const option = { grid: { @@ -129,39 +217,45 @@ function initEchartsOne(data) { right: 0, }, title: { - text: data.team || "合格率对比", + text: "合格率对比", x: "center", + textStyle: { + color: "#fff", + }, }, tooltip: { trigger: "item", - formatter: "{b}: {c}%" + formatter: "{b}: {c}%", }, legend: { show: true, - data: ['合格率', '不合格率'], - bottom: 10 + data: ["合格率", "不合格率"], + bottom: 10, + textStyle: { + color: "#fff", + }, }, series: [ { name: "合格率分析", type: "pie", - radius: "65%", + radius: "50%", center: ["50%", "50%"], label: { show: true, - formatter: "{b}: {c}%" + formatter: "{b}: {c}%", }, data: [ - { value: passRate, name: "合格率" }, - { value: noPassRate, name: "不合格率" } + { value: parseFloat(passRate), name: "合格率" }, + { value: parseFloat(noPassRate), name: "不合格率" }, ], itemStyle: { borderRadius: 5, - borderColor: '#fff', - borderWidth: 2 - } - } - ] + borderColor: "#fff", + borderWidth: 2, + }, + }, + ], }; // 设置图表（假设你已定义 myChart2） myChart.setOption(option, true); @@ -171,98 +265,104 @@ function initEchartsOne(data) { } function initEchartsTwo(data) { - const teams = data.map(item => item.team); - const scores = data.map(item => item.score); + const teams = data.map((item) => item.team); + const scores = data.map((item) => item.score); const option = { title: { - text: '队伍得分柱状图', - left: 'center', + text: "队伍得分柱状图", + left: "center", textStyle: { - color: '#fff' - } + color: "#fff", + }, }, tooltip: { - trigger: 'axis', + trigger: "axis", axisPointer: { - type: 'none' // 移除鼠标悬停时的阴影效果 + type: "none", // 移除鼠标悬停时的阴影效果 }, - formatter: function(params) { + formatter: function (params) { // 自定义tooltip显示内容，移除了百分号 - return params[0].name + '
' + - params[0].seriesName + ': ' + - params[0].value; - } + return ( + params[0].name + + "
" + + params[0].seriesName + + ": " + + params[0].value + ); + }, }, grid: { - left: '10%', - right: '10%', - bottom: '20%', - top: '20%', - containLabel: true + left: "10%", + right: "10%", + bottom: "20%", + top: "20%", + containLabel: true, }, xAxis: { - type: 'category', + type: "category", data: teams, axisLabel: { - color: '#fff', + color: "#fff", interval: 0, - formatter: function(value) { + formatter: function (value) { // 每4个字符换行 - return value.match(/.{1,4}/g).join('\n'); - } + return value.match(/.{1,4}/g).join("\n"); + }, }, axisLine: { lineStyle: { - color: '#fff' - } - } + color: "#fff", + }, + }, }, yAxis: { - type: 'value', - name: '得分', + type: "value", + name: "得分", min: 0, max: 100, interval: 10, axisLabel: { - color: '#fff', - formatter: function(value) { + color: "#fff", + formatter: function (value) { return value; // 确保y轴标签也不显示百分号 - } + }, }, axisLine: { lineStyle: { - color: '#fff' - } + 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; - } + color: "rgba(255,255,255,0.1)", + }, }, - itemStyle: { - color: '#409EFF' - } - }] + }, + 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 () { + window.addEventListener("resize", function () { myChart2.resize(); }); } diff --git a/pages/newDataAnalysis/proQualityAnalysis.html b/pages/newDataAnalysis/proQualityAnalysis.html index 5e193a2..895684f 100644 --- a/pages/newDataAnalysis/proQualityAnalysis.html +++ b/pages/newDataAnalysis/proQualityAnalysis.html @@ -8,8 +8,8 @@ - - + + @@ -24,39 +24,64 @@ 工程质量分析 + -
-
-
+
+ + +
+
+
+ +
+ +
+ +
+ + -
-
-
-
- + \ No newline at end of file