1302 lines
43 KiB
JavaScript
1302 lines
43 KiB
JavaScript
|
// 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;
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// ];
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
let table, layer, form;
|
|||
|
|
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 = [];
|
|||
|
|
let barData_2 = [];
|
|||
|
|
|
|||
|
|
let lineData = [];
|
|||
|
|
let lineData_1 = [];
|
|||
|
|
let lineData_2 = [];
|
|||
|
|
let bottomData = [];
|
|||
|
|
|
|||
|
|
// 将setCols函数提取到外部，使其可以被全局访问
|
|||
|
|
function setCols(type) {
|
|||
|
|
if (type === 1) {
|
|||
|
|
return [
|
|||
|
|
{ type: "numbers", title: "序号", width: "10%" }, // 添加序号列
|
|||
|
|
{
|
|||
|
|
field: "proName",
|
|||
|
|
title: "工程名称",
|
|||
|
|
align: "center",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: "taskName",
|
|||
|
|
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",
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// title: "风险等级",
|
|||
|
|
// align: "center",
|
|||
|
|
// templet: (d) => {
|
|||
|
|
// let text = "";
|
|||
|
|
// text +=
|
|||
|
|
// '<a style="color:rgb(226, 154, 11);font-size: 16px">' +
|
|||
|
|
// d.riskLevel +
|
|||
|
|
// "级" +
|
|||
|
|
// "</a>";
|
|||
|
|
// return text;
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
{
|
|||
|
|
title: "风险数量",
|
|||
|
|
align: "center",
|
|||
|
|
templet: (d) => {
|
|||
|
|
let text = "";
|
|||
|
|
text +=
|
|||
|
|
'<a id="riskLevel" style="color: #007bff;cursor: pointer;font-size: 16px">' +
|
|||
|
|
d.riskSize +
|
|||
|
|
"</a>";
|
|||
|
|
return text;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// 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 []; // 默认返回空数组
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setCols2(type) {
|
|||
|
|
if (type === 1) {
|
|||
|
|
return [
|
|||
|
|
{ type: "numbers", title: "序号", width: "10%" }, // 添加序号列
|
|||
|
|
{
|
|||
|
|
field: "proPart",
|
|||
|
|
title: "工序名称",
|
|||
|
|
align: "center",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: "riskDesc",
|
|||
|
|
title: "风险描述",
|
|||
|
|
align: "center",
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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_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) {
|
|||
|
|
tableData = res.rows;
|
|||
|
|
|
|||
|
|
barData = tableData.map((item) => {
|
|||
|
|
return item.proName;
|
|||
|
|
});
|
|||
|
|
barData_1 = tableData.map((item) => {
|
|||
|
|
return item.actualCost;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
barData_2 = tableData.map((item) => {
|
|||
|
|
return item.riskLevel;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (res.code !== 200 || !res.rows || res.rows.length === 0) {
|
|||
|
|
layer.msg("暂无数据", { icon: 2 });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 查看按钮点击;
|
|||
|
|
$(".layui-table-body table.layui-table tbody tr #riskLevel").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='risk-detail-table'></div>",
|
|||
|
|
area: ["800px", "400px"],
|
|||
|
|
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", // 边框颜色（如果按钮有边框）
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// table.render({
|
|||
|
|
// elem: "#table-box",
|
|||
|
|
// url:
|
|||
|
|
// commonUrl +
|
|||
|
|
// "screen/largeScreen/tb_project_new/listRiskDetail",
|
|||
|
|
// skin: "line",
|
|||
|
|
// page: true,
|
|||
|
|
// height: "full-100",
|
|||
|
|
// headers: {
|
|||
|
|
// decrypt: "decrypt",
|
|||
|
|
// Authorization: token,
|
|||
|
|
// },
|
|||
|
|
// where: {
|
|||
|
|
// bidCode: bidCode,
|
|||
|
|
// type: type,
|
|||
|
|
// proId: rowData.proId,
|
|||
|
|
// },
|
|||
|
|
// response: {
|
|||
|
|
// statusName: "code",
|
|||
|
|
// statusCode: 200,
|
|||
|
|
// countName: "count",
|
|||
|
|
// dataName: "rows",
|
|||
|
|
// },
|
|||
|
|
// cols: [setCols2(type)],
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
$.ajax({
|
|||
|
|
url:
|
|||
|
|
commonUrl +
|
|||
|
|
"screen/largeScreen/tb_project_new/listRiskDetail",
|
|||
|
|
type: "GET",
|
|||
|
|
headers: {
|
|||
|
|
decrypt: "decrypt",
|
|||
|
|
Authorization: token,
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
bidCode: bidCode,
|
|||
|
|
type: type,
|
|||
|
|
proId: rowData.proId,
|
|||
|
|
},
|
|||
|
|
success: function (res) {
|
|||
|
|
console.log(res, "res");
|
|||
|
|
|
|||
|
|
if (res.code === 200 && res.rows) {
|
|||
|
|
// 渲染表格
|
|||
|
|
table.render({
|
|||
|
|
elem: "#risk-detail-table",
|
|||
|
|
data: res.rows,
|
|||
|
|
skin: "line",
|
|||
|
|
even: true,
|
|||
|
|
page: false,
|
|||
|
|
cols: [
|
|||
|
|
[
|
|||
|
|
{
|
|||
|
|
type: "numbers",
|
|||
|
|
title: "序号",
|
|||
|
|
width: 100,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: "proPart",
|
|||
|
|
title: "工程部位",
|
|||
|
|
align: "center",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: "riskDesc",
|
|||
|
|
title: "风险描述",
|
|||
|
|
align: "center",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
],
|
|||
|
|
done: function () {
|
|||
|
|
// 确保表格渲染后可见
|
|||
|
|
this.elem.next().show();
|
|||
|
|
$(this.elem).removeAttr(
|
|||
|
|
"lay-even"
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
$("#risk-detail-table").html(
|
|||
|
|
'<div class="layui-nodata">暂无风险详情数据</div>'
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function () {
|
|||
|
|
$("#risk-detail-table").html(
|
|||
|
|
'<div class="layui-nodata">数据加载失败，请稍后重试</div>'
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
$(".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, "导出的数据结果");
|
|||
|
|
// },
|
|||
|
|
// });
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
error: function () {
|
|||
|
|
layer.msg("数据加载失败", { icon: 2 });
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(".chart-box").hide();
|
|||
|
|
$(".chart-box2").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();
|
|||
|
|
initBottomPieChart();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 初始化左侧双折线图
|
|||
|
|
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);
|
|||
|
|
// 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",
|
|||
|
|
// 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: "项目成本趋势",
|
|||
|
|
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: lineData,
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
name: "成本%",
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "计划成本",
|
|||
|
|
type: "line",
|
|||
|
|
data: lineData_1,
|
|||
|
|
smooth: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#5470C6",
|
|||
|
|
width: 2,
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "#5470C6",
|
|||
|
|
borderWidth: 0, // 去除白色边框
|
|||
|
|
},
|
|||
|
|
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 () {
|
|||
|
|
rightChart.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化底部饼图
|
|||
|
|
function initBottomPieChart() {
|
|||
|
|
const bottomChart = echarts.init(document.getElementById("bottom-chart"));
|
|||
|
|
|
|||
|
|
// 定义一组更现代化的颜色方案
|
|||
|
|
const colorPalette = [
|
|||
|
|
"#4E79A7",
|
|||
|
|
"#F28E2B",
|
|||
|
|
"#E15759",
|
|||
|
|
"#76B7B2",
|
|||
|
|
"#59A14F",
|
|||
|
|
"#EDC948",
|
|||
|
|
"#B07AA1",
|
|||
|
|
"#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: "各月份风险等级数量统计",
|
|||
|
|
left: "center",
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: 18,
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {
|
|||
|
|
type: "shadow",
|
|||
|
|
},
|
|||
|
|
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%",
|
|||
|
|
right: "12%",
|
|||
|
|
bottom: "15%",
|
|||
|
|
top: "25%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
data: months, // 月份数据
|
|||
|
|
axisLabel: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: 12,
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: months.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: "20%",
|
|||
|
|
barGap: "10%",
|
|||
|
|
data: level2Data,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "#5B8FF9", // 蓝色表示低风险
|
|||
|
|
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: 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,
|
|||
|
|
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();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取图表数据
|
|||
|
|
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);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
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();
|