Merge remote-tracking branch 'origin/master'

This commit is contained in:
liang.chao 2025-07-24 13:34:40 +08:00
commit c9dcf490a1
7 changed files with 272 additions and 53 deletions

View File

@ -35,14 +35,16 @@ function initTable(bidCode,name) {
},
cols: [[
{ type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
{ field: 'proName', title: '工程名称', align: 'center', width: '10%' },
{ field: 'workLocation', title: '作业地点', align: 'center', width: '10%' },
{ field: 'monitoringPointId', title: '监测点编号', align: 'center', width: '10%' },
{ field: 'name', title: '监测点名称', align: 'center', width: '20%' },
{ field: 'temperature', title: '当前温度', align: 'center', width: '10%' },
{ field: 'humidity', title: '当前湿度', align: 'center', width: '10%' },
{ field: 'windSpeed', title: '当前风速', align: 'center', width: '10%' },
{ field: 'gasValue', title: '当前气体值', align: 'center', width: '10%' },
{ field: 'name', title: '监测点名称', align: 'center', width: '10%' },
{ field: 'temperature', title: '当前温度', align: 'center', width: '8%' },
{ field: 'humidity', title: '当前湿度', align: 'center', width: '8%' },
{ field: 'windSpeed', title: '当前风速', align: 'center', width: '8%' },
{ field: 'gasValue', title: '当前气体值', align: 'center', width: '8%' },
{
field: 'rateLevel', title: '最高隐患等级', align: 'center', width: '20%',
field: 'rateLevel', title: '最高隐患等级', align: 'center', width: '10%',
templet: function (d) {
let color = '';
if (d.level == "一般隐患") {
@ -54,6 +56,14 @@ function initTable(bidCode,name) {
}
return '<p style="color:' + color + '">' + d.level + '</p>';
}
},
{
title: "操作",
align: "center",
width: '8%',
templet: function (row) {
return `<span onclick="handlDetails('${row.analysisReason}')" style="background-color: #16BAAA;border: 2px solid #16BAAA;cursor:pointer; "> 分析与改进</span>`
},
}
]],
initComplete: function () {
@ -305,3 +315,59 @@ function initEchartsTwo(data) {
}
myChart2.setOption(riskOption, true)
}
function handlDetails(analysisReason){
// 分离原因分析和改进措施
const [reason, measure] = analysisReason.match(/原因分析:(.*)。改进措施:(.*)/).slice(1);
// 创建一个包含分析原因及改进措施的HTML结构
const content = `
<div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
<div style="flex: 1; padding: 20px; background: transparent; border-radius: 8px; margin-bottom: 20px;">
<h3 style="margin-bottom: 10px; color: #fff;">分析原因及改进措施</h3>
<div style="display: flex; flex-direction: column;">
<div style="margin-bottom: 10px;">
<span style="font-weight: bold; color: #CFD3D4;">原因分析</span>
<span style="color: #fff;">${reason}</span>
</div>
<div>
<span style="font-weight: bold; color: #CFD3D4;">改进措施</span>
<span style="color: #fff;">${measure}</span>
</div>
</div>
</div>
<div id='oneEcharts' style='width: 100%; height: 400px;'></div>
</div>
`;
layer.open({
type: 1,
title: "分析原因及改进措施",
content: content,
area: ["400px", "300px"],
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", // 边框颜色(如果按钮有边框)
});
},
});
}

View File

@ -74,7 +74,15 @@ function initTable(type, bidCode) {
});
},
done: function (res, curr, count, origin) {
// console.log(res);
$(".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导出");
}
);
},
});

View File

@ -26,7 +26,16 @@ function setCols(type) {
{ field: "processDiff", title: "进度偏差", align: "center" },
{ field: "completeEffort", title: "已完成工程量", align: "center" },
{ field: "totalEffort", title: "总工程量", align: "center" },
{ field: "delayActor", title: "延误因素分析", align: "center" },
{
title: "延误因素分析",
align: "center",
templet: (d) => {
let text = "";
text +=
'<a id="viewBtn" style="color: #007bff;cursor: pointer;font-size: 16px">查看</a>';
return text;
},
},
{
field: "resourceMatchStatus",
title: "资源匹配状态",
@ -114,6 +123,64 @@ function initTable(type, bidCode) {
if (res.code !== 200 || !res.rows || res.rows.length === 0) {
layer.msg("暂无数据", { icon: 2 });
}
// 查看按钮点击
$(".layui-table-body table.layui-table tbody tr #viewBtn").on(
"click",
function () {
// 获取当前行的数据
var index = $(this).index();
var rowData = res.rows[index]; // 获取对应行的数据
// 弹框配置
layer.open({
type: 1,
title: "分析查看",
content:
"<div id='oneEcharts' style='width:100%;height:100%;padding: 10px;'>" +
"<div style='font-size: 16px; padding: 10px;'>延误原因:" +
rowData.delayActor +
"</div>" +
"<div style='font-size: 16px; padding: 10px;'>其他原因:" +
rowData.delayActor +
"</div>" +
"<div style='font-size: 16px; padding: 10px;'>分析结果:" +
rowData.delayActor +
"</div>" +
"<div style='font-size: 16px; padding: 10px;'>分析结论:" +
rowData.delayActor +
"</div>" +
"</div>",
area: ["600px", "auto"],
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", // 边框颜色(如果按钮有边框)
});
},
});
}
);
},
error: function () {
layer.msg("数据加载失败", { icon: 2 });
@ -121,6 +188,8 @@ function initTable(type, bidCode) {
});
}
$(".chart-box").hide();
$(".list-view").click(function () {
if ($(this).hasClass("active")) return;
@ -255,6 +324,11 @@ function initPieChart() {
top: "center", // 垂直居中
textStyle: {
color: "#fff", // 图例文字颜色设为白色
borderWidth: 0,
borderColor: "transparent",
},
itemStyle: {
borderWidth: 0, // 关键点:去除 legend 图例项(小色块)的边框
},
data: ["大气影响", "设备判断延迟", "人员不足", "设计变更", "其他"],
},
@ -273,8 +347,8 @@ function initPieChart() {
},
itemStyle: {
borderRadius: 5, // 每块扇形圆角效果
borderColor: "#000", // 边框颜色(用于间隙)
borderWidth: 1, // 边框宽度1px 每边,形成 2px 间隙)
borderColor: "#333", // 边框颜色(用于间隙)
borderWidth: 2, // 边框宽度1px 每边,形成 2px 间隙)
},
data: [
{

View File

@ -195,7 +195,7 @@ function initUtilizationChart(distributionData) {
name: '资源利用率',
type: 'pie',
radius: ['40%', '70%'],
center: ['65%', '50%'],
center: ['65%', '40%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 8,
@ -313,15 +313,15 @@ function initTrendsChart(trendsData) {
textStyle: {
color: '#16baaa'
},
top: 10
// top: 10
},
grid: {
/* grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '15%',
bottom: '0%',
top: '5%',
containLabel: true
},
}, */
xAxis: {
type: 'category',
boundaryGap: false,
@ -475,6 +475,9 @@ function showNoDataMessage() {
};
trendsChart.setOption(option);
window.addEventListener("resize", function () {
trendsChart.resize();
});
}
/**

View File

@ -1,5 +1,12 @@
let table, layer, form;
let myChart = null, myChart2 = null;
const tipsArr = [
'定期开展技能培训与考核,并对施工工具进行例行检查,确保安全与效率。',
'加强技能培训,定期组织考试,同时落实施工工具的日常检查制度。',
'定期安排技能培训及考核,并严格执行施工工具的定期检查管理。',
'持续强化技能培训与考核,同时确保施工工具按时检查,保障作业安全。',
'定期组织技能培训和考试,并做好施工工具的维护与定期检查工作。',
];
layui.use(['layer', 'table', 'form'], function () {
layer = layui.layer;
table = layui.table;
@ -141,7 +148,9 @@ function initEcharts(data) {
let unitTimeOutput = parseFloat(data.unitTimeOutput) || 0;
if (unitTimeOutput < min) {
initEchartsTwo(data);
$('#suggestion').append('<p>建议:定期加强技能培训和考试,并且针对施工工具安排定期检查</p>');
const randomIndex = Math.floor(Math.random() * tipsArr.length); // 生成 0~4 的随机整数
const randomItem = tipsArr[randomIndex];
$('#suggestion').append('<p>建议:'+randomItem+'</p>');
}
}

View File

@ -3,19 +3,19 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>工地整体效能分析系统</title>
<title>工地整体效能分析</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<style>
:root {
--primary: #1a3a5f;
--primary: #20d3c2 ;
--secondary: #2c5c8c;
--accent: #4caf50;
--warning: #ff9800;
--danger: #f44336;
--light: #f5f7fa;
--dark: #333;
--dark: #8cc8c1;
--gray: #e4e7eb;
--card-shadow: 0 4px 15px rgba(0,0,0,0.08);
--bg-color: #ffffff;
@ -30,15 +30,19 @@
body {
background-color: transparent;
color: var(--dark);
min-height: 100vh;
/* min-height: 98vh; */
height: 100%;
overflow-x: hidden;
padding: 20px;
/* padding: 20px; */
}
.container {
max-width: 1400px;
height: 100%;
margin: 0 auto;
padding: 20px;
/* padding: 20px; */
padding: 50px 20px 0 20px;
}
header {
@ -75,7 +79,7 @@
}
.last-update {
color: #666;
color: #8cc8c1;
font-size: 0.9rem;
}
@ -88,10 +92,13 @@
}
.kpi-card {
background: var(--bg-color);
/* background: var(--bg-color); */
background: linear-gradient(135deg, rgba(22, 186, 170, 0.1) 0%, rgba(22, 186, 170, 0.05) 100%);
border: 1px solid rgba(22, 186, 170, 0.3);
box-shadow: 0 4px 20px rgb;
border-radius: 12px;
padding: 25px;
box-shadow: var(--card-shadow);
/* box-shadow: var(--card-shadow); */
display: flex;
flex-direction: column;
transition: transform 0.3s;
@ -144,13 +151,14 @@
.kpi-title {
font-size: 1rem;
font-weight: 500;
color: #666;
color: #8cc8c1;
}
.kpi-value {
font-size: 2.2rem;
font-weight: 700;
margin: 10px 0;
color: #8cc8c1;
}
.kpi-trend {
@ -170,11 +178,13 @@
/* 分析部分 */
.analysis-section {
background: var(--bg-color);
/* background: var(--bg-color); */
background: linear-gradient(135deg, rgba(22, 186, 170, 0.1) 0%, rgba(22, 186, 170, 0.05) 100%);
border-radius: 12px;
padding: 25px;
box-shadow: var(--card-shadow);
margin-bottom: 25px;
border-top: 4px solid var(--primary);
}
.section-title {
@ -194,15 +204,20 @@
.bottleneck-card {
border-left: 4px solid var(--warning);
padding: 15px;
background: #fff9e6;
border-radius: 0 8px 8px 0;
/* background: #fff9e6; */
background: rgba(22, 186, 170, 0.08);
border: 1px solid rgba(22, 186, 170, 0.2);
border-radius: 8px;
/* border-radius: 0 8px 8px 0; */
transition: all 0.3s;
cursor: pointer;
}
.bottleneck-card:hover {
transform: translateX(5px);
background: #fff1cc;
/* background: #fff1cc; */
background: rgba(22, 186, 170, 0.15);
border-color: rgba(22, 186, 170, 0.4);
}
.bottleneck-title {
@ -215,12 +230,14 @@
.bottleneck-desc {
font-size: 0.9rem;
color: #666;
color: #8cc8c1;
margin-bottom: 10px;
}
.optimization-card {
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
/* background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); */
background: rgba(22, 186, 170, 0.08);
border: 1px solid rgba(22, 186, 170, 0.2);
border-radius: 8px;
padding: 20px;
}
@ -235,7 +252,11 @@
}
.suggestion-item:hover {
background: rgba(255,255,255,0.5);
/* background: rgba(255,255,255,0.5); */
background: rgba(22, 186, 170, 0.15);
border-color: rgba(22, 186, 170, 0.4);
transform: translateX(5px);
/* box-shadow: -2px 0 10px rgba(22, 186, 170, 0.3); */
border-radius: 8px;
padding: 15px;
}
@ -263,7 +284,7 @@
}
.suggestion-content p {
color: #666;
color: #8cc8c1;
font-size: 0.9rem;
}
@ -300,7 +321,8 @@
}
.page-content {
background: white;
/* background: white; */
background: url("../../img/video/child-back.png") no-repeat 0 0/100% 100% transparent;
width: 90%;
max-width: 1000px;
max-height: 90vh;
@ -321,7 +343,7 @@
display: flex;
justify-content: space-between;
align-items: center;
background: #f5f5f5;
/* background: #f5f5f5; */
border-bottom: 1px solid #e0e0e0;
}
@ -414,7 +436,7 @@
/* 页脚 */
footer {
text-align: center;
color: #666;
color: #8cc8c1;
padding: 20px;
font-size: 0.9rem;
margin-top: 20px;
@ -453,7 +475,7 @@
.chart-box {
flex: 1 1 400px;
min-height: 300px;
background: white;
/* background: white; */
border-radius: 10px;
padding: 15px;
box-shadow: var(--card-shadow);
@ -483,6 +505,7 @@
.data-table td {
padding: 10px 15px;
border-bottom: 1px solid var(--gray);
color: #000;
}
.data-table tr:nth-child(even) {
@ -492,6 +515,11 @@
.data-table tr:hover {
background: rgba(26, 58, 95, 0.05);
}
/* background: rgba(22, 186, 170, 0.15);
border-color: rgba(22, 186, 170, 0.4);
transform: translateX(5px);
box-shadow: -2px 0 10px rgba(22, 186, 170, 0.3); */
</style>
</head>
<body>
@ -655,8 +683,8 @@
let url = commonUrl + "screen/Dashapi/pages/dashInfo";
ajaxRequest(url, "get", "", true, function () {
}, function (result) {
console.log("22222222222222222")
console.log(JSON.stringify(result));
// console.log("22222222222222222")
// console.log(JSON.stringify(result));
pageData=result;
initPage();
}, function (xhr, status, error) {
@ -745,7 +773,8 @@
});
// 渲染页脚
document.getElementById('footer-text').textContent = pageData.footer;
// document.getElementById('footer-text').textContent = pageData.footer;
document.getElementById('footer-text').textContent = '';
}
// 渲染二级页面
@ -920,7 +949,8 @@
left: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'bold'
fontWeight: 'bold',
color:'#fff'
}
},
tooltip: {
@ -934,13 +964,29 @@
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'].slice(0, data.length)
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'].slice(0, data.length),
axisLabel: {
textStyle: {
color: '#fff', // 文字颜色
fontSize: 12 // 文字像素
}
},
},
yAxis: {
type: 'value',
name: '百分比 (%)',
min: 0,
max: 100
max: 100,
nameTextStyle: {
color: '#fff',
fontSize: 14
},
axisLabel: {
textStyle: {
color: '#fff', // 文字颜色
fontSize: 12 // 文字像素
}
},
},
series: [
{
@ -948,9 +994,15 @@
type: 'line',
data: data,
smooth: true,
label: {
show: true, // 线条折点处显示值
position: 'top', // 标签的位置
color: "#fff", // 文字颜色
fontSize: 12, // 文字像素
},
lineStyle: {
width: 3,
color: '#1a3a5f'
color: '#20d3c2'
},
itemStyle: {
color: '#2c5c8c'

View File

@ -13,9 +13,9 @@
<!-- Font Awesome 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Animate.css 动画库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> -->
<!-- Particles.js 粒子特效库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script> -->
<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>
@ -31,10 +31,14 @@
</head>
<style>
body{
height: 96%;
margin: 2% 0;
}
.resource-container {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0a1e2b 0%, #1a2f3a 50%, #0a1e2b 100%);
/* background: linear-gradient(135deg, #0a1e2b 0%, #1a2f3a 50%, #0a1e2b 100%); */
padding: 20px;
box-sizing: border-box;
overflow: hidden;
@ -68,7 +72,7 @@
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 30, 43, 0.9);
/* background: rgba(10, 30, 43, 0.9); */
display: flex;
justify-content: center;
align-items: center;
@ -134,6 +138,7 @@
.header-stats {
display: flex;
gap: 30px;
width: 35%;
}
.stat-item {
@ -208,7 +213,8 @@
background: linear-gradient(135deg, rgba(22, 186, 170, 0.1) 0%, rgba(22, 186, 170, 0.05) 100%);
border: 1px solid rgba(22, 186, 170, 0.3);
border-radius: 12px;
padding: 20px;
/* padding: 20px; */
padding: 5px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
@ -270,7 +276,8 @@
background: rgba(22, 186, 170, 0.1);
border: 1px solid rgba(22, 186, 170, 0.3);
border-radius: 8px;
padding: 20px;
/* padding: 20px; */
padding: 8px 10px 0 10px;
text-align: center;
position: relative;
transition: all 0.3s ease;
@ -478,7 +485,7 @@
<div class="resource-header animate__animated animate__fadeInDown">
<div class="header-title">
<i class="fas fa-chart-line header-icon"></i>
资源利用率实时监控
资源利用率分析
</div>
<div class="header-stats">
<div class="stat-item">