322 lines
14 KiB
JavaScript
322 lines
14 KiB
JavaScript
let table, layer, form, laydate;
|
|
let ballMachineData = [] // 存储球机列表数据
|
|
let selectedBallName = "" // 当前选中的球机名称
|
|
layui.use(['layer', 'table', 'form', 'laydate'], function () {
|
|
layer = layui.layer;
|
|
table = layui.table;
|
|
form = layui.form;
|
|
laydate = layui.laydate;
|
|
laydate.render({
|
|
elem: "#ID-laydate-rangeLinked",
|
|
range: ["#ID-laydate-start-date-1", "#ID-laydate-end-date-1"],
|
|
rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
|
|
});
|
|
|
|
// 工程安全分析-一本账
|
|
initTable();
|
|
// 工程安全分析-球机列表
|
|
getBallSelect()
|
|
});
|
|
|
|
function initTable(startTime, endTime) {
|
|
const url = commonUrl + "screen/proSafety/selectProSafetyLedger";
|
|
table.render({
|
|
elem: '#demo1',
|
|
url: url,
|
|
id: 'demo1',
|
|
skin: 'line',
|
|
page: true,
|
|
height: 'full-505',
|
|
headers: {
|
|
"decrypt": "decrypt",
|
|
"Authorization": token
|
|
},
|
|
where: {
|
|
startTime: startTime,
|
|
endTime: endTime
|
|
},
|
|
cols: [[
|
|
{type: 'numbers', title: '序号', width: '10%'}, // 添加序号列
|
|
{field: 'riskCode', title: '风险编号', align: 'center', width: '15%'},
|
|
{field: 'riskSite', title: '作业部位', align: 'center', width: '15%'},
|
|
{field: 'riskLevel', title: '风险等级', align: 'center', width: '15%'},
|
|
{field: 'controller', title: '预控措施', align: 'center', width: '15%'},
|
|
{field: 'riskController', title: '风险控制关键因素', align: 'center', width: '20%'},
|
|
{field: 'startTime', title: '开始日期', align: 'center', width: '10%'},
|
|
]],
|
|
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) {
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
function query() {
|
|
let startTime = "";
|
|
let endTime = "";
|
|
if ($("#ID-laydate-start-date-1").val() != "") {
|
|
startTime = $("#ID-laydate-start-date-1").val();
|
|
endTime = $("#ID-laydate-end-date-1").val();
|
|
} else {
|
|
startTime = "";
|
|
endTime = "";
|
|
}
|
|
initTable(startTime, endTime);
|
|
initTable2(startTime, endTime,selectedBallName);
|
|
}
|
|
|
|
function getBallSelect() {
|
|
const url = commonUrl + "screen/proSafety/selectBallSelect"
|
|
ajaxRequestGet(
|
|
url,
|
|
"GET",
|
|
true,
|
|
function () {
|
|
},
|
|
function (result) {
|
|
if (result.code === 200) {
|
|
setData(result.data);
|
|
} else if (result.code === 500) {
|
|
console.error("实时监测" + result.msg);
|
|
setData(null);
|
|
} else if (result.code === 401) {
|
|
loginout(1);
|
|
}
|
|
},
|
|
function (xhr, status, error) {
|
|
errorFn(xhr, status, error);
|
|
setData(null);
|
|
},
|
|
aqEnnable
|
|
);
|
|
|
|
/* 实时检测赋值 */
|
|
function setData(data) {
|
|
if (data && data.length > 0) {
|
|
ballMachineData = data
|
|
|
|
const dynamicList = document.getElementById("dynamic-list")
|
|
dynamicList.innerHTML = "" // 清空现有内容
|
|
|
|
data.forEach((item, index) => {
|
|
const listItem = document.createElement("li")
|
|
listItem.className = index === 0 ? "layout check" : "layout nocheck"
|
|
listItem.textContent = item.ballName
|
|
listItem.onclick = function () {
|
|
changeDynamicData(this, index)
|
|
}
|
|
dynamicList.appendChild(listItem)
|
|
})
|
|
|
|
if (data.length > 0) {
|
|
selectedBallName = data[0].ballName
|
|
// 获取当前时间范围
|
|
const startTime = $("#ID-laydate-start-date-1").val() || ""
|
|
const endTime = $("#ID-laydate-end-date-1").val() || ""
|
|
// 加载第一个球机的视频数据
|
|
initTable2(startTime, endTime, selectedBallName)
|
|
}
|
|
}
|
|
}
|
|
|
|
function changeDynamicData(element, index) {
|
|
// 移除所有选中状态
|
|
const dynamicItems = document.querySelectorAll("#dynamic-list .layout")
|
|
dynamicItems.forEach((item) => {
|
|
item.className = "layout nocheck"
|
|
})
|
|
|
|
// 设置当前选中项
|
|
element.className = "layout check"
|
|
|
|
selectedBallName = ballMachineData[index].ballName
|
|
|
|
// 获取当前时间范围
|
|
const startTime = $("#ID-laydate-start-date-1").val() || ""
|
|
const endTime = $("#ID-laydate-end-date-1").val() || ""
|
|
// 重新加载视频数据
|
|
initTable2(startTime, endTime, selectedBallName)
|
|
}
|
|
}
|
|
|
|
function initTable2(startTime, endTime,ballName) {
|
|
const url = commonUrl + "screen/proSafety/selectProSafetyVideo";
|
|
// 获取数据
|
|
$.ajax({
|
|
url: url,
|
|
type: "get",
|
|
headers: {
|
|
"decrypt": "decrypt",
|
|
"Authorization": token
|
|
},
|
|
data: {
|
|
startTime:startTime,
|
|
endTime:endTime,
|
|
ballName:ballName,
|
|
page: '1',
|
|
limit: '10'
|
|
},
|
|
success: (response) => {
|
|
const container = document.getElementById("demo2-container")
|
|
container.innerHTML = "" // 清空容器
|
|
|
|
if (response.code === 0 && response.data && response.data.length > 0) {
|
|
response.data.forEach((item) => {
|
|
const card = document.createElement("div")
|
|
card.className = "card"
|
|
card.style.cssText = `width: calc(20% - 10px);height: 150px;display: flex;flex-direction: column;overflow: hidden;cursor: pointer;`
|
|
|
|
// 创建图片区域
|
|
const imgDiv = document.createElement("div")
|
|
imgDiv.style.cssText = `flex: 1;display: flex;align-items: center;justify-content: center;overflow: hidden;`
|
|
|
|
// 显示实际图片
|
|
/*if (item.imagePath) {
|
|
const img = document.createElement("img")
|
|
img.src = commonUrl + item.imagePath // 拼接完整图片路径
|
|
img.style.cssText = `width: 100%;height: 100%;object-fit: cover;`
|
|
img.onerror = function () {
|
|
// 图片加载失败时显示文字
|
|
this.style.display = "none"
|
|
imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "图片加载失败"}</span>`
|
|
}
|
|
imgDiv.appendChild(img)
|
|
} else {
|
|
imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "暂无图片"}</span>`
|
|
}*/
|
|
if (item.imagePath) { // 检查是否有Base64图像数据
|
|
const img = document.createElement("img");
|
|
img.src = item.imagePath; // 直接使用Base64数据
|
|
img.style.cssText = `width: 100%;height: 100%;object-fit: cover;`;
|
|
img.onerror = function () {
|
|
// 图片加载失败时显示文字
|
|
this.style.display = "none";
|
|
imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "图片加载失败"}</span>`;
|
|
};
|
|
imgDiv.appendChild(img);
|
|
} else {
|
|
imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "暂无图片"}</span>`;
|
|
}
|
|
|
|
card.appendChild(imgDiv)
|
|
|
|
// 创建信息区域
|
|
const infoDiv = document.createElement("div")
|
|
infoDiv.style.cssText = `padding: 5px;color: #fff;font-size: 12px;display: flex;justify-content: space-between;`
|
|
|
|
const dateSpan = document.createElement("span")
|
|
dateSpan.textContent = item.createTime || "XXX-XX-XX"
|
|
|
|
const statusSpan = document.createElement("span")
|
|
statusSpan.textContent = item.name || "未知"
|
|
|
|
infoDiv.appendChild(dateSpan)
|
|
infoDiv.appendChild(statusSpan)
|
|
card.appendChild(infoDiv)
|
|
|
|
container.appendChild(card)
|
|
})
|
|
|
|
// 添加 Layui 分页
|
|
layui.use("laypage", () => {
|
|
var laypage = layui.laypage
|
|
laypage.render({
|
|
elem: "demo2-pagination",
|
|
count: response.total || response.data.length, // 使用total字段
|
|
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: (obj, first) => {
|
|
if (!first) {
|
|
const currentPage = obj.curr
|
|
const pageSize = obj.limit
|
|
|
|
// 重新获取数据
|
|
$.ajax({
|
|
url: url,
|
|
type: "get",
|
|
headers: {
|
|
decrypt: "decrypt",
|
|
Authorization: token,
|
|
},
|
|
data: {
|
|
startTime: startTime,
|
|
endTime: endTime,
|
|
ballName: ballName,
|
|
page: currentPage,
|
|
limit: pageSize,
|
|
},
|
|
success: (pageResponse) => {
|
|
const container = document.getElementById("demo2-container")
|
|
container.innerHTML = ""
|
|
|
|
if (pageResponse.code === 0 && pageResponse.data && pageResponse.data.length > 0) {
|
|
pageResponse.data.forEach((item) => {
|
|
const card = document.createElement("div")
|
|
card.className = "card"
|
|
card.style.cssText = `width: calc(20% - 10px);height: 150px;display: flex;flex-direction: column;overflow: hidden;cursor: pointer;`
|
|
|
|
const imgDiv = document.createElement("div")
|
|
imgDiv.style.cssText = `flex: 1;display: flex;align-items: center;justify-content: center;overflow: hidden;`
|
|
|
|
if (item.imagePath) {
|
|
const img = document.createElement("img")
|
|
img.src = commonUrl + item.imagePath
|
|
img.style.cssText = `width: 100%;height: 100%;object-fit: cover;`
|
|
img.onerror = function () {
|
|
this.style.display = "none"
|
|
imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "图片加载失败"}</span>`
|
|
}
|
|
imgDiv.appendChild(img)
|
|
} else {
|
|
imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "暂无图片"}</span>`
|
|
}
|
|
|
|
card.appendChild(imgDiv)
|
|
|
|
const infoDiv = document.createElement("div")
|
|
infoDiv.style.cssText = `padding: 5px;color: #fff;font-size: 12px;display: flex;justify-content: space-between;`
|
|
|
|
const dateSpan = document.createElement("span")
|
|
dateSpan.textContent = item.createTime || "XXX-XX-XX"
|
|
|
|
const statusSpan = document.createElement("span")
|
|
statusSpan.textContent = item.name || "未知"
|
|
|
|
infoDiv.appendChild(dateSpan)
|
|
infoDiv.appendChild(statusSpan)
|
|
card.appendChild(infoDiv)
|
|
|
|
container.appendChild(card)
|
|
})
|
|
}
|
|
},
|
|
})
|
|
}
|
|
},
|
|
})
|
|
})
|
|
} else {
|
|
// 没有数据时显示提示
|
|
container.innerHTML = '<div style="width: 100%;text-align: center;color: #fff;padding: 20px;">暂无数据</div>'
|
|
}
|
|
},
|
|
error: (xhr, status, error) => {
|
|
console.error("视频数据加载失败:", error)
|
|
const container = document.getElementById("demo2-container")
|
|
container.innerHTML = '<div style="width: 100%;text-align: center;color: #fff;padding: 20px;">数据加载失败</div>'
|
|
},
|
|
});
|
|
}
|
|
|