cwchen
/
ah_jjzhgd_webscreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

工程进度分析接口调试以及图表显示

This commit is contained in:
BianLzhaoMin 2025-07-23 21:52:09 +08:00
parent e2208da2ac
commit cb564521ca
3 changed files with 315 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
css/newDataAnalysis/projectProgress.css Normal file
View File

@ -0,0 +1,30 @@
.tap-box {
margin-top: 30px;
padding: 0 10px;
display: flex;
}
.tap-box div {
padding: 4px 10px;
border-radius: 5px;
cursor: pointer;
border: 1px solid #e0e0e0;
}
.tap-box div:last-child {
margin-left: 10px;
}
.active {
background-color: #0052cc;
}
.chart-box {
padding: 10px;
display: flex;
}
.chart-box-left,
.chart-box-right {
width: 50%;
height: 400px;
}

373
js/pages/newDataAnalysis/projectProgress.js
View File

@ -1,42 +1,88 @@
let table, layer, form;
let currentType = 1;
let currentBidCode = "";
// 将setCols函数提取到外部，使其可以被全局访问
function setCols(type) {
if (type === 1) {
return [
{ type: "numbers", title: "序号", width: "10%" },
{ field: "projectName", title: "项目名称", align: "center" },
{ field: "taskName", title: "作业任务名称", align: "center" },
{ field: "taskCode", title: "任务编号", align: "center" },
{ field: "planStartTime", title: "计划开始时间", align: "center" },
{ field: "planEndTime", title: "计划完成时间", align: "center" },
{
field: "actualStartTime",
title: "实际开始时间",
align: "center",
},
{ field: "actualEndTime", title: "实际完成时间", align: "center" },
{ field: "processDiff", title: "进度偏差", align: "center" },
{ field: "completeEffort", title: "已完成工程量", align: "center" },
{ field: "totalEffort", title: "总工程量", align: "center" },
{ field: "delayActor", title: "延误因素分析", align: "center" },
{
field: "resourceMatchStatus",
title: "资源匹配状态",
align: "center",
},
{
field: "keyPathFlag",
title: "关键路径任务标识",
align: "center",
},
];
}
// 可以添加其他type的情况
return []; // 默认返回空数组
}
layui.use(["layer", "table", "form"], function () {
layer = layui.layer;
table = layui.table;
form = layui.form;
// 响应成功后的拦截器
currentBidCode = parent.$("#bidPro").val();
initTable(currentType, currentBidCode);
$.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();
currentType = type;
currentBidCode = 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" });
if ($("#demo2").is(":visible")) {
initTable(type, currentBidCode);
}
$("#right-table-box").removeAttr("style");
$("#no-data-box").css({ display: "none" });
$("#right-box").css({ display: "none" });
}
function initTable(type, bidCode) {
if ($("#demo2").next(".layui-table-view").length > 0) {
$("#demo2").next(".layui-table-view").remove();
}
const url = commonUrl + "screen/largeScreen/tb_project_progress_new/list";
table.render({
elem: "#demo2",
@ -53,102 +99,217 @@ function initTable(type, bidCode) {
type: type,
},
response: {
statusName: "code", // 规定数据状态的字段名称，默认：code
statusCode: 200, // 规定成功的状态码，默认：0
countName: "count", // 规定数据总数的字段名称，默认：count
dataName: "rows", // 规定数据列表的字段名称，默认：data
statusName: "code",
statusCode: 200,
countName: "count",
dataName: "rows",
},
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);
});
cols: [setCols(type)], // 现在可以正确访问setCols函数
done: function (res, curr, count) {
if (res.code !== 200 || !res.rows || res.rows.length === 0) {
layer.msg("暂无数据", { icon: 2 });
}
},
done: function (res, curr, count, origin) {
// console.log(res);
error: function () {
layer.msg("数据加载失败", { icon: 2 });
},
});
function setCols(type) {
if (type === 1) {
// 工程质量分析
return [
{ type: "numbers", title: "序号", width: "10%" }, // 添加序号列
{
field: "projectName",
title: "项目名称",
align: "center",
},
{
field: "taskName",
title: "作业任务名称",
align: "center",
},
{
field: "taskCode",
title: "任务编号",
align: "center",
},
{
field: "planStartTime",
title: "计划开始时间",
align: "center",
},
{
field: "planEndTime",
title: "计划完成时间",
align: "center",
},
{
field: "actualStartTime",
title: "实际开始时间",
align: "center",
},
{
field: "actualEndTime",
title: "实际完成时间",
align: "center",
},
{
field: "processDiff",
title: "进度偏差",
align: "center",
},
{
field: "completeEffort",
title: "已完成工程量",
align: "center",
},
{
field: "totalEffort",
title: "总工程量",
align: "center",
},
{
field: "delayActor",
title: "延误因素分析",
align: "center",
},
{
field: "resourceMatchStatus",
title: "资源匹配状态",
align: "center",
},
{
field: "keyPathFlag",
title: "关键路径任务标识",
align: "center",
},
];
}
}
}
$(".list-view").click(function () {
if ($(this).hasClass("active")) return;
$(".list-view").addClass("active");
$(".chart-view").removeClass("active");
$(".chart-box").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();
initLineChart();
initPieChart();
});
// 初始化左侧双折线图
function initLineChart() {
const leftChart = echarts.init(document.getElementById("left-chart"));
const option = {
textStyle: {
color: "#fff",
},
title: {
text: "进度偏差统计",
textStyle: {
// 标题文字样式
color: "#fff", // 标题颜色
fontSize: 18, // 可以同时设置其他样式
},
},
tooltip: {
trigger: "axis",
},
legend: {
data: ["计划进度", "实际进度"],
textStyle: {
// 图例文字样式
color: "#fff", // 图例文字颜色
},
itemStyle: {
color: function (name) {
return name === "计划进度" ? "#5470C6" : "#FF0000";
},
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["一月", "二月", "三月", "四月", "五月", "六月"],
},
yAxis: {
type: "value",
},
series: [
{
name: "计划进度",
type: "line",
data: [120, 132, 101, 134, 90, 230],
smooth: false,
lineStyle: {
color: "#5470C6",
width: 2,
},
itemStyle: {
color: "#5470C6",
},
},
{
name: "实际进度",
type: "line",
data: [100, 120, 90, 110, 80, 150],
smooth: false,
lineStyle: {
color: "#FF0000", // 红色
width: 2,
},
itemStyle: {
color: "#FF0000",
},
},
],
};
leftChart.setOption(option);
// 响应式调整
window.addEventListener("resize", function () {
leftChart.resize();
});
}
// 初始化右侧饼图
function initPieChart() {
const rightChart = echarts.init(document.getElementById("right-chart"));
const option = {
title: {
text: "延误因素分布",
left: "center",
textStyle: {
color: "#fff",
fontSize: 18,
},
},
tooltip: {
trigger: "item",
formatter: "{a} {b}: {c} ({d}%)",
},
legend: {
orient: "vertical", // 垂直排列
right: 60, // 距离右侧 20px
top: "center", // 垂直居中
textStyle: {
color: "#fff", // 图例文字颜色设为白色
},
data: ["大气影响", "设备判断延迟", "人员不足", "设计变更", "其他"],
},
series: [
{
name: "",
type: "pie",
radius: ["30%", "50%"], // 内半径 30%，外半径 60%，形成空心效果
center: ["30%", "50%"], // 确保饼图居中
avoidLabelOverlap: false,
label: {
show: false, // 隐藏连接线末端的标签
},
labelLine: {
show: false, // 隐藏连接线
},
itemStyle: {
borderRadius: 5, // 每块扇形圆角效果
borderColor: "#000", // 边框颜色（用于间隙）
borderWidth: 1, // 边框宽度（1px 每边，形成 2px 间隙）
},
data: [
{
value: 335,
name: "大气影响",
itemStyle: { color: "#67C23A" },
},
{
value: 210,
name: "设备判断延迟",
itemStyle: { color: "#409EFF" },
},
{
value: 154,
name: "人员不足",
itemStyle: { color: "#E6A23C" },
},
{
value: 154,
name: "设计变更",
itemStyle: { color: "#909399" },
},
{
value: 154,
name: "其他",
itemStyle: { color: "#F56C6C" },
},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
rightChart.setOption(option);
// 响应式调整
window.addEventListener("resize", function () {
rightChart.resize();
});
}

19
pages/newDataAnalysis/projectProgress.html
View File

@ -10,6 +10,7 @@
<link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
<link rel="stylesheet" href="../../css/coreTable.css" />
<link rel="stylesheet" href="../../css/accessMge/accessMge.css">
<script src="../../js/publics/echarts.js"></script>
<script src="../../js/publics/sm4.js" type="text/javascript"></script>
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="../../js/publics/public.js"></script>
@ -21,6 +22,7 @@
<script src="../../api/commonRequest.js"></script>
<!-- <script src="../../js/publics/shuiYin.js"></script> -->
<script src="../../plugin/watermark.js"></script>
<link rel="stylesheet" href="../../css/newDataAnalysis/projectProgress.css">
<title>工程进度分析</title>
</head>
<script type="text/javascript">
@ -29,7 +31,22 @@
</script>
<body>
<table id="demo2" lay-filter="test"></table>
<!-- tap 切换按钮 -->
<div class="tap-box">
<div class="list-view active">列表视图</div>
<div class="chart-view">图表视图</div>
</div>
<!-- 列表视图 -->
<table id="demo2" class="list-table" lay-filter="test"></table>
<!-- 图表视图 -->
<div class="chart-box">
<div class="chart-box-left" id="left-chart">
左侧折线图
</div>
<div class="chart-box-right" id="right-chart">
右侧饼图
</div>
</div>
</body>
<style>
.layui-table-init {