| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <html lang="zh-CN"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <title>WCS输送设备管理</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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
|---|
| | | <link rel="stylesheet" type="text/css" href="../static/css/normalize.css"> |
|---|
| | | <link rel="stylesheet" type="text/css" href="../static/css/common.css"> |
|---|
| | | <link rel="stylesheet" type="text/css" href="../static/css/pipeline.css"> |
|---|
| | | <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/common.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/layer/layer.js"></script> |
|---|
| | | <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: hidden; |
|---|
| | | background: rgba(17, 24, 39, 0.5); |
|---|
| | | border-radius: 12px; |
|---|
| | | border: 1px solid rgba(59, 130, 246, 0.3); |
|---|
| | | backdrop-filter: blur(10px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 现代化表格样式 */ |
|---|
| | | .modern-table { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | border-collapse: separate; |
|---|
| | | border-spacing: 0; |
|---|
| | | background: transparent; |
|---|
| | | color: #e2e8f0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .modern-table thead { |
|---|
| | | position: sticky; |
|---|
| | | top: 0; |
|---|
| | | z-index: 10; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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: 150px; |
|---|
| | | 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: 15px; |
|---|
| | | 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; |
|---|
| | | left: 0; |
|---|
| | | top: 0; |
|---|
| | | text-shadow: inherit; |
|---|
| | | font-size: 15px; |
|---|
| | | margin-left: 5px; |
|---|
| | | margin-right: 5px; |
|---|
| | | margin: 0 5px; |
|---|
| | | display: inline-block; |
|---|
| | | background-color: #FF5722; |
|---|
| | | background: linear-gradient(135deg, #ef4444, #f87171); |
|---|
| | | border: none; |
|---|
| | | color: #FFF; |
|---|
| | | box-shadow: 1px 1px 5px #B6B6B6; |
|---|
| | | border-radius: 3px; |
|---|
| | | 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> |
|---|
| | | <div style="padding: 10px;height: 100%;float: left;width: 6%"> |
|---|
| | | <!-- 左侧按钮区域 --> |
|---|
| | | <aside class="sidebar" style="padding: 10px; height: 100%; float: left; width: 6%;"> |
|---|
| | | <div class="button-window"></div> |
|---|
| | | </div> |
|---|
| | | </aside> |
|---|
| | | |
|---|
| | | <div style="height: 100%;padding-left: 6%"> |
|---|
| | | <div style="padding: 10px;height: 100%"> |
|---|
| | | <!-- 主内容区域 --> |
|---|
| | | <div class="main-content" style="height: 100vh; padding-left: 6%; overflow: hidden;"> |
|---|
| | | <div class="container" style="padding: 10px; height: 100%; overflow-y: auto;"> |
|---|
| | | <!-- 主要内容 --> |
|---|
| | | <main> |
|---|
| | | |
|---|
| | | <!-- plc异常日志监控版 --> |
|---|
| | | <div id="plc-error" class="main-board" style="padding-left: 10px"> |
|---|
| | | <!-- 头部 --> |
|---|
| | | <!-- <div class="plc-log-header">--> |
|---|
| | | <!-- <!– 设备任务操作 –>--> |
|---|
| | | <!-- <div class="io-mode-oper">--> |
|---|
| | | <!-- <fieldset>--> |
|---|
| | | <!-- <legend>入出库模式（IO-Mode）</legend>--> |
|---|
| | | <!-- <div class="io-mode-box">--> |
|---|
| | | <!-- <label>F2</label>--> |
|---|
| | | <!-- <button id="io-mode-2" class="ioModeBtn" onclick="ioModeSwitch(this.id)"> - </button>--> |
|---|
| | | <!-- </div>--> |
|---|
| | | <!-- <div class="io-mode-box">--> |
|---|
| | | <!-- <label>F4</label>--> |
|---|
| | | <!-- <button id="io-mode-4" class="ioModeBtn" onclick="ioModeSwitch(this.id)"> - </button>--> |
|---|
| | | <!-- </div>--> |
|---|
| | | <!-- </fieldset>--> |
|---|
| | | <!-- </div>--> |
|---|
| | | <!-- <!– <div style="height: 40%">–>--> |
|---|
| | | <!-- <!– <span>东侧PLC执行指令</span>–>--> |
|---|
| | | <!-- <!– </div>–>--> |
|---|
| | | <!-- <!– <div style="height: 40%">–>--> |
|---|
| | | <!-- <!– <span>西侧PLC执行指令</span>–>--> |
|---|
| | | <!-- <!– </div>–>--> |
|---|
| | | <!-- <!– <div>–>--> |
|---|
| | | <!-- <!– <span style="color: #1E9FFF">PLC异常信息表:</span>–>--> |
|---|
| | | <!-- <!– </div>–>--> |
|---|
| | | <!-- </div>--> |
|---|
| | | <!-- 主体 --> |
|---|
| | | <div class="plc-log-body"> |
|---|
| | | <div> |
|---|
| | | <span style="color: #1E9FFF">PLC异常信息表:</span> |
|---|
| | | </div> |
|---|
| | | <table id="plc-error-table"> |
|---|
| | | <!-- 站点状态数据监控版 --> |
|---|
| | | <section id="site-monitor" class="main-board"> |
|---|
| | | <div class="dashboard-header"> |
|---|
| | | <h2 class="dashboard-title">站点实时监控</h2> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 表格容器 --> |
|---|
| | | <div class="table-container"> |
|---|
| | | <table id="site-table" class="modern-table"> |
|---|
| | | <thead> |
|---|
| | | <tr> |
|---|
| | | <th style="width: 200px">序号</th> |
|---|
| | | <th style="width: 400px">PLC错误描述</th> |
|---|
| | | <th style="width: 400px">异常</th> |
|---|
| | | </tr> |
|---|
| | | <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> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 站点状态数据监控版 --> |
|---|
| | | <div id="site-monitor" class="main-board"> |
|---|
| | | <!-- 表格 --> |
|---|
| | | <!--固定表头 table 加table-layout: fixed; th 加 position:sticky;top: 0;--> |
|---|
| | | <table id="site-table" style="table-layout: fixed;"> |
|---|
| | | <!-- 表头 --> |
|---|
| | | <thead style="position:sticky;top: 0;"> |
|---|
| | | <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"></textarea> |
|---|
| | | <textarea id="output" class="output-log"></textarea> |
|---|
| | | </footer> |
|---|
| | | |
|---|
| | | <div id="site-detl" style="display: none"> |
|---|
| | | <form> |
|---|
| | | <div class="form-item"> |
|---|
| | | <label class="form-label">站号:</label> |
|---|
| | | <div class="form-input"> |
|---|
| | | <input id="siteId" name="siteId" class="layui-input" lay-verify="required|number" autocomplete="off" disabled="disabled"> |
|---|
| | | </div> |
|---|
| | | <!-- 成功提示 --> |
|---|
| | | <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="form-item"> |
|---|
| | | <label class="form-label">工作号:</label> |
|---|
| | | <div class="form-input"> |
|---|
| | | <input id="workNo" name="workNo" type="number" class="layui-input" lay-verify="number" autocomplete="off"> |
|---|
| | | </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="form-item"> |
|---|
| | | <label class="form-label">目标站:</label> |
|---|
| | | <div class="form-input"> |
|---|
| | | <input id="staNo" name="staNo" type="number" class="layui-input" lay-verify="number" autocomplete="off"> |
|---|
| | | </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 class="form-item"> |
|---|
| | | <label class="form-label">入库标记:</label> |
|---|
| | | <div class="form-input"> |
|---|
| | | <input id="pakMk" name="pakMk" type="text" class="layui-input" autocomplete="off"> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="form-item form-button-container"> |
|---|
| | | <button class="form-button" id="save">保存</button> |
|---|
| | | <button class="form-button" id="cancel" style="background-color: #D0D0D0">取消</button> |
|---|
| | | </div> |
|---|
| | | </form> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | <script> |
|---|
| | | // 初始化 |
|---|
| | | // 空白行数 |
|---|
| | | var stop = false |
|---|
| | | var plcErrorTableBlankRows = 0; |
|---|
| | | var siteTableBlankRows = 0; |
|---|
| | | // 实际行数 |
|---|
| | | var plcErrorTableFullRows = 0; |
|---|
| | | var siteTableFullRows = 0; |
|---|
| | | var outputDom = document.getElementById("output"); |
|---|
| | | $(document).ready(function() { |
|---|
| | | getIoModeInfo(); |
|---|
| | | initPlcErrorTable(); |
|---|
| | | getPlcError(); |
|---|
| | | initSiteTable(); |
|---|
| | | getSite(); |
|---|
| | | }); |
|---|
| | | // 实时访问 |
|---|
| | | setInterval(function () { |
|---|
| | | getPlcError(); |
|---|
| | | starGetSite(); |
|---|
| | | getIoModeInfo(); |
|---|
| | | }, 1000); |
|---|
| | | setInterval(function () { |
|---|
| | | getSiteOutput(); |
|---|
| | | },500); |
|---|
| | | function starGetSite() { |
|---|
| | | if (stop) { |
|---|
| | | return |
|---|
| | | } else { |
|---|
| | | // 自执行函数表达式，避免全局变量污染 |
|---|
| | | (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 () { |
|---|
| | | // 加载初始数据 |
|---|
| | | getPlcError(); |
|---|
| | | getSite(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | var ioModeData; |
|---|
| | | function getIoModeInfo() { |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl+ "/site/io/mode/info/site", |
|---|
| | | headers: {'token': localStorage.getItem('token')}, |
|---|
| | | method: 'GET', |
|---|
| | | success: function (res) { |
|---|
| | | if (res.code === 200){ |
|---|
| | | ioModeData = res.data; |
|---|
| | | ioModeData.forEach(function (e) { |
|---|
| | | $("#io-mode-"+e.floor).html(e.modeDesc); |
|---|
| | | }) |
|---|
| | | } else if (res.code === 403){ |
|---|
| | | window.location.href = baseUrl+"/login"; |
|---|
| | | } else { |
|---|
| | | console.log(res.msg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 初始化定时器 |
|---|
| | | initTimers(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 强制切换入出库模式 |
|---|
| | | */ |
|---|
| | | function ioModeSwitch(el) { |
|---|
| | | var floor = el.split("-")[2]; |
|---|
| | | if (ioModeData != null && ioModeData.length > 1) { |
|---|
| | | ioModeData.forEach(function(e) { |
|---|
| | | if (e.floor === Number(floor)) { |
|---|
| | | if (e.modeVal === 3 || e.modeVal === 4) { |
|---|
| | | layer.confirm('确定切换为入库模式吗？',function () { |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl+ "/site/io/mode/action/site", |
|---|
| | | headers: {'token': localStorage.getItem('token')}, |
|---|
| | | data: {floor: e.floor}, |
|---|
| | | method: 'POST', |
|---|
| | | success: function (res) { |
|---|
| | | if (res.code === 200){ |
|---|
| | | layer.msg("暂时不能切换！", {icon: 1}) |
|---|
| | | } else if (res.code === 403){ |
|---|
| | | window.location.href = baseUrl+"/login"; |
|---|
| | | } else { |
|---|
| | | console.log(res.msg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | layer.closeAll(); |
|---|
| | | }) |
|---|
| | | // 初始化定时器 |
|---|
| | | function initTimers() { |
|---|
| | | // 每秒更新PLC错误、站点信息和IO模式 |
|---|
| | | timers.push(setInterval(() => { |
|---|
| | | getPlcError(); |
|---|
| | | 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(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 获取PLC异常信息表 |
|---|
| | | function getPlcError() { |
|---|
| | | const tableEl = $('#plc-error-table'); |
|---|
| | | tableEl.children("tr").children("td").html(""); |
|---|
| | | |
|---|
| | | ajaxRequest({ |
|---|
| | | url: `${baseUrl}/site/table/plc/errors`, |
|---|
| | | method: 'POST', |
|---|
| | | success: (res) => { |
|---|
| | | if (res.data) { |
|---|
| | | const tableData = res.data; |
|---|
| | | for (let i = 0; i < tableData.length; i++) { |
|---|
| | | const tr = tableEl.find("tr").eq(i + 1); |
|---|
| | | tr.children("td").eq(0).html(tableData[i].no); |
|---|
| | | tr.children("td").eq(1).html(tableData[i].plcDesc); |
|---|
| | | tr.children("td").eq(2).html(tableData[i].error); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | // plc异常信息表获取 |
|---|
| | | function getPlcError() { |
|---|
| | | var tableEl = $('#plc-error-table'); |
|---|
| | | tableEl.children("tr").children("td").html(""); |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl+ "/site/table/plc/errors", |
|---|
| | | headers: {'token': localStorage.getItem('token')}, |
|---|
| | | method: 'POST', |
|---|
| | | success: function (res) { |
|---|
| | | if (res.code === 200){ |
|---|
| | | var table = res.data; |
|---|
| | | for (var i=1;i<=table.length;i++){ |
|---|
| | | var tr = tableEl.find("tr").eq(i); |
|---|
| | | tr.children("td").eq(0).html(table[i-1].no); |
|---|
| | | tr.children("td").eq(1).html(table[i-1].plcDesc); |
|---|
| | | tr.children("td").eq(2).html(table[i-1].error); |
|---|
| | | // 获取站点信息表 |
|---|
| | | 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); |
|---|
| | | } |
|---|
| | | } else if (res.code === 403){ |
|---|
| | | window.location.href = baseUrl+"/login"; |
|---|
| | | } else { |
|---|
| | | console.log(res.msg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 站点信息表获取 |
|---|
| | | function getSite() { |
|---|
| | | var tableEl = $('#site-table'); |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl+ "/site/table/site", |
|---|
| | | headers: {'token': localStorage.getItem('token')}, |
|---|
| | | method: 'POST', |
|---|
| | | success: function (res) { |
|---|
| | | if (res.code === 200){ |
|---|
| | | var table = res.data; |
|---|
| | | if (table.length > siteTableBlankRows && table.length !== siteTableFullRows) { |
|---|
| | | initSiteTable(table.length-siteTableBlankRows); |
|---|
| | | siteTableFullRows = table.length; |
|---|
| | | } |
|---|
| | | for (var i=1;i<=table.length;i++){ |
|---|
| | | var tr = tableEl.find("tr").eq(i); |
|---|
| | | setVal(tr.children("td").eq(0), table[i-1].devNo); |
|---|
| | | setVal(tr.children("td").eq(1), table[i-1].workNo); |
|---|
| | | setVal(tr.children("td").eq(2), table[i-1].autoing); |
|---|
| | | setVal(tr.children("td").eq(3), table[i-1].loading); |
|---|
| | | setVal(tr.children("td").eq(4), table[i-1].inEnable); |
|---|
| | | setVal(tr.children("td").eq(5), table[i-1].outEnable); |
|---|
| | | setVal(tr.children("td").eq(6), table[i-1].pakMk); |
|---|
| | | setVal(tr.children("td").eq(7), table[i-1].emptyMk); |
|---|
| | | setVal(tr.children("td").eq(8), table[i-1].staNo); |
|---|
| | | setVal(tr.children("td").eq(9), table[i-1].locType1); |
|---|
| | | } |
|---|
| | | } else if (res.code === 403){ |
|---|
| | | window.location.href = baseUrl+"/login"; |
|---|
| | | } else { |
|---|
| | | console.log(res.msg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // 渲染表格数据 |
|---|
| | | function renderTable(sites) { |
|---|
| | | const tbody = $('#site-table tbody'); |
|---|
| | | tbody.empty(); |
|---|
| | | |
|---|
| | | sites.forEach(site => { |
|---|
| | | const row = createTableRow(site); |
|---|
| | | tbody.append(row); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 输送设备日志输出 |
|---|
| | | function getSiteOutput() { |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl + "/site/output/site", |
|---|
| | | headers: {'token': localStorage.getItem('token')}, |
|---|
| | | method: 'POST', |
|---|
| | | success: function (res) { |
|---|
| | | if (res.code === 200) { |
|---|
| | | output(res.data); |
|---|
| | | } else if (res.code === 403) { |
|---|
| | | window.location.href = baseUrl + "/login"; |
|---|
| | | } else { |
|---|
| | | // 创建表格行 |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ------------------------------------------------------------------------------------------------ |
|---|
| | | |
|---|
| | | // plc异常空白表格渲染 |
|---|
| | | function initPlcErrorTable(row) { |
|---|
| | | var line; |
|---|
| | | if (row === undefined){ |
|---|
| | | var one = $('#plc-error-table thead').height(); |
|---|
| | | var total = $('.plc-log-body').height(); |
|---|
| | | var count = total / one; |
|---|
| | | count = parseInt(count) - 1; |
|---|
| | | plcErrorTableBlankRows = count; |
|---|
| | | line = count; |
|---|
| | | } else { |
|---|
| | | line = row; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | var html = ""; |
|---|
| | | for (var i = 0; i < line; i ++){ |
|---|
| | | html += " <tr>\n" + |
|---|
| | | " <td></td>\n" + |
|---|
| | | " <td></td>\n" + |
|---|
| | | " <td></td>\n" + |
|---|
| | | " </tr>\n"; |
|---|
| | | } |
|---|
| | | $('#plc-error-table tbody').after(html); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 站点空白表格渲染 |
|---|
| | | function initSiteTable(row) { |
|---|
| | | var line; |
|---|
| | | if (row === undefined){ |
|---|
| | | var one = $('#site-table thead').height(); |
|---|
| | | var total = $('#site-monitor').height(); |
|---|
| | | var count = total / one; |
|---|
| | | count = parseInt(count) - 1; |
|---|
| | | siteTableBlankRows = count; |
|---|
| | | line = count; |
|---|
| | | } else { |
|---|
| | | line = row; |
|---|
| | | // 日志输出框 |
|---|
| | | function output(content) { |
|---|
| | | outputDom.value += content; |
|---|
| | | outputDom.scrollTop = outputDom.scrollHeight; |
|---|
| | | } |
|---|
| | | var html = ""; |
|---|
| | | for (var i = 0; i < line; i ++){ |
|---|
| | | html += " <tr>\n" + |
|---|
| | | " <td></td>\n" + |
|---|
| | | " <td></td>\n" + |
|---|
| | | " <td></td>\n" + |
|---|
| | | " <td></td>\n" + |
|---|
| | | " <td></td>\n" + |
|---|
| | | " <td></td>\n" + |
|---|
| | | " <td></td>\n" + |
|---|
| | | " <td></td>\n" + |
|---|
| | | " <td></td>\n" + |
|---|
| | | " <td></td>\n" + |
|---|
| | | " </tr>\n"; |
|---|
| | | } |
|---|
| | | $('#site-table tbody').after(html); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 详情操作 ------------------------------------------------------------------------- |
|---|
| | | var layerDetl; |
|---|
| | | $(document).on('dblclick ','#site-table tr', function () { |
|---|
| | | stop = true |
|---|
| | | var siteId = $(this).children("td").eq(0).html(); |
|---|
| | | if (siteId !== null && siteId !== "") { |
|---|
| | | layerDetl = layer.open({ |
|---|
| | | type: 1, |
|---|
| | | title: false, |
|---|
| | | shadeClose: true, |
|---|
| | | offset: 'rt', |
|---|
| | | anim: 5, |
|---|
| | | shade: [0], |
|---|
| | | area: ['340px', '255px'], |
|---|
| | | closeBtn: 0, |
|---|
| | | content: $("#site-detl"), |
|---|
| | | success: function(layero, index){ |
|---|
| | | http.get(baseUrl+ "/site/detl/"+siteId, null, function (res) { |
|---|
| | | // 详情操作 - 改为双击表格行 |
|---|
| | | $(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); |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | end: function () { |
|---|
| | | $('#siteId').val(""); |
|---|
| | | $('#workNo').val(""); |
|---|
| | | $('#staNo').val(""); |
|---|
| | | $('#pakMk').val(""); |
|---|
| | | stop = false |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 模态框关闭功能 |
|---|
| | | 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 ','#save', function () { |
|---|
| | | http.post(baseUrl+ "/site/detl/update", { |
|---|
| | | siteId: $('#siteId').val(), |
|---|
| | | workNo: $('#workNo').val(), |
|---|
| | | staNo: $('#staNo').val(), |
|---|
| | | pakMk: $('#pakMk').val() |
|---|
| | | }, function (res) { |
|---|
| | | layer.msg("修改成功",{icon: 1,}); |
|---|
| | | layer.close(layerDetl); |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | $(document).on('click ','#cancel', function () { |
|---|
| | | $('#siteId').val(""); |
|---|
| | | $('#workNo').val(""); |
|---|
| | | $('#staNo').val(""); |
|---|
| | | $('#pakMk').val(""); |
|---|
| | | layer.close(layerDetl); |
|---|
| | | }) |
|---|
| | | // 点击关闭按钮 |
|---|
| | | $(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> |
|---|
