<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="utf-8">
|
<title>堆垛机异常</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="../../static/css/cool.css" media="all">
|
<link rel="stylesheet" href="../../static/css/common.css" media="all">
|
<style>
|
body {
|
background: #f5f7fa;
|
font-family: "Microsoft YaHei", sans-serif;
|
margin: 0;
|
padding: 0;
|
}
|
|
/* 顶部时间区域 */
|
.layui-inline {
|
background: #fff;
|
padding: 16px 20px;
|
border-radius: 10px;
|
box-shadow: 0 3px 12px rgba(0,0,0,0.06);
|
margin: 20px 0 0 20px;
|
display: inline-flex;
|
align-items: center;
|
}
|
|
.layui-form-label {
|
font-weight: bold;
|
}
|
|
/* 整体容器 */
|
#logContainer {
|
display: flex;
|
width: 100%;
|
margin-top: 20px;
|
height: 600px;
|
overflow-y: auto;
|
background: #fff;
|
border-radius: 12px;
|
box-shadow: 0 4px 18px rgba(0,0,0,0.08);
|
padding: 20px;
|
box-sizing: border-box;
|
}
|
|
/* 左右列 */
|
.log-column {
|
flex: 1;
|
padding: 10px 20px;
|
box-sizing: border-box;
|
}
|
|
.log-column.left {
|
border-right: 1px solid #e5e5e5;
|
}
|
|
/* 列标题 */
|
.column-title {
|
text-align: center;
|
font-size: 20px;
|
font-weight: bold;
|
margin-bottom: 18px;
|
padding-bottom: 10px;
|
border-bottom: 2px solid #eee;
|
}
|
|
.title-red { color: #e74c3c; }
|
.title-green { color: #27ae60; }
|
|
ul li {
|
display: inline-block; /* 改成行内块，自适应宽度 */
|
margin: 6px 6px 6px 0; /* 卡片间距 */
|
padding: 8px 12px; /* 内边距 */
|
border-radius: 10px;
|
font-size: 14px;
|
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
transition: all 0.2s;
|
white-space: nowrap; /* 防止文字换行，卡片宽度自适应内容 */
|
}
|
|
ul li:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
|
cursor: default;
|
}
|
|
/* 异常项 */
|
.error-item {
|
color: #c0392b;
|
background: #fdecea;
|
border: 1px solid #f5c5c5;
|
}
|
|
/* 正常项 */
|
.normal-item {
|
color: #1e8449;
|
background: #eafaf1;
|
border: 1px solid #c7e6d1;
|
}
|
|
</style>
|
</head>
|
<body>
|
<div class="layui-inline">
|
<label class="layui-form-label">发生时间：</label>
|
<div class="layui-input-inline">
|
<input id="createTime" class="layui-input" type="text" disabled="disabled">
|
</div>
|
</div>
|
|
<div id="logContainer">
|
<!-- 异常列 -->
|
<div class="log-column left">
|
<h3 class="column-title title-red">异常项(Y)</h3>
|
<ul id="errorList"></ul>
|
</div>
|
|
<!-- 正常列 -->
|
<div class="log-column">
|
<h3 class="column-title title-green">无异常项(N)</h3>
|
<ul id="normalList"></ul>
|
</div>
|
</div>
|
|
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
|
<script type="text/javascript">
|
var parentUuid;
|
|
/** 列结构 */
|
function getCol() {
|
return [
|
{field: 'crnNo', title: '编号'},
|
{field: 'ibDriveFault', title: '行走变频器故障'},
|
{field: 'ibSupplyFault', title: '提共变频器故障'},
|
{field: 'ibForkDriveFault', title: '货叉变频器故障'},
|
{field: 'ibDriveCircuitFault', title: '行走断路器故障'},
|
{field: 'ibLiftCircuitFault', title: '提升断路器故障'},
|
{field: 'ibForkCircuitFault', title: '货叉断路器故障'},
|
{field: 'ibForwardLimit', title: '前进限位'},
|
{field: 'ibReverseLimit', title: '后退限位'},
|
{field: 'ibDriveStart', title: '行走原点'},
|
{field: 'ibForwardBrakeSpeed', title: '前进强制低速'},
|
{field: 'ibReverseBrakeSpeed', title: '后退强制低速'},
|
{field: 'ibUpLimit', title: '上升限位'},
|
{field: 'ibDownLimit', title: '下限限位'},
|
{field: 'ibUpOrigin', title: '提升原点'},
|
{field: 'ibUpBrakeSpeed', title: '上升强制低速'},
|
{field: 'ibDownBrakeSpeed', title: '下降强制低速'},
|
{field: 'ibPlatformSignal', title: '载货台探货'},
|
{field: 'ibForkMidSignal', title: '货叉中位信号'},
|
{field: 'ibForkLeftLimit', title: '货叉左极限'},
|
{field: 'ibForkRightLimit', title: '货叉右极限'},
|
{field: 'ibFrontOverLimit', title: '前超限'},
|
{field: 'ibRearOverLimit', title: '后超限'},
|
{field: 'ibLeftOverLimit', title: '左超限'},
|
{field: 'ibRightOverLimit', title: '右超限'},
|
{field: 'ibHighOverLimit1', title: '高超限1'},
|
{field: 'ibHighOverLimit2', title: '高超限2'},
|
{field: 'ibHighOverLimit3', title: '高超限3'},
|
{field: 'ibOneExtendLeftLoad1', title: '一伸左侧探货1'},
|
{field: 'ibOneExtendLeftLoad2', title: '一伸左侧探货2'},
|
{field: 'ibOneExtendRightLoad1', title: '一伸右侧探货1'},
|
{field: 'ibOneExtendRightLoad2', title: '一伸右侧探货2'},
|
{field: 'ibTwoExtendLeftLoad1', title: '二伸左侧探货1'},
|
{field: 'ibTwoExtendLeftLoad2', title: '二伸左侧探货2'},
|
{field: 'ibTwoExtendRightLoad1', title: '二伸右侧探货1'},
|
{field: 'ibTwoExtendRightLoad2', title: '二伸右侧探货2'},
|
{field: 'ibSpeedSignal1', title: '超速信号1'},
|
{field: 'ibSpeedSignal2', title: '超速信号2'},
|
{field: 'ibOverweightSignal1', title: '超重信号1'},
|
{field: 'ibOverweightSignal2', title: '超重信号2'},
|
{field: 'ibRopeReleaseSignal1', title: '松绳信号1'},
|
{field: 'ibRopeReleaseSignal2', title: '松绳信号2'},
|
{field: 'ibSafetyClamp', title: '安全钳'},
|
{field: 'ibTightener', title: '张紧器'},
|
{field: 'ibSpeedLimiter', title: '限速器'},
|
{field: 'ibSafetyDoorOpen', title: '安全门打开'}
|
];
|
}
|
|
/** 格式化时间 */
|
function formatDateTime(isoString) {
|
const date = new Date(isoString);
|
const y = date.getFullYear();
|
const m = String(date.getMonth() + 1).padStart(2, '0');
|
const d = String(date.getDate()).padStart(2, '0');
|
const hh = String(date.getHours()).padStart(2, '0');
|
const mm = String(date.getMinutes()).padStart(2, '0');
|
const ss = String(date.getSeconds()).padStart(2, '0');
|
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
|
}
|
|
/** 渲染双列卡片列表 */
|
function renderList(data) {
|
const cols = getCol();
|
$("#errorList").empty();
|
$("#normalList").empty();
|
cols.forEach(col => {
|
const field = col.field;
|
const title = col.title;
|
if (data[field] === "Y") {
|
$("#errorList").append(`<li class="error-item">${title}</li>`);
|
} else if (data[field] === "N") {
|
$("#normalList").append(`<li class="normal-item">${title}</li>`);
|
}
|
});
|
}
|
|
/** 查询后端数据 */
|
function renderTable() {
|
if (!parentUuid) return;
|
$.ajax({
|
url: baseUrl + '/basCrnErrorLog/listByUuid/auth',
|
method: 'GET',
|
headers: { token: localStorage.getItem('token') },
|
data: { uuid: parentUuid, curr: 1, limit: 1 },
|
success: function(res) {
|
if (res.code !== 200) return;
|
const record = res.data.records[0];
|
if (record) renderList(record);
|
}
|
});
|
}
|
|
/** 父页面调用 */
|
function setUuid(uuid){
|
parentUuid = uuid;
|
renderTable();
|
}
|
|
function setCreateTime(value){
|
$('#createTime').val(formatDateTime(value));
|
}
|
</script>
|
</body>
|
</html>
|
