58 lines
1.4 KiB
Vue
58 lines
1.4 KiB
Vue
<template>
|
|
<gao-chart-card
|
|
title="履约进度排行"
|
|
caption="购买数量的当前履约快照"
|
|
:option="chartOption"
|
|
:loading="loading"
|
|
:has-data="list.length > 0"
|
|
height="20rem"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { EChartsOption } from "echarts";
|
|
import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
|
|
import type { GaoProductFulfillmentRankView } from "@/types/GaoChart";
|
|
import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
|
|
|
|
defineOptions({
|
|
name: "ProductFulfillmentRankChart"
|
|
});
|
|
|
|
const props = defineProps<{
|
|
list: GaoProductFulfillmentRankView[];
|
|
loading: boolean;
|
|
}>();
|
|
|
|
const chartOption = computed<EChartsOption>(() => {
|
|
const list = props.list.slice(0, 10);
|
|
return {
|
|
...buildHorizontalBarOption(list.map(getProductName)),
|
|
series: [
|
|
{
|
|
name: "待履约",
|
|
type: "bar",
|
|
stack: "progress",
|
|
data: list.map(item => getNumber(item.reservedQuantity))
|
|
},
|
|
{
|
|
name: "已履约",
|
|
type: "bar",
|
|
stack: "progress",
|
|
data: list.map(item => getNumber(item.fulfilledQuantity))
|
|
},
|
|
{
|
|
name: "可履约",
|
|
type: "bar",
|
|
stack: "progress",
|
|
data: list.map(item => getNumber(item.availableQuantity))
|
|
}
|
|
]
|
|
};
|
|
});
|
|
|
|
function getProductName(item: GaoProductFulfillmentRankView): string {
|
|
return item.productName || "未命名产品";
|
|
}
|
|
</script>
|