diff --git a/css/newDataAnalysis/projectProgress.css b/css/newDataAnalysis/projectProgress.css index 637591e..5c671b1 100644 --- a/css/newDataAnalysis/projectProgress.css +++ b/css/newDataAnalysis/projectProgress.css @@ -66,3 +66,12 @@ overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } + +.layui-table[lay-even] tbody tr:nth-child(even) { + background-color: transparent !important; +} + +/* 如果需要同时去除鼠标悬停效果 */ +.layui-table tbody tr:hover { + background-color: transparent !important; +} diff --git a/js/pages/newDataAnalysis/projectManagement.js b/js/pages/newDataAnalysis/projectManagement.js index 5ae98f7..10477b8 100644 --- a/js/pages/newDataAnalysis/projectManagement.js +++ b/js/pages/newDataAnalysis/projectManagement.js @@ -182,6 +182,7 @@ let pieData_1 = []; let tableData = []; let barData = []; let barData_1 = []; +let barData_2 = []; // 将setCols函数提取到外部，使其可以被全局访问 function setCols(type) { @@ -224,9 +225,29 @@ function setCols(type) { align: "center", }, { - field: "riskLevel", title: "风险等级", align: "center", + templet: (d) => { + let text = ""; + text += + '' + + d.riskLevel + + "级" + + ""; + return text; + }, + }, + { + title: "风险数量", + align: "center", + templet: (d) => { + let text = ""; + text += + '' + + d.riskSize + + ""; + return text; + }, }, { field: "suggestion", @@ -249,6 +270,24 @@ function setCols(type) { return []; // 默认返回空数组 } +function setCols2(type) { + if (type === 1) { + return [ + { type: "numbers", title: "序号", width: "10%" }, // 添加序号列 + { + field: "proPart", + title: "工程部位", + align: "center", + }, + { + field: "riskDesc", + title: "风险描述", + align: "center", + }, + ]; + } +} + layui.use(["layer", "table", "form"], function () { layer = layui.layer; table = layui.table; @@ -342,64 +381,148 @@ function initTable(type, bidCode) { return item.actualCost; }); + barData_2 = tableData.map((item) => { + return item.riskLevel; + }); + if (res.code !== 200 || !res.rows || res.rows.length === 0) { layer.msg("暂无数据", { icon: 2 }); } - // 查看按钮点击 - // $(".layui-table-body table.layui-table tbody tr #viewBtn").on( - // "click", - // function () { - // const index = $(this).closest("tr").data("index"); - // console.log(index, "index"); - // var rowData = res.rows[index]; // 获取对应行的数据 + // 查看按钮点击; + $(".layui-table-body table.layui-table tbody tr #riskLevel").on( + "click", + function () { + const index = $(this).closest("tr").data("index"); + console.log(index, "index"); + var rowData = res.rows[index]; // 获取对应行的数据 - // // 弹框配置 - // layer.open({ - // type: 1, - // title: "分析查看", - // content: - // "
" + - // "
延误原因：" + - // rowData.delayActor + - // "
" + - // "
其他原因：" + - // data1[index] + - // "
" + - // "
分析结果：" + - // data2[index] + - // "
" + - // "
", - // area: ["600px", "300px"], - // 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({ - // fontSize: "18px", - // color: "#fff", // 标题文字颜色 - // background: "transparent", // 标题背景透明 - // "border-bottom": - // "1px solid rgba(255, 255, 255, 0.2)", // 标题底部边框 - // }); - // $(layero).find(".layui-layer-content").css({ - // background: "transparent", // 内容区域透明 - // }); + // 弹框配置 + layer.open({ + type: 1, + title: "风险详情", + content: "
", + area: ["800px", "400px"], + 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({ + fontSize: "18px", + 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", // 边框颜色（如果按钮有边框） - // }); - // }, - // }); - // } - // ); + $(layero) + .find(".layui-layer-setwin .layui-layer-close") + .css({ + color: "#fff", // 文字颜色 + "border-color": "#fff", // 边框颜色（如果按钮有边框） + }); + + // table.render({ + // elem: "#table-box", + // url: + // commonUrl + + // "screen/largeScreen/tb_project_new/listRiskDetail", + // skin: "line", + // page: true, + // height: "full-100", + // headers: { + // decrypt: "decrypt", + // Authorization: token, + // }, + // where: { + // bidCode: bidCode, + // type: type, + // proId: rowData.proId, + // }, + // response: { + // statusName: "code", + // statusCode: 200, + // countName: "count", + // dataName: "rows", + // }, + // cols: [setCols2(type)], + // }); + + $.ajax({ + url: + commonUrl + + "screen/largeScreen/tb_project_new/listRiskDetail", + type: "GET", + headers: { + decrypt: "decrypt", + Authorization: token, + }, + data: { + bidCode: bidCode, + type: type, + proId: rowData.proId, + }, + success: function (res) { + console.log(res, "res"); + + if (res.code === 200 && res.rows) { + // 渲染表格 + table.render({ + elem: "#risk-detail-table", + data: res.rows, + skin: "line", + even: true, + page: false, + cols: [ + [ + { + field: "number", + title: "序号", + width: 100, + }, + { + field: "proPart", + title: "工程部位", + align: "center", + }, + { + field: "riskDesc", + title: "风险描述", + align: "center", + }, + ], + ], + done: function () { + // 确保表格渲染后可见 + this.elem.next().show(); + $(this.elem).removeAttr( + "lay-even" + ); + }, + }); + } else { + $("#risk-detail-table").html( + '
暂无风险详情数据
' + ); + } + }, + error: function () { + $("#risk-detail-table").html( + '
数据加载失败，请稍后重试
' + ); + }, + }); + }, + }); + } + ); $(".layui-table-body table.layui-table tbody tr #exportBtn").on( "click", @@ -465,12 +588,13 @@ $(".chart-view").click(function () { initLineChart(); initPieChart(); + initBottomPieChart(); }); // 初始化左侧双折线图 function initLineChart() { const leftChart = echarts.init(document.getElementById("left-chart")); - const bottomChart = echarts.init(document.getElementById("bottom-chart")); + // const option = { textStyle: { @@ -547,7 +671,7 @@ function initLineChart() { }; leftChart.setOption(option); - bottomChart.setOption(option); + // bottomChart.setOption(option); // 响应式调整 window.addEventListener("resize", function () { @@ -653,6 +777,150 @@ function initPieChart() { }); } +// 初始化底部饼图 +function initBottomPieChart() { + const bottomChart = echarts.init(document.getElementById("bottom-chart")); + + // 定义一组更现代化的颜色方案 + const colorPalette = [ + "#4E79A7", + "#F28E2B", + "#E15759", + "#76B7B2", + "#59A14F", + "#EDC948", + "#B07AA1", + "#FF9DA7", + ]; + + const option = { + title: { + text: "项目风险等级分布", // 修改标题以反映显示的是等级 + left: "center", + textStyle: { + color: "#fff", + fontSize: 18, + fontWeight: "bold", + }, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + formatter: "项目: {b}
风险等级: {c}", + }, + grid: { + left: "12%", + right: "12%", + bottom: "15%", + top: "25%", + containLabel: true, + }, + xAxis: { + type: "category", + data: barData, // ['项目A','项目B'] + axisLabel: { + color: "#fff", + fontSize: 12, + interval: 0, // 强制显示所有标签 + rotate: barData.length > 5 ? 30 : 0, // 如果项目多就旋转标签 + }, + axisLine: { + lineStyle: { + color: "rgba(255, 255, 255, 0.8)", + width: 2, + }, + }, + axisTick: { + alignWithLabel: true, + lineStyle: { + color: "rgba(255, 255, 255, 0.6)", + }, + }, + }, + yAxis: { + type: "value", + name: "风险等级", + nameTextStyle: { + color: "#fff", + fontSize: 14, + padding: [0, 0, 0, 40], // 调整名称位置 + }, + min: 0, + max: 10, // 假设风险等级最高为10 + interval: 1, // 固定间隔为1 + axisLabel: { + color: "#fff", + fontSize: 12, + formatter: function (value) { + return value + "级"; // 显示为1级、2级等 + }, + }, + axisLine: { + show: true, + lineStyle: { + color: "rgba(255, 255, 255, 0.8)", + width: 2, + }, + }, + splitLine: { + lineStyle: { + color: "rgba(255, 255, 255, 0.15)", + type: "dashed", + }, + }, + }, + series: [ + { + name: "风险等级", + type: "bar", + barWidth: "60%", // 加宽柱子 + data: barData_2, // [3,6] + itemStyle: { + color: function (params) { + // 根据风险等级设置颜色，等级越高颜色越深 + const riskLevel = barData_2[params.dataIndex]; + if (riskLevel <= 3) return "#5B8FF9"; // 低风险 + if (riskLevel <= 6) return "#F6BD16"; // 中风险 + return "#E86452"; // 高风险 + }, + borderRadius: [6, 6, 0, 0], + shadowColor: "rgba(0, 0, 0, 0.3)", + shadowBlur: 5, + shadowOffsetY: 3, + }, + label: { + show: true, + position: "top", + color: "#fff", + fontWeight: "bold", + formatter: function (params) { + return params.value + "级"; // 显示为3级、6级等 + }, + }, + // 添加渐变色效果 + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: "rgba(0, 0, 0, 0.5)", + }, + }, + }, + ], + // 添加背景色 + backgroundColor: "rgba(10, 20, 40, 0.7)", + }; + + bottomChart.setOption(option); + + // 响应式调整 + window.addEventListener("resize", function () { + bottomChart.resize(); + }); +} + // 获取图表数据 function getChartData() { const url = commonUrl + "screen/largeScreen/tb_project_new/list4progress";