62 lines
1.4 KiB
Vue
62 lines
1.4 KiB
Vue
<template>
|
|
<date-range-chart-card
|
|
title="付款状态分布"
|
|
caption="当前订单快照"
|
|
:option="chartOption"
|
|
:loading="loading"
|
|
height="6rem"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { EChartsOption } from "echarts";
|
|
import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
|
|
import type { GaoSalesOrderPaymentStatView } from "@/types/GaoChart";
|
|
import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
|
|
|
|
defineOptions({
|
|
name: "OrderPaymentChart"
|
|
});
|
|
|
|
const props = defineProps<{
|
|
list: GaoSalesOrderPaymentStatView[];
|
|
loading: boolean;
|
|
}>();
|
|
|
|
const chartOption = computed<EChartsOption>(() => {
|
|
const list = props.list;
|
|
return {
|
|
...buildHorizontalBarOption(list.map(item => getPaymentStatusText(item.paymentStatus))),
|
|
grid: {
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
showLabel: false
|
|
},
|
|
series: [{
|
|
type: "bar",
|
|
data: list.map(item => ({
|
|
value: getNumber(item.orderCount),
|
|
itemStyle: { color: getPaymentStatusColor(item.paymentStatus) }
|
|
}))
|
|
}]
|
|
};
|
|
});
|
|
|
|
function getPaymentStatusText(value?: string): string {
|
|
return ({
|
|
UNPAID: "未付款",
|
|
PARTIALLY_PAID: "部分付款",
|
|
PAID: "已付款"
|
|
} as Record<string, string>)[value || ""] || "未知状态";
|
|
}
|
|
function getPaymentStatusColor(value?: string): string {
|
|
return ({
|
|
UNPAID: "#F33434",
|
|
PARTIALLY_PAID: "#EB9C25",
|
|
PAID: "#0F766E"
|
|
} as Record<string, string>)[value || ""] || "#94A3B8";
|
|
}
|
|
</script>
|