From 86b2f277e16daf7c88716b116398d97c88600a60 Mon Sep 17 00:00:00 2001 From: wangyu <823267011@qq.com> Date: Fri, 26 Jun 2026 14:15:49 +0800 Subject: [PATCH] =?UTF-8?q?refactor(material):=20=E6=89=81=E5=B9=B3?= =?UTF-8?q?=E5=B8=83=E5=B1=80=20+=20=E4=BF=AE=E5=A4=8D=20SVG=20=E6=80=BB?= =?UTF-8?q?=E5=9B=BE=20+=20=E5=BD=BB=E5=BA=95=E6=B6=88=E9=99=A4=E6=A8=AA?= =?UTF-8?q?=E5=90=91=E6=BA=A2=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - SVG: viewBox 改回正向坐标 (0,0,1900,310)，所有 y 整体下移 30， 段位色带在顶部 4-26 区，避免负坐标渲染异常导致设备图形丢失 - 布局: 去掉所有 sub-card 嵌套，扁平为 sec-title-bar + pane(kpi-row auto-fit) - 酸洗/清洗各槽改为 tank-card 自适应排列；所有表格包 tbl-scroll 防止溢出 - 出口段抛弃表格，改 KPI 网格统一处理三辊 VFD + 平整 + 收卷 - 段位色带 + 标题左边框 + sec-pill 一致着色 Co-Authored-By: Claude Opus 4.7 --- frontend/src/views/Material.vue | 391 +++++++++++++++----------------- 1 file changed, 185 insertions(+), 206 deletions(-) diff --git a/frontend/src/views/Material.vue b/frontend/src/views/Material.vue index 253df93..f2450f8 100644 --- a/frontend/src/views/Material.vue +++ b/frontend/src/views/Material.vue @@ -36,30 +36,30 @@
推拉酸洗线 - 物料跟踪总图
- - + + - - - + + {{ s.name }} - + - {{ eq.label }} + {{ eq.label }} - - + + - + - + @@ -225,7 +225,7 @@ - + 焊缝位置 {{ (weld.position * 100).toFixed(1) }}% @@ -242,52 +242,39 @@
-
入口段 - 在线 {{ onlinePlans.length }} / 生产中 {{ producingPlan ? 1 : 0 }} +
+ 入口段 + 在线 {{ onlinePlans.length }} / 生产中 {{ producingPlan ? 1 : 0 }}
-
- -
-
在线计划 · 入口移动 - 在线 {{ onlinePlans.length }} / 生产中 {{ producingPlan ? 1 : 0 }} -
-
-
- 生产中 - 冷卷号{{ producingPlan.cold_coil_no || producingPlan.plan_no }} - 钢种{{ producingPlan.steel_grade || '—' }} - 规格{{ fmt(producingPlan.product_thickness) }}×{{ fmt(producingPlan.product_width, 0) }} -
- - - - - - - - - - - - -
冷卷号钢种厚度宽度分卷操作
{{ p.cold_coil_no || p.plan_no }}{{ p.steel_grade || '—' }}{{ fmt(p.product_thickness) }}{{ fmt(p.product_width, 0) }}{{ p.split_count || 1 }} - -
-
暂无在线计划
-
-
- -
-
入口段实时参数
-
-
-
-
{{ it.label }}
-
{{ it.val }}{{ it.unit }}
-
-
-
+ +
+ 生产中 + 冷卷号{{ producingPlan.cold_coil_no || producingPlan.plan_no }} + 钢种{{ producingPlan.steel_grade || '—' }} + 规格{{ fmt(producingPlan.product_thickness) }}×{{ fmt(producingPlan.product_width, 0) }} +
+
+ + + + + + + + + + + + +
冷卷号钢种厚度宽度分卷移动
{{ p.cold_coil_no || p.plan_no }}{{ p.steel_grade || '—' }}{{ fmt(p.product_thickness) }}{{ fmt(p.product_width, 0) }}{{ p.split_count || 1 }}
+
暂无在线计划
+
+ +
+
+
{{ it.label }}
+
{{ it.val }}{{ it.unit }}
@@ -295,154 +282,139 @@
-
酸洗段（5 槽）
+
+ 酸洗段 + 5 槽串联 +
-
-
-
{{ i+1 }}# 酸洗槽
-
-
-
槽温度
{{ fix(a.temp,1) }}°C
-
罐液位
{{ fix(a.level,2) }}m
-
槽浓度
{{ fix(a.conc,1) }}g/L
-
槽电导率
{{ fix(a.cond,1) }}mS/cm
-
罐浓度
{{ fix(a.tank_conc,1) }}g/L
-
罐电导率
{{ fix(a.tank_cond,1) }}mS/cm
-
-
-
-
-
酸雾塔 + 冷凝水罐
-
-
-
酸雾塔 PH
{{ fix(acid_mist.ph,2) }}
-
变频器频率
{{ fix(acid_mist.vfd_speed,1) }}Hz
-
变频器电流
{{ fix(acid_mist.vfd_current,1) }}A
-
冷凝罐液位
{{ fix(acid_cond.level,2) }}m
-
冷凝罐温度
{{ fix(acid_cond.temp,1) }}°C
-
冷凝电导率
{{ fix(acid_cond.cond,1) }}μS/cm
-
+
+
+
{{ i+1 }}# 酸洗槽
+
+
槽温度
{{ fix(a.temp,1) }}°C
+
罐液位
{{ fix(a.level,2) }}m
+
槽浓度
{{ fix(a.conc,1) }}g/L
+
槽电导率
{{ fix(a.cond,1) }}mS/cm
+
罐浓度
{{ fix(a.tank_conc,1) }}g/L
+
罐电导率
{{ fix(a.tank_cond,1) }}mS/cm
+
+
酸雾塔 PH
{{ fix(acid_mist.ph,2) }}
+
雾塔变频频率
{{ fix(acid_mist.vfd_speed,1) }}Hz
+
雾塔变频电流
{{ fix(acid_mist.vfd_current,1) }}A
+
冷凝罐液位
{{ fix(acid_cond.level,2) }}m
+
冷凝罐温度
{{ fix(acid_cond.temp,1) }}°C
+
冷凝电导率
{{ fix(acid_cond.cond,1) }}μS/cm
+
- +
-
漂洗段（5 级）+ 烘干
+
+ 清洗段 + 烘干段 + 5 级逆流 + 3 段热风 +
-
-
-
{{ i+1 }}# 漂洗
-
-
-
槽温度
{{ fix(rinse_tank_temp[i],1) }}°C
-
罐液位
{{ fix(r.level,2) }}m
-
槽浓度
{{ fix(r.conc,2) }}g/L
-
槽电导率
{{ fix(r.cond,2) }}μS/cm
-
罐浓度
{{ fix(r.tank_conc,2) }}g/L
-
罐电导率
{{ fix(r.tank_cond,2) }}μS/cm
-
-
-
-
-
漂洗酸雾塔 + 冷凝罐 + 烘干
-
-
-
雾塔 PH
{{ fix(rinse_mist.ph,2) }}
-
变频器频率
{{ fix(rinse_mist.vfd_speed,1) }}Hz
-
变频器电流
{{ fix(rinse_mist.vfd_current,1) }}A
-
冷凝液位
{{ fix(rinse_cond.level,2) }}m
-
冷凝温度
{{ fix(rinse_cond.temp,1) }}°C
-
冷凝电导率
{{ fix(rinse_cond.cond,2) }}μS/cm
-
烘干 1 段
{{ fix(dryer.t1,0) }}°C
-
烘干 2 段
{{ fix(dryer.t2,0) }}°C
-
烘干 3 段
{{ fix(dryer.t3,0) }}°C
-
+
+
+
{{ i+1 }}# 漂洗
+
+
槽温度
{{ fix(rinse_tank_temp[i],1) }}°C
+
罐液位
{{ fix(r.level,2) }}m
+
槽浓度
{{ fix(r.conc,2) }}g/L
+
槽电导率
{{ fix(r.cond,2) }}μS/cm
+
罐浓度
{{ fix(r.tank_conc,2) }}g/L
+
罐电导率
{{ fix(r.tank_cond,2) }}μS/cm
+
+
漂洗雾塔 PH
{{ fix(rinse_mist.ph,2) }}
+
雾塔变频频率
{{ fix(rinse_mist.vfd_speed,1) }}Hz
+
雾塔变频电流
{{ fix(rinse_mist.vfd_current,1) }}A
+
冷凝液位
{{ fix(rinse_cond.level,2) }}m
+
冷凝温度
{{ fix(rinse_cond.temp,1) }}°C
+
冷凝电导率
{{ fix(rinse_cond.cond,2) }}μS/cm
+
烘干 1 段
{{ fix(dryer.t1,0) }}°C
+
烘干 2 段
{{ fix(dryer.t2,0) }}°C
+
烘干 3 段
{{ fix(dryer.t3,0) }}°C
+
-
出口段
+
+ 出口段 + 三辊张力 + 平整 + 涂油 + 收卷 +
-
-
-
三辊张力装置
-
- - - - - - - - - - -
变频器速度 m/min电流 A扭矩 kN·m
VFD-{{ i+1 }}{{ fix(v.speed,1) }}{{ fix(v.current,0) }}{{ fix(v.torque,2) }}
-
+
+
+
三辊 VFD-{{ i+1 }} 速度
+
{{ fix(v.speed,1) }}m/min
-
-
平整 + 涂油 + 收卷
-
-
-
平整辊缝
{{ fix(leveler.gap,2) }}mm
-
轧制力
{{ fix(leveler.force,0) }}kN
-
延伸率
{{ fix(leveler.elongation,2) }}%
-
收卷张力
{{ fix(recoiler.tension,1) }}kN
-
收卷直径
{{ fix(recoiler.diameter,0) }}mm
-
收卷速度
{{ fix(recoiler.speed,1) }}m/min
-
-
+
+
三辊 VFD-{{ i+1 }} 电流
+
{{ fix(v.current,0) }}A
+
+
三辊 VFD-{{ i+1 }} 扭矩
+
{{ fix(v.torque,2) }}kN·m
+
+
平整辊缝
{{ fix(leveler.gap,2) }}mm
+
平整轧制力
{{ fix(leveler.force,0) }}kN
+
平整延伸率
{{ fix(leveler.elongation,2) }}%
+
收卷张力
{{ fix(recoiler.tension,1) }}kN
+
收卷直径
{{ fix(recoiler.diameter,0) }}mm
+
收卷速度
{{ fix(recoiler.speed,1) }}m/min
-
物料跟踪表 {{ equipments.length }} 台设备
+
物料跟踪表 {{ equipments.length }} 台设备
- - - - - - - - - - - - - - - - - - - - - - - - - -
#段设备状态当前钢卷辊缝 mm速度张力/温度
{{ i + 1 }} - - {{ eq.section }} - - {{ eq.label }} - 加工中 - 已过 - 待入 - {{ rowOf(eq, i).coil }}{{ rowOf(eq, i).gap }}{{ rowOf(eq, i).speed }}{{ rowOf(eq, i).aux }}
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
#段设备状态当前钢卷辊缝 mm速度张力/温度
{{ i + 1 }} + {{ eq.section }} + {{ eq.label }} + 加工中 + 已过 + 待入 + {{ rowOf(eq, i).coil }}{{ rowOf(eq, i).gap }}{{ rowOf(eq, i).speed }}{{ rowOf(eq, i).aux }}
+
@@ -837,52 +809,59 @@ export default { .line-wrap { padding: 0; } .line-body { padding: 6px 10px 10px; background: #0a1218; } -.line-svg { width: 100%; height: 312px; display: block; } +.line-svg { width: 100%; height: 310px; display: block; } .sec { background: $bg-card; border: 1px solid $border; border-radius: 6px; - overflow: hidden; + overflow: hidden; min-width: 0; } .sec-title-bar { display: flex; align-items: center; gap: 8px; - padding: 7px 12px; font-size: 13px; color: #c8d4e0; font-weight: 600; + padding: 7px 12px; font-size: 12px; color: $text-muted; font-weight: 500; background: #161d24; border-bottom: 1px solid $border; + border-left: 3px solid transparent; } -.pane { padding: 10px 12px; } -.pane-grid { - display: grid; gap: 10px; - grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); -} -.pane-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } -.entry-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } -.tank-grid { - display: grid; gap: 8px; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); +.sec-pill { + display: inline-block; padding: 2px 10px; + font-size: 11.5px; font-weight: 700; color: #0a1218; + border-radius: 3px; letter-spacing: 1px; } +.pane { padding: 10px 12px; min-width: 0; } -.sub-card { background: #0f161c; border: 1px solid $border; border-radius: 4px; display: flex; flex-direction: column; } -.sub-header { - padding: 6px 10px; font-size: 12px; color: #c8d4e0; - background: #161d24; border-bottom: 1px solid $border; - display: flex; align-items: center; gap: 8px; +.kpi-row { + display: grid; gap: 6px 8px; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } -.sub-header.acid { color: #ffaa44; } -.sub-header.rinse { color: #3aa0c8; } -.sub-body { padding: 8px 10px; flex: 1; } - -.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; } -.kpi-grid.two { grid-template-columns: repeat(2, 1fr); } -.kpi { display: flex; flex-direction: column; gap: 2px; } -.kpi-label { color: #8b9aab; font-size: 10.5px; } +.kpi-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } +.kpi-row.tight { + margin-top: 8px; padding-top: 8px; + border-top: 1px dashed $border; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); +} +.kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; } +.kpi-label { color: #8b9aab; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi-value { - color: #00c8ff; font-family: monospace; font-size: 14px; font-weight: 600; + color: #00c8ff; font-family: monospace; font-size: 13.5px; font-weight: 600; background: #0a1218; border: 1px solid #2a3540; border-radius: 3px; padding: 3px 8px; text-align: right; + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi-unit { color: #6b7c8d; font-size: 10px; font-weight: 400; margin-left: 4px; } -.producing-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; - padding: 6px 4px 8px; font-size: 12px; +.tank-row { + display: grid; gap: 8px; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + margin-bottom: 4px; +} +.tank-card { background: #0f161c; border: 1px solid $border; border-radius: 4px; padding: 6px 8px; min-width: 0; } +.tank-title { font-size: 11.5px; font-weight: 600; margin-bottom: 5px; } + +.tbl-scroll { width: 100%; overflow-x: auto; margin-bottom: 8px; } +.tbl-scroll:last-child { margin-bottom: 0; } + +.producing-row { + display: flex; align-items: center; gap: 8px; flex-wrap: wrap; + padding: 4px 4px 8px; font-size: 12px; border-bottom: 1px dashed $border; margin-bottom: 6px; .kv-label { color: $text-muted; font-size: 11px; margin-left: 4px; } .kv-value { color: $sms-highlight; font-weight: 600; }