gongchunyi
8 天以前 a798cdaa46f693eebabec6d999bfe32d055f4c48
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="12">
        <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="12">
        <div class="stat-card stat-card-green">
          <div class="stat-icon-wrapper">
            <div class="stat-icon">
@@ -26,20 +26,6 @@
          <div class="stat-content">
            <div class="stat-value">¥{{ indicatorKpis.salesAmount.toLocaleString() }}</div>
            <div class="stat-label">销售额</div>
          </div>
          <div class="stat-bg-decoration"></div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <div class="stat-card stat-card-orange">
          <div class="stat-icon-wrapper">
            <div class="stat-icon">
              <el-icon :size="32"><Van /></el-icon>
            </div>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ indicatorKpis.shipRate }}%</div>
            <div class="stat-label">发货率</div>
          </div>
          <div class="stat-bg-decoration"></div>
        </div>
@@ -98,11 +84,11 @@
              <label class="filter-label">日期范围</label>
              <el-date-picker 
                v-model="indicatorFilter.dateRange" 
                type="daterange"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始日期" 
                end-placeholder="结束日期" 
                value-format="YYYY-MM-DD"
                value-format="YYYY-MM"
                style="width: 100%" 
              />
            </div>
@@ -127,47 +113,12 @@
        <div ref="indicatorChartRef" class="chart-wrapper"></div>
      </div>
    </el-card>
    <!-- 业绩统计(团队维度,无个人姓名) -->
    <el-card v-if="showTeamPerformance" class="table-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="card-title">团队业绩统计</span>
        </div>
      </template>
      <el-table
        :data="teamPerformanceList"
        border
        stripe
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'bold' }"
      >
        <el-table-column prop="team" label="销售团队" min-width="120"/>
        <el-table-column prop="orderCount" label="订单数" align="right" min-width="100"/>
        <el-table-column prop="salesAmount" label="销售额" align="right" min-width="140">
          <template #default="scope">¥{{ scope.row.salesAmount.toLocaleString() }}</template>
        </el-table-column>
        <el-table-column prop="shipRate" label="发货率" align="right" min-width="100">
          <template #default="scope">{{ scope.row.shipRate }}%</template>
        </el-table-column>
        <el-table-column prop="attainment" label="目标达成率" align="center" min-width="120">
          <template #default="scope">
            <el-tag
              :type="scope.row.attainment >= 100 ? 'success' : scope.row.attainment >= 80 ? 'warning' : 'danger'"
              effect="dark"
            >
              {{ scope.row.attainment }}%
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
import { Document, Van, Tickets, Search, Refresh } from '@element-plus/icons-vue'
import { Document, Tickets, Search, Refresh } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { getTotalStatistics, getStatisticsTable } from '@/api/salesManagement/indicatorStats'
import { productTreeList } from '@/api/basicData/product.js'
@@ -195,13 +146,6 @@
const productOptions = ref([])
const customerOption = ref([])
const teamPerformanceList = ref([
  { team: '华东大区', orderCount: 320, salesAmount: 2850000, shipRate: 90, attainment: 105 },
  { team: '华北大区', orderCount: 280, salesAmount: 2150000, shipRate: 86, attainment: 92 },
  { team: '华南大区', orderCount: 210, salesAmount: 1850000, shipRate: 88, attainment: 78 },
  { team: '西南大区', orderCount: 180, salesAmount: 1500000, shipRate: 83, attainment: 74 }
])
// 转换产品树数据,将 id 改为 value
function convertIdToValue(data) {
@@ -277,7 +221,7 @@
      indicatorKpis.orderCount = res.data.total || 0
      indicatorKpis.salesAmount = res.data.contractAmountTotal || 0
      // 发货率如果接口没有返回,保持原值或设为0
      // indicatorKpis.shipRate = res.data.shipRate || 0
      indicatorKpis.shipRate = res.data.shipRate || 0
    }
  } catch (error) {
    console.error('获取头部统计失败:', error)
@@ -448,7 +392,6 @@
<style scoped lang="scss">
.indicator-stats {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 84px);
}