From 45c2bd0e88d3b67370e1084eff85da4dd320355f Mon Sep 17 00:00:00 2001
From: zjf <1799650030@qq.com>
Date: Mon, 22 Sep 2025 19:32:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=B3=E6=97=B6=E9=94=80=E5=94=AE=E6=8A=A5?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jsxs/components/ProductRankingTable.vue   |  339 ++++
 .../report/jsxs/components/SalesChart.vue     |  191 +++
 .../report/jsxs/components/SummaryCard.vue    |  203 +++
 .../report/jsxs/components/index.ts           |    7 +
 .../report/jsxs/constants/index.ts            |  207 +++
 .../supermarketerp/report/jsxs/index.vue      | 1480 +++++++++++++++++
 .../supermarketerp/report/jsxs/utils/index.ts |  196 +++
 7 files changed, 2623 insertions(+)
 create mode 100644 src/views/supermarketerp/report/jsxs/components/ProductRankingTable.vue
 create mode 100644 src/views/supermarketerp/report/jsxs/components/SalesChart.vue
 create mode 100644 src/views/supermarketerp/report/jsxs/components/SummaryCard.vue
 create mode 100644 src/views/supermarketerp/report/jsxs/components/index.ts
 create mode 100644 src/views/supermarketerp/report/jsxs/constants/index.ts
 create mode 100644 src/views/supermarketerp/report/jsxs/index.vue
 create mode 100644 src/views/supermarketerp/report/jsxs/utils/index.ts

diff --git a/src/views/supermarketerp/report/jsxs/components/ProductRankingTable.vue b/src/views/supermarketerp/report/jsxs/components/ProductRankingTable.vue
new file mode 100644
index 0000000..000c37b
--- /dev/null
+++ b/src/views/supermarketerp/report/jsxs/components/ProductRankingTable.vue
@@ -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>
diff --git a/src/views/supermarketerp/report/jsxs/components/SalesChart.vue b/src/views/supermarketerp/report/jsxs/components/SalesChart.vue
new file mode 100644
index 0000000..075ee95
--- /dev/null
+++ b/src/views/supermarketerp/report/jsxs/components/SalesChart.vue
@@ -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>
diff --git a/src/views/supermarketerp/report/jsxs/components/SummaryCard.vue b/src/views/supermarketerp/report/jsxs/components/SummaryCard.vue
new file mode 100644
index 0000000..03f0f88
--- /dev/null
+++ b/src/views/supermarketerp/report/jsxs/components/SummaryCard.vue
@@ -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>
diff --git a/src/views/supermarketerp/report/jsxs/components/index.ts b/src/views/supermarketerp/report/jsxs/components/index.ts
new file mode 100644
index 0000000..051b344
--- /dev/null
+++ b/src/views/supermarketerp/report/jsxs/components/index.ts
@@ -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';
diff --git a/src/views/supermarketerp/report/jsxs/constants/index.ts b/src/views/supermarketerp/report/jsxs/constants/index.ts
new file mode 100644
index 0000000..f65fddc
--- /dev/null
+++ b/src/views/supermarketerp/report/jsxs/constants/index.ts
@@ -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: '缓存刷新成功',
+};
diff --git a/src/views/supermarketerp/report/jsxs/index.vue b/src/views/supermarketerp/report/jsxs/index.vue
new file mode 100644
index 0000000..4a4b72b
--- /dev/null
+++ b/src/views/supermarketerp/report/jsxs/index.vue
@@ -0,0 +1,1480 @@
+<template>
+  <div class="realtime-sales-report">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-left">
+        <h2 class="page-title">即时销售报表</h2>
+        <p class="page-description">实时监控销售数据，掌握经营动态</p>
+      </div>
+      <div class="header-right">
+        <el-button type="primary" @click="refreshData" :loading="refreshing">
+          <el-icon><Refresh /></el-icon>
+          刷新数据
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 查询条件 -->
+    <el-card class="query-card" shadow="never">
+      <el-form :model="queryForm" :inline="true" class="query-form">
+        <el-form-item label="查询类型">
+          <el-select v-model="queryForm.queryType" placeholder="请选择查询类型" style="width: 120px">
+            <el-option label="按小时" value="hour" />
+            <el-option label="按天" value="day" />
+            <el-option label="按月" value="month" />
+          </el-select>
+        </el-form-item>
+        
+        <!-- 时间选择器 - 根据查询类型动态显示 -->
+        <template v-if="queryForm.queryType === 'hour'">
+          <el-form-item label="开始时间">
+            <el-date-picker
+              v-model="queryForm.startTime"
+              type="datetime"
+              placeholder="选择开始时间"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              style="width: 200px"
+            />
+          </el-form-item>
+          <el-form-item label="结束时间">
+            <el-date-picker
+              v-model="queryForm.endTime"
+              type="datetime"
+              placeholder="选择结束时间"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              style="width: 200px"
+            />
+          </el-form-item>
+        </template>
+        
+        <template v-else-if="queryForm.queryType === 'day'">
+          <el-form-item label="开始日期">
+            <el-date-picker
+              v-model="queryForm.startDate"
+              type="date"
+              placeholder="选择开始日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="width: 150px"
+            />
+          </el-form-item>
+          <el-form-item label="结束日期">
+            <el-date-picker
+              v-model="queryForm.endDate"
+              type="date"
+              placeholder="选择结束日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="width: 150px"
+            />
+          </el-form-item>
+        </template>
+        
+        <template v-else-if="queryForm.queryType === 'month'">
+          <el-form-item label="开始月份">
+            <el-date-picker
+              v-model="queryForm.startDate"
+              type="month"
+              placeholder="选择开始月份"
+              format="YYYY-MM"
+              value-format="YYYY-MM"
+              style="width: 150px"
+            />
+          </el-form-item>
+          <el-form-item label="结束月份">
+            <el-date-picker
+              v-model="queryForm.endDate"
+              type="month"
+              placeholder="选择结束月份"
+              format="YYYY-MM"
+              value-format="YYYY-MM"
+              style="width: 150px"
+            />
+          </el-form-item>
+        </template>
+        
+        
+        
+        <el-form-item label="排名数量">
+          <el-input-number
+            v-model="queryForm.topLimit"
+            :min="1"
+            :max="100"
+            placeholder="排名数量"
+            style="width: 120px"
+          />
+        </el-form-item>
+        
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery">
+            <el-icon><Search /></el-icon>
+            查询
+          </el-button>
+          <el-button @click="resetQuery">
+            <el-icon><RefreshLeft /></el-icon>
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+      
+      <!-- 高级选项 -->
+      <el-collapse v-model="advancedOptionsVisible" class="advanced-options">
+        <el-collapse-item title="高级选项" name="advanced">
+          <el-form :model="queryForm" :inline="true" class="advanced-form">
+            <el-form-item label="包含实时数据">
+              <el-switch v-model="queryForm.includeRealtime" />
+            </el-form-item>
+            <el-form-item label="按分钟更新">
+              <el-switch v-model="queryForm.updateByMinute" />
+            </el-form-item>
+            <el-form-item label="快速选择">
+              <el-button-group>
+                <el-button size="small" @click="setQuickTime('today')">今日</el-button>
+                <el-button size="small" @click="setQuickTime('yesterday')">昨日</el-button>
+                <el-button size="small" @click="setQuickTime('thisWeek')">本周</el-button>
+                <el-button size="small" @click="setQuickTime('thisMonth')">本月</el-button>
+                <el-button size="small" @click="setQuickTime('lastMonth')">上月</el-button>
+              </el-button-group>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+      </el-collapse>
+    </el-card>
+
+    <!-- 销售汇总卡片 -->
+    <div class="summary-cards" v-loading="loading">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-card class="summary-card sales-amount">
+            <div class="card-content">
+              <div class="card-icon">
+                <el-icon><Money /></el-icon>
+              </div>
+              <div class="card-info">
+                <div class="card-title">总销售额</div>
+                <div class="card-value">{{ formatCurrency(salesSummary?.totalSalesAmount || 0) }}</div>
+                <div class="card-trend" :class="getTrendClass(salesSummary?.salesAmountGrowthRate)">
+                  <el-icon v-if="salesSummary?.salesAmountGrowthRate > 0"><ArrowUp /></el-icon>
+                  <el-icon v-else-if="salesSummary?.salesAmountGrowthRate < 0"><ArrowDown /></el-icon>
+                  <span>{{ Math.abs(salesSummary?.salesAmountGrowthRate || 0).toFixed(2) }}%</span>
+                </div>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card class="summary-card sales-count">
+            <div class="card-content">
+              <div class="card-icon">
+                <el-icon><ShoppingCart /></el-icon>
+              </div>
+              <div class="card-info">
+                <div class="card-title">销售笔数</div>
+                <div class="card-value">{{ formatNumber(salesSummary?.totalSalesCount || 0) }}</div>
+                <div class="card-trend" :class="getTrendClass(salesSummary?.salesCountGrowthRate)">
+                  <el-icon v-if="salesSummary?.salesCountGrowthRate > 0"><ArrowUp /></el-icon>
+                  <el-icon v-else-if="salesSummary?.salesCountGrowthRate < 0"><ArrowDown /></el-icon>
+                  <span>{{ Math.abs(salesSummary?.salesCountGrowthRate || 0).toFixed(2) }}%</span>
+                </div>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card class="summary-card customer-price">
+            <div class="card-content">
+              <div class="card-icon">
+                <el-icon><User /></el-icon>
+              </div>
+              <div class="card-info">
+                <div class="card-title">平均客单价</div>
+                <div class="card-value">{{ formatCurrency(salesSummary?.averageCustomerValue || 0) }}</div>
+                <div class="card-subtitle">
+                  总销量: {{ formatNumber(salesSummary?.totalSalesQuantity || 0) }}
+                </div>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card class="summary-card product-variety">
+            <div class="card-content">
+              <div class="card-icon">
+                <el-icon><Box /></el-icon>
+              </div>
+              <div class="card-info">
+                <div class="card-title">商品种类</div>
+                <div class="card-value">{{ formatNumber(salesSummary?.productVarietyCount || 0) }}</div>
+                <div class="card-subtitle">
+                  实时状态: <el-tag :type="getRealtimeStatusType(salesSummary?.realtimeStatus)" size="small">
+                    {{ getRealtimeStatusText(salesSummary?.realtimeStatus) }}
+                  </el-tag>
+                </div>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+
+    <!-- 图表区域 -->
+    <el-row :gutter="20" class="chart-section">
+      <el-col :span="12">
+        <el-card class="chart-card" shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span>销售趋势</span>
+              <el-button size="small" @click="refreshCharts">
+                <el-icon><Refresh /></el-icon>
+                刷新图表
+              </el-button>
+            </div>
+          </template>
+          <div ref="salesTrendChart" class="chart-container"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="chart-card" shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span>客单价分析</span>
+            </div>
+          </template>
+          <div ref="customerAnalysisChart" class="chart-container"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 商品排名区域 -->
+    <el-row :gutter="20" class="ranking-section">
+      <el-col :span="12">
+        <el-card class="ranking-card" shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span>畅销品TOP10</span>
+              <el-button size="small" @click="viewAllTopProducts">查看全部</el-button>
+            </div>
+          </template>
+          <el-table :data="topSellingProducts" stripe v-loading="loading">
+            <el-table-column prop="ranking" label="排名" width="60" align="center">
+              <template #default="{ row }">
+                <el-tag :type="row.ranking <= 3 ? 'danger' : 'primary'" size="small">
+                  {{ row.ranking }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="productName" label="商品名称" show-overflow-tooltip />
+            <el-table-column prop="salesAmount" label="销售额" width="100" align="right">
+              <template #default="{ row }">
+                {{ formatCurrency(getNumericValue(row.salesAmount)) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="salesQuantity" label="销量" width="80" align="right">
+              <template #default="{ row }">
+                {{ formatNumber(getNumericValue(row.salesQuantity)) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="stockQuantity" label="库存" width="80" align="right">
+              <template #default="{ row }">
+                {{ formatNumber(getNumericValue(row.stockQuantity)) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="stockStatus" label="库存状态" width="100" align="center">
+              <template #default="{ row }">
+                <el-tag 
+                  :type="getStockStatusType(row.stockStatus)" 
+                  size="small"
+                >
+                  {{ getStockStatusText(row.stockStatus) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="ranking-card" shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span>滞销品TOP10</span>
+              <el-button size="small" @click="viewAllSlowProducts">查看全部</el-button>
+            </div>
+          </template>
+          <el-table :data="slowSellingProducts" stripe v-loading="loading">
+            <el-table-column prop="ranking" label="排名" width="60" align="center">
+              <template #default="{ row }">
+                <el-tag type="warning" size="small">
+                  {{ row.ranking }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="productName" label="商品名称" show-overflow-tooltip />
+            <el-table-column prop="salesAmount" label="销售额" width="100" align="right">
+              <template #default="{ row }">
+                {{ formatCurrency(getNumericValue(row.salesAmount)) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="salesQuantity" label="销量" width="80" align="right">
+              <template #default="{ row }">
+                {{ formatNumber(getNumericValue(row.salesQuantity)) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="stockQuantity" label="库存" width="80" align="right">
+              <template #default="{ row }">
+                {{ formatNumber(getNumericValue(row.stockQuantity)) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="stockStatus" label="库存状态" width="100" align="center">
+              <template #default="{ row }">
+                <el-tag 
+                  :type="getStockStatusType(row.stockStatus)" 
+                  size="small"
+                >
+                  {{ getStockStatusText(row.stockStatus) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 时段销售数据 -->
+    <el-card class="time-period-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <span>时段销售数据</span>
+          <el-button size="small" @click="refreshTimePeriodData">
+            <el-icon><Refresh /></el-icon>
+            刷新数据
+          </el-button>
+        </div>
+      </template>
+      <el-table :data="timePeriodSales" stripe v-loading="loading" :expand-row-keys="expandedRows" row-key="timeLabel">
+        <el-table-column type="expand" width="50">
+          <template #default="{ row }">
+            <div class="product-details">
+              <h4>商品明细</h4>
+              <el-table :data="row.productDetails || []" size="small" style="margin-top: 10px;">
+                <el-table-column prop="productName" label="商品名称" width="150" show-overflow-tooltip />
+                <el-table-column prop="productCode" label="商品编码" width="120" />
+                <el-table-column prop="categoryName" label="分类" width="100" />
+                <el-table-column prop="quantity" label="数量" width="80" align="right">
+                  <template #default="{ row: product }">
+                    {{ formatNumber(getNumericValue(product.quantity)) }} {{ product.unitName }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="unitPrice" label="单价" width="80" align="right">
+                  <template #default="{ row: product }">
+                    {{ formatCurrency(getNumericValue(product.unitPrice)) }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="totalAmount" label="金额" width="100" align="right">
+                  <template #default="{ row: product }">
+                    {{ formatCurrency(getNumericValue(product.totalAmount)) }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="salesCount" label="销售次数" width="100" align="right">
+                  <template #default="{ row: product }">
+                    {{ formatNumber(getNumericValue(product.salesCount)) }}
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="timeLabel" label="时段" width="120" />
+        <el-table-column prop="salesAmount" label="销售额" width="120" align="right">
+          <template #default="{ row }">
+            {{ formatCurrency(getNumericValue(row.salesAmount)) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="salesCount" label="销售笔数" width="100" align="right">
+          <template #default="{ row }">
+            {{ formatNumber(getNumericValue(row.salesCount)) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="customerValue" label="客单价" width="100" align="right">
+          <template #default="{ row }">
+            {{ formatCurrency(getNumericValue(row.customerValue)) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="salesQuantity" label="销量" width="100" align="right">
+          <template #default="{ row }">
+            {{ formatNumber(getNumericValue(row.salesQuantity)) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="growthRate" label="增长率" width="100" align="right">
+          <template #default="{ row }">
+            <span :class="getTrendClass(getNumericValue(row.growthRate))">
+              {{ getNumericValue(row.growthRate) > 0 ? '+' : '' }}{{ getNumericValue(row.growthRate) }}%
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup name="RealtimeSalesReport">
+import { ref, reactive, onMounted, nextTick } from 'vue';
+import { ElMessage } from 'element-plus';
+import {
+  Refresh,
+  Download,
+  Search,
+  RefreshLeft,
+  Money,
+  ShoppingCart,
+  User,
+  Box,
+  ArrowUp,
+  ArrowDown,
+} from '@element-plus/icons-vue';
+import * as echarts from 'echarts';
+import {
+  getRealtimeSalesReport,
+  getTop10Products,
+  getBottom10Products,
+  getTimePeriodSales,
+  getCustomerAnalysis,
+  refreshRealtimeData,
+} from '/@/api/supermarketerp/realtimeSalesReport';
+
+// 响应式数据
+const refreshing = ref(false);
+const loading = ref(false);
+const isInitialized = ref(false);
+const debounceTimer = ref<NodeJS.Timeout | null>(null);
+const salesTrendChart = ref<HTMLElement>();
+const customerAnalysisChart = ref<HTMLElement>();
+
+// 查询表单
+const queryForm = reactive({
+  queryType: 'day',
+  startTime: '',
+  endTime: '',
+  startDate: '',
+  endDate: '',
+  topLimit: 10,
+  includeRealtime: true,
+  updateByMinute: false,
+});
+
+// 高级选项显示状态
+const advancedOptionsVisible = ref([]);
+
+// 数据
+const salesSummary = ref();
+const topSellingProducts = ref([]);
+const slowSellingProducts = ref([]);
+const timePeriodSales = ref([]);
+const customerAnalysis = ref();
+const salesTrend = ref([]);
+const expandedRows = ref([]);
+
+// 图表实例
+let salesTrendChartInstance: echarts.ECharts | null = null;
+let customerAnalysisChartInstance: echarts.ECharts | null = null;
+
+// 初始化查询条件
+const initQueryForm = () => {
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  
+  // 根据查询类型设置默认时间
+  if (queryForm.queryType === 'hour') {
+    queryForm.startTime = today.toISOString().slice(0, 19).replace('T', ' ');
+    queryForm.endTime = now.toISOString().slice(0, 19).replace('T', ' ');
+  } else if (queryForm.queryType === 'day') {
+    queryForm.startDate = today.toISOString().slice(0, 10);
+    queryForm.endDate = now.toISOString().slice(0, 10);
+  } else if (queryForm.queryType === 'month') {
+    const thisMonth = now.toISOString().slice(0, 7);
+    queryForm.startDate = thisMonth;
+    queryForm.endDate = thisMonth;
+  }
+};
+
+// 快速选择时间
+const setQuickTime = (type: string) => {
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  
+  switch (type) {
+    case 'today':
+      if (queryForm.queryType === 'hour') {
+        queryForm.startTime = today.toISOString().slice(0, 19).replace('T', ' ');
+        queryForm.endTime = now.toISOString().slice(0, 19).replace('T', ' ');
+      } else if (queryForm.queryType === 'day') {
+        queryForm.startDate = today.toISOString().slice(0, 10);
+        queryForm.endDate = today.toISOString().slice(0, 10);
+      }
+      break;
+      
+    case 'yesterday':
+      const yesterday = new Date(today);
+      yesterday.setDate(yesterday.getDate() - 1);
+      if (queryForm.queryType === 'hour') {
+        queryForm.startTime = yesterday.toISOString().slice(0, 19).replace('T', ' ');
+        queryForm.endTime = yesterday.toISOString().slice(0, 19).replace('T', ' ');
+      } else if (queryForm.queryType === 'day') {
+        queryForm.startDate = yesterday.toISOString().slice(0, 10);
+        queryForm.endDate = yesterday.toISOString().slice(0, 10);
+      }
+      break;
+      
+    case 'thisWeek':
+      const startOfWeek = new Date(today);
+      startOfWeek.setDate(today.getDate() - today.getDay());
+      if (queryForm.queryType === 'day') {
+        queryForm.startDate = startOfWeek.toISOString().slice(0, 10);
+        queryForm.endDate = now.toISOString().slice(0, 10);
+      }
+      break;
+      
+    case 'thisMonth':
+      const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+      if (queryForm.queryType === 'day') {
+        queryForm.startDate = startOfMonth.toISOString().slice(0, 10);
+        queryForm.endDate = now.toISOString().slice(0, 10);
+      } else if (queryForm.queryType === 'month') {
+        queryForm.startDate = now.toISOString().slice(0, 7);
+        queryForm.endDate = now.toISOString().slice(0, 7);
+      }
+      break;
+      
+    case 'lastMonth':
+      const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+      const lastMonthEnd = new Date(now.getFullYear(), now.getMonth(), 0);
+      if (queryForm.queryType === 'day') {
+        queryForm.startDate = lastMonth.toISOString().slice(0, 10);
+        queryForm.endDate = lastMonthEnd.toISOString().slice(0, 10);
+      } else if (queryForm.queryType === 'month') {
+        queryForm.startDate = lastMonth.toISOString().slice(0, 7);
+        queryForm.endDate = lastMonth.toISOString().slice(0, 7);
+      }
+      break;
+  }
+};
+
+// 查询数据
+const handleQuery = async () => {
+  try {
+    await loadData();
+  } catch (error) {
+    ElMessage.error('查询失败');
+  }
+};
+
+// 重置查询
+const resetQuery = () => {
+  initQueryForm();
+  handleQuery();
+};
+
+// 监听查询表单变化，自动重新加载数据
+watch(
+  () => [queryForm.queryType, queryForm.startTime, queryForm.endTime, queryForm.startDate, queryForm.endDate],
+  () => {
+    // 只在初始化完成后才自动重新加载数据
+    if (isInitialized.value) {
+      // 清除之前的定时器
+      if (debounceTimer.value) {
+        clearTimeout(debounceTimer.value);
+      }
+      
+      // 防抖处理，500ms后执行
+      debounceTimer.value = setTimeout(async () => {
+        await nextTick();
+        await loadData();
+      }, 500);
+    }
+  },
+  { deep: true }
+);
+
+// 加载数据
+const loadData = async () => {
+  loading.value = true;
+  try {
+    // 加载完整报表数据
+    const reportData = await getRealtimeSalesReport(queryForm);
+    
+    if (reportData.code === 0 && reportData.data) {
+      // 使用后端返回的数据
+      salesSummary.value = reportData.data.salesSummary || getMockSalesSummary();
+      topSellingProducts.value = reportData.data.topSellingProducts || [];
+      slowSellingProducts.value = reportData.data.slowSellingProducts || [];
+      timePeriodSales.value = reportData.data.timePeriodSales || [];
+      customerAnalysis.value = reportData.data.customerAnalysis || getMockCustomerAnalysis();
+      salesTrend.value = reportData.data.salesTrend || [];
+      
+      ElMessage.success('数据加载成功');
+    } else {
+      throw new Error(reportData.msg || '数据加载失败');
+    }
+    
+    // 渲染图表
+    await nextTick();
+    renderCharts();
+  } catch (error) {
+    console.error('加载数据失败:', error);
+    // 使用模拟数据
+    salesSummary.value = getMockSalesSummary();
+    topSellingProducts.value = getMockTopProducts();
+    slowSellingProducts.value = getMockSlowProducts();
+    timePeriodSales.value = getMockTimePeriodSales();
+    customerAnalysis.value = getMockCustomerAnalysis();
+    salesTrend.value = []; // 空数组，不显示模拟数据
+    
+    await nextTick();
+    renderCharts();
+    
+    // 根据错误类型显示不同的提示信息
+    if (error.message && error.message.includes('权限')) {
+      ElMessage.error('权限不足，无法访问即时销售报表');
+    } else if (error.message && error.message.includes('网络')) {
+      ElMessage.error('网络连接异常，请检查网络设置');
+    } else {
+      ElMessage.warning('数据加载失败，使用模拟数据展示');
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 模拟数据生成函数 - 根据后端API文档调整
+const getMockSalesSummary = () => ({
+  totalSalesAmount: 12500.50,
+  totalSalesCount: 45,
+  averageCustomerValue: 277.79,
+  productVarietyCount: 23,
+  totalSalesQuantity: 156.5,
+  salesGrowthRate: 15.5,
+  salesGrowthRateMonth: 8.2,
+  realtimeStatus: 'MEDIUM',
+});
+
+const getMockTopProducts = () => [
+  { 
+    productId: 1001, 
+    productName: '苹果', 
+    productCode: 'P001', 
+    salesAmount: 1250.00, 
+    salesQuantity: 50.0, 
+    salesCount: 12, 
+    averagePrice: 25.00, 
+    ranking: 1, 
+    stockQuantity: 200.0, 
+    stockStatus: 'SUFFICIENT', 
+    growthRate: 12.5 
+  },
+  { 
+    productId: 1002, 
+    productName: '牛奶', 
+    productCode: 'M002', 
+    salesAmount: 980.00, 
+    salesQuantity: 49.0, 
+    salesCount: 10, 
+    averagePrice: 20.00, 
+    ranking: 2, 
+    stockQuantity: 150.0, 
+    stockStatus: 'SUFFICIENT', 
+    growthRate: 8.3 
+  },
+  { 
+    productId: 1003, 
+    productName: '面包', 
+    productCode: 'B003', 
+    salesAmount: 850.00, 
+    salesQuantity: 34.0, 
+    salesCount: 8, 
+    averagePrice: 25.00, 
+    ranking: 3, 
+    stockQuantity: 5.0, 
+    stockStatus: 'LOW', 
+    growthRate: 15.2 
+  },
+  { 
+    productId: 1004, 
+    productName: '矿泉水', 
+    productCode: 'W004', 
+    salesAmount: 720.00, 
+    salesQuantity: 36.0, 
+    salesCount: 7, 
+    averagePrice: 20.00, 
+    ranking: 4, 
+    stockQuantity: 0.0, 
+    stockStatus: 'OUT', 
+    growthRate: 6.7 
+  },
+  { 
+    productId: 1005, 
+    productName: '鸡蛋', 
+    productCode: 'E005', 
+    salesAmount: 680.00, 
+    salesQuantity: 68.0, 
+    salesCount: 6, 
+    averagePrice: 10.00, 
+    ranking: 5, 
+    stockQuantity: 100.0, 
+    stockStatus: 'SUFFICIENT', 
+    growthRate: 4.2 
+  },
+];
+
+const getMockSlowProducts = () => [
+  { 
+    productId: 2001, 
+    productName: '高级红酒', 
+    productCode: 'W001', 
+    salesAmount: 120.00, 
+    salesQuantity: 1.2, 
+    salesCount: 1, 
+    averagePrice: 100.00, 
+    ranking: 1, 
+    stockQuantity: 50.0, 
+    stockStatus: 'SUFFICIENT', 
+    growthRate: -15.3 
+  },
+  { 
+    productId: 2002, 
+    productName: '进口巧克力', 
+    productCode: 'C002', 
+    salesAmount: 80.00, 
+    salesQuantity: 2.0, 
+    salesCount: 2, 
+    averagePrice: 40.00, 
+    ranking: 2, 
+    stockQuantity: 8.0, 
+    stockStatus: 'LOW', 
+    growthRate: -8.7 
+  },
+  { 
+    productId: 2003, 
+    productName: '有机蔬菜', 
+    productCode: 'V003', 
+    salesAmount: 60.00, 
+    salesQuantity: 3.0, 
+    salesCount: 1, 
+    averagePrice: 20.00, 
+    ranking: 3, 
+    stockQuantity: 15.0, 
+    stockStatus: 'SUFFICIENT', 
+    growthRate: -12.1 
+  },
+  { 
+    productId: 2004, 
+    productName: '高端茶叶', 
+    productCode: 'T004', 
+    salesAmount: 40.00, 
+    salesQuantity: 0.8, 
+    salesCount: 1, 
+    averagePrice: 50.00, 
+    ranking: 4, 
+    stockQuantity: 0.0, 
+    stockStatus: 'OUT', 
+    growthRate: -20.5 
+  },
+  { 
+    productId: 2005, 
+    productName: '进口咖啡', 
+    productCode: 'C005', 
+    salesAmount: 30.00, 
+    salesQuantity: 0.6, 
+    salesCount: 1, 
+    averagePrice: 50.00, 
+    ranking: 5, 
+    stockQuantity: 2.0, 
+    stockStatus: 'LOW', 
+    growthRate: -25.8 
+  },
+];
+
+const getMockTimePeriodSales = () => {
+  const data = [];
+  const products = [
+    { name: '苹果', code: 'P001', category: '水果', unit: 'kg', unitName: 'kg' },
+    { name: '牛奶', code: 'M002', category: '乳制品', unit: '瓶', unitName: '瓶' },
+    { name: '面包', code: 'B003', category: '烘焙', unit: '个', unitName: '个' },
+    { name: '矿泉水', code: 'W004', category: '饮料', unit: '瓶', unitName: '瓶' },
+    { name: '鸡蛋', code: 'E005', category: '蛋类', unit: '个', unitName: '个' },
+  ];
+  
+  for (let i = 0; i < 24; i++) {
+    const productCount = Math.floor(Math.random() * 3) + 1;
+    const productDetails = [];
+    let totalAmount = 0;
+    let totalQuantity = 0;
+    
+    for (let j = 0; j < productCount; j++) {
+      const product = products[Math.floor(Math.random() * products.length)];
+      const quantity = Math.floor(Math.random() * 5) + 1;
+      const unitPrice = Math.floor(Math.random() * 50) + 10;
+      const amount = quantity * unitPrice;
+      
+      productDetails.push({
+        productId: `mock_${i}_${j}`,
+        productName: product.name,
+        productCode: product.code,
+        categoryId: `cat_${j}`,
+        categoryName: product.category,
+        unit: product.unit,
+        unitName: product.unitName,
+        quantity: quantity,
+        unitPrice: unitPrice,
+        totalAmount: amount,
+        salesCount: 1,
+      });
+      
+      totalAmount += amount;
+      totalQuantity += quantity;
+    }
+    
+    data.push({
+      timeLabel: `${i.toString().padStart(2, '0')}:00`,
+      salesAmount: totalAmount,
+      salesCount: productCount,
+      customerValue: totalAmount / productCount,
+      salesQuantity: totalQuantity,
+      growthRate: Math.floor(Math.random() * 20) - 10,
+      productDetails: productDetails,
+    });
+  }
+  return data;
+};
+
+const getMockCustomerAnalysis = () => ({
+  averageCustomerValue: 277.79,
+  maxCustomerValue: 850.00,
+  minCustomerValue: 15.50,
+  medianCustomerValue: 250.00,
+  highValueOrderRatio: 25.5,
+  valueRanges: [
+    { rangeLabel: '0-50元', orderCount: 8, percentage: 17.78 },
+    { rangeLabel: '50-100元', orderCount: 12, percentage: 26.67 },
+    { rangeLabel: '100-200元', orderCount: 15, percentage: 33.33 },
+    { rangeLabel: '200-500元', orderCount: 8, percentage: 17.78 },
+    { rangeLabel: '500+元', orderCount: 2, percentage: 4.44 },
+  ],
+});
+
+
+// 刷新数据
+const refreshData = async () => {
+  refreshing.value = true;
+  try {
+    await refreshRealtimeData();
+    await loadData();
+    ElMessage.success('数据刷新成功');
+  } catch (error) {
+    ElMessage.error('数据刷新失败');
+  } finally {
+    refreshing.value = false;
+  }
+};
+
+// 刷新图表
+const refreshCharts = async () => {
+  try {
+    await nextTick();
+    renderCharts();
+    ElMessage.success('图表刷新成功');
+  } catch (error) {
+    console.error('刷新图表失败:', error);
+    ElMessage.error('刷新图表失败');
+  }
+};
+
+// 刷新时段数据
+const refreshTimePeriodData = async () => {
+  try {
+    const timePeriodData = await getTimePeriodSales({
+      ...queryForm,
+      current: 1,
+      size: 50,
+    });
+    timePeriodSales.value = timePeriodData.data?.records || getMockTimePeriodSales();
+    ElMessage.success('时段数据刷新成功');
+  } catch (error) {
+    console.error('刷新时段数据失败:', error);
+    timePeriodSales.value = getMockTimePeriodSales();
+    ElMessage.warning('使用模拟数据');
+  }
+};
+
+
+// 查看全部畅销品
+const viewAllTopProducts = () => {
+  ElMessage.info('查看全部畅销品功能开发中...');
+};
+
+// 查看全部滞销品
+const viewAllSlowProducts = () => {
+  ElMessage.info('查看全部滞销品功能开发中...');
+};
+
+// 渲染销售趋势图表
+const renderSalesTrendChart = () => {
+  if (!salesTrendChart.value) return;
+  
+  if (!salesTrendChartInstance) {
+    salesTrendChartInstance = echarts.init(salesTrendChart.value);
+  }
+  
+  // 使用后端返回的销售趋势数据
+  let xAxisData = [];
+  let salesData = [];
+  let countData = [];
+  
+  if (salesTrend.value && salesTrend.value.length > 0) {
+    // 使用后端返回的真实数据
+    xAxisData = salesTrend.value.map(item => item.timePoint);
+    salesData = salesTrend.value.map(item => {
+      // 处理可能的数据格式（数字或对象）
+      if (typeof item.salesAmount === 'object' && item.salesAmount.parsedValue !== undefined) {
+        return item.salesAmount.parsedValue;
+      }
+      return item.salesAmount || 0;
+    });
+    countData = salesTrend.value.map(item => item.salesCount || 0);
+  } else {
+    // 如果没有数据，显示空图表
+    xAxisData = [];
+    salesData = [];
+    countData = [];
+  }
+  
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+      },
+    },
+    legend: {
+      data: ['销售额', '销售笔数'],
+    },
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '销售额(元)',
+        position: 'left',
+      },
+      {
+        type: 'value',
+        name: '销售笔数',
+        position: 'right',
+      },
+    ],
+    series: [
+      {
+        name: '销售额',
+        type: 'line',
+        yAxisIndex: 0,
+        data: salesData,
+        smooth: true,
+        itemStyle: {
+          color: '#409EFF',
+        },
+      },
+      {
+        name: '销售笔数',
+        type: 'bar',
+        yAxisIndex: 1,
+        data: countData,
+        itemStyle: {
+          color: '#67C23A',
+        },
+      },
+    ],
+    // 当没有数据时显示提示
+    graphic: xAxisData.length === 0 ? {
+      type: 'text',
+      left: 'center',
+      top: 'middle',
+      style: {
+        text: '暂无销售趋势数据',
+        fontSize: 16,
+        fill: '#999',
+      },
+    } : undefined,
+  };
+  
+  salesTrendChartInstance.setOption(option, true);
+};
+
+// 渲染客单价分析图表
+const renderCustomerAnalysisChart = () => {
+  if (!customerAnalysisChart.value) return;
+  
+  if (!customerAnalysisChartInstance) {
+    customerAnalysisChartInstance = echarts.init(customerAnalysisChart.value);
+  }
+  
+  // 使用后端数据结构
+  let data = [];
+  if (customerAnalysis.value && customerAnalysis.value.valueRanges) {
+    data = customerAnalysis.value.valueRanges.map(range => ({
+      name: range.rangeLabel,
+      value: range.orderCount,
+      percentage: range.percentage
+    }));
+  } else {
+    // 模拟数据
+    data = [
+      { name: '0-50元', value: 25, percentage: 15.5 },
+      { name: '50-100元', value: 35, percentage: 21.7 },
+      { name: '100-200元', value: 20, percentage: 12.4 },
+      { name: '200-500元', value: 15, percentage: 9.3 },
+      { name: '500+元', value: 5, percentage: 3.1 },
+    ];
+  }
+  
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      formatter: function(params) {
+        return `${params.name}<br/>订单数: ${params.value}<br/>占比: ${params.data.percentage}%`;
+      },
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+    },
+    series: [
+      {
+        name: '客单价分布',
+        type: 'pie',
+        radius: '50%',
+        data: data,
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      },
+    ],
+  };
+  
+  customerAnalysisChartInstance.setOption(option, true);
+};
+
+// 渲染所有图表
+const renderCharts = () => {
+  renderSalesTrendChart();
+  renderCustomerAnalysisChart();
+};
+
+// 格式化货币
+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 getTrendClass = (rate: number) => {
+  if (rate > 0) return 'trend-up';
+  if (rate < 0) return 'trend-down';
+  return 'trend-stable';
+};
+
+// 获取库存状态标签类型
+const getStockStatusType = (status: string) => {
+  switch (status) {
+    case 'SUFFICIENT':
+      return 'success';
+    case 'LOW':
+      return 'warning';
+    case 'OUT':
+      return 'danger';
+    default:
+      return 'info';
+  }
+};
+
+// 获取库存状态文本
+const getStockStatusText = (status: string) => {
+  switch (status) {
+    case 'SUFFICIENT':
+      return '充足';
+    case 'LOW':
+      return '不足';
+    case 'OUT':
+      return '缺货';
+    default:
+      return '未知';
+  }
+};
+
+// 获取实时状态标签类型
+const getRealtimeStatusType = (status: string) => {
+  switch (status) {
+    case 'HIGH':
+      return 'success';
+    case 'MEDIUM':
+      return 'warning';
+    case 'LOW':
+      return 'danger';
+    default:
+      return 'info';
+  }
+};
+
+// 获取实时状态文本
+const getRealtimeStatusText = (status: string) => {
+  switch (status) {
+    case 'HIGH':
+      return '高';
+    case 'MEDIUM':
+      return '中';
+    case 'LOW':
+      return '低';
+    default:
+      return '未知';
+  }
+};
+
+// 获取数值（处理复杂数据格式）
+const getNumericValue = (value: any) => {
+  if (typeof value === 'number') {
+    return value;
+  }
+  if (typeof value === 'object' && value !== null) {
+    if (value.parsedValue !== undefined) {
+      return value.parsedValue;
+    }
+    if (value.source !== undefined) {
+      return parseFloat(value.source) || 0;
+    }
+  }
+  if (typeof value === 'string') {
+    return parseFloat(value) || 0;
+  }
+  return 0;
+};
+
+
+// 根据类型生成模拟时段数据
+const getMockTimePeriodSalesByType = (type: string) => {
+  const data = [];
+  
+  if (type === 'hour') {
+    // 按小时生成24小时数据
+    for (let i = 0; i < 24; i++) {
+      data.push({
+        timePeriod: `${i}:00`,
+        timePeriodName: `${i}:00-${i + 1}:00`,
+        salesAmount: Math.floor(Math.random() * 5000) + 1000,
+        salesCount: Math.floor(Math.random() * 50) + 10,
+        salesQuantity: Math.floor(Math.random() * 100) + 20,
+        averageCustomerPrice: Math.floor(Math.random() * 50) + 50,
+        customerCount: Math.floor(Math.random() * 20) + 5,
+        productVarietyCount: Math.floor(Math.random() * 30) + 10,
+        yearOverYearSalesAmount: Math.floor(Math.random() * 1000) - 500,
+        monthOverMonthSalesAmount: Math.floor(Math.random() * 500) - 250,
+      });
+    }
+  } else if (type === 'day') {
+    // 按天生成7天数据
+    for (let i = 6; i >= 0; i--) {
+      const date = new Date();
+      date.setDate(date.getDate() - i);
+      const dateStr = date.toISOString().slice(0, 10);
+      data.push({
+        timePeriod: dateStr,
+        timePeriodName: dateStr,
+        salesAmount: Math.floor(Math.random() * 20000) + 5000,
+        salesCount: Math.floor(Math.random() * 200) + 50,
+        salesQuantity: Math.floor(Math.random() * 500) + 100,
+        averageCustomerPrice: Math.floor(Math.random() * 100) + 50,
+        customerCount: Math.floor(Math.random() * 50) + 20,
+        productVarietyCount: Math.floor(Math.random() * 50) + 30,
+        yearOverYearSalesAmount: Math.floor(Math.random() * 5000) - 2500,
+        monthOverMonthSalesAmount: Math.floor(Math.random() * 2000) - 1000,
+      });
+    }
+  } else if (type === 'month') {
+    // 按月生成12个月数据
+    for (let i = 11; i >= 0; i--) {
+      const date = new Date();
+      date.setMonth(date.getMonth() - i);
+      const monthStr = date.toISOString().slice(0, 7);
+      data.push({
+        timePeriod: monthStr,
+        timePeriodName: monthStr,
+        salesAmount: Math.floor(Math.random() * 100000) + 50000,
+        salesCount: Math.floor(Math.random() * 1000) + 500,
+        salesQuantity: Math.floor(Math.random() * 2000) + 1000,
+        averageCustomerPrice: Math.floor(Math.random() * 200) + 100,
+        customerCount: Math.floor(Math.random() * 200) + 100,
+        productVarietyCount: Math.floor(Math.random() * 100) + 50,
+        yearOverYearSalesAmount: Math.floor(Math.random() * 20000) - 10000,
+        monthOverMonthSalesAmount: Math.floor(Math.random() * 10000) - 5000,
+      });
+    }
+  }
+  
+  return data;
+};
+
+// 组件挂载
+onMounted(async () => {
+  initQueryForm();
+  await loadData();
+  // 初始化完成后，允许自动重新加载数据
+  isInitialized.value = true;
+});
+</script>
+
+<style lang="scss" scoped>
+.realtime-sales-report {
+  padding: 20px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding: 20px;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+    .header-left {
+      .page-title {
+        margin: 0 0 8px 0;
+        font-size: 24px;
+        font-weight: 600;
+        color: #303133;
+      }
+
+      .page-description {
+        margin: 0;
+        color: #909399;
+        font-size: 14px;
+      }
+    }
+
+    .header-right {
+      display: flex;
+      gap: 12px;
+    }
+  }
+
+  .query-card {
+    margin-bottom: 20px;
+
+    .query-form {
+      .el-form-item {
+        margin-bottom: 16px;
+      }
+    }
+
+    .advanced-options {
+      margin-top: 16px;
+      border-top: 1px solid #f0f0f0;
+      padding-top: 16px;
+
+      .advanced-form {
+        .el-form-item {
+          margin-bottom: 12px;
+        }
+      }
+    }
+  }
+
+  .summary-cards {
+    margin-bottom: 20px;
+
+    .summary-card {
+      height: 120px;
+      border: none;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+      &.sales-amount {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+
+        .card-icon {
+          background: rgba(255, 255, 255, 0.2);
+        }
+      }
+
+      &.sales-count {
+        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        color: white;
+
+        .card-icon {
+          background: rgba(255, 255, 255, 0.2);
+        }
+      }
+
+      &.customer-price {
+        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+        color: white;
+
+        .card-icon {
+          background: rgba(255, 255, 255, 0.2);
+        }
+      }
+
+      &.product-variety {
+        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 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;
+
+          .el-icon {
+            font-size: 24px;
+          }
+        }
+
+        .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;
+          }
+
+          .card-subtitle {
+            font-size: 12px;
+            opacity: 0.8;
+          }
+
+          .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;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .chart-section {
+    margin-bottom: 20px;
+
+    .chart-card {
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 600;
+      }
+
+      .chart-container {
+        height: 300px;
+      }
+    }
+  }
+
+  .ranking-section {
+    margin-bottom: 20px;
+
+    .ranking-card {
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .time-period-card {
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: 600;
+    }
+  }
+
+  .product-details {
+    padding: 16px;
+    background-color: #fafafa;
+    border-radius: 4px;
+    margin: 8px 0;
+
+    h4 {
+      margin: 0 0 12px 0;
+      color: #333;
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .el-table {
+      border: 1px solid #e4e7ed;
+    }
+  }
+}
+
+.text-green-500 {
+  color: #67c23a;
+}
+
+.text-red-500 {
+  color: #f56c6c;
+}
+</style>
diff --git a/src/views/supermarketerp/report/jsxs/utils/index.ts b/src/views/supermarketerp/report/jsxs/utils/index.ts
new file mode 100644
index 0000000..f6895fa
--- /dev/null
+++ b/src/views/supermarketerp/report/jsxs/utils/index.ts
@@ -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,
+};