工程质量分析图表样式优化
This commit is contained in:
BianLzhaoMin
parent
89a1cf25f8
commit
20013c258c
|
|
@ -1,125 +1,213 @@
|
|||
let table, layer, form;
|
||||
let myChart = null, myChart2 = null;
|
||||
layui.use(['layer', 'table', 'form'], function () {
|
||||
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
|
||||
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());
|
||||
originalSuccess.apply(this, arguments);
|
||||
};
|
||||
},
|
||||
});
|
||||
initTable(1, parent.$("#bidPro").val());
|
||||
});
|
||||
|
||||
/* 切换数据 */
|
||||
function changeData(that, type) {
|
||||
const bidCode = parent.$('#bidPro').val();
|
||||
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');
|
||||
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'});
|
||||
$("#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";
|
||||
const url =
|
||||
commonUrl + "screen/largeScreen/dataAnalysis/getEngqualityAnalysis";
|
||||
table.render({
|
||||
elem: '#demo2',
|
||||
elem: "#demo2",
|
||||
url: url,
|
||||
skin: 'line',
|
||||
skin: "line",
|
||||
page: true,
|
||||
height: 'full-100',
|
||||
height: "full-100",
|
||||
headers: {
|
||||
"decrypt": "decrypt",
|
||||
"Authorization": token
|
||||
decrypt: "decrypt",
|
||||
Authorization: token,
|
||||
},
|
||||
where: {
|
||||
bidCode: bidCode,
|
||||
type: type
|
||||
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');
|
||||
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);
|
||||
$(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) { // 工程质量分析
|
||||
if (type === 1) {
|
||||
// 工程质量分析
|
||||
return [
|
||||
{type: 'numbers', title: '序号', width: '10%'}, // 添加序号列
|
||||
{field: 'projectName', title: '工程名称', align: 'center'},
|
||||
{ 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'},
|
||||
{ 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" },
|
||||
{
|
||||
title: '操作', align: 'center', templet: function (row) {
|
||||
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]);
|
||||
|
||||
myChart2 = echarts.init(document.getElementById("rightLineBox"));
|
||||
|
||||
initEchartsTwo(data);
|
||||
}
|
||||
|
||||
function initEchartsOne(data) {
|
||||
function initEchartsOne(passRate, noPassRate) {
|
||||
// 从传入的数据中提取 passRate 和 noPassRate，并转为数字
|
||||
const passRate = parseFloat(data.passRate);
|
||||
const noPassRate = parseFloat(data.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: {
|
||||
|
|
@ -129,39 +217,45 @@ function initEchartsOne(data) {
|
|||
right: 0,
|
||||
},
|
||||
title: {
|
||||
text: data.team || "合格率对比",
|
||||
text: "合格率对比",
|
||||
x: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}: {c}%"
|
||||
formatter: "{b}: {c}%",
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
data: ['合格率', '不合格率'],
|
||||
bottom: 10
|
||||
data: ["合格率", "不合格率"],
|
||||
bottom: 10,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "合格率分析",
|
||||
type: "pie",
|
||||
radius: "65%",
|
||||
radius: "50%",
|
||||
center: ["50%", "50%"],
|
||||
label: {
|
||||
show: true,
|
||||
formatter: "{b}: {c}%"
|
||||
formatter: "{b}: {c}%",
|
||||
},
|
||||
data: [
|
||||
{ value: passRate, name: "合格率" },
|
||||
{ value: noPassRate, name: "不合格率" }
|
||||
{ value: parseFloat(passRate), name: "合格率" },
|
||||
{ value: parseFloat(noPassRate), name: "不合格率" },
|
||||
],
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
}
|
||||
}
|
||||
]
|
||||
borderColor: "#fff",
|
||||
borderWidth: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
// 设置图表（假设你已定义 myChart2）
|
||||
myChart.setOption(option, true);
|
||||
|
|
@ -171,98 +265,104 @@ function initEchartsOne(data) {
|
|||
}
|
||||
|
||||
function initEchartsTwo(data) {
|
||||
const teams = data.map(item => item.team);
|
||||
const scores = data.map(item => item.score);
|
||||
const teams = data.map((item) => item.team);
|
||||
const scores = data.map((item) => item.score);
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '队伍得分柱状图',
|
||||
left: 'center',
|
||||
text: "队伍得分柱状图",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: 'none' // 移除鼠标悬停时的阴影效果
|
||||
type: "none", // 移除鼠标悬停时的阴影效果
|
||||
},
|
||||
formatter: function(params) {
|
||||
formatter: function (params) {
|
||||
// 自定义tooltip显示内容，移除了百分号
|
||||
return params[0].name + '<br/>' +
|
||||
params[0].seriesName + ': ' +
|
||||
params[0].value;
|
||||
}
|
||||
return (
|
||||
params[0].name +
|
||||
"<br/>" +
|
||||
params[0].seriesName +
|
||||
": " +
|
||||
params[0].value
|
||||
);
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '20%',
|
||||
top: '20%',
|
||||
containLabel: true
|
||||
left: "10%",
|
||||
right: "10%",
|
||||
bottom: "20%",
|
||||
top: "20%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
type: "category",
|
||||
data: teams,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
color: "#fff",
|
||||
interval: 0,
|
||||
formatter: function(value) {
|
||||
formatter: function (value) {
|
||||
// 每4个字符换行
|
||||
return value.match(/.{1,4}/g).join('\n');
|
||||
}
|
||||
return value.match(/.{1,4}/g).join("\n");
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '得分',
|
||||
type: "value",
|
||||
name: "得分",
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 10,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: function(value) {
|
||||
color: "#fff",
|
||||
formatter: function (value) {
|
||||
return value; // 确保y轴标签也不显示百分号
|
||||
}
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
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;
|
||||
}
|
||||
color: "rgba(255,255,255,0.1)",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
}
|
||||
}]
|
||||
},
|
||||
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 () {
|
||||
window.addEventListener("resize", function () {
|
||||
myChart2.resize();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="../../css/dataAnalysis/dataAnalysis.css">
|
||||
<link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
|
||||
<link rel="stylesheet" href="../../css/coreTable.css"/>
|
||||
<link rel="stylesheet" href="../../css/accessMge/accessMge.css">
|
||||
<link rel="stylesheet" href="../../css/coreTable.css" />
|
||||
<link rel="stylesheet" href="../../css/accessMge/accessMge.css">
|
||||
<script src="../../js/publics/sm4.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/public.js"></script>
|
||||
|
|
@ -24,39 +24,64 @@
|
|||
<title>工程质量分析</title>
|
||||
</head>
|
||||
<script type="text/javascript">
|
||||
let text = nickName +"\r\n"+ roleName +"\r\n" + '建设部';
|
||||
// watermark.load({ watermark_txt: text });
|
||||
let text = nickName + "\r\n" + roleName + "\r\n" + '建设部';
|
||||
// watermark.load({ watermark_txt: text });
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<div id="proQuality">
|
||||
<table id="demo2" lay-filter="test"></table>
|
||||
</div>
|
||||
<div id="proQuality">
|
||||
|
||||
|
||||
<div class="leftBox">
|
||||
<table id="demo2" lay-filter="test"></table>
|
||||
</div>
|
||||
|
||||
<div class="rightBox" id="rightLineBox">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div id="oneEcharts">
|
||||
</div> -->
|
||||
|
||||
<div id="oneEcharts">
|
||||
</div>
|
||||
|
||||
<div id="twoEcharts">
|
||||
</div>
|
||||
</body>
|
||||
<style>
|
||||
.layui-table-init {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
#demo2{
|
||||
|
||||
#demo2 {
|
||||
margin-top: 26px;
|
||||
}
|
||||
#proQuality{
|
||||
width: 75%;
|
||||
|
||||
#proQuality {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
#oneEcharts{
|
||||
|
||||
.leftBox {
|
||||
width: 75%;
|
||||
|
||||
}
|
||||
|
||||
.rightBox {
|
||||
width: 25%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#oneEcharts {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
#twoEcharts{
|
||||
|
||||
#twoEcharts {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../js/pages/newDataAnalysis/proQualityAnalysis.js" type="text/javascript"></script>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
Loading…
Reference in New Issue