shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: unify monitor vehicle metric rail

Browse Source
This commit is contained in:
lingniu
2026-07-19 10:28:17 +08:00
parent add47b7efc
commit dcc6b223d9
4 changed files with 229 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
vehicle-data-platform/apps/web/src/v2/styles/workspace.css
View File

@@ -14095,32 +14095,6 @@
font-weight: 700;
}
.v2-detail-section > .v2-metric-grid {
overflow: hidden;
border-color: #dce5ef;
border-radius: 10px;
background: #fbfcfe;
}
.v2-detail-section > .v2-metric-grid > div {
min-height: 70px;
background: #fff;
}
.v2-detail-section > .v2-metric-grid > div:hover {
background: #fbfdff;
}
.v2-detail-section > .v2-metric-grid > .is-speed::after { background: #78a9ef; }
.v2-detail-section > .v2-metric-grid > .is-soc::after { background: #65bf94; }
.v2-detail-section > .v2-metric-grid > .is-mileage::after { background: #79a7ea; }
.v2-detail-section > .v2-metric-grid > .is-today::after { background: #2f7de9; }
.v2-detail-section > .v2-metric-grid > .is-status::after { background: #43b77d; }
.v2-detail-section > .v2-metric-grid > .is-alert::after { background: #d8e0ea; }
.v2-detail-section > .v2-metric-grid > .is-today strong,
.v2-detail-section > .v2-metric-grid > .is-today .v2-metric-source-link { color: #1268df; }
.v2-detail-section > .v2-metric-grid > .has-alerts::after { background: #eb6d70; }
.v2-vehicle-detail .v2-source-evidence.is-compact.semi-card {
margin-top: 8px;
overflow: hidden;
@@ -22949,3 +22923,170 @@
font-size: 7px;
}
}
/*
* Global-monitor vehicle inspector.
* Reuse the shared Semi metric rail inside the narrow inspector, keeping the
* four decision metrics in a 2 × 2 matrix and moving state/alerts into one
* compact evidence footer.
*/
.v2-monitor-detail-metric-rail.is-queue.semi-card {
width: calc(100% - 20px);
margin: 10px;
overflow: hidden;
border: 1px solid #dce5ef;
border-radius: 10px;
background: #fff;
}
.v2-monitor-detail-metric-rail.is-queue > .semi-card-body {
min-height: 0;
grid-template-columns: minmax(0, 1fr);
}
.v2-monitor-detail-metric-rail .v2-workspace-metric-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.v2-monitor-detail-metric-rail .v2-workspace-metric-list > span,
.v2-monitor-detail-metric-rail .v2-workspace-metric-action.semi-button,
.v2-monitor-detail-metric-rail .v2-workspace-metric-action .semi-button-content {
min-height: 58px;
}
.v2-monitor-detail-metric-rail .v2-workspace-metric-list > span,
.v2-monitor-detail-metric-rail .v2-workspace-metric-action .semi-button-content {
column-gap: 5px;
padding: 6px 10px;
}
.v2-monitor-detail-metric-rail .v2-workspace-metric-list > span.is-action {
display: block;
padding: 0;
}
.v2-monitor-detail-metric-rail .v2-workspace-metric-list > span:nth-child(odd) {
border-left: 0;
}
.v2-monitor-detail-metric-rail .v2-workspace-metric-list > span:nth-child(n + 3) {
border-top: 1px solid #e5ebf2;
}
.v2-monitor-detail-metric-rail .v2-workspace-metric-list > span > strong,
.v2-monitor-detail-metric-rail .v2-workspace-metric-action .semi-button-content > strong,
.v2-monitor-detail-metric-rail .v2-workspace-metric-list > span.is-secondary > strong,
.v2-monitor-detail-metric-rail .v2-workspace-metric-list > span.is-secondary .v2-workspace-metric-action strong {
overflow: hidden;
font-size: 16px;
line-height: 20px;
text-overflow: ellipsis;
}
.v2-monitor-detail-metric-rail .v2-workspace-metric-list > span > em,
.v2-monitor-detail-metric-rail .v2-workspace-metric-action .semi-button-content > em {
max-width: 62px;
font-size: 8px;
}
.v2-monitor-detail-unit {
margin-left: 3px;
color: #8795a7;
font-size: 7px;
font-style: normal;
font-weight: 550;
letter-spacing: 0;
}
.v2-monitor-detail-metric-rail .v2-workspace-metric-list > span.is-primary .v2-monitor-detail-unit {
color: #7092c0;
}
.v2-monitor-detail-action-note {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 2px;
overflow: hidden;
text-overflow: ellipsis;
}
.v2-monitor-detail-action-note > .semi-icon {
flex: 0 0 auto;
font-size: 8px;
}
.v2-monitor-detail-metric-rail .v2-workspace-metric-context {
display: flex;
min-height: 40px;
border-top: 1px solid #e5ebf2;
border-left: 0;
padding: 0;
}
.v2-monitor-detail-state {
display: grid;
width: 100%;
min-width: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.v2-monitor-detail-state > span {
display: flex;
min-width: 0;
min-height: 40px;
align-items: center;
justify-content: space-between;
gap: 5px;
padding: 6px 10px;
}
.v2-monitor-detail-state > span + span {
border-left: 1px solid #e5ebf2;
}
.v2-monitor-detail-state small {
color: #78879a;
font-size: 8px;
font-weight: 650;
white-space: nowrap;
}
.v2-monitor-detail-state .semi-tag {
min-width: 0;
max-width: 70px;
overflow: hidden;
text-overflow: ellipsis;
}
.v2-monitor-detail-state strong {
color: #30465e;
font-size: 14px;
font-variant-numeric: tabular-nums;
}
.v2-monitor-detail-state strong > em {
margin-left: 2px;
color: #8492a4;
font-size: 7px;
font-style: normal;
font-weight: 550;
}
.v2-monitor-detail-state > .has-alerts strong {
color: #c2413d;
}
@media (max-width: 680px) {
.v2-monitor-detail-metric-rail .v2-workspace-metric-list > span.is-secondary {
display: grid;
}
.v2-monitor-detail-metric-rail .v2-workspace-metric-list > span.is-secondary.is-action {
display: block;
}
.v2-monitor-detail-metric-rail .v2-workspace-metric-context {
display: flex;
}
}