refactor(material): 改为统一瓦片网格布局，彻底消除溢出
- 移除所有 section/sub-card/tank-card 嵌套结构 - 全部 47 个参数（入口/酸洗/清洗/烘干/出口）统一为 tile 瓦片 - tile-grid 用 auto-fit minmax(170px, 1fr)，浏览器自动排版 - 每个 tile 左边 3px 色边 + 顶部段位标签，颜色与产线总图一致 - 在线计划区改为行卡片列表，跟踪表保留独立卡片 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -240,183 +240,80 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 入口段 -->
|
<!-- 在线计划 / 移动按钮 -->
|
||||||
<section class="sec">
|
<div class="card plan-card">
|
||||||
<div class="sec-title-bar" :style="{ borderLeftColor: sectionColor('入口段') }">
|
<div class="plan-head">
|
||||||
<span class="sec-pill" :style="{ background: sectionColor('入口段') }">入口段</span>
|
<span class="sec-pill" :style="{ background: sectionColor('入口段') }">入口段·在线计划</span>
|
||||||
在线 {{ onlinePlans.length }} / 生产中 {{ producingPlan ? 1 : 0 }}
|
<span v-if="producingPlan" class="badge badge-yellow" style="margin-left:6px;">生产中 {{ producingPlan.cold_coil_no || producingPlan.plan_no }}</span>
|
||||||
|
<span v-else class="td-muted" style="margin-left:6px;font-size:11px;">无在线生产</span>
|
||||||
|
<span class="td-muted" style="margin-left:auto;font-size:11px;">{{ onlinePlans.length }} 卷待入</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="pane">
|
<div class="plan-list">
|
||||||
<!-- 在线计划 / 移动 -->
|
<div v-for="p in onlinePlans" :key="p.id" class="plan-item">
|
||||||
<div v-if="producingPlan" class="producing-row">
|
<span class="badge badge-gray">在线</span>
|
||||||
<span class="badge badge-yellow">生产中</span>
|
<span class="pi-coil">{{ p.cold_coil_no || p.plan_no }}</span>
|
||||||
<span class="kv-label">冷卷号</span><span class="kv-value">{{ producingPlan.cold_coil_no || producingPlan.plan_no }}</span>
|
<span class="pi-grade">{{ p.steel_grade || '—' }}</span>
|
||||||
<span class="kv-label">钢种</span><span class="kv-value">{{ producingPlan.steel_grade || '—' }}</span>
|
<span class="pi-spec">{{ fmt(p.product_thickness) }}×{{ fmt(p.product_width, 0) }}</span>
|
||||||
<span class="kv-label">规格</span><span class="kv-value">{{ fmt(producingPlan.product_thickness) }}×{{ fmt(producingPlan.product_width, 0) }}</span>
|
<span class="pi-split">分{{ p.split_count || 1 }}</span>
|
||||||
</div>
|
<button class="btn btn-primary btn-sm" :disabled="moving" @click="movePlan(p)">移动 →</button>
|
||||||
<div class="tbl-scroll">
|
|
||||||
<table class="data-table compact" v-if="onlinePlans.length">
|
|
||||||
<thead><tr><th>冷卷号</th><th>钢种</th><th>厚度</th><th>宽度</th><th>分卷</th><th style="width:90px;">移动</th></tr></thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="p in onlinePlans" :key="p.id">
|
|
||||||
<td class="td-num">{{ p.cold_coil_no || p.plan_no }}</td>
|
|
||||||
<td>{{ p.steel_grade || '—' }}</td>
|
|
||||||
<td class="td-num">{{ fmt(p.product_thickness) }}</td>
|
|
||||||
<td class="td-num">{{ fmt(p.product_width, 0) }}</td>
|
|
||||||
<td class="td-num">{{ p.split_count || 1 }}</td>
|
|
||||||
<td><button class="btn btn-primary btn-sm" :disabled="moving" @click="movePlan(p)">移动 →</button></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div v-else-if="!producingPlan" class="td-muted empty-row">暂无在线计划</div>
|
|
||||||
</div>
|
|
||||||
<!-- 入口实时参数 -->
|
|
||||||
<div class="kpi-row">
|
|
||||||
<div v-for="it in entryItems" :key="it.k" class="kpi">
|
|
||||||
<div class="kpi-label">{{ it.label }}</div>
|
|
||||||
<div class="kpi-value">{{ it.val }}<span class="kpi-unit" v-if="it.unit">{{ it.unit }}</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div v-if="!onlinePlans.length" class="td-muted" style="text-align:center;padding:6px;font-size:11px;">暂无队列</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<!-- 酸洗段 -->
|
<!-- 全段参数：统一瓦片网格 -->
|
||||||
<section class="sec">
|
<div class="tile-grid">
|
||||||
<div class="sec-title-bar" :style="{ borderLeftColor: sectionColor('酸洗段') }">
|
<div v-for="t in allTiles" :key="t.k" class="tile" :style="{ borderLeftColor: t.color }">
|
||||||
<span class="sec-pill" :style="{ background: sectionColor('酸洗段') }">酸洗段</span>
|
<div class="tile-tag" :style="{ color: t.color }">{{ t.section }}</div>
|
||||||
5 槽串联
|
<div class="tile-label">{{ t.label }}</div>
|
||||||
|
<div class="tile-value">{{ t.val }}<span v-if="t.unit" class="tile-unit">{{ t.unit }}</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pane">
|
</div>
|
||||||
<div class="tank-row">
|
|
||||||
<div v-for="(a, i) in acid" :key="'a'+i" class="tank-card">
|
|
||||||
<div class="tank-title" :style="{ color: sectionColor('酸洗段') }">{{ i+1 }}# 酸洗槽</div>
|
|
||||||
<div class="kpi-row two">
|
|
||||||
<div class="kpi"><div class="kpi-label">槽温度</div><div class="kpi-value">{{ fix(a.temp,1) }}<span class="kpi-unit">°C</span></div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">罐液位</div><div class="kpi-value">{{ fix(a.level,2) }}<span class="kpi-unit">m</span></div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">槽浓度</div><div class="kpi-value">{{ fix(a.conc,1) }}<span class="kpi-unit">g/L</span></div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">槽电导率</div><div class="kpi-value">{{ fix(a.cond,1) }}<span class="kpi-unit">mS/cm</span></div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">罐浓度</div><div class="kpi-value">{{ fix(a.tank_conc,1) }}<span class="kpi-unit">g/L</span></div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">罐电导率</div><div class="kpi-value">{{ fix(a.tank_cond,1) }}<span class="kpi-unit">mS/cm</span></div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="kpi-row tight">
|
|
||||||
<div class="kpi"><div class="kpi-label">酸雾塔 PH</div><div class="kpi-value">{{ fix(acid_mist.ph,2) }}</div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">雾塔变频频率</div><div class="kpi-value">{{ fix(acid_mist.vfd_speed,1) }}<span class="kpi-unit">Hz</span></div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">雾塔变频电流</div><div class="kpi-value">{{ fix(acid_mist.vfd_current,1) }}<span class="kpi-unit">A</span></div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">冷凝罐液位</div><div class="kpi-value">{{ fix(acid_cond.level,2) }}<span class="kpi-unit">m</span></div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">冷凝罐温度</div><div class="kpi-value">{{ fix(acid_cond.temp,1) }}<span class="kpi-unit">°C</span></div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">冷凝电导率</div><div class="kpi-value">{{ fix(acid_cond.cond,1) }}<span class="kpi-unit">μS/cm</span></div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 清洗段 + 烘干段 -->
|
<!-- 物料跟踪表 -->
|
||||||
<section class="sec">
|
<div class="card track-card">
|
||||||
<div class="sec-title-bar" :style="{ borderLeftColor: sectionColor('清洗段') }">
|
<div class="card-header">
|
||||||
<span class="sec-pill" :style="{ background: sectionColor('清洗段') }">清洗段</span>
|
<span class="sec-pill" style="background:#5a6a78;">物料跟踪表</span>
|
||||||
<span class="sec-pill" :style="{ background: sectionColor('烘干段') }">烘干段</span>
|
<span class="td-muted" style="margin-left:auto;font-size:11px;">{{ equipments.length }} 台设备 · 焊缝 {{ (weld.position*100).toFixed(1) }}%</span>
|
||||||
5 级逆流 + 3 段热风
|
|
||||||
</div>
|
</div>
|
||||||
<div class="pane">
|
<div class="tbl-scroll" style="max-height:280px;">
|
||||||
<div class="tank-row">
|
<table class="data-table compact tracking-table">
|
||||||
<div v-for="(r, i) in rinse" :key="'r'+i" class="tank-card">
|
<thead>
|
||||||
<div class="tank-title" :style="{ color: sectionColor('清洗段') }">{{ i+1 }}# 漂洗</div>
|
<tr>
|
||||||
<div class="kpi-row two">
|
<th style="width:32px;">#</th>
|
||||||
<div class="kpi"><div class="kpi-label">槽温度</div><div class="kpi-value">{{ fix(rinse_tank_temp[i],1) }}<span class="kpi-unit">°C</span></div></div>
|
<th style="width:78px;">段</th>
|
||||||
<div class="kpi"><div class="kpi-label">罐液位</div><div class="kpi-value">{{ fix(r.level,2) }}<span class="kpi-unit">m</span></div></div>
|
<th>设备</th>
|
||||||
<div class="kpi"><div class="kpi-label">槽浓度</div><div class="kpi-value">{{ fix(r.conc,2) }}<span class="kpi-unit">g/L</span></div></div>
|
<th style="width:64px;">状态</th>
|
||||||
<div class="kpi"><div class="kpi-label">槽电导率</div><div class="kpi-value">{{ fix(r.cond,2) }}<span class="kpi-unit">μS/cm</span></div></div>
|
<th>当前钢卷</th>
|
||||||
<div class="kpi"><div class="kpi-label">罐浓度</div><div class="kpi-value">{{ fix(r.tank_conc,2) }}<span class="kpi-unit">g/L</span></div></div>
|
<th style="width:72px;">辊缝</th>
|
||||||
<div class="kpi"><div class="kpi-label">罐电导率</div><div class="kpi-value">{{ fix(r.tank_cond,2) }}<span class="kpi-unit">μS/cm</span></div></div>
|
<th style="width:70px;">速度</th>
|
||||||
</div>
|
<th style="width:78px;">辅助</th>
|
||||||
</div>
|
</tr>
|
||||||
</div>
|
</thead>
|
||||||
<div class="kpi-row tight">
|
<tbody>
|
||||||
<div class="kpi"><div class="kpi-label">漂洗雾塔 PH</div><div class="kpi-value">{{ fix(rinse_mist.ph,2) }}</div></div>
|
<tr v-for="(eq, i) in equipments" :key="eq.k"
|
||||||
<div class="kpi"><div class="kpi-label">雾塔变频频率</div><div class="kpi-value">{{ fix(rinse_mist.vfd_speed,1) }}<span class="kpi-unit">Hz</span></div></div>
|
:class="{ 'row-active': eq.k === currentEquipment.k, 'row-passed': i < currentEquipment.idx, 'row-pending': i > currentEquipment.idx }">
|
||||||
<div class="kpi"><div class="kpi-label">雾塔变频电流</div><div class="kpi-value">{{ fix(rinse_mist.vfd_current,1) }}<span class="kpi-unit">A</span></div></div>
|
<td class="td-num">{{ i + 1 }}</td>
|
||||||
<div class="kpi"><div class="kpi-label">冷凝液位</div><div class="kpi-value">{{ fix(rinse_cond.level,2) }}<span class="kpi-unit">m</span></div></div>
|
<td>
|
||||||
<div class="kpi"><div class="kpi-label">冷凝温度</div><div class="kpi-value">{{ fix(rinse_cond.temp,1) }}<span class="kpi-unit">°C</span></div></div>
|
<span class="sec-tag" :style="{ color: sectionColor(eq.section), borderColor: sectionColor(eq.section) }">{{ eq.section }}</span>
|
||||||
<div class="kpi"><div class="kpi-label">冷凝电导率</div><div class="kpi-value">{{ fix(rinse_cond.cond,2) }}<span class="kpi-unit">μS/cm</span></div></div>
|
</td>
|
||||||
<div class="kpi"><div class="kpi-label" :style="{ color: sectionColor('烘干段') }">烘干 1 段</div><div class="kpi-value">{{ fix(dryer.t1,0) }}<span class="kpi-unit">°C</span></div></div>
|
<td>{{ eq.label }}</td>
|
||||||
<div class="kpi"><div class="kpi-label" :style="{ color: sectionColor('烘干段') }">烘干 2 段</div><div class="kpi-value">{{ fix(dryer.t2,0) }}<span class="kpi-unit">°C</span></div></div>
|
<td>
|
||||||
<div class="kpi"><div class="kpi-label" :style="{ color: sectionColor('烘干段') }">烘干 3 段</div><div class="kpi-value">{{ fix(dryer.t3,0) }}<span class="kpi-unit">°C</span></div></div>
|
<span v-if="eq.k === currentEquipment.k" class="badge badge-yellow">加工中</span>
|
||||||
</div>
|
<span v-else-if="i < currentEquipment.idx" class="badge badge-blue">已过</span>
|
||||||
|
<span v-else class="badge badge-gray">待入</span>
|
||||||
|
</td>
|
||||||
|
<td class="td-num">{{ rowOf(eq, i).coil }}</td>
|
||||||
|
<td class="td-num">{{ rowOf(eq, i).gap }}</td>
|
||||||
|
<td class="td-num">{{ rowOf(eq, i).speed }}</td>
|
||||||
|
<td class="td-num">{{ rowOf(eq, i).aux }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<!-- 出口段 -->
|
|
||||||
<section class="sec">
|
|
||||||
<div class="sec-title-bar" :style="{ borderLeftColor: sectionColor('出口段') }">
|
|
||||||
<span class="sec-pill" :style="{ background: sectionColor('出口段') }">出口段</span>
|
|
||||||
三辊张力 + 平整 + 涂油 + 收卷
|
|
||||||
</div>
|
|
||||||
<div class="pane">
|
|
||||||
<div class="kpi-row">
|
|
||||||
<div v-for="(v, i) in tension_vfd" :key="'vfd'+i" class="kpi">
|
|
||||||
<div class="kpi-label">三辊 VFD-{{ i+1 }} 速度</div>
|
|
||||||
<div class="kpi-value">{{ fix(v.speed,1) }}<span class="kpi-unit">m/min</span></div>
|
|
||||||
</div>
|
|
||||||
<div v-for="(v, i) in tension_vfd" :key="'vfdc'+i" class="kpi">
|
|
||||||
<div class="kpi-label">三辊 VFD-{{ i+1 }} 电流</div>
|
|
||||||
<div class="kpi-value">{{ fix(v.current,0) }}<span class="kpi-unit">A</span></div>
|
|
||||||
</div>
|
|
||||||
<div v-for="(v, i) in tension_vfd" :key="'vfdq'+i" class="kpi">
|
|
||||||
<div class="kpi-label">三辊 VFD-{{ i+1 }} 扭矩</div>
|
|
||||||
<div class="kpi-value">{{ fix(v.torque,2) }}<span class="kpi-unit">kN·m</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="kpi"><div class="kpi-label">平整辊缝</div><div class="kpi-value">{{ fix(leveler.gap,2) }}<span class="kpi-unit">mm</span></div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">平整轧制力</div><div class="kpi-value">{{ fix(leveler.force,0) }}<span class="kpi-unit">kN</span></div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">平整延伸率</div><div class="kpi-value">{{ fix(leveler.elongation,2) }}<span class="kpi-unit">%</span></div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">收卷张力</div><div class="kpi-value">{{ fix(recoiler.tension,1) }}<span class="kpi-unit">kN</span></div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">收卷直径</div><div class="kpi-value">{{ fix(recoiler.diameter,0) }}<span class="kpi-unit">mm</span></div></div>
|
|
||||||
<div class="kpi"><div class="kpi-label">收卷速度</div><div class="kpi-value">{{ fix(recoiler.speed,1) }}<span class="kpi-unit">m/min</span></div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 跟踪表 -->
|
|
||||||
<section class="sec">
|
|
||||||
<div class="sec-title-bar"><span class="sec-pill" style="background:#5a6a78;">物料跟踪表</span> {{ equipments.length }} 台设备</div>
|
|
||||||
<div class="pane">
|
|
||||||
<div class="tbl-scroll">
|
|
||||||
<table class="data-table compact tracking-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style="width:32px;">#</th>
|
|
||||||
<th style="width:72px;">段</th>
|
|
||||||
<th>设备</th>
|
|
||||||
<th style="width:64px;">状态</th>
|
|
||||||
<th>当前钢卷</th>
|
|
||||||
<th style="width:80px;">辊缝 mm</th>
|
|
||||||
<th style="width:78px;">速度</th>
|
|
||||||
<th style="width:80px;">张力/温度</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="(eq, i) in equipments" :key="eq.k"
|
|
||||||
:class="{ 'row-active': eq.k === currentEquipment.k, 'row-passed': i < currentEquipment.idx, 'row-pending': i > currentEquipment.idx }">
|
|
||||||
<td class="td-num">{{ i + 1 }}</td>
|
|
||||||
<td>
|
|
||||||
<span class="sec-tag" :style="{ color: sectionColor(eq.section), borderColor: sectionColor(eq.section) }">{{ eq.section }}</span>
|
|
||||||
</td>
|
|
||||||
<td>{{ eq.label }}</td>
|
|
||||||
<td>
|
|
||||||
<span v-if="eq.k === currentEquipment.k" class="badge badge-yellow">加工中</span>
|
|
||||||
<span v-else-if="i < currentEquipment.idx" class="badge badge-blue">已过</span>
|
|
||||||
<span v-else class="badge badge-gray">待入</span>
|
|
||||||
</td>
|
|
||||||
<td class="td-num">{{ rowOf(eq, i).coil }}</td>
|
|
||||||
<td class="td-num">{{ rowOf(eq, i).gap }}</td>
|
|
||||||
<td class="td-num">{{ rowOf(eq, i).speed }}</td>
|
|
||||||
<td class="td-num">{{ rowOf(eq, i).aux }}</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -516,6 +413,73 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
allTiles() {
|
||||||
|
const f = (v, n=1) => Number(v).toFixed(n)
|
||||||
|
const c = (s) => SECTION_COLORS[s] || '#9aa8b6'
|
||||||
|
const out = []
|
||||||
|
const push = (section, label, val, unit) => out.push({
|
||||||
|
k: section + ':' + label, section, color: c(section), label, val, unit,
|
||||||
|
})
|
||||||
|
// 入口段
|
||||||
|
push('入口段', '开卷张力', f(this.uncoiler.tension, 1), 'kN')
|
||||||
|
push('入口段', '工艺段速度', f(this.current.speed, 1), 'm/min')
|
||||||
|
push('入口段', '开卷机速度', f(this.uncoiler.speed, 1), 'm/min')
|
||||||
|
push('入口段', '开卷机卷径', f(this.uncoiler.diameter, 0),'mm')
|
||||||
|
push('入口段', '开卷机电流', f(this.uncoiler.current, 0), 'A')
|
||||||
|
push('入口段', '开卷机扭矩', f(this.uncoiler.torque, 2), 'kN·m')
|
||||||
|
push('入口段', '矫直机速度', f(this.straightener.speed, 1), 'm/min')
|
||||||
|
push('入口段', '矫直机辊缝', f(this.straightener.gap, 2), 'mm')
|
||||||
|
push('入口段', '矫直机电流', f(this.straightener.current, 0),'A')
|
||||||
|
push('入口段', '矫直机扭矩', f(this.straightener.torque, 2), 'kN·m')
|
||||||
|
push('入口段', '1#夹送辊速度', f(this.br1.speed, 1), 'm/min')
|
||||||
|
push('入口段', '1#夹送辊辊缝', f(this.br1.gap, 2), 'mm')
|
||||||
|
// 酸洗段：5 槽
|
||||||
|
this.acid.forEach((a, i) => {
|
||||||
|
const t = (i+1) + '#酸槽 '
|
||||||
|
push('酸洗段', t + '温度', f(a.temp, 1), '°C')
|
||||||
|
push('酸洗段', t + '浓度', f(a.conc, 1), 'g/L')
|
||||||
|
push('酸洗段', t + '液位', f(a.level, 2), 'm')
|
||||||
|
push('酸洗段', t + '电导率', f(a.cond, 1), 'mS/cm')
|
||||||
|
})
|
||||||
|
push('酸洗段', '酸雾塔 PH', f(this.acid_mist.ph, 2), '')
|
||||||
|
push('酸洗段', '酸雾变频频率', f(this.acid_mist.vfd_speed, 1), 'Hz')
|
||||||
|
push('酸洗段', '酸雾变频电流', f(this.acid_mist.vfd_current, 1), 'A')
|
||||||
|
push('酸洗段', '冷凝罐液位', f(this.acid_cond.level, 2), 'm')
|
||||||
|
push('酸洗段', '冷凝罐温度', f(this.acid_cond.temp, 1), '°C')
|
||||||
|
push('酸洗段', '冷凝电导率', f(this.acid_cond.cond, 1), 'μS/cm')
|
||||||
|
// 清洗段：5 级
|
||||||
|
this.rinse.forEach((r, i) => {
|
||||||
|
const t = (i+1) + '#漂洗 '
|
||||||
|
push('清洗段', t + '温度', f(this.rinse_tank_temp[i], 1), '°C')
|
||||||
|
push('清洗段', t + '浓度', f(r.conc, 2), 'g/L')
|
||||||
|
push('清洗段', t + '液位', f(r.level, 2), 'm')
|
||||||
|
push('清洗段', t + '电导率', f(r.cond, 2), 'μS/cm')
|
||||||
|
})
|
||||||
|
push('清洗段', '漂洗雾塔 PH', f(this.rinse_mist.ph, 2), '')
|
||||||
|
push('清洗段', '雾塔变频频率', f(this.rinse_mist.vfd_speed, 1), 'Hz')
|
||||||
|
push('清洗段', '雾塔变频电流', f(this.rinse_mist.vfd_current, 1), 'A')
|
||||||
|
push('清洗段', '冷凝液位', f(this.rinse_cond.level, 2), 'm')
|
||||||
|
push('清洗段', '冷凝温度', f(this.rinse_cond.temp, 1), '°C')
|
||||||
|
push('清洗段', '冷凝电导率', f(this.rinse_cond.cond, 2), 'μS/cm')
|
||||||
|
// 烘干段
|
||||||
|
push('烘干段', '烘干1段', f(this.dryer.t1, 0), '°C')
|
||||||
|
push('烘干段', '烘干2段', f(this.dryer.t2, 0), '°C')
|
||||||
|
push('烘干段', '烘干3段', f(this.dryer.t3, 0), '°C')
|
||||||
|
// 出口段
|
||||||
|
this.tension_vfd.forEach((v, i) => {
|
||||||
|
const t = '三辊VFD-' + (i+1) + ' '
|
||||||
|
push('出口段', t + '速度', f(v.speed, 1), 'm/min')
|
||||||
|
push('出口段', t + '电流', f(v.current, 0), 'A')
|
||||||
|
push('出口段', t + '扭矩', f(v.torque, 2), 'kN·m')
|
||||||
|
})
|
||||||
|
push('出口段', '平整辊缝', f(this.leveler.gap, 2), 'mm')
|
||||||
|
push('出口段', '平整轧制力', f(this.leveler.force, 0), 'kN')
|
||||||
|
push('出口段', '平整延伸率', f(this.leveler.elongation, 2), '%')
|
||||||
|
push('出口段', '收卷张力', f(this.recoiler.tension, 1), 'kN')
|
||||||
|
push('出口段', '收卷直径', f(this.recoiler.diameter, 0), 'mm')
|
||||||
|
push('出口段', '收卷速度', f(this.recoiler.speed, 1), 'm/min')
|
||||||
|
return out
|
||||||
|
},
|
||||||
entryItems() {
|
entryItems() {
|
||||||
const f = (v, n=1) => Number(v).toFixed(n)
|
const f = (v, n=1) => Number(v).toFixed(n)
|
||||||
return [
|
return [
|
||||||
@@ -811,64 +775,72 @@ export default {
|
|||||||
.line-body { padding: 6px 10px 10px; background: #0a1218; }
|
.line-body { padding: 6px 10px 10px; background: #0a1218; }
|
||||||
.line-svg { width: 100%; height: 310px; display: block; }
|
.line-svg { width: 100%; height: 310px; display: block; }
|
||||||
|
|
||||||
.sec {
|
|
||||||
background: $bg-card; border: 1px solid $border; border-radius: 6px;
|
|
||||||
overflow: hidden; min-width: 0;
|
|
||||||
}
|
|
||||||
.sec-title-bar {
|
|
||||||
display: flex; align-items: center; gap: 8px;
|
|
||||||
padding: 7px 12px; font-size: 12px; color: $text-muted; font-weight: 500;
|
|
||||||
background: #161d24; border-bottom: 1px solid $border;
|
|
||||||
border-left: 3px solid transparent;
|
|
||||||
}
|
|
||||||
.sec-pill {
|
.sec-pill {
|
||||||
display: inline-block; padding: 2px 10px;
|
display: inline-block; padding: 2px 10px;
|
||||||
font-size: 11.5px; font-weight: 700; color: #0a1218;
|
font-size: 11.5px; font-weight: 700; color: #0a1218;
|
||||||
border-radius: 3px; letter-spacing: 1px;
|
border-radius: 3px; letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
.pane { padding: 10px 12px; min-width: 0; }
|
|
||||||
|
|
||||||
.kpi-row {
|
/* ─── 在线计划卡 ─── */
|
||||||
display: grid; gap: 6px 8px;
|
.plan-card { padding: 0; }
|
||||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
.plan-head {
|
||||||
|
display: flex; align-items: center; gap: 6px;
|
||||||
|
padding: 7px 12px; font-size: 12px;
|
||||||
|
background: #161d24; border-bottom: 1px solid $border;
|
||||||
}
|
}
|
||||||
.kpi-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
.plan-list { padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; }
|
||||||
.kpi-row.tight {
|
.plan-item {
|
||||||
margin-top: 8px; padding-top: 8px;
|
display: flex; align-items: center; gap: 10px;
|
||||||
border-top: 1px dashed $border;
|
padding: 4px 8px;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
background: #0f161c; border: 1px solid $border; border-radius: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
.pi-coil { color: $sms-highlight; font-weight: 600; font-family: monospace; min-width: 110px; }
|
||||||
|
.pi-grade { color: #c8d4e0; min-width: 60px; }
|
||||||
|
.pi-spec { color: #8b9aab; min-width: 90px; font-family: monospace; }
|
||||||
|
.pi-split { color: #8b9aab; min-width: 40px; }
|
||||||
|
button { margin-left: auto; }
|
||||||
}
|
}
|
||||||
.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 {
|
.tile-grid {
|
||||||
color: #00c8ff; font-family: monospace; font-size: 13.5px; font-weight: 600;
|
display: grid; gap: 6px;
|
||||||
background: #0a1218; border: 1px solid #2a3540; border-radius: 3px;
|
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||||||
padding: 3px 8px; text-align: right;
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.tile {
|
||||||
|
display: flex; flex-direction: column; gap: 1px;
|
||||||
|
padding: 5px 8px 6px;
|
||||||
|
background: $bg-card; border: 1px solid $border;
|
||||||
|
border-left: 3px solid transparent;
|
||||||
|
border-radius: 3px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.tile-tag {
|
||||||
|
font-size: 9px; font-weight: 700; letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.kpi-unit { color: #6b7c8d; font-size: 10px; font-weight: 400; margin-left: 4px; }
|
.tile-label {
|
||||||
|
font-size: 11px; color: #8b9aab;
|
||||||
.tank-row {
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||||
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; }
|
.tile-value {
|
||||||
.tank-title { font-size: 11.5px; font-weight: 600; margin-bottom: 5px; }
|
font-family: monospace; font-size: 15px; font-weight: 700;
|
||||||
|
color: #00c8ff; text-align: right; margin-top: 1px;
|
||||||
.tbl-scroll { width: 100%; overflow-x: auto; margin-bottom: 8px; }
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||||
.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; }
|
|
||||||
}
|
}
|
||||||
|
.tile-unit { font-size: 10px; color: #6b7c8d; font-weight: 400; margin-left: 4px; }
|
||||||
|
|
||||||
|
/* ─── 跟踪表卡 ─── */
|
||||||
|
.track-card { padding: 0; }
|
||||||
|
.track-card .card-header {
|
||||||
|
display: flex; align-items: center; padding: 7px 12px;
|
||||||
|
background: #161d24; border-bottom: 1px solid $border; font-size: 12px;
|
||||||
|
}
|
||||||
|
.tbl-scroll { width: 100%; overflow: auto; }
|
||||||
|
|
||||||
.empty-row { text-align: center; padding: 10px; font-size: 12px; }
|
.empty-row { text-align: center; padding: 10px; font-size: 12px; }
|
||||||
.btn-sm { padding: 2px 10px; font-size: 11px; }
|
.btn-sm { padding: 2px 10px; font-size: 11px; white-space: nowrap; }
|
||||||
.hd-cnt { font-size: 11px; color: #6b7c8d; font-weight: 400; }
|
|
||||||
|
|
||||||
.data-table.compact th, .data-table.compact td { padding: 5px 8px; font-size: 11.5px; }
|
.data-table.compact th, .data-table.compact td { padding: 5px 8px; font-size: 11.5px; }
|
||||||
.tracking-table tr.row-active { background: rgba(255, 221, 68, 0.10); }
|
.tracking-table tr.row-active { background: rgba(255, 221, 68, 0.10); }
|
||||||
|
|||||||
Reference in New Issue
Block a user