html/admin-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): unify fleet driver trip and operation list layouts

Browse Source
This commit is contained in:
ouyangxq
2026-10-07 12:24:21 +08:00
parent ca7f6aa414
commit 04e1d7dbfa
9 changed files with 73 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/overseas-master-data/components/TripOperationsCharts.vue
+5 -4
View File
@@ -13,14 +13,15 @@ function width(value: number, series: TripOperationsSeries) { const max = Math.m
<template><section class="operations-charts" aria-label="出车数据统计"><article v-for="section in sections" :key="section.title" class="chart">
<strong>{{ section.title }}</strong><p>{{ section.note }}</p>
<p v-if="!section.series.some(s => s.points.length)">暂无对应统计</p>
<div class="chart-values"><div v-for="(series, si) in section.series" :key="`${series.label}-${si}`"><b>{{ series.label }}（{{ series.unit }}）</b>
<div class="chart-values"><template v-for="(series, si) in section.series" :key="`${series.label}-${si}`"><div v-if="series.points.length"><b>{{ series.label }}（{{ series.unit }}）</b>
<div v-for="(point, pi) in series.points" :key="pi" class="point"><span>{{ point.label }}</span><div class="bar-track" aria-hidden="true"><div class="bar" :style="{ width: width(point.value, series) + '%' }" /></div><span>{{ point.value }}</span></div>
</div></div>
</div></template></div>
</article></section></template>
<style scoped>
.operations-charts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--admin-space-3); }
.chart { padding:var(--admin-space-3); border:1px solid var(--el-border-color); border-radius:var(--admin-radius); background:var(--admin-surface); }
.chart p { color:var(--el-text-color-secondary); font-size:var(--admin-font-caption); }
.chart { display:grid; align-content:start; gap:var(--admin-space-2); min-width:0; padding:var(--admin-space-3); border:1px solid var(--cc-border); border-radius:var(--admin-radius); background:var(--admin-surface); }
.chart > strong { font-size:var(--admin-font-section); }
.chart p { margin:0; line-height:1.6; color:var(--cc-muted); font-size:var(--admin-font-caption); }
.chart-values { max-height:220px; overflow:auto; }
.point { display:grid; grid-template-columns:minmax(95px,1fr) minmax(45px,1fr) minmax(40px,auto); gap:var(--admin-space-2); align-items:center; margin:var(--admin-space-2) 0; }
.bar-track { height:10px; background:var(--el-fill-color-light); }.bar { height:100%; background:var(--el-color-primary); }