395 lines
13 KiB
JavaScript
395 lines
13 KiB
JavaScript
|
let table, layer, form;
|
|||
|
|
let myChart = null,
|
|||
|
|
myChart2 = null;
|
|||
|
|
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.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/dataAnalysis/getEngqualityAnalysis";
|
|||
|
|
table.render({
|
|||
|
|
elem: "#demo2",
|
|||
|
|
url: url,
|
|||
|
|
skin: "line",
|
|||
|
|
page: true,
|
|||
|
|
height: "full-100",
|
|||
|
|
headers: {
|
|||
|
|
decrypt: "decrypt",
|
|||
|
|
Authorization: token,
|
|||
|
|
},
|
|||
|
|
where: {
|
|||
|
|
bidCode: bidCode,
|
|||
|
|
type: type,
|
|||
|
|
},
|
|||
|
|
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) {
|
|||
|
|
if (res.data && res.data.length > 0) {
|
|||
|
|
initEcharts(res.data);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// $(".layui-table-body table.layui-table tbody tr").on(
|
|||
|
|
// "click",
|
|||
|
|
// function () {
|
|||
|
|
// // 获取当前行的数据
|
|||
|
|
// var index = $(this).index();
|
|||
|
|
// var rowData = res.data[index]; // 获取对应行的数据
|
|||
|
|
|
|||
|
|
// const passRate = rowData.passRate || 0;
|
|||
|
|
// const noPassRate = rowData.noPassRate || 0;
|
|||
|
|
// // initEchartsOne(passRate, noPassRate);
|
|||
|
|
|
|||
|
|
// // 增加一个 400 * 400 的弹框把饼图放进去 并修改弹框背景样式为透明
|
|||
|
|
// layer.open({
|
|||
|
|
// type: 1,
|
|||
|
|
// title: "合格率对比",
|
|||
|
|
// content: "<div id='oneEcharts'></div>",
|
|||
|
|
// area: ["600px", "600px"],
|
|||
|
|
// });
|
|||
|
|
// initEchartsOne(passRate, noPassRate);
|
|||
|
|
// }
|
|||
|
|
// );
|
|||
|
|
|
|||
|
|
$(".layui-table-body table.layui-table tbody tr").on(
|
|||
|
|
"click",
|
|||
|
|
function () {
|
|||
|
|
// 获取当前行的数据
|
|||
|
|
var index = $(this).index();
|
|||
|
|
var rowData = res.data[index]; // 获取对应行的数据
|
|||
|
|
|
|||
|
|
const passRate = rowData.passRate || 0;
|
|||
|
|
const noPassRate = rowData.noPassRate || 0;
|
|||
|
|
|
|||
|
|
// 弹框配置
|
|||
|
|
layer.open({
|
|||
|
|
type: 1,
|
|||
|
|
title: "合格率对比",
|
|||
|
|
content:
|
|||
|
|
"<div id='oneEcharts' style='width:100%;height:100%;'></div>",
|
|||
|
|
area: ["600px", "600px"],
|
|||
|
|
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({
|
|||
|
|
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", // 边框颜色（如果按钮有边框）
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 重新渲染 ECharts（因为 DOM 刚被创建）
|
|||
|
|
setTimeout(() => {
|
|||
|
|
initEchartsOne(passRate, noPassRate);
|
|||
|
|
}, 100);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function setCols(type) {
|
|||
|
|
if (type === 1) {
|
|||
|
|
// 工程质量分析
|
|||
|
|
return [
|
|||
|
|
{ type: "numbers", title: "序号", width: "10%" }, // 添加序号列
|
|||
|
|
{ field: "checkItems", title: "工序", align: "center" },
|
|||
|
|
{ field: "projectManager", title: "项目经理", align: "center" },
|
|||
|
|
{ field: "team", title: "施工队伍", align: "center" },
|
|||
|
|
{ field: "startTime", title: "开始时间", align: "center" },
|
|||
|
|
{ field: "checkNum", title: "检查数量", align: "center" },
|
|||
|
|
{ field: "passNum", title: "合格数量", align: "center" },
|
|||
|
|
{ field: "passRate", title: "合格率", align: "center" },
|
|||
|
|
{ field: "score", title: "得分", align: "center" },
|
|||
|
|
{
|
|||
|
|
field: "unqualifiedItems",
|
|||
|
|
title: "不合格原因",
|
|||
|
|
align: "center",
|
|||
|
|
},
|
|||
|
|
/* {
|
|||
|
|
title: "操作",
|
|||
|
|
align: "center",
|
|||
|
|
templet: function (row) {
|
|||
|
|
// 注意：Layui 的 templet 函数参数是 row，即当前行数据
|
|||
|
|
return `
|
|||
|
|
<button class="layui-btn layui-btn-xs" onclick="handleUpload('${row.projectNumber}')">
|
|||
|
|
上传
|
|||
|
|
</button>
|
|||
|
|
`;
|
|||
|
|
},
|
|||
|
|
},*/
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化 echarts
|
|||
|
|
function initEcharts(data) {
|
|||
|
|
if (myChart && myChart2) {
|
|||
|
|
myChart.dispose();
|
|||
|
|
myChart2.dispose();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
myChart2 = echarts.init(document.getElementById("rightLineBox"));
|
|||
|
|
|
|||
|
|
initEchartsTwo(data);
|
|||
|
|
}
|
|||
|
|
layui.use('upload', function () {
|
|||
|
|
var upload = layui.upload;
|
|||
|
|
|
|||
|
|
// 执行上传
|
|||
|
|
upload.render({
|
|||
|
|
elem: '#uploadBtn', // 绑定元素
|
|||
|
|
url: commonUrl + "screen/largeScreen/dataAnalysis/uploadProQualityFile",
|
|||
|
|
accept: 'file', // 允许上传任意文件
|
|||
|
|
exts: 'docx', // 允许的文件类型
|
|||
|
|
size: 1024 * 10, // 限制文件大小，单位 KB（10MB）
|
|||
|
|
headers: {
|
|||
|
|
decrypt: "decrypt",
|
|||
|
|
Authorization: token,
|
|||
|
|
},
|
|||
|
|
before: function (obj) {
|
|||
|
|
// 上传前回调
|
|||
|
|
layer.msg('上传中...', { icon: 16, time: 0 });
|
|||
|
|
},
|
|||
|
|
done: function (res) {
|
|||
|
|
// 上传完成后回调（成功）
|
|||
|
|
layer.closeAll('loading');
|
|||
|
|
layer.msg('上传成功');
|
|||
|
|
console.log('服务器返回:', res);
|
|||
|
|
parent.location.reload(); // 刷新父页面
|
|||
|
|
},
|
|||
|
|
error: function () {
|
|||
|
|
// 上传失败回调
|
|||
|
|
layer.msg('上传失败', { icon: 5 });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function initEchartsOne(passRate, noPassRate) {
|
|||
|
|
// 从传入的数据中提取 passRate 和 noPassRate，并转为数字
|
|||
|
|
// const passRate = parseFloat(pieData.passRate);
|
|||
|
|
// const noPassRate = parseFloat(pieData.noPassRate);
|
|||
|
|
myChart = echarts.init(document.getElementById("oneEcharts"));
|
|||
|
|
|
|||
|
|
console.log(passRate, noPassRate, "passRate, noPassRate");
|
|||
|
|
|
|||
|
|
const option = {
|
|||
|
|
grid: {
|
|||
|
|
top: 0,
|
|||
|
|
bottom: 0,
|
|||
|
|
left: 0,
|
|||
|
|
right: 0,
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
x: "center",
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "item",
|
|||
|
|
formatter: "{b}: {c}%",
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
show: true,
|
|||
|
|
data: ["合格率", "不合格率"],
|
|||
|
|
bottom: 10,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "合格率分析",
|
|||
|
|
type: "pie",
|
|||
|
|
radius: "50%",
|
|||
|
|
center: ["50%", "50%"],
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
formatter: "{b}: {c}%",
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{ value: parseFloat(passRate), name: "合格率" },
|
|||
|
|
{ value: parseFloat(noPassRate), name: "不合格率" },
|
|||
|
|
],
|
|||
|
|
itemStyle: {
|
|||
|
|
borderRadius: 5,
|
|||
|
|
borderColor: "#fff",
|
|||
|
|
borderWidth: 2,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
// 设置图表（假设你已定义 myChart2）
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initEchartsTwo(data) {
|
|||
|
|
const teams = data.map((item) => item.checkItems);
|
|||
|
|
const scores = data.map((item) => item.score);
|
|||
|
|
|
|||
|
|
const option = {
|
|||
|
|
title: {
|
|||
|
|
text: "工序得分情况",
|
|||
|
|
left: "center",
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {
|
|||
|
|
type: "none", // 移除鼠标悬停时的阴影效果
|
|||
|
|
},
|
|||
|
|
formatter: function (params) {
|
|||
|
|
// 自定义tooltip显示内容，移除了百分号
|
|||
|
|
return (
|
|||
|
|
params[0].name +
|
|||
|
|
"<br/>" +
|
|||
|
|
params[0].seriesName +
|
|||
|
|
": " +
|
|||
|
|
params[0].value
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: "10%",
|
|||
|
|
right: "10%",
|
|||
|
|
bottom: "20%",
|
|||
|
|
top: "20%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
data: teams,
|
|||
|
|
axisLabel: {
|
|||
|
|
color: "#fff",
|
|||
|
|
interval: 0,
|
|||
|
|
formatter: function (value) {
|
|||
|
|
// 每4个字符换行
|
|||
|
|
return value.match(/.{1,4}/g).join("\n");
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
name: "得分",
|
|||
|
|
min: 0,
|
|||
|
|
max: 100,
|
|||
|
|
interval: 10,
|
|||
|
|
axisLabel: {
|
|||
|
|
color: "#fff",
|
|||
|
|
formatter: function (value) {
|
|||
|
|
return value;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "rgba(255,255,255,0.1)",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "得分",
|
|||
|
|
type: "bar",
|
|||
|
|
data: scores,
|
|||
|
|
barWidth: "30%",
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: "top",
|
|||
|
|
color: "#fff",
|
|||
|
|
formatter: function (params) {
|
|||
|
|
return params.value;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "#409EFF",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 初始化 ECharts 图表（假设你已定义 myChart）
|
|||
|
|
myChart2.setOption(option);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart2.resize();
|
|||
|
|
});
|
|||
|
|
}
|