DeXun/klp-oa
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

酸轧数据同步，轧辊新增产线新增各种产线

Browse Source
This commit is contained in:
wangyu
2026-05-14 15:12:30 +08:00
parent 4a5b9544a4
commit 49561a125e
41 changed files with 2054 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
klp-ui/src/views/mes/roll/grind/index.vue
View File

@@ -2,7 +2,21 @@
<div class="app-container grind-page">
<div class="grind-layout">
<!-- ── 左侧：轧辊选择 ── -->
<!-- ── 产线 Tab 列 ── -->
<div class="line-tabs">
<div
:class="['lt-item', filterLineId === null ? 'lt-item--active' : '']"
@click="handleLineTab(null)"
>全部</div>
<div
v-for="l in sortedProductionLines"
:key="l.lineId"
:class="['lt-item', filterLineId === l.lineId ? 'lt-item--active' : '']"
@click="handleLineTab(l.lineId)"
>{{ l.lineName }}</div>
</div>
<!-- ── 轧辊列表 ── -->
<div class="grind-left">
<el-card shadow="never" class="grind-card h-full">
<div slot="header" class="card-header">
@@ -11,12 +25,6 @@
<!-- 搜索过滤 -->
<div class="roll-filter">
<!-- 产线筛选（暂时写死双机架） -->
<el-select v-model="filterLine" size="small" placeholder="选择产线"
style="width:100%;margin-bottom:8px" @change="filterRolls">
<el-option label="全部产线" value="" />
<el-option label="双机架产线" value="双机架" />
</el-select>
<el-input v-model="filterNo" size="small" placeholder="编号搜索" prefix-icon="el-icon-search"
clearable @input="filterRolls" style="margin-bottom:8px" />
<el-radio-group v-model="filterType" size="small" @change="filterRolls" style="margin-bottom:8px">
@@ -39,6 +47,7 @@
<span :class="['ri-status', 'st-' + r.status]">{{ statusLabel(r.status) }}</span>
<span class="ri-dia">φ{{ r.currentDia != null ? r.currentDia : r.initialDia }}</span>
</div>
<div v-if="filterLineId === null && r.lineName" class="ri-line">{{ r.lineName }}</div>
</div>
<div v-if="!rollLoading && filteredRolls.length === 0" class="roll-empty">暂无数据</div>
</div>
@@ -229,13 +238,18 @@
<script>
import { listRollInfo, getRollInfo } from '@/api/mes/roll/rollInfo'
import { listRollGrind, addRollGrind, updateRollGrind, delRollGrind, getMonthlyStats } from '@/api/mes/roll/rollGrind'
import { listProductionLine } from '@/api/wms/productionLine'
import rollLineMixin from '../rollLineMixin'
export default {
name: 'GrindRoom',
mixins: [rollLineMixin],
data() {
return {
// 产线定义（暂写死，后续接后端）
LINES: [{ label: '双机架产线', value: '双机架' }],
// 产线列表
productionLines: [],
filterLineId: null,
lineTabOrder: [], // 本地记录的点击顺序（最近点过的在前）
// 左侧辊列表
rollLoading: false,
@@ -243,7 +257,6 @@ export default {
filteredRolls: [],
filterNo: '',
filterType: '',
filterLine: '',
// 右侧选中辊
selectedRollId: null,
@@ -270,6 +283,19 @@ export default {
return this.$store.state.user.name || this.$store.getters.name || ''
},
// 产线 tab 按本地点击顺序排序
sortedProductionLines() {
const order = this.lineTabOrder
return [...this.productionLines].sort((a, b) => {
const ai = order.indexOf(a.lineId)
const bi = order.indexOf(b.lineId)
if (ai === -1 && bi === -1) return 0
if (ai === -1) return 1
if (bi === -1) return -1
return ai - bi
})
},
// 表格数据：新增时在顶部插入一个编辑行占位
tableData() {
if (this.editRow && this.editRow.__isNew) {
@@ -279,26 +305,46 @@ export default {
}
},
created() {
this.loadRolls()
},
created() {},
methods: {
onLineResolved() {
this.filterLineId = this.lineId
const uid = this.$store.state.user?.userId || 0
try { this.lineTabOrder = JSON.parse(localStorage.getItem(`grind_line_order_${uid}`) || '[]') } catch {}
listProductionLine({ pageNum: 1, pageSize: 100 }).then(res => {
this.productionLines = res.rows || []
})
this.loadRolls()
},
// ── 轧辊列表 ──────────────────────────────────────
loadRolls() {
this.rollLoading = true
listRollInfo({ pageNum: 1, pageSize: 500 }).then(res => {
listRollInfo({ pageNum: 1, pageSize: 500, lineId: this.filterLineId }).then(res => {
this.allRolls = res.rows || []
this.filterRolls()
}).finally(() => { this.rollLoading = false })
},
handleLineTab(lineId) {
if (this.filterLineId === lineId) return
this.filterLineId = lineId
if (lineId !== null) {
this.lineTabOrder = [lineId, ...this.lineTabOrder.filter(id => id !== lineId)]
const uid = this.$store.state.user?.userId || 0
localStorage.setItem(`grind_line_order_${uid}`, JSON.stringify(this.lineTabOrder))
}
if (this.editRow) this.cancelEdit()
this.selectedRollId = null
this.selectedRoll = null
this.grindList = []
this.loadRolls()
},
filterRolls() {
this.filteredRolls = this.allRolls.filter(r => {
const matchNo = !this.filterNo || r.rollNo.includes(this.filterNo)
const matchType = !this.filterType || r.rollType === this.filterType
// 后续 mes_roll_info 增加 line_code 字段后改为 r.lineCode === this.filterLine
const matchLine = !this.filterLine || this.filterLine === '双机架'
return matchNo && matchType && matchLine
return matchNo && matchType
})
},
selectRoll(r) {
@@ -428,8 +474,38 @@ export default {
.grind-page { background: #f4f5f7; height: 100%; }
.grind-layout { display: flex; gap: 12px; height: 100%; }
/* 左侧 */
.grind-left { width: 240px; flex-shrink: 0; }
/* 产线 Tab 列 */
.line-tabs {
width: 64px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 2px;
}
.lt-item {
padding: 10px 4px;
text-align: center;
font-size: 12px;
color: #5f6368;
background: #fff;
border: 1px solid #dcdee0;
border-radius: 4px;
cursor: pointer;
word-break: break-all;
line-height: 1.4;
transition: all .15s;
}
.lt-item:hover { background: #f0f6ff; color: #409eff; border-color: #c6d9f5; }
.lt-item--active {
background: #409eff;
color: #fff;
border-color: #409eff;
font-weight: 600;
}
/* 轧辊列表 */
.grind-left { width: 220px; flex-shrink: 0; }
.grind-right { flex: 1; min-width: 0; }
.grind-card { border: 1px solid #dcdee0; border-radius: 4px; }
@@ -451,6 +527,7 @@ export default {
.ri-no { font-family: 'Consolas', monospace; font-size: 13px; font-weight: 600; color: #1f2329; }
.ri-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.ri-dia { font-size: 11px; color: #9aa0a6; }
.ri-line { font-size: 10px; color: #b0b3bb; margin-top: 2px; }
.ri-status { font-size: 11px; }
.roll-empty { text-align: center; color: #c0c4cc; padding: 20px 0; font-size: 12px; }

28
klp-ui/src/views/mes/roll/overview/index.vue
View File

@@ -46,14 +46,8 @@
<!-- 搜索栏 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="所属产线">
<!-- 暂时写死双机架，后续接后端 line_code 字段 -->
<el-select v-model="queryParams.lineCode" placeholder="全部产线" clearable style="width:130px" @change="handleQuery">
<el-option label="双机架产线" value="双机架" />
</el-select>
</el-form-item>
<el-form-item label="轧辊编号" prop="rollNo">
<el-input v-model="queryParams.rollNo" placeholder="请输入轧辊编号" clearable @keyup.enter.native="handleQuery" />
<el-input v-model="queryParams.rollNo" placeholder="请输入轧辊编号" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="辊型" prop="rollType">
<el-select v-model="queryParams.rollType" placeholder="全部" clearable style="width:120px">
@@ -225,9 +219,11 @@
<script>
import { listRollInfo, getRollStats, getRollInfo, addRollInfo, updateRollInfo, delRollInfo, scrapRollInfo, syncRollStatus } from '@/api/mes/roll/rollInfo'
import rollLineMixin from '../rollLineMixin'
export default {
name: 'RollOverview',
mixins: [rollLineMixin],
data() {
return {
loading: false,
@@ -242,7 +238,7 @@ export default {
queryParams: {
pageNum: 1,
pageSize: 20,
lineCode: undefined, // 产线筛选（暂写死双机架，后续接字段）
lineId: undefined,
rollNo: undefined,
rollType: undefined,
status: undefined
@@ -255,11 +251,12 @@ export default {
ids: []
}
},
created() {
this.getStats()
this.getList()
},
methods: {
onLineResolved() {
this.queryParams.lineId = this.lineId
this.getStats()
this.getList()
},
getList() {
this.loading = true
listRollInfo(this.queryParams).then(res => {
@@ -269,14 +266,14 @@ export default {
}).catch(() => { this.loading = false })
},
getStats() {
getRollStats().then(res => { this.stats = res.data || {} })
getRollStats(this.lineId).then(res => { this.stats = res.data || {} })
},
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
resetQuery() {
this.queryParams.lineCode = undefined
this.queryParams.lineId = this.lineId
this.resetForm('queryForm')
this.handleQuery()
},
@@ -287,6 +284,7 @@ export default {
},
handleAdd() {
this.reset()
this.form.lineId = this.lineId
this.title = '新增轧辊'
this.open = true
},
@@ -320,7 +318,7 @@ export default {
},
handleSyncStatus() {
this.$modal.confirm('将从换辊记录中重新推算各机架当前在机轧辊的状态，确认执行？').then(() => {
return syncRollStatus()
return syncRollStatus(this.lineId)
}).then(() => {
this.getList()
this.getStats()

22
klp-ui/src/views/mes/roll/rollLineMixin.js Normal file
View File

@@ -0,0 +1,22 @@
/**
* 从 URL query.lineId 读取产线 ID，供各轧辊页面共用。
* 组件覆盖 onLineResolved() 执行初始化加载。
*
* 菜单路径示例：/mes/roll/overview?lineId=1
*/
export default {
computed: {
lineId() {
const v = this.$route.query.lineId
return v != null ? Number(v) : null
}
},
created() {
this.onLineResolved()
},
methods: {
onLineResolved() {}
}
}

707
klp-ui/src/views/mes/roll/working-single/index.vue Normal file
View File

@@ -0,0 +1,707 @@
<template>
<div class="app-container working-roll-page">
<!-- ① 顶部行：作业辊一览（2/3）+ 可用轧辊（1/3） -->
<div class="top-row">
<!-- 作业辊一览 -->
<el-card shadow="never" class="roll-table-card top-row__main">
<div slot="header" class="card-header">
<span class="card-title"><i class="el-icon-s-grid" /> 作业辊一览</span>
<span class="header-meta" v-if="current.changeTime">末次换辊：{{ current.changeTime }}</span>
<span style="margin-left:auto;display:flex;align-items:center;gap:6px">
<el-button size="mini" icon="el-icon-refresh-right" @click="handleOpenChange">换辊</el-button>
<el-divider direction="vertical" />
<el-button type="success" size="mini" icon="el-icon-plus" @click="handleAddStandby">添加下批</el-button>
<el-button type="danger" size="mini" icon="el-icon-delete" @click="handleClearStandby"
:disabled="!standbyList.length">清空下批</el-button>
</span>
</div>
<el-table
ref="mainTable"
:data="mergedRows"
v-loading="loadingCurrent || loadingStandby"
:row-class-name="rowClass"
:span-method="mergeParamCol"
border
size="small"
style="width:100%"
>
<el-table-column label="参数" width="156" align="left">
<template slot-scope="scope">
<span :class="['param-label', scope.row.group]">{{ scope.row.label }}</span>
</template>
</el-table-column>
<el-table-column label="当前在机轧辊" align="center" min-width="120">
<template slot-scope="scope">
<param-cell :data="scope.row.cur" />
</template>
</el-table-column>
<el-table-column label="下批轧辊" align="center" min-width="120">
<template slot-scope="scope">
<div
:class="['sb-cell',
scope.row.sb && scope.row.sb.standbyId ? 'sb-cell--del' :
scope.row.rollType ? 'sb-cell--add' : '']"
@click="handleSbCellClick(scope.row.sb, scope.row.rollType, scope.row.position)"
>
<param-cell :data="scope.row.sb" />
</div>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 右侧：可用辊 + 工作绩效 -->
<div class="top-row__aside aside-col">
<!-- 可用轧辊（离线） -->
<el-card shadow="never" class="roll-table-card aside-panel">
<div slot="header" class="card-header">
<span class="card-title"><i class="el-icon-files" /> 可用轧辊（离线）</span>
<el-button size="mini" icon="el-icon-refresh" style="margin-left:auto" @click="loadOfflineRolls">刷新</el-button>
</div>
<el-table v-loading="offlineLoading" :data="offlineRolls" size="small" :height="asideHalfH" style="width:100%">
<el-table-column label="辊型" align="center" prop="rollType" width="52">
<template slot-scope="scope">
<el-tag size="mini" :type="scope.row.rollType === 'WR' ? 'primary' : 'warning'">{{ scope.row.rollType }}</el-tag>
</template>
</el-table-column>
<el-table-column label="轧辊编号" align="center" prop="rollNo" min-width="90" show-overflow-tooltip />
<el-table-column label="辊径(mm)" align="center" width="76">
<template slot-scope="scope">{{ scope.row.currentDia != null ? scope.row.currentDia : scope.row.initialDia }}</template>
</el-table-column>
<el-table-column label="粗糙度" align="center" prop="roughness" width="64" />
</el-table>
</el-card>
<!-- 工作绩效 -->
<el-card shadow="never" class="roll-table-card aside-panel">
<div slot="header" class="card-header">
<span class="card-title"><i class="el-icon-data-analysis" /> 工作绩效（实时）</span>
<el-button size="mini" icon="el-icon-refresh" style="margin-left:auto" @click="loadRollPerformance">刷新</el-button>
</div>
<el-table v-loading="perfLoading" :data="perfRows" size="small" :height="asideHalfH" border style="width:100%">
<el-table-column label="辊位" align="center" prop="label" width="80" />
<el-table-column label="轧辊编号" align="center" width="110">
<template slot-scope="scope"><span class="perf-roll">{{ scope.row.rollNo || '—' }}</span></template>
</el-table-column>
<el-table-column label="工作长度(m)" align="center" width="100">
<template slot-scope="scope">{{ scope.row.workLength != null ? scope.row.workLength : '—' }}</template>
</el-table-column>
<el-table-column label="过卷数" align="center" width="70">
<template slot-scope="scope">{{ scope.row.coilCount != null ? scope.row.coilCount : '—' }}</template>
</el-table-column>
</el-table>
</el-card>
</div>
</div>
<!-- ② 换辊历史 -->
<el-card shadow="never" class="roll-table-card" style="margin-top:16px">
<div slot="header" class="card-header">
<span class="card-title"><i class="el-icon-document" /> 换辊历史</span>
<el-form :inline="true" size="small" style="margin-left:auto;margin-bottom:0">
<el-form-item label="类型" style="margin-bottom:0">
<el-select v-model="historyQuery.changeType" placeholder="全部" clearable style="width:110px" @change="loadHistory">
<el-option label="计划换辊" value="计划换辊" />
<el-option label="紧急换辊" value="紧急换辊" />
</el-select>
</el-form-item>
<el-form-item label="时间起" style="margin-bottom:0">
<el-date-picker v-model="historyQuery.changeTime" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间"
style="width:160px" @change="loadHistory" />
</el-form-item>
</el-form>
</div>
<KLPTable v-loading="historyLoading" :data="historyList">
<el-table-column label="换辊编号" align="center" prop="changeNo" width="130" />
<el-table-column label="换辊时间" align="center" prop="changeTime" width="160" />
<el-table-column label="类型" align="center" prop="changeType" width="100">
<template slot-scope="scope">
<el-tag size="small" :type="scope.row.changeType === '紧急换辊' ? 'danger' : ''">{{ scope.row.changeType }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作人" align="center" prop="operator" width="80" />
<el-table-column label="换辊辊组" align="left" min-width="160">
<template slot-scope="scope">
<div class="roll-group-cell">
<span v-if="scope.row.upperBrNo" class="rg-item"><b>上BR</b> {{ scope.row.upperBrNo }}<em v-if="scope.row.upperBrDia"> φ{{ scope.row.upperBrDia }}</em></span>
<span v-if="scope.row.upperWrNo" class="rg-item"><b>上WR</b> {{ scope.row.upperWrNo }}<em v-if="scope.row.upperWrDia"> φ{{ scope.row.upperWrDia }}</em></span>
<span v-if="scope.row.lowerWrNo" class="rg-item"><b>下WR</b> {{ scope.row.lowerWrNo }}<em v-if="scope.row.lowerWrDia"> φ{{ scope.row.lowerWrDia }}</em></span>
<span v-if="scope.row.lowerBrNo" class="rg-item"><b>下BR</b> {{ scope.row.lowerBrNo }}<em v-if="scope.row.lowerBrDia"> φ{{ scope.row.lowerBrDia }}</em></span>
<span v-if="!scope.row.upperBrNo && !scope.row.upperWrNo && !scope.row.lowerWrNo && !scope.row.lowerBrNo" style="color:#c0c4cc">—</span>
</div>
</template>
</el-table-column>
<el-table-column label="工作长度(m)" align="center" prop="workLength" width="100" />
<el-table-column label="过卷数" align="center" prop="coilCount" width="72" />
<el-table-column label="过卷重量" align="center" prop="totalWeight" width="90" />
<el-table-column label="备注" align="left" prop="remark" min-width="100" show-overflow-tooltip />
<el-table-column label="操作" align="center" width="110" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditHistory(scope.row)">补录</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" style="color:#c5221f"
@click="handleDeleteHistory(scope.row)">删除</el-button>
</template>
</el-table-column>
</KLPTable>
<pagination
v-show="historyTotal > 0"
:total="historyTotal"
:page.sync="historyQuery.pageNum"
:limit.sync="historyQuery.pageSize"
@pagination="loadHistory"
/>
</el-card>
<!-- 换辊确认弹窗 -->
<el-dialog title="确认换辊" :visible.sync="changeOpen" width="420px" append-to-body @close="resetChangeForm">
<div class="roll-preview">
<div class="roll-preview__title">以下轧辊将被换入</div>
<div class="roll-preview__item">
<span class="rp-label">上支撑辊</span>
<span class="rp-val">{{ changeForm.upperBrNo || '—' }}</span>
<span class="rp-dia" v-if="changeForm.upperBrDia">φ{{ changeForm.upperBrDia }} mm</span>
</div>
<div class="roll-preview__item">
<span class="rp-label">上工作辊</span>
<span class="rp-val">{{ changeForm.upperWrNo || '—' }}</span>
<span class="rp-dia" v-if="changeForm.upperWrDia">φ{{ changeForm.upperWrDia }} mm</span>
</div>
<div class="roll-preview__item">
<span class="rp-label">下工作辊</span>
<span class="rp-val">{{ changeForm.lowerWrNo || '—' }}</span>
<span class="rp-dia" v-if="changeForm.lowerWrDia">φ{{ changeForm.lowerWrDia }} mm</span>
</div>
<div class="roll-preview__item">
<span class="rp-label">下支撑辊</span>
<span class="rp-val">{{ changeForm.lowerBrNo || '—' }}</span>
<span class="rp-dia" v-if="changeForm.lowerBrDia">φ{{ changeForm.lowerBrDia }} mm</span>
</div>
</div>
<div class="roll-preview__tip">换辊时间和操作人将由系统自动记录</div>
<div slot="footer">
<el-button type="primary" :loading="changeSubmitting" @click="submitChange">确认换辊</el-button>
<el-button @click="changeOpen = false">取 消</el-button>
</div>
</el-dialog>
<!-- 换辊历史补录/编辑对话框 -->
<el-dialog title="换辊记录补录" :visible.sync="historyEditOpen" width="560px" append-to-body @close="historyEditForm = {}">
<el-form ref="historyEditForm" :model="historyEditForm" label-width="100px" size="small">
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="换辊类型">
<el-select v-model="historyEditForm.changeType" style="width:100%">
<el-option label="计划换辊" value="计划换辊" />
<el-option label="紧急换辊" value="紧急换辊" />
<el-option label="三级换辊" value="三级换辊" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="换辊时间">
<el-date-picker v-model="historyEditForm.changeTime" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" style="width:100%" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="操作人">
<el-input v-model="historyEditForm.operator" />
</el-form-item>
<el-divider content-position="left">工作辊</el-divider>
<el-row :gutter="16">
<el-col :span="12"><el-form-item label="上工作辊"><el-input v-model="historyEditForm.upperWrNo" /></el-form-item></el-col>
<el-col :span="12"><el-form-item label="上工作辊径"><el-input-number v-model="historyEditForm.upperWrDia" :precision="2" :min="0" style="width:100%" /></el-form-item></el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12"><el-form-item label="下工作辊"><el-input v-model="historyEditForm.lowerWrNo" /></el-form-item></el-col>
<el-col :span="12"><el-form-item label="下工作辊径"><el-input-number v-model="historyEditForm.lowerWrDia" :precision="2" :min="0" style="width:100%" /></el-form-item></el-col>
</el-row>
<el-divider content-position="left">支撑辊</el-divider>
<el-row :gutter="16">
<el-col :span="12"><el-form-item label="上支撑辊"><el-input v-model="historyEditForm.upperBrNo" /></el-form-item></el-col>
<el-col :span="12"><el-form-item label="上支撑辊径"><el-input-number v-model="historyEditForm.upperBrDia" :precision="2" :min="0" style="width:100%" /></el-form-item></el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12"><el-form-item label="下支撑辊"><el-input v-model="historyEditForm.lowerBrNo" /></el-form-item></el-col>
<el-col :span="12"><el-form-item label="下支撑辊径"><el-input-number v-model="historyEditForm.lowerBrDia" :precision="2" :min="0" style="width:100%" /></el-form-item></el-col>
</el-row>
<el-form-item label="备注">
<el-input v-model="historyEditForm.remark" type="textarea" :rows="2" />
</el-form-item>
</el-form>
<div slot="footer">
<el-button type="primary" @click="submitHistoryEdit">保 存</el-button>
<el-button @click="historyEditOpen = false">取 消</el-button>
</div>
</el-dialog>
<!-- 添加下批轧辊对话框 -->
<el-dialog title="添加下批轧辊" :visible.sync="standbyOpen" width="460px" append-to-body @close="resetStandbyForm">
<el-form ref="standbyForm" :model="standbyForm" :rules="standbyRules" label-width="100px">
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="辊型" prop="rollType">
<el-input
v-if="standbyFromCell"
:value="standbyForm.rollType === 'WR' ? '工作辊 WR' : '支撑辊 BR'"
readonly style="width:100%"
/>
<el-select v-else v-model="standbyForm.rollType" placeholder="请选择" style="width:100%"
@change="handleStandbyRollTypeChange">
<el-option label="工作辊 WR" value="WR" />
<el-option label="支撑辊 BR" value="BR" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="辊位" prop="position">
<el-input
v-if="standbyFromCell"
:value="standbyForm.position === 'UP' ? '上辊' : '下辊'"
readonly style="width:100%"
/>
<el-select v-else v-model="standbyForm.position" placeholder="请选择" style="width:100%">
<el-option label="上辊" value="UP" />
<el-option label="下辊" value="DOWN" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="轧辊编号" prop="rollNo">
<el-select v-model="standbyForm.rollNo" placeholder="请选择" filterable style="width:100%">
<el-option
v-for="no in standbyForm.rollType === 'WR' ? wrOptions : brOptions"
:key="no" :label="no" :value="no"
/>
</el-select>
</el-form-item>
<el-form-item label="就绪时间">
<el-date-picker v-model="standbyForm.readyTime" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="默认当前时间" style="width:100%" />
</el-form-item>
<el-form-item label="备注">
<el-input v-model="standbyForm.remark" type="textarea" :rows="2" />
</el-form-item>
</el-form>
<div slot="footer">
<el-button type="primary" @click="submitStandby">确 定</el-button>
<el-button @click="standbyOpen = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getCurrentRolls, listRollChange, addRollChange, updateRollChange, delRollChange, getRollPerformance } from '@/api/mes/roll/rollChange'
import { listRollStandby, addRollStandby, delRollStandby, clearRollStandby } from '@/api/mes/roll/rollStandby'
import { listRollOptions, listRollInfo } from '@/api/mes/roll/rollInfo'
import rollLineMixin from '../rollLineMixin'
const STAND_NO = '1#'
const ParamCell = {
name: 'ParamCell',
props: { data: { type: Object, default: null } },
render(h) {
const d = this.data
if (!d || d.val == null || d.val === '') return h('span', { class: 'cell-empty' }, '—')
return h('span', { class: 'cell-main' }, String(d.val))
}
}
export default {
name: 'WorkingRollSingle',
components: { ParamCell },
mixins: [rollLineMixin],
data() {
return {
current: {},
loadingCurrent: false,
standbyList: [],
loadingStandby: false,
rollInfoMap: {},
historyLoading: false,
historyList: [],
historyTotal: 0,
historyQuery: { pageNum: 1, pageSize: 15, standNo: STAND_NO, changeType: undefined, changeTime: undefined },
wrOptions: [],
brOptions: [],
historyEditOpen: false,
historyEditForm: {},
offlineRolls: [],
offlineLoading: false,
perfData: {},
perfLoading: false,
asideHalfH: 200,
changeOpen: false,
changeSubmitting: false,
changeForm: {},
standbyOpen: false,
standbyForm: {},
standbyFromCell: false,
standbyRules: {
rollType: [{ required: true, message: '请选择辊型', trigger: 'change' }],
position: [{ required: true, message: '请选择辊位', trigger: 'change' }],
rollNo: [{ required: true, message: '请选择轧辊编号', trigger: 'change' }]
}
}
},
computed: {
mergedRows() {
const c = this.current || {}
const ri = this.rollInfoMap
const cv = (val, rollNo) => ({
val: (val == null || val === '') ? null : val,
sub: rollNo || null
})
const rv = (rollNo, field) => {
const info = rollNo ? ri[rollNo] : null
const val = info ? info[field] : null
return { val: (val == null || val === '') ? null : val, sub: rollNo || null }
}
const sv = (rollType, pos, field) => {
const item = this.standbyList.find(i => i.rollType === rollType && i.position === pos)
if (!item) return { val: null, sub: null }
let val = item[field]
if ((val == null || val === '') && item.rollNo) {
const info = ri[item.rollNo]
if (info) {
val = field === 'diameter'
? (info.currentDia != null ? info.currentDia : info.initialDia)
: info[field]
}
}
return { val: (val == null || val === '') ? null : val, sub: item.rollNo, standbyId: item.standbyId }
}
const sm = (rollType, pos) => {
const item = this.standbyList.find(i => i.rollType === rollType && i.position === pos)
if (!item || !item.rollNo) return { val: null, sub: null }
const info = ri[item.rollNo]
return { val: info ? (info.material || null) : null, sub: item.rollNo, standbyId: item.standbyId }
}
return [
{ label: '上支承辊直径(mm)', group: 'br', rollType: 'BR', position: 'UP',
cur: cv(c.upperBrDia, c.upperBrNo), sb: sv('BR', 'UP', 'diameter') },
{ label: '上工作辊直径(mm)', group: 'wr', rollType: 'WR', position: 'UP',
cur: cv(c.upperWrDia, c.upperWrNo), sb: sv('WR', 'UP', 'diameter') },
{ label: '上工作辊凸度', group: 'wr', rollType: 'WR', position: 'UP',
cur: rv(c.upperWrNo, 'crown'), sb: sv('WR', 'UP', 'crown') },
{ label: '上工作辊粗糙度(μm)', group: 'wr', rollType: 'WR', position: 'UP',
cur: rv(c.upperWrNo, 'roughness'), sb: sv('WR', 'UP', 'roughness') },
{ label: '工作辊类型', group: 'wr', rollType: 'WR', position: 'UP',
cur: rv(c.upperWrNo, 'material'), sb: sm('WR', 'UP') },
{ label: '下工作辊直径(mm)', group: 'wr', rollType: 'WR', position: 'DOWN',
cur: cv(c.lowerWrDia, c.lowerWrNo), sb: sv('WR', 'DOWN', 'diameter') },
{ label: '下工作辊凸度', group: 'wr', rollType: 'WR', position: 'DOWN',
cur: rv(c.lowerWrNo, 'crown'), sb: sv('WR', 'DOWN', 'crown') },
{ label: '下工作辊粗糙度(μm)', group: 'wr', rollType: 'WR', position: 'DOWN',
cur: rv(c.lowerWrNo, 'roughness'), sb: sv('WR', 'DOWN', 'roughness') },
{ label: '下支承辊直径(mm)', group: 'br', rollType: 'BR', position: 'DOWN',
cur: cv(c.lowerBrDia, c.lowerBrNo), sb: sv('BR', 'DOWN', 'diameter') }
]
},
perfRows() {
const standData = (this.perfData['upperBr'] || {})
const d = (key) => {
const obj = (this.perfData[key] || {})[STAND_NO] || {}
return { rollNo: obj.rollNo, workLength: obj.workLength, coilCount: obj.coilCount }
}
return [
{ label: '上支撑辊', ...d('upperBr') },
{ label: '上工作辊', ...d('upperWr') },
{ label: '下工作辊', ...d('lowerWr') },
{ label: '下支撑辊', ...d('lowerBr') }
]
}
},
created() {},
mounted() {
this.$nextTick(this.syncAsideHeight)
window.addEventListener('resize', this.syncAsideHeight)
},
beforeDestroy() {
window.removeEventListener('resize', this.syncAsideHeight)
},
methods: {
onLineResolved() {
this.loadCurrent()
this.loadStandby()
this.loadHistory()
this.loadOfflineRolls()
this.loadRollPerformance()
this.loadRollOptions()
this.loadRollInfoMap()
},
loadCurrent() {
this.loadingCurrent = true
getCurrentRolls(this.lineId, STAND_NO).then(res => {
this.current = res.data || {}
this.$nextTick(this.syncAsideHeight)
}).finally(() => { this.loadingCurrent = false })
},
loadStandby() {
this.loadingStandby = true
listRollStandby(this.lineId, STAND_NO).then(res => {
this.standbyList = res.data || []
}).finally(() => { this.loadingStandby = false })
},
loadHistory() {
this.historyLoading = true
listRollChange({ ...this.historyQuery, lineId: this.lineId }).then(res => {
this.historyList = res.rows || []
this.historyTotal = res.total || 0
}).finally(() => { this.historyLoading = false })
},
loadRollOptions() {
listRollOptions(this.lineId, 'WR', 'Offline').then(res => { this.wrOptions = res.data || [] })
listRollOptions(this.lineId, 'BR', 'Offline').then(res => { this.brOptions = res.data || [] })
},
loadRollInfoMap() {
listRollInfo({ lineId: this.lineId, pageNum: 1, pageSize: 500 }).then(res => {
const map = {}
;(res.rows || []).forEach(r => { map[r.rollNo] = r })
this.rollInfoMap = map
})
},
loadRollPerformance() {
this.perfLoading = true
getRollPerformance(this.lineId).then(res => {
this.perfData = res.data || {}
}).finally(() => { this.perfLoading = false })
},
loadOfflineRolls() {
this.offlineLoading = true
listRollInfo({ lineId: this.lineId, status: 'Offline', pageNum: 1, pageSize: 30 }).then(res => {
this.offlineRolls = res.rows || []
}).finally(() => { this.offlineLoading = false })
},
rowClass({ row }) {
if (row.group === 'br') return 'row-br'
return ''
},
mergeParamCol({ columnIndex }) {
if (columnIndex === 0) return [1, 1]
},
handleOpenChange() {
const ri = this.rollInfoMap
const pick = (rollType, pos) => {
const item = this.standbyList.find(i => i.rollType === rollType && i.position === pos)
if (!item) return { no: undefined, dia: undefined }
const info = ri[item.rollNo]
const dia = item.diameter != null ? item.diameter
: (info ? (info.currentDia != null ? info.currentDia : info.initialDia) : undefined)
return { no: item.rollNo, dia }
}
const uwr = pick('WR', 'UP'), lwr = pick('WR', 'DOWN')
const ubr = pick('BR', 'UP'), lbr = pick('BR', 'DOWN')
this.changeForm = {
standNo: STAND_NO,
lineId: this.lineId,
changeType: undefined,
upperWrNo: uwr.no, upperWrDia: uwr.dia,
lowerWrNo: lwr.no, lowerWrDia: lwr.dia,
upperBrNo: ubr.no, upperBrDia: ubr.dia,
lowerBrNo: lbr.no, lowerBrDia: lbr.dia
}
this.changeOpen = true
},
submitChange() {
if (this.changeSubmitting) return
this.changeSubmitting = true
addRollChange(this.changeForm).then(() => {
this.$modal.msgSuccess('换辊成功')
this.changeOpen = false
clearRollStandby(this.lineId, STAND_NO).finally(() => {
this.loadCurrent()
this.loadStandby()
this.loadHistory()
this.loadOfflineRolls()
this.loadRollPerformance()
})
}).finally(() => { this.changeSubmitting = false })
},
resetChangeForm() {
this.changeForm = {}
this.changeSubmitting = false
},
handleSbCellClick(cell, rollType, position) {
if (cell && cell.standbyId) {
this.handleDelStandby(cell.standbyId)
} else if (rollType) {
this.standbyForm = { standNo: STAND_NO, rollType, position, rollNo: undefined }
this.standbyFromCell = true
this.standbyOpen = true
}
},
handleAddStandby() {
this.standbyForm = { standNo: STAND_NO, rollType: undefined, position: undefined, rollNo: undefined }
this.standbyFromCell = false
this.standbyOpen = true
},
handleStandbyRollTypeChange() {
this.$set(this.standbyForm, 'rollNo', undefined)
},
submitStandby() {
this.$refs.standbyForm.validate(valid => {
if (!valid) return
addRollStandby({ ...this.standbyForm, lineId: this.lineId }).then(() => {
this.$modal.msgSuccess('已添加到下批轧辊')
this.standbyOpen = false
this.loadStandby()
this.loadRollOptions()
this.loadOfflineRolls()
})
})
},
resetStandbyForm() {
this.standbyForm = {}
this.standbyFromCell = false
this.$nextTick(() => { this.$refs.standbyForm && this.$refs.standbyForm.clearValidate() })
},
handleDelStandby(standbyId) {
this.$modal.confirm('确认移除该下批轧辊？移除后该辊状态将恢复为"离线"。').then(() => {
return delRollStandby(standbyId)
}).then(() => {
this.$modal.msgSuccess('已移除')
this.loadStandby()
this.loadRollOptions()
this.loadOfflineRolls()
})
},
handleClearStandby() {
this.$modal.confirm('确认清空全部下批轧辊？').then(() => {
return clearRollStandby(this.lineId, STAND_NO)
}).then(() => {
this.$modal.msgSuccess('已清空')
this.loadStandby()
})
},
handleEditHistory(row) {
this.historyEditForm = { ...row }
this.historyEditOpen = true
},
submitHistoryEdit() {
updateRollChange(this.historyEditForm).then(() => {
this.$modal.msgSuccess('保存成功')
this.historyEditOpen = false
this.loadHistory()
})
},
handleDeleteHistory(row) {
this.$modal.confirm('确认删除该换辊记录？此操作不可恢复。').then(() => {
return delRollChange(row.changeId)
}).then(() => {
this.$modal.msgSuccess('已删除')
this.loadHistory()
})
},
syncAsideHeight() {
const el = this.$refs.mainTable && this.$refs.mainTable.$el
if (!el) return
const totalH = el.offsetHeight
const gap = 12
const headerH = 48
const half = Math.max(100, Math.floor((totalH - gap) / 2) - headerH)
this.asideHalfH = half
}
}
}
</script>
<style scoped>
.working-roll-page { background: #f4f5f7; }
.roll-table-card { border: 1px solid #dcdee0; border-radius: 4px; }
.top-row { display: flex; gap: 12px; align-items: stretch; }
.top-row__main { flex: 2; min-width: 0; }
.top-row__aside { flex: 1; min-width: 0; }
.aside-col { display: flex; flex-direction: column; gap: 12px; }
.aside-panel { flex: 1; min-width: 0; }
.roll-group-cell { display: flex; flex-wrap: wrap; gap: 4px; line-height: 1.5; }
.rg-item { font-size: 12px; color: #3d4b5c; }
.rg-item b { color: #5f6368; font-weight: 600; margin-right: 2px; }
.rg-item em { font-style: normal; color: #9aa0a6; font-size: 11px; }
.card-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-title { font-size: 13px; font-weight: 600; color: #3d4b5c; white-space: nowrap; }
.header-meta { font-size: 11px; color: #8f9099; white-space: nowrap; }
.param-label { font-size: 12px; color: #3d4b5c; }
.cell-main { font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; font-weight: 600; color: #1f2329; }
.cell-empty { color: #c0c4cc; font-size: 12px; }
.perf-roll { font-family: 'Consolas', monospace; font-size: 12px; font-weight: 600; color: #1f2329; }
.roll-preview { background: #f7f8fa; border: 1px solid #e4e6eb; border-radius: 4px; padding: 10px 12px; }
.roll-preview__title { font-size: 11px; color: #8f9099; margin-bottom: 8px; letter-spacing: .5px; }
.roll-preview__item { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.rp-label { font-size: 12px; color: #8f9099; width: 56px; flex-shrink: 0; }
.rp-val { font-size: 13px; font-weight: 600; color: #1f2329; font-family: 'Consolas', monospace; flex: 1; }
.rp-dia { font-size: 11px; color: #9aa0a6; }
.roll-preview__tip { font-size: 11px; color: #b0b3bb; margin-top: 10px; text-align: center; }
.sb-cell { display: block; min-height: 24px; border-radius: 2px; cursor: default; }
.sb-cell--add { cursor: pointer; background: #f0f9f4; }
.sb-cell--add:hover { background: #d4edda; }
.sb-cell--del { cursor: pointer; background: #fff7f7; }
.sb-cell--del:hover { background: #ffe4e4; }
::v-deep .row-br td { background: #fafafa !important; }
</style>
<style>
.el-table .editing-row { background: #fffbf0 !important; }
</style>

39
klp-ui/src/views/mes/roll/working/index.vue
View File

@@ -381,6 +381,7 @@
import { getCurrentRolls, listRollChange, addRollChange, updateRollChange, delRollChange, getRollPerformance } from '@/api/mes/roll/rollChange'
import { listRollStandby, addRollStandby, delRollStandby, clearRollStandby } from '@/api/mes/roll/rollStandby'
import { listRollOptions, listRollInfo } from '@/api/mes/roll/rollInfo'
import rollLineMixin from '../rollLineMixin'
const ParamCell = {
name: 'ParamCell',
@@ -409,6 +410,7 @@ const PerfCell = {
export default {
name: 'WorkingRoll',
components: { ParamCell, PerfCell },
mixins: [rollLineMixin],
data() {
return {
current: { '1#': {}, '2#': {} },
@@ -576,11 +578,7 @@ export default {
}
},
created() {
this.loadAll()
this.loadRollOptions()
this.loadRollInfoMap()
},
created() {},
mounted() {
this.$nextTick(this.syncAsideHeight)
@@ -592,6 +590,12 @@ export default {
},
methods: {
onLineResolved() {
this.loadAll()
this.loadRollOptions()
this.loadRollInfoMap()
},
getDefaultChangeForm(standNo) {
return {
standNo: standNo || undefined,
@@ -631,14 +635,14 @@ export default {
loadRollPerformance() {
this.perfLoading = true
getRollPerformance().then(res => {
getRollPerformance(this.lineId).then(res => {
this.perfData = res.data || {}
}).finally(() => { this.perfLoading = false })
},
loadCurrent(standNo) {
this.$set(this.loadingCurrent, standNo, true)
getCurrentRolls(standNo).then(res => {
getCurrentRolls(this.lineId, standNo).then(res => {
this.$set(this.current, standNo, res.data || {})
this.$set(this.loadingCurrent, standNo, false)
this.$nextTick(this.syncAsideHeight)
@@ -647,7 +651,7 @@ export default {
loadStandby(standNo) {
this.$set(this.loadingStandby, standNo, true)
listRollStandby(standNo).then(res => {
listRollStandby(this.lineId, standNo).then(res => {
this.$set(this.standbyList, standNo, res.data || [])
this.$set(this.loadingStandby, standNo, false)
}).catch(() => { this.$set(this.loadingStandby, standNo, false) })
@@ -655,7 +659,7 @@ export default {
loadHistory() {
this.historyLoading = true
listRollChange(this.historyQuery).then(res => {
listRollChange({ ...this.historyQuery, lineId: this.lineId }).then(res => {
this.historyList = res.rows || []
this.historyTotal = res.total || 0
this.historyLoading = false
@@ -663,13 +667,13 @@ export default {
},
loadRollOptions() {
// 下批辊选择只显示离线（Offline）状态的轧辊
listRollOptions('WR', 'Offline').then(res => { this.wrOptions = res.data || [] })
listRollOptions('BR', 'Offline').then(res => { this.brOptions = res.data || [] })
// 下批辊选择只显示离线（Offline）状态的轧辊，限定当前产线
listRollOptions(this.lineId, 'WR', 'Offline').then(res => { this.wrOptions = res.data || [] })
listRollOptions(this.lineId, 'BR', 'Offline').then(res => { this.brOptions = res.data || [] })
},
loadRollInfoMap() {
listRollInfo({ pageNum: 1, pageSize: 500 }).then(res => {
listRollInfo({ lineId: this.lineId, pageNum: 1, pageSize: 500 }).then(res => {
const map = {}
;(res.rows || []).forEach(r => { map[r.rollNo] = r })
this.rollInfoMap = map
@@ -708,6 +712,7 @@ export default {
this.changeForm = {
...this.getDefaultChangeForm(standNo),
lineId: this.lineId,
upperWrNo: uwr.no, upperWrDia: uwr.dia,
lowerWrNo: lwr.no, lowerWrDia: lwr.dia,
upperBrNo: ubr.no, upperBrDia: ubr.dia,
@@ -722,7 +727,7 @@ export default {
addRollChange(this.changeForm).then(() => {
this.$modal.msgSuccess('换辊成功')
this.changeOpen = false
clearRollStandby(standNo).finally(() => {
clearRollStandby(this.lineId, standNo).finally(() => {
this.loadCurrent(standNo)
this.loadStandby(standNo)
this.loadHistory()
@@ -761,7 +766,7 @@ export default {
submitStandby() {
this.$refs.standbyForm.validate(valid => {
if (!valid) return
addRollStandby(this.standbyForm).then(() => {
addRollStandby({ ...this.standbyForm, lineId: this.lineId }).then(() => {
this.$modal.msgSuccess('已添加到下批轧辊')
this.standbyOpen = false
this.loadStandby(this.standbyForm.standNo)
@@ -787,7 +792,7 @@ export default {
},
handleClearStandby(standNo) {
this.$modal.confirm('确认清空 ' + standNo + ' 机架的全部下批轧辊？').then(() => {
return clearRollStandby(standNo)
return clearRollStandby(this.lineId, standNo)
}).then(() => {
this.$modal.msgSuccess('已清空')
this.loadStandby(standNo)
@@ -818,7 +823,7 @@ export default {
// ── 可用离线辊列表 ────────────────────────────────────────
loadOfflineRolls() {
this.offlineLoading = true
listRollInfo({ status: 'Offline', pageNum: 1, pageSize: 30 }).then(res => {
listRollInfo({ lineId: this.lineId, status: 'Offline', pageNum: 1, pageSize: 30 }).then(res => {
this.offlineRolls = res.rows || []
}).finally(() => {
this.offlineLoading = false