wangyu
9fb3dcb785
后端：
- 计划录入即「准备好」，队首(最早)自动「在线」(唯一)
- 新增上卷鞍座联动引擎 line_service：移动→鞍座→(有速度/投入生产)→生产中
→带头达2000m→生产完成并自动产生实绩、持久化运行数据
- 停机自动检测：线速度为0持续>10min 自动新增待补充停机记录，恢复后自动结束
- /plan/start=移动到鞍座, 新增 /plan/{id}/commit 投入生产, /plan/saddle/current,
/plan/seed 批量插入(轧制力模式)；后台引擎循环自动推进
- 新增成本管理：CostRecord 模型 + /cost CRUD + 9 类成本项(乳化液/盐酸/碱/电/水/蒸汽…)
前端：
- 入口跟踪重构为单个上卷鞍座工位(实时速度/带头长度进度/投入生产)+待上卷卡片+队列，
计划列表/卡片/队列均可「移动」
- 新增成本管理页(成本项切换 + 柱+线图 + 明细表 + 时间筛选 + 新增)，布局参考乳化液耗量统计
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
311 lines
9.8 KiB
Vue
311 lines
9.8 KiB
Vue
<template>
|
|
<div class="layout">
|
|
|
|
<!-- ─── TOP BAR ─── -->
|
|
<div class="top-bar">
|
|
<div class="logo">
|
|
<span class="logo-mark">酸</span>
|
|
<span class="logo-text">推拉酸洗线</span>
|
|
</div>
|
|
<div class="sys-title">二级过程控制系统</div>
|
|
<div class="spacer"></div>
|
|
<div class="status-pills">
|
|
<span class="pill run"><i class="dot"></i>机组运行</span>
|
|
<span class="pill run"><i class="dot"></i>L2 在线</span>
|
|
<span :class="['pill', l3Status]"><i class="dot"></i>{{ l3StatusText }}</span>
|
|
</div>
|
|
<div class="top-user">
|
|
<span class="username">{{ user && (user.full_name || user.username) }}</span>
|
|
<span class="divider">|</span>
|
|
<span class="logout" @click="logout">退出</span>
|
|
</div>
|
|
<div class="clock">{{ clock }}</div>
|
|
</div>
|
|
|
|
<!-- ─── NAV BAR ─── -->
|
|
<div class="nav-bar">
|
|
<div
|
|
v-for="item in menuItems"
|
|
:key="item.path"
|
|
:class="['nav-item', { active: $route.path === item.path }]"
|
|
@click="$router.push(item.path)"
|
|
>
|
|
<span class="nav-icon" v-html="item.icon"></span>
|
|
<span class="nav-label">{{ item.title }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ─── MAIN ─── -->
|
|
<div class="main-area">
|
|
<router-view />
|
|
</div>
|
|
|
|
<!-- ─── FOOTER ─── -->
|
|
<div class="footer">
|
|
<div class="fp"><i class="dot g"></i>数据库</div>
|
|
<div class="fp"><i class="dot g"></i>UDP :9000</div>
|
|
<div class="fp"><i :class="['dot', l3Status === 'run' ? 'g' : 'y']"></i>L3 {{ l3StatusText }}</div>
|
|
<div style="margin-left:auto;">推拉酸洗线 L2 MES · v1.0.0</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
|
|
const IC = {
|
|
dashboard: `<svg viewBox="0 0 14 14" fill="currentColor"><rect x="1" y="1" width="5" height="5"/><rect x="8" y="1" width="5" height="5"/><rect x="1" y="8" width="5" height="5"/><rect x="8" y="8" width="5" height="5"/></svg>`,
|
|
material: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M7 1L1 4v6l6 3 6-3V4L7 1zm0 1.8L11.5 5v4.5L7 11.8 2.5 9.5V5L7 2.8z"/></svg>`,
|
|
production: `<svg viewBox="0 0 14 14" fill="currentColor"><rect x="1" y="8" width="3" height="5"/><rect x="5.5" y="5" width="3" height="8"/><rect x="10" y="2" width="3" height="11"/></svg>`,
|
|
plan: `<svg viewBox="0 0 14 14" fill="currentColor"><rect x="2" y="2.5" width="10" height="2"/><rect x="2" y="6" width="10" height="2"/><rect x="2" y="9.5" width="6" height="2"/></svg>`,
|
|
downtime: `<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="7" cy="7" r="5.5"/><rect x="5" y="4.5" width="1.8" height="5" fill="currentColor" stroke="none"/><rect x="7.2" y="4.5" width="1.8" height="5" fill="currentColor" stroke="none"/></svg>`,
|
|
equipment: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M7 4.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm0 1.4a1.1 1.1 0 110 2.2A1.1 1.1 0 017 5.9zM5.9 1l-.4 1.6A4.6 4.6 0 003.9 3.8L2.3 3.2 1.2 5.3l1.3 1A4.4 4.4 0 002.2 7c0 .25.02.5.06.75L1.2 8.7l1.1 2.1 1.6-.6c.44.37.9.68 1.6.93L5.9 13h2.2l.4-1.6c.6-.25 1.1-.56 1.6-.93l1.6.6 1.1-2.1-1.3-1c.04-.25.06-.5.06-.75 0-.25-.02-.5-.06-.75l1.3-1-1.1-2.1-1.6.6A4.6 4.6 0 008.1 2.6L7.7 1H5.9z"/></svg>`,
|
|
inspection: `<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="5.5" cy="5.5" r="4"/><line x1="8.5" y1="8.5" x2="13" y2="13"/><circle cx="5.5" cy="5.5" r="1.2" fill="currentColor" stroke="none"/></svg>`,
|
|
message: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M1 1.5h12v9H8.5L7 12.5 5.5 10.5H1V1.5zm1.3 1.3v6.4H6l1 1.6 1-1.6h3.7V2.8H2.3z"/></svg>`,
|
|
process: `<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M1 7 Q2.5 3 4 7 Q5.5 11 7 7 Q8.5 3 10 7 Q11 9 13 7"/></svg>`,
|
|
tension: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M7 1a6 6 0 100 12A6 6 0 007 1zm0 1.3a4.7 4.7 0 110 9.4A4.7 4.7 0 017 2.3z"/><line x1="7" y1="7" x2="10" y2="4.5" stroke="currentColor" stroke-width="1.3"/><circle cx="7" cy="7" r="1.1"/></svg>`,
|
|
quality: `<svg viewBox="0 0 14 14" fill="currentColor"><path d="M7 1l1.6 3.7 4 .5-3 2.7.9 4L7 9.8l-3.5 1.9.9-4-3-2.7 4-.5z"/></svg>`,
|
|
capacity: `<svg viewBox="0 0 14 14" fill="currentColor"><rect x="1" y="9" width="2.5" height="4"/><rect x="5" y="6.5" width="2.5" height="6.5"/><rect x="9" y="3.5" width="2.5" height="9.5"/></svg>`,
|
|
}
|
|
|
|
const MENU = [
|
|
{ path: '/plan', title: '计划管理', icon: IC.plan },
|
|
{ path: '/entry-tracking',title: '入口跟踪', icon: IC.material },
|
|
{ path: '/material', title: '物料跟踪', icon: IC.material },
|
|
{ path: '/production', title: '实绩管理', icon: IC.production },
|
|
{ path: '/process-model', title: '工艺段模型', icon: IC.process },
|
|
{ path: '/tension-model', title: '张力模型', icon: IC.tension },
|
|
{ path: '/downtime', title: '停机管理', icon: IC.downtime },
|
|
{ path: '/inspection', title: '设备巡检', icon: IC.inspection },
|
|
{ path: '/quality', title: '质量管理', icon: IC.quality },
|
|
{ path: '/cost', title: '成本管理', icon: IC.capacity },
|
|
]
|
|
|
|
export default {
|
|
name: 'Layout',
|
|
data() {
|
|
return {
|
|
clock: '--:--:--',
|
|
l3Status: 'warn',
|
|
l3StatusText: 'L3 待机',
|
|
menuItems: MENU,
|
|
_timer: null,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({ user: 'auth/user' }),
|
|
},
|
|
mounted() {
|
|
this._timer = setInterval(() => {
|
|
this.clock = new Date().toTimeString().slice(0, 8)
|
|
}, 1000)
|
|
this.clock = new Date().toTimeString().slice(0, 8)
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this._timer)
|
|
},
|
|
methods: {
|
|
logout() {
|
|
this.$confirm('确认退出登录？', '提示', { type: 'warning' }).then(() => {
|
|
this.$store.dispatch('auth/logout')
|
|
this.$router.push('/login')
|
|
}).catch(() => {})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/assets/styles/variables';
|
|
|
|
.layout {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background: $bg-base;
|
|
}
|
|
|
|
// ─── TOP BAR ───
|
|
.top-bar {
|
|
height: 46px;
|
|
background: $bg-secondary;
|
|
border-bottom: 1px solid $border;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 14px;
|
|
gap: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.logo-mark {
|
|
width: 26px;
|
|
height: 26px;
|
|
background: $sms-teal;
|
|
color: $bg-base;
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: $text-primary;
|
|
letter-spacing: 1.8px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sys-title {
|
|
font-size: 11px;
|
|
color: $text-secondary;
|
|
border-left: 1px solid $border;
|
|
padding-left: 14px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.spacer { flex: 1; }
|
|
|
|
.status-pills {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.pill {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 2px 8px;
|
|
border-radius: 2px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: .5px;
|
|
text-transform: uppercase;
|
|
|
|
.dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
&.run { background: rgba($status-run,.12); color: $status-run; border: 1px solid rgba($status-run,.35); .dot { background: $status-run; } }
|
|
&.warn { background: rgba($status-warn,.12); color: $status-warn; border: 1px solid rgba($status-warn,.35); .dot { background: $status-warn; } }
|
|
&.stop { background: rgba($text-muted,.08); color: $text-muted; border: 1px solid $border; .dot { background: $text-muted; } }
|
|
}
|
|
|
|
.top-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 11px;
|
|
color: $text-secondary;
|
|
|
|
.divider { color: $border; }
|
|
.logout { cursor: pointer; color: $text-muted; transition: color .12s; &:hover { color: $sms-teal; } }
|
|
}
|
|
|
|
.clock {
|
|
font-family: $font-mono;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: $sms-teal;
|
|
min-width: 68px;
|
|
text-align: right;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
// ─── NAV BAR ───
|
|
.nav-bar {
|
|
height: 36px;
|
|
background: $bg-primary;
|
|
border-bottom: 1px solid $border;
|
|
display: flex;
|
|
align-items: stretch;
|
|
overflow-x: auto;
|
|
flex-shrink: 0;
|
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar { display: none; }
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 14px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: $text-secondary;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all .12s;
|
|
user-select: none;
|
|
|
|
&:hover { color: $text-primary; background: rgba($sms-teal, .05); }
|
|
&.active { color: $sms-teal; border-bottom-color: $sms-teal; background: rgba($sms-teal, .07); }
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 13px;
|
|
height: 13px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: .9;
|
|
|
|
::v-deep svg { width: 13px; height: 13px; }
|
|
}
|
|
|
|
// ─── MAIN AREA ───
|
|
.main-area {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
background: $bg-primary;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: $border transparent;
|
|
&::-webkit-scrollbar { width: 5px; }
|
|
&::-webkit-scrollbar-thumb { background: $border; border-radius: 1px; }
|
|
}
|
|
|
|
// ─── FOOTER ───
|
|
.footer {
|
|
height: 22px;
|
|
background: $bg-secondary;
|
|
border-top: 1px solid $border;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 14px;
|
|
gap: 18px;
|
|
font-size: 10px;
|
|
color: $text-muted;
|
|
flex-shrink: 0;
|
|
letter-spacing: .3px;
|
|
|
|
.fp { display: flex; align-items: center; gap: 5px; }
|
|
.dot {
|
|
width: 5px; height: 5px; border-radius: 50%; display: inline-block;
|
|
&.g { background: $status-run; }
|
|
&.y { background: $status-warn; }
|
|
&.r { background: $status-fault; }
|
|
}
|
|
}
|
|
</style>
|