项目管理优化
This commit is contained in:
BianLzhaoMin
parent
2091d68715
commit
ef05e1f05c
|
|
@ -66,3 +66,12 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
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 tableData = [];
|
||||||
let barData = [];
|
let barData = [];
|
||||||
let barData_1 = [];
|
let barData_1 = [];
|
||||||
|
let barData_2 = [];
|
||||||
|
|
||||||
// 将setCols函数提取到外部，使其可以被全局访问
|
// 将setCols函数提取到外部，使其可以被全局访问
|
||||||
function setCols(type) {
|
function setCols(type) {
|
||||||
|
|
@ -224,9 +225,29 @@ function setCols(type) {
|
||||||
align: "center",
|
align: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: "riskLevel",
|
|
||||||
title: "风险等级",
|
title: "风险等级",
|
||||||
align: "center",
|
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",
|
field: "suggestion",
|
||||||
|
|
@ -249,6 +270,24 @@ function setCols(type) {
|
||||||
return []; // 默认返回空数组
|
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 () {
|
layui.use(["layer", "table", "form"], function () {
|
||||||
layer = layui.layer;
|
layer = layui.layer;
|
||||||
table = layui.table;
|
table = layui.table;
|
||||||
|
|
@ -342,64 +381,148 @@ function initTable(type, bidCode) {
|
||||||
return item.actualCost;
|
return item.actualCost;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
barData_2 = tableData.map((item) => {
|
||||||
|
return item.riskLevel;
|
||||||
|
});
|
||||||
|
|
||||||
if (res.code !== 200 || !res.rows || res.rows.length === 0) {
|
if (res.code !== 200 || !res.rows || res.rows.length === 0) {
|
||||||
layer.msg("暂无数据", { icon: 2 });
|
layer.msg("暂无数据", { icon: 2 });
|
||||||
}
|
}
|
||||||
|
|
||||||
// 查看按钮点击
|
// 查看按钮点击;
|
||||||
// $(".layui-table-body table.layui-table tbody tr #viewBtn").on(
|
$(".layui-table-body table.layui-table tbody tr #riskLevel").on(
|
||||||
// "click",
|
"click",
|
||||||
// function () {
|
function () {
|
||||||
// const index = $(this).closest("tr").data("index");
|
const index = $(this).closest("tr").data("index");
|
||||||
// console.log(index, "index");
|
console.log(index, "index");
|
||||||
// var rowData = res.rows[index]; // 获取对应行的数据
|
var rowData = res.rows[index]; // 获取对应行的数据
|
||||||
|
|
||||||
// // 弹框配置
|
// 弹框配置
|
||||||
// layer.open({
|
layer.open({
|
||||||
// type: 1,
|
type: 1,
|
||||||
// title: "分析查看",
|
title: "风险详情",
|
||||||
// content:
|
content: "<div id='risk-detail-table'></div>",
|
||||||
// "<div id='oneEcharts' style='width:100%;height:100%;display: flex;flex-direction: column;justify-content: space-around;'>" +
|
area: ["800px", "400px"],
|
||||||
// "<div style='font-size: 16px; padding: 20px;'>延误原因：" +
|
shade: 0.3, // 遮罩透明度
|
||||||
// rowData.delayActor +
|
skin: "custom-layer-style", // 自定义皮肤
|
||||||
// "</div>" +
|
success: function (layero, index) {
|
||||||
// "<div style='font-size: 16px; padding: 20px;'>其他原因：" +
|
// 修改弹框背景颜色
|
||||||
// data1[index] +
|
$(layero).css(
|
||||||
// "</div>" +
|
"background",
|
||||||
// "<div style='font-size: 16px; padding: 20px;'>分析结果：" +
|
"rgba(13, 34, 37, 0.9)"
|
||||||
// data2[index] +
|
); // 半透明黑色背景
|
||||||
// "</div>" +
|
$(layero).find(".layui-layer-title").css({
|
||||||
// "</div>",
|
fontSize: "18px",
|
||||||
// area: ["600px", "300px"],
|
color: "#fff", // 标题文字颜色
|
||||||
// shade: 0.3, // 遮罩透明度
|
background: "transparent", // 标题背景透明
|
||||||
// skin: "custom-layer-style", // 自定义皮肤
|
"border-bottom":
|
||||||
// success: function (layero, index) {
|
"1px solid rgba(255, 255, 255, 0.2)", // 标题底部边框
|
||||||
// // 修改弹框背景颜色
|
});
|
||||||
// $(layero).css(
|
$(layero).find(".layui-layer-content").css({
|
||||||
// "background",
|
background: "transparent", // 内容区域透明
|
||||||
// "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)
|
$(layero)
|
||||||
// .find(".layui-layer-setwin .layui-layer-close")
|
.find(".layui-layer-setwin .layui-layer-close")
|
||||||
// .css({
|
.css({
|
||||||
// color: "#fff", // 文字颜色
|
color: "#fff", // 文字颜色
|
||||||
// "border-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(
|
$(".layui-table-body table.layui-table tbody tr #exportBtn").on(
|
||||||
"click",
|
"click",
|
||||||
|
|
@ -465,12 +588,13 @@ $(".chart-view").click(function () {
|
||||||
|
|
||||||
initLineChart();
|
initLineChart();
|
||||||
initPieChart();
|
initPieChart();
|
||||||
|
initBottomPieChart();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 初始化左侧双折线图
|
// 初始化左侧双折线图
|
||||||
function initLineChart() {
|
function initLineChart() {
|
||||||
const leftChart = echarts.init(document.getElementById("left-chart"));
|
const leftChart = echarts.init(document.getElementById("left-chart"));
|
||||||
const bottomChart = echarts.init(document.getElementById("bottom-chart"));
|
//
|
||||||
|
|
||||||
const option = {
|
const option = {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
|
|
@ -547,7 +671,7 @@ function initLineChart() {
|
||||||
};
|
};
|
||||||
|
|
||||||
leftChart.setOption(option);
|
leftChart.setOption(option);
|
||||||
bottomChart.setOption(option);
|
// bottomChart.setOption(option);
|
||||||
|
|
||||||
// 响应式调整
|
// 响应式调整
|
||||||
window.addEventListener("resize", function () {
|
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() {
|
function getChartData() {
|
||||||
const url = commonUrl + "screen/largeScreen/tb_project_new/list4progress";
|
const url = commonUrl + "screen/largeScreen/tb_project_new/list4progress";
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue