437 lines
16 KiB
Vue
437 lines
16 KiB
Vue
<template>
|
||
<div class="tracking-wrap">
|
||
<!-- 工具栏 -->
|
||
<div class="track-toolbar">
|
||
<span class="track-title">跟踪管理</span>
|
||
<span class="track-update-time" v-if="lastUpdated">更新时间：{{ lastUpdated }}</span>
|
||
<el-button size="mini" icon="el-icon-refresh" :loading="loading" circle @click="loadData" />
|
||
</div>
|
||
|
||
<div class="tracking-body">
|
||
<!-- ─── 流程图 ─── -->
|
||
<div class="flow-diagram">
|
||
<div class="flow-row">
|
||
<div v-for="eq in flowRow1" :key="eq.name" class="flow-eq" :class="eq.cls">
|
||
<div class="eq-name">{{ eq.name }}<span class="eq-sub"> / {{ eq.label }}</span></div>
|
||
<div v-for="(slot, si) in slotsFor(eq.displayNames)" :key="si"
|
||
class="eq-slot" :class="slot.matId ? 'slot-active' : 'slot-empty'">
|
||
{{ slot.matId || '' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-row flow-row-reverse">
|
||
<div v-for="eq in flowRow2" :key="eq.name" class="flow-eq" :class="eq.cls">
|
||
<div class="eq-name">{{ eq.name }}<span class="eq-sub"> / {{ eq.label }}</span></div>
|
||
<div v-for="(slot, si) in slotsFor(eq.displayNames)" :key="si"
|
||
class="eq-slot" :class="slot.matId ? 'slot-active' : 'slot-empty'">
|
||
{{ slot.matId || '' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-row flow-row-sparse">
|
||
<div v-for="eq in flowRow3" :key="eq.name" class="flow-eq" :class="eq.cls" :style="eq.style">
|
||
<div class="eq-name">{{ eq.name }}<span class="eq-sub"> / {{ eq.label }}</span></div>
|
||
<div v-for="(slot, si) in slotsFor(eq.displayNames)" :key="si"
|
||
class="eq-slot" :class="slot.matId ? 'slot-active' : 'slot-empty'">
|
||
{{ slot.matId || '' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-row">
|
||
<div v-for="eq in flowRow4" :key="eq.name" class="flow-eq" :class="eq.cls">
|
||
<div class="eq-name">{{ eq.name }}<span class="eq-sub"> / {{ eq.label }}</span></div>
|
||
<div v-for="(slot, si) in slotsFor(eq.displayNames)" :key="si"
|
||
class="eq-slot" :class="slot.matId ? 'slot-active' : 'slot-empty'">
|
||
{{ slot.matId || '' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ─── 入口跟踪 ─── -->
|
||
<div class="section-label">入口跟踪</div>
|
||
<div class="entry-wrap">
|
||
<div v-for="(lane, li) in entryLanes" :key="li" class="entry-lane">
|
||
<div v-for="pos in lane" :key="pos.displayName"
|
||
class="entry-card" :class="{ 'has-coil': !!coilAt(pos.displayName) }">
|
||
<div class="entry-card-header">{{ pos.label }}</div>
|
||
<template v-if="coilAt(pos.displayName)">
|
||
<div class="entry-kv"><span class="ek">冷卷号</span><span class="ev">{{ coilAt(pos.displayName).coilid }}</span></div>
|
||
<div class="entry-kv"><span class="ek">热卷号</span><span class="ev">{{ coilAt(pos.displayName).hot_coilid }}</span></div>
|
||
<div class="entry-kv"><span class="ek">钢种</span><span class="ev">{{ coilAt(pos.displayName).grade }}</span></div>
|
||
<div class="entry-kv"><span class="ek">来料厚[mm]</span><span class="ev">{{ coilAt(pos.displayName).entry_thick }}</span></div>
|
||
<div class="entry-kv"><span class="ek">成品厚[mm]</span><span class="ev">{{ coilAt(pos.displayName).exit_thick }}</span></div>
|
||
<div class="entry-kv"><span class="ek">厚差[mm]</span><span class="ev">{{ coilAt(pos.displayName).min_exit_thick }} / {{ coilAt(pos.displayName).max_exit_thick }}</span></div>
|
||
<div class="entry-kv"><span class="ek">来料宽[mm]</span><span class="ev">{{ coilAt(pos.displayName).entry_width }}</span></div>
|
||
<div class="entry-kv"><span class="ek">成品宽[mm]</span><span class="ev">{{ coilAt(pos.displayName).exit_width }}</span></div>
|
||
<div class="entry-kv"><span class="ek">重量[t]</span><span class="ev">{{ coilAt(pos.displayName).entry_weight }}</span></div>
|
||
<div class="entry-kv"><span class="ek">轧制模式</span><span class="ev">{{ coilAt(pos.displayName).roll_mode }}</span></div>
|
||
</template>
|
||
<div v-else class="entry-empty">—</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ─── 详细信息 ─── -->
|
||
<div class="section-label">详细信息</div>
|
||
<el-table :data="detailTableRows" size="mini" border stripe style="width:100%">
|
||
<el-table-column prop="coilid" label="冷卷号" width="130" show-overflow-tooltip />
|
||
<el-table-column prop="hot_coilid" label="热卷号" width="130" show-overflow-tooltip />
|
||
<el-table-column prop="grade" label="钢种" width="100" />
|
||
<el-table-column prop="entry_thick" label="来料厚度" width="80" />
|
||
<el-table-column prop="exit_thick" label="产品厚度" width="80" />
|
||
<el-table-column prop="max_exit_thick" label="偏差上限" width="80" />
|
||
<el-table-column prop="min_exit_thick" label="偏差下限" width="80" />
|
||
<el-table-column prop="entry_width" label="来料宽度" width="80" />
|
||
<el-table-column prop="exit_width" label="产品宽度" width="80" />
|
||
<el-table-column prop="roll_mode" label="轧制模式" width="100" />
|
||
<el-table-column prop="park_type" label="包装要求" width="80" />
|
||
<el-table-column prop="side_trim" label="切边要求" width="80" />
|
||
<el-table-column prop="entry_weight" label="来料重量" width="80" />
|
||
<el-table-column prop="split_num" label="分卷数" width="70" />
|
||
<el-table-column prop="position" label="位置" width="120" show-overflow-tooltip />
|
||
<el-table-column prop="online_date" label="上线时间" width="160" show-overflow-tooltip />
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getTrackData } from '@/api/l2/timing'
|
||
|
||
const DISPLAY_LABEL = {
|
||
UC1: '1#上卷小车', UC2: '2#上卷小车',
|
||
WEIT1: '1#称重位', WEIT2: '2#称重位',
|
||
CR1: '1#地辊', CR2: '2#地辊',
|
||
ENC1: '1#倒卷小车', ENC2: '2#倒卷小车',
|
||
ENC3: '3#倒卷小车', ENC4: '4#倒卷小车',
|
||
CS1: '1#上卷鞍座', CS2: '2#上卷鞍座',
|
||
CS3: '3#上卷鞍座', CS4: '4#上卷鞍座',
|
||
CS5: '5#上卷鞍座', CS6: '6#上卷鞍座',
|
||
CS7: '7#上卷鞍座', CS8: '8#上卷鞍座',
|
||
CS9: '9#上卷鞍座', CS10: '10#上卷鞍座',
|
||
CS11: '11#上卷鞍座', CS12: '12#上卷鞍座',
|
||
CS13: '13#上卷鞍座', CS14: '14#上卷鞍座',
|
||
CXL: '出口活套', CXL1: '出口活套1', CXL2: '出口活套2',
|
||
CPR: '酸洗段', CPR1: '酸洗段1', CPR2: '酸洗段2',
|
||
CEL: '入口活套', CEL1: '入口活套1', CEL2: '入口活套2',
|
||
TRIMMER: '圆盘剪',
|
||
RINSE: '清洗段',
|
||
TLV: '拉矫机', TLV1: '拉矫机1',
|
||
TEL: '联机活套', TEL1: '联机活套1', TEL2: '联机活套2',
|
||
EXAM: '检查站', EXAMC: '检查站',
|
||
MILL: '轧机',
|
||
COILER: '卷取机',
|
||
EXC: '卸卷小车',
|
||
DC0: '交接鞍座',
|
||
EXC1: '步进梁1', EXC2: '步进梁2'
|
||
}
|
||
|
||
const ENTRY_LANES = [
|
||
[
|
||
{ displayName: 'UC1', label: '1#上卷小车' },
|
||
{ displayName: 'WEIT1', label: '1#称重位' },
|
||
{ displayName: 'CR1', label: '1#地辊' },
|
||
{ displayName: 'CS13', label: '13#上卷鞍座' },
|
||
{ displayName: 'CS11', label: '11#上卷鞍座' },
|
||
{ displayName: 'CS9', label: '9#上卷鞍座' },
|
||
{ displayName: 'CS7', label: '7#上卷鞍座' },
|
||
{ displayName: 'ENC1', label: '1#倒卷小车' },
|
||
{ displayName: 'CS5', label: '5#上卷鞍座' },
|
||
{ displayName: 'CS3', label: '3#上卷鞍座' },
|
||
{ displayName: 'CS1', label: '1#上卷鞍座' }
|
||
],
|
||
[
|
||
{ displayName: 'UC2', label: '2#上卷小车' },
|
||
{ displayName: 'WEIT2', label: '2#称重位' },
|
||
{ displayName: 'CR2', label: '2#地辊' },
|
||
{ displayName: 'CS14', label: '14#上卷鞍座' },
|
||
{ displayName: 'CS12', label: '12#上卷鞍座' },
|
||
{ displayName: 'CS10', label: '10#上卷鞍座' },
|
||
{ displayName: 'CS8', label: '8#上卷鞍座' },
|
||
{ displayName: 'ENC2', label: '2#倒卷小车' },
|
||
{ displayName: 'CS6', label: '6#上卷鞍座' },
|
||
{ displayName: 'CS4', label: '4#上卷鞍座' },
|
||
{ displayName: 'CS2', label: '2#上卷鞍座' }
|
||
]
|
||
]
|
||
|
||
const FLOW_ROWS = {
|
||
row1: [
|
||
{ name: 'CXL', label: '出口活套', displayNames: ['CXL'], cls: 'eq-process' },
|
||
{ name: 'CPR', label: '酸洗段', displayNames: ['CPR'], cls: 'eq-process' },
|
||
{ name: 'CEL', label: '入口活套', displayNames: ['CEL','CEL1'], cls: 'eq-process' },
|
||
{ name: 'UC1', label: '开卷机', displayNames: ['UC1'], cls: 'eq-entry' },
|
||
{ name: 'WEIT1', label: '称重位', displayNames: ['WEIT1'], cls: 'eq-entry' },
|
||
{ name: 'CR1', label: '地辊', displayNames: ['CR1'], cls: 'eq-entry' }
|
||
],
|
||
row2: [
|
||
{ name: 'TRIMMER', label: '圆盘剪', displayNames: ['TRIMMER'], cls: 'eq-process' },
|
||
{ name: 'RINSE', label: '清洗段', displayNames: ['RINSE'], cls: 'eq-process' },
|
||
{ name: 'TLV', label: '拉矫机', displayNames: ['TLV'], cls: 'eq-process' },
|
||
{ name: 'UC2', label: '开卷机', displayNames: ['UC2'], cls: 'eq-entry' },
|
||
{ name: 'WEIT2', label: '称重位', displayNames: ['WEIT2'], cls: 'eq-entry' },
|
||
{ name: 'CR2', label: '地辊', displayNames: ['CR2'], cls: 'eq-entry' }
|
||
],
|
||
row3: [
|
||
{ name: 'TEL', label: '联机活套', displayNames: ['TEL'], cls: 'eq-mill', style: 'flex:1' },
|
||
{ name: 'EXAM', label: '检查站', displayNames: ['EXAM','EXAMC'], cls: 'eq-exit', style: 'flex:1;margin-left:auto' }
|
||
],
|
||
row4: [
|
||
{ name: 'MILL', label: '轧机', displayNames: ['MILL'], cls: 'eq-mill' },
|
||
{ name: 'COILER', label: '卷取机', displayNames: ['COILER'],cls: 'eq-mill' },
|
||
{ name: 'EXC', label: '卸卷小车',displayNames: ['EXC'], cls: 'eq-exit' },
|
||
{ name: 'DC0', label: '交接鞍座',displayNames: ['DC0'], cls: 'eq-exit' },
|
||
{ name: 'EXC1', label: '步进梁1', displayNames: ['EXC1'], cls: 'eq-exit' },
|
||
{ name: 'EXC2', label: '步进梁2', displayNames: ['EXC2'], cls: 'eq-exit' }
|
||
]
|
||
}
|
||
|
||
export default {
|
||
name: 'TrackingView',
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
lastUpdated: '',
|
||
matMapRows: [],
|
||
entryTraceRows: [],
|
||
exitTraceRows: [],
|
||
pollTimer: null,
|
||
entryLanes: ENTRY_LANES,
|
||
flowRow1: FLOW_ROWS.row1,
|
||
flowRow2: FLOW_ROWS.row2,
|
||
flowRow3: FLOW_ROWS.row3,
|
||
flowRow4: FLOW_ROWS.row4
|
||
}
|
||
},
|
||
computed: {
|
||
matMapByDisplayName() {
|
||
const map = {}
|
||
for (const row of this.matMapRows) {
|
||
const dn = (row.displayname || row.DISPLAYNAME || '').toUpperCase()
|
||
if (!dn) continue
|
||
if (!map[dn]) map[dn] = []
|
||
map[dn].push({
|
||
matId: row.matid || row.MATID || null,
|
||
l1MapIdx: row.l1mapidx != null ? row.l1mapidx : row.L1MAPIDX
|
||
})
|
||
}
|
||
return map
|
||
},
|
||
entryByL1MapIdx() {
|
||
const map = {}
|
||
for (const row of this.entryTraceRows) {
|
||
const idx = row.l1mapidx != null ? row.l1mapidx : row.L1MAPIDX
|
||
if (idx != null) map[idx] = row
|
||
}
|
||
return map
|
||
},
|
||
detailTableRows() {
|
||
return this.entryTraceRows.map(row => {
|
||
const idx = row.l1mapidx != null ? row.l1mapidx : row.L1MAPIDX
|
||
const posRow = this.matMapRows.find(m => (m.l1mapidx != null ? m.l1mapidx : m.L1MAPIDX) === idx)
|
||
const dn = posRow ? (posRow.displayname || posRow.DISPLAYNAME || '').toUpperCase() : ''
|
||
return {
|
||
...row,
|
||
position: DISPLAY_LABEL[dn] || dn || ''
|
||
}
|
||
})
|
||
}
|
||
},
|
||
created() {
|
||
this.loadData()
|
||
this.pollTimer = setInterval(this.loadData, 5000)
|
||
},
|
||
beforeDestroy() {
|
||
if (this.pollTimer) clearInterval(this.pollTimer)
|
||
},
|
||
methods: {
|
||
async loadData() {
|
||
this.loading = true
|
||
try {
|
||
const res = await getTrackData()
|
||
const data = res?.data || {}
|
||
this.matMapRows = data.matMap || []
|
||
this.entryTraceRows = data.entryTrace || []
|
||
this.exitTraceRows = data.exitTrace || []
|
||
this.lastUpdated = new Date().toLocaleTimeString()
|
||
} catch (_) {}
|
||
finally { this.loading = false }
|
||
},
|
||
coilAt(displayName) {
|
||
const slots = this.matMapByDisplayName[displayName]
|
||
if (!slots || !slots.length) return null
|
||
const slot = slots[0]
|
||
if (!slot.matId) return null
|
||
return this.entryByL1MapIdx[slot.l1MapIdx] || null
|
||
},
|
||
slotsFor(displayNames) {
|
||
const result = []
|
||
for (const dn of displayNames) {
|
||
for (const s of (this.matMapByDisplayName[dn] || [])) {
|
||
result.push({ matId: s.matId })
|
||
}
|
||
}
|
||
while (result.length < 2) result.push({ matId: null })
|
||
return result.slice(0, 2)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.tracking-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: calc(100vh - 130px);
|
||
background: #f5f7fa;
|
||
padding: 8px 12px;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.track-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.track-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
|
||
.track-update-time {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.tracking-body {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.section-label {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
background: #2c5282;
|
||
padding: 4px 12px;
|
||
border-radius: 3px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ─── 流程图 ─── */
|
||
.flow-diagram {
|
||
background: #b8cde0;
|
||
border-radius: 6px;
|
||
padding: 10px 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.flow-row {
|
||
display: flex;
|
||
gap: 6px;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.flow-row-sparse {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.flow-eq {
|
||
min-width: 110px;
|
||
flex: 1;
|
||
border-radius: 4px;
|
||
padding: 6px 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
}
|
||
|
||
.eq-name {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: #1a2a4a;
|
||
white-space: nowrap;
|
||
}
|
||
.eq-sub { font-size: 10px; font-weight: normal; color: #2c4a7a; }
|
||
|
||
.eq-slot {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
border-radius: 3px;
|
||
padding: 2px 6px;
|
||
text-align: center;
|
||
min-height: 20px;
|
||
line-height: 20px;
|
||
}
|
||
.slot-empty { background: #cdd8e8; }
|
||
.slot-active { color: #fff; background: #1a4a8a; }
|
||
|
||
.eq-process { background: #22d3ee44; border: 1px solid #06b6d4; }
|
||
.eq-process .slot-active { background: #0891b2; }
|
||
.eq-entry { background: #fbbf2444; border: 1px solid #f59e0b; }
|
||
.eq-entry .slot-active { background: #b45309; }
|
||
.eq-mill { background: #f8717144; border: 1px solid #ef4444; }
|
||
.eq-mill .slot-active { background: #dc2626; }
|
||
.eq-exit { background: #a3e63544; border: 1px solid #84cc16; }
|
||
.eq-exit .slot-active { background: #4d7c0f; }
|
||
|
||
/* ─── 入口跟踪 ─── */
|
||
.entry-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.entry-lane {
|
||
display: flex;
|
||
gap: 5px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.entry-card {
|
||
min-width: 108px;
|
||
flex: 1;
|
||
background: #d9e6f7;
|
||
border: 1px solid #b0c8e8;
|
||
border-radius: 4px;
|
||
padding: 5px 7px;
|
||
font-size: 11px;
|
||
}
|
||
.entry-card.has-coil { background: #c5d8f0; }
|
||
|
||
.entry-card-header {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: #2c3e6b;
|
||
text-align: center;
|
||
margin-bottom: 3px;
|
||
padding-bottom: 3px;
|
||
border-bottom: 1px solid #b0c8e8;
|
||
}
|
||
|
||
.entry-kv {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 1px 0;
|
||
gap: 2px;
|
||
}
|
||
.ek { color: #5a6e99; flex-shrink: 0; }
|
||
.ev { color: #1a4a8a; font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
||
.entry-empty { text-align: center; color: #b0bec5; padding: 16px 0; }
|
||
</style>
|