项目管理优化
This commit is contained in:
BianLzhaoMin
parent
2091d68715
commit
ef05e1f05c
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 +=
|
||||
'<a style="color:rgb(226, 154, 11);font-size: 16px">' +
|
||||
d.riskLevel +
|
||||
"级" +
|
||||
"</a>";
|
||||
return text;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "风险数量",
|
||||
align: "center",
|
||||
templet: (d) => {
|
||||
let text = "";
|
||||
text +=
|
||||
'<a id="riskLevel" style="color: #007bff;cursor: pointer;font-size: 16px">' +
|
||||
d.riskSize +
|
||||
"</a>";
|
||||
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:
|
||||
// "<div id='oneEcharts' style='width:100%;height:100%;display: flex;flex-direction: column;justify-content: space-around;'>" +
|
||||
// "<div style='font-size: 16px; padding: 20px;'>延误原因：" +
|
||||
// rowData.delayActor +
|
||||
// "</div>" +
|
||||
// "<div style='font-size: 16px; padding: 20px;'>其他原因：" +
|
||||
// data1[index] +
|
||||
// "</div>" +
|
||||
// "<div style='font-size: 16px; padding: 20px;'>分析结果：" +
|
||||
// data2[index] +
|
||||
// "</div>" +
|
||||
// "</div>",
|
||||
// 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: "<div id='risk-detail-table'></div>",
|
||||
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(
|
||||
'<div class="layui-nodata">暂无风险详情数据</div>'
|
||||
);
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
$("#risk-detail-table").html(
|
||||
'<div class="layui-nodata">数据加载失败，请稍后重试</div>'
|
||||
);
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
$(".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}<br/>风险等级: {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";
|
||||
|
|
|
|||
Loading…
Reference in New Issue