+
+
-
-
+
+
+
@@ -255,26 +248,29 @@
@@ -1007,7 +1087,7 @@ onBeforeUnmount(() => {
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 24px;
+ margin-bottom: 10px;
position: relative;
z-index: 10;
}
@@ -1133,155 +1213,54 @@ onBeforeUnmount(() => {
box-shadow: 0 0 10px rgba(0, 212, 255, 0.15);
}
-/* ========== 工序轮播行 ========== */
-.process-carousel {
- margin-bottom: 20px;
- position: relative;
- z-index: 10;
- flex-shrink: 0;
-}
-
-.carousel-beam {
- position: absolute;
- top: 50%;
- left: -15%;
- width: 120%;
- height: 2px;
- background: linear-gradient(
- 90deg,
- transparent 0%,
- rgba(0, 212, 255, 0.1) 30%,
- rgba(0, 212, 255, 0.6) 45%,
- #00d4ff 50%,
- rgba(0, 212, 255, 0.6) 55%,
- rgba(0, 212, 255, 0.1) 70%,
- transparent 100%
- );
- transform: translateY(-50%);
- box-shadow:
- 0 0 8px rgba(0, 212, 255, 0.4),
- 0 0 25px rgba(0, 212, 255, 0.15);
- pointer-events: none;
- z-index: 1;
- opacity: 0;
- animation: beamSweep 3s ease-in-out infinite;
-}
-
-@keyframes beamSweep {
- 0% {
- left: -15%;
- opacity: 0;
- }
- 8% {
- opacity: 1;
- }
- 92% {
- opacity: 1;
- }
- 100% {
- left: 115%;
- opacity: 0;
- }
-}
-
-.process-grid {
+/* ========== 表格 3×2 网格 ========== */
+.table-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
- gap: 12px;
+ gap: 10px;
+ flex: 1;
+ min-height: 0;
}
-.process-card {
- position: relative;
+.table-cell {
display: flex;
- align-items: center;
- gap: 0;
- padding: 12px 18px;
- background: rgba(0, 212, 255, 0.06);
- border: 1px solid rgba(0, 212, 255, 0.15);
+ flex-direction: column;
+ min-height: 0;
+ background: rgba(10, 20, 40, 0.4);
+ border: 1px solid rgba(0, 212, 255, 0.1);
border-radius: 6px;
- cursor: pointer;
- transition: all 0.3s ease;
overflow: hidden;
}
-.process-card:hover {
- background: rgba(0, 212, 255, 0.12);
- border-color: rgba(0, 212, 255, 0.3);
-}
-
-.process-card.active {
- background: rgba(0, 212, 255, 0.12);
- border-color: #00d4ff;
- box-shadow: 0 0 20px rgba(0, 212, 255, 0.2), inset 0 0 20px rgba(0, 212, 255, 0.05);
-}
-
-.process-code {
- font-size: 24px;
- font-weight: bold;
- color: rgba(0, 212, 255, 0.4);
- font-family: 'Courier New', monospace;
- min-width: 62px;
- letter-spacing: 2px;
- transition: all 0.3s ease;
-}
-
-.process-card.active .process-code {
- color: #00d4ff;
- text-shadow:
- 0 0 8px rgba(0, 212, 255, 0.6),
- 0 0 20px rgba(0, 212, 255, 0.3),
- 0 0 40px rgba(0, 212, 255, 0.15);
-}
-
-.code-divider {
- width: 1px;
- height: 24px;
- margin: 0 14px;
- background: rgba(0, 212, 255, 0.2);
+.cell-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 12px;
+ background: rgba(0, 212, 255, 0.06);
+ border-bottom: 1px solid rgba(0, 212, 255, 0.1);
flex-shrink: 0;
- transition: all 0.3s ease;
}
-.process-card.active .code-divider {
- background: #00d4ff;
- box-shadow: 0 0 6px #00d4ff;
- animation: dividerBreathe 2s ease-in-out infinite;
-}
-
-@keyframes dividerBreathe {
- 0%, 100% {
- opacity: 0.4;
- box-shadow: 0 0 4px rgba(0, 212, 255, 0.3);
- }
- 50% {
- opacity: 1;
- box-shadow: 0 0 12px rgba(0, 212, 255, 0.8), 0 0 24px rgba(0, 212, 255, 0.3);
- }
-}
-
-.process-name {
+.cell-code {
font-size: 15px;
- color: rgba(255, 255, 255, 0.6);
+ font-weight: bold;
+ color: #00d4ff;
+ font-family: 'Courier New', monospace;
letter-spacing: 1px;
- transition: color 0.3s ease;
}
-.process-card.active .process-name {
- color: #ffffff;
- text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+.cell-name {
+ font-size: 13px;
+ color: rgba(255, 255, 255, 0.7);
+ letter-spacing: 1px;
}
-.process-active-indicator {
- position: absolute;
- right: 12px;
- top: 50%;
- transform: translateY(-50%);
- width: 6px;
- height: 6px;
- border-radius: 50%;
- background: #00d4ff;
- box-shadow: 0 0 8px #00d4ff, 0 0 16px rgba(0, 212, 255, 0.4);
- animation: liveDotPulse 1.5s ease-in-out infinite;
+.cell-count {
+ margin-left: auto;
+ font-size: 11px;
+ color: rgba(0, 212, 255, 0.5);
+ font-family: 'Courier New', monospace;
}
/* ========== 主内容 ========== */
@@ -1291,24 +1270,16 @@ onBeforeUnmount(() => {
flex: 1;
min-width: 0;
display: flex;
- gap: 16px;
+ flex-direction: column;
+ gap: 10px;
min-height: 0;
}
-.body-left,
-.body-right {
- flex: 0 0 22%;
- min-width: 0;
+/* ========== 底部统计图行 ========== */
+.charts-row {
+ flex: 0 0 215px;
display: flex;
- flex-direction: column;
- min-height: 0;
-}
-
-.body-center {
- flex: 1;
- min-width: 0;
- display: flex;
- flex-direction: column;
+ gap: 12px;
min-height: 0;
}
@@ -1331,7 +1302,7 @@ onBeforeUnmount(() => {
inset: 0;
display: flex;
flex-direction: column;
- padding: 16px 12px 12px;
+ padding: 10px 10px 8px;
box-sizing: border-box;
overflow: hidden;
}
@@ -1340,7 +1311,7 @@ onBeforeUnmount(() => {
display: flex;
align-items: center;
gap: 8px;
- margin-bottom: 12px;
+ margin-bottom: 8px;
flex-shrink: 0;
}
@@ -1349,15 +1320,15 @@ onBeforeUnmount(() => {
display: flex;
flex-direction: column;
align-items: center;
- gap: 4px;
- padding: 10px 4px;
+ gap: 2px;
+ padding: 6px 4px;
background: rgba(0, 212, 255, 0.06);
border: 1px solid rgba(0, 212, 255, 0.12);
border-radius: 6px;
}
.summary-number {
- font-size: 26px;
+ font-size: 22px;
font-weight: bold;
font-family: 'Courier New', monospace;
color: #00d4ff;
@@ -1365,7 +1336,7 @@ onBeforeUnmount(() => {
}
.summary-number.weight {
- font-size: 20px;
+ font-size: 18px;
}
.summary-label {
@@ -1376,7 +1347,7 @@ onBeforeUnmount(() => {
.summary-divider {
width: 1px;
- height: 50px;
+ height: 40px;
background: rgba(0, 212, 255, 0.15);
flex-shrink: 0;
}
@@ -1391,27 +1362,18 @@ onBeforeUnmount(() => {
flex: 0 0 50%;
}
+.chart-row {
+ flex: 1;
+ display: flex;
+ flex-direction: row;
+ min-height: 0;
+}
+
.mini-chart {
width: 100%;
height: 100%;
}
-.coil-panel {
- flex: 1;
- min-height: 0;
- background: rgba(10, 20, 40, 0.5);
-}
-
-.coil-inner {
- height: 100%;
- display: flex;
- flex-direction: column;
- padding: 20px 16px 30px 16px;
- box-sizing: border-box;
- min-height: 0;
- overflow: hidden;
-}
-
/* ========== 在产钢卷列表 ========== */
.section-title {
display: flex;
@@ -1433,21 +1395,11 @@ onBeforeUnmount(() => {
box-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
}
-.section-title-count {
- font-size: 12px;
- color: rgba(0, 212, 255, 0.6);
- margin-left: auto;
- font-family: 'Courier New', monospace;
-}
-
.coil-table-wrap {
flex: 1;
min-height: 0;
overflow: hidden;
position: relative;
- border: 1px solid rgba(0, 212, 255, 0.08);
- border-radius: 4px;
- background: rgba(0, 0, 0, 0.25);
cursor: grab;
user-select: none;
}
@@ -1459,7 +1411,7 @@ onBeforeUnmount(() => {
.coil-table {
width: 100%;
border-collapse: collapse;
- font-size: 13px;
+ font-size: 12px;
}
.coil-table thead {
@@ -1469,14 +1421,14 @@ onBeforeUnmount(() => {
}
.coil-table th {
- padding: 10px 14px;
+ padding: 6px 8px;
text-align: left;
font-weight: 500;
color: rgba(0, 212, 255, 0.7);
- font-size: 12px;
- letter-spacing: 1px;
+ font-size: 11px;
+ letter-spacing: 0.5px;
background: rgba(10, 20, 40, 0.95);
- border-bottom: 1px solid rgba(0, 212, 255, 0.15);
+ border-bottom: 1px solid rgba(0, 212, 255, 0.12);
white-space: nowrap;
position: sticky;
top: 0;
@@ -1484,7 +1436,7 @@ onBeforeUnmount(() => {
}
.coil-table td {
- padding: 9px 14px;
+ padding: 5px 8px;
border-bottom: 1px solid rgba(0, 212, 255, 0.06);
color: rgba(255, 255, 255, 0.75);
white-space: nowrap;
@@ -1565,6 +1517,21 @@ onBeforeUnmount(() => {
50% { opacity: 0.4; transform: scale(0.7); }
}
+.col-grade {
+ font-family: 'Courier New', monospace;
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.6);
+}
+
+.col-next-warehouse {
+ font-size: 12px;
+ color: rgba(0, 212, 255, 0.7);
+ max-width: 100px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
.col-weight {
font-family: 'Courier New', monospace;
text-align: right !important;
@@ -1576,10 +1543,6 @@ onBeforeUnmount(() => {
color: rgba(255, 255, 255, 0.5) !important;
}
-.col-operator {
- color: rgba(255, 255, 255, 0.5) !important;
-}
-
.table-empty {
position: absolute;
inset: 0;
+
+
+
+
+
+
+ {{ p.type }}
+ {{ p.name }}
+ {{ (coilsByProcess[p.type] || []).length }} 卷
+
+
+
+
+
+
+ | 钢卷号 | +状态 | +等级 | +去向 | +净重 (kg) | +时间 | +
|---|---|---|---|---|---|
| {{ coil.currentCoilNo || '-' }} | ++ + + {{ statusLabels[coil.actionStatus] || '未知' }} + + | +{{ coil.actionStatus === 2 ? (coil.qualityStatus || '-') : '-' }} | +{{ coil.actionStatus === 2 ? (coil.warehouseName || '-') : '-' }} | +{{ coil.weight ? Number(coil.weight).toFixed(1) : '-' }} | +{{ coil.createTime ? formatTime(coil.createTime) : '-' }} | +
+ 暂无在产钢卷
+
+
@@ -125,127 +154,91 @@
-
-
-
-
-
-
-
-
-
- 在产钢卷
- {{ wipCoils.length }} 卷
-
-
-
-
-
-
- | 钢卷号 | -状态 | -净重 (kg) | -开始时间 | -操作人 | -
|---|---|---|---|---|
| {{ coil.currentCoilNo || '-' }} | -- - - {{ statusLabels[coil.actionStatus] || '未知' }} - - | -{{ coil.weight ? Number(coil.weight).toFixed(1) : '-' }} | -{{ coil.createTime ? formatTime(coil.createTime) : '-' }} | -{{ coil.operatorName || coil.createBy || '-' }} | -
- 暂无在产钢卷
-
-
- 工序分布
+ 在产工序分布
-
-
-
-
-
+
+
+
+
+
+