feat(wms): 重构仓库管理系统并优化图表显示

云

8 天以前 fdd158306bf6dc3584f5110a385323f4a8dfb463

 src/views/dashboard/bagCodeHome/chart-options.ts

@@ -1,5 +1,16 @@
import type { EChartsOption } from '@vben/plugins/echarts';

/** 农业主题：翠绿主色（对齐登录页，浅色玻璃版） */
export const AGRI_GREEN = '#10b981';
export const AGRI_GREEN_LIGHT = '#34d399';
export const AGRI_GREEN_PALE = '#6ee7b7';
export const AGRI_TEXT = '#134e4a';
export const AGRI_TEXT_MUTED = 'rgba(15, 78, 60, 0.62)';
export const AGRI_SPLIT = 'rgba(16, 185, 129, 0.18)';

/** 深底通用文本样式 */
const darkText: NonNullable<EChartsOption['textStyle']> = { color: AGRI_TEXT };

/** 袋码生成趋势柱状图配置 */
export function getBagCodeTrendChartOptions(
  dates: string[],
@@ -7,19 +18,31 @@
): EChartsOption {
  return {
    grid: { bottom: 40, left: 50, right: 20, top: 20 },
    legend: { bottom: 0, data: ['袋码生成量'] },
    legend: { bottom: 0, data: ['袋码生成量'], textStyle: { color: AGRI_TEXT_MUTED } },
    series: [
      {
        barMaxWidth: 32,
        data: counts,
        itemStyle: { borderRadius: 4, color: '#409EFF' },
        itemStyle: { borderRadius: 4, color: AGRI_GREEN },
        name: '袋码生成量',
        type: 'bar',
      },
    ],
    textStyle: darkText,
    tooltip: { axisPointer: { type: 'shadow' }, trigger: 'axis' },
    xAxis: { axisTick: { show: false }, data: dates, type: 'category' },
    yAxis: { minInterval: 1, type: 'value' },
    xAxis: {
      axisLine: { lineStyle: { color: AGRI_SPLIT } },
      axisLabel: { color: AGRI_TEXT_MUTED },
      axisTick: { show: false },
      data: dates,
      type: 'category',
    },
    yAxis: {
      minInterval: 1,
      splitLine: { lineStyle: { color: AGRI_SPLIT } },
      axisLabel: { color: AGRI_TEXT_MUTED },
      type: 'value',
    },
  };
}

@@ -28,18 +51,53 @@
  data: Array<{ itemStyle: { color: string }; name: string; value: number }>,
): EChartsOption {
  return {
    legend: { bottom: 0, type: 'scroll' },
    legend: { bottom: 0, textStyle: { color: AGRI_TEXT_MUTED }, type: 'scroll' },
    series: [
      {
        avoidLabelOverlap: true,
        data,
        emphasis: { label: { fontSize: 14, fontWeight: 'bold', show: true } },
        itemStyle: { borderColor: '#fff', borderRadius: 6, borderWidth: 2 },
        label: { formatter: '{b}\n{c}', show: true },
        itemStyle: { borderColor: '#ffffff', borderRadius: 6, borderWidth: 2 },
        label: { color: AGRI_TEXT, formatter: '{b}\n{c}', show: true },
        radius: ['40%', '70%'],
        type: 'pie',
      },
    ],
    textStyle: darkText,
    tooltip: { formatter: '{b}: {c} ({d}%)', trigger: 'item' },
  };
}

/** 消费者扫码地区分布横向柱状图配置 */
export function getRegionBarChartOptions(
  data: Array<{ name: string; count: number }>,
): EChartsOption {
  const sorted = [...data].sort((a, b) => b.count - a.count);
  return {
    grid: { bottom: 20, left: 16, right: 40, top: 20, containLabel: true },
    series: [
      {
        barMaxWidth: 20,
        data: sorted.map((d) => d.count),
        itemStyle: { borderRadius: 4, color: AGRI_GREEN },
        name: '扫码次数',
        type: 'bar',
      },
    ],
    textStyle: darkText,
    tooltip: { axisPointer: { type: 'shadow' }, trigger: 'axis' },
    xAxis: {
      axisLabel: { color: AGRI_TEXT_MUTED },
      axisLine: { lineStyle: { color: AGRI_SPLIT } },
      splitLine: { lineStyle: { color: AGRI_SPLIT } },
      type: 'value',
    },
    yAxis: {
      axisLabel: { color: AGRI_TEXT },
      axisLine: { lineStyle: { color: AGRI_SPLIT } },
      data: sorted.map((d) => d.name),
      type: 'category',
      inverse: true,
    },
  };
}