style: 西门子 WinCC 工业风格重设计
- 左侧边栏导航替换顶部横向导航 - 色调改为石油蓝绿(#00a3be)，去除霓虹蓝 - 卡片头部加左侧色带 accent，去除圆角 - Badge 改为矩形工业风，全大写标签 - 按钮、输入框统一 2px radius - 导航图标改为 SVG 几何图形替代纯文字缩写
This commit is contained in:
@@ -14,19 +14,21 @@
|
||||
--accent-yellow: #{$accent-yellow};
|
||||
--accent-red: #{$accent-red};
|
||||
--accent-cyan: #{$accent-cyan};
|
||||
--sms-teal: #{$sms-teal};
|
||||
--sms-blue: #{$sms-blue};
|
||||
--sms-highlight: #{$sms-highlight};
|
||||
--status-run: #{$status-run};
|
||||
--status-warn: #{$status-warn};
|
||||
--status-fault: #{$status-fault};
|
||||
--font-mono: #{$font-mono};
|
||||
// 向后兼容旧变量名
|
||||
--sms-highlight: #{$sms-teal};
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: $font-main;
|
||||
background: $bg-primary;
|
||||
background: $bg-base;
|
||||
color: $text-primary;
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -35,54 +37,59 @@ body {
|
||||
.card {
|
||||
background: $bg-card;
|
||||
border: 1px solid $border;
|
||||
border-radius: 6px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 14px;
|
||||
padding: 7px 12px;
|
||||
background: $bg-panel;
|
||||
border-bottom: 1px solid $border;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: $sms-highlight;
|
||||
letter-spacing: .4px;
|
||||
border-left: 3px solid $sms-teal;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: $text-primary;
|
||||
letter-spacing: .6px;
|
||||
text-transform: uppercase;
|
||||
|
||||
.ch-badge {
|
||||
margin-left: auto;
|
||||
font-size: 10px;
|
||||
padding: 1px 8px;
|
||||
border-radius: 8px;
|
||||
background: rgba(0,200,255,.1);
|
||||
color: $sms-highlight;
|
||||
border: 1px solid rgba(0,200,255,.3);
|
||||
padding: 1px 6px;
|
||||
border-radius: 1px;
|
||||
background: rgba($sms-teal, .12);
|
||||
color: $sms-teal;
|
||||
border: 1px solid rgba($sms-teal, .3);
|
||||
font-weight: 600;
|
||||
letter-spacing: .4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-body { padding: 12px 14px; }
|
||||
&-body { padding: 12px; }
|
||||
}
|
||||
|
||||
// ─── 指标卡 ───
|
||||
.metric-box {
|
||||
background: $bg-panel;
|
||||
border: 1px solid $border;
|
||||
border-radius: 5px;
|
||||
padding: 10px 14px;
|
||||
border-top: 2px solid $sms-teal;
|
||||
border-radius: 2px;
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.mb-label { font-size: 11px; color: $text-secondary; }
|
||||
.mb-label { font-size: 10px; color: $text-secondary; text-transform: uppercase; letter-spacing: .5px; }
|
||||
.mb-value {
|
||||
font-size: 22px;
|
||||
font-size: 24px;
|
||||
font-family: $font-mono;
|
||||
font-weight: 700;
|
||||
color: $sms-highlight;
|
||||
line-height: 1;
|
||||
color: $sms-teal;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.mb-unit { font-size: 11px; color: $text-muted; }
|
||||
.mb-unit { font-size: 10px; color: $text-muted; }
|
||||
}
|
||||
|
||||
// ─── 数据表格 ───
|
||||
@@ -92,25 +99,29 @@ body {
|
||||
font-size: 12px;
|
||||
|
||||
th {
|
||||
background: $bg-panel;
|
||||
background: $bg-secondary;
|
||||
color: $text-secondary;
|
||||
font-weight: 600;
|
||||
padding: 7px 10px;
|
||||
font-weight: 700;
|
||||
padding: 6px 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid $border;
|
||||
border-bottom: 1px solid $border-light;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid rgba(48,54,61,.5);
|
||||
border-bottom: 1px solid $border;
|
||||
color: $text-primary;
|
||||
font-family: $font-mono;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
tr:hover td { background: rgba(255,255,255,.02); }
|
||||
tr:hover td { background: rgba($sms-teal, .04); }
|
||||
|
||||
.td-num { color: $sms-highlight; }
|
||||
.td-num { color: $sms-teal; }
|
||||
.td-ok { color: $accent-green; }
|
||||
.td-warn { color: $accent-yellow; }
|
||||
.td-err { color: $accent-red; }
|
||||
@@ -119,87 +130,119 @@ body {
|
||||
|
||||
.table-scroll {
|
||||
overflow-x: auto;
|
||||
&::-webkit-scrollbar { height: 4px; }
|
||||
&::-webkit-scrollbar-thumb { background: $border; }
|
||||
&::-webkit-scrollbar { height: 3px; }
|
||||
&::-webkit-scrollbar-thumb { background: $border-light; }
|
||||
}
|
||||
|
||||
// ─── Badge ───
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 1px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 1px 7px;
|
||||
border-radius: 1px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .4px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&-green { background: #1a3a1f; color: $accent-green; border: 1px solid $accent-green; }
|
||||
&-yellow { background: #3a2a00; color: $accent-yellow; border: 1px solid $accent-yellow; }
|
||||
&-red { background: #3a0a0a; color: $accent-red; border: 1px solid $accent-red; }
|
||||
&-blue { background: rgba(0,120,212,.15); color: $sms-highlight; border: 1px solid rgba(0,200,255,.3); }
|
||||
&-gray { background: #222; color: $text-muted; border: 1px solid $border; }
|
||||
&-green { background: rgba($accent-green, .15); color: $accent-green; border-left: 2px solid $accent-green; }
|
||||
&-yellow { background: rgba($accent-yellow,.15); color: $accent-yellow; border-left: 2px solid $accent-yellow; }
|
||||
&-red { background: rgba($accent-red, .15); color: $accent-red; border-left: 2px solid $accent-red; }
|
||||
&-blue { background: rgba($sms-teal, .15); color: $sms-teal; border-left: 2px solid $sms-teal; }
|
||||
&-gray { background: rgba($text-muted, .1); color: $text-muted; border-left: 2px solid $text-muted; }
|
||||
}
|
||||
|
||||
// ─── 按钮 ───
|
||||
.btn {
|
||||
padding: 5px 14px;
|
||||
border-radius: 4px;
|
||||
padding: 4px 14px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all .15s;
|
||||
transition: all .12s;
|
||||
user-select: none;
|
||||
font-family: $font-main;
|
||||
letter-spacing: .3px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&-primary { background: $sms-blue; border-color: $sms-blue; color: #fff; &:hover { background: #1086e0; } }
|
||||
&-success { background: #1a3a1f; border-color: $accent-green; color: $accent-green; &:hover { background: $accent-green; color: #000; } }
|
||||
&-danger { background: #3a0a0a; border-color: $accent-red; color: $accent-red; }
|
||||
&-outline { background: transparent; border-color: $border; color: $text-secondary; &:hover { border-color: $sms-highlight; color: $sms-highlight; } }
|
||||
&-primary {
|
||||
background: $sms-blue;
|
||||
border-color: $sms-blue;
|
||||
color: #fff;
|
||||
&:hover { background: lighten($sms-blue, 8%); }
|
||||
&:disabled { opacity: .5; cursor: not-allowed; }
|
||||
}
|
||||
&-success {
|
||||
background: rgba($accent-green, .12);
|
||||
border-color: $accent-green;
|
||||
color: $accent-green;
|
||||
&:hover { background: rgba($accent-green, .22); }
|
||||
}
|
||||
&-danger {
|
||||
background: rgba($accent-red, .12);
|
||||
border-color: $accent-red;
|
||||
color: $accent-red;
|
||||
}
|
||||
&-outline {
|
||||
background: transparent;
|
||||
border-color: $border-light;
|
||||
color: $text-secondary;
|
||||
&:hover { border-color: $sms-teal; color: $sms-teal; }
|
||||
&:disabled { opacity: .4; cursor: not-allowed; }
|
||||
}
|
||||
&.fw { width: 100%; }
|
||||
}
|
||||
|
||||
// ─── 输入框 ───
|
||||
.kv-input {
|
||||
background: $bg-input;
|
||||
border: 1px solid $border;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $border-light;
|
||||
border-radius: 2px;
|
||||
color: $text-primary;
|
||||
font-family: $font-mono;
|
||||
font-size: 12px;
|
||||
padding: 3px 7px;
|
||||
padding: 4px 8px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
transition: border-color .15s;
|
||||
&:focus { border-color: $accent-blue; }
|
||||
transition: border-color .12s;
|
||||
|
||||
&:focus { border-color: $sms-teal; box-shadow: 0 0 0 1px rgba($sms-teal, .2); }
|
||||
&:disabled { opacity: .5; color: $text-muted; }
|
||||
|
||||
&[type="number"] { -moz-appearance: textfield; &::-webkit-inner-spin-button { display: none; } }
|
||||
}
|
||||
|
||||
select.kv-input option { background: $bg-panel; }
|
||||
textarea.kv-input { resize: vertical; min-height: 64px; }
|
||||
|
||||
// ─── KV 参数行 ───
|
||||
.kv-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; }
|
||||
.kv-label { color: $text-secondary; font-size: 12px; white-space: nowrap; }
|
||||
.kv-value { font-family: $font-mono; font-size: 12px; color: $sms-highlight; font-weight: 600; }
|
||||
.kv-unit { color: $text-muted; font-size: 11px; }
|
||||
.kv-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; }
|
||||
.kv-label { color: $text-secondary; font-size: 11px; white-space: nowrap; letter-spacing: .2px; }
|
||||
.kv-value { font-family: $font-mono; font-size: 12px; color: $sms-teal; font-weight: 600; }
|
||||
.kv-unit { color: $text-muted; font-size: 10px; }
|
||||
|
||||
// ─── 进度条 ───
|
||||
.prog-bar-wrap { background: #111; border-radius: 3px; height: 6px; overflow: hidden; }
|
||||
.prog-bar-fill { height: 100%; border-radius: 3px; transition: width .4s; }
|
||||
.prog-bar-wrap { background: $bg-secondary; border-radius: 1px; height: 5px; overflow: hidden; }
|
||||
.prog-bar-fill { height: 100%; border-radius: 1px; transition: width .4s; }
|
||||
|
||||
// ─── 分区标题 ───
|
||||
.sec-title {
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: $text-muted;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.2px;
|
||||
letter-spacing: 1.4px;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
|
||||
// ─── Grid helpers ───
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
|
||||
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
|
||||
.grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
|
||||
.section-row { display: flex; gap: 14px; > .card { flex: 1; min-width: 0; } }
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
|
||||
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
|
||||
.grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
|
||||
.section-row { display: flex; gap: 12px; > .card { flex: 1; min-width: 0; } }
|
||||
.flex-row { display: flex; gap: 10px; align-items: center; }
|
||||
.flex-col { display: flex; flex-direction: column; gap: 8px; }
|
||||
.flex-between{ display: flex; justify-content: space-between; align-items: center; }
|
||||
@@ -208,53 +251,59 @@ body {
|
||||
.fw { width: 100%; }
|
||||
|
||||
// ─── Element UI 暗色覆写 ───
|
||||
.el-loading-mask { background: rgba($bg-card, .7) !important; }
|
||||
.el-loading-spinner .path { stroke: $sms-teal !important; }
|
||||
|
||||
.el-dialog {
|
||||
background: $bg-card !important;
|
||||
border: 1px solid $border !important;
|
||||
border-radius: 6px !important;
|
||||
border-radius: 2px !important;
|
||||
|
||||
&__header { background: $bg-panel; border-bottom: 1px solid $border; padding: 12px 16px; }
|
||||
&__title { color: $sms-highlight !important; font-size: 13px; font-weight: 600; }
|
||||
&__header { background: $bg-panel; border-bottom: 1px solid $border; border-left: 3px solid $sms-teal; padding: 10px 14px; }
|
||||
&__title { color: $text-primary !important; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
|
||||
&__headerbtn .el-dialog__close { color: $text-secondary !important; }
|
||||
&__body { background: $bg-card; color: $text-primary; padding: 16px; }
|
||||
&__footer { background: $bg-panel; border-top: 1px solid $border; padding: 10px 16px; }
|
||||
&__body { background: $bg-card; color: $text-primary; padding: 14px; }
|
||||
&__footer { background: $bg-panel; border-top: 1px solid $border; padding: 8px 14px; }
|
||||
}
|
||||
|
||||
.el-form-item__label { color: $text-secondary !important; font-size: 12px; }
|
||||
.el-form-item__label { color: $text-secondary !important; font-size: 11px; }
|
||||
|
||||
.el-input__inner, .el-textarea__inner, .el-select .el-input__inner {
|
||||
background: $bg-input !important;
|
||||
border-color: $border !important;
|
||||
border-color: $border-light !important;
|
||||
border-radius: 2px !important;
|
||||
color: $text-primary !important;
|
||||
font-family: $font-mono;
|
||||
font-size: 12px;
|
||||
&:focus { border-color: $sms-blue !important; }
|
||||
&:focus { border-color: $sms-teal !important; }
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background: $bg-panel !important;
|
||||
border-color: $border !important;
|
||||
.el-select-dropdown__item { color: $text-secondary; &.selected, &:hover { color: $sms-highlight; background: rgba(0,200,255,.08); } }
|
||||
border-radius: 2px !important;
|
||||
.el-select-dropdown__item { color: $text-secondary; &.selected, &:hover { color: $sms-teal; background: rgba($sms-teal, .08); } }
|
||||
}
|
||||
|
||||
.el-date-editor .el-range-input,
|
||||
.el-date-editor .el-range-separator { background: transparent !important; color: $text-secondary !important; }
|
||||
|
||||
.el-pagination {
|
||||
.el-pager li { background: $bg-panel; color: $text-secondary; border: 1px solid $border;
|
||||
&.active { color: $sms-highlight; border-color: $sms-highlight; } }
|
||||
button { background: $bg-panel !important; color: $text-secondary !important; border: 1px solid $border; }
|
||||
.el-pager li {
|
||||
background: $bg-panel; color: $text-secondary; border: 1px solid $border; border-radius: 2px;
|
||||
&.active { color: $sms-teal; border-color: $sms-teal; }
|
||||
}
|
||||
button { background: $bg-panel !important; color: $text-secondary !important; border: 1px solid $border; border-radius: 2px; }
|
||||
}
|
||||
|
||||
.el-input-number .el-input__inner { text-align: left; }
|
||||
|
||||
.el-radio__label { color: $text-secondary; font-size: 12px; }
|
||||
.el-radio__inner { background: $bg-input; border-color: $border; }
|
||||
.el-radio__label { color: $text-secondary; font-size: 11px; }
|
||||
.el-radio__inner { background: $bg-input; border-color: $border-light; }
|
||||
.el-radio__input.is-checked .el-radio__inner { background: $sms-blue; border-color: $sms-blue; }
|
||||
|
||||
.el-message-box {
|
||||
background: $bg-card !important;
|
||||
border-color: $border !important;
|
||||
&__title { color: $text-primary !important; }
|
||||
border-radius: 2px !important;
|
||||
&__title { color: $text-primary !important; font-size: 12px; }
|
||||
&__content { color: $text-secondary !important; }
|
||||
}
|
||||
|
||||
@@ -1,31 +1,39 @@
|
||||
// ─── 色彩系统（与参考HTML完全一致）───
|
||||
$bg-primary: #0d1117;
|
||||
$bg-secondary: #161b22;
|
||||
$bg-card: #1c2230;
|
||||
$bg-panel: #212936;
|
||||
$bg-input: #0d1117;
|
||||
$border: #30363d;
|
||||
$border-active: #1f6feb;
|
||||
// ─── 工业暗色调色板（参考西门子 WinCC 风格）───
|
||||
$bg-base: #0b0f16;
|
||||
$bg-primary: #0f1420;
|
||||
$bg-secondary: #141a28;
|
||||
$bg-card: #182030;
|
||||
$bg-panel: #1c2538;
|
||||
$bg-hover: #22304a;
|
||||
$bg-input: #0b0f16;
|
||||
|
||||
$text-primary: #e6edf3;
|
||||
$text-secondary: #8b949e;
|
||||
$text-muted: #6e7681;
|
||||
$border: #263044;
|
||||
$border-light: #2e3d58;
|
||||
$border-active:#00a3be;
|
||||
|
||||
$accent-blue: #1f6feb;
|
||||
$accent-cyan: #00b4d8;
|
||||
$accent-green: #28a745;
|
||||
$accent-yellow: #f0a500;
|
||||
$accent-orange: #e05a00;
|
||||
$accent-red: #da3633;
|
||||
$accent-purple: #8957e5;
|
||||
$text-primary: #c8d6e8;
|
||||
$text-secondary: #6a82a0;
|
||||
$text-muted: #3e5070;
|
||||
|
||||
$sms-blue: #0078d4;
|
||||
$sms-highlight: #00c8ff;
|
||||
// 西门子主色调 - 石油蓝绿
|
||||
$sms-teal: #00a3be;
|
||||
$sms-teal-dim: #007a8c;
|
||||
$sms-blue: #0066b3;
|
||||
$sms-blue-dim: #004d88;
|
||||
|
||||
$status-run: #28a745;
|
||||
$status-stop: #6e7681;
|
||||
$status-warn: #f0a500;
|
||||
$status-fault: #da3633;
|
||||
// 状态色
|
||||
$status-run: #3db86e;
|
||||
$status-warn: #d4880a;
|
||||
$status-fault: #c8322e;
|
||||
$status-stop: #3e5070;
|
||||
|
||||
$font-main: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||||
$accent-green: #3db86e;
|
||||
$accent-yellow: #d4880a;
|
||||
$accent-red: #c8322e;
|
||||
$accent-cyan: #00a3be;
|
||||
|
||||
$font-main: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
|
||||
$font-mono: 'Consolas', 'Courier New', monospace;
|
||||
|
||||
// 向后兼容
|
||||
$sms-highlight: $sms-teal;
|
||||
|
||||
@@ -3,13 +3,16 @@
|
||||
|
||||
<!-- ─── TOP BAR ─── -->
|
||||
<div class="top-bar">
|
||||
<div class="logo">SMS <span>L2</span></div>
|
||||
<div class="sys-title">推拉酸洗线 L2 过程控制系统 | PUSH-PULL PICKLING LINE</div>
|
||||
<div class="logo">
|
||||
<span class="logo-mark">S</span>
|
||||
<span class="logo-text">SIMATIC L2</span>
|
||||
</div>
|
||||
<div class="sys-title">推拉酸洗线 · L2 过程控制系统</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="status-pills">
|
||||
<span class="pill run">● 机组运行</span>
|
||||
<span class="pill run">● L2在线</span>
|
||||
<span :class="['pill', l3Status]">{{ l3StatusText }}</span>
|
||||
<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>
|
||||
@@ -19,30 +22,34 @@
|
||||
<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">{{ item.icon }}</span>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- ─── BODY ─── -->
|
||||
<div class="body-area">
|
||||
|
||||
<!-- ─── MAIN ─── -->
|
||||
<div class="main-area">
|
||||
<router-view />
|
||||
<!-- ─── SIDEBAR ─── -->
|
||||
<div class="sidebar">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- ─── FOOTER ─── -->
|
||||
<div class="footer">
|
||||
<div class="fp"><span class="dot g"></span>数据库 正常</div>
|
||||
<div class="fp"><span class="dot g"></span>UDP 监听 :9000</div>
|
||||
<div class="fp"><span :class="['dot', l3Status === 'run' ? 'g' : 'y']"></span>L3 {{ l3StatusText }}</div>
|
||||
<div style="margin-left:auto;color:var(--text-muted);">推拉酸洗线 L2 MES v1.0.0</div>
|
||||
<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>
|
||||
@@ -51,19 +58,34 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
const IC = {
|
||||
dashboard: `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="1" width="6" height="6"/><rect x="9" y="1" width="6" height="6"/><rect x="1" y="9" width="6" height="6"/><rect x="9" y="9" width="6" height="6"/></svg>`,
|
||||
material: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1L1 4.5v7L8 15l7-3.5v-7L8 1zm0 2l5 2.5v5.5L8 13 3 11V5.5L8 3z"/></svg>`,
|
||||
production: `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="9" width="3" height="6"/><rect x="5.5" y="6" width="3" height="9"/><rect x="10" y="2" width="3" height="13"/></svg>`,
|
||||
plan: `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="2" y="3" width="12" height="2"/><rect x="2" y="7" width="12" height="2"/><rect x="2" y="11" width="7" height="2"/></svg>`,
|
||||
downtime: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><rect x="5.5" y="5" width="2" height="6" fill="currentColor" stroke="none"/><rect x="8.5" y="5" width="2" height="6" fill="currentColor" stroke="none"/></svg>`,
|
||||
equipment: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm0 1.5a1 1 0 110 2 1 1 0 010-2zM6.8 1l-.4 1.8a5.2 5.2 0 00-1.6 1L3 3.3 1.3 6l1.5 1.1A5 5 0 002.5 8c0 .3 0 .6.05.9L1.3 10 3 12.7l1.8-.5c.48.4 1 .74 1.6 1L6.8 15h2.4l.4-1.8c.6-.26 1.12-.6 1.6-1l1.8.5L14.7 10l-1.3-1.1c.04-.3.06-.6.06-.9 0-.3-.02-.6-.06-.9L14.7 6 13 3.3l-1.8.5a5.2 5.2 0 00-1.6-1L9.2 1H6.8z"/></svg>`,
|
||||
inspection: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="6.5" cy="6.5" r="4.5"/><line x1="9.9" y1="9.9" x2="14" y2="14"/><circle cx="6.5" cy="6.5" r="1.5" fill="currentColor" stroke="none"/></svg>`,
|
||||
message: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M1 2h14v10H9.5L8 14.5 6.5 12H1V2zm1.5 1.5v7h4l1.5 2.2 1.5-2.2h4v-7h-11z"/></svg>`,
|
||||
process: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M1 8 Q3 3 5 8 Q7 13 9 8 Q11 3 13 8 Q14 10.5 15 8"/></svg>`,
|
||||
tension: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 1.5a5.5 5.5 0 110 11 5.5 5.5 0 010-11z"/><line x1="8" y1="8" x2="11.5" y2="5" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="8" r="1.2"/></svg>`,
|
||||
quality: `<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1l1.9 4.2 4.6.5-3.4 3.1 1 4.5L8 11.2l-4.1 2.1 1-4.5L1.5 5.7l4.6-.5z"/></svg>`,
|
||||
capacity: `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="10" width="3" height="5"/><rect x="5.5" y="7" width="3" height="8"/><rect x="10" y="4" width="3" height="11"/></svg>`,
|
||||
}
|
||||
|
||||
const MENU = [
|
||||
{ path: '/dashboard', title: '生产看板', icon: 'DB' },
|
||||
{ path: '/material', title: '物料跟踪', icon: 'MT' },
|
||||
{ path: '/production', title: '实绩管理', icon: 'PR' },
|
||||
{ path: '/plan', title: '计划管理', icon: 'PL' },
|
||||
{ path: '/downtime', title: '停机管理', icon: 'DT' },
|
||||
{ path: '/equipment', title: '设备管理', icon: 'EQ' },
|
||||
{ path: '/inspection', title: '设备巡检', icon: 'INS' },
|
||||
{ path: '/message', title: '报文监控', icon: 'MSG' },
|
||||
{ path: '/process-model', title: '工艺段模型', icon: 'PM' },
|
||||
{ path: '/tension-model', title: '张力设定', icon: 'TM' },
|
||||
{ path: '/quality', title: '质量管理', icon: 'QC' },
|
||||
{ path: '/capacity', title: '产能分析', icon: 'CAP' },
|
||||
{ path: '/dashboard', title: '生产看板', icon: IC.dashboard },
|
||||
{ path: '/material', title: '物料跟踪', icon: IC.material },
|
||||
{ path: '/production', title: '实绩管理', icon: IC.production },
|
||||
{ path: '/plan', title: '计划管理', icon: IC.plan },
|
||||
{ path: '/downtime', title: '停机管理', icon: IC.downtime },
|
||||
{ path: '/equipment', title: '设备管理', icon: IC.equipment },
|
||||
{ path: '/inspection', title: '设备巡检', icon: IC.inspection },
|
||||
{ path: '/message', title: '报文监控', icon: IC.message },
|
||||
{ path: '/process-model', title: '工艺段模型', icon: IC.process },
|
||||
{ path: '/tension-model', title: '张力设定', icon: IC.tension },
|
||||
{ path: '/quality', title: '质量管理', icon: IC.quality },
|
||||
{ path: '/capacity', title: '产能分析', icon: IC.capacity },
|
||||
]
|
||||
|
||||
export default {
|
||||
@@ -72,7 +94,7 @@ export default {
|
||||
return {
|
||||
clock: '--:--:--',
|
||||
l3Status: 'warn',
|
||||
l3StatusText: 'L3待机',
|
||||
l3StatusText: 'L3 待机',
|
||||
menuItems: MENU,
|
||||
_timer: null,
|
||||
}
|
||||
@@ -82,8 +104,7 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this._timer = setInterval(() => {
|
||||
const now = new Date()
|
||||
this.clock = now.toTimeString().slice(0, 8)
|
||||
this.clock = new Date().toTimeString().slice(0, 8)
|
||||
}, 1000)
|
||||
this.clock = new Date().toTimeString().slice(0, 8)
|
||||
},
|
||||
@@ -109,138 +130,209 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: $bg-base;
|
||||
}
|
||||
|
||||
// ─── TOP BAR ───
|
||||
.top-bar {
|
||||
height: 48px;
|
||||
background: linear-gradient(90deg, #0d1b2e 0%, #0a1628 100%);
|
||||
border-bottom: 1px solid $border;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
gap: 16px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.logo {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: $sms-highlight;
|
||||
letter-spacing: 1px;
|
||||
white-space: nowrap;
|
||||
span { color: $accent-yellow; }
|
||||
}
|
||||
|
||||
.sys-title {
|
||||
font-size: 12px;
|
||||
color: $text-secondary;
|
||||
border-left: 1px solid $border;
|
||||
padding-left: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.spacer { flex: 1; }
|
||||
|
||||
.status-pills {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: $text-secondary;
|
||||
.divider { color: $border; }
|
||||
.logout { cursor: pointer; color: $text-muted; &:hover { color: $sms-highlight; } }
|
||||
}
|
||||
|
||||
.clock {
|
||||
font-family: $font-mono;
|
||||
font-size: 13px;
|
||||
color: $sms-highlight;
|
||||
min-width: 72px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: .5px;
|
||||
|
||||
&.run { background: #1a3a1f; color: $status-run; border: 1px solid $status-run; }
|
||||
&.warn { background: #3a2a00; color: $status-warn; border: 1px solid $status-warn; }
|
||||
&.stop { background: #222; color: $text-muted; border: 1px solid $border; }
|
||||
}
|
||||
|
||||
// ─── NAV BAR ───
|
||||
.nav-bar {
|
||||
height: 38px;
|
||||
height: 44px;
|
||||
background: $bg-secondary;
|
||||
border-bottom: 1px solid $border;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
overflow-x: auto;
|
||||
align-items: center;
|
||||
padding: 0 14px;
|
||||
gap: 14px;
|
||||
flex-shrink: 0;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $border transparent;
|
||||
&::-webkit-scrollbar { height: 3px; }
|
||||
&::-webkit-scrollbar-thumb { background: $border; }
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo-mark {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: $sms-teal;
|
||||
color: $bg-base;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 1px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: $text-primary;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sys-title {
|
||||
font-size: 11px;
|
||||
color: $text-secondary;
|
||||
border-left: 1px solid $border;
|
||||
padding-left: 14px;
|
||||
white-space: nowrap;
|
||||
letter-spacing: .3px;
|
||||
}
|
||||
|
||||
.spacer { flex: 1; }
|
||||
|
||||
.status-pills {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 2px 9px;
|
||||
border-radius: 1px;
|
||||
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, .4); .dot { background: $status-run; } }
|
||||
&.warn { background: rgba($status-warn, .12); color: $status-warn; border: 1px solid rgba($status-warn, .4); .dot { background: $status-warn; } }
|
||||
&.stop { background: rgba($status-stop, .1); color: $status-stop; border: 1px solid $border; .dot { background: $status-stop; } }
|
||||
}
|
||||
|
||||
.top-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
color: $text-secondary;
|
||||
|
||||
.divider { color: $border-light; }
|
||||
.logout { cursor: pointer; color: $text-muted; &:hover { color: $sms-teal; } }
|
||||
}
|
||||
|
||||
.clock {
|
||||
font-family: $font-mono;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: $sms-teal;
|
||||
min-width: 70px;
|
||||
text-align: right;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
// ─── BODY ───
|
||||
.body-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ─── SIDEBAR ───
|
||||
.sidebar {
|
||||
width: 158px;
|
||||
flex-shrink: 0;
|
||||
background: $bg-secondary;
|
||||
border-right: 1px solid $border;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar { display: none; }
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 0 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
gap: 9px;
|
||||
padding: 9px 14px;
|
||||
font-size: 11px;
|
||||
color: $text-secondary;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all .15s;
|
||||
user-select: none;
|
||||
border-left: 2px solid transparent;
|
||||
transition: all .12s;
|
||||
letter-spacing: .2px;
|
||||
|
||||
&:hover { color: $text-primary; background: rgba(255,255,255,.03); }
|
||||
&.active { color: $sms-highlight; border-bottom-color: $sms-highlight; background: rgba(0,200,255,.05); }
|
||||
&:hover {
|
||||
background: rgba($sms-teal, .06);
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.nav-icon { font-size: 10px; font-family: $font-mono; color: $text-muted; letter-spacing: .5px; }
|
||||
&.active {
|
||||
background: rgba($sms-teal, .10);
|
||||
color: $sms-teal;
|
||||
border-left-color: $sms-teal;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: .85;
|
||||
|
||||
::v-deep svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// ─── MAIN AREA ───
|
||||
.main-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 14px;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
gap: 12px;
|
||||
background: $bg-primary;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $border transparent;
|
||||
&::-webkit-scrollbar { width: 6px; }
|
||||
&::-webkit-scrollbar-thumb { background: $border; border-radius: 3px; }
|
||||
&::-webkit-scrollbar { width: 5px; }
|
||||
&::-webkit-scrollbar-thumb { background: $border-light; border-radius: 1px; }
|
||||
}
|
||||
|
||||
// ─── FOOTER ───
|
||||
.footer {
|
||||
height: 26px;
|
||||
height: 24px;
|
||||
background: $bg-secondary;
|
||||
border-top: 1px solid $border;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 14px;
|
||||
gap: 16px;
|
||||
font-size: 11px;
|
||||
gap: 18px;
|
||||
font-size: 10px;
|
||||
color: $text-muted;
|
||||
flex-shrink: 0;
|
||||
letter-spacing: .3px;
|
||||
|
||||
.fp { display: flex; align-items: center; gap: 5px; }
|
||||
.dot { width: 6px; height: 6px; border-radius: 50%; &.g { background: $accent-green; } &.y { background: $accent-yellow; } &.r { background: $accent-red; } }
|
||||
.dot {
|
||||
width: 5px; height: 5px; border-radius: 50%; display: inline-block;
|
||||
&.g { background: $status-run; }
|
||||
&.y { background: $status-warn; }
|
||||
&.r { background: $status-fault; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user