<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8">
|
<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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
<title>输送设备管理</title>
|
<link rel="stylesheet" href="../static/css/normalize.css">
|
<link rel="stylesheet" href="../static/css/common.css">
|
<link rel="stylesheet" href="../static/css/pipeline.css">
|
<style>
|
/* 科技感主题样式 */
|
html, body {
|
background: linear-gradient(135deg, #0f172a, #1e293b);
|
color: #e2e8f0;
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
margin: 0;
|
padding: 0;
|
height: 100%;
|
overflow: hidden; /* 移除所有滚动条 */
|
}
|
|
.main-content {
|
background: transparent;
|
}
|
|
.container {
|
padding: 20px;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
main {
|
flex: 1;
|
overflow: hidden;
|
}
|
|
footer {
|
flex-shrink: 0;
|
}
|
|
/* 仪表盘头部样式 */
|
.dashboard-header {
|
margin-bottom: 30px;
|
padding: 20px;
|
background: rgba(30, 41, 59, 0.7);
|
border-radius: 12px;
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
backdrop-filter: blur(10px);
|
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
|
text-align: center;
|
}
|
|
.dashboard-title {
|
color: #60a5fa;
|
font-size: 2rem;
|
font-weight: 600;
|
margin: 0;
|
text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
|
}
|
|
|
|
/* 表格容器 */
|
.table-container {
|
flex: 1;
|
overflow-x: hidden;
|
overflow-y: auto;
|
background: rgba(17, 24, 39, 0.5);
|
border-radius: 12px;
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
backdrop-filter: blur(10px);
|
}
|
|
/* 表格容器滚动条样式 */
|
.table-container::-webkit-scrollbar {
|
width: 8px;
|
}
|
|
.table-container::-webkit-scrollbar-track {
|
background: rgba(30, 41, 59, 0.3);
|
border-radius: 4px;
|
}
|
|
.table-container::-webkit-scrollbar-thumb {
|
background: #3b82f6;
|
border-radius: 4px;
|
}
|
|
.table-container::-webkit-scrollbar-thumb:hover {
|
background: #60a5fa;
|
}
|
|
/* 现代化表格样式 */
|
.modern-table {
|
width: 100%;
|
table-layout: fixed;
|
border-collapse: separate;
|
border-spacing: 0;
|
background: transparent;
|
color: #e2e8f0;
|
}
|
|
/* 设置表格列宽，确保适应容器 */
|
.modern-table th,
|
.modern-table td {
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.modern-table thead {
|
position: sticky;
|
top: 0;
|
z-index: 10;
|
}
|
|
/* 确保表格容器有最大高度，以便滚动 */
|
.table-container {
|
max-height: calc(100vh - 200px);
|
}
|
|
.modern-table th {
|
background: linear-gradient(135deg, #1e293b, #334155);
|
color: #94a3b8;
|
font-weight: 600;
|
text-transform: uppercase;
|
letter-spacing: 0.5px;
|
padding: 15px 12px;
|
text-align: center;
|
border-bottom: 2px solid #3b82f6;
|
font-size: 0.9rem;
|
}
|
|
.modern-table td {
|
padding: 12px;
|
text-align: center;
|
border-bottom: 1px solid rgba(59, 130, 246, 0.1);
|
transition: all 0.2s ease;
|
}
|
|
.modern-table tbody tr {
|
background: rgba(30, 41, 59, 0.3);
|
}
|
|
.modern-table tbody tr:nth-child(even) {
|
background: rgba(30, 41, 59, 0.5);
|
}
|
|
.modern-table tbody tr:hover {
|
background: rgba(59, 130, 246, 0.15);
|
transform: scale(1.01);
|
box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
|
}
|
|
/* 站点状态行颜色 */
|
.modern-table tbody tr.row-auto-green {
|
border-left: 4px solid #4ade80;
|
background: rgba(74, 222, 128, 0.1);
|
}
|
|
.modern-table tbody tr.row-auto-gray {
|
border-left: 4px solid #94a3b8;
|
background: rgba(148, 163, 184, 0.1);
|
}
|
|
.modern-table tbody tr.row-yellow {
|
border-left: 4px solid #fbbf24;
|
background: rgba(251, 191, 36, 0.15);
|
box-shadow: inset 0 0 10px rgba(251, 191, 36, 0.2);
|
}
|
|
.modern-table tbody tr.row-red {
|
border-left: 4px solid #f87171;
|
background: rgba(248, 113, 113, 0.15);
|
box-shadow: inset 0 0 10px rgba(248, 113, 113, 0.2);
|
}
|
|
/* 悬停时保持状态颜色 */
|
.modern-table tbody tr.row-auto-green:hover {
|
background: rgba(74, 222, 128, 0.2);
|
box-shadow: 0 0 15px rgba(74, 222, 128, 0.4);
|
}
|
|
.modern-table tbody tr.row-auto-gray:hover {
|
background: rgba(148, 163, 184, 0.2);
|
box-shadow: 0 0 15px rgba(148, 163, 184, 0.4);
|
}
|
|
.modern-table tbody tr.row-yellow:hover {
|
background: rgba(251, 191, 36, 0.25);
|
box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
|
}
|
|
.modern-table tbody tr.row-red:hover {
|
background: rgba(248, 113, 113, 0.25);
|
box-shadow: 0 0 15px rgba(248, 113, 113, 0.5);
|
}
|
|
/* 状态指示器样式 */
|
.status-indicator {
|
display: inline-flex;
|
align-items: center;
|
gap: 6px;
|
padding: 4px 12px;
|
border-radius: 20px;
|
font-weight: 600;
|
font-size: 0.85rem;
|
}
|
|
.status-active {
|
background: rgba(74, 222, 128, 0.2);
|
color: #4ade80;
|
border: 1px solid rgba(74, 222, 128, 0.4);
|
}
|
|
.status-standby {
|
background: rgba(251, 191, 36, 0.2);
|
color: #fbbf24;
|
border: 1px solid rgba(251, 191, 36, 0.4);
|
}
|
|
.status-dot {
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
background: currentColor;
|
}
|
|
.status-yes {
|
color: #4ade80;
|
font-weight: 600;
|
}
|
|
.status-no {
|
color: #94a3b8;
|
}
|
|
/* 站点卡片样式 */
|
.site-card {
|
background: rgba(30, 41, 59, 0.7);
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
border-radius: 12px;
|
padding: 20px;
|
backdrop-filter: blur(10px);
|
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
|
transition: all 0.3s ease;
|
position: relative;
|
overflow: hidden;
|
}
|
|
/* 根据状态显示不同颜色边框 */
|
.site-card.status-normal {
|
border-left: 4px solid #4ade80;
|
}
|
|
.site-card.status-warning {
|
border-left: 4px solid #fbbf24;
|
}
|
|
.site-card.status-error {
|
border-left: 4px solid #f87171;
|
}
|
|
.site-card.status-standby {
|
border-left: 4px solid #94a3b8;
|
}
|
|
.site-card::before {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
height: 4px;
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
|
}
|
|
.site-card:hover {
|
transform: translateY(-5px);
|
box-shadow: 0 12px 40px rgba(59, 130, 246, 0.4);
|
border-color: rgba(59, 130, 246, 0.6);
|
}
|
|
.site-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid rgba(59, 130, 246, 0.2);
|
}
|
|
.site-id {
|
font-size: 1.4rem;
|
font-weight: 700;
|
color: #60a5fa;
|
margin: 0;
|
}
|
|
.site-status {
|
padding: 4px 12px;
|
border-radius: 20px;
|
font-size: 0.8rem;
|
font-weight: 600;
|
text-transform: uppercase;
|
}
|
|
.status-active {
|
background: rgba(74, 222, 128, 0.2);
|
color: #4ade80;
|
border: 1px solid rgba(74, 222, 128, 0.4);
|
}
|
|
.status-standby {
|
background: rgba(251, 191, 36, 0.2);
|
color: #fbbf24;
|
border: 1px solid rgba(251, 191, 36, 0.4);
|
}
|
|
.site-info {
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
gap: 12px;
|
}
|
|
.info-item {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.info-label {
|
font-size: 0.85rem;
|
color: #94a3b8;
|
margin-bottom: 4px;
|
}
|
|
.info-value {
|
font-size: 1rem;
|
font-weight: 500;
|
color: #e2e8f0;
|
}
|
|
.info-value.highlight {
|
color: #4ade80;
|
font-weight: 600;
|
}
|
|
.status-indicator {
|
display: inline-flex;
|
align-items: center;
|
gap: 6px;
|
}
|
|
.status-dot {
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
background: currentColor;
|
}
|
|
/* 日志区域样式 */
|
footer {
|
margin-top: 30px;
|
padding: 20px;
|
background: rgba(17, 24, 39, 0.7);
|
border-radius: 12px;
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
}
|
|
.output-log {
|
width: 100%;
|
height: 100px;
|
background: rgba(0, 0, 0, 0.3);
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
border-radius: 8px;
|
color: #4ade80;
|
font-family: 'Courier New', monospace;
|
font-size: 12px;
|
padding: 10px;
|
resize: vertical;
|
}
|
|
/* 弹窗样式 */
|
.site-detail-form {
|
background: rgba(30, 41, 59, 0.95);
|
border: 1px solid rgba(59, 130, 246, 0.5);
|
border-radius: 12px;
|
padding: 25px;
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
|
max-height: 90vh;
|
overflow: hidden;
|
}
|
|
.detail-form {
|
max-height: calc(90vh - 50px);
|
overflow-y: auto;
|
scrollbar-width: thin;
|
scrollbar-color: #3b82f6 rgba(30, 41, 59, 0.3);
|
}
|
|
.detail-form::-webkit-scrollbar {
|
width: 6px;
|
}
|
|
.detail-form::-webkit-scrollbar-track {
|
background: rgba(30, 41, 59, 0.3);
|
border-radius: 3px;
|
}
|
|
.detail-form::-webkit-scrollbar-thumb {
|
background: #3b82f6;
|
border-radius: 3px;
|
}
|
|
.detail-form::-webkit-scrollbar-thumb:hover {
|
background: #60a5fa;
|
}
|
|
.form-item {
|
margin-bottom: 20px;
|
}
|
|
.form-label {
|
display: block;
|
color: #e2e8f0;
|
margin-bottom: 8px;
|
font-weight: 500;
|
}
|
|
.layui-input {
|
width: 100%;
|
padding: 12px 15px;
|
background: rgba(17, 24, 39, 0.8);
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
border-radius: 6px;
|
color: #e2e8f0;
|
font-size: 14px;
|
transition: all 0.3s ease;
|
}
|
|
.layui-input:focus {
|
outline: none;
|
border-color: #3b82f6;
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
|
}
|
|
.form-button {
|
padding: 12px 25px;
|
border: none;
|
border-radius: 6px;
|
font-size: 14px;
|
font-weight: 600;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
margin-right: 10px;
|
}
|
|
.form-button:first-child {
|
background: linear-gradient(135deg, #3b82f6, #60a5fa);
|
color: white;
|
}
|
|
.form-button:last-child {
|
background: rgba(209, 213, 219, 0.2);
|
color: #94a3b8;
|
}
|
|
.form-button:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
}
|
|
/* 现代化模态框样式 */
|
.modal-overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.7);
|
backdrop-filter: blur(5px);
|
display: none;
|
justify-content: center;
|
align-items: center;
|
z-index: 1000;
|
opacity: 0;
|
transition: opacity 0.3s ease;
|
}
|
|
.modal-overlay.active {
|
display: flex;
|
opacity: 1;
|
}
|
|
.modal-container {
|
background: rgba(30, 41, 59, 0.95);
|
border: 1px solid rgba(59, 130, 246, 0.5);
|
border-radius: 16px;
|
width: 90%;
|
max-width: 420px;
|
max-height: 90vh;
|
overflow: hidden;
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
|
transform: scale(0.9);
|
transition: transform 0.3s ease;
|
}
|
|
.modal-overlay.active .modal-container {
|
transform: scale(1);
|
}
|
|
.modal-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20px 25px;
|
background: linear-gradient(90deg, rgba(30, 41, 59, 0.8), rgba(56, 189, 248, 0.1));
|
border-bottom: 1px solid rgba(59, 130, 246, 0.3);
|
}
|
|
.modal-title {
|
color: #60a5fa;
|
font-size: 1.25rem;
|
font-weight: 600;
|
margin: 0;
|
}
|
|
.modal-close {
|
background: rgba(239, 68, 68, 0.2);
|
border: none;
|
color: #ef4444;
|
font-size: 1.5rem;
|
width: 32px;
|
height: 32px;
|
border-radius: 50%;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.modal-close:hover {
|
background: rgba(239, 68, 68, 0.3);
|
transform: rotate(90deg);
|
}
|
|
.modal-body {
|
padding: 25px;
|
max-height: calc(90vh - 140px);
|
overflow-y: auto;
|
}
|
|
.modal-body::-webkit-scrollbar {
|
width: 6px;
|
}
|
|
.modal-body::-webkit-scrollbar-track {
|
background: rgba(30, 41, 59, 0.3);
|
border-radius: 3px;
|
}
|
|
.modal-body::-webkit-scrollbar-thumb {
|
background: #3b82f6;
|
border-radius: 3px;
|
}
|
|
.form-group {
|
margin-bottom: 20px;
|
}
|
|
.form-group:last-child {
|
margin-bottom: 0;
|
}
|
|
.form-label {
|
display: block;
|
color: #e2e8f0;
|
margin-bottom: 8px;
|
font-weight: 500;
|
font-size: 0.9rem;
|
}
|
|
.form-input {
|
width: 100%;
|
padding: 12px 15px;
|
background: rgba(17, 24, 39, 0.8);
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
border-radius: 8px;
|
color: #e2e8f0;
|
font-size: 14px;
|
transition: all 0.3s ease;
|
box-sizing: border-box;
|
}
|
|
.form-input:focus {
|
outline: none;
|
border-color: #3b82f6;
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
|
}
|
|
.modal-footer {
|
display: flex;
|
gap: 12px;
|
padding: 20px 25px;
|
background: rgba(17, 24, 39, 0.5);
|
border-top: 1px solid rgba(59, 130, 246, 0.2);
|
}
|
|
.btn {
|
flex: 1;
|
padding: 12px 20px;
|
border: none;
|
border-radius: 8px;
|
font-size: 14px;
|
font-weight: 600;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
}
|
|
.btn-primary {
|
background: linear-gradient(135deg, #3b82f6, #60a5fa);
|
color: white;
|
}
|
|
.btn-primary:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
|
}
|
|
.btn-secondary {
|
background: rgba(209, 213, 219, 0.2);
|
color: #94a3b8;
|
}
|
|
.btn-secondary:hover {
|
background: rgba(209, 213, 219, 0.3);
|
transform: translateY(-2px);
|
}
|
|
/* 成功提示样式 */
|
.toast {
|
position: fixed;
|
top: 20px;
|
right: 20px;
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
padding: 16px 24px;
|
border-radius: 12px;
|
background: rgba(30, 41, 59, 0.95);
|
border: 1px solid rgba(74, 222, 128, 0.3);
|
backdrop-filter: blur(10px);
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
z-index: 2000;
|
transform: translateX(120%);
|
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
opacity: 0;
|
}
|
|
.toast.show {
|
transform: translateX(0);
|
opacity: 1;
|
}
|
|
.toast-success {
|
border-left: 4px solid #4ade80;
|
}
|
|
.toast-icon {
|
font-size: 24px;
|
color: #4ade80;
|
font-weight: bold;
|
animation: pulse 1.5s infinite;
|
}
|
|
.toast-message {
|
color: #e2e8f0;
|
font-size: 16px;
|
font-weight: 500;
|
}
|
|
@keyframes pulse {
|
0% { transform: scale(1); }
|
50% { transform: scale(1.2); }
|
100% { transform: scale(1); }
|
}
|
|
/* IO模式按钮样式 */
|
.io-mode-box {
|
float: left;
|
width: 16%;
|
text-align: center;
|
}
|
|
.io-mode-box label {
|
font-weight: bolder;
|
color: #e2e8f0;
|
}
|
|
.ioModeBtn {
|
vertical-align: middle;
|
width: 50%;
|
height: 30px;
|
font-size: 15px;
|
margin: 0 5px;
|
display: inline-block;
|
background: linear-gradient(135deg, #ef4444, #f87171);
|
border: none;
|
color: #FFF;
|
border-radius: 6px;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
|
}
|
|
.ioModeBtn:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 1200px) {
|
.sites-grid {
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
}
|
}
|
|
@media (max-width: 768px) {
|
.dashboard-header {
|
flex-direction: column;
|
gap: 20px;
|
}
|
|
.dashboard-stats {
|
width: 100%;
|
justify-content: space-around;
|
}
|
|
.sites-grid {
|
grid-template-columns: 1fr;
|
}
|
}
|
</style>
|
<script src="../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script src="../static/js/common.js"></script>
|
<script src="../static/js/layer/layer.js"></script>
|
</head>
|
<body>
|
<!-- 左侧按钮区域 -->
|
<aside class="sidebar" style="padding: 10px; height: 100%; float: left; width: 6%;">
|
<div class="button-window"></div>
|
</aside>
|
|
<!-- 主内容区域 -->
|
<div class="main-content" style="height: 100vh; padding-left: 6%; overflow: hidden;">
|
<div class="container" style="padding: 10px; height: 100%; overflow-y: auto;">
|
<!-- 主要内容 -->
|
<main>
|
<!-- 站点状态数据监控版 -->
|
<section id="site-monitor" class="main-board">
|
<!-- <div class="dashboard-header">-->
|
<!-- <h3 class="dashboard-title">站点实时监控</h3>-->
|
<!-- </div>-->
|
|
<!-- 表格容器 -->
|
<div class="table-container">
|
<table id="site-table" class="modern-table">
|
<thead>
|
<tr>
|
<th>站号</th>
|
<th>工作号</th>
|
<th>自动</th>
|
<th>有物</th>
|
<th>可入</th>
|
<th>可出</th>
|
<th>入库标记</th>
|
<th>空板信号</th>
|
<th>目标站</th>
|
<th>高低库位</th>
|
</tr>
|
</thead>
|
<tbody>
|
<!-- 表格内容将在这里动态生成 -->
|
</tbody>
|
</table>
|
</div>
|
</section>
|
</main>
|
|
<!-- 页脚区域 -->
|
<footer>
|
<textarea id="output" class="output-log"></textarea>
|
</footer>
|
|
<!-- 成功提示 -->
|
<div id="success-toast" class="toast toast-success">
|
<div class="toast-icon">✓</div>
|
<div class="toast-message">操作成功</div>
|
</div>
|
|
<!-- 站点详情弹窗 -->
|
<div id="modal-overlay" class="modal-overlay">
|
<div class="modal-container">
|
<div class="modal-header">
|
<h3 class="modal-title">站点信息编辑</h3>
|
<button class="modal-close" id="modal-close">×</button>
|
</div>
|
<div class="modal-body">
|
<form class="detail-form" id="site-form">
|
<div class="form-group">
|
<label class="form-label" for="siteId">站号:</label>
|
<input id="siteId" name="siteId" class="form-input" type="number"
|
autocomplete="off" disabled>
|
</div>
|
<div class="form-group">
|
<label class="form-label" for="workNo">工作号:</label>
|
<input id="workNo" name="workNo" type="number" class="form-input"
|
autocomplete="off">
|
</div>
|
<div class="form-group">
|
<label class="form-label" for="staNo">目标站:</label>
|
<input id="staNo" name="staNo" type="number" class="form-input"
|
autocomplete="off">
|
</div>
|
<div class="form-group">
|
<label class="form-label" for="pakMk">入库标记:</label>
|
<input id="pakMk" name="pakMk" type="text" class="form-input"
|
autocomplete="off">
|
</div>
|
</form>
|
</div>
|
<div class="modal-footer">
|
<button type="button" class="btn btn-primary" id="save">保存</button>
|
<button type="button" class="btn btn-secondary" id="cancel">取消</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
<script>
|
// 自执行函数表达式，避免全局变量污染
|
(function () {
|
// 初始化变量
|
let isSiteUpdatePaused = false;
|
let plcErrorTableBlankRows = 0;
|
let siteTableBlankRows = 0;
|
let plcErrorTableFullRows = 0;
|
let siteTableFullRows = 0;
|
const outputDom = document.getElementById("output");
|
let ioModeData = [];
|
let layerDetl = null;
|
let timers = [];
|
let sitesData = [];
|
|
// DOM加载完成后初始化
|
$(document).ready(function () {
|
// 加载初始数据
|
getSite();
|
|
// 初始化定时器
|
initTimers();
|
});
|
|
// 初始化定时器
|
function initTimers() {
|
// 每秒更新PLC错误、站点信息和IO模式
|
timers.push(setInterval(() => {
|
if (!isSiteUpdatePaused) {
|
getSite();
|
}
|
getIoModeInfo();
|
}, 1000));
|
|
// 每500毫秒更新站点输出日志
|
timers.push(setInterval(() => {
|
getSiteOutput();
|
}, 500));
|
}
|
|
|
/**
|
* 强制切换入出库模式
|
* @param {string} el - 元素ID
|
*/
|
function ioModeSwitch(el) {
|
const floor = el.split("-")[2];
|
const targetFloor = ioModeData.find(e => e.floor === Number(floor));
|
|
if (targetFloor && (targetFloor.modeVal === 3 || targetFloor.modeVal === 4)) {
|
layer.confirm('确定切换为入库模式吗？', () => {
|
ajaxRequest({
|
url: `${baseUrl}/site/io/mode/action/site`,
|
method: 'POST',
|
data: {floor: targetFloor.floor},
|
success: (res) => {
|
layer.msg("暂时不能切换！", {icon: 1});
|
}
|
});
|
layer.closeAll();
|
});
|
}
|
}
|
|
|
|
// 获取站点信息表
|
function getSite() {
|
const tableEl = $('#site-table tbody');
|
|
ajaxRequest({
|
url: `${baseUrl}/site/table/site`,
|
method: 'POST',
|
success: (res) => {
|
if (res.data) {
|
sitesData = res.data;
|
renderTable(sitesData);
|
}
|
}
|
});
|
}
|
|
// 渲染表格数据
|
function renderTable(sites) {
|
const tbody = $('#site-table tbody');
|
tbody.empty();
|
|
sites.forEach(site => {
|
const row = createTableRow(site);
|
tbody.append(row);
|
});
|
}
|
|
// 创建表格行
|
function createTableRow(site) {
|
const isActive = site.autoing === 'Y';
|
const hasLoad = site.loading === 'Y';
|
const hasWorkNo = !!site.workNo && site.workNo !== '';
|
|
// 根据状态确定行样式类
|
let rowClass = '';
|
if (isActive) {
|
rowClass = 'row-auto-green'; // 自动为绿色
|
} else {
|
rowClass = 'row-auto-gray'; // 不自动为灰色
|
}
|
|
// 特殊状态覆盖
|
if (hasLoad && !hasWorkNo) {
|
rowClass = 'row-yellow'; // 有物无工作号为黄色
|
} else if (!hasLoad && hasWorkNo) {
|
rowClass = 'row-red'; // 无物有工作号为红色
|
}
|
|
return `
|
<tr data-site-id="${site.devNo}" class="${rowClass}">
|
<td>${site.devNo}</td>
|
<td>${site.workNo || '--'}</td>
|
<td>
|
<span class="status-indicator ${isActive ? 'status-active' : 'status-standby'}">
|
<span class="status-dot"></span>
|
${isActive ? '自动' : '非自动'}
|
</span>
|
</td>
|
<td>
|
<span class="${hasLoad ? 'status-yes' : 'status-no'}">
|
${hasLoad ? 'Y' : 'N'}
|
</span>
|
</td>
|
<td>
|
<span class="${site.inEnable === 'Y' ? 'status-yes' : 'status-no'}">
|
${site.inEnable === 'Y' ? 'Y' : 'N'}
|
</span>
|
</td>
|
<td>
|
<span class="${site.outEnable === 'Y' ? 'status-yes' : 'status-no'}">
|
${site.outEnable === 'Y' ? 'Y' : 'N'}
|
</span>
|
</td>
|
<td>${site.pakMk || '--'}</td>
|
<td>${site.emptyMk || '--'}</td>
|
<td>${site.staNo || '--'}</td>
|
<td>${site.locType1 || '--'}</td>
|
</tr>
|
`;
|
}
|
|
|
|
// 获取输送设备日志输出
|
function getSiteOutput() {
|
ajaxRequest({
|
url: `${baseUrl}/site/output/site`,
|
method: 'POST',
|
success: (res) => {
|
if (res.data) {
|
output(res.data);
|
}
|
},
|
error: (res) => {
|
alert(res.msg);
|
}
|
});
|
}
|
|
// 日志输出框
|
function output(content) {
|
outputDom.value += content;
|
outputDom.scrollTop = outputDom.scrollHeight;
|
}
|
|
// 详情操作 - 改为双击表格行
|
$(document).on('dblclick', '#site-table tbody tr', function () {
|
isSiteUpdatePaused = true;
|
const siteId = $(this).data('site-id');
|
|
if (siteId) {
|
// 显示模态框
|
const modal = $('#modal-overlay');
|
modal.addClass('active');
|
|
// 设置标题
|
$('.modal-title').text(`站点 #${siteId} 编辑`);
|
|
// 加载数据
|
http.get(`${baseUrl}/site/detl/${siteId}`, null, (res) => {
|
if (res.data) {
|
$('#siteId').val(siteId);
|
$('#workNo').val(res.data.workNo);
|
$('#staNo').val(res.data.staNo);
|
$('#pakMk').val(res.data.pakMk);
|
}
|
});
|
}
|
});
|
|
// 模态框关闭功能
|
function closeModal() {
|
$('#modal-overlay').removeClass('active');
|
// 清空表单
|
$('#site-form')[0].reset();
|
$('#siteId').val("");
|
isSiteUpdatePaused = false;
|
}
|
|
// 点击遮罩层关闭
|
$(document).on('click', '#modal-overlay', function(e) {
|
if (e.target.id === 'modal-overlay') {
|
closeModal();
|
}
|
});
|
|
// 点击关闭按钮
|
$(document).on('click', '#modal-close', function () {
|
closeModal();
|
});
|
|
// 显示成功提示
|
function showSuccessMessage(message) {
|
const toast = $('#success-toast');
|
$('.toast-message', toast).text(message);
|
toast.addClass('show');
|
|
// 3秒后自动隐藏
|
setTimeout(() => {
|
toast.removeClass('show');
|
}, 3000);
|
}
|
|
// 保存站点信息
|
$(document).on('click', '#save', function () {
|
http.post(`${baseUrl}/site/detl/update`, {
|
siteId: $('#siteId').val(),
|
workNo: $('#workNo').val(),
|
staNo: $('#staNo').val(),
|
pakMk: $('#pakMk').val()
|
}, (res) => {
|
showSuccessMessage("修改成功");
|
setTimeout(() => {
|
closeModal();
|
}, 1500);
|
});
|
});
|
|
// 取消站点信息修改
|
$(document).on('click', '#cancel', function () {
|
closeModal();
|
});
|
|
// 通用AJAX请求函数
|
function ajaxRequest(options) {
|
const defaultOptions = {
|
headers: {'token': localStorage.getItem('token')},
|
success: () => {
|
},
|
error: () => {
|
}
|
};
|
|
const opts = {...defaultOptions, ...options};
|
|
$.ajax({
|
url: opts.url,
|
headers: opts.headers,
|
method: opts.method,
|
data: opts.data,
|
success: (res) => {
|
if (res.code === 200) {
|
opts.success(res);
|
} else if (res.code === 403) {
|
window.location.href = `${baseUrl}/login`;
|
} else {
|
console.log(res.msg);
|
//opts.error(res);
|
}
|
},
|
error: (jqXHR, textStatus, errorThrown) => {
|
console.error('AJAX Error:', textStatus, errorThrown);
|
//opts.error({ msg: '请求失败，请稍后重试' });
|
}
|
});
|
}
|
})();
|
|
</script>
|
</html>
|
