决策分析页面

zhangwencui

4 天以前 1c20a331d9fc1be029fadbd3d0f7619fe6a83cd0

 src/views/reportAnalysis/salesStatistics/index.vue

@@ -5,51 +5,68 @@
      <!-- <div class="dashboard-header">
        <div class="factory-name">销售统计看板</div>
      </div> -->
      
      <!-- 筛选条件 -->
      <div class="filter-area">
        <div class="filter-section">
          <span class="filter-label">时间范围：</span>
          <el-date-picker
            v-model="dateRange"
          <el-date-picker v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            @change="handleDateChange"
            style="width: 240px;"
          />
                          style="width: 240px;" />
        </div>
        <div class="filter-section">
          <span class="filter-label">产品类型：</span>
          <el-select v-model="productType" placeholder="请选择产品类型" @change="handleFilterChange" style="width: 160px;">
            <el-option label="全部" value="" />
            <el-option label="砌块" value="block" />
            <el-option label="板材" value="board" />
            <el-option label="型材" value="profile" />
          <el-select v-model="productType"
                     placeholder="请选择产品类型"
                     @change="handleFilterChange"
                     style="width: 160px;">
            <el-option label="全部"
                       value="" />
            <el-option label="砌块"
                       value="block" />
            <el-option label="板材"
                       value="board" />
            <el-option label="型材"
                       value="profile" />
          </el-select>
        </div>
        <div class="filter-section">
          <span class="filter-label">销售区域：</span>
          <el-select v-model="salesArea" placeholder="请选择销售区域" @change="handleFilterChange" style="width: 160px;">
            <el-option label="全部" value="" />
            <el-option label="华东" value="east" />
            <el-option label="华北" value="north" />
            <el-option label="华南" value="south" />
            <el-option label="西南" value="southwest" />
            <el-option label="西北" value="northwest" />
          <el-select v-model="salesArea"
                     placeholder="请选择销售区域"
                     @change="handleFilterChange"
                     style="width: 160px;">
            <el-option label="全部"
                       value="" />
            <el-option label="华东"
                       value="east" />
            <el-option label="华北"
                       value="north" />
            <el-option label="华南"
                       value="south" />
            <el-option label="西南"
                       value="southwest" />
            <el-option label="西北"
                       value="northwest" />
          </el-select>
        </div>
        <div class="filter-section">
          <span class="filter-label">统计维度：</span>
          <el-select v-model="statDimension" placeholder="请选择统计维度" @change="handleFilterChange" style="width: 160px;">
            <el-option label="月度" value="month" />
            <el-option label="年度" value="year" />
          <el-select v-model="statDimension"
                     placeholder="请选择统计维度"
                     @change="handleFilterChange"
                     style="width: 160px;">
            <el-option label="月度"
                       value="month" />
            <el-option label="年度"
                       value="year" />
          </el-select>
        </div>
      </div>
      
      <div class="dashboard-content">
        <!-- 核心指标卡片 -->
        <div class="row row-1">
@@ -57,7 +74,7 @@
            <div class="panel-title">合计销量</div>
            <div class="stats-grid">
              <div class="stat-item">
                <div class="stat-value">{{ totalSalesVolume }}</div>
                <div class="stat-value sales-volume-color">{{ totalSalesVolume }}</div>
                <div class="stat-unit">立方米</div>
                <div class="stat-change">{{ salesVolumeChange }}%</div>
              </div>
@@ -67,7 +84,7 @@
            <div class="panel-title">销售金额</div>
            <div class="stats-grid">
              <div class="stat-item">
                <div class="stat-value">{{ totalSalesAmount }}</div>
                <div class="stat-value sales-amount-color">{{ totalSalesAmount }}</div>
                <div class="stat-unit">万元</div>
                <div class="stat-change">{{ salesAmountChange }}%</div>
              </div>
@@ -77,7 +94,7 @@
            <div class="panel-title">新增客户</div>
            <div class="stats-grid">
              <div class="stat-item">
                <div class="stat-value">{{ newCustomerCount }}</div>
                <div class="stat-value new-customer-color">{{ newCustomerCount }}</div>
                <div class="stat-unit">个</div>
                <div class="stat-change">{{ customerCountChange }}%</div>
              </div>
@@ -87,76 +104,129 @@
            <div class="panel-title">合计客户</div>
            <div class="stats-grid">
              <div class="stat-item">
                <div class="stat-value">{{ totalCustomerCount }}</div>
                <div class="stat-value total-customer-color">{{ totalCustomerCount }}</div>
                <div class="stat-unit">个</div>
                <div class="stat-change">{{ totalCustomerChange }}%</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 销量和销售金额趋势 -->
        <div class="row row-2">
          <div class="panel-card card-5">
            <div class="panel-title">销量趋势</div>
            <div class="chart-container">
              <div ref="salesVolumeChart" style="width: 100%; height: 100%;"></div>
              <div ref="salesVolumeChart"
                   style="width: 100%; height: 100%;"></div>
            </div>
          </div>
          <div class="panel-card card-6">
            <div class="panel-title">销售金额趋势</div>
            <div class="chart-container">
              <div ref="salesAmountChart" style="width: 100%; height: 100%;"></div>
              <div ref="salesAmountChart"
                   style="width: 100%; height: 100%;"></div>
            </div>
          </div>
        </div>
        
        <!-- 累计数据趋势 -->
        <div class="row row-3">
        <!-- <div class="row row-3">
          <div class="panel-card card-10">
            <div class="panel-title">累计销量趋势</div>
            <div class="chart-container">
              <div ref="cumulativeSalesVolumeChart" style="width: 100%; height: 100%;"></div>
              <div ref="cumulativeSalesVolumeChart"
                   style="width: 100%; height: 100%;"></div>
            </div>
          </div>
          <div class="panel-card card-11">
            <div class="panel-title">累计销售金额趋势</div>
            <div class="chart-container">
              <div ref="cumulativeSalesAmountChart" style="width: 100%; height: 100%;"></div>
              <div ref="cumulativeSalesAmountChart"
                   style="width: 100%; height: 100%;"></div>
            </div>
          </div>
        </div>
        
        </div> -->
        <!-- 图表区域和表格 -->
        <div class="row row-4">
          <!-- 左边：详细数据表格 -->
          <div class="panel-card card-9" style="flex: 2;">
          <div class="panel-card card-9"
               style="flex: 2;">
            <div class="panel-title">销售统计详细数据</div>
            <div class="table-container">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="productType" label="产品类型" width="120" />
                <el-table-column prop="salesArea" label="销售区域" width="120" />
                <el-table-column prop="period" label="统计周期" width="120" />
                <el-table-column prop="salesVolume" label="销量(立方米)" />
                <el-table-column prop="salesAmount" label="销售金额(万元)" />
                <el-table-column prop="newCustomers" label="新增客户(个)" width="150" />
                <el-table-column prop="totalCustomers" label="合计客户(个)" width="150" />
              <el-table :data="tableData"
                        style="width: 100%">
                <el-table-column prop="productType"
                                 label="产品类型"
                                 width="120"
                                 align="center">
                  <template #default="scope">
                    <el-tag :type="getProductTypeType(scope.row.productType)">
                      {{ scope.row.productType }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="salesArea"
                                 label="销售区域"
                                 width="120"
                                 align="center">
                  <template #default="scope">
                    <el-tag :type="getSalesAreaType(scope.row.salesArea)">
                      {{ scope.row.salesArea }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="period"
                                 label="统计周期"
                                 width="120" />
                <el-table-column prop="salesVolume"
                                 label="销量(立方米)"
                                 align="right">
                  <template #default="scope">
                    <span class="data-value">{{ scope.row.salesVolume }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="salesAmount"
                                 label="销售金额(万元)"
                                 align="right">
                  <template #default="scope">
                    <span class="data-value">{{ scope.row.salesAmount }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="newCustomers"
                                 label="新增客户(个)"
                                 width="150"
                                 align="right">
                  <template #default="scope">
                    <span class="data-value">{{ scope.row.newCustomers }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="totalCustomers"
                                 label="合计客户(个)"
                                 width="150"
                                 align="right">
                  <template #default="scope">
                    <span class="data-value">{{ scope.row.totalCustomers }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          
          <!-- 右边：产品类型分布和销售区域分布 -->
          <div class="chart-column" style="flex: 1; display: flex; flex-direction: column; gap: 20px;">
            <div class="panel-card card-7" style="flex: 1;">
          <div class="chart-column"
               style="flex: 1; display: flex; flex-direction: column; gap: 20px;">
            <div class="panel-card card-7"
                 style="flex: 1;">
              <div class="panel-title">产品类型分布</div>
              <div class="chart-container">
                <div ref="productTypeChart" style="width: 100%; height: 100%;"></div>
                <div ref="productTypeChart"
                     style="width: 100%; height: 100%;"></div>
              </div>
            </div>
            <div class="panel-card card-8" style="flex: 1;">
            <div class="panel-card card-8"
                 style="flex: 1;">
              <div class="panel-title">销售区域分布</div>
              <div class="chart-container">
                <div ref="salesAreaChart" style="width: 100%; height: 100%;"></div>
                <div ref="salesAreaChart"
                     style="width: 100%; height: 100%;"></div>
              </div>
            </div>
          </div>
@@ -167,18 +237,25 @@
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';
import dayjs from 'dayjs';
  import {
    ref,
    computed,
    onMounted,
    onBeforeUnmount,
    watch,
    nextTick,
  } from "vue";
  import { useRouter } from "vue-router";
  import * as echarts from "echarts";
  import dayjs from "dayjs";

const router = useRouter();

// 筛选条件
const dateRange = ref([]);
const productType = ref('');
const salesArea = ref('');
const statDimension = ref('month');
  const productType = ref("");
  const salesArea = ref("");
  const statDimension = ref("month");

// 图表引用
const salesVolumeChart = ref(null);
@@ -199,33 +276,208 @@
// 模拟数据
const mockData = [
  // 2026年1月数据
  { productType: '砌块', salesArea: '华东', period: '2026-01', salesVolume: 1200, salesAmount: 180, newCustomers: 5, totalCustomers: 120 },
  { productType: '砌块', salesArea: '华北', period: '2026-01', salesVolume: 800, salesAmount: 120, newCustomers: 3, totalCustomers: 80 },
  { productType: '砌块', salesArea: '华南', period: '2026-01', salesVolume: 600, salesAmount: 90, newCustomers: 2, totalCustomers: 60 },
  { productType: '板材', salesArea: '华东', period: '2026-01', salesVolume: 900, salesAmount: 270, newCustomers: 4, totalCustomers: 100 },
  { productType: '板材', salesArea: '华北', period: '2026-01', salesVolume: 500, salesAmount: 150, newCustomers: 2, totalCustomers: 70 },
  { productType: '型材', salesArea: '华东', period: '2026-01', salesVolume: 400, salesAmount: 200, newCustomers: 3, totalCustomers: 50 },
    {
      productType: "砌块",
      salesArea: "华东",
      period: "2026-01",
      salesVolume: 1200,
      salesAmount: 180,
      newCustomers: 5,
      totalCustomers: 120,
    },
    {
      productType: "砌块",
      salesArea: "华北",
      period: "2026-01",
      salesVolume: 800,
      salesAmount: 120,
      newCustomers: 3,
      totalCustomers: 80,
    },
    {
      productType: "砌块",
      salesArea: "华南",
      period: "2026-01",
      salesVolume: 600,
      salesAmount: 90,
      newCustomers: 2,
      totalCustomers: 60,
    },
    {
      productType: "板材",
      salesArea: "华东",
      period: "2026-01",
      salesVolume: 900,
      salesAmount: 270,
      newCustomers: 4,
      totalCustomers: 100,
    },
    {
      productType: "板材",
      salesArea: "华北",
      period: "2026-01",
      salesVolume: 500,
      salesAmount: 150,
      newCustomers: 2,
      totalCustomers: 70,
    },
    {
      productType: "型材",
      salesArea: "华东",
      period: "2026-01",
      salesVolume: 400,
      salesAmount: 200,
      newCustomers: 3,
      totalCustomers: 50,
    },
  // 2026年2月数据
  { productType: '砌块', salesArea: '华东', period: '2026-02', salesVolume: 1300, salesAmount: 195, newCustomers: 4, totalCustomers: 124 },
  { productType: '砌块', salesArea: '华北', period: '2026-02', salesVolume: 850, salesAmount: 127.5, newCustomers: 2, totalCustomers: 82 },
  { productType: '砌块', salesArea: '华南', period: '2026-02', salesVolume: 650, salesAmount: 97.5, newCustomers: 1, totalCustomers: 61 },
  { productType: '板材', salesArea: '华东', period: '2026-02', salesVolume: 950, salesAmount: 285, newCustomers: 3, totalCustomers: 103 },
  { productType: '板材', salesArea: '华北', period: '2026-02', salesVolume: 550, salesAmount: 165, newCustomers: 1, totalCustomers: 71 },
  { productType: '型材', salesArea: '华东', period: '2026-02', salesVolume: 450, salesAmount: 225, newCustomers: 2, totalCustomers: 52 },
    {
      productType: "砌块",
      salesArea: "华东",
      period: "2026-02",
      salesVolume: 1300,
      salesAmount: 195,
      newCustomers: 4,
      totalCustomers: 124,
    },
    {
      productType: "砌块",
      salesArea: "华北",
      period: "2026-02",
      salesVolume: 850,
      salesAmount: 127.5,
      newCustomers: 2,
      totalCustomers: 82,
    },
    {
      productType: "砌块",
      salesArea: "华南",
      period: "2026-02",
      salesVolume: 650,
      salesAmount: 97.5,
      newCustomers: 1,
      totalCustomers: 61,
    },
    {
      productType: "板材",
      salesArea: "华东",
      period: "2026-02",
      salesVolume: 950,
      salesAmount: 285,
      newCustomers: 3,
      totalCustomers: 103,
    },
    {
      productType: "板材",
      salesArea: "华北",
      period: "2026-02",
      salesVolume: 550,
      salesAmount: 165,
      newCustomers: 1,
      totalCustomers: 71,
    },
    {
      productType: "型材",
      salesArea: "华东",
      period: "2026-02",
      salesVolume: 450,
      salesAmount: 225,
      newCustomers: 2,
      totalCustomers: 52,
    },
  // 2026年3月数据
  { productType: '砌块', salesArea: '华东', period: '2026-03', salesVolume: 1400, salesAmount: 210, newCustomers: 6, totalCustomers: 130 },
  { productType: '砌块', salesArea: '华北', period: '2026-03', salesVolume: 900, salesAmount: 135, newCustomers: 3, totalCustomers: 85 },
  { productType: '砌块', salesArea: '华南', period: '2026-03', salesVolume: 700, salesAmount: 105, newCustomers: 2, totalCustomers: 63 },
  { productType: '板材', salesArea: '华东', period: '2026-03', salesVolume: 1000, salesAmount: 300, newCustomers: 5, totalCustomers: 108 },
  { productType: '板材', salesArea: '华北', period: '2026-03', salesVolume: 600, salesAmount: 180, newCustomers: 2, totalCustomers: 73 },
  { productType: '型材', salesArea: '华东', period: '2026-03', salesVolume: 500, salesAmount: 250, newCustomers: 3, totalCustomers: 55 },
    {
      productType: "砌块",
      salesArea: "华东",
      period: "2026-03",
      salesVolume: 1400,
      salesAmount: 210,
      newCustomers: 6,
      totalCustomers: 130,
    },
    {
      productType: "砌块",
      salesArea: "华北",
      period: "2026-03",
      salesVolume: 900,
      salesAmount: 135,
      newCustomers: 3,
      totalCustomers: 85,
    },
    {
      productType: "砌块",
      salesArea: "华南",
      period: "2026-03",
      salesVolume: 700,
      salesAmount: 105,
      newCustomers: 2,
      totalCustomers: 63,
    },
    {
      productType: "板材",
      salesArea: "华东",
      period: "2026-03",
      salesVolume: 1000,
      salesAmount: 300,
      newCustomers: 5,
      totalCustomers: 108,
    },
    {
      productType: "板材",
      salesArea: "华北",
      period: "2026-03",
      salesVolume: 600,
      salesAmount: 180,
      newCustomers: 2,
      totalCustomers: 73,
    },
    {
      productType: "型材",
      salesArea: "华东",
      period: "2026-03",
      salesVolume: 500,
      salesAmount: 250,
      newCustomers: 3,
      totalCustomers: 55,
    },
  // 西南和西北地区数据
  { productType: '砌块', salesArea: '西南', period: '2026-03', salesVolume: 500, salesAmount: 75, newCustomers: 2, totalCustomers: 40 },
  { productType: '板材', salesArea: '西南', period: '2026-03', salesVolume: 300, salesAmount: 90, newCustomers: 1, totalCustomers: 30 },
  { productType: '砌块', salesArea: '西北', period: '2026-03', salesVolume: 400, salesAmount: 60, newCustomers: 1, totalCustomers: 35 },
  { productType: '板材', salesArea: '西北', period: '2026-03', salesVolume: 200, salesAmount: 60, newCustomers: 1, totalCustomers: 25 },
    {
      productType: "砌块",
      salesArea: "西南",
      period: "2026-03",
      salesVolume: 500,
      salesAmount: 75,
      newCustomers: 2,
      totalCustomers: 40,
    },
    {
      productType: "板材",
      salesArea: "西南",
      period: "2026-03",
      salesVolume: 300,
      salesAmount: 90,
      newCustomers: 1,
      totalCustomers: 30,
    },
    {
      productType: "砌块",
      salesArea: "西北",
      period: "2026-03",
      salesVolume: 400,
      salesAmount: 60,
      newCustomers: 1,
      totalCustomers: 35,
    },
    {
      productType: "板材",
      salesArea: "西北",
      period: "2026-03",
      salesVolume: 200,
      salesAmount: 60,
      newCustomers: 1,
      totalCustomers: 25,
    },
];


// 计算属性
const filteredData = computed(() => {
@@ -234,7 +486,7 @@
  // 按产品类型筛选
  if (productType.value) {
    result = result.filter(item => {
      const typeMap = { block: '砌块', board: '板材', profile: '型材' };
        const typeMap = { block: "砌块", board: "板材", profile: "型材" };
      return item.productType === typeMap[productType.value];
    });
  }
@@ -242,7 +494,13 @@
  // 按销售区域筛选
  if (salesArea.value) {
    result = result.filter(item => {
      const areaMap = { east: '华东', north: '华北', south: '华南', southwest: '西南', northwest: '西北' };
        const areaMap = {
          east: "华东",
          north: "华北",
          south: "华南",
          southwest: "西南",
          northwest: "西北",
        };
      return item.salesArea === areaMap[salesArea.value];
    });
  }
@@ -254,7 +512,10 @@
    
    result = result.filter(item => {
      const itemDate = dayjs(item.period);
      return itemDate.isAfter(startDate.subtract(1, 'day')) && itemDate.isBefore(endDate.add(1, 'day'));
        return (
          itemDate.isAfter(startDate.subtract(1, "day")) &&
          itemDate.isBefore(endDate.add(1, "day"))
        );
    });
  }
  
@@ -267,7 +528,9 @@
});

const totalSalesAmount = computed(() => {
  return filteredData.value.reduce((sum, item) => sum + item.salesAmount, 0).toFixed(2);
    return filteredData.value
      .reduce((sum, item) => sum + item.salesAmount, 0)
      .toFixed(2);
});

const newCustomerCount = computed(() => {
@@ -287,10 +550,10 @@
});

// 变化率计算（模拟）
const salesVolumeChange = ref('+5.2');
const salesAmountChange = ref('+7.8');
const customerCountChange = ref('+3.5');
const totalCustomerChange = ref('+2.1');
  const salesVolumeChange = ref("+5.2");
  const salesAmountChange = ref("+7.8");
  const customerCountChange = ref("+3.5");
  const totalCustomerChange = ref("+2.1");

// 表格数据
const tableData = computed(() => {
@@ -304,7 +567,7 @@
      ...item,
      cumulativeSalesVolume,
      cumulativeSalesAmount,
      cumulativeNewCustomers
        cumulativeNewCustomers,
    };
  });
});
@@ -325,28 +588,30 @@
  
  return {
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c} 立方米'
        trigger: "axis",
        formatter: "{b}: {c} 立方米",
    },
    xAxis: {
      type: 'category',
      data: periods
        type: "category",
        data: periods,
    },
    yAxis: {
      type: 'value',
      name: '销量（立方米）'
        type: "value",
        name: "销量（立方米）",
    },
    series: [{
      series: [
        {
      data: values,
      type: 'line',
          type: "line",
      smooth: true,
      lineStyle: {
        width: 3
            width: 3,
      },
      itemStyle: {
        color: '#409EFF'
      }
    }]
            color: "#409EFF",
          },
        },
      ],
  };
});

@@ -366,24 +631,26 @@
  
  return {
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c} 万元'
        trigger: "axis",
        formatter: "{b}: {c} 万元",
    },
    xAxis: {
      type: 'category',
      data: periods
        type: "category",
        data: periods,
    },
    yAxis: {
      type: 'value',
      name: '销售金额（万元）'
        type: "value",
        name: "销售金额（万元）",
    },
    series: [{
      series: [
        {
      data: values,
      type: 'bar',
          type: "bar",
      itemStyle: {
        color: '#67C23A'
      }
    }]
            color: "#67C23A",
          },
        },
      ],
  };
});

@@ -403,24 +670,26 @@
  
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 立方米 ({d}%)'
        trigger: "item",
        formatter: "{b}: {c} 立方米 ({d}%)",
    },
    series: [{
      type: 'pie',
      radius: '60%',
      series: [
        {
          type: "pie",
          radius: "60%",
      data: types.map((type, index) => ({
        name: type,
        value: values[index]
            value: values[index],
      })),
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
  };
});

@@ -440,24 +709,26 @@
  
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 立方米 ({d}%)'
        trigger: "item",
        formatter: "{b}: {c} 立方米 ({d}%)",
    },
    series: [{
      type: 'pie',
      radius: '60%',
      series: [
        {
          type: "pie",
          radius: "60%",
      data: areas.map((area, index) => ({
        name: area,
        value: values[index]
            value: values[index],
      })),
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
  };
});

@@ -468,7 +739,9 @@
  let cumulativeValue = 0;
  
  // 按周期排序
  const sortedData = [...filteredData.value].sort((a, b) => a.period.localeCompare(b.period));
    const sortedData = [...filteredData.value].sort((a, b) =>
      a.period.localeCompare(b.period)
    );
  
  sortedData.forEach(item => {
    cumulativeValue += item.salesVolume;
@@ -480,31 +753,33 @@
  
  return {
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c} 立方米'
        trigger: "axis",
        formatter: "{b}: {c} 立方米",
    },
    xAxis: {
      type: 'category',
      data: periods
        type: "category",
        data: periods,
    },
    yAxis: {
      type: 'value',
      name: '累计销量（立方米）'
        type: "value",
        name: "累计销量（立方米）",
    },
    series: [{
      series: [
        {
      data: values,
      type: 'line',
          type: "line",
      smooth: true,
      areaStyle: {
        opacity: 0.3
            opacity: 0.3,
      },
      itemStyle: {
        color: '#E6A23C'
            color: "#E6A23C",
      },
      lineStyle: {
        width: 3
      }
    }]
            width: 3,
          },
        },
      ],
  };
});

@@ -515,7 +790,9 @@
  let cumulativeValue = 0;
  
  // 按周期排序
  const sortedData = [...filteredData.value].sort((a, b) => a.period.localeCompare(b.period));
    const sortedData = [...filteredData.value].sort((a, b) =>
      a.period.localeCompare(b.period)
    );
  
  sortedData.forEach(item => {
    cumulativeValue += item.salesAmount;
@@ -527,24 +804,26 @@
  
  return {
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c} 万元'
        trigger: "axis",
        formatter: "{b}: {c} 万元",
    },
    xAxis: {
      type: 'category',
      data: periods
        type: "category",
        data: periods,
    },
    yAxis: {
      type: 'value',
      name: '累计销售金额（万元）'
        type: "value",
        name: "累计销售金额（万元）",
    },
    series: [{
      series: [
        {
      data: values,
      type: 'bar',
          type: "bar",
      itemStyle: {
        color: '#F56C6C'
      }
    }]
            color: "#F56C6C",
          },
        },
      ],
  };
});

@@ -587,12 +866,16 @@
  
  // 初始化累计销量趋势图表
  if (cumulativeSalesVolumeChart.value && !cumulativeSalesVolumeChartInstance) {
    cumulativeSalesVolumeChartInstance = echarts.init(cumulativeSalesVolumeChart.value);
      cumulativeSalesVolumeChartInstance = echarts.init(
        cumulativeSalesVolumeChart.value
      );
  }
  
  // 初始化累计销售金额趋势图表
  if (cumulativeSalesAmountChart.value && !cumulativeSalesAmountChartInstance) {
    cumulativeSalesAmountChartInstance = echarts.init(cumulativeSalesAmountChart.value);
      cumulativeSalesAmountChartInstance = echarts.init(
        cumulativeSalesAmountChart.value
      );
  }
  
  updateCharts();
@@ -622,12 +905,16 @@
  
  // 更新累计销量趋势图表
  if (cumulativeSalesVolumeChartInstance) {
    cumulativeSalesVolumeChartInstance.setOption(cumulativeSalesVolumeChartOption.value);
      cumulativeSalesVolumeChartInstance.setOption(
        cumulativeSalesVolumeChartOption.value
      );
  }
  
  // 更新累计销售金额趋势图表
  if (cumulativeSalesAmountChartInstance) {
    cumulativeSalesAmountChartInstance.setOption(cumulativeSalesAmountChartOption.value);
      cumulativeSalesAmountChartInstance.setOption(
        cumulativeSalesAmountChartOption.value
      );
  }
};

@@ -657,8 +944,11 @@
onMounted(() => {
  // 设置默认日期范围为最近3个月
  const endDate = dayjs();
  const startDate = endDate.subtract(3, 'month');
  dateRange.value = [startDate.format('YYYY-MM-DD'), endDate.format('YYYY-MM-DD')];
    const startDate = endDate.subtract(3, "month");
    dateRange.value = [
      startDate.format("YYYY-MM-DD"),
      endDate.format("YYYY-MM-DD"),
    ];
  
  // 等待DOM更新后初始化图表
  nextTick(() => {
@@ -666,8 +956,30 @@
  });
  
  // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize);
    window.addEventListener("resize", handleResize);
});

  // 获取产品类型标签类型
  const getProductTypeType = type => {
    const typeMap = {
      砌块: "primary",
      板材: "success",
      型材: "warning",
    };
    return typeMap[type] || "info";
  };

  // 获取销售区域标签类型
  const getSalesAreaType = area => {
    const typeMap = {
      华东: "primary",
      华北: "success",
      华南: "warning",
      西南: "danger",
      西北: "info",
    };
    return typeMap[area] || "info";
  };

// 组件卸载时销毁图表实例
onBeforeUnmount(() => {
@@ -691,7 +1003,7 @@
  }
  
  // 移除窗口大小变化监听
  window.removeEventListener('resize', handleResize);
    window.removeEventListener("resize", handleResize);
});
</script>

@@ -847,6 +1159,50 @@
  background-color: #fafafa;
}

  .card-1 .panel-title {
    border-left: 4px solid #409eff;
  }

  .card-2 .panel-title {
    border-left: 4px solid #67c23a;
  }

  .card-3 .panel-title {
    border-left: 4px solid #e6a23c;
  }

  .card-4 .panel-title {
    border-left: 4px solid #f56c6c;
  }

  .card-5 .panel-title {
    border-left: 4px solid #409eff;
  }

  .card-6 .panel-title {
    border-left: 4px solid #67c23a;
  }

  .card-7 .panel-title {
    border-left: 4px solid #e6a23c;
  }

  .card-8 .panel-title {
    border-left: 4px solid #f56c6c;
  }

  .card-9 .panel-title {
    border-left: 4px solid #409eff;
  }

  .card-10 .panel-title {
    border-left: 4px solid #67c23a;
  }

  .card-11 .panel-title {
    border-left: 4px solid #e6a23c;
  }

.chart-container {
  flex: 1;
  padding: 20px;
@@ -886,6 +1242,26 @@
  margin-bottom: 5px;
}

  .sales-volume-color {
    color: #409eff;
    text-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
  }

  .sales-amount-color {
    color: #67c23a;
    text-shadow: 0 2px 4px rgba(103, 194, 58, 0.3);
  }

  .new-customer-color {
    color: #e6a23c;
    text-shadow: 0 2px 4px rgba(230, 162, 60, 0.3);
  }

  .total-customer-color {
    color: #f56c6c;
    text-shadow: 0 2px 4px rgba(245, 108, 108, 0.3);
  }

.stat-unit {
  font-size: 12px;
  color: #909399;
@@ -912,6 +1288,11 @@
  background-color: #ecf5ff;
}

  .data-value {
    font-weight: bold;
    color: #409eff;
  }

/* 下拉选择框样式 */
:deep(.el-select) {
  width: 100%;