319 lines
13 KiB
JavaScript
319 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;
|
|||
|
|
let bidCode = parent.parent.$('#bidPro').val()
|
|||
|
|
initTable(bidCode, "");
|
|||
|
|
|
|||
|
|
initTable2(bidCode, "");
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
function initTable(bidCode, name) {
|
|||
|
|
const url = commonUrl + "screen/largeScreen/engineeringSafetyAnalysis/list";
|
|||
|
|
table.render({
|
|||
|
|
elem: '#demo1',
|
|||
|
|
url: url,
|
|||
|
|
id: 'demo1',
|
|||
|
|
skin: 'line',
|
|||
|
|
page: true,
|
|||
|
|
height: 'full-505',
|
|||
|
|
headers: {
|
|||
|
|
"decrypt": "decrypt",
|
|||
|
|
"Authorization": token
|
|||
|
|
},
|
|||
|
|
where: {
|
|||
|
|
bidCode: bidCode,
|
|||
|
|
name: 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: '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: '10%'},
|
|||
|
|
{
|
|||
|
|
field: 'rateLevel', title: '隐患', align: 'center', width: '8%',
|
|||
|
|
templet: function (d) {
|
|||
|
|
let color = '';
|
|||
|
|
// if (d.level == "一般隐患") {
|
|||
|
|
// color = 'green';
|
|||
|
|
// } else if (d.level == '较大隐患') {
|
|||
|
|
// color = 'yellow';
|
|||
|
|
// } else if (d.level == '重大隐患') {
|
|||
|
|
// color = 'red';
|
|||
|
|
// }
|
|||
|
|
return '<p >存在隐患</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 () {
|
|||
|
|
// 在表格渲染完成后，重新渲染序号列
|
|||
|
|
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) {
|
|||
|
|
// console.log(res);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function query(type) {
|
|||
|
|
let name = $('#name').val();
|
|||
|
|
let bidCode = parent.parent.$('#bidPro').val()
|
|||
|
|
initTable(bidCode, name);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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", // 边框颜色（如果按钮有边框）
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initTable2(bidCode, name) {
|
|||
|
|
const url = commonUrl + "screen/largeScreen/engineeringSafetyAnalysis/list";
|
|||
|
|
|
|||
|
|
// 获取数据
|
|||
|
|
$.ajax({
|
|||
|
|
url: url,
|
|||
|
|
type: "get",
|
|||
|
|
headers: {
|
|||
|
|
"decrypt": "decrypt",
|
|||
|
|
"Authorization": token
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
bidCode: bidCode,
|
|||
|
|
name: name,
|
|||
|
|
page: '1',
|
|||
|
|
limit: '10'
|
|||
|
|
},
|
|||
|
|
success: function (data) {
|
|||
|
|
const container = document.getElementById('demo2-container');
|
|||
|
|
container.innerHTML = ''; // 清空容器
|
|||
|
|
|
|||
|
|
if (data.data && data.data.length > 0) {
|
|||
|
|
data.data.forEach(item => {
|
|||
|
|
const card = document.createElement('div');
|
|||
|
|
card.className = 'card';
|
|||
|
|
card.style.cssText = ` width: calc(20% - 10px);
|
|||
|
|
height: 150px;
|
|||
|
|
background-color: #1a3a4c;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 创建图片区域
|
|||
|
|
const imgDiv = document.createElement('div');
|
|||
|
|
imgDiv.style.cssText = ` flex: 1;
|
|||
|
|
background-color: #2a4a5c;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 12px;
|
|||
|
|
`;
|
|||
|
|
imgDiv.textContent = '未带安全帽';
|
|||
|
|
card.appendChild(imgDiv);
|
|||
|
|
// 创建信息区域
|
|||
|
|
const infoDiv = document.createElement('div');
|
|||
|
|
infoDiv.style.cssText = ` padding: 5px;
|
|||
|
|
background-color: #1a3a4c;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
const dateSpan = document.createElement('span');
|
|||
|
|
dateSpan.textContent = item.date || 'XXX-XX-XX';
|
|||
|
|
|
|||
|
|
const statusSpan = document.createElement('span');
|
|||
|
|
statusSpan.textContent = '未带安全帽';
|
|||
|
|
|
|||
|
|
infoDiv.appendChild(dateSpan);
|
|||
|
|
infoDiv.appendChild(statusSpan);
|
|||
|
|
card.appendChild(infoDiv);
|
|||
|
|
|
|||
|
|
container.appendChild(card);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 添加 Layui 分页
|
|||
|
|
layui.use('laypage', function(){
|
|||
|
|
var laypage = layui.laypage;
|
|||
|
|
|
|||
|
|
laypage.render({
|
|||
|
|
elem: 'demo2-pagination', // 分页容器ID
|
|||
|
|
count: data.data.length, // 总条数
|
|||
|
|
limit: 10, // 每页显示条数
|
|||
|
|
curr: 1, // 当前页
|
|||
|
|
layout: ['prev','page','next', 'skip', 'count', 'limit'], // 布局
|
|||
|
|
prev: '<i class="layui-icon layui-icon-left"></i>', // 上一页图标
|
|||
|
|
next: '<i class="layui-icon layui-icon-right"></i>', // 下一页图标
|
|||
|
|
theme: '#3ACAB8', // 主题色
|
|||
|
|
jump: function(obj, first){
|
|||
|
|
if(!first){ // 非首次触发
|
|||
|
|
// 获取当前页码和每页条数
|
|||
|
|
const currentPage = obj.curr;
|
|||
|
|
const pageSize = obj.limit;
|
|||
|
|
|
|||
|
|
// 计算起始索引和结束索引
|
|||
|
|
const startIndex = (currentPage - 1) * pageSize;
|
|||
|
|
const endIndex = startIndex + pageSize;
|
|||
|
|
|
|||
|
|
// 重新获取数据（这里需要根据实际API调整）
|
|||
|
|
$.ajax({
|
|||
|
|
url: commonUrl + "screen/largeScreen/engineeringSafetyAnalysis/list",
|
|||
|
|
type: "get",
|
|||
|
|
headers: {
|
|||
|
|
"decrypt": "decrypt",
|
|||
|
|
"Authorization": token
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
bidCode: bidCode,
|
|||
|
|
name: name,
|
|||
|
|
page: currentPage,
|
|||
|
|
limit: pageSize
|
|||
|
|
},
|
|||
|
|
success: function (data) {
|
|||
|
|
// 清空容器
|
|||
|
|
const container = document.getElementById('demo2-container');
|
|||
|
|
container.innerHTML = '';
|
|||
|
|
|
|||
|
|
// 渲染当前页的数据
|
|||
|
|
if (data.data && data.data.length > 0) {
|
|||
|
|
const pageData = data.data.slice(startIndex, endIndex);
|
|||
|
|
|
|||
|
|
pageData.forEach(item => {
|
|||
|
|
const card = document.createElement('div');
|
|||
|
|
card.className = 'card';
|
|||
|
|
card.style.cssText = ` width: calc(20% - 10px);
|
|||
|
|
height: 150px;
|
|||
|
|
background-color: #1a3a4c;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
overflow: hidden;
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// 创建图片区域
|
|||
|
|
const imgDiv = document.createElement('div');
|
|||
|
|
imgDiv.style.cssText = ` flex: 1;
|
|||
|
|
background-color: #2a4a5c;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 12px;
|
|||
|
|
`;
|
|||
|
|
imgDiv.textContent = '未带安全帽';
|
|||
|
|
card.appendChild(imgDiv);
|
|||
|
|
|
|||
|
|
// 创建信息区域
|
|||
|
|
const infoDiv = document.createElement('div');
|
|||
|
|
infoDiv.style.cssText = ` padding: 5px;
|
|||
|
|
background-color: #1a3a4c;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
const dateSpan = document.createElement('span');
|
|||
|
|
dateSpan.textContent = item.date || 'XXX-XX-XX';
|
|||
|
|
|
|||
|
|
const statusSpan = document.createElement('span');
|
|||
|
|
statusSpan.textContent = '未带安全帽';
|
|||
|
|
|
|||
|
|
infoDiv.appendChild(dateSpan);
|
|||
|
|
infoDiv.appendChild(statusSpan);
|
|||
|
|
card.appendChild(infoDiv);
|
|||
|
|
|
|||
|
|
container.appendChild(card);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|