feat(fleet): connect operations quotes costs and handover workspaces

src/modules/overseas-master-data/components/TripOperationsCharts.vue

@@ -0,0 +1,27 @@
+<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"><div v-for="(series, si) in section.series" :key="`${series.label}-${si}`"><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>
+</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-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>