项目管理等级优化

This commit is contained in:
BianLzhaoMin 2025-07-24 23:20:45 +08:00
parent 87e2a38530
commit a484709bc3
2 changed files with 432 additions and 106 deletions

View File

@ -184,6 +184,11 @@ let barData = [];
let barData_1 = [];
let barData_2 = [];
let lineData = [];
let lineData_1 = [];
let lineData_2 = [];
let bottomData = [];
// 将setCols函数提取到外部使其可以被全局访问
function setCols(type) {
if (type === 1) {
@ -214,16 +219,16 @@ function setCols(type) {
title: "偏差天数",
align: "center",
},
{
field: "planCost",
title: "成本预算",
align: "center",
},
{
field: "actualCost",
title: "实际成本",
align: "center",
},
// {
// field: "planCost",
// title: "成本预算",
// align: "center",
// },
// {
// field: "actualCost",
// title: "实际成本",
// align: "center",
// },
// {
// title: "风险等级",
// align: "center",
@ -293,7 +298,7 @@ layui.use(["layer", "table", "form"], function () {
table = layui.table;
form = layui.form;
currentBidCode = parent.$("#bidPro").val();
currentBidCode = parent.parent.$("#bidPro").val();
initTable(currentType, currentBidCode);
$.ajaxSetup({
@ -309,7 +314,7 @@ layui.use(["layer", "table", "form"], function () {
function changeData(that, type) {
currentType = type;
currentBidCode = parent.$("#bidPro").val();
currentBidCode = parent.parent.$("#bidPro").val();
$(".ul-box li").each(function () {
if ($(this).hasClass("check")) {
@ -682,97 +687,182 @@ function initLineChart() {
// 初始化右侧饼图
function initPieChart() {
const rightChart = echarts.init(document.getElementById("right-chart"));
// const rightChart = echarts.init(document.getElementById("right-chart"));
// const barData = {
// projects: ["项目A", "项目B"],
// costs: [120000, 180000],
// // const barData = {
// // projects: ["项目A", "项目B"],
// // costs: [120000, 180000],
// // };
// const option = {
// title: {
// text: "项目成本对比",
// left: "center",
// textStyle: {
// color: "#fff",
// fontSize: 18,
// },
// },
// tooltip: {
// trigger: "axis",
// axisPointer: {
// type: "shadow",
// },
// formatter: "项目: {b}<br/>成本: {c} 元",
// },
// grid: {
// left: "10%",
// right: "10%",
// bottom: "15%",
// top: "20%",
// containLabel: true,
// },
// xAxis: {
// type: "category",
// data: barData,
// axisLabel: {
// color: "#fff",
// fontSize: 12,
// interval: 0, // 强制显示所有标签
// rotate: barData.length > 5 ? 30 : 0, // 如果项目多就旋转标签
// },
// axisLine: {
// lineStyle: {
// color: "#fff", // x轴线颜色设为白色
// },
// },
// },
// yAxis: {
// type: "value",
// name: "成本金额(元)",
// nameTextStyle: {
// color: "#fff", // y轴名称颜色设为白色
// },
// axisLabel: {
// color: "#fff", // y轴文字颜色设为白色
// fontSize: 12,
// },
// axisLine: {
// lineStyle: {
// color: "#fff", // y轴线颜色设为白色
// },
// },
// splitLine: {
// lineStyle: {
// color: "rgba(255, 255, 255, 0.2)", // 网格线颜色设为半透明白色
// },
// },
// },
// series: [
// {
// name: "成本金额",
// type: "bar",
// barWidth: "40%",
// data: barData_1,
// itemStyle: {
// color: function (params) {
// // 自定义柱状颜色
// const colorList = ["#409EFF", "#67C23A"];
// return colorList[params.dataIndex];
// },
// borderRadius: [5, 5, 0, 0], // 柱子上部圆角
// },
// label: {
// show: true,
// position: "top",
// color: "#fff", // 柱顶文字颜色
// formatter: "{c} 元",
// },
// },
// ],
// };
// rightChart.setOption(option);
// // 响应式调整
// window.addEventListener("resize", function () {
// rightChart.resize();
// });
const rightChart = echarts.init(document.getElementById("right-chart"));
//
const option = {
textStyle: {
color: "#fff",
},
title: {
text: "项目成本对比",
left: "center",
text: "项目成本趋势",
textStyle: {
color: "#fff",
fontSize: 18,
// 标题文字样式
color: "#fff", // 标题颜色
fontSize: 18, // 可以同时设置其他样式
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
legend: {
show: true,
data: ["计划成本", "实际成本"],
textStyle: {
// 图例文字样式
color: "#fff", // 图例文字颜色
},
itemStyle: {
color: "auto",
},
formatter: "项目: {b}<br/>成本: {c} 元",
},
grid: {
left: "10%",
right: "10%",
bottom: "15%",
top: "20%",
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
data: barData,
axisLabel: {
color: "#fff",
fontSize: 12,
interval: 0, // 强制显示所有标签
rotate: barData.length > 5 ? 30 : 0, // 如果项目多就旋转标签
},
axisLine: {
lineStyle: {
color: "#fff", // x轴线颜色设为白色
},
},
boundaryGap: false,
data: lineData,
},
yAxis: {
type: "value",
name: "成本金额(元)",
nameTextStyle: {
color: "#fff", // y轴名称颜色设为白色
},
axisLabel: {
color: "#fff", // y轴文字颜色设为白色
fontSize: 12,
},
axisLine: {
lineStyle: {
color: "#fff", // y轴线颜色设为白色
},
},
splitLine: {
lineStyle: {
color: "rgba(255, 255, 255, 0.2)", // 网格线颜色设为半透明白色
},
},
name: "成本%",
},
series: [
{
name: "成本金额",
type: "bar",
barWidth: "40%",
data: barData_1,
name: "计划成本",
type: "line",
data: lineData_1,
smooth: false,
lineStyle: {
color: "#5470C6",
width: 2,
},
itemStyle: {
color: function (params) {
// 自定义柱状颜色
const colorList = ["#409EFF", "#67C23A"];
return colorList[params.dataIndex];
},
borderRadius: [5, 5, 0, 0], // 柱子上部圆角
color: "#5470C6",
borderWidth: 0, // 去除白色边框
},
label: {
show: true,
position: "top",
color: "#fff", // 柱顶文字颜色
formatter: "{c} 元",
symbolSize: 8, // 可以调整小圆点的大小
},
{
name: "实际成本",
type: "line",
data: lineData_2,
smooth: false,
lineStyle: {
color: "#FF0000",
width: 2,
},
itemStyle: {
color: "#FF0000",
borderWidth: 0, // 去除白色边框
},
symbolSize: 8, // 可以调整小圆点的大小
},
],
};
rightChart.setOption(option);
// bottomChart.setOption(option);
// 响应式调整
window.addEventListener("resize", function () {
@ -796,9 +886,153 @@ function initBottomPieChart() {
"#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], // 调整名称位置
// },
// 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();
// });
const groupedData = bottomData.reduce((acc, item) => {
if (!acc[item.month]) {
acc[item.month] = [];
}
acc[item.month].push({
level: item.level,
count: parseInt(item.count),
});
return acc;
}, {});
// 转换为需要的格式
const months = Object.keys(groupedData);
const level2Data = [];
const level3Data = [];
const level4Data = [];
months.forEach((month) => {
const monthData = groupedData[month];
monthData.forEach((item) => {
if (item.level === "2") level2Data.push(item.count);
if (item.level === "3") level3Data.push(item.count);
if (item.level === "4") level4Data.push(item.count);
});
});
const option = {
title: {
text: "项目风险等级分布", // 修改标题以反映显示的是等级
text: "各月份风险等级数量统计",
left: "center",
textStyle: {
color: "#fff",
@ -811,7 +1045,20 @@ function initBottomPieChart() {
axisPointer: {
type: "shadow",
},
formatter: "项目: {b}<br/>风险等级: {c}",
formatter: function (params) {
let result = params[0].axisValue + "<br/>";
params.forEach((param) => {
result += `${param.seriesName}: ${param.value}个<br/>`;
});
return result;
},
},
legend: {
data: ["二级风险", "三级风险", "四级风险"],
textStyle: {
color: "#fff",
},
top: "5%",
},
grid: {
left: "12%",
@ -822,12 +1069,12 @@ function initBottomPieChart() {
},
xAxis: {
type: "category",
data: barData, // ['项目A','项目B']
data: months, // 月份数据
axisLabel: {
color: "#fff",
fontSize: 12,
interval: 0, // 强制显示所有标签
rotate: barData.length > 5 ? 30 : 0, // 如果项目多就旋转标签
interval: 0,
rotate: months.length > 5 ? 30 : 0,
},
axisLine: {
lineStyle: {
@ -844,21 +1091,11 @@ function initBottomPieChart() {
},
yAxis: {
type: "value",
name: "风险等级",
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级等
},
padding: [0, 0, 0, 40],
},
axisLine: {
show: true,
@ -876,18 +1113,13 @@ function initBottomPieChart() {
},
series: [
{
name: "风险等级",
name: "二级风险",
type: "bar",
barWidth: "60%", // 加宽柱子
data: barData_2, // [3,6]
barWidth: "20%",
barGap: "10%",
data: level2Data,
itemStyle: {
color: function (params) {
// 根据风险等级设置颜色,等级越高颜色越深
const riskLevel = barData_2[params.dataIndex];
if (riskLevel <= 3) return "#5B8FF9"; // 低风险
if (riskLevel <= 6) return "#F6BD16"; // 中风险
return "#E86452"; // 高风险
},
color: "#5B8FF9", // 蓝色表示低风险
borderRadius: [6, 6, 0, 0],
shadowColor: "rgba(0, 0, 0, 0.3)",
shadowBlur: 5,
@ -898,11 +1130,59 @@ function initBottomPieChart() {
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)",
},
},
// 添加渐变色效果
},
{
name: "三级风险",
type: "bar",
barWidth: "20%",
data: level3Data,
itemStyle: {
color: "#F6BD16", // 黄色表示中风险
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",
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
{
name: "四级风险",
type: "bar",
barWidth: "20%",
data: level4Data,
itemStyle: {
color: "#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",
},
emphasis: {
itemStyle: {
shadowBlur: 10,
@ -912,13 +1192,12 @@ function initBottomPieChart() {
},
},
],
// 添加背景色
backgroundColor: "rgba(10, 20, 40, 0.7)",
};
bottomChart.setOption(option);
// 响应式调整
// // 响应式调整
window.addEventListener("resize", function () {
bottomChart.resize();
});
@ -970,6 +1249,53 @@ function getChartData() {
}
},
});
const url3 = commonUrl + "screen/largeScreen/tb_project_new/list4cost";
$.ajax({
url: url3,
type: "get",
headers: {
authorization: sessionStorage.getItem("zhgd_token"),
},
success: function (data) {
console.log(data, "右侧图表数据---");
if (data.rows && data.rows.length > 0) {
const result = data.rows;
result.forEach((item) => {
lineData.push(item.month);
lineData_1.push(item.monthProgress || 0);
lineData_2.push(item.monthProgress2 || 0);
});
}
},
});
const url4 = commonUrl + "screen/largeScreen/tb_project_new/list4level";
$.ajax({
url: url4,
type: "get",
headers: {
authorization: sessionStorage.getItem("zhgd_token"),
},
success: function (data) {
console.log(data, "底部图表数据---");
bottomData = data.rows;
// if (data.rows && data.rows.length > 0) {
// const result = data.rows;
// result.forEach((item) => {
// lineData.push(item.month);
// lineData_1.push(item.monthProgress || 0);
// lineData_2.push(item.monthProgress2 || 0);
// });
// }
},
});
}
getChartData();

View File

@ -57,7 +57,7 @@ layui.use(["layer", "table", "form"], function () {
table = layui.table;
form = layui.form;
currentBidCode = parent.$("#bidPro").val();
currentBidCode = parent.parent.$("#bidPro").val();
initTable(currentType, currentBidCode);
$.ajaxSetup({
@ -73,7 +73,7 @@ layui.use(["layer", "table", "form"], function () {
function changeData(that, type) {
currentType = type;
currentBidCode = parent.$("#bidPro").val();
currentBidCode = parent.parent.$("#bidPro").val();
$(".ul-box li").each(function () {
if ($(this).hasClass("check")) {