SaleTabCard.vue
4.2 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<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 :class="{ active: activeRange === 'all' }" @click="changeRange('all')">全部</a>
<a :class="{ active: activeRange === 'today' }" @click="changeRange('today')">今日</a>
<a :class="{ active: activeRange === 'week' }" @click="changeRange('week')">本周</a>
<a :class="{ active: activeRange === 'month' }" @click="changeRange('month')">本月</a>
<a :class="{ active: activeRange === 'year' }" @click="changeRange('year')">本年</a>
</div>
<a-range-picker :style="{ width: '256px' }" @change="handleDateChange" :value="dateRange" />
</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, ref } 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 activeRange = ref('all');
const dateRange = ref<any>(null);
const emit = defineEmits(['range-change']);
const changeRange = (rangeType: string) => {
activeRange.value = rangeType;
dateRange.value = null; // 清除日期选择
if (rangeType === 'all') {
emit('range-change', { rangeType: null });
} else {
emit('range-change', { rangeType });
}
};
const handleDateChange = (dates: any, dateStrings: [string, string]) => {
if (dateStrings[0] && dateStrings[1]) {
activeRange.value = 'custom';
dateRange.value = dates;
emit('range-change', {
rangeType: 'custom',
startTime: dateStrings[0] + ' 00:00:00',
endTime: dateStrings[1] + ' 23:59:59',
});
} else {
activeRange.value = 'all';
emit('range-change', { rangeType: null });
}
};
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>