269 lines
8.4 KiB
JavaScript
269 lines
8.4 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.$('#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);
|
||
}
|
||
}
|
||
})
|
||
|
||
function setCols(type) {
|
||
if (type === 1) { // 工程质量分析
|
||
return [
|
||
{type: 'numbers', title: '序号', width: '10%'}, // 添加序号列
|
||
{field: 'projectName', title: '工程名称', align: 'center'},
|
||
// { field: 'projectNumber', title: '工程编号', align: 'center'},
|
||
// { field: 'projectAddress', title: '项目地址', align: 'center'},
|
||
// { field: 'contractorName', title: '承包商名称', align: 'center',},
|
||
// { field: 'qualityLevel', 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();
|
||
}
|
||
myChart = echarts.init(document.getElementById("oneEcharts"));
|
||
myChart2 = echarts.init(document.getElementById("twoEcharts"));
|
||
initEchartsOne(data[0]);
|
||
initEchartsTwo(data);
|
||
}
|
||
|
||
function initEchartsOne(data) {
|
||
// 从传入的数据中提取 passRate 和 noPassRate，并转为数字
|
||
const passRate = parseFloat(data.passRate);
|
||
const noPassRate = parseFloat(data.noPassRate);
|
||
|
||
const option = {
|
||
grid: {
|
||
top: 0,
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
},
|
||
title: {
|
||
text: data.team || "合格率对比",
|
||
x: "center",
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: "{b}: {c}%"
|
||
},
|
||
legend: {
|
||
show: true,
|
||
data: ['合格率', '不合格率'],
|
||
bottom: 10
|
||
},
|
||
series: [
|
||
{
|
||
name: "合格率分析",
|
||
type: "pie",
|
||
radius: "65%",
|
||
center: ["50%", "50%"],
|
||
label: {
|
||
show: true,
|
||
formatter: "{b}: {c}%"
|
||
},
|
||
data: [
|
||
{ value: passRate, name: "合格率" },
|
||
{ value: 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.team);
|
||
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; // 确保y轴标签也不显示百分号
|
||
}
|
||
},
|
||
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();
|
||
});
|
||
}
|