29 lines
2.6 KiB
Vue
29 lines
2.6 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import type { TripOperationsCharts, TripOperationsSeries } from '../api/tripOperations'
|
||
const props = defineProps<{ charts: TripOperationsCharts }>()
|
||
const sections = computed(() => [
|
||
{ title: '实运托盘', note: '按实际发车日（UTC）汇总，物理托盘去重', series: props.charts.physicalPallets },
|
||
{ title: '派送目的地', note: '各目的地涉及的车次，同车多站可分别出现', series: props.charts.destinationTrips },
|
||
{ title: '外接约定金额', note: '按币种分别展示，不代表财务应收或实收', series: props.charts.externalAgreedAmounts },
|
||
{ title: '外接按托报价均价', note: '按确认计价托位加权，排除整单报价', series: props.charts.externalPalletRates },
|
||
])
|
||
function width(value: number, series: TripOperationsSeries) { const max = Math.max(...series.points.map(p => p.value), 0); return max ? value / max * 100 : 0 }
|
||
</script>
|
||
<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"><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></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 { 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); }
|
||
</style>
|