105 lines
2.4 KiB
Vue
105 lines
2.4 KiB
Vue
<template>
|
||
<section class="receivable-section">
|
||
<div class="title-row">
|
||
<h2 v-text="'应收构成'" />
|
||
<span class="caption">成交金额拆分；待收余额已扣除待核销</span>
|
||
</div>
|
||
<div ref="chartElement" class="chart" />
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { EChartsOption } from "echarts";
|
||
import type { GaoSalesOrderReceivableStatView } from "@/types/GaoChart";
|
||
import { buildPieChartOption, formatChartYuan, getNumber } from "@/pages/product/component/chartUtils";
|
||
import { useStoreChart } from "@/pages/store/component/useStoreChart";
|
||
|
||
defineOptions({
|
||
name: "OrderReceivableCard"
|
||
});
|
||
|
||
const props = defineProps<{
|
||
receivable: GaoSalesOrderReceivableStatView;
|
||
}>();
|
||
|
||
const chartOption = computed<EChartsOption>(() => {
|
||
const pendingPaidAmount = getNumber(props.receivable.pendingPaidAmount);
|
||
const unpaidAmount = getNumber(props.receivable.unpaidAmount);
|
||
return {
|
||
...buildPieChartOption(),
|
||
tooltip: {
|
||
trigger: "item",
|
||
confine: true,
|
||
formatter: params => {
|
||
const item = Array.isArray(params) ? params[0] : params;
|
||
return item
|
||
? `${item.name}：${formatChartYuan(Number(item.value))} 元（${item.percent}%）`
|
||
: "";
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: "成交金额",
|
||
type: "pie",
|
||
radius: ["0%", "58%"],
|
||
center: ["50%", "44%"],
|
||
label: { color: "#52607a", formatter: "{b} {d}%" },
|
||
data: [
|
||
{ name: "净收款", value: getNumber(props.receivable.netPaidAmount) / 100 },
|
||
{ name: "有效退款", value: getNumber(props.receivable.refundedAmount) / 100 },
|
||
{ name: "待核销", value: pendingPaidAmount / 100 },
|
||
{ name: "待收余额", value: Math.max(0, unpaidAmount - pendingPaidAmount) / 100 }
|
||
]
|
||
}
|
||
]
|
||
};
|
||
});
|
||
|
||
const { chartElement } = useStoreChart(chartOption);
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.receivable-section {
|
||
padding: 1rem;
|
||
background: rgba(255, 255, 255, .92);
|
||
box-shadow: var(--td-shadow-1);
|
||
border-radius: 1.25rem;
|
||
|
||
.title-row {
|
||
gap: .5rem;
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
h2 {
|
||
color: #0f172a;
|
||
margin: 0 0 .875rem;
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.caption {
|
||
color: #94a3b8;
|
||
font-size: .6875rem;
|
||
}
|
||
|
||
.chart {
|
||
width: 100%;
|
||
height: 15rem;
|
||
}
|
||
}
|
||
|
||
:global(html.theme-dark) {
|
||
.receivable-section {
|
||
background: rgba(15, 23, 42, .88);
|
||
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
||
|
||
h2 {
|
||
color: #e2e8f0;
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|