From b9fb4b46113492798a9c174d25cca28296605c76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com> Date: Thu, 11 Jun 2026 14:02:49 +0800 Subject: [PATCH] =?UTF-8?q?refactor(wms/coil):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E9=92=A2=E5=8D=B7=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=EF=BC=8C?= =?UTF-8?q?=E6=8B=86=E5=88=86=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 将原钢卷详情页面拆分为多个独立组件，按功能模块划分 2. 调整路由指向，将页面入口指向新的页面文件 3. 新增状态工具类，封装通用格式化和样式 --- klp-ui/src/router/index.js | 2 +- klp-ui/src/views/wms/coil/info.vue | 3399 ----------------- klp-ui/src/views/wms/coil/info/coil-info.scss | 1286 +++++++ .../coil/info/components/BasicInfoSection.vue | 20 + .../coil/info/components/CoilCardCompact.vue | 85 + .../info/components/CoilCardFuturistic.vue | 153 + .../wms/coil/info/components/ContractInfo.vue | 43 + .../coil/info/components/CostInfoSection.vue | 36 + .../coil/info/components/InspectionInfo.vue | 110 + .../coil/info/components/LifecycleTrace.vue | 158 + .../coil/info/components/ProductionCharts.vue | 434 +++ .../info/components/SalesObjectionTable.vue | 47 + .../wms/coil/info/components/ShipmentCard.vue | 91 + .../coil/info/components/TransferRecords.vue | 68 + klp-ui/src/views/wms/coil/info/index.vue | 451 +++ klp-ui/src/views/wms/coil/info/statusUtils.js | 20 + 16 files changed, 3003 insertions(+), 3400 deletions(-) delete mode 100644 klp-ui/src/views/wms/coil/info.vue create mode 100644 klp-ui/src/views/wms/coil/info/coil-info.scss create mode 100644 klp-ui/src/views/wms/coil/info/components/BasicInfoSection.vue create mode 100644 klp-ui/src/views/wms/coil/info/components/CoilCardCompact.vue create mode 100644 klp-ui/src/views/wms/coil/info/components/CoilCardFuturistic.vue create mode 100644 klp-ui/src/views/wms/coil/info/components/ContractInfo.vue create mode 100644 klp-ui/src/views/wms/coil/info/components/CostInfoSection.vue create mode 100644 klp-ui/src/views/wms/coil/info/components/InspectionInfo.vue create mode 100644 klp-ui/src/views/wms/coil/info/components/LifecycleTrace.vue create mode 100644 klp-ui/src/views/wms/coil/info/components/ProductionCharts.vue create mode 100644 klp-ui/src/views/wms/coil/info/components/SalesObjectionTable.vue create mode 100644 klp-ui/src/views/wms/coil/info/components/ShipmentCard.vue create mode 100644 klp-ui/src/views/wms/coil/info/components/TransferRecords.vue create mode 100644 klp-ui/src/views/wms/coil/info/index.vue create mode 100644 klp-ui/src/views/wms/coil/info/statusUtils.js diff --git a/klp-ui/src/router/index.js b/klp-ui/src/router/index.js index 2208f08ae..66a57965e 100644 --- a/klp-ui/src/router/index.js +++ b/klp-ui/src/router/index.js @@ -121,7 +121,7 @@ export const constantRoutes = [ }, { path: 'coil/:coilId', - component: () => import('@/views/wms/coil/info'), + component: () => import('@/views/wms/coil/info/index'), name: 'CoilInfo', meta: { title: '数字钢卷', icon: 'checkbox' } }, diff --git a/klp-ui/src/views/wms/coil/info.vue b/klp-ui/src/views/wms/coil/info.vue deleted file mode 100644 index 6e20f7d94..000000000 --- a/klp-ui/src/views/wms/coil/info.vue +++ /dev/null @@ -1,3399 +0,0 @@ - - - - - diff --git a/klp-ui/src/views/wms/coil/info/coil-info.scss b/klp-ui/src/views/wms/coil/info/coil-info.scss new file mode 100644 index 000000000..ad84da384 --- /dev/null +++ b/klp-ui/src/views/wms/coil/info/coil-info.scss @@ -0,0 +1,1286 @@ +.coil-info-page { + /* coil-info shared styles - global (non-scoped) for all child components */ + +.page-header { + margin-bottom: 16px; +} + +.header-title { + font-size: 20px; + font-weight: 700; + color: #1e293b; + text-shadow: 0 0 10px rgba(59, 130, 246, 0.1); +} + +.header-divider { + height: 2px; + width: 60px; + background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%); + margin-top: 8px; + box-shadow: 0 0 8px rgba(59, 130, 246, 0.3); +} + +.section { + border: 1px solid rgba(59, 130, 246, 0.2); + background: rgba(255, 255, 255, 0.9); + overflow: hidden; + position: relative; + box-shadow: + 0 0 0 1px rgba(59, 130, 246, 0.1) inset, + 0 4px 16px rgba(59, 130, 246, 0.08); +} + +.section-header { + display: flex; + align-items: center; + padding: 10px 16px; + border-bottom: 1px solid rgba(59, 130, 246, 0.15); + background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.02) 100%); +} + +.section-icon { + font-size: 16px; + margin-right: 8px; + filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.3)); +} + +.section-title { + font-size: 15px; + font-weight: 700; + color: #1e293b; + letter-spacing: 1px; + background: linear-gradient(90deg, #3b82f6, #60a5fa); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.section-body { + padding: 12px 16px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.6) 100%); +} + +.trace-content { + display: flex; + flex-direction: column; + gap: 10px; +} + +.step-item { + background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%); + padding: 12px 14px; + border: 1px solid rgba(59, 130, 246, 0.2); + box-shadow: + 0 2px 8px rgba(59, 130, 246, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.9); + position: relative; + overflow: hidden; +} + +.step-item::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), transparent); +} + +.step-content { + display: flex; + align-items: stretch; + gap: 10px; +} + +.coil-card-wrapper { + flex: 1; + display: flex; + flex-direction: column; + gap: 8px; +} + +.coil-card-header { + padding: 6px 12px; + background: linear-gradient(145deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%); + border: 1px solid rgba(59, 130, 246, 0.2); + border-bottom: none; +} + +.card-label { + font-size: 13px; + font-weight: 700; + color: #1e293b; + letter-spacing: 0.5px; +} + +.coil-card { + padding: 10px; + background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%); + border: 1px solid rgba(59, 130, 246, 0.15); + box-shadow: + 0 2px 6px rgba(59, 130, 246, 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.9); +} + +.old-coil-wrapper .coil-card-header { + background: linear-gradient(145deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.04) 100%); + border-color: rgba(245, 158, 11, 0.25); +} + +.new-coil-wrapper .coil-card-header { + background: linear-gradient(145deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%); + border-color: rgba(16, 185, 129, 0.25); +} + +.inbound-header { + background: linear-gradient(145deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%) !important; + border-color: rgba(59, 130, 246, 0.3) !important; +} + +.step-content-inbound { + display: flex; + align-items: stretch; + gap: 10px; +} + +.inbound-coil-wrapper { + flex: 1; + display: flex; + flex-direction: column; + gap: 8px; +} + +.action-arrow-inbound { + color: #3b82f6 !important; + font-size: 28px; + margin-bottom: 10px; + text-shadow: 0 0 12px rgba(59, 130, 246, 0.6); + animation: bounce-in 2s ease-in-out infinite !important; +} + +@keyframes bounce-in { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-4px); } +} + +.empty-coil { + display: flex; + align-items: center; + justify-content: center; + padding: 24px 16px; + background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%); + border: 1px solid rgba(59, 130, 246, 0.15); + color: #64748b; + font-size: 13px; +} + +.action-center { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-width: 100px; + padding: 12px 8px; + background: linear-gradient(145deg, rgba(59, 130, 246, 0.06) 0%, rgba(59, 130, 246, 0.03) 100%); + border: 1px solid rgba(59, 130, 246, 0.2); + box-shadow: + 0 2px 6px rgba(59, 130, 246, 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.9); +} + +.action-arrow { + color: #3b82f6; + font-size: 28px; + margin-bottom: 10px; + text-shadow: 0 0 12px rgba(59, 130, 246, 0.6); + animation: pulse 2s ease-in-out infinite; +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.1); } +} + +.action-info { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; +} + +.action-tag { + font-size: 12px; + font-weight: 700; +} + +.action-operator { + font-size: 12px; + font-weight: 600; + color: #1e293b; +} + +.action-time { + font-size: 11px; + color: #64748b; +} + +.empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 32px 0; + color: #64748b; + font-size: 14px; +} + +.empty-state i { + font-size: 48px; + margin-bottom: 12px; + color: #94a3b8; + text-shadow: 0 0 8px rgba(59, 130, 246, 0.3); +} + +/* Element UI overrides */ +.el-descriptions--small .el-descriptions__cell { + padding: 8px 12px; + background: linear-gradient(145deg, rgba(255, 255, 255, 0.7) 0%, rgba(248, 250, 252, 0.85) 100%); + border-color: rgba(59, 130, 246, 0.2) !important; +} + +.el-descriptions__label { + background: linear-gradient(145deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%) !important; + color: #1e293b !important; + font-weight: 700; + letter-spacing: 0.5px; +} + +.el-descriptions__content { + color: #1e293b !important; +} + +.el-table { + background: transparent !important; +} + +.el-table th, +.el-table td { + padding: 8px 0; + background: transparent !important; + border-color: rgba(59, 130, 246, 0.2) !important; + color: #1e293b !important; +} + +.el-table th { + background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%) !important; + color: #1e293b !important; + font-weight: 700; + letter-spacing: 0.5px; +} + +.el-table--striped .el-table__body tr.el-table__row--striped td { + background: rgba(59, 130, 246, 0.03) !important; +} + +.el-table--border, +.el-table--group { + border-color: rgba(59, 130, 246, 0.25) !important; +} + +.el-tag { + background: linear-gradient(145deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%) !important; + border: 1px solid rgba(59, 130, 246, 0.3) !important; + color: #1e293b !important; + box-shadow: 0 0 8px rgba(59, 130, 246, 0.2); + font-weight: 600; +} + +/* CoilInfo component-specific overrides */ +.coil-card .el-descriptions--small .el-descriptions__cell { + padding: 8px 10px; + font-size: 12px; +} + +.coil-card .el-descriptions__label { + background: linear-gradient(145deg, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 1) 100%) !important; + color: #475569 !important; + font-weight: 600; + font-size: 12px; +} + +.coil-card .el-descriptions__content { + color: #1e293b !important; + font-size: 12px; +} + +/* 绉戞妧鎰熼挗鍗峰崱鐗囨牱寮?*/ +.coil-card-futuristic { + padding: 8px; + background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f0f4ff 100%); + border: 1px solid rgba(59, 130, 246, 0.25); + box-shadow: + 0 2px 12px rgba(59, 130, 246, 0.1), + 0 0 20px rgba(59, 130, 246, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.9); + position: relative; + overflow: hidden; +} + +.coil-card-futuristic::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%); + animation: rotateGlow 10s linear infinite; + pointer-events: none; +} + +@keyframes rotateGlow { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.coil-futuristic-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; + position: relative; + z-index: 1; +} + +.coil-futuristic-no { + font-size: 16px; + font-weight: 700; + color: #1e293b; + text-shadow: 0 0 8px rgba(59, 130, 246, 0.3); + letter-spacing: 1px; + font-family: 'Courier New', monospace; +} + +.coil-futuristic-weight { + font-size: 14px; + font-weight: 700; + color: #d97706; + padding: 4px 10px; + background: linear-gradient(145deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.06) 100%); + border: 1px solid rgba(245, 158, 11, 0.3); + text-shadow: 0 0 4px rgba(245, 158, 11, 0.3); + box-shadow: 0 0 8px rgba(245, 158, 11, 0.15); +} + +.coil-futuristic-body { + position: relative; + height: 180px; + margin-bottom: 8px; + z-index: 1; +} + +.coil-icon-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 80px; + height: 80px; +} + +.coil-svg { + width: 100%; + height: 100%; + filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.3)); +} + +.coil-attr-tags { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.attr-tag { + position: absolute; + display: flex; + align-items: center; + pointer-events: auto; +} + +.attr-content { + background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 255, 0.95) 100%); + border: 1px solid rgba(59, 130, 246, 0.3); + padding: 5px 8px; + backdrop-filter: blur(4px); + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12); + min-width: 70px; +} + +.attr-label { + display: block; + font-size: 10px; + color: #3b82f6; + text-transform: uppercase; + letter-spacing: 0.8px; + margin-bottom: 2px; + font-weight: 700; +} + +.attr-value { + display: block; + font-size: 12px; + color: #1e293b; + font-weight: 600; + word-break: break-all; +} + +.attr-line { + position: absolute; + background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.9)); + animation: linePulse 2s ease-in-out infinite; +} + +@keyframes linePulse { + 0%, 100% { opacity: 0.4; } + 50% { opacity: 0.8; } +} + +.attr-top { + top: 0; + left: 50%; + transform: translateX(-50%); + flex-direction: column; +} + +.attr-top .attr-line-top { + width: 2px; + height: 16px; + background: linear-gradient(180deg, transparent, rgba(59, 130, 246, 0.8)); + margin-bottom: 5px; +} + +.attr-top .attr-content { + text-align: center; +} + +.attr-right { + right: 0; + top: 50%; + transform: translateY(-50%); + flex-direction: row-reverse; +} + +.attr-right .attr-line-right { + width: 16px; + height: 2px; + background: linear-gradient(90deg, rgba(59, 130, 246, 0.8), transparent); + margin-left: 5px; +} + +.attr-bottom { + bottom: 0; + left: 50%; + transform: translateX(-50%); + flex-direction: column-reverse; +} + +.attr-bottom .attr-line-bottom { + width: 2px; + height: 16px; + background: linear-gradient(0deg, transparent, rgba(59, 130, 246, 0.8)); + margin-top: 5px; +} + +.attr-bottom .attr-content { + text-align: center; +} + +.attr-left { + left: 0; + top: 50%; + transform: translateY(-50%); + flex-direction: row; +} + +.attr-left .attr-line-left { + width: 16px; + height: 2px; + background: linear-gradient(270deg, rgba(59, 130, 246, 0.8), transparent); + margin-right: 5px; +} + +.attr-top-left { + position: absolute; + top: 6px; + left: 6px; +} + +.attr-top-right { + position: absolute; + top: 6px; + right: 6px; +} + +.attr-bottom-left { + position: absolute; + bottom: 6px; + left: 6px; +} + +.attr-bottom-right { + position: absolute; + bottom: 6px; + right: 6px; +} + +.attr-content-small { + background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 255, 0.95) 100%); + border: 1px solid rgba(59, 130, 246, 0.3); + padding: 4px 6px; + backdrop-filter: blur(4px); + box-shadow: 0 2px 6px rgba(59, 130, 246, 0.1); + min-width: 60px; +} + +.attr-content-small .attr-label { + font-size: 9px; + letter-spacing: 0.6px; +} + +.attr-content-small .attr-value { + font-size: 11px; +} + +.attr-remark { + position: absolute; + bottom: -4px; + left: 50%; + transform: translateX(-50%); +} + +.attr-content-remark { + background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 255, 1) 100%); + border: 1px solid rgba(59, 130, 246, 0.35); + padding: 5px 8px; + backdrop-filter: blur(4px); + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12); + max-width: 160px; + text-align: center; +} + +.attr-content-remark .attr-value { + word-break: break-word; + font-size: 11px; + line-height: 1.3; +} + +.futuristic-status-success { + color: #22c55e !important; + text-shadow: 0 0 6px rgba(34, 197, 94, 0.5) !important; +} + +.futuristic-status-danger { + color: #ef4444 !important; + text-shadow: 0 0 6px rgba(239, 68, 68, 0.5) !important; +} + +.futuristic-status-warning { + color: #f59e0b !important; + text-shadow: 0 0 6px rgba(245, 158, 11, 0.5) !important; +} + +.futuristic-status-default { + color: #64748b !important; + text-shadow: 0 0 6px rgba(100, 116, 139, 0.4) !important; +} + +.coil-futuristic-footer { + display: flex; + justify-content: space-around; + padding-top: 8px; + border-top: 1px solid rgba(59, 130, 246, 0.2); + position: relative; + z-index: 1; +} + +.footer-item { + text-align: center; +} + +.footer-label { + display: block; + font-size: 10px; + color: #64748b; + text-transform: uppercase; + letter-spacing: 0.6px; + margin-bottom: 2px; + font-weight: 700; +} + +.footer-value { + display: block; + font-size: 12px; + color: #475569; + font-weight: 600; +} + +/* 绱у噾妯″紡涓嬬殑鎮仠鍗＄墖鏍峰紡 */ +.coil-card-hover { + position: relative; + padding: 8px; + background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); + border: 1px solid rgba(59, 130, 246, 0.2); + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; +} + +.coil-card-hover:hover { + border-color: rgba(59, 130, 246, 0.5); + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); + transform: translateY(-2px); +} + +.coil-card-hover.old { + border-color: rgba(245, 158, 11, 0.3); + background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%); +} + +.coil-card-hover.old:hover { + border-color: rgba(245, 158, 11, 0.5); + box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15); +} + +.coil-card-hover.new { + border-color: rgba(16, 185, 129, 0.3); + background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%); +} + +.coil-card-hover.new:hover { + border-color: rgba(16, 185, 129, 0.5); + box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15); +} + +.coil-mini-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 6px; +} + +.coil-mini-no { + font-size: 13px; + font-weight: 700; + color: #1e293b; + font-family: 'Courier New', monospace; +} + +.coil-mini-weight { + font-size: 12px; + font-weight: 600; + color: #d97706; + padding: 2px 6px; + background: rgba(245, 158, 11, 0.15); + border-radius: 4px; +} + +.coil-mini-body { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.coil-mini-spec { + font-size: 11px; + color: #475569; + padding: 2px 5px; + background: rgba(255, 255, 255, 0.8); + border-radius: 3px; +} + +.coil-mini-material { + font-size: 11px; + color: #475569; + padding: 2px 5px; + background: rgba(255, 255, 255, 0.8); + border-radius: 3px; +} + +.coil-mini-status { + font-size: 11px; + font-weight: 600; + padding: 2px 5px; + border-radius: 3px; +} + +.coil-mini-status.status-success { + background: rgba(34, 197, 94, 0.15); + color: #22c55e; +} + +.coil-mini-status.status-danger { + background: rgba(239, 68, 68, 0.15); + color: #ef4444; +} + +.coil-mini-status.status-warning { + background: rgba(245, 158, 11, 0.15); + color: #f59e0b; +} + +.coil-mini-status.status-default { + background: rgba(100, 116, 139, 0.15); + color: #64748b; +} + +/* 鎮仠寮圭獥鏍峰紡 */ +.coil-detail-popup { + position: absolute; + top: 100%; + left: 0; + right: 0; + margin-top: 8px; + background: #ffffff; + border: 1px solid rgba(59, 130, 246, 0.3); + border-radius: 8px; + box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2); + z-index: 100; + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + transition: all 0.3s ease; +} + +.coil-card-hover:hover .coil-detail-popup { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.popup-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 12px; + background: linear-gradient(145deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%); + border-bottom: 1px solid rgba(59, 130, 246, 0.2); + border-radius: 8px 8px 0 0; +} + +.popup-title { + font-size: 13px; + font-weight: 700; + color: #1e293b; +} + +.popup-close { + font-size: 14px; + color: #94a3b8; + cursor: pointer; + padding: 2px 4px; + border-radius: 4px; + transition: all 0.2s; +} + +.popup-close:hover { + background: rgba(59, 130, 246, 0.1); + color: #64748b; +} + +.popup-content { + padding: 10px 12px; + max-height: 300px; + overflow-y: auto; +} + +.popup-row { + display: flex; + justify-content: space-between; + padding: 6px 0; + border-bottom: 1px dashed rgba(59, 130, 246, 0.1); +} + +.popup-row:last-child { + border-bottom: none; +} + +.popup-label { + font-size: 11px; + color: #64748b; + min-width: 70px; +} + +.popup-value { + font-size: 11px; + color: #1e293b; + font-weight: 500; + text-align: right; + flex: 1; + max-width: 150px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* 绱у噾妯″紡鍙樻洿缁撴瀯锛堜笂涓嬪竷灞€锛?*/ +.step-content-compact-change { + display: flex; + flex-direction: column; + gap: 10px; +} + +.coil-change-wrapper { + background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); + border: 1px solid rgba(59, 130, 246, 0.2); + border-radius: 8px; + padding: 8px; +} + +.coil-change-wrapper.new { + border-color: rgba(16, 185, 129, 0.3); + background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 50%, #ffffff 100%); +} + +.coil-change-header { + margin-bottom: 8px; + padding-bottom: 6px; + border-bottom: 1px dashed rgba(59, 130, 246, 0.2); +} + +.change-label { + font-size: 12px; + font-weight: 700; + color: #64748b; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.coil-change-wrapper.new .change-label { + color: #10b981; +} + +/* 绱у噾妯″紡鎿嶄綔涓績 */ +.action-center-compact { + display: flex; + align-items: center; + justify-content: center; + padding: 8px; + background: linear-gradient(145deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%); + border-radius: 8px; +} + +.action-center-compact .action-arrow { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%); + color: white; + border-radius: 50%; + margin-right: 10px; + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4); +} + +.action-center-compact .action-info { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.action-center-compact .action-tag { + font-size: 11px; + margin-bottom: 2px; +} + +.action-center-compact .action-operator, +.action-center-compact .action-time { + font-size: 11px; + color: #64748b; +} + +/* 绱у噾妯″紡 - 鐢ㄤ簬鍚堝嵎娈靛苟鎺掑睍绀?*/ +.step-content-compact { + flex-direction: column; + gap: 8px; +} + +.step-content-compact .coil-card-wrapper { + width: 100%; + min-width: 240px; +} + +.step-content-compact .coil-card-futuristic { + padding: 6px; +} + +.step-content-compact .coil-futuristic-header { + padding: 4px 6px; + margin-bottom: 6px; +} + +.step-content-compact .coil-futuristic-no { + font-size: 13px; + font-weight: 700; +} + +.step-content-compact .coil-futuristic-weight { + font-size: 12px; + padding: 2px 6px; +} + +.step-content-compact .coil-icon-container { + width: 50px; + height: 50px; +} + +.step-content-compact .coil-attr-tags { + padding-left: 55px; +} + +.step-content-compact .attr-tag.attr-top-left, +.step-content-compact .attr-tag.attr-top-right, +.step-content-compact .attr-tag.attr-bottom-left, +.step-content-compact .attr-tag.attr-bottom-right { + display: none; +} + +.step-content-compact .attr-tag.attr-remark { + display: none; +} + +.step-content-compact .coil-futuristic-footer { + padding: 4px 6px; +} + +.step-content-compact .footer-item { + padding: 2px 4px; + margin-right: 6px; +} + +.step-content-compact .footer-label { + font-size: 9px; +} + +.step-content-compact .footer-value { + font-size: 10px; +} + +.step-content-compact .action-center { + flex-direction: row; + padding: 6px 8px; + background: rgba(59, 130, 246, 0.08); + border-radius: 6px; +} + +.step-content-compact .action-arrow { + width: 28px; + height: 28px; + margin-right: 8px; +} + +.step-content-compact .action-info { + flex: 1; + justify-content: flex-start; +} + +.step-content-compact .action-tag, +.step-content-compact .action-operator, +.step-content-compact .action-time { + font-size: 11px; +} + +/* 绉诲簱 & 璋冩嫧璁板綍 */ +.tables-row { + display: flex; + gap: 12px; + min-height: 320px; +} + +.table-wrapper { + display: flex; + flex-direction: column; +} + +.table-wrapper.warehouse-table { + flex: 2; +} + +.table-wrapper.transfer-table { + flex: 2; +} + +.table-title { + padding: 6px 12px; + margin-bottom: 10px; + background: linear-gradient(145deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%); + border: 1px solid rgba(59, 130, 246, 0.2); + font-size: 13px; + font-weight: 700; + color: #1e293b; + letter-spacing: 0.6px; +} + +.table-container { + flex: 1; + overflow: hidden; + background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%); + border: 1px solid rgba(59, 130, 246, 0.2); + box-shadow: + 0 2px 8px rgba(59, 130, 246, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.9); +} + +.table-container .el-table { + height: 100%; +} + +.table-container .el-table__body-wrapper { + flex: 1; + overflow-y: auto; +} + +/* 闄勪欢鍖哄煙鏍峰紡 */ +.annex-section { + margin-top: 12px; + background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%); + border: 1px solid rgba(59, 130, 246, 0.2); + box-shadow: + 0 2px 8px rgba(59, 130, 246, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.9); +} + +.annex-title { + display: flex; + align-items: center; + padding: 8px 14px; + background: linear-gradient(145deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%); + border-bottom: 1px solid rgba(59, 130, 246, 0.2); +} + +.annex-icon { + font-size: 14px; + margin-right: 8px; + filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.4)); +} + +.annex-title span:last-child { + font-size: 13px; + font-weight: 700; + color: #1e293b; + letter-spacing: 0.6px; +} + +.annex-content { + padding: 12px 14px; +} + +.sales-section h4 { + margin: 12px 0 8px 0; + padding: 6px 10px; + font-size: 13px; + font-weight: 700; + color: #1e293b; + background: linear-gradient(145deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%); + border: 1px solid rgba(59, 130, 246, 0.2); + letter-spacing: 0.6px; +} + +/* 鐢熶骇鏁版嵁鏍峰紡 */ +.perf-count { + font-weight: normal; + color: #909399; + font-size: 12px; + margin-left: 4px; +} + +.production-section { + min-height: 600px; + flex: 1; +} + +.production-section .section-body { + padding: 0; + height: calc(100% - 48px); + min-height: 550px; +} + +.perf-tabs { + height: 100%; + min-height: 550px; + display: flex; + flex-direction: column; +} + +.perf-tabs .el-tabs__header { + flex-shrink: 0; +} + +.perf-tabs .el-tabs__content { + flex: 1; + overflow: hidden; + min-height: 0; + padding: 0; +} + +.perf-tabs .el-tab-pane { + height: 100%; + min-height: 500px; +} + +.trend-layout { + display: flex; + height: 100%; + gap: 0; +} + +.trend-tree { + width: 140px; + flex-shrink: 0; + overflow-x: hidden; + overflow-y: auto; + border-right: 1px solid #ebeef5; + padding: 4px 0; + max-height: calc(100vh - 400px); +} + +.trend-tree::-webkit-scrollbar { + width: 4px; + height: 4px; +} + +.trend-tree::-webkit-scrollbar-thumb { + background: #dcdfe6; + border-radius: 2px; +} + +.trend-tree::-webkit-scrollbar-track { + background: transparent; +} + +.tree-group { + user-select: none; +} + +.tree-group-label { + display: flex; + align-items: center; + gap: 4px; + padding: 5px 8px; + font-size: 12px; + font-weight: 600; + color: #303133; + cursor: pointer; +} + +.tree-group-label:hover { + background: #f5f7fa; +} + +.tree-group-label i { + font-size: 10px; + color: #909399; +} + +.tree-children { + padding-left: 4px; +} + +.tree-item { + padding: 4px 8px 4px 18px; + font-size: 12px; + color: #606266; + cursor: pointer; + border-radius: 3px; + margin: 1px 4px; +} + +.tree-item:hover { + background: #ecf5ff; + color: #409eff; +} + +.tree-item.active { + background: #ecf5ff; + color: #409eff; + font-weight: 500; +} + +.trend-chart-area { + flex: 1; + min-width: 0; + height: 500px; + padding: 4px 4px 4px 8px; + display: flex; + align-items: stretch; +} + +.charts-scroll { + height: 100%; + overflow-y: auto; + padding: 8px; + box-sizing: border-box; +} + +.charts-scroll::-webkit-scrollbar { + width: 4px; +} + +.charts-scroll::-webkit-scrollbar-thumb { + background: #dcdfe6; + border-radius: 2px; +} + +.charts-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + align-content: start; + min-height: 100%; + padding: 4px; +} + +.charts-grid .chart-box { + margin-bottom: 0; +} + +.chart-box { + width: 100%; + height: 260px; + margin-bottom: 12px; + min-height: 200px; +} + +.chart-box-tall { + height: 480px; + min-height: 400px; +} + +.no-data-hint { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 120px; + color: #c0c4cc; + font-size: 13px; +} + +.cost-value { + font-size: 20px; + font-weight: 700; + color: #d97706; + text-shadow: 0 0 8px rgba(217, 119, 6, 0.4); +} + +.cost-unit { + font-size: 12px; + color: #64748b; + margin-left: 4px; +} + +} diff --git a/klp-ui/src/views/wms/coil/info/components/BasicInfoSection.vue b/klp-ui/src/views/wms/coil/info/components/BasicInfoSection.vue new file mode 100644 index 000000000..f90c0ad6a --- /dev/null +++ b/klp-ui/src/views/wms/coil/info/components/BasicInfoSection.vue @@ -0,0 +1,20 @@ + + + diff --git a/klp-ui/src/views/wms/coil/info/components/CoilCardCompact.vue b/klp-ui/src/views/wms/coil/info/components/CoilCardCompact.vue new file mode 100644 index 000000000..6dfca0014 --- /dev/null +++ b/klp-ui/src/views/wms/coil/info/components/CoilCardCompact.vue @@ -0,0 +1,85 @@ + + + diff --git a/klp-ui/src/views/wms/coil/info/components/CoilCardFuturistic.vue b/klp-ui/src/views/wms/coil/info/components/CoilCardFuturistic.vue new file mode 100644 index 000000000..5dbe514c8 --- /dev/null +++ b/klp-ui/src/views/wms/coil/info/components/CoilCardFuturistic.vue @@ -0,0 +1,153 @@ + + + diff --git a/klp-ui/src/views/wms/coil/info/components/ContractInfo.vue b/klp-ui/src/views/wms/coil/info/components/ContractInfo.vue new file mode 100644 index 000000000..5436debe4 --- /dev/null +++ b/klp-ui/src/views/wms/coil/info/components/ContractInfo.vue @@ -0,0 +1,43 @@ + + + diff --git a/klp-ui/src/views/wms/coil/info/components/CostInfoSection.vue b/klp-ui/src/views/wms/coil/info/components/CostInfoSection.vue new file mode 100644 index 000000000..bac9cf050 --- /dev/null +++ b/klp-ui/src/views/wms/coil/info/components/CostInfoSection.vue @@ -0,0 +1,36 @@ + + + diff --git a/klp-ui/src/views/wms/coil/info/components/InspectionInfo.vue b/klp-ui/src/views/wms/coil/info/components/InspectionInfo.vue new file mode 100644 index 000000000..7b707577a --- /dev/null +++ b/klp-ui/src/views/wms/coil/info/components/InspectionInfo.vue @@ -0,0 +1,110 @@ + + + diff --git a/klp-ui/src/views/wms/coil/info/components/LifecycleTrace.vue b/klp-ui/src/views/wms/coil/info/components/LifecycleTrace.vue new file mode 100644 index 000000000..76ee47401 --- /dev/null +++ b/klp-ui/src/views/wms/coil/info/components/LifecycleTrace.vue @@ -0,0 +1,158 @@ + + + diff --git a/klp-ui/src/views/wms/coil/info/components/ProductionCharts.vue b/klp-ui/src/views/wms/coil/info/components/ProductionCharts.vue new file mode 100644 index 000000000..83f52d1fb --- /dev/null +++ b/klp-ui/src/views/wms/coil/info/components/ProductionCharts.vue @@ -0,0 +1,434 @@ + + + diff --git a/klp-ui/src/views/wms/coil/info/components/SalesObjectionTable.vue b/klp-ui/src/views/wms/coil/info/components/SalesObjectionTable.vue new file mode 100644 index 000000000..f0c4fc123 --- /dev/null +++ b/klp-ui/src/views/wms/coil/info/components/SalesObjectionTable.vue @@ -0,0 +1,47 @@ + + + diff --git a/klp-ui/src/views/wms/coil/info/components/ShipmentCard.vue b/klp-ui/src/views/wms/coil/info/components/ShipmentCard.vue new file mode 100644 index 000000000..e05bcb932 --- /dev/null +++ b/klp-ui/src/views/wms/coil/info/components/ShipmentCard.vue @@ -0,0 +1,91 @@ + + + diff --git a/klp-ui/src/views/wms/coil/info/components/TransferRecords.vue b/klp-ui/src/views/wms/coil/info/components/TransferRecords.vue new file mode 100644 index 000000000..3088bc9ff --- /dev/null +++ b/klp-ui/src/views/wms/coil/info/components/TransferRecords.vue @@ -0,0 +1,68 @@ + + + diff --git a/klp-ui/src/views/wms/coil/info/index.vue b/klp-ui/src/views/wms/coil/info/index.vue new file mode 100644 index 000000000..337547137 --- /dev/null +++ b/klp-ui/src/views/wms/coil/info/index.vue @@ -0,0 +1,451 @@ + + + + + + + diff --git a/klp-ui/src/views/wms/coil/info/statusUtils.js b/klp-ui/src/views/wms/coil/info/statusUtils.js new file mode 100644 index 000000000..a2c138f8c --- /dev/null +++ b/klp-ui/src/views/wms/coil/info/statusUtils.js @@ -0,0 +1,20 @@ +export function getFuturisticStatusClass(status) { + if (!status) return '' + const statusLower = status.toLowerCase() + if (statusLower.includes('合格')) return 'futuristic-status-success' + if (statusLower.includes('不合格')) return 'futuristic-status-danger' + if (statusLower.includes('待检')) return 'futuristic-status-warning' + return 'futuristic-status-default' +} + +export function formatTime(timeStamp) { + if (!timeStamp) return '-' + const date = new Date(timeStamp) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + const hour = String(date.getHours()).padStart(2, '0') + const minute = String(date.getMinutes()).padStart(2, '0') + const second = String(date.getSeconds()).padStart(2, '0') + return `${year}-${month}-${day} ${hour}:${minute}:${second}` +}