<!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: 'devNo', align: 'center',title: '输送编号'}
|
,{field: 'passTimeOut', align: 'center',title: '物体进/出超时'}
|
,{field: 'objectNoIdError', align: 'center',title: '有物体无数据'}
|
,{field: 'idNoObjectError', align: 'center',title: '有数据无物体'}
|
,{field: 'lmfrError', align: 'center',title: '线体电机热继报警'}
|
,{field: 'liftError', align: 'center',title: '顶升报警'}
|
,{field: 'dlfrError', align: 'center',title: '顶升电机热继报警'}
|
,{field: 'dmfrError', align: 'center',title: '顶升横移电机热继报警'}
|
,{field: 'vfdError', align: 'center',title: '变频故障'}
|
,{field: 'srvError', align: 'center',title: '伺服故障'}
|
,{field: 'res1', align: 'center',title: '预留1',hide:true}
|
,{field: 'res2', align: 'center',title: '预留2',hide:true}
|
,{field: 'res3', align: 'center',title: '预留3',hide:true}
|
,{field: 'communicationTimeOut', align: 'center',title: '与上位机通讯超时'}
|
,{field: 'parameterIncompleteError', align: 'center',title: '信息参数不全'}
|
,{field: 'dataNotClear', align: 'center',title: '信息数据未清除'}
|
,{field: 'setParameterError', align: 'center',title: '参数设置报警'}
|
,{field: 'createTime$', align: 'center',title: '创建时间'}
|
// ,{field: 'inEnable', align: 'center',title: '',hide:true}
|
// ,{field: 'outEnable', align: 'center',title: '',hide:true}
|
,{field: 'dataError', align: 'center',title: '数据错误'}
|
// ,{field: 'id', align: 'center',title: '',hide:true}
|
,{field: 'sensorGArrive', align: 'center',title: '直线光电'}
|
,{field: 'sensorGDec', align: 'center',title: '减速光电'}
|
,{field: 'sensorGArrive2', align: 'center',title: '直线凸出'}
|
,{field: 'sensorLimit', align: 'center',title: '限位保护光电'}
|
,{field: 'emergency', align: 'center',title: '急停'}
|
,{field: 'sensorGLeave', align: 'center',title: '光电离开1'}
|
,{field: 'sensorGLeave2', align: 'center',title: '光电离开2'}
|
,{field: 'sensorCUp', align: 'center',title: '顶升上升'}
|
,{field: 'sensorCDown', align: 'center',title: '顶升下降'}
|
,{field: 'liftMotorFr', align: 'center',title: '顶升热继'}
|
,{field: 'lineMotorFr', align: 'center',title: '直线热继'}
|
,{field: 'tranMotorFr', align: 'center',title: '移栽热继'}
|
,{field: 'rst1', align: 'center',title: '备用1',hide:true}
|
,{field: 'rst2', align: 'center',title: '备用2',hide:true}
|
,{field: 'rst3', align: 'center',title: '备用3',hide:true}
|
,{field: 'rst4', align: 'center',title: '备用4',hide:true}
|
,{field: 'sensorArriveD', align: 'center',title: '直行方向到位',}
|
,{field: 'sensorDecD', align: 'center',title: '直行方向减速',}
|
,{field: 'sensorArriveL', align: 'center',title: '左移方向到位',}
|
,{field: 'sensorDecL', align: 'center',title: '左移方向减速',}
|
,{field: 'sensorArriveR', align: 'center',title: '右移方向到位',}
|
,{field: 'sensorDecR', align: 'center',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 + '/basDevpErrorLog/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>
|
