462 lines
15 KiB
JavaScript
462 lines
15 KiB
JavaScript
|
let table, layer, form;
|
|||
|
|
let currentType = 1;
|
|||
|
|
let currentBidCode = "";
|
|||
|
|
let xData = [];
|
|||
|
|
let yData_1 = [];
|
|||
|
|
let yData_2 = [];
|
|||
|
|
let pieData = [];
|
|||
|
|
let pieData_1 = [];
|
|||
|
|
|
|||
|
|
// 将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" },
|
|||
|
|
{
|
|||
|
|
title: "延误因素分析",
|
|||
|
|
align: "center",
|
|||
|
|
templet: (d, index) => {
|
|||
|
|
let text = "";
|
|||
|
|
text +=
|
|||
|
|
'<a id="viewBtn" style="color: #007bff;cursor: pointer;font-size: 16px">查看</a>';
|
|||
|
|
return text;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
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.parent.$("#bidPro").val();
|
|||
|
|
initTable(currentType, currentBidCode);
|
|||
|
|
|
|||
|
|
$.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) {
|
|||
|
|
currentType = type;
|
|||
|
|
currentBidCode = parent.parent.$("#bidPro").val();
|
|||
|
|
|
|||
|
|
$(".ul-box li").each(function () {
|
|||
|
|
if ($(this).hasClass("check")) {
|
|||
|
|
$(this).removeClass("check").addClass("nocheck");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(that).removeClass("nocheck").addClass("check");
|
|||
|
|
|
|||
|
|
if ($("#demo2").is(":visible")) {
|
|||
|
|
initTable(type, currentBidCode);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$("#right-table-box").removeAttr("style");
|
|||
|
|
$("#no-data-box").css({ display: "none" });
|
|||
|
|
$("#right-box").css({ display: "none" });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let data1 = [
|
|||
|
|
"由于大气影响，导致施工进度延误",
|
|||
|
|
"由于设备判断延迟，导致施工进度延误",
|
|||
|
|
"由于人员不足，导致施工进度延误",
|
|||
|
|
"由于设计变更，导致施工进度延误",
|
|||
|
|
"由于其他原因，导致施工进度延误",
|
|||
|
|
];
|
|||
|
|
// 自动生成一些结果描述
|
|||
|
|
let data2 = [
|
|||
|
|
"此次结果较上次有所恶化，由于大气影响（如暴雨、雾霾），现场停工3天，需调整后续工期计划。",
|
|||
|
|
"此次结果与上次持平，由于设备判断延迟（如检测仪器故障），延误2天，但通过加班追回部分进度。",
|
|||
|
|
"此次结果较上次有所改善，尽管人员不足（原计划10人，实际到岗7人），但通过优化分工仅延误1天。",
|
|||
|
|
"此次结果出现新问题，由于设计变更（业主临时要求修改图纸），导致关键路径延期5天，需紧急协调资源。",
|
|||
|
|
"此次结果较上次无显著变化，其他原因（如临时停电）导致延误1天，属于可控范围内。",
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
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",
|
|||
|
|
url: url,
|
|||
|
|
skin: "line",
|
|||
|
|
page: true,
|
|||
|
|
height: "full-100",
|
|||
|
|
headers: {
|
|||
|
|
decrypt: "decrypt",
|
|||
|
|
Authorization: token,
|
|||
|
|
},
|
|||
|
|
where: {
|
|||
|
|
bidCode: bidCode,
|
|||
|
|
type: type,
|
|||
|
|
},
|
|||
|
|
response: {
|
|||
|
|
statusName: "code",
|
|||
|
|
statusCode: 200,
|
|||
|
|
countName: "count",
|
|||
|
|
dataName: "rows",
|
|||
|
|
},
|
|||
|
|
cols: [setCols(type)], // 现在可以正确访问setCols函数
|
|||
|
|
done: function (res, curr, count) {
|
|||
|
|
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;'>延误对策：" +
|
|||
|
|
rowData.delayPolicy +
|
|||
|
|
"</div>" +
|
|||
|
|
"<div style='font-size: 16px; padding: 20px;'>分析结果：" +
|
|||
|
|
rowData.analyzeResult +
|
|||
|
|
"</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", // 边框颜色（如果按钮有边框）
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
error: function () {
|
|||
|
|
layer.msg("数据加载失败", { icon: 2 });
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(".chart-box").hide();
|
|||
|
|
|
|||
|
|
$(".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: {
|
|||
|
|
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,
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "#5470C6",
|
|||
|
|
borderWidth: 0, // 去除白色边框
|
|||
|
|
},
|
|||
|
|
symbolSize: 8, // 可以调整小圆点的大小
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "实际进度",
|
|||
|
|
type: "line",
|
|||
|
|
data: yData_2,
|
|||
|
|
smooth: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#FF0000", // 红色
|
|||
|
|
width: 2,
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "#FF0000",
|
|||
|
|
borderWidth: 0, // 去除白色边框
|
|||
|
|
},
|
|||
|
|
symbolSize: 10, // 可以调整小圆点的大小
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
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} ",
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
orient: "vertical", // 垂直排列
|
|||
|
|
right: 60, // 距离右侧 20px
|
|||
|
|
top: "center", // 垂直居中
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff", // 图例文字颜色设为白色
|
|||
|
|
borderWidth: 0,
|
|||
|
|
borderColor: "transparent",
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
borderWidth: 0, // 关键点：去除 legend 图例项（小色块）的边框
|
|||
|
|
},
|
|||
|
|
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: "#333", // 边框颜色（用于间隙）
|
|||
|
|
borderWidth: 2, // 边框宽度（1px 每边，形成 2px 间隙）
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
value: pieData_1[0],
|
|||
|
|
name: "大气影响",
|
|||
|
|
itemStyle: { color: "#67C23A" },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: pieData_1[1],
|
|||
|
|
name: "设备判断延迟",
|
|||
|
|
itemStyle: { color: "#409EFF" },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: pieData_1[2],
|
|||
|
|
name: "人员不足",
|
|||
|
|
itemStyle: { color: "#E6A23C" },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: pieData_1[3],
|
|||
|
|
name: "设计变更",
|
|||
|
|
itemStyle: { color: "#909399" },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: pieData_1[4],
|
|||
|
|
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();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取图表数据
|
|||
|
|
function getChartData() {
|
|||
|
|
const url =
|
|||
|
|
commonUrl + "screen/largeScreen/tb_project_progress_new/list4chart";
|
|||
|
|
$.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.monthValue || 0);
|
|||
|
|
yData_2.push(item.monthValue2 || 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();
|