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();
|
||
});
|
||
}
|