cwchen
/
ah_jjzhgd_webscreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ah_jjzhgd_webscreen/js/pages/newDataAnalysis/projectManagement.js

705 lines
23 KiB
JavaScript
Raw Normal View History

项目进度增加图表展示
2025-07-24 17:19:42 +08:00
// let table, layer, form;
// layui.use(["layer", "table", "form"], function () {
// layer = layui.layer;
// table = layui.table;
// form = layui.form;
// // 响应成功后的拦截器
// $.ajaxSetup({
// beforeSend: function (xhr, options) {
// var originalSuccess = options.success;
// options.success = function (data, textStatus, jqXhr) {
// data = modifyResponseData(data);
// // success(data,textStatus, jqXhr);
// originalSuccess.apply(this, arguments);
// };
// },
// });
// initTable(1, parent.$("#bidPro").val());
// });
// /* 切换数据 */
// function changeData(that, type) {
// const bidCode = parent.$("#bidPro").val();
// $(".ul-box li").each(function () {
// if ($(this).hasClass("check")) {
// $(this).removeClass("check").addClass("nocheck");
// }
// });
// var tableElem = $("#demo2").parents(".layui-table-view");
// tableElem.remove();
// $(that).removeClass("nocheck").addClass("check");
// if (type === 1 || type === 2 || type === 3 || type === 6 || type === 12) {
// initTable(type, bidCode);
// $("#right-table-box").removeAttr("style");
// $("#no-data-box").css({ display: "none" });
// $("#right-box").css({ display: "none" });
// }
// }
// function initTable(type, bidCode) {
// const url = commonUrl + "screen/largeScreen/tb_project_new/list";
// table.render({
// elem: "#demo2",
// url: url,
// skin: "line",
// page: true,
// height: "full-100",
// headers: {
// decrypt: "decrypt",
// Authorization: token,
// },
// where: {
// bidCode: bidCode,
// type: type,
// },
// response: {
// statusName: "code", // 规定数据状态的字段名称，默认：code
// statusCode: 200, // 规定成功的状态码，默认：0
// countName: "count", // 规定数据总数的字段名称，默认：count
// dataName: "rows", // 规定数据列表的字段名称，默认：data
// },
// cols: [setCols(type)],
// initComplete: function () {
// // 在表格渲染完成后，重新渲染序号列
// var that = this.elem.next();
// var tool = that
// .children(".layui-table-box")
// .children(".layui-table-fixed")
// .children(".layui-table-body")
// .children(".layui-table");
// tool.find("tr").each(function (index, item) {
// $(this)
// .find('td[data-field="LAY_TABLE_INDEX"]')
// .text(index + 1);
// });
// },
// done: function (res, curr, count, origin) {
// $(".layui-table-body table.layui-table tbody tr #exportBtn").on(
// "click",
// function () {
// // 获取当前行的数据
// var index = $(this).index();
// var rowData = res.rows[index]; // 获取对应行的数据
// console.log(rowData, "rowData导出");
// const url =
// commonUrl +
// "screen/largeScreen/tb_project_new/export?proName=" +
// rowData.taskName +
// "&token=" +
// sessionStorage.getItem("zhgd_token");
// // window.location.href = url;
// window.open(url, "_blank");
// // $.ajax({
// // url: url,
// // type: "get",
// // headers: {
// // authorization: sessionStorage.getItem("zhgd_token"),
// // },
// // success: function (data) {
// // console.log(data, "导出的数据结果");
// // },
// // });
// }
// );
// },
// });
// function setCols(type) {
// if (type === 1) {
// return [
// { type: "numbers", title: "序号", width: "10%" }, // 添加序号列
// {
// field: "taskName",
// title: "工程名称",
// align: "center",
// },
// {
// field: "projectNumber",
// title: "任务名称",
// align: "center",
// },
// {
// field: "planStartTime",
// title: "计划开始时间",
// align: "center",
// },
// {
// field: "planEndTime",
// title: "实际开始时间",
// align: "center",
// },
// {
// field: "diffDay",
// title: "偏差天数",
// align: "center",
// },
// {
// field: "planCost",
// title: "成本预算",
// align: "center",
// },
// {
// field: "actualCost",
// title: "实际成本",
// align: "center",
// },
// {
// field: "riskLevel",
// title: "风险等级",
// align: "center",
// },
// {
// field: "suggestion",
// title: "建议策略",
// align: "center",
// },
// {
// title: "操作",
// align: "center",
// templet: (d) => {
// let text = "";
// text +=
// '<a id="exportBtn" style="color: #007bff;cursor: pointer;font-size: 16px">分析报告</a>';
// return text;
// },
// },
// ];
// }
// }
// }
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
let table, layer, form;
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
let currentType = 1;
let currentBidCode = "";
let xData = [];
let yData_1 = [];
let yData_2 = [];
let pieData = [];
let pieData_1 = [];
let tableData = [];
let barData = [];
let barData_1 = [];
// 将setCols函数提取到外部，使其可以被全局访问
function setCols(type) {
if (type === 1) {
return [
{ type: "numbers", title: "序号", width: "10%" }, // 添加序号列
{
field: "taskName",
title: "工程名称",
align: "center",
},
{
field: "projectNumber",
title: "任务名称",
align: "center",
},
{
field: "planStartTime",
title: "计划开始时间",
align: "center",
},
{
field: "planEndTime",
title: "实际开始时间",
align: "center",
},
{
field: "diffDay",
title: "偏差天数",
align: "center",
},
{
field: "planCost",
title: "成本预算",
align: "center",
},
{
field: "actualCost",
title: "实际成本",
align: "center",
},
{
field: "riskLevel",
title: "风险等级",
align: "center",
},
{
field: "suggestion",
title: "建议策略",
align: "center",
},
{
title: "操作",
align: "center",
templet: (d) => {
let text = "";
text +=
'<a id="exportBtn" style="color: #007bff;cursor: pointer;font-size: 16px">分析报告</a>';
return text;
},
},
];
}
// 可以添加其他type的情况
return []; // 默认返回空数组
}
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
layui.use(["layer", "table", "form"], function () {
layer = layui.layer;
table = layui.table;
form = layui.form;
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
currentBidCode = parent.$("#bidPro").val();
initTable(currentType, currentBidCode);
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
$.ajaxSetup({
beforeSend: function (xhr, options) {
var originalSuccess = options.success;
options.success = function (data, textStatus, jqXhr) {
data = modifyResponseData(data);
originalSuccess.apply(this, arguments);
};
},
});
});
function changeData(that, type) {
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
currentType = type;
currentBidCode = parent.$("#bidPro").val();
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
$(".ul-box li").each(function () {
if ($(this).hasClass("check")) {
$(this).removeClass("check").addClass("nocheck");
}
});
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
$(that).removeClass("nocheck").addClass("check");
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
if ($("#demo2").is(":visible")) {
initTable(type, currentBidCode);
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
}
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
$("#right-table-box").removeAttr("style");
$("#no-data-box").css({ display: "none" });
$("#right-box").css({ display: "none" });
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
}
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
let data1 = [
"由于大气影响，导致施工进度延误",
"由于设备判断延迟，导致施工进度延误",
"由于人员不足，导致施工进度延误",
"由于设计变更，导致施工进度延误",
"由于其他原因，导致施工进度延误",
];
// 自动生成一些结果描述
let data2 = [
"此次结果较上次有所恶化，由于大气影响（如暴雨、雾霾），现场停工3天，需调整后续工期计划。",
"此次结果与上次持平，由于设备判断延迟（如检测仪器故障），延误2天，但通过加班追回部分进度。",
"此次结果较上次有所改善，尽管人员不足（原计划10人，实际到岗7人），但通过优化分工仅延误1天。",
"此次结果出现新问题，由于设计变更（业主临时要求修改图纸），导致关键路径延期5天，需紧急协调资源。",
"此次结果较上次无显著变化，其他原因（如临时停电）导致延误1天，属于可控范围内。",
];
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
function initTable(type, bidCode) {
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
if ($("#demo2").next(".layui-table-view").length > 0) {
$("#demo2").next(".layui-table-view").remove();
}
项目管理分析列表接口调试完成
2025-07-23 20:39:10 +08:00
const url = commonUrl + "screen/largeScreen/tb_project_new/list";
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
table.render({
elem: "#demo2",
url: url,
skin: "line",
page: true,
height: "full-100",
headers: {
decrypt: "decrypt",
Authorization: token,
},
where: {
bidCode: bidCode,
type: type,
},
项目管理分析列表接口调试完成
2025-07-23 20:39:10 +08:00
response: {
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
statusName: "code",
statusCode: 200,
countName: "count",
dataName: "rows",
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
},
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
cols: [setCols(type)], // 现在可以正确访问setCols函数
done: function (res, curr, count) {
tableData = res.rows;
barData = tableData.map((item) => {
return item.taskName;
});
barData_1 = tableData.map((item) => {
return item.actualCost;
});
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]; // 获取对应行的数据
// // 弹框配置
// 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", // 内容区域透明
// });
// $(layero)
// .find(".layui-layer-setwin .layui-layer-close")
// .css({
// color: "#fff", // 文字颜色
// "border-color": "#fff", // 边框颜色（如果按钮有边框）
// });
// },
// });
// }
// );
增加按钮逻辑
2025-07-24 10:42:33 +08:00
$(".layui-table-body table.layui-table tbody tr #exportBtn").on(
"click",
function () {
// 获取当前行的数据
var index = $(this).index();
var rowData = res.rows[index]; // 获取对应行的数据
console.log(rowData, "rowData导出");
项目管理分析导出报告接口完善
2025-07-24 14:00:05 +08:00
const url =
commonUrl +
"screen/largeScreen/tb_project_new/export?proName=" +
rowData.taskName +
"&token=" +
sessionStorage.getItem("zhgd_token");
// window.location.href = url;
window.open(url, "_blank");
// $.ajax({
// url: url,
// type: "get",
// headers: {
// authorization: sessionStorage.getItem("zhgd_token"),
// },
// success: function (data) {
// console.log(data, "导出的数据结果");
// },
// });
增加按钮逻辑
2025-07-24 10:42:33 +08:00
}
);
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
},
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
error: function () {
layer.msg("数据加载失败", { icon: 2 });
},
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
});
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
}
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
$(".chart-box").hide();
$(".list-view").click(function () {
if ($(this).hasClass("active")) return;
$(".list-view").addClass("active");
$(".chart-view").removeClass("active");
$(".chart-box").hide();
$(".chart-box2").hide();
$("#demo2").show();
initTable(currentType, currentBidCode);
});
$(".chart-view").click(function () {
if ($(this).hasClass("active")) return;
$(".list-view").removeClass("active");
$(".chart-view").addClass("active");
$("#demo2").hide();
$("#demo2").next(".layui-table-view").remove();
$(".chart-box").show();
$(".chart-box2").show();
initLineChart();
initPieChart();
});
// 初始化左侧双折线图
function initLineChart() {
const leftChart = echarts.init(document.getElementById("left-chart"));
const bottomChart = echarts.init(document.getElementById("bottom-chart"));
const option = {
textStyle: {
color: "#fff",
},
title: {
text: "项目进度趋势",
textStyle: {
// 标题文字样式
color: "#fff", // 标题颜色
fontSize: 18, // 可以同时设置其他样式
},
},
tooltip: {
trigger: "axis",
},
legend: {
show: true,
data: ["计划进度", "实际进度"],
textStyle: {
// 图例文字样式
color: "#fff", // 图例文字颜色
},
itemStyle: {
color: "auto",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: xData,
},
yAxis: {
type: "value",
},
series: [
{
name: "计划进度",
type: "line",
data: yData_1,
smooth: false,
lineStyle: {
color: "#5470C6",
width: 2,
项目管理分析列表接口调试完成
2025-07-23 20:39:10 +08:00
},
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
itemStyle: {
color: "#5470C6",
borderWidth: 0, // 去除白色边框
项目管理分析列表接口调试完成
2025-07-23 20:39:10 +08:00
},
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
symbolSize: 8, // 可以调整小圆点的大小
},
{
name: "实际进度",
type: "line",
data: yData_2,
smooth: false,
lineStyle: {
color: "#FF0000", // 红色
width: 2,
项目管理分析列表接口调试完成
2025-07-23 20:39:10 +08:00
},
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
itemStyle: {
color: "#FF0000",
borderWidth: 0, // 去除白色边框
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
},
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
symbolSize: 10, // 可以调整小圆点的大小
},
],
};
leftChart.setOption(option);
bottomChart.setOption(option);
// 响应式调整
window.addEventListener("resize", function () {
leftChart.resize();
});
}
// 初始化右侧饼图
function initPieChart() {
const rightChart = echarts.init(document.getElementById("right-chart"));
// 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", // x轴文字颜色设为白色
fontSize: 12,
},
axisLine: {
lineStyle: {
color: "#fff", // x轴线颜色设为白色
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
},
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
},
},
yAxis: {
type: "value",
name: "成本金额(元)",
nameTextStyle: {
color: "#fff", // y轴名称颜色设为白色
},
axisLabel: {
color: "#fff", // y轴文字颜色设为白色
fontSize: 12,
},
axisLine: {
lineStyle: {
color: "#fff", // y轴线颜色设为白色
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
},
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
},
splitLine: {
lineStyle: {
color: "rgba(255, 255, 255, 0.2)", // 网格线颜色设为半透明白色
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
},
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
},
},
series: [
{
name: "成本金额",
type: "bar",
barWidth: "40%",
data: barData_1,
itemStyle: {
color: function (params) {
// 自定义柱状颜色
const colorList = ["#409EFF", "#67C23A"];
return colorList[params.dataIndex];
项目管理分析列表接口调试完成
2025-07-23 20:39:10 +08:00
},
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
borderRadius: [5, 5, 0, 0], // 柱子上部圆角
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
},
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
label: {
show: true,
position: "top",
color: "#fff", // 柱顶文字颜色
formatter: "{c} 元",
},
},
],
};
rightChart.setOption(option);
// 响应式调整
window.addEventListener("resize", function () {
rightChart.resize();
});
增加项目管理分析页面
2025-07-23 19:27:27 +08:00
}
项目进度增加图表展示
2025-07-24 17:19:42 +08:00
// 获取图表数据
function getChartData() {
const url = commonUrl + "screen/largeScreen/tb_project_new/list4progress";
$.ajax({
url: url,
type: "get",
headers: {
authorization: sessionStorage.getItem("zhgd_token"),
},
success: function (data) {
console.log(data, "图表数据1===折线图");
if (data.rows && data.rows.length > 0) {
// initPieChart(data.rows);
const result = data.rows;
result.forEach((item) => {
xData.push(item.month);
yData_1.push(item.monthProgress || 0);
yData_2.push(item.monthProgress2 || 0);
});
}
},
});
const url2 =
commonUrl + "screen/largeScreen//tb_project_progress_new/list4bing";
$.ajax({
url: url2,
type: "get",
headers: {
authorization: sessionStorage.getItem("zhgd_token"),
},
success: function (data) {
console.log(data, "图表数据2===饼图");
if (data.rows && data.rows.length > 0) {
const result = data.rows;
result.forEach((item) => {
pieData.push(item.category);
pieData_1.push(item.monthValue || 0);
});
}
},
});
}
getChartData();