SaleTabCard.vue
2.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<template>
<a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
<div class="salesCard">
<a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
<template #rightExtra>
<div class="extra-wrapper">
<div class="extra-item">
<a>今日</a>
<a>本周</a>
<a>本月</a>
<a>本年</a>
</div>
<a-range-picker :style="{ width: '256px' }" />
</div>
</template>
<a-tab-pane loading="true" tab="每月问答次数" key="1">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<Bar
:chartData="barData"
:option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }"
height="40vh"
:seriesColor="seriesColor"
/>
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<RankList title="按钮统计榜" :list="buttonStats" />
</a-col>
</a-row>
</a-tab-pane>
<!-- <a-tab-pane tab="销售趋势" key="2">-->
<!-- <a-row>-->
<!-- <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
<!-- <Bar-->
<!-- :chartData="barData.reverse()"-->
<!-- :option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }"-->
<!-- height="40vh"-->
<!-- :seriesColor="seriesColor"-->
<!-- />-->
<!-- </a-col>-->
<!-- <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">-->
<!-- <RankList title="门店销售排行榜" :list="rankList" />-->
<!-- </a-col>-->
<!-- </a-row>-->
<!-- </a-tab-pane>-->
</a-tabs>
</div>
</a-card>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import Bar from '/@/components/chart/Bar.vue';
import RankList from '/@/components/chart/RankList.vue';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
defineProps({
loading: {
type: Boolean,
},
barData: {
type: Array as () => Array<{ name: string; value: number }>, // 直接定义类型
default: () => [],
},
buttonStats: {
// 添加按钮统计属性
type: Array as () => Array<{ name: string; total: number }>,
default: () => [],
},
});
const { getThemeColor } = useRootSetting();
const seriesColor = computed(() => {
return getThemeColor.value;
});
</script>
<style lang="less" scoped>
.extra-wrapper {
line-height: 55px;
padding-right: 24px;
.extra-item {
display: inline-block;
margin-right: 24px;
a {
margin-left: 24px;
}
}
}
</style>