timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update customer chart

Browse Source
This commit is contained in:
Timi
2026-09-11 17:33:28 +08:00
parent 537eb5ac7a
commit 62add33884
25 changed files with 150 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/product/component/CustomerOrderRankChart.vue
+2 -3
View File
@@ -1,17 +1,16 @@
<template>
<gao-chart-card
<date-range-chart-card
title="客户净收款排行"
caption="排除已取消订单，前 10"
:option="chartOption"
:loading="loading"
:has-data="list.length > 0"
height="17rem"
/>
</template>
<script setup lang="ts">
import type { EChartsOption } from "echarts";
import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
import type { GaoCustomerOrderRankView } from "@/types/GaoChart";
import { buildHorizontalBarOption, formatChartYuan, getNumber } from "@/pages/product/component/chartUtils";
src/pages/product/component/GaoChartCard.vue
-113
View File
@@ -1,113 +0,0 @@
<template>
<section class="chart-section">
<div class="title-row">
<h2 v-text="title" />
<span v-if="caption" class="caption" v-text="caption" />
</div>
<div ref="chartElement" class="chart" :style="{ height }" />
<div v-if="loading" class="state">
<t-loading size="1.5rem" text="加载中" />
</div>
<div v-else-if="!hasData" class="state">
<t-empty description="暂无数据" />
</div>
<chart-range-slider
v-if="chartShowSlider"
:model-value="sliderValue"
:max="maxSliderValue"
:min-range="5"
:label="rangeText"
@change="handleSliderChange"
/>
</section>
</template>
<script setup lang="ts">
import type { EChartsOption } from "echarts";
import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
import { useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
type ChartOptionBuilder = (visibleDateTextList: string[]) => EChartsOption;
const props = withDefaults(defineProps<{
caption?: string;
dateTextList?: string[];
height?: string;
hasData?: boolean;
loading?: boolean;
option: EChartsOption | ChartOptionBuilder;
title: string;
}>(), {
caption: "",
dateTextList: () => [],
height: "16rem",
hasData: true,
loading: false
});
const dateTextList = computed(() => props.dateTextList);
const {
rangeText,
showSlider: chartShowSlider,
sliderValue,
maxSliderValue,
visibleDateTextList,
handleSliderChange
} = useStoreChartWindow(dateTextList);
const option = computed<EChartsOption>(() => typeof props.option === "function"
? props.option(visibleDateTextList.value)
: props.option);
const { chartElement } = useStoreChart(option);
</script>
<style scoped lang="less">
.chart-section {
padding: 1rem;
position: relative;
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 0;
font-size: 1rem;
font-weight: 700;
}
.caption {
color: #94a3b8;
font-size: .6875rem;
}
.chart {
width: 100%;
}
.state {
inset: 3.5rem 0 0 0;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
}
}
:global(html.theme-dark) {
.chart-section {
background: rgba(15, 23, 42, .88);
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
h2 {
color: #e2e8f0;
}
}
}
</style>
src/pages/product/component/OrderDailyChart.vue
+3 -5
View File
@@ -1,18 +1,17 @@
<template>
<gao-chart-card
<date-range-chart-card
title="订单每日趋势"
caption="金额已换算为元"
:date-text-list="dateTextList"
:option="buildOption"
:loading="loading"
:has-data="list.length > 0"
height="18rem"
height="12rem"
/>
</template>
<script setup lang="ts">
import type { EChartsOption } from "echarts";
import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
import type { GaoSalesOrderDailyStatView } from "@/types/GaoChart";
import { buildAxisChartOption, formatChartYuan, formatQuantity, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
@@ -80,5 +79,4 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
]
};
}
</script>
src/pages/product/component/OrderPaymentChart.vue
+2 -3
View File
@@ -1,17 +1,16 @@
<template>
<gao-chart-card
<date-range-chart-card
title="付款状态分布"
caption="当前订单快照"
:option="chartOption"
:loading="loading"
:has-data="list.length > 0"
height="17rem"
/>
</template>
<script setup lang="ts">
import type { EChartsOption } from "echarts";
import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
import type { GaoSalesOrderPaymentStatView } from "@/types/GaoChart";
import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
src/pages/product/component/OrderStatusChart.vue
+2 -3
View File
@@ -1,17 +1,16 @@
<template>
<gao-chart-card
<date-range-chart-card
title="订单状态分布"
caption="当前订单快照"
:option="chartOption"
:loading="loading"
:has-data="list.length > 0"
height="17rem"
/>
</template>
<script setup lang="ts">
import type { EChartsOption } from "echarts";
import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
import type { GaoSalesOrderStatusStatView } from "@/types/GaoChart";
import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
src/pages/product/component/OrderTypeChart.vue
+2 -3
View File
@@ -1,17 +1,16 @@
<template>
<gao-chart-card
<date-range-chart-card
title="订单类型分布"
caption="按订单数量"
:option="chartOption"
:loading="loading"
:has-data="list.length > 0"
height="17rem"
/>
</template>
<script setup lang="ts">
import type { EChartsOption } from "echarts";
import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
import type { GaoSalesOrderTypeStatView } from "@/types/GaoChart";
import { buildPieChartOption, getNumber } from "@/pages/product/component/chartUtils";
src/pages/product/component/ProductFulfillmentRankChart.vue
+2 -3
View File
@@ -1,17 +1,16 @@
<template>
<gao-chart-card
<date-range-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 DateRangeChartCard from "@/components/DateRangeChartCard.vue";
import type { GaoProductFulfillmentRankView } from "@/types/GaoChart";
import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
src/pages/product/component/ProductFulfillmentTrendChart.vue
+2 -3
View File
@@ -1,18 +1,17 @@
<template>
<gao-chart-card
<date-range-chart-card
title="每日履约趋势"
caption="基础单位，冲正数量允许为负值"
:date-text-list="dateTextList"
:option="buildOption"
:loading="loading"
:has-data="list.length > 0"
height="17rem"
/>
</template>
<script setup lang="ts">
import type { EChartsOption } from "echarts";
import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
import type { GaoProductFulfillmentDailyStatView } from "@/types/GaoChart";
import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
src/pages/product/component/ProductSalesRankChart.vue
+2 -3
View File
@@ -1,17 +1,16 @@
<template>
<gao-chart-card
<date-range-chart-card
title="产品销售排行"
caption="按基础单位销量取前 10"
: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 DateRangeChartCard from "@/components/DateRangeChartCard.vue";
import type { GaoProductSalesRankView } from "@/types/GaoChart";
import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
src/pages/product/component/ProductSalesTrendChart.vue
+2 -3
View File
@@ -1,18 +1,17 @@
<template>
<gao-chart-card
<date-range-chart-card
title="产品销售趋势"
caption="基础单位，直接产品与套餐权益分开展示"
:date-text-list="dateTextList"
:option="buildOption"
:loading="loading"
:has-data="list.length > 0"
height="17rem"
/>
</template>
<script setup lang="ts">
import type { EChartsOption } from "echarts";
import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
import type { GaoProductSalesDailyStatView } from "@/types/GaoChart";
import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
src/pages/product/component/ProductStockMovementChart.vue
+2 -3
View File
@@ -1,18 +1,17 @@
<template>
<gao-chart-card
<date-range-chart-card
title="库存变动"
caption="预占与释放不计入实际出入库"
:date-text-list="dateTextList"
:option="buildOption"
:loading="loading"
:has-data="list.length > 0"
height="17rem"
/>
</template>
<script setup lang="ts">
import type { EChartsOption } from "echarts";
import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
import type { GaoProductStockMovementDailyStatView } from "@/types/GaoChart";
import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
src/pages/product/component/chartUtils.ts
+4 -4
View File
@@ -7,10 +7,10 @@ export function buildAxisChartOption(labelList: string[]): EChartsOption {
return {
color: chartColorList,
grid: {
top: 48,
left: 12,
right: 12,
bottom: 12,
top: 58,
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
legend: {