feat: 指标统计增加销售数量

yuan

14 小时以前 b6130b6ca4160c261a5fdeeb20d894f8343b4fba

feat: 指标统计增加销售数量

 src/views/salesManagement/indicatorStats/index.vue

@@ -2,7 +2,7 @@
  <div class="app-container indicator-stats">
    <!-- KPI 汇总 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="8">
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card stat-card-blue">
          <div class="stat-icon-wrapper">
            <div class="stat-icon">
@@ -16,7 +16,7 @@
          <div class="stat-bg-decoration"></div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card stat-card-green">
          <div class="stat-icon-wrapper">
            <div class="stat-icon">
@@ -30,7 +30,21 @@
          <div class="stat-bg-decoration"></div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card stat-card-purple">
          <div class="stat-icon-wrapper">
            <div class="stat-icon">
              <el-icon :size="32"><Goods /></el-icon>
            </div>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ formatQuantity(indicatorKpis.productSalesQuantity) }}</div>
            <div class="stat-label">产品销售数量</div>
          </div>
          <div class="stat-bg-decoration"></div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card stat-card-orange">
          <div class="stat-icon-wrapper">
            <div class="stat-icon">
@@ -132,7 +146,7 @@

<script setup>
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
import { Document, Van, Tickets, Search, Refresh } from '@element-plus/icons-vue'
import { Document, Van, Tickets, Search, Refresh, Goods } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { getTotalStatistics, getStatisticsTable } from '@/api/salesManagement/indicatorStats'
import { productTreeList } from '@/api/basicData/product.js'
@@ -142,6 +156,7 @@
const indicatorKpis = reactive({
  orderCount: 0,
  salesAmount: 0,
  productSalesQuantity: 0,
  shipRate: 0
})

@@ -161,6 +176,11 @@
const productOptions = ref([])
const customerOption = ref([])

const formatQuantity = (value) => {
  const num = Number(value)
  if (Number.isNaN(num)) return '0'
  return num.toLocaleString(undefined, { maximumFractionDigits: 2 })
}
// 转换产品树数据，将 id 改为 value
function convertIdToValue(data) {
  return data.map((item) => {
@@ -234,7 +254,7 @@
    if (res && res.data) {
      indicatorKpis.orderCount = res.data.total || 0
      indicatorKpis.salesAmount = res.data.contractAmountTotal || 0
      // 发货率如果接口没有返回，保持原值或设为0
      indicatorKpis.productSalesQuantity = res.data.productQuantityTotal || 0
      indicatorKpis.shipRate = res.data.shipRate || 0
    }
  } catch (error) {
@@ -282,12 +302,11 @@
  if (indicatorChart) indicatorChart.dispose()
  indicatorChart = echarts.init(indicatorChartRef.value)
  
  // 根据接口返回的数据结构更新图表
  // 接口返回: dateList, orderCountList, salesAmountList
  // 接口返回: dateList, orderCountList, salesAmountList, productQuantityList
  const option = {
    title: { text: '多维度销售指标趋势', left: 'center' },
    tooltip: { trigger: 'axis' },
    legend: { data: ['订单数', '销售额'], top: 30 },
    legend: { data: ['订单数', '销售额', '产品销售数量'], top: 30 },
    grid: { left: '3%', right: '8%', bottom: '3%', containLabel: true },
    xAxis: { 
      type: 'category', 
@@ -322,6 +341,13 @@
        yAxisIndex: 0,
        data: chartData.salesAmountList || [], 
        itemStyle: { color: '#67c23a' } 
      },
      { 
        name: '产品销售数量', 
        type: 'line', 
        yAxisIndex: 1,
        data: chartData.productQuantityList || [], 
        itemStyle: { color: '#f56c6c' } 
      }
    ]
  }
@@ -335,7 +361,7 @@
  const option = {
    title: { text: '多维度销售指标趋势', left: 'center' },
    tooltip: { trigger: 'axis' },
    legend: { data: ['订单数', '销售额'], top: 30 },
    legend: { data: ['订单数', '销售额', '产品销售数量'], top: 30 },
    grid: { left: '3%', right: '8%', bottom: '3%', containLabel: true },
    xAxis: { type: 'category', data: [] },
    yAxis: [
@@ -355,7 +381,8 @@
    ],
    series: [
      { name: '订单数', type: 'line', yAxisIndex: 1, data: [], itemStyle: { color: '#409eff' } },
      { name: '销售额', type: 'bar', yAxisIndex: 0, data: [], itemStyle: { color: '#67c23a' } }
      { name: '销售额', type: 'bar', yAxisIndex: 0, data: [], itemStyle: { color: '#67c23a' } },
      { name: '产品销售数量', type: 'line', yAxisIndex: 1, data: [], itemStyle: { color: '#f56c6c' } }
    ]
  }
  indicatorChart.setOption(option)
@@ -523,6 +550,17 @@
      background: #e6a23c;
    }
  }

  &.stat-card-purple {
    .stat-icon {
      background: linear-gradient(135deg, #9b59b6 0%, #b37fcc 100%);
      color: #fff;
    }
    
    .stat-bg-decoration {
      background: #9b59b6;
    }
  }
}

.chart-card,