1完成酸轧轧辊调整
2完成双机架工艺规格串联 3完成双机架计划串联 4完成双机架wip快捷录入检索 5完成双机架实绩串联
This commit is contained in:
355
klp-ui/src/views/timing/acid/rollConfig.vue
Normal file
355
klp-ui/src/views/timing/acid/rollConfig.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="roll-config-view">
|
||||
<div class="toolbar">
|
||||
<span class="page-title"><i class="el-icon-s-tools" /> 酸轧配辊</span>
|
||||
<div class="toolbar-right">
|
||||
<span v-if="lastRefresh" class="refresh-time">上次刷新：{{ lastRefresh }}</span>
|
||||
<el-button size="small" @click="handleCheck">
|
||||
<i class="el-icon-search" /> 缺辊检查
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" :loading="loading" @click="loadData">
|
||||
<i class="el-icon-refresh" /> 刷新
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap" v-loading="loading">
|
||||
<table class="roll-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2" class="th-stand">机架</th>
|
||||
<th rowspan="2" class="th-pos">位置</th>
|
||||
<th colspan="4" class="th-section th-standby">备 辊</th>
|
||||
<th colspan="9" class="th-section th-online">在线辊</th>
|
||||
<th colspan="4" class="th-section th-standard">换辊参考</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<!-- 备辊 -->
|
||||
<th class="th-sub">辊号</th>
|
||||
<th class="th-sub">外径(mm)</th>
|
||||
<th class="th-sub">凸度</th>
|
||||
<th class="th-sub">粗糙度</th>
|
||||
<!-- 在线辊 -->
|
||||
<th class="th-sub">辊号</th>
|
||||
<th class="th-sub">上/下</th>
|
||||
<th class="th-sub">辊型</th>
|
||||
<th class="th-sub">直径(mm)</th>
|
||||
<th class="th-sub">凸度</th>
|
||||
<th class="th-sub">粗糙度</th>
|
||||
<th class="th-sub">本次长度</th>
|
||||
<th class="th-sub">本次重量</th>
|
||||
<th class="th-sub">安装时间</th>
|
||||
<!-- 换辊参考 -->
|
||||
<th class="th-sub">本次长度</th>
|
||||
<th class="th-sub">累计长度</th>
|
||||
<th class="th-sub">本次重量</th>
|
||||
<th class="th-sub">累计重量</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="(stand, si) in tableData">
|
||||
<tr
|
||||
v-for="(pos, pi) in stand.positions"
|
||||
:key="stand.id + '-' + pi"
|
||||
:class="rowCls(pos, pi)"
|
||||
>
|
||||
<td v-if="pi === 0" :rowspan="stand.positions.length" class="td-stand">
|
||||
{{ stand.name }}
|
||||
</td>
|
||||
<td class="td-pos" :class="posTypeCls(pos)">{{ pos.label }}</td>
|
||||
|
||||
<!-- 备辊 -->
|
||||
<td class="td-standby">{{ sv(pos.standby, 'rollid') }}</td>
|
||||
<td class="td-standby">{{ nv(pos.standby, 'diameter') }}</td>
|
||||
<td class="td-standby">{{ nv(pos.standby, 'crown') }}</td>
|
||||
<td class="td-standby">{{ nv(pos.standby, 'rough') }}</td>
|
||||
|
||||
<!-- 在线辊 -->
|
||||
<td class="td-online td-bold">{{ sv(pos.online, 'rollid') }}</td>
|
||||
<td class="td-online">{{ dispPos(pos.online && pos.online.position) }}</td>
|
||||
<td class="td-online">
|
||||
<span :class="typeChipCls(pos.online && pos.online.type)">
|
||||
{{ dispType(pos.online && pos.online.type) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="td-online">{{ nv(pos.online, 'diameter') }}</td>
|
||||
<td class="td-online">{{ nv(pos.online, 'crown') }}</td>
|
||||
<td class="td-online">{{ nv(pos.online, 'rough') }}</td>
|
||||
<td class="td-online">{{ iv(pos.online, 'rolled_length') }}</td>
|
||||
<td class="td-online">{{ iv(pos.online, 'rolled_weight') }}</td>
|
||||
<td class="td-online td-time">{{ dv(pos.online, 'instal_time') }}</td>
|
||||
|
||||
<!-- 换辊参考 -->
|
||||
<td class="td-std">{{ iv(pos.online, 'rolled_length') }}</td>
|
||||
<td class="td-std">{{ iv(pos.online, 'total_rolled_length') }}</td>
|
||||
<td class="td-std">{{ iv(pos.online, 'rolled_weight') }}</td>
|
||||
<td class="td-std">{{ iv(pos.online, 'total_rolled_weight') }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRollData } from '@/api/l2/timing'
|
||||
|
||||
// 酸轧（PLTCM）六机架
|
||||
const STAND_NAMES = ['1#机架', '2#机架', '3#机架', '4#机架', '5#机架', '6#机架']
|
||||
|
||||
const POS_NORM = {
|
||||
TOP: '上', UPPER: '上', UP: '上', '上': '上',
|
||||
BOTTOM: '下', LOWER: '下', DOWN: '下', '下': '下'
|
||||
}
|
||||
const TYPE_NORM = {
|
||||
WORK: '工作辊', WORK_ROLL: '工作辊', WR: '工作辊', '工作辊': '工作辊',
|
||||
BACKUP: '支撑辊', BUR: '支撑辊', SUPPORT: '支撑辊', BACK_UP: '支撑辊', '支撑辊': '支撑辊',
|
||||
INTERMEDIATE: '中间辊', IMR: '中间辊', INTER: '中间辊', '中间辊': '中间辊'
|
||||
}
|
||||
|
||||
function normPos(v) { return POS_NORM[String(v || '').toUpperCase()] || String(v || '').trim() }
|
||||
function normType(v) { return TYPE_NORM[String(v || '').toUpperCase()] || String(v || '').trim() }
|
||||
|
||||
// 酸轧六辊轧机（UCM）辊系排列：支撑辊 + 中间辊 + 工作辊
|
||||
const POSITIONS = [
|
||||
{ label: '上支撑辊', position: '上', type: '支撑辊', group: 'bur' },
|
||||
{ label: '上中间辊', position: '上', type: '中间辊', group: 'imr' },
|
||||
{ label: '上工作辊', position: '上', type: '工作辊', group: 'wr' },
|
||||
{ label: '下工作辊', position: '下', type: '工作辊', group: 'wr' },
|
||||
{ label: '下中间辊', position: '下', type: '中间辊', group: 'imr' },
|
||||
{ label: '下支撑辊', position: '下', type: '支撑辊', group: 'bur' }
|
||||
]
|
||||
|
||||
function fmtDateStr(val) {
|
||||
if (!val) return '—'
|
||||
const s = String(val)
|
||||
const m = s.match(/(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})/)
|
||||
if (m) return `${m[1]}-${m[2]}-${m[3]} ${m[4]}:${m[5]}`
|
||||
const d = new Date(val)
|
||||
if (isNaN(d.getTime())) return s.substring(0, 16)
|
||||
const pad = n => String(n).padStart(2, '0')
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'AcidRollConfigPage',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
lastRefresh: '',
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await getRollData()
|
||||
const rows = res?.data?.rows || []
|
||||
this.buildTableData(rows)
|
||||
const now = new Date()
|
||||
const pad = n => String(n).padStart(2, '0')
|
||||
this.lastRefresh = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
buildTableData(rows) {
|
||||
this.tableData = STAND_NAMES.map((name, idx) => {
|
||||
const standId = idx + 1
|
||||
const standRows = rows.filter(r => Number(r.standid) === standId)
|
||||
const positions = POSITIONS.map(p => {
|
||||
const matches = standRows
|
||||
.filter(r => normPos(r.position) === p.position && normType(r.type) === p.type)
|
||||
.sort((a, b) => {
|
||||
const ta = a.instal_time ? new Date(a.instal_time).getTime() : 0
|
||||
const tb = b.instal_time ? new Date(b.instal_time).getTime() : 0
|
||||
return ta - tb
|
||||
})
|
||||
return { ...p, online: matches[0] || null, standby: matches[1] || null }
|
||||
})
|
||||
return { id: standId, name, positions }
|
||||
})
|
||||
},
|
||||
rowCls(pos, pi) {
|
||||
const cls = []
|
||||
if (!pos.online) cls.push('row-empty')
|
||||
if (pi === 2 || pi === 3) cls.push('row-wr') // 工作辊行分隔线
|
||||
return cls.join(' ')
|
||||
},
|
||||
posTypeCls(pos) {
|
||||
const map = { bur: 'pos-bur', imr: 'pos-imr', wr: 'pos-wr' }
|
||||
return map[pos.group] || ''
|
||||
},
|
||||
typeChipCls(type) {
|
||||
const t = normType(type)
|
||||
if (t === '工作辊') return 'chip chip-wr'
|
||||
if (t === '中间辊') return 'chip chip-imr'
|
||||
if (t === '支撑辊') return 'chip chip-bur'
|
||||
return ''
|
||||
},
|
||||
sv(row, key) {
|
||||
if (!row) return '—'
|
||||
const v = row[key]
|
||||
return v != null && v !== '' ? String(v) : '—'
|
||||
},
|
||||
nv(row, key) {
|
||||
if (!row) return '—'
|
||||
const v = row[key]
|
||||
if (v == null || v === '') return '—'
|
||||
const n = parseFloat(v)
|
||||
return isNaN(n) ? String(v) : n.toFixed(2)
|
||||
},
|
||||
iv(row, key) {
|
||||
if (!row) return '—'
|
||||
const v = row[key]
|
||||
if (v == null || v === '') return '—'
|
||||
const n = parseFloat(v)
|
||||
return isNaN(n) ? String(v) : Math.round(n).toLocaleString()
|
||||
},
|
||||
dv(row, key) { return row ? fmtDateStr(row[key]) : '—' },
|
||||
dispPos(v) { return POS_NORM[String(v || '').toUpperCase()] || v || '—' },
|
||||
dispType(v) { return TYPE_NORM[String(v || '').toUpperCase()] || v || '—' },
|
||||
handleCheck() {
|
||||
const missing = []
|
||||
this.tableData.forEach(stand => {
|
||||
stand.positions.forEach(pos => {
|
||||
if (pos.online && !pos.standby) missing.push(`${stand.name} ${pos.label}`)
|
||||
})
|
||||
})
|
||||
if (!missing.length) {
|
||||
this.$message.success('检查通过，各机架备辊配置正常')
|
||||
} else {
|
||||
this.$alert(missing.join('\n'), '以下位置缺少备辊', { type: 'warning', confirmButtonText: '知道了' })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.roll-config-view {
|
||||
padding: 12px 16px;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ── 工具栏 ── */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.page-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.refresh-time {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* ── 表格容器 ── */
|
||||
.table-wrap {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ── 轧辊表 ── */
|
||||
.roll-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
color: #303133;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.roll-table th,
|
||||
.roll-table td {
|
||||
border: 1px solid #e4e7ed;
|
||||
padding: 5px 9px;
|
||||
text-align: center;
|
||||
}
|
||||
.roll-table thead tr:first-child th {
|
||||
background: #eef1f6;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
.th-section { border-bottom: 2px solid #b8c2cc !important; }
|
||||
.th-standby { background: #f5f7fa !important; color: #606266; }
|
||||
.th-online { background: #e8f4ff !important; color: #1a5276; }
|
||||
.th-standard{ background: #fdf6ec !important; color: #7b5c1e; }
|
||||
.th-stand, .th-pos { background: #eef1f6; font-weight: 600; }
|
||||
.th-sub {
|
||||
background: #fafafa;
|
||||
font-weight: normal;
|
||||
font-size: 11px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
/* 机架单元格（竖向文字） */
|
||||
.td-stand {
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
background: #f0f3f8;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
letter-spacing: 3px;
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
/* 辊位名称列 */
|
||||
.td-pos {
|
||||
font-weight: 500;
|
||||
width: 64px;
|
||||
text-align: left;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.pos-bur { background: #f5f7fa; color: #5a6a7e; }
|
||||
.pos-imr { background: #f0f9eb; color: #3a7a2a; }
|
||||
.pos-wr { background: #e8f4ff; color: #1a5276; font-weight: 600; }
|
||||
|
||||
/* 工作辊行加粗上边框 */
|
||||
.row-wr td { border-top: 2px solid #c8d8ea !important; }
|
||||
|
||||
/* 辊型 chip */
|
||||
.chip {
|
||||
display: inline-block;
|
||||
padding: 1px 7px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.chip-bur { background: #f5f7fa; color: #5a6a7e; border: 1px solid #dcdfe6; }
|
||||
.chip-imr { background: #f0f9eb; color: #3a7a2a; border: 1px solid #b3e19d; }
|
||||
.chip-wr { background: #e8f4ff; color: #1a5276; border: 1px solid #a0c4e8; }
|
||||
|
||||
.td-bold { font-weight: 600; }
|
||||
.td-standby { color: #606266; }
|
||||
.td-online { color: #303133; }
|
||||
.td-std { color: #909399; }
|
||||
.td-time { font-size: 11px; color: #909399; min-width: 110px; }
|
||||
.row-empty td { color: #c0c4cc; background: #fafafa; }
|
||||
.roll-table tbody tr:hover td { background: #f0f7ff; }
|
||||
</style>
|
||||
273
klp-ui/src/views/timing/acid/rollHistory.vue
Normal file
273
klp-ui/src/views/timing/acid/rollHistory.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="roll-history-view">
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<span class="page-title"><i class="el-icon-time" /> 酸轧换辊历史</span>
|
||||
<div class="filter-right">
|
||||
<el-form :inline="true" :model="query" size="small" style="margin:0">
|
||||
<el-form-item label="轧辊号">
|
||||
<el-input
|
||||
v-model="query.rollId"
|
||||
placeholder="输入轧辊号"
|
||||
clearable
|
||||
style="width:160px"
|
||||
@keyup.enter.native="handleSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="机架">
|
||||
<el-select v-model="query.standId" placeholder="全部" clearable style="width:110px">
|
||||
<el-option v-for="s in standOptions" :key="s.value" :label="s.label" :value="s.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="辊型">
|
||||
<el-select v-model="query.rollType" placeholder="全部" clearable style="width:100px">
|
||||
<el-option label="工作辊" value="WORK" />
|
||||
<el-option label="中间辊" value="INTERMEDIATE" />
|
||||
<el-option label="支撑辊" value="BACKUP" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" :loading="loading" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表 -->
|
||||
<el-table
|
||||
:data="rows"
|
||||
size="mini"
|
||||
border
|
||||
stripe
|
||||
:height="tableHeight"
|
||||
v-loading="loading"
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column type="index" width="48" label="序" fixed align="center" />
|
||||
<el-table-column prop="rollid" label="轧辊号" width="120" fixed show-overflow-tooltip />
|
||||
<el-table-column label="机架" width="72" align="center">
|
||||
<template slot-scope="{ row }">{{ standName(row.standid) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="位置" width="52" align="center">
|
||||
<template slot-scope="{ row }">{{ dispPos(row.position) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="辊型" width="80" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span :class="typeChipCls(row.type)">{{ dispType(row.type) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="diameter" label="直径(mm)" width="90" align="right" :formatter="fmtNum" />
|
||||
<el-table-column prop="crown" label="凸度" width="72" align="right" :formatter="fmtNum" />
|
||||
<el-table-column prop="rough" label="粗糙度" width="72" align="right" :formatter="fmtNum" />
|
||||
<el-table-column prop="rolled_length" label="本次长度" width="90" align="right" :formatter="fmtInt" />
|
||||
<el-table-column prop="rolled_weight" label="本次重量" width="90" align="right" :formatter="fmtInt" />
|
||||
<el-table-column prop="total_rolled_length" label="累计长度" width="90" align="right" :formatter="fmtInt" />
|
||||
<el-table-column prop="total_rolled_weight" label="累计重量" width="90" align="right" :formatter="fmtInt" />
|
||||
<el-table-column prop="grind_count" label="磨削次数" width="80" align="center" />
|
||||
<el-table-column label="安装时间" width="140" align="center">
|
||||
<template slot-scope="{ row }">{{ fmtDate(row.instal_time) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="卸辊时间" width="140" align="center">
|
||||
<template slot-scope="{ row }">{{ fmtDate(row.deinstal_time) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="换辊时间" width="140" align="center">
|
||||
<template slot-scope="{ row }">{{ fmtDate(row.change_time) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="shift" label="班次" width="52" align="center" />
|
||||
<el-table-column prop="crew" label="班组" width="52" align="center" />
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-bar">
|
||||
<el-pagination
|
||||
small
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="pagination.total"
|
||||
:page-size="pagination.pageSize"
|
||||
:page-sizes="[50, 100, 200]"
|
||||
:current-page="pagination.page"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRollHistoryList, getRollHistoryCount } from '@/api/l2/timing'
|
||||
|
||||
// 酸轧六机架
|
||||
const STAND_NAMES = ['1#机架', '2#机架', '3#机架', '4#机架', '5#机架', '6#机架']
|
||||
|
||||
const POS_NORM = {
|
||||
TOP: '上', UPPER: '上', UP: '上', '上': '上',
|
||||
BOTTOM: '下', LOWER: '下', DOWN: '下', '下': '下'
|
||||
}
|
||||
const TYPE_NORM = {
|
||||
WORK: '工作辊', WORK_ROLL: '工作辊', WR: '工作辊', '工作辊': '工作辊',
|
||||
BACKUP: '支撑辊', BUR: '支撑辊', SUPPORT: '支撑辊', BACK_UP: '支撑辊', '支撑辊': '支撑辊',
|
||||
INTERMEDIATE: '中间辊', IMR: '中间辊', INTER: '中间辊', '中间辊': '中间辊'
|
||||
}
|
||||
|
||||
function fmtDateStr(val) {
|
||||
if (!val) return '—'
|
||||
const s = String(val)
|
||||
const m = s.match(/(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})/)
|
||||
if (m) return `${m[1]}-${m[2]}-${m[3]} ${m[4]}:${m[5]}`
|
||||
const d = new Date(val)
|
||||
if (isNaN(d.getTime())) return s.substring(0, 16)
|
||||
const pad = n => String(n).padStart(2, '0')
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'AcidRollHistoryPage',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
query: { rollId: '', standId: null, rollType: '' },
|
||||
rows: [],
|
||||
pagination: { page: 1, pageSize: 50, total: 0 },
|
||||
tableHeight: 'calc(100vh - 172px)',
|
||||
standOptions: STAND_NAMES.map((label, i) => ({ label, value: i + 1 }))
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadCount()
|
||||
this.loadRows()
|
||||
},
|
||||
methods: {
|
||||
async loadCount() {
|
||||
try {
|
||||
const res = await getRollHistoryCount(
|
||||
this.query.rollId || undefined,
|
||||
this.query.standId || undefined
|
||||
)
|
||||
this.pagination.total = res?.data?.total ?? 0
|
||||
} catch (_) {}
|
||||
},
|
||||
async loadRows() {
|
||||
this.loading = true
|
||||
try {
|
||||
const { page, pageSize } = this.pagination
|
||||
const res = await getRollHistoryList(
|
||||
page, pageSize,
|
||||
this.query.rollId || undefined,
|
||||
this.query.standId || undefined
|
||||
)
|
||||
let rows = res?.data?.rows || []
|
||||
// 前端按辊型过滤（接口暂不支持辊型参数）
|
||||
if (this.query.rollType) {
|
||||
const norm = TYPE_NORM[this.query.rollType] || this.query.rollType
|
||||
rows = rows.filter(r => {
|
||||
const t = String(r.type || '').toUpperCase()
|
||||
return TYPE_NORM[t] === norm || String(r.type || '') === norm
|
||||
})
|
||||
}
|
||||
this.rows = rows
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
handleSearch() {
|
||||
this.pagination.page = 1
|
||||
this.loadCount()
|
||||
this.loadRows()
|
||||
},
|
||||
handleReset() {
|
||||
this.query = { rollId: '', standId: null, rollType: '' }
|
||||
this.pagination.page = 1
|
||||
this.loadCount()
|
||||
this.loadRows()
|
||||
},
|
||||
handlePageChange(page) {
|
||||
this.pagination.page = page
|
||||
this.loadRows()
|
||||
},
|
||||
handleSizeChange(size) {
|
||||
this.pagination.pageSize = size
|
||||
this.pagination.page = 1
|
||||
this.loadCount()
|
||||
this.loadRows()
|
||||
},
|
||||
standName(val) {
|
||||
const idx = Number(val) - 1
|
||||
return STAND_NAMES[idx] || (val != null ? String(val) : '—')
|
||||
},
|
||||
dispPos(v) { return POS_NORM[String(v || '').toUpperCase()] || v || '—' },
|
||||
dispType(v) { return TYPE_NORM[String(v || '').toUpperCase()] || v || '—' },
|
||||
typeChipCls(type) {
|
||||
const t = String(type || '').toUpperCase()
|
||||
const norm = TYPE_NORM[t] || ''
|
||||
if (norm === '工作辊') return 'chip chip-wr'
|
||||
if (norm === '中间辊') return 'chip chip-imr'
|
||||
if (norm === '支撑辊') return 'chip chip-bur'
|
||||
return ''
|
||||
},
|
||||
fmtNum(row, col, val) {
|
||||
if (val == null || val === '') return '—'
|
||||
const n = parseFloat(val)
|
||||
return isNaN(n) ? String(val) : n.toFixed(2)
|
||||
},
|
||||
fmtInt(row, col, val) {
|
||||
if (val == null || val === '') return '—'
|
||||
const n = parseFloat(val)
|
||||
return isNaN(n) ? String(val) : Math.round(n).toLocaleString()
|
||||
},
|
||||
fmtDate(val) { return fmtDateStr(val) }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.roll-history-view {
|
||||
padding: 12px 16px;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ── 筛选栏 ── */
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.page-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.filter-right { display: flex; align-items: center; }
|
||||
|
||||
/* ── 辊型 chip ── */
|
||||
.chip {
|
||||
display: inline-block;
|
||||
padding: 1px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.chip-bur { background: #f5f7fa; color: #5a6a7e; border: 1px solid #dcdfe6; }
|
||||
.chip-imr { background: #f0f9eb; color: #3a7a2a; border: 1px solid #b3e19d; }
|
||||
.chip-wr { background: #e8f4ff; color: #1a5276; border: 1px solid #a0c4e8; }
|
||||
|
||||
/* ── 分页 ── */
|
||||
.pagination-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 0 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user