DeXun/pickling-mes
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(plan): 计划详细面板 + 来料重量/外径/分卷重量 + 在线/生产中状态机 + 入口移动 + 上次模板回填

Browse Source 
- backend: plan 增加 incoming_weight/incoming_od/split_weights(JSON) 字段及迁移
- backend: GET /plan/last-template 返回最近一条计划的工艺字段用于新增回填（多端共享）
- backend: PATCH /plan/{id}/start 设为 producing，强制单卷在产（其他 producing 回退 online）
- backend: 生成实绩时按卷号自动把对应计划状态置为 produced
- frontend: 新增计划默认状态 online；新增时调用 last-template 自动回填
- frontend: Plan 表格行点击展开 计划详细 面板（按截图布局）
- frontend: Plan 行操作增加「移动」（ready/online → producing）
- frontend: 物料跟踪页加 在线计划队列 + 入口移动按钮，显示当前生产中卷
- frontend: 计划弹窗新增 轧制模式/来料重量/来料外径/1-6#分卷重量
This commit is contained in:
wangyu
2026-06-21 23:42:22 +08:00
parent db3945c263
commit 9cf422ef0d
8 changed files with 326 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
frontend/src/views/Plan.vue
View File

@@ -57,7 +57,9 @@
</tr>
</thead>
<tbody>
<tr v-for="(row, idx) in tableData" :key="row.id">
<tr v-for="(row, idx) in tableData" :key="row.id"
:class="{ 'row-selected': selectedRow && selectedRow.id === row.id }"
@click="selectRow(row)" style="cursor:pointer;">
<td class="td-num">{{ idx + 1 }}</td>
<td class="td-num">{{ row.cold_coil_no || row.plan_no || '—' }}</td>
<td class="td-num">{{ row.hot_coil_no || '—' }}</td>
@@ -74,9 +76,10 @@
<td class="td-num">{{ row.next_process != null ? row.next_process : '—' }}</td>
<td class="td-muted">{{ fmtTime(row.plan_date) }}</td>
<td><span :class="['badge', statusBadge(row.status)]">{{ statusLabel(row.status) }}</span></td>
<td>
<td @click.stop>
<span class="action-link" @click="openDialog(row)">编辑</span>
<span v-if="row.status === 'ready'" class="action-link" style="color:var(--accent-green)" @click="confirmPlan(row)">上线</span>
<span v-if="row.status === 'ready' || row.status === 'online'"
class="action-link" style="color:var(--accent-green)" @click="moveToProducing(row)">移动</span>
</td>
</tr>
<tr v-if="!tableData.length && !loading">
@@ -87,8 +90,44 @@
</div>
</div>
<!-- 计划详细 -->
<div class="card" v-if="selectedRow">
<div class="card-header">计划详细 — {{ selectedRow.cold_coil_no || selectedRow.plan_no }}</div>
<div class="detail-grid">
<div class="dt-row"><span class="dt-k">钢卷号</span><span class="dt-v">{{ selectedRow.cold_coil_no || '—' }}</span></div>
<div class="dt-row"><span class="dt-k">来料厚度</span><span class="dt-v">{{ fmtNum(selectedRow.incoming_thickness) }} <i>[mm]</i></span></div>
<div class="dt-row"><span class="dt-k">来料宽度</span><span class="dt-v">{{ fmtNum(selectedRow.incoming_width, 0) }} <i>[mm]</i></span></div>
<div class="dt-row"><span class="dt-k">1#分卷</span><span class="dt-v">{{ fmtNum(splitW(0), 3) }} <i>[t]</i></span></div>
<div class="dt-row"><span class="dt-k">钢种</span><span class="dt-v">{{ selectedRow.steel_grade || '—' }}</span></div>
<div class="dt-row"><span class="dt-k">产品厚度</span><span class="dt-v">{{ fmtNum(selectedRow.product_thickness) }} <i>[mm]</i></span></div>
<div class="dt-row"><span class="dt-k">产品宽度</span><span class="dt-v">{{ fmtNum(selectedRow.product_width, 0) }} <i>[mm]</i></span></div>
<div class="dt-row"><span class="dt-k">2#分卷</span><span class="dt-v">{{ fmtNum(splitW(1), 3) }} <i>[t]</i></span></div>
<div class="dt-row"><span class="dt-k">轧制模式</span><span class="dt-v">{{ selectedRow.rolling_mode || '—' }}</span></div>
<div class="dt-row"><span class="dt-k">偏差上限</span><span class="dt-v">{{ fmtNum(selectedRow.deviation_upper, 3) }} <i>[mm]</i></span></div>
<div class="dt-row"><span class="dt-k">分卷数</span><span class="dt-v">{{ selectedRow.split_count != null ? selectedRow.split_count : 1 }}</span></div>
<div class="dt-row"><span class="dt-k">3#分卷</span><span class="dt-v">{{ fmtNum(splitW(2), 3) }} <i>[t]</i></span></div>
<div class="dt-row"><span class="dt-k">状态</span><span class="dt-v"><span :class="['badge', statusBadge(selectedRow.status)]">{{ statusLabel(selectedRow.status) }}</span></span></div>
<div class="dt-row"><span class="dt-k">偏差下限</span><span class="dt-v">{{ fmtNum(selectedRow.deviation_lower, 3) }} <i>[mm]</i></span></div>
<div class="dt-row"><span class="dt-k">下工序</span><span class="dt-v">{{ selectedRow.next_process || '—' }}</span></div>
<div class="dt-row"><span class="dt-k">4#分卷</span><span class="dt-v">{{ fmtNum(splitW(3), 3) }} <i>[t]</i></span></div>
<div class="dt-row"><span class="dt-k">下达时间</span><span class="dt-v">{{ fmtTime(selectedRow.plan_date) }}</span></div>
<div class="dt-row"><span class="dt-k">来料重量</span><span class="dt-v">{{ fmtNum(selectedRow.incoming_weight, 2) }} <i>[t]</i></span></div>
<div class="dt-row"><span class="dt-k">来料外径</span><span class="dt-v">{{ fmtNum(selectedRow.incoming_od, 0) }} <i>[mm]</i></span></div>
<div class="dt-row"><span class="dt-k">5#分卷</span><span class="dt-v">{{ fmtNum(splitW(4), 3) }} <i>[t]</i></span></div>
<div class="dt-row"></div>
<div class="dt-row"></div>
<div class="dt-row"></div>
<div class="dt-row"><span class="dt-k">6#分卷</span><span class="dt-v">{{ fmtNum(splitW(5), 3) }} <i>[t]</i></span></div>
</div>
</div>
<div v-if="dialogVisible" class="modal-mask" @click.self="dialogVisible=false">
<div class="modal-box" style="width:780px;">
<div class="modal-box" style="width:880px;">
<div class="modal-header">
{{ editRow ? '编辑计划' : '新增计划' }}
<span class="modal-close" @click="dialogVisible=false">✕</span>
@@ -111,6 +150,15 @@
<div class="kv-label">钢种</div>
<input v-model="form.steel_grade" class="kv-input" placeholder="QTGLG-2019" />
</div>
<div class="form-field">
<div class="kv-label">轧制模式</div>
<select v-model="form.rolling_mode" class="kv-input">
<option value="">—</option>
<option value="冷轧">冷轧</option>
<option value="热轧">热轧</option>
<option value="温轧">温轧</option>
</select>
</div>
<div class="form-field">
<div class="kv-label">来料厚度 (mm)</div>
<input v-model.number="form.incoming_thickness" type="number" step="0.01" class="kv-input" />
@@ -147,9 +195,17 @@
<div class="kv-label">卷径 (mm)</div>
<input v-model.number="form.coil_diameter" type="number" step="1" class="kv-input" />
</div>
<div class="form-field">
<div class="kv-label">来料外径 (mm)</div>
<input v-model.number="form.incoming_od" type="number" step="1" class="kv-input" />
</div>
<div class="form-field">
<div class="kv-label">来料重量 (t)</div>
<input v-model.number="form.incoming_weight" type="number" step="0.001" class="kv-input" />
</div>
<div class="form-field">
<div class="kv-label">分卷数</div>
<input v-model.number="form.split_count" type="number" min="1" class="kv-input" />
<input v-model.number="form.split_count" type="number" min="1" max="6" class="kv-input" @change="syncSplitWeights" />
</div>
<div class="form-field">
<div class="kv-label">下工序</div>
@@ -166,6 +222,16 @@
</select>
</div>
</div>
<div style="margin-top:12px;border-top:1px dashed var(--border);padding-top:10px;">
<div class="kv-label" style="margin-bottom:6px;">分卷重量 (t)</div>
<div class="grid-6" style="gap:8px;">
<div v-for="i in 6" :key="i" class="form-field">
<div class="kv-label" style="font-size:11px;">{{ i }}#分卷</div>
<input v-model.number="form.split_weights[i-1]" type="number" step="0.001"
:disabled="i > (form.split_count || 1)" class="kv-input" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-outline" @click="dialogVisible=false">取消</button>
@@ -177,15 +243,21 @@
</template>
<script>
import { getPlans, createPlan, updatePlan, confirmPlan as apiConfirm } from '@/api'
import { getPlans, createPlan, updatePlan, confirmPlan as apiConfirm, startProducing, getLastPlanTemplate } from '@/api'
const STATUS_MAP = {
ready: { label: '准备好', badge: 'badge-green' },
online: { label: '在线', badge: 'badge-yellow' },
producing: { label: '生产中', badge: 'badge-yellow' },
produced: { label: '产出', badge: 'badge-blue' },
ready: { label: '准备好', badge: 'badge-gray' },
online: { label: '在线', badge: 'badge-green' },
producing: { label: '生产中', badge: 'badge-yellow' },
produced: { label: '生产完成', badge: 'badge-blue' },
}
const TEMPLATE_KEYS = [
'steel_grade','incoming_thickness','product_thickness','deviation_upper','deviation_lower',
'incoming_width','product_width','packaging_req','trim_req','rolling_mode',
'coil_diameter','split_count','next_process','incoming_weight','incoming_od','split_weights',
]
export default {
name: 'Plan',
data() {
@@ -194,11 +266,16 @@ export default {
tableData: [], total: 0,
query: { page: 1, page_size: 50, status: '', cold_coil_no: '', start_date: '', end_date: '' },
statusOptions: Object.entries(STATUS_MAP).map(([value, { label }]) => ({ value, label })),
dialogVisible: false, editRow: null, form: { split_count: 1, status: 'ready' },
dialogVisible: false, editRow: null,
form: this.emptyForm(),
selectedRow: null,
}
},
created() { this.fetchData() },
methods: {
emptyForm() {
return { plan_no: '', split_count: 1, status: 'online', split_weights: [null,null,null,null,null,null] }
},
async fetchData() {
this.loading = true
const params = { page: this.query.page, page_size: this.query.page_size }
@@ -213,20 +290,51 @@ export default {
}
this.tableData = items
this.total = res.data.total
if (this.selectedRow) {
const fresh = items.find(x => x.id === this.selectedRow.id)
if (fresh) this.selectedRow = fresh
}
} finally { this.loading = false }
},
fmtTime(t) { return t ? t.slice(0, 16).replace('T', ' ') : '—' },
fmtNum(v, n = 2) { return v != null ? Number(v).toFixed(n) : '—' },
fmtNum(v, n = 2) { return v != null && v !== '' ? Number(v).toFixed(n) : '—' },
statusLabel(s) { return STATUS_MAP[s]?.label || s || '—' },
statusBadge(s) { return STATUS_MAP[s]?.badge || 'badge-gray' },
openDialog(row = null) {
selectRow(row) { this.selectedRow = row },
splitW(i) {
const arr = this.selectedRow && this.selectedRow.split_weights
return Array.isArray(arr) ? arr[i] : null
},
syncSplitWeights() {
const n = Math.max(1, Math.min(6, Number(this.form.split_count) || 1))
const arr = (this.form.split_weights || []).slice(0, 6)
while (arr.length < 6) arr.push(null)
for (let i = n; i < 6; i++) arr[i] = null
this.$set(this.form, 'split_weights', arr)
},
async openDialog(row = null) {
this.editRow = row
if (row) {
const r = { ...row }
if (r.plan_date) r.plan_date = r.plan_date.slice(0, 16)
if (!Array.isArray(r.split_weights)) r.split_weights = [null,null,null,null,null,null]
else { while (r.split_weights.length < 6) r.split_weights.push(null) }
this.form = r
} else {
this.form = { plan_no: '', split_count: 1, status: 'ready', plan_date: this.nowDT() }
this.form = this.emptyForm()
this.form.plan_date = this.nowDT()
try {
const res = await getLastPlanTemplate()
const t = res.data || {}
for (const k of TEMPLATE_KEYS) {
if (t[k] != null) this.$set(this.form, k, t[k])
}
if (!Array.isArray(this.form.split_weights)) {
this.form.split_weights = [null,null,null,null,null,null]
} else {
while (this.form.split_weights.length < 6) this.form.split_weights.push(null)
}
} catch (e) { /* 无历史可回填，忽略 */ }
}
this.dialogVisible = true
},
@@ -240,6 +348,12 @@ export default {
this.$message.success('已上线')
this.fetchData()
},
async moveToProducing(row) {
if (!confirm(`将计划 ${row.cold_coil_no || row.plan_no} 移动到入口并开始生产？`)) return
await startProducing(row.id)
this.$message.success('已开始生产')
this.fetchData()
},
async save() {
if (!this.form.plan_no) { this.$message.error('计划号不能为空'); return }
if (!this.form.plan_date) { this.$message.error('计划时间不能为空'); return }
@@ -248,6 +362,11 @@ export default {
const d = { ...this.form }
if (d.plan_date && !d.plan_date.includes(':')) d.plan_date += 'T00:00:00'
else if (d.plan_date && d.plan_date.length === 16) d.plan_date += ':00'
// 修剪 split_weights 到 split_count 长度
const n = Math.max(1, Math.min(6, Number(d.split_count) || 1))
if (Array.isArray(d.split_weights)) {
d.split_weights = d.split_weights.slice(0, n).map(v => v === '' ? null : v)
}
if (this.editRow) await updatePlan(this.editRow.id, d)
else await createPlan(d)
this.$message.success('保存成功')
@@ -261,8 +380,22 @@ export default {
<style lang="scss" scoped>
@import '@/assets/styles/variables';
.action-link { color: $sms-highlight; cursor: pointer; font-size: 12px; margin-right: 12px; &:hover { text-decoration: underline; } }
.row-selected { background: rgba(29, 142, 255, 0.12) !important; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); }
.detail-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px 24px;
padding: 14px 18px;
border: 1px solid #c43a3a;
margin: 0 6px 8px;
background: rgba(196, 58, 58, 0.04);
}
.dt-row { display: flex; align-items: center; gap: 10px; font-size: 12px; min-height: 22px; }
.dt-k { color: $text-muted; min-width: 64px; }
.dt-v { color: $text-primary; flex: 1; i { color: $text-muted; font-style: normal; font-size: 11px; margin-left: 2px; } }
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.modal-box { background: $bg-card; border: 1px solid $border; border-radius: 6px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: $bg-panel; border-bottom: 1px solid $border; font-size: 13px; font-weight: 600; color: $sms-highlight; .modal-close { cursor: pointer; color: $text-muted; &:hover { color: $text-primary; } } }