31 lines
2.2 KiB
Vue
31 lines
2.2 KiB
Vue
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import ChartDetailsDialog from './ChartDetailsDialog.vue'
|
||
import AnalyticsChart from './AnalyticsChart.vue'
|
||
import type { DailyResponse } from '../types'
|
||
import { label, quantityText, shownQuantity, reasonsText } from '../state'
|
||
import { skuTrendOption } from '../skuTrendChart'
|
||
const props = defineProps<{ data: DailyResponse }>()
|
||
const option = computed(() => skuTrendOption(props.data.points))
|
||
const hasData = computed(() => props.data.points.some(point => point.dataStatus !== 'UNKNOWN' && shownQuantity(point) != null))
|
||
</script>
|
||
<template>
|
||
<section aria-label="SKU每日出库趋势">
|
||
<h3>{{ data.summary.sku }} · 每日出库趋势</h3>
|
||
<p>所属货主：{{ data.summary.customerCode || '—' }} · {{ data.summary.productName || '—' }}</p>
|
||
<p>{{ data.summary.dataStatus === 'COMPLETE' ? '完整出库量' : '已采集出库量' }}：{{ quantityText(shownQuantity(data.summary)) }} {{ data.summary.quantityUnit === 'PCS' ? '件' : '单位未知' }}；{{ label(data.summary.dataStatus) }}。今日为已采集累计。</p>
|
||
<p v-if="!hasData">所选范围尚无可靠数据，未知日期不作为零销量。</p>
|
||
<p class="trend-legend">实线／实心点：完整日 · 虚线／空心点：未完整日 · 空缺：未知，缺失日期断线</p>
|
||
<AnalyticsChart :option="option" class="sku-trend" aria-label="SKU每日出库趋势" />
|
||
<ChartDetailsDialog title="每日数量、完整性及覆盖证据" :reset-on="data">
|
||
<table class="density-table"><thead><tr><th>北京时间日期</th><th>完整出库量</th><th>已采集量</th><th>状态</th><th>覆盖截止</th><th>缺口原因</th></tr></thead><tbody>
|
||
<tr v-for="point in data.points" :key="point.businessDate"><td>{{ point.businessDate }}</td><td>{{ quantityText(point.outboundQuantity) }}</td><td>{{ quantityText(point.observedQuantity) }}</td><td>{{ label(point.dataStatus) }}</td><td>{{ point.coveredUntil ?? '—' }}</td><td>{{ reasonsText(point.reasonCodes) }}</td></tr>
|
||
</tbody></table>
|
||
</ChartDetailsDialog>
|
||
</section>
|
||
</template>
|
||
<style scoped>
|
||
.sku-trend { display: block; width: 100%; height: 340px; }
|
||
.trend-legend { color: var(--el-text-color-secondary); font-size: var(--admin-font-caption); }
|
||
</style>
|