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

feat(history): align fields quality and exports

Browse Source
This commit is contained in:
lingniu
2026-07-16 16:46:10 +08:00
parent 17c4591040
commit a2722e4afd
13 changed files with 273 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -604,12 +604,18 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-track-inspector.is-empty p { max-width: 220px; margin: 7px 0 0; font-size: 9px; line-height: 1.6; }
.v2-history-page { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 10px; overflow: hidden; padding: 12px 16px 16px; }
.v2-history-toolbar { display: grid; flex: 0 0 auto; grid-template-columns: minmax(230px, 1.2fr) minmax(160px, .8fr) minmax(160px, .8fr) 120px 130px auto auto auto; align-items: end; gap: 8px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 10px 12px; box-shadow: var(--v2-shadow); }
.v2-history-toolbar { display: grid; flex: 0 0 auto; grid-template-columns: minmax(230px, 1.1fr) minmax(350px, 1.5fr) 120px 130px auto auto auto; align-items: end; gap: 8px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 10px 12px; box-shadow: var(--v2-shadow); }
.v2-history-toolbar label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: var(--v2-muted); font-size: 8px; }
.v2-history-toolbar label > div { display: flex; height: 34px; align-items: center; gap: 7px; border: 1px solid #dce4ef; border-radius: 7px; padding: 0 9px; color: #8996a8; }
.v2-history-toolbar input, .v2-history-toolbar select { min-width: 0; height: 34px; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; padding: 0 8px; color: #435168; outline: 0; font-size: 9px; }
.v2-history-toolbar label > div input { height: auto; flex: 1; border: 0; padding: 0; }
.v2-history-toolbar input:focus, .v2-history-toolbar select:focus, .v2-history-toolbar label > div:focus-within { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); }
.v2-history-range { min-width: 0; margin: 0; border: 0; padding: 0; }
.v2-history-range legend { margin-bottom: 5px; padding: 0; color: var(--v2-muted); font-size: 8px; }
.v2-history-range > div { display: grid; height: 34px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; overflow: hidden; border: 1px solid #dce4ef; border-radius: 7px; background: #fff; }
.v2-history-range > div:focus-within { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); }
.v2-history-range > div input { width: 100%; height: 32px; border: 0; border-radius: 0; padding: 0 8px; box-shadow: none; }
.v2-history-range > div span { color: #8794a5; font-size: 8px; }
.v2-history-toolbar button { height: 34px; padding: 0 11px; white-space: nowrap; }
.v2-history-toolbar button:disabled { opacity: .45; cursor: not-allowed; }
.v2-history-metrics { display: flex; min-height: 42px; flex: 0 0 auto; align-items: center; gap: 7px; overflow-x: auto; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 6px 11px; box-shadow: var(--v2-shadow); }
@@ -619,6 +625,8 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-history-metrics button.is-active { border-color: #b8d1fa; background: var(--v2-blue-soft); color: var(--v2-blue); }
.v2-history-metrics button.is-active i { border-color: var(--v2-blue); background: var(--v2-blue); }
.v2-history-metrics > span { color: var(--v2-muted); font-size: 8px; }
.v2-history-metrics > button.v2-history-metrics-manage { margin-left: auto; border-color: #cddcf0; color: #526987; font-weight: 700; }
.v2-history-metrics > button.v2-history-metrics-manage:disabled { opacity: .4; cursor: not-allowed; }
.v2-history-workspace { display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(660px, 1fr) 310px; gap: 10px; }
.v2-history-main { display: grid; min-width: 0; min-height: 0; grid-template-rows: 58px 205px minmax(260px, 1fr); gap: 9px; }
.v2-history-summary { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; box-shadow: var(--v2-shadow); }
@@ -653,8 +661,11 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-history-table-card > header button, .v2-history-table-card > header select { display: inline-flex; height: 27px; align-items: center; gap: 5px; border: 1px solid #dfe6ef; border-radius: 5px; background: #fff; padding: 0 8px; color: #657286; cursor: pointer; font-size: 8px; }
.v2-history-column-panel { position: absolute; z-index: 15; top: 37px; right: 9px; display: flex; width: min(340px, calc(100% - 18px)); max-height: min(390px, calc(100% - 48px)); flex-direction: column; overflow: hidden; border: 1px solid #d8e2ee; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(30, 47, 70, .18); }
.v2-history-column-panel > header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8edf4; padding: 10px 11px; }.v2-history-column-panel > header div { display: grid; gap: 3px; }.v2-history-column-panel > header strong { color: #35445a; font-size: 10px; }.v2-history-column-panel > header span { color: #8591a2; font-size: 8px; }.v2-history-column-panel > header button { display: grid; width: 25px; height: 25px; place-items: center; border: 0; border-radius: 5px; background: #f2f5f9; color: #68768a; cursor: pointer; }
.v2-history-column-panel > label.v2-history-column-search { display: flex; min-height: 38px; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 7px; border-bottom: 1px solid #e8edf4; padding: 5px 10px; color: #8a97a9; }
.v2-history-column-panel > label.v2-history-column-search input { width: 100%; height: 28px; border: 1px solid #dce4ee; border-radius: 6px; padding: 0 8px; color: #435168; outline: 0; font-size: 9px; }
.v2-history-column-panel > label.v2-history-column-search input:focus { border-color: #8bb6fb; box-shadow: 0 0 0 3px rgba(18,104,243,.08); }
.v2-history-column-panel > div { display: grid; min-height: 0; overflow: auto; padding: 5px 8px; }.v2-history-column-panel label { display: grid; min-height: 36px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid #f0f3f7; padding: 0 4px; color: #4d5b6f; font-size: 9px; cursor: pointer; }.v2-history-column-panel label input { margin: 0; accent-color: var(--v2-blue); }.v2-history-column-panel label small { max-width: 130px; overflow: hidden; color: #929dac; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.v2-history-column-panel > div > p { margin: 18px 8px; color: var(--v2-muted); text-align: center; font-size: 9px; }
.v2-history-column-panel > footer { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 6px; border-top: 1px solid #e8edf4; padding: 8px 10px; }.v2-history-column-panel > footer button { height: 27px; border: 1px solid #dce4ee; border-radius: 5px; background: #fff; padding: 0 9px; color: #5f6e83; cursor: pointer; font-size: 8px; }.v2-history-column-panel > footer button:disabled { opacity: .4; cursor: not-allowed; }
.v2-history-column-panel > footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 6px; border-top: 1px solid #e8edf4; padding: 8px 10px; }.v2-history-column-panel > footer span { margin-right: auto; color: #8491a3; font-size: 8px; }.v2-history-column-panel > footer button { height: 27px; border: 1px solid #dce4ee; border-radius: 5px; background: #fff; padding: 0 9px; color: #5f6e83; cursor: pointer; font-size: 8px; }.v2-history-column-panel > footer button:disabled { opacity: .4; cursor: not-allowed; }
.v2-history-table-scroll { position: relative; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; }
.v2-history-table-scroll table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; color: #4e5b6f; font-size: 8px; }
.v2-history-table-scroll th { position: sticky; z-index: 3; top: 0; height: 31px; border-bottom: 1px solid var(--v2-border); background: #f8fafc; color: #607086; text-align: left; white-space: nowrap; font-weight: 700; }
@@ -663,6 +674,7 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-history-table-card.is-comfortable .v2-history-table-scroll td { height: 40px; }
.v2-history-table-scroll tr:hover td, .v2-history-table-scroll tr.is-selected td { background: #f2f7ff; }
.v2-history-table-scroll td button { border: 0; background: transparent; color: var(--v2-blue); cursor: pointer; font-size: 8px; }
.v2-history-table-scroll td.v2-history-quality-reason { max-width: 260px; color: #66758a; }
.v2-history-table-scroll input { width: 13px; height: 13px; accent-color: var(--v2-blue); }
.v2-quality { display: inline-flex; align-items: center; gap: 5px; }
.v2-quality i { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-green); }
@@ -686,8 +698,13 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-history-evidence dt { color: #7f8c9f; }
.v2-history-evidence dd { margin: 0; overflow-wrap: anywhere; text-align: right; }
.v2-history-evidence dd i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--v2-green); }
.v2-history-evidence dd i.is-warning { background: var(--v2-orange); }
.v2-history-evidence dd i.is-error, .v2-history-evidence dd i.is-critical { background: var(--v2-red); }
.v2-history-evidence .v2-history-quality-detail { align-items: start; }
.v2-history-evidence .v2-history-quality-detail dd { color: #5c6b80; line-height: 1.5; white-space: normal; }
.v2-evidence-values { padding: 10px 12px; }
.v2-evidence-values > strong { display: block; margin-bottom: 5px; font-size: 9px; }
.v2-evidence-values > p { margin: 10px 0; color: var(--v2-muted); font-size: 8px; text-align: center; }
.v2-evidence-values > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid #eef2f7; padding: 6px 0; }
.v2-evidence-values span { min-width: 0; color: #617087; font-size: 8px; }
.v2-evidence-values span small { display: block; margin-top: 2px; overflow: hidden; color: #a0aaba; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
@@ -1000,7 +1017,7 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-track-workspace { grid-template-columns: minmax(500px, 1fr) 290px; }
.v2-track-playback { grid-template-columns: 180px minmax(210px, 1fr); }
.v2-current-metrics { grid-column: 1 / -1; border-top: 1px solid var(--v2-border); border-left: 0; padding-top: 6px; }
.v2-history-toolbar { grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(120px, .7fr)); }
.v2-history-toolbar { grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.5fr) repeat(3, minmax(100px, .7fr)); }
.v2-history-toolbar button { min-width: 90px; }
.v2-history-workspace { grid-template-columns: minmax(600px, 1fr) 280px; }
.v2-access-filter { grid-template-columns: minmax(210px, 1fr) repeat(4, minmax(110px, .7fr)); }
@@ -1046,6 +1063,7 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-history-page { height: auto; min-height: 100%; overflow: auto; }
.v2-history-toolbar { grid-template-columns: 1fr 1fr; }
.v2-history-vehicles { grid-column: 1 / -1; }
.v2-history-range { grid-column: 1 / -1; }
.v2-history-workspace { display: flex; flex-direction: column; }
.v2-history-main { height: 760px; min-height: 0; flex: none; grid-template-rows: 58px 220px minmax(0, 1fr); }
.v2-history-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; }
@@ -1337,6 +1355,7 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-history-page { padding: 8px; }
.v2-history-toolbar { grid-template-columns: 1fr; }
.v2-history-vehicles { grid-column: auto; }
.v2-history-range { grid-column: auto; }
.v2-history-toolbar button { width: 100%; }
.v2-history-summary { grid-template-columns: 1fr 1fr; min-height: 106px; }
.v2-history-summary > div:nth-child(3)::before { display: none; }
@@ -1683,6 +1702,7 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-history-mobile-list header > div > span { margin-top: 3px; color: #8794a5; font-size: 10px; }
.v2-history-mobile-list p { margin: 9px 0; color: #718096; font-size: 10px; }
.v2-history-mobile-list p b { color: var(--v2-blue); }
.v2-history-mobile-quality { display: block; margin: -2px 0 9px; color: #6d7b8f; font-size: 10px; line-height: 1.45; }
.v2-history-mobile-list dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; border-top: 1px solid #edf1f5; padding-top: 9px; }
.v2-history-mobile-list dt { color: #8a97a9; font-size: 9px; }
.v2-history-mobile-list dd { margin: 3px 0 0; font-size: 11px; font-weight: 700; }
@@ -1911,8 +1931,11 @@ button, a { -webkit-tap-highlight-color: transparent; }
/* History data table. */
.v2-history-page { gap: 12px; padding: 16px 20px 20px; }
.v2-history-toolbar { padding: 14px 16px; }
.v2-history-toolbar label { font-size: 11px; }
.v2-history-toolbar label, .v2-history-range legend { font-size: 11px; }
.v2-history-toolbar input, .v2-history-toolbar select { height: 38px; font-size: 12px; }
.v2-history-range > div { height: 38px; }
.v2-history-range > div input { height: 36px; font-size: 12px; }
.v2-history-range > div span { font-size: 11px; }
.v2-history-summary { min-height: 76px; }
.v2-history-summary small { font-size: 11px; }
.v2-history-summary strong { font-size: 20px; }