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

style(frontend): 工艺线SVG浅色重绘 + 登录页改版 + 品牌名改为推拉酸洗线

Browse Source 
- Material 物料跟踪总图 SVG 全部重新配色：深色设备图改为浅色钢灰底，
  介质色保留（酸洗琥珀/漂洗青/烘干橙），当前设备与焊缝高亮改主题红
- 段位标签色加深以适配白底图例
- 登录页大改：左侧品牌 + 右侧白卡片，背景换工业钢厂实拍图 + 红色主题渐变蒙版
- 品牌名由 SIMATIC L2 改为「推拉酸洗线」（登录页与顶栏 logo）

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
wangyu
2026-06-29 10:52:08 +08:00
parent 8583f605bd
commit 2144f13b88
4 changed files with 257 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/src/assets/images/login-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 478 KiB

6
frontend/src/views/Layout.vue
View File

@@ -4,10 +4,10 @@
<!-- ─── TOP BAR ─── -->
<div class="top-bar">
<div class="logo">
<span class="logo-mark">S</span>
<span class="logo-text">SIMATIC L2</span>
<span class="logo-mark">酸</span>
<span class="logo-text">推拉酸洗线</span>
</div>
<div class="sys-title">推拉酸洗线 · L2 过程控制系统</div>
<div class="sys-title">二级过程控制系统</div>
<div class="spacer"></div>
<div class="status-pills">
<span class="pill run"><i class="dot"></i>机组运行</span>

266
frontend/src/views/Login.vue
View File

@@ -1,34 +1,49 @@
<template>
<div class="login-page">
<div class="login-panel">
<div class="login-header">
<div class="header-mark">S</div>
<div class="header-right">
<div class="header-title">SIMATIC L2</div>
<div class="header-sub">推拉酸洗线 过程控制系统</div>
<div class="login-overlay"></div>
<!-- 左侧品牌区 -->
<div class="login-brand">
<div class="brand-logo">
<div class="brand-mark">酸</div>
<div class="brand-word">
<div class="brand-title">推拉酸洗线</div>
<div class="brand-en">PUSH-PULL PICKLING LINE</div>
</div>
</div>
<div class="brand-slogan">二级过程控制系统</div>
<div class="brand-desc">物料跟踪 · 计划实绩 · 工艺模型 · 质量管理</div>
</div>
<div class="login-body">
<div class="field-group">
<div class="field-label">用户名</div>
<input v-model="form.username" class="kv-input" autocomplete="username" @keyup.enter="handleLogin" />
</div>
<div class="field-group">
<div class="field-label">密码</div>
<input v-model="form.password" type="password" class="kv-input" autocomplete="current-password" @keyup.enter="handleLogin" />
</div>
<div v-if="error" class="login-error">{{ error }}</div>
<button class="btn btn-primary fw" style="margin-top:18px;padding:7px;" :disabled="loading" @click="handleLogin">
{{ loading ? '验证中...' : '登录' }}
</button>
<!-- 右侧登录卡片 -->
<div class="login-card">
<div class="card-title">系统登录</div>
<div class="card-tip">请输入账号密码以继续</div>
<div class="field-group">
<div class="field-label">用户名</div>
<input v-model="form.username" class="login-input" autocomplete="username"
placeholder="请输入用户名" @keyup.enter="handleLogin" />
</div>
<div class="field-group">
<div class="field-label">密码</div>
<input v-model="form.password" type="password" class="login-input" autocomplete="current-password"
placeholder="请输入密码" @keyup.enter="handleLogin" />
</div>
<div class="login-footer">
<i class="dot g"></i>系统就绪
<span style="margin-left:auto;">v1.0.0</span>
<div v-if="error" class="login-error">{{ error }}</div>
<button class="login-btn" :disabled="loading" @click="handleLogin">
{{ loading ? '验证中…' : '登 录' }}
</button>
<div class="login-foot">
<span class="dot"></span>系统就绪
<span class="ver">v1.0.0</span>
</div>
</div>
<div class="copyright">推拉酸洗线 L2 MES · 过程控制系统</div>
</div>
</template>
@@ -67,101 +82,192 @@ export default {
@import '@/assets/styles/variables';
.login-page {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: $bg-base;
}
.login-panel {
width: 360px;
background: $bg-card;
border: 1px solid $border;
border-top: 3px solid $sms-teal;
border-radius: 2px;
justify-content: space-between;
padding: 0 9vw;
background: url('~@/assets/images/login-bg.jpg') center/cover no-repeat;
overflow: hidden;
}
.login-header {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px;
background: $bg-panel;
border-bottom: 1px solid $border;
// 主题色渐变蒙版（左深红 → 右半透明，保证文字与卡片可读）
.login-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(105deg, rgba($sms-teal, .82) 0%, rgba(28, 22, 24, .72) 46%, rgba(20, 16, 18, .55) 100%);
}
.header-mark {
width: 36px;
height: 36px;
background: $sms-teal;
color: $bg-base;
font-size: 18px;
// ─── 左侧品牌 ───
.login-brand {
position: relative;
z-index: 1;
color: #fff;
max-width: 480px;
}
.brand-logo {
display: flex;
align-items: center;
gap: 16px;
}
.brand-mark {
width: 60px;
height: 60px;
background: #fff;
color: $sms-teal;
font-size: 32px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
flex-shrink: 0;
}
.header-title {
font-size: 14px;
font-weight: 700;
color: $text-primary;
.brand-title {
font-size: 38px;
font-weight: 800;
letter-spacing: 6px;
line-height: 1.1;
}
.brand-en {
font-size: 12px;
letter-spacing: 3px;
opacity: .8;
margin-top: 4px;
}
.brand-slogan {
margin-top: 26px;
font-size: 20px;
font-weight: 600;
letter-spacing: 2px;
}
.header-sub {
font-size: 10px;
color: $text-secondary;
margin-top: 3px;
letter-spacing: .3px;
.brand-desc {
margin-top: 12px;
font-size: 14px;
letter-spacing: 1px;
opacity: .85;
}
.login-body {
padding: 24px;
// ─── 右侧登录卡片 ───
.login-card {
position: relative;
z-index: 1;
width: 380px;
background: #fff;
border-radius: 12px;
border-top: 4px solid $sms-teal;
padding: 40px 36px 28px;
box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.card-title {
font-size: 22px;
font-weight: 700;
color: $text-primary;
letter-spacing: 1px;
}
.card-tip {
margin-top: 6px;
font-size: 13px;
color: $text-muted;
margin-bottom: 26px;
}
.field-group {
margin-bottom: 14px;
margin-bottom: 18px;
.field-label {
font-size: 10px;
font-weight: 700;
font-size: 13px;
color: $text-secondary;
text-transform: uppercase;
letter-spacing: .6px;
margin-bottom: 6px;
margin-bottom: 8px;
}
}
.kv-input { padding: 7px 9px; font-size: 13px; }
.login-input {
width: 100%;
height: 42px;
padding: 0 14px;
font-size: 14px;
color: $text-primary;
background: $bg-panel;
border: 1px solid $border;
border-radius: 8px;
outline: none;
transition: all .15s;
&::placeholder { color: $text-muted; }
&:focus {
background: #fff;
border-color: $sms-teal;
box-shadow: 0 0 0 3px rgba($sms-teal, .12);
}
}
.login-error {
margin-top: 8px;
font-size: 11px;
font-size: 13px;
color: $accent-red;
padding: 5px 8px;
padding: 8px 12px;
background: rgba($accent-red, .08);
border-left: 2px solid $accent-red;
border-radius: 6px;
margin-bottom: 14px;
}
.login-footer {
padding: 8px 24px;
background: $bg-panel;
border-top: 1px solid $border;
font-size: 10px;
color: $text-muted;
.login-btn {
width: 100%;
height: 44px;
margin-top: 8px;
font-size: 16px;
font-weight: 600;
letter-spacing: 4px;
color: #fff;
background: $sms-teal;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all .15s;
&:hover { background: $sms-teal-dim; box-shadow: 0 6px 16px rgba($sms-teal, .35); }
&:active { transform: translateY(1px); }
&:disabled { opacity: .6; cursor: not-allowed; }
}
.login-foot {
display: flex;
align-items: center;
gap: 6px;
letter-spacing: .3px;
gap: 7px;
margin-top: 22px;
font-size: 12px;
color: $text-muted;
.dot {
width: 5px; height: 5px; border-radius: 50%; display: inline-block;
&.g { background: $status-run; }
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: $status-run; box-shadow: 0 0 6px rgba($status-run, .6); }
.ver { margin-left: auto; }
}
.copyright {
position: absolute;
bottom: 22px;
left: 0;
right: 0;
text-align: center;
z-index: 1;
font-size: 12px;
color: rgba(255, 255, 255, .65);
letter-spacing: 1px;
}
// 窄屏：隐藏品牌区，卡片居中
@media (max-width: 900px) {
.login-page { justify-content: center; padding: 0 20px; }
.login-brand { display: none; }
}
</style>

136
frontend/src/views/Material.vue
View File

@@ -72,7 +72,7 @@
<div class="card-header">推拉酸洗线 - 物料跟踪总图</div>
<div class="line-body">
<svg viewBox="0 0 1900 305" preserveAspectRatio="xMidYMid meet" class="line-svg">
<rect x="0" y="0" width="1900" height="305" fill="#0a1218" />
<rect x="0" y="0" width="1900" height="305" fill="#f2f5f9" />
<!-- 段位标签带 -->
<g v-for="s in sections" :key="'sec-'+s.name">
@@ -84,12 +84,12 @@
<!-- 顶部标签 -->
<g v-for="eq in equipments" :key="'lab-'+eq.k" font-family="Arial,sans-serif">
<text :x="eq.x" y="40" text-anchor="middle" font-size="10.5" fill="#c8d4e0">{{ eq.label }}</text>
<text :x="eq.x" y="40" text-anchor="middle" font-size="10.5" fill="#303133">{{ eq.label }}</text>
</g>
<!-- 主带钢线 -->
<path d="M 40 185 L 1860 185" stroke="#5a6a75" stroke-width="3" fill="none"/>
<path d="M 40 185 L 1860 185" stroke="#aabbcc" stroke-width="1.2" fill="none" stroke-dasharray="6 10">
<path d="M 40 185 L 1860 185" stroke="#9aa4b0" stroke-width="3" fill="none"/>
<path d="M 40 185 L 1860 185" stroke="#c03639" stroke-width="1.4" fill="none" stroke-dasharray="6 10">
<animate attributeName="stroke-dashoffset" from="16" to="0" dur="0.7s" repeatCount="indefinite"/>
</path>
@@ -97,62 +97,62 @@
<g v-for="eq in equipments" :key="eq.k" :transform="`translate(${eq.x}, 185)`">
<!-- 开卷机 -->
<template v-if="eq.type==='coiler'">
<circle r="38" fill="#1a232c" stroke="#3a4a55" stroke-width="2"/>
<circle r="22" fill="#0a1218" stroke="#5a6a75" stroke-width="1.5"/>
<circle r="8" fill="#2a3a48" stroke="#5a7090" stroke-width="1"/>
<path d="M-38 0 a38 38 0 0 1 76 0" stroke="#00c8ff" stroke-width="1" fill="none" opacity="0.5">
<circle r="38" fill="#e9eef4" stroke="#aab4c2" stroke-width="2"/>
<circle r="22" fill="#f2f5f9" stroke="#9aa4b0" stroke-width="1.5"/>
<circle r="8" fill="#cdd6e0" stroke="#9aa4b0" stroke-width="1"/>
<path d="M-38 0 a38 38 0 0 1 76 0" stroke="#c03639" stroke-width="1" fill="none" opacity="0.5">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"/>
</path>
<text y="58" text-anchor="middle" font-size="10" fill="#b8c4cf">DC-1</text>
<text y="58" text-anchor="middle" font-size="10" fill="#5b6470">DC-1</text>
</template>
<!-- 九辊矫直机：5上4下 -->
<template v-else-if="eq.type==='rolls9'">
<rect x="-44" y="-26" width="88" height="52" fill="#1a232c" stroke="#3a4a55" stroke-width="1.5" rx="3"/>
<rect x="-44" y="-26" width="88" height="52" fill="#e9eef4" stroke="#aab4c2" stroke-width="1.5" rx="3"/>
<g v-for="i in 5" :key="'t'+i">
<circle :cx="-36 + (i-1)*18" cy="-10" r="6" fill="#2a3540" stroke="#7090a8" stroke-width="1"/>
<circle :cx="-36 + (i-1)*18" cy="-10" r="6" fill="#dde4ec" stroke="#8b97a7" stroke-width="1"/>
</g>
<g v-for="i in 4" :key="'b'+i">
<circle :cx="-27 + (i-1)*18" cy="10" r="6" fill="#2a3540" stroke="#7090a8" stroke-width="1"/>
<circle :cx="-27 + (i-1)*18" cy="10" r="6" fill="#dde4ec" stroke="#8b97a7" stroke-width="1"/>
</g>
<text y="44" text-anchor="middle" font-size="9" fill="#b8c4cf">STR-9</text>
<text y="44" text-anchor="middle" font-size="9" fill="#5b6470">STR-9</text>
</template>
<!-- 切头/切尾剪 -->
<template v-else-if="eq.type==='shear'">
<rect x="-30" y="-26" width="60" height="52" fill="#1a232c" stroke="#3a4a55" stroke-width="1.5" rx="2"/>
<rect x="-30" y="-26" width="60" height="52" fill="#e9eef4" stroke="#aab4c2" stroke-width="1.5" rx="2"/>
<line x1="-18" y1="-16" x2="18" y2="16" stroke="#da3633" stroke-width="2.2"/>
<line x1="-18" y1="16" x2="18" y2="-16" stroke="#da3633" stroke-width="2.2"/>
<circle cx="-18" cy="-16" r="3" fill="#da3633"/>
<circle cx="18" cy="-16" r="3" fill="#da3633"/>
<circle cx="0" cy="0" r="3" fill="#ffdd44"/>
<text y="44" text-anchor="middle" font-size="9" fill="#b8c4cf">{{ eq.code }}</text>
<circle cx="0" cy="0" r="3" fill="#c03639"/>
<text y="44" text-anchor="middle" font-size="9" fill="#5b6470">{{ eq.code }}</text>
</template>
<!-- 酸洗槽 -->
<template v-else-if="eq.type==='acid'">
<path d="M -32 -24 L 32 -24 L 28 26 L -28 26 Z" fill="#3a2a18" stroke="#a06030" stroke-width="2"/>
<path d="M -32 -24 L 32 -24 L 28 26 L -28 26 Z" fill="#f0e3cf" stroke="#cf9a5a" stroke-width="2"/>
<path d="M -30 -10 L 30 -10 L 27 24 L -27 24 Z" fill="#ffaa44" opacity="0.55">
<animate attributeName="opacity" values="0.5;0.7;0.5" dur="2.5s" repeatCount="indefinite"/>
</path>
<path d="M -22 -10 q 4 -6 8 0 t 8 0 t 8 0 t 8 0" stroke="#ffd28a" stroke-width="1" fill="none" opacity="0.7"/>
<!-- 蒸汽 -->
<g opacity="0.6">
<circle cx="-12" cy="-30" r="3" fill="#cccccc">
<circle cx="-12" cy="-30" r="3" fill="#b8c0cc">
<animate attributeName="cy" values="-30;-46;-30" dur="2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.6;0;0.6" dur="2s" repeatCount="indefinite"/>
</circle>
<circle cx="6" cy="-32" r="2.5" fill="#cccccc">
<circle cx="6" cy="-32" r="2.5" fill="#b8c0cc">
<animate attributeName="cy" values="-32;-50;-32" dur="2.3s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.5;0;0.5" dur="2.3s" repeatCount="indefinite"/>
</circle>
</g>
<text x="0" y="44" text-anchor="middle" font-size="9" fill="#ffaa44">{{ acid[eq.idx].temp.toFixed(0) }}°C · {{ acid[eq.idx].conc.toFixed(0) }}g/L</text>
<text x="0" y="44" text-anchor="middle" font-size="9" fill="#c97e2a">{{ acid[eq.idx].temp.toFixed(0) }}°C · {{ acid[eq.idx].conc.toFixed(0) }}g/L</text>
</template>
<!-- 漂洗段 -->
<template v-else-if="eq.type==='rinse'">
<path d="M -34 -24 L 34 -24 L 30 26 L -30 26 Z" fill="#142a2e" stroke="#4080a0" stroke-width="2"/>
<path d="M -34 -24 L 34 -24 L 30 26 L -30 26 Z" fill="#e2eef4" stroke="#5a9ec0" stroke-width="2"/>
<path d="M -32 -8 L 32 -8 L 29 24 L -29 24 Z" fill="#3aa0c8" opacity="0.55">
<animate attributeName="opacity" values="0.5;0.7;0.5" dur="2.5s" repeatCount="indefinite"/>
</path>
@@ -162,8 +162,8 @@
<!-- 热风烘干段 -->
<template v-else-if="eq.type==='dryer'">
<rect x="-36" y="-26" width="72" height="52" fill="#2a2010" stroke="#a08030" stroke-width="2" rx="3"/>
<g stroke="#ffaa00" stroke-width="1.6" fill="none">
<rect x="-36" y="-26" width="72" height="52" fill="#f4ead2" stroke="#a08030" stroke-width="2" rx="3"/>
<g stroke="#e89426" stroke-width="1.6" fill="none">
<path d="M -26 -12 q 4 -6 8 0 t 8 0 t 8 0 t 8 0 t 8 0">
<animate attributeName="opacity" values="0.4;1;0.4" dur="1.4s" repeatCount="indefinite"/>
</path>
@@ -171,52 +171,52 @@
<animate attributeName="opacity" values="0.7;0.3;0.7" dur="1.4s" repeatCount="indefinite"/>
</path>
</g>
<text y="44" text-anchor="middle" font-size="9" fill="#ffaa00">{{ dryer.t1.toFixed(0) }}/{{ dryer.t2.toFixed(0) }}/{{ dryer.t3.toFixed(0) }}°C</text>
<text y="44" text-anchor="middle" font-size="9" fill="#e89426">{{ dryer.t1.toFixed(0) }}/{{ dryer.t2.toFixed(0) }}/{{ dryer.t3.toFixed(0) }}°C</text>
</template>
<!-- 夹送辊 / 挤干辊 (两辊上下) -->
<template v-else-if="eq.type==='pinch'">
<rect x="-30" y="-26" width="60" height="52" fill="#1a232c" stroke="#3a4a55" stroke-width="1.5" rx="2"/>
<ellipse cx="0" cy="-12" rx="22" ry="6" fill="#2a3540" stroke="#7090a8" stroke-width="1.2"/>
<ellipse cx="0" cy="12" rx="22" ry="6" fill="#2a3540" stroke="#7090a8" stroke-width="1.2"/>
<line x1="-22" y1="-12" x2="-22" y2="12" stroke="#5a6a75" stroke-width="1"/>
<line x1="22" y1="-12" x2="22" y2="12" stroke="#5a6a75" stroke-width="1"/>
<text y="44" text-anchor="middle" font-size="9" fill="#b8c4cf">{{ eq.code }}</text>
<rect x="-30" y="-26" width="60" height="52" fill="#e9eef4" stroke="#aab4c2" stroke-width="1.5" rx="2"/>
<ellipse cx="0" cy="-12" rx="22" ry="6" fill="#dde4ec" stroke="#8b97a7" stroke-width="1.2"/>
<ellipse cx="0" cy="12" rx="22" ry="6" fill="#dde4ec" stroke="#8b97a7" stroke-width="1.2"/>
<line x1="-22" y1="-12" x2="-22" y2="12" stroke="#9aa4b0" stroke-width="1"/>
<line x1="22" y1="-12" x2="22" y2="12" stroke="#9aa4b0" stroke-width="1"/>
<text y="44" text-anchor="middle" font-size="9" fill="#5b6470">{{ eq.code }}</text>
</template>
<!-- 活套坑 -->
<template v-else-if="eq.type==='loop'">
<rect x="-40" y="-26" width="80" height="58" fill="#1a232c" stroke="#3a4a55" stroke-width="2" rx="3"/>
<path d="M -32 -16 Q -20 32 -8 -16 Q 4 32 16 -16 Q 28 32 36 -16" stroke="#00c8ff" stroke-width="1.8" fill="none">
<rect x="-40" y="-26" width="80" height="58" fill="#e9eef4" stroke="#aab4c2" stroke-width="2" rx="3"/>
<path d="M -32 -16 Q -20 32 -8 -16 Q 4 32 16 -16 Q 28 32 36 -16" stroke="#c03639" stroke-width="1.8" fill="none">
<animate attributeName="opacity" values="0.6;1;0.6" dur="1.6s" repeatCount="indefinite"/>
</path>
<text y="48" text-anchor="middle" font-size="9" fill="#b8c4cf">LOOP</text>
<text y="48" text-anchor="middle" font-size="9" fill="#5b6470">LOOP</text>
</template>
<!-- 三辊张力装置 -->
<template v-else-if="eq.type==='tension3'">
<rect x="-32" y="-26" width="64" height="52" fill="#1a232c" stroke="#3a4a55" stroke-width="1.5" rx="3"/>
<circle cx="-16" cy="-8" r="8" fill="#2a3540" stroke="#7090a8" stroke-width="1.2"/>
<circle cx="16" cy="-8" r="8" fill="#2a3540" stroke="#7090a8" stroke-width="1.2"/>
<circle cx="0" cy="12" r="9" fill="#2a3540" stroke="#7090a8" stroke-width="1.2"/>
<text y="44" text-anchor="middle" font-size="9" fill="#b8c4cf">TEN-3</text>
<rect x="-32" y="-26" width="64" height="52" fill="#e9eef4" stroke="#aab4c2" stroke-width="1.5" rx="3"/>
<circle cx="-16" cy="-8" r="8" fill="#dde4ec" stroke="#8b97a7" stroke-width="1.2"/>
<circle cx="16" cy="-8" r="8" fill="#dde4ec" stroke="#8b97a7" stroke-width="1.2"/>
<circle cx="0" cy="12" r="9" fill="#dde4ec" stroke="#8b97a7" stroke-width="1.2"/>
<text y="44" text-anchor="middle" font-size="9" fill="#5b6470">TEN-3</text>
</template>
<!-- 平整机 -->
<template v-else-if="eq.type==='leveler'">
<rect x="-34" y="-26" width="68" height="52" fill="#1a232c" stroke="#3a4a55" stroke-width="2" rx="2"/>
<circle cx="0" cy="-14" r="11" fill="#3a4a55" stroke="#90a0b0" stroke-width="1.4"/>
<circle cx="0" cy="14" r="11" fill="#3a4a55" stroke="#90a0b0" stroke-width="1.4"/>
<line x1="-28" y1="0" x2="-12" y2="0" stroke="#7090a8" stroke-width="1"/>
<line x1="12" y1="0" x2="28" y2="0" stroke="#7090a8" stroke-width="1"/>
<text y="44" text-anchor="middle" font-size="9" fill="#b8c4cf">SPM</text>
<rect x="-34" y="-26" width="68" height="52" fill="#e9eef4" stroke="#aab4c2" stroke-width="2" rx="2"/>
<circle cx="0" cy="-14" r="11" fill="#aab4c2" stroke="#8b97a7" stroke-width="1.4"/>
<circle cx="0" cy="14" r="11" fill="#aab4c2" stroke="#8b97a7" stroke-width="1.4"/>
<line x1="-28" y1="0" x2="-12" y2="0" stroke="#8b97a7" stroke-width="1"/>
<line x1="12" y1="0" x2="28" y2="0" stroke="#8b97a7" stroke-width="1"/>
<text y="44" text-anchor="middle" font-size="9" fill="#5b6470">SPM</text>
</template>
<!-- 静电涂油机 -->
<template v-else-if="eq.type==='oiler'">
<rect x="-26" y="-26" width="52" height="52" fill="#1a232c" stroke="#3a4a55" stroke-width="1.5" rx="2"/>
<path d="M 0 -14 L -10 4 L 10 4 Z" fill="#3a4a55" stroke="#90a0b0" stroke-width="1"/>
<g fill="#88ccff">
<rect x="-26" y="-26" width="52" height="52" fill="#e9eef4" stroke="#aab4c2" stroke-width="1.5" rx="2"/>
<path d="M 0 -14 L -10 4 L 10 4 Z" fill="#aab4c2" stroke="#8b97a7" stroke-width="1"/>
<g fill="#5a9bd4">
<circle cx="-6" cy="10" r="1.6">
<animate attributeName="cy" values="6;22;6" dur="1.2s" repeatCount="indefinite"/>
</circle>
@@ -227,49 +227,49 @@
<animate attributeName="cy" values="6;22;6" dur="1.3s" repeatCount="indefinite"/>
</circle>
</g>
<text y="44" text-anchor="middle" font-size="9" fill="#b8c4cf">EOL</text>
<text y="44" text-anchor="middle" font-size="9" fill="#5b6470">EOL</text>
</template>
<!-- 卷取机 -->
<template v-else-if="eq.type==='recoiler'">
<circle r="38" fill="#1a232c" stroke="#3a4a55" stroke-width="2"/>
<circle r="22" fill="#0a1218" stroke="#5a6a75" stroke-width="1.5"/>
<circle r="8" fill="#2a3a48" stroke="#5a7090" stroke-width="1"/>
<path d="M-38 0 a38 38 0 0 1 76 0" stroke="#00c8ff" stroke-width="1" fill="none" opacity="0.5">
<circle r="38" fill="#e9eef4" stroke="#aab4c2" stroke-width="2"/>
<circle r="22" fill="#f2f5f9" stroke="#9aa4b0" stroke-width="1.5"/>
<circle r="8" fill="#cdd6e0" stroke="#9aa4b0" stroke-width="1"/>
<path d="M-38 0 a38 38 0 0 1 76 0" stroke="#c03639" stroke-width="1" fill="none" opacity="0.5">
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="3s" repeatCount="indefinite"/>
</path>
<text y="58" text-anchor="middle" font-size="10" fill="#b8c4cf">REC-1</text>
<text y="58" text-anchor="middle" font-size="10" fill="#5b6470">REC-1</text>
</template>
<!-- 当前设备高亮光环 -->
<circle v-if="eq.k === currentEquipment.k" r="48" fill="none" stroke="#ffdd44" stroke-width="2" stroke-dasharray="4 4" opacity="0.7">
<circle v-if="eq.k === currentEquipment.k" r="48" fill="none" stroke="#c03639" stroke-width="2" stroke-dasharray="4 4" opacity="0.7">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="6s" repeatCount="indefinite"/>
</circle>
</g>
<!-- 焊缝标记 -->
<g :transform="`translate(${weldX}, 185)`">
<circle r="11" fill="#ffdd00" opacity="0.35">
<circle r="11" fill="#ff8c1a" opacity="0.35">
<animate attributeName="r" values="9;22;9" dur="1.0s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.7;0.05;0.7" dur="1.0s" repeatCount="indefinite"/>
</circle>
<circle r="6" fill="#ffee44">
<animate attributeName="fill" values="#ffee44;#ff7700;#ffee44" dur="0.6s" repeatCount="indefinite"/>
<circle r="6" fill="#ff8c1a">
<animate attributeName="fill" values="#ff8c1a;#ff7700;#ff8c1a" dur="0.6s" repeatCount="indefinite"/>
</circle>
<text y="-18" text-anchor="middle" font-size="11" fill="#ffdd44" font-weight="bold">WELD</text>
<text y="-18" text-anchor="middle" font-size="11" fill="#c03639" font-weight="bold">WELD</text>
</g>
<!-- 图例 -->
<g transform="translate(20,290)" font-size="10" fill="#8b949e">
<circle cx="6" cy="-3" r="5" fill="#ffee44"/>
<g transform="translate(20,290)" font-size="10" fill="#606266">
<circle cx="6" cy="-3" r="5" fill="#ff8c1a"/>
<text x="18" y="0">焊缝位置 {{ (weld.position * 100).toFixed(1) }}%</text>
<rect x="160" y="-7" width="12" height="8" fill="#ffaa44" opacity="0.5"/>
<text x="178" y="0">酸洗液</text>
<rect x="230" y="-7" width="12" height="8" fill="#3aa0c8" opacity="0.5"/>
<text x="248" y="0">漂洗水</text>
<circle cx="310" cy="-3" r="5" fill="none" stroke="#ffdd44" stroke-width="1.5" stroke-dasharray="2 2"/>
<circle cx="310" cy="-3" r="5" fill="none" stroke="#c03639" stroke-width="1.5" stroke-dasharray="2 2"/>
<text x="322" y="0">当前设备</text>
<text x="420" y="0" fill="#aabbcc">— — 带钢运行方向 →</text>
<text x="420" y="0" fill="#909399">— — 带钢运行方向 →</text>
</g>
</svg>
</div>
@@ -360,11 +360,11 @@ const EQUIPMENTS = [
]
const SECTION_COLORS = {
'入口段': '#5a8fc8',
'酸洗段': '#ffaa44',
'清洗段': '#3aa0c8',
'烘干段': '#e87a3a',
'出口段': '#88c070',
'入口段': '#4a7fbe',
'酸洗段': '#d98a2a',
'清洗段': '#2f93b8',
'烘干段': '#d96a2a',
'出口段': '#5ba84e',
}
// 默认辊缝值 (mm)
@@ -690,7 +690,7 @@ export default {
.status-item .kv-unit { color: $text-muted; font-size: 10px; margin-left: 2px; }
.line-wrap { padding: 0; }
.line-body { padding: 6px 10px 10px; background: #0a1218; }
.line-body { padding: 6px 10px 10px; background: #f2f5f9; }
.line-svg { width: 100%; height: 305px; display: block; }
.split-row { display: grid; grid-template-columns: 1fr 3fr; gap: 10px; align-items: stretch; }