From a484709bc36e7439697be2d92835c5c5377a48c2 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Thu, 24 Jul 2025 23:20:45 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E7=AE=A1=E7=90=86=E7=AD=89?=
=?UTF-8?q?=E7=BA=A7=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
js/pages/newDataAnalysis/projectManagement.js | 534 ++++++++++++++----
js/pages/newDataAnalysis/projectProgress.js | 4 +-
2 files changed, 432 insertions(+), 106 deletions(-)
diff --git a/js/pages/newDataAnalysis/projectManagement.js b/js/pages/newDataAnalysis/projectManagement.js
index 2226454..582cf8a 100644
--- a/js/pages/newDataAnalysis/projectManagement.js
+++ b/js/pages/newDataAnalysis/projectManagement.js
@@ -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}
成本: {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}
成本: {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}
风险等级: {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}
风险等级: {c}",
+ formatter: function (params) {
+ let result = params[0].axisValue + "
";
+ params.forEach((param) => {
+ result += `${param.seriesName}: ${param.value}个
`;
+ });
+ 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();
diff --git a/js/pages/newDataAnalysis/projectProgress.js b/js/pages/newDataAnalysis/projectProgress.js
index f1b4db5..6f9cbbb 100644
--- a/js/pages/newDataAnalysis/projectProgress.js
+++ b/js/pages/newDataAnalysis/projectProgress.js
@@ -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")) {