feat(roll): 完成轧辊管理全栈模块
DB：mill_roll（轧辊库）+ mill_roll_change（换辊记录），已执行到服务器 后端： - MillRoll / MillRollChange domain - Mapper 接口 + XML（keyProperty 正确：rollId/changeId） - Service + ServiceImpl（换辊时自动更新轧辊 status 为 Online Use） - MillRollController /mill/roll + MillRollChangeController /mill/rollChange 前端： - api/mill/roll.js 8个接口函数 - views/mill/roll.vue 三段式布局 ·上：换辊数据历史表格 ·左下：当前辊系参数（6辊图形 CSS 圆圈 + 编号/径/时间展示） ·右下：轧辊库表格 + 条件查询 + 更换/添加/修改/删除操作 - 路由注册 /mill/roll Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
33
ruoyi-ui/src/api/mill/roll.js
Normal file
33
ruoyi-ui/src/api/mill/roll.js
Normal file
@@ -0,0 +1,33 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function listRoll(query) {
|
||||
return request({ url: '/mill/roll/list', method: 'get', params: query })
|
||||
}
|
||||
|
||||
export function getRoll(id) {
|
||||
return request({ url: `/mill/roll/${id}`, method: 'get' })
|
||||
}
|
||||
|
||||
export function addRoll(data) {
|
||||
return request({ url: '/mill/roll', method: 'post', data })
|
||||
}
|
||||
|
||||
export function updateRoll(data) {
|
||||
return request({ url: '/mill/roll', method: 'put', data })
|
||||
}
|
||||
|
||||
export function delRoll(ids) {
|
||||
return request({ url: `/mill/roll/${ids}`, method: 'delete' })
|
||||
}
|
||||
|
||||
export function listRollChange(query) {
|
||||
return request({ url: '/mill/rollChange/list', method: 'get', params: query })
|
||||
}
|
||||
|
||||
export function getCurrentRolls() {
|
||||
return request({ url: '/mill/rollChange/current', method: 'get' })
|
||||
}
|
||||
|
||||
export function addRollChange(data) {
|
||||
return request({ url: '/mill/rollChange', method: 'post', data })
|
||||
}
|
||||
@@ -205,6 +205,19 @@ export const constantRoutes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/mill',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: 'roll',
|
||||
component: () => import('@/views/mill/roll'),
|
||||
name: 'MillRoll',
|
||||
meta: { title: '轧辊管理', icon: '' }
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
// 动态路由，基于用户权限动态去加载
|
||||
|
||||
822
ruoyi-ui/src/views/mill/roll.vue
Normal file
822
ruoyi-ui/src/views/mill/roll.vue
Normal file
@@ -0,0 +1,822 @@
|
||||
<template>
|
||||
<div class="roll-page">
|
||||
|
||||
<!-- ===== TOP: 换辊数据 ===== -->
|
||||
<div class="change-section">
|
||||
<div class="section-header"><span>换辊数据</span></div>
|
||||
<el-table :data="changeList" border size="mini" class="change-table"
|
||||
height="calc(35vh - 80px)"
|
||||
:row-class-name="changeRowClass">
|
||||
<el-table-column label="换辊时间" prop="changeTime" width="140" align="center" />
|
||||
<el-table-column label="状态" prop="changeStatus" width="90" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span class="status-tag">{{ row.changeStatus }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="上工作辊编号" prop="upperWrNo" width="110" />
|
||||
<el-table-column label="上工作辊径" prop="upperWrDia" width="95" align="right" />
|
||||
<el-table-column label="下工作辊编号" prop="lowerWrNo" width="110" />
|
||||
<el-table-column label="下工作辊径" prop="lowerWrDia" width="95" align="right" />
|
||||
<el-table-column label="上中间辊编号" prop="upperIrNo" width="110" />
|
||||
<el-table-column label="上中间辊径" prop="upperIrDia" width="95" align="right" />
|
||||
<el-table-column label="下中间辊编号" prop="lowerIrNo" width="110" />
|
||||
<el-table-column label="下中间辊径" prop="lowerIrDia" width="95" align="right" />
|
||||
<el-table-column label="上支承辊编号" prop="upperBrNo" width="110" />
|
||||
<el-table-column label="上支承辊径" prop="upperBrDia" width="95" align="right" />
|
||||
<el-table-column label="下支承辊编号" prop="lowerBrNo" width="110" />
|
||||
<el-table-column label="下支承辊径" prop="lowerBrDia" width="95" align="right" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- ===== BOTTOM: Two panels ===== -->
|
||||
<div class="bottom-section">
|
||||
|
||||
<!-- LEFT: 当前辊系参数 graphical display -->
|
||||
<div class="rolls-panel">
|
||||
<div class="section-header"><span>当前辊系参数</span></div>
|
||||
<div class="rolls-body">
|
||||
<div class="roll-stack">
|
||||
|
||||
<!-- 上支承辊 -->
|
||||
<div class="roll-row">
|
||||
<div class="roll-circle br-circle">
|
||||
<span class="roll-abbr">上支承辊</span>
|
||||
</div>
|
||||
<div class="roll-info">
|
||||
<div class="roll-info-row">
|
||||
<span class="info-label">辊号</span>
|
||||
<span class="info-val">{{ currentRolls.upperBrNo || '--' }}</span>
|
||||
</div>
|
||||
<div class="roll-info-row">
|
||||
<span class="info-label">辊径</span>
|
||||
<span class="info-val">{{ currentRolls.upperBrDia != null ? currentRolls.upperBrDia + ' mm' : '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-connector"></div>
|
||||
|
||||
<!-- 上中间辊 -->
|
||||
<div class="roll-row">
|
||||
<div class="roll-circle ir-circle">
|
||||
<span class="roll-abbr">上中间辊</span>
|
||||
</div>
|
||||
<div class="roll-info">
|
||||
<div class="roll-info-row">
|
||||
<span class="info-label">辊号</span>
|
||||
<span class="info-val">{{ currentRolls.upperIrNo || '--' }}</span>
|
||||
</div>
|
||||
<div class="roll-info-row">
|
||||
<span class="info-label">辊径</span>
|
||||
<span class="info-val">{{ currentRolls.upperIrDia != null ? currentRolls.upperIrDia + ' mm' : '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-connector"></div>
|
||||
|
||||
<!-- 上工作辊 -->
|
||||
<div class="roll-row">
|
||||
<div class="roll-circle wr-circle">
|
||||
<span class="roll-abbr">上工作辊</span>
|
||||
</div>
|
||||
<div class="roll-info">
|
||||
<div class="roll-info-row">
|
||||
<span class="info-label">辊号</span>
|
||||
<span class="info-val">{{ currentRolls.upperWrNo || '--' }}</span>
|
||||
</div>
|
||||
<div class="roll-info-row">
|
||||
<span class="info-label">辊径</span>
|
||||
<span class="info-val">{{ currentRolls.upperWrDia != null ? currentRolls.upperWrDia + ' mm' : '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nip-line">
|
||||
<span class="nip-label">轧制线</span>
|
||||
</div>
|
||||
|
||||
<!-- 下工作辊 -->
|
||||
<div class="roll-row">
|
||||
<div class="roll-circle wr-circle">
|
||||
<span class="roll-abbr">下工作辊</span>
|
||||
</div>
|
||||
<div class="roll-info">
|
||||
<div class="roll-info-row">
|
||||
<span class="info-label">辊号</span>
|
||||
<span class="info-val">{{ currentRolls.lowerWrNo || '--' }}</span>
|
||||
</div>
|
||||
<div class="roll-info-row">
|
||||
<span class="info-label">辊径</span>
|
||||
<span class="info-val">{{ currentRolls.lowerWrDia != null ? currentRolls.lowerWrDia + ' mm' : '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-connector"></div>
|
||||
|
||||
<!-- 下中间辊 -->
|
||||
<div class="roll-row">
|
||||
<div class="roll-circle ir-circle">
|
||||
<span class="roll-abbr">下中间辊</span>
|
||||
</div>
|
||||
<div class="roll-info">
|
||||
<div class="roll-info-row">
|
||||
<span class="info-label">辊号</span>
|
||||
<span class="info-val">{{ currentRolls.lowerIrNo || '--' }}</span>
|
||||
</div>
|
||||
<div class="roll-info-row">
|
||||
<span class="info-label">辊径</span>
|
||||
<span class="info-val">{{ currentRolls.lowerIrDia != null ? currentRolls.lowerIrDia + ' mm' : '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-connector"></div>
|
||||
|
||||
<!-- 下支承辊 -->
|
||||
<div class="roll-row">
|
||||
<div class="roll-circle br-circle">
|
||||
<span class="roll-abbr">下支承辊</span>
|
||||
</div>
|
||||
<div class="roll-info">
|
||||
<div class="roll-info-row">
|
||||
<span class="info-label">辊号</span>
|
||||
<span class="info-val">{{ currentRolls.lowerBrNo || '--' }}</span>
|
||||
</div>
|
||||
<div class="roll-info-row">
|
||||
<span class="info-label">辊径</span>
|
||||
<span class="info-val">{{ currentRolls.lowerBrDia != null ? currentRolls.lowerBrDia + ' mm' : '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 换辊时间 -->
|
||||
<div class="change-time-bar">
|
||||
<span class="ct-label">换辊时间：</span>
|
||||
<span class="ct-val">{{ currentRolls.changeTime || '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT: 轧辊库数据 -->
|
||||
<div class="rolldb-panel">
|
||||
<div class="section-header"><span>轧辊库数据</span></div>
|
||||
|
||||
<!-- Query bar -->
|
||||
<div class="query-bar">
|
||||
<el-select v-model="queryField" size="mini" style="width:110px;margin-right:6px">
|
||||
<el-option label="轧辊编号" value="rollNo" />
|
||||
<el-option label="轧辊类型" value="rollType" />
|
||||
<el-option label="使用状态" value="status" />
|
||||
</el-select>
|
||||
<el-input v-model="queryValue" size="mini" placeholder="查询条件" style="width:140px;margin-right:6px"
|
||||
@keyup.enter.native="handleConditionQuery" clearable />
|
||||
<el-button size="mini" type="primary" icon="el-icon-search" @click="handleConditionQuery">条件查询</el-button>
|
||||
<el-button size="mini" icon="el-icon-refresh" @click="handleAllQuery">全部查询</el-button>
|
||||
</div>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="action-bar">
|
||||
<el-button size="mini" type="primary" icon="el-icon-refresh-right" @click="openChangeRollDialog">更换轧辊</el-button>
|
||||
<el-button size="mini" icon="el-icon-plus" @click="openAddDialog">轧辊添加</el-button>
|
||||
<el-button size="mini" icon="el-icon-edit" :disabled="!selectedRoll" @click="openEditDialog">轧辊修改</el-button>
|
||||
<el-button size="mini" icon="el-icon-delete" :disabled="!selectedRoll" @click="handleDelete">轧辊删除</el-button>
|
||||
</div>
|
||||
|
||||
<!-- Roll library table -->
|
||||
<el-table :data="rollList" border size="mini" class="roll-table"
|
||||
height="calc(65vh - 160px)"
|
||||
highlight-current-row
|
||||
@current-change="handleRollSelect">
|
||||
<el-table-column label="ID" prop="rollId" width="60" align="center" />
|
||||
<el-table-column label="轧辊编号" prop="rollNo" width="110" />
|
||||
<el-table-column label="轧辊类型" prop="rollType" width="80" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span :class="rollTypeClass(row.rollType)">{{ row.rollType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="使用状态" prop="status" width="100" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span :class="rollStatusClass(row.status)">{{ row.status }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="初始辊径" prop="initialDia" width="85" align="right">
|
||||
<template slot-scope="{ row }">{{ row.initialDia }} mm</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="当前辊径" prop="currentDia" width="85" align="right">
|
||||
<template slot-scope="{ row }">{{ row.currentDia }} mm</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="标志位" prop="flag" width="65" align="center" />
|
||||
<el-table-column label="备注" prop="remark" min-width="80" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Dialog: 轧辊添加/修改 ===== -->
|
||||
<el-dialog :title="rollDialogTitle" :visible.sync="rollDialogVisible"
|
||||
width="480px" append-to-body>
|
||||
<el-form :model="rollForm" :rules="rollRules" ref="rollFormRef"
|
||||
size="mini" label-width="90px">
|
||||
<el-form-item label="轧辊编号" prop="rollNo">
|
||||
<el-input v-model="rollForm.rollNo" placeholder="请输入轧辊编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="轧辊类型" prop="rollType">
|
||||
<el-select v-model="rollForm.rollType" placeholder="请选择" style="width:100%">
|
||||
<el-option label="WR (工作辊)" value="WR" />
|
||||
<el-option label="IR (中间辊)" value="IR" />
|
||||
<el-option label="BR (支承辊)" value="BR" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="使用状态">
|
||||
<el-select v-model="rollForm.status" placeholder="请选择" style="width:100%">
|
||||
<el-option label="Offline" value="Offline" />
|
||||
<el-option label="Online Use" value="Online Use" />
|
||||
<el-option label="Scrap" value="Scrap" />
|
||||
<el-option label="Grinding" value="Grinding" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="初始辊径(mm)">
|
||||
<el-input-number v-model="rollForm.initialDia" :precision="2" :step="0.01"
|
||||
:min="0" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="当前辊径(mm)">
|
||||
<el-input-number v-model="rollForm.currentDia" :precision="2" :step="0.01"
|
||||
:min="0" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标志位">
|
||||
<el-input v-model="rollForm.flag" placeholder="如 U / D / 0" maxlength="4" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="rollForm.remark" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button size="mini" @click="rollDialogVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="submitRollForm">保 存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- ===== Dialog: 更换轧辊 ===== -->
|
||||
<el-dialog title="更换轧辊" :visible.sync="changeDialogVisible"
|
||||
width="640px" append-to-body>
|
||||
<el-form :model="changeForm" ref="changeFormRef" size="mini" label-width="110px">
|
||||
<el-form-item label="换辊状态">
|
||||
<el-select v-model="changeForm.changeStatus" style="width:180px">
|
||||
<el-option label="新辊换上" value="新辊换上" />
|
||||
<el-option label="磨后换上" value="磨后换上" />
|
||||
<el-option label="换辊检修" value="换辊检修" />
|
||||
<el-option label="计划换辊" value="计划换辊" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<div class="change-dialog-grid">
|
||||
<!-- 上支承辊 -->
|
||||
<div class="change-group-header">支承辊</div>
|
||||
<el-form-item label="上支承辊编号">
|
||||
<el-input v-model="changeForm.upperBrNo" placeholder="辊号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上支承辊径(mm)">
|
||||
<el-input-number v-model="changeForm.upperBrDia" :precision="2" :min="0" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下支承辊编号">
|
||||
<el-input v-model="changeForm.lowerBrNo" placeholder="辊号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下支承辊径(mm)">
|
||||
<el-input-number v-model="changeForm.lowerBrDia" :precision="2" :min="0" style="width:100%" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 中间辊 -->
|
||||
<div class="change-group-header">中间辊</div>
|
||||
<el-form-item label="上中间辊编号">
|
||||
<el-input v-model="changeForm.upperIrNo" placeholder="辊号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上中间辊径(mm)">
|
||||
<el-input-number v-model="changeForm.upperIrDia" :precision="2" :min="0" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下中间辊编号">
|
||||
<el-input v-model="changeForm.lowerIrNo" placeholder="辊号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下中间辊径(mm)">
|
||||
<el-input-number v-model="changeForm.lowerIrDia" :precision="2" :min="0" style="width:100%" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 工作辊 -->
|
||||
<div class="change-group-header">工作辊</div>
|
||||
<el-form-item label="上工作辊编号">
|
||||
<el-input v-model="changeForm.upperWrNo" placeholder="辊号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上工作辊径(mm)">
|
||||
<el-input-number v-model="changeForm.upperWrDia" :precision="2" :min="0" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下工作辊编号">
|
||||
<el-input v-model="changeForm.lowerWrNo" placeholder="辊号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下工作辊径(mm)">
|
||||
<el-input-number v-model="changeForm.lowerWrDia" :precision="2" :min="0" style="width:100%" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="changeForm.remark" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button size="mini" @click="changeDialogVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="submitChangeForm">确认换辊</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listRoll, getRoll, addRoll, updateRoll, delRoll,
|
||||
listRollChange, getCurrentRolls, addRollChange
|
||||
} from '@/api/mill/roll'
|
||||
|
||||
export default {
|
||||
name: 'MillRoll',
|
||||
data() {
|
||||
return {
|
||||
// 换辊数据
|
||||
changeList: [],
|
||||
|
||||
// 当前辊系
|
||||
currentRolls: {},
|
||||
|
||||
// 轧辊库
|
||||
rollList: [],
|
||||
selectedRoll: null,
|
||||
|
||||
// 查询
|
||||
queryField: 'rollNo',
|
||||
queryValue: '',
|
||||
|
||||
// 轧辊添加/修改 dialog
|
||||
rollDialogVisible: false,
|
||||
rollDialogTitle: '轧辊添加',
|
||||
isNewRoll: true,
|
||||
rollForm: {
|
||||
rollId: null,
|
||||
rollNo: '',
|
||||
rollType: 'WR',
|
||||
status: 'Offline',
|
||||
initialDia: 0,
|
||||
currentDia: 0,
|
||||
flag: '',
|
||||
remark: ''
|
||||
},
|
||||
rollRules: {
|
||||
rollNo: [{ required: true, message: '请输入轧辊编号', trigger: 'blur' }],
|
||||
rollType: [{ required: true, message: '请选择轧辊类型', trigger: 'change' }]
|
||||
},
|
||||
|
||||
// 换辊 dialog
|
||||
changeDialogVisible: false,
|
||||
changeForm: {
|
||||
changeStatus: '新辊换上',
|
||||
upperWrNo: '', upperWrDia: 0,
|
||||
lowerWrNo: '', lowerWrDia: 0,
|
||||
upperIrNo: '', upperIrDia: 0,
|
||||
lowerIrNo: '', lowerIrDia: 0,
|
||||
upperBrNo: '', upperBrDia: 0,
|
||||
lowerBrNo: '', lowerBrDia: 0,
|
||||
remark: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.loadChangeList()
|
||||
this.loadCurrentRolls()
|
||||
this.loadRollList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// ===== Load data =====
|
||||
loadChangeList() {
|
||||
listRollChange({}).then(res => {
|
||||
this.changeList = res.rows || []
|
||||
})
|
||||
},
|
||||
|
||||
loadCurrentRolls() {
|
||||
getCurrentRolls().then(res => {
|
||||
this.currentRolls = res.data || {}
|
||||
})
|
||||
},
|
||||
|
||||
loadRollList(query) {
|
||||
listRoll(query || {}).then(res => {
|
||||
this.rollList = res.rows || []
|
||||
})
|
||||
},
|
||||
|
||||
// ===== Query =====
|
||||
handleConditionQuery() {
|
||||
const q = {}
|
||||
if (this.queryValue && this.queryValue.trim()) {
|
||||
q[this.queryField] = this.queryValue.trim()
|
||||
}
|
||||
this.loadRollList(q)
|
||||
},
|
||||
|
||||
handleAllQuery() {
|
||||
this.queryValue = ''
|
||||
this.loadRollList({})
|
||||
},
|
||||
|
||||
// ===== Roll table =====
|
||||
handleRollSelect(row) {
|
||||
this.selectedRoll = row || null
|
||||
},
|
||||
|
||||
// ===== Add roll =====
|
||||
openAddDialog() {
|
||||
this.isNewRoll = true
|
||||
this.rollDialogTitle = '轧辊添加'
|
||||
this.rollForm = {
|
||||
rollId: null,
|
||||
rollNo: '',
|
||||
rollType: 'WR',
|
||||
status: 'Offline',
|
||||
initialDia: 0,
|
||||
currentDia: 0,
|
||||
flag: '',
|
||||
remark: ''
|
||||
}
|
||||
this.rollDialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.rollFormRef && this.$refs.rollFormRef.clearValidate()
|
||||
})
|
||||
},
|
||||
|
||||
// ===== Edit roll =====
|
||||
openEditDialog() {
|
||||
if (!this.selectedRoll) return
|
||||
this.isNewRoll = false
|
||||
this.rollDialogTitle = '轧辊修改'
|
||||
this.rollForm = { ...this.selectedRoll }
|
||||
this.rollDialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.rollFormRef && this.$refs.rollFormRef.clearValidate()
|
||||
})
|
||||
},
|
||||
|
||||
submitRollForm() {
|
||||
this.$refs.rollFormRef.validate(valid => {
|
||||
if (!valid) return
|
||||
const api = this.isNewRoll ? addRoll : updateRoll
|
||||
api(this.rollForm).then(() => {
|
||||
this.$message.success('保存成功')
|
||||
this.rollDialogVisible = false
|
||||
this.loadRollList()
|
||||
}).catch(() => {
|
||||
this.$message.error('保存失败，请检查输入')
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// ===== Delete roll =====
|
||||
handleDelete() {
|
||||
if (!this.selectedRoll) return
|
||||
this.$confirm(`确定删除轧辊「${this.selectedRoll.rollNo}」？`, '提示', { type: 'warning' }).then(() => {
|
||||
delRoll(this.selectedRoll.rollId).then(() => {
|
||||
this.$message.success('删除成功')
|
||||
this.selectedRoll = null
|
||||
this.loadRollList()
|
||||
})
|
||||
}).catch(() => {})
|
||||
},
|
||||
|
||||
// ===== Change rolls =====
|
||||
openChangeRollDialog() {
|
||||
// Pre-fill from current rolls
|
||||
const c = this.currentRolls || {}
|
||||
this.changeForm = {
|
||||
changeStatus: '新辊换上',
|
||||
upperWrNo: c.upperWrNo || '',
|
||||
upperWrDia: c.upperWrDia != null ? Number(c.upperWrDia) : 0,
|
||||
lowerWrNo: c.lowerWrNo || '',
|
||||
lowerWrDia: c.lowerWrDia != null ? Number(c.lowerWrDia) : 0,
|
||||
upperIrNo: c.upperIrNo || '',
|
||||
upperIrDia: c.upperIrDia != null ? Number(c.upperIrDia) : 0,
|
||||
lowerIrNo: c.lowerIrNo || '',
|
||||
lowerIrDia: c.lowerIrDia != null ? Number(c.lowerIrDia) : 0,
|
||||
upperBrNo: c.upperBrNo || '',
|
||||
upperBrDia: c.upperBrDia != null ? Number(c.upperBrDia) : 0,
|
||||
lowerBrNo: c.lowerBrNo || '',
|
||||
lowerBrDia: c.lowerBrDia != null ? Number(c.lowerBrDia) : 0,
|
||||
remark: ''
|
||||
}
|
||||
this.changeDialogVisible = true
|
||||
},
|
||||
|
||||
submitChangeForm() {
|
||||
addRollChange(this.changeForm).then(() => {
|
||||
this.$message.success('换辊记录已保存')
|
||||
this.changeDialogVisible = false
|
||||
this.loadChangeList()
|
||||
this.loadCurrentRolls()
|
||||
this.loadRollList()
|
||||
}).catch(() => {
|
||||
this.$message.error('换辊失败，请重试')
|
||||
})
|
||||
},
|
||||
|
||||
// ===== Style helpers =====
|
||||
changeRowClass({ rowIndex }) {
|
||||
return rowIndex === 0 ? 'row-latest' : ''
|
||||
},
|
||||
|
||||
rollTypeClass(type) {
|
||||
return { WR: 'type-wr', IR: 'type-ir', BR: 'type-br' }[type] || ''
|
||||
},
|
||||
|
||||
rollStatusClass(status) {
|
||||
return {
|
||||
'Online Use': 'sts-online',
|
||||
'Offline': 'sts-offline',
|
||||
'Scrap': 'sts-scrap',
|
||||
'Grinding': 'sts-grinding'
|
||||
}[status] || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.roll-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 84px);
|
||||
background: #f0f2f5;
|
||||
padding: 8px 12px;
|
||||
box-sizing: border-box;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
background: #1c2b3a;
|
||||
color: #ecf0f1;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
/* ===== TOP section ===== */
|
||||
.change-section {
|
||||
flex-shrink: 0;
|
||||
height: 35vh;
|
||||
background: #fff;
|
||||
border: 1px solid #dde1e6;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.change-table {
|
||||
::v-deep .row-latest td {
|
||||
background: #e8f0fb !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 11px;
|
||||
color: #1d4e89;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ===== BOTTOM section ===== */
|
||||
.bottom-section {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ===== LEFT: 当前辊系参数 ===== */
|
||||
.rolls-panel {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
border: 1px solid #dde1e6;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rolls-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 12px 6px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.roll-stack {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.roll-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.roll-circle {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.br-circle {
|
||||
background: radial-gradient(circle at 35% 35%, #2e4a6e, #1c2b3a);
|
||||
border: 2px solid #3d6494;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.ir-circle {
|
||||
background: radial-gradient(circle at 35% 35%, #25446a, #182538);
|
||||
border: 2px solid #3a5a86;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.wr-circle {
|
||||
background: radial-gradient(circle at 35% 35%, #1f3a5c, #152232);
|
||||
border: 2px solid #2d4d73;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.roll-abbr {
|
||||
color: #a9bcd0;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.roll-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.roll-info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
width: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-val {
|
||||
font-size: 11px;
|
||||
color: #1d4e89;
|
||||
font-weight: 600;
|
||||
font-family: 'Courier New', monospace;
|
||||
background: #f0f4fa;
|
||||
padding: 1px 6px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #d0daea;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.stack-connector {
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
background: #3d6494;
|
||||
margin-left: 27px;
|
||||
}
|
||||
|
||||
.nip-line {
|
||||
width: 100%;
|
||||
border-top: 2px dashed #1d4e89;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 4px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nip-label {
|
||||
font-size: 10px;
|
||||
color: #1d4e89;
|
||||
background: #fff;
|
||||
padding: 0 6px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.change-time-bar {
|
||||
padding: 8px 0 4px;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
margin-top: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ct-label {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ct-val {
|
||||
font-size: 12px;
|
||||
color: #1d4e89;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ===== RIGHT: 轧辊库数据 ===== */
|
||||
.rolldb-panel {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
border: 1px solid #dde1e6;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.query-bar {
|
||||
padding: 8px 12px 4px;
|
||||
border-bottom: 1px solid #eaeef2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
padding: 6px 12px;
|
||||
border-bottom: 1px solid #eaeef2;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.roll-table {
|
||||
flex: 1;
|
||||
::v-deep .el-table__row.current-row td {
|
||||
background: #e8f0fb !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Roll type badges */
|
||||
.type-wr { color: #1d4e89; font-weight: 700; }
|
||||
.type-ir { color: #5a5a9a; font-weight: 700; }
|
||||
.type-br { color: #4a6a8a; font-weight: 700; }
|
||||
|
||||
/* Roll status */
|
||||
.sts-online { color: #1d4e89; font-weight: 700; }
|
||||
.sts-offline { color: #909399; }
|
||||
.sts-scrap { color: #c0392b; }
|
||||
.sts-grinding { color: #d68910; }
|
||||
|
||||
/* ===== Change dialog ===== */
|
||||
.change-dialog-grid {
|
||||
.change-group-header {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: #1c2b3a;
|
||||
padding: 3px 10px;
|
||||
border-radius: 2px;
|
||||
margin: 8px 0 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user