即时销售报表
This commit is contained in:
zjf committed
1 parent
ca3c0b2a13
commit
45c2bd0e88
7 files changed
+2623
No files matched your search
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<el-card class="ranking-table-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">{{ title }}</span>
|
||||
<div class="card-actions">
|
||||
<el-button size="small" @click="refreshData">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
刷新
|
||||
</el-button>
|
||||
<el-button size="small" @click="viewAll">
|
||||
查看全部
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table
|
||||
:data="data"
|
||||
stripe
|
||||
:loading="loading"
|
||||
@row-click="handleRowClick"
|
||||
class="ranking-table"
|
||||
>
|
||||
<el-table-column prop="ranking" label="排名" width="60" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="getRankingTagType(row.ranking)"
|
||||
size="small"
|
||||
class="ranking-tag"
|
||||
>
|
||||
{{ row.ranking }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="productName" label="商品名称" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<div class="product-info">
|
||||
<div class="product-name">{{ row.productName }}</div>
|
||||
<div class="product-code">{{ row.productCode }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="categoryName" label="分类" width="100" show-overflow-tooltip />
|
||||
|
||||
<el-table-column prop="salesAmount" label="销售额" width="120" align="right">
|
||||
<template #default="{ row }">
|
||||
<div class="amount-cell">
|
||||
<div class="amount-value">{{ formatCurrency(row.salesAmount) }}</div>
|
||||
<div v-if="row.yearOverYearGrowthRate !== undefined" class="growth-rate">
|
||||
<el-icon
|
||||
v-if="row.yearOverYearGrowthRate > 0"
|
||||
class="growth-icon up"
|
||||
>
|
||||
<ArrowUp />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
v-else-if="row.yearOverYearGrowthRate < 0"
|
||||
class="growth-icon down"
|
||||
>
|
||||
<ArrowDown />
|
||||
</el-icon>
|
||||
<span
|
||||
:class="getGrowthRateClass(row.yearOverYearGrowthRate)"
|
||||
>
|
||||
{{ Math.abs(row.yearOverYearGrowthRate).toFixed(1) }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="salesQuantity" label="销量" width="100" align="right">
|
||||
<template #default="{ row }">
|
||||
{{ formatNumber(row.salesQuantity) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="salesCount" label="笔数" width="80" align="right">
|
||||
<template #default="{ row }">
|
||||
{{ formatNumber(row.salesCount) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="averagePrice" label="均价" width="100" align="right">
|
||||
<template #default="{ row }">
|
||||
{{ formatCurrency(row.averagePrice) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="marketShare" label="市场份额" width="100" align="right">
|
||||
<template #default="{ row }">
|
||||
<div class="market-share">
|
||||
<div class="share-value">{{ (row.marketShare * 100).toFixed(1) }}%</div>
|
||||
<div class="share-bar">
|
||||
<div
|
||||
class="share-progress"
|
||||
:style="{ width: (row.marketShare * 100) + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="80" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
text
|
||||
@click.stop="viewDetail(row)"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div v-if="showPagination" class="pagination-wrapper">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { Refresh, ArrowUp, ArrowDown } from '@element-plus/icons-vue';
|
||||
|
||||
interface ProductRankingItem {
|
||||
productId: string;
|
||||
productName: string;
|
||||
productCode: string;
|
||||
categoryName: string;
|
||||
salesAmount: number;
|
||||
salesQuantity: number;
|
||||
salesCount: number;
|
||||
averagePrice: number;
|
||||
ranking: number;
|
||||
marketShare: number;
|
||||
yearOverYearGrowthRate?: number;
|
||||
monthOverMonthGrowthRate?: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
data: ProductRankingItem[];
|
||||
loading?: boolean;
|
||||
showPagination?: boolean;
|
||||
total?: number;
|
||||
pageSize?: number;
|
||||
currentPage?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
loading: false,
|
||||
showPagination: false,
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
refresh: [];
|
||||
viewAll: [];
|
||||
viewDetail: [item: ProductRankingItem];
|
||||
rowClick: [item: ProductRankingItem];
|
||||
pageChange: [page: number, size: number];
|
||||
}>();
|
||||
|
||||
// 获取排名标签类型
|
||||
const getRankingTagType = (ranking: number) => {
|
||||
if (ranking <= 3) return 'danger';
|
||||
if (ranking <= 10) return 'warning';
|
||||
return 'primary';
|
||||
};
|
||||
|
||||
// 获取增长率样式类
|
||||
const getGrowthRateClass = (rate: number) => {
|
||||
if (rate > 0) return 'growth-up';
|
||||
if (rate < 0) return 'growth-down';
|
||||
return 'growth-stable';
|
||||
};
|
||||
|
||||
// 格式化货币
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
style: 'currency',
|
||||
currency: 'CNY',
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
// 格式化数字
|
||||
const formatNumber = (value: number) => {
|
||||
return new Intl.NumberFormat('zh-CN').format(value);
|
||||
};
|
||||
|
||||
// 刷新数据
|
||||
const refreshData = () => {
|
||||
emit('refresh');
|
||||
};
|
||||
|
||||
// 查看全部
|
||||
const viewAll = () => {
|
||||
emit('viewAll');
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const viewDetail = (item: ProductRankingItem) => {
|
||||
emit('viewDetail', item);
|
||||
};
|
||||
|
||||
// 行点击
|
||||
const handleRowClick = (item: ProductRankingItem) => {
|
||||
emit('rowClick', item);
|
||||
};
|
||||
|
||||
// 分页大小变化
|
||||
const handleSizeChange = (size: number) => {
|
||||
emit('pageChange', props.currentPage, size);
|
||||
};
|
||||
|
||||
// 当前页变化
|
||||
const handleCurrentChange = (page: number) => {
|
||||
emit('pageChange', page, props.pageSize);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ranking-table-card {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.card-title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-table {
|
||||
.ranking-tag {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
.product-name {
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.product-code {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.amount-cell {
|
||||
.amount-value {
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.growth-rate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
|
||||
.growth-icon {
|
||||
margin-right: 2px;
|
||||
|
||||
&.up {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
&.down {
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
|
||||
.growth-up {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.growth-down {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.growth-stable {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.market-share {
|
||||
.share-value {
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.share-bar {
|
||||
height: 4px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
|
||||
.share-progress {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #409eff, #67c23a);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div ref="chartContainer" class="sales-chart" :style="{ height: height + 'px' }"></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
interface Props {
|
||||
data: any[];
|
||||
type: 'line' | 'bar' | 'pie' | 'area';
|
||||
height?: number;
|
||||
title?: string;
|
||||
xAxisData?: string[];
|
||||
series?: any[];
|
||||
options?: any;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
height: 300,
|
||||
type: 'line',
|
||||
data: () => [],
|
||||
xAxisData: () => [],
|
||||
series: () => [],
|
||||
options: () => ({}),
|
||||
});
|
||||
|
||||
const chartContainer = ref<HTMLElement>();
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartContainer.value) return;
|
||||
|
||||
chartInstance = echarts.init(chartContainer.value);
|
||||
updateChart();
|
||||
};
|
||||
|
||||
// 更新图表
|
||||
const updateChart = () => {
|
||||
if (!chartInstance) return;
|
||||
|
||||
const option = getChartOption();
|
||||
chartInstance.setOption(option, true);
|
||||
};
|
||||
|
||||
// 获取图表配置
|
||||
const getChartOption = () => {
|
||||
const baseOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
...props.options,
|
||||
};
|
||||
|
||||
switch (props.type) {
|
||||
case 'line':
|
||||
return {
|
||||
...baseOption,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.xAxisData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: props.series.map(item => ({
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
...item,
|
||||
})),
|
||||
};
|
||||
|
||||
case 'bar':
|
||||
return {
|
||||
...baseOption,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.xAxisData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: props.series.map(item => ({
|
||||
type: 'bar',
|
||||
...item,
|
||||
})),
|
||||
};
|
||||
|
||||
case 'pie':
|
||||
return {
|
||||
...baseOption,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
},
|
||||
series: [{
|
||||
name: props.title || '数据',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: props.data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
}],
|
||||
};
|
||||
|
||||
case 'area':
|
||||
return {
|
||||
...baseOption,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.xAxisData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: props.series.map(item => ({
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
smooth: true,
|
||||
...item,
|
||||
})),
|
||||
};
|
||||
|
||||
default:
|
||||
return baseOption;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听数据变化
|
||||
watch(() => props.data, () => {
|
||||
nextTick(() => {
|
||||
updateChart();
|
||||
});
|
||||
}, { deep: true });
|
||||
|
||||
watch(() => props.series, () => {
|
||||
nextTick(() => {
|
||||
updateChart();
|
||||
});
|
||||
}, { deep: true });
|
||||
|
||||
// 监听窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
}
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
updateChart,
|
||||
getChartInstance: () => chartInstance,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sales-chart {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<el-card class="summary-card" :class="cardClass" shadow="never">
|
||||
<div class="card-content">
|
||||
<div class="card-icon" :class="iconClass">
|
||||
<el-icon :size="iconSize">
|
||||
<component :is="icon" />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-title">{{ title }}</div>
|
||||
<div class="card-value">{{ formattedValue }}</div>
|
||||
<div v-if="subtitle" class="card-subtitle">{{ subtitle }}</div>
|
||||
<div v-if="trend !== undefined" class="card-trend" :class="trendClass">
|
||||
<el-icon v-if="trend > 0"><ArrowUp /></el-icon>
|
||||
<el-icon v-else-if="trend < 0"><ArrowDown /></el-icon>
|
||||
<span>{{ Math.abs(trend).toFixed(2) }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
value: number | string;
|
||||
subtitle?: string;
|
||||
trend?: number;
|
||||
icon: string;
|
||||
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
||||
format?: 'currency' | 'number' | 'percent';
|
||||
iconSize?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: 'primary',
|
||||
format: 'number',
|
||||
iconSize: 24,
|
||||
});
|
||||
|
||||
// 格式化值
|
||||
const formattedValue = computed(() => {
|
||||
if (typeof props.value === 'string') {
|
||||
return props.value;
|
||||
}
|
||||
|
||||
switch (props.format) {
|
||||
case 'currency':
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
style: 'currency',
|
||||
currency: 'CNY',
|
||||
}).format(props.value);
|
||||
|
||||
case 'percent':
|
||||
return `${props.value.toFixed(2)}%`;
|
||||
|
||||
case 'number':
|
||||
default:
|
||||
return new Intl.NumberFormat('zh-CN').format(props.value);
|
||||
}
|
||||
});
|
||||
|
||||
// 卡片样式类
|
||||
const cardClass = computed(() => {
|
||||
return `summary-card--${props.type}`;
|
||||
});
|
||||
|
||||
// 图标样式类
|
||||
const iconClass = computed(() => {
|
||||
return `card-icon--${props.type}`;
|
||||
});
|
||||
|
||||
// 趋势样式类
|
||||
const trendClass = computed(() => {
|
||||
if (props.trend === undefined) return '';
|
||||
if (props.trend > 0) return 'trend-up';
|
||||
if (props.trend < 0) return 'trend-down';
|
||||
return 'trend-stable';
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary-card {
|
||||
height: 120px;
|
||||
border: none;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
|
||||
.card-icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&--success {
|
||||
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||||
color: white;
|
||||
|
||||
.card-icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: white;
|
||||
|
||||
.card-icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
|
||||
color: white;
|
||||
|
||||
.card-icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&--info {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
color: white;
|
||||
|
||||
.card-icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.card-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card-trend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
|
||||
&.trend-up {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
&.trend-down {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
&.trend-stable {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* 即时销售报表组件导出
|
||||
*/
|
||||
|
||||
export { default as SalesChart } from './SalesChart.vue';
|
||||
export { default as SummaryCard } from './SummaryCard.vue';
|
||||
export { default as ProductRankingTable } from './ProductRankingTable.vue';
|
||||
@@ -0,0 +1,207 @@
|
||||
/**
|
||||
* 即时销售报表常量定义
|
||||
*/
|
||||
|
||||
/**
|
||||
* 查询类型枚举
|
||||
*/
|
||||
export enum QueryType {
|
||||
HOUR = 'hour',
|
||||
DAY = 'day',
|
||||
MONTH = 'month',
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询类型选项
|
||||
*/
|
||||
export const QUERY_TYPE_OPTIONS = [
|
||||
{ label: '按小时', value: QueryType.HOUR },
|
||||
{ label: '按天', value: QueryType.DAY },
|
||||
{ label: '按月', value: QueryType.MONTH },
|
||||
];
|
||||
|
||||
/**
|
||||
* 图表类型枚举
|
||||
*/
|
||||
export enum ChartType {
|
||||
LINE = 'line',
|
||||
BAR = 'bar',
|
||||
PIE = 'pie',
|
||||
AREA = 'area',
|
||||
}
|
||||
|
||||
/**
|
||||
* 趋势类型枚举
|
||||
*/
|
||||
export enum TrendType {
|
||||
UP = 'up',
|
||||
DOWN = 'down',
|
||||
STABLE = 'stable',
|
||||
}
|
||||
|
||||
/**
|
||||
* 排名类型枚举
|
||||
*/
|
||||
export enum RankingType {
|
||||
TOP_SELLING = 'topSelling',
|
||||
SLOW_SELLING = 'slowSelling',
|
||||
}
|
||||
|
||||
/**
|
||||
* 时间间隔配置
|
||||
*/
|
||||
export const TIME_INTERVALS = {
|
||||
[QueryType.HOUR]: 60, // 分钟
|
||||
[QueryType.DAY]: 24, // 小时
|
||||
[QueryType.MONTH]: 30, // 天
|
||||
};
|
||||
|
||||
/**
|
||||
* 分页配置
|
||||
*/
|
||||
export const PAGINATION_CONFIG = {
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
defaultPageSize: 10,
|
||||
defaultCurrentPage: 1,
|
||||
};
|
||||
|
||||
/**
|
||||
* 表格列配置
|
||||
*/
|
||||
export const TABLE_COLUMNS = {
|
||||
PRODUCT_RANKING: [
|
||||
{ prop: 'ranking', label: '排名', width: 60, align: 'center' },
|
||||
{ prop: 'productName', label: '商品名称', minWidth: 150 },
|
||||
{ prop: 'categoryName', label: '分类', width: 100 },
|
||||
{ prop: 'salesAmount', label: '销售额', width: 120, align: 'right' },
|
||||
{ prop: 'salesQuantity', label: '销量', width: 100, align: 'right' },
|
||||
{ prop: 'salesCount', label: '笔数', width: 80, align: 'right' },
|
||||
{ prop: 'averagePrice', label: '均价', width: 100, align: 'right' },
|
||||
{ prop: 'marketShare', label: '市场份额', width: 100, align: 'right' },
|
||||
],
|
||||
TIME_PERIOD_SALES: [
|
||||
{ prop: 'timePeriodName', label: '时段', width: 120 },
|
||||
{ prop: 'salesAmount', label: '销售额', width: 120, align: 'right' },
|
||||
{ prop: 'salesCount', label: '销售笔数', width: 100, align: 'right' },
|
||||
{ prop: 'salesQuantity', label: '销售数量', width: 100, align: 'right' },
|
||||
{ prop: 'averageCustomerPrice', label: '平均客单价', width: 120, align: 'right' },
|
||||
{ prop: 'customerCount', label: '客户数', width: 80, align: 'right' },
|
||||
{ prop: 'productVarietyCount', label: '商品种类', width: 100, align: 'right' },
|
||||
{ prop: 'yearOverYearSalesAmount', label: '同比销售额', width: 120, align: 'right' },
|
||||
{ prop: 'monthOverMonthSalesAmount', label: '环比销售额', width: 120, align: 'right' },
|
||||
],
|
||||
};
|
||||
|
||||
/**
|
||||
* 图表配置
|
||||
*/
|
||||
export const CHART_OPTIONS = {
|
||||
SALES_TREND: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['销售额', '销售笔数'],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '销售额(元)',
|
||||
position: 'left',
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '销售笔数',
|
||||
position: 'right',
|
||||
},
|
||||
],
|
||||
},
|
||||
CUSTOMER_ANALYSIS: {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c}% ({d}%)',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 权限配置
|
||||
*/
|
||||
export const PERMISSIONS = {
|
||||
VIEW: 'supermarket_realtimeSalesReport_view',
|
||||
EDIT: 'supermarket_realtimeSalesReport_edit',
|
||||
EXPORT: 'supermarket_realtimeSalesReport_export',
|
||||
};
|
||||
|
||||
/**
|
||||
* 默认查询条件
|
||||
*/
|
||||
export const DEFAULT_QUERY = {
|
||||
queryType: QueryType.DAY,
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
storeId: '',
|
||||
categoryId: '',
|
||||
productId: '',
|
||||
topLimit: 10,
|
||||
current: 1,
|
||||
size: 10,
|
||||
};
|
||||
|
||||
/**
|
||||
* 刷新间隔配置（毫秒）
|
||||
*/
|
||||
export const REFRESH_INTERVALS = {
|
||||
REALTIME: 60000, // 1分钟
|
||||
NORMAL: 300000, // 5分钟
|
||||
SLOW: 900000, // 15分钟
|
||||
};
|
||||
|
||||
/**
|
||||
* 导出配置
|
||||
*/
|
||||
export const EXPORT_CONFIG = {
|
||||
FORMATS: ['xlsx', 'pdf', 'csv'],
|
||||
DEFAULT_FORMAT: 'xlsx',
|
||||
MAX_ROWS: 10000,
|
||||
};
|
||||
|
||||
/**
|
||||
* 缓存配置
|
||||
*/
|
||||
export const CACHE_CONFIG = {
|
||||
TTL: 300000, // 5分钟
|
||||
KEY_PREFIX: 'realtime_sales_report_',
|
||||
};
|
||||
|
||||
/**
|
||||
* 错误消息
|
||||
*/
|
||||
export const ERROR_MESSAGES = {
|
||||
LOAD_DATA_FAILED: '加载数据失败',
|
||||
REFRESH_DATA_FAILED: '刷新数据失败',
|
||||
EXPORT_DATA_FAILED: '导出数据失败',
|
||||
INVALID_QUERY_PARAMS: '查询参数无效',
|
||||
NO_DATA: '暂无数据',
|
||||
NETWORK_ERROR: '网络错误，请检查网络连接',
|
||||
};
|
||||
|
||||
/**
|
||||
* 成功消息
|
||||
*/
|
||||
export const SUCCESS_MESSAGES = {
|
||||
DATA_LOADED: '数据加载成功',
|
||||
DATA_REFRESHED: '数据刷新成功',
|
||||
DATA_EXPORTED: '数据导出成功',
|
||||
CACHE_REFRESHED: '缓存刷新成功',
|
||||
};
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,196 @@
|
||||
/**
|
||||
* 即时销售报表工具函数
|
||||
*/
|
||||
|
||||
/**
|
||||
* 格式化货币
|
||||
* @param value 数值
|
||||
* @param currency 货币类型
|
||||
* @returns 格式化后的货币字符串
|
||||
*/
|
||||
export const formatCurrency = (value: number, currency: string = 'CNY'): string => {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
style: 'currency',
|
||||
currency,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化数字
|
||||
* @param value 数值
|
||||
* @returns 格式化后的数字字符串
|
||||
*/
|
||||
export const formatNumber = (value: number): string => {
|
||||
return new Intl.NumberFormat('zh-CN').format(value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化百分比
|
||||
* @param value 数值
|
||||
* @param decimals 小数位数
|
||||
* @returns 格式化后的百分比字符串
|
||||
*/
|
||||
export const formatPercent = (value: number, decimals: number = 2): string => {
|
||||
return `${(value * 100).toFixed(decimals)}%`;
|
||||
};
|
||||
|
||||
/**
|
||||
* 格式化日期时间
|
||||
* @param date 日期
|
||||
* @param format 格式
|
||||
* @returns 格式化后的日期字符串
|
||||
*/
|
||||
export const formatDateTime = (date: Date | string, format: string = 'YYYY-MM-DD HH:mm:ss'): string => {
|
||||
const d = new Date(date);
|
||||
const year = d.getFullYear();
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
const hours = String(d.getHours()).padStart(2, '0');
|
||||
const minutes = String(d.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(d.getSeconds()).padStart(2, '0');
|
||||
|
||||
return format
|
||||
.replace('YYYY', String(year))
|
||||
.replace('MM', month)
|
||||
.replace('DD', day)
|
||||
.replace('HH', hours)
|
||||
.replace('mm', minutes)
|
||||
.replace('ss', seconds);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取趋势样式类
|
||||
* @param rate 变化率
|
||||
* @returns 样式类名
|
||||
*/
|
||||
export const getTrendClass = (rate: number): string => {
|
||||
if (rate > 0) return 'trend-up';
|
||||
if (rate < 0) return 'trend-down';
|
||||
return 'trend-stable';
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取排名标签类型
|
||||
* @param ranking 排名
|
||||
* @returns 标签类型
|
||||
*/
|
||||
export const getRankingTagType = (ranking: number): 'danger' | 'warning' | 'primary' => {
|
||||
if (ranking <= 3) return 'danger';
|
||||
if (ranking <= 10) return 'warning';
|
||||
return 'primary';
|
||||
};
|
||||
|
||||
/**
|
||||
* 计算增长率
|
||||
* @param current 当前值
|
||||
* @param previous 之前值
|
||||
* @returns 增长率
|
||||
*/
|
||||
export const calculateGrowthRate = (current: number, previous: number): number => {
|
||||
if (previous === 0) return current > 0 ? 100 : 0;
|
||||
return ((current - previous) / previous) * 100;
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成随机数据（用于演示）
|
||||
* @param min 最小值
|
||||
* @param max 最大值
|
||||
* @returns 随机数
|
||||
*/
|
||||
export const generateRandomData = (min: number, max: number): number => {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成时间序列数据
|
||||
* @param startTime 开始时间
|
||||
* @param endTime 结束时间
|
||||
* @param interval 间隔（分钟）
|
||||
* @returns 时间序列数组
|
||||
*/
|
||||
export const generateTimeSeries = (startTime: Date, endTime: Date, interval: number = 60): string[] => {
|
||||
const times: string[] = [];
|
||||
const current = new Date(startTime);
|
||||
|
||||
while (current <= endTime) {
|
||||
times.push(formatDateTime(current, 'HH:mm'));
|
||||
current.setMinutes(current.getMinutes() + interval);
|
||||
}
|
||||
|
||||
return times;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取默认查询时间范围
|
||||
* @param type 查询类型
|
||||
* @returns 查询时间范围
|
||||
*/
|
||||
export const getDefaultTimeRange = (type: 'hour' | 'day' | 'month' = 'day') => {
|
||||
const now = new Date();
|
||||
const startTime = new Date(now);
|
||||
|
||||
switch (type) {
|
||||
case 'hour':
|
||||
startTime.setHours(now.getHours() - 24);
|
||||
break;
|
||||
case 'day':
|
||||
startTime.setDate(now.getDate() - 7);
|
||||
break;
|
||||
case 'month':
|
||||
startTime.setMonth(now.getMonth() - 6);
|
||||
break;
|
||||
}
|
||||
|
||||
return {
|
||||
startTime: formatDateTime(startTime),
|
||||
endTime: formatDateTime(now),
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 颜色配置
|
||||
*/
|
||||
export const CHART_COLORS = {
|
||||
primary: '#409EFF',
|
||||
success: '#67C23A',
|
||||
warning: '#E6A23C',
|
||||
danger: '#F56C6C',
|
||||
info: '#909399',
|
||||
gradient: {
|
||||
blue: ['#667eea', '#764ba2'],
|
||||
green: ['#43e97b', '#38f9d7'],
|
||||
orange: ['#f093fb', '#f5576c'],
|
||||
purple: ['#4facfe', '#00f2fe'],
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 图表配置
|
||||
*/
|
||||
export const CHART_CONFIG = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
data: [],
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 表格配置
|
||||
*/
|
||||
export const TABLE_CONFIG = {
|
||||
stripe: true,
|
||||
border: false,
|
||||
size: 'default' as const,
|
||||
showOverflowTooltip: true,
|
||||
};
|
||||
Reference in new issue
Block a user