| | |
| | | </div> |
| | | <div class="stat-content"> |
| | | <div class="stat-value">¥{{ indicatorKpis.salesAmount.toLocaleString() }}</div> |
| | | <div class="stat-label">销售额</div> |
| | | <div class="stat-label">合同金额</div> |
| | | </div> |
| | | <div class="stat-bg-decoration"></div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="stat-content"> |
| | | <div class="stat-value">{{ indicatorKpis.shipRate }}%</div> |
| | | <div class="stat-label">发货率</div> |
| | | <div class="stat-value">{{ indicatorKpis.shipRate }}</div> |
| | | <div class="stat-label">回款率</div> |
| | | </div> |
| | | <div class="stat-bg-decoration"></div> |
| | | </div> |
| | |
| | | <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> |
| | |
| | | <div class="chart-container" v-loading="loading"> |
| | | <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> |
| | |
| | | |
| | | 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) { |
| | |
| | | if (res && res.data) { |
| | | indicatorKpis.orderCount = res.data.total || 0 |
| | | indicatorKpis.salesAmount = res.data.contractAmountTotal || 0 |
| | | // 发货率如果接口没有返回,保持原值或设为0 |
| | | // indicatorKpis.shipRate = res.data.shipRate || 0 |
| | | // 回款率如果接口没有返回,保持原值或设为0 |
| | | indicatorKpis.shipRate = res.data.shipRate || 0 |
| | | } |
| | | } catch (error) { |
| | | console.error('获取头部统计失败:', error) |
| | |
| | | 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', |
| | |
| | | itemStyle: { color: '#409eff' } |
| | | }, |
| | | { |
| | | name: '销售额', |
| | | name: '合同金额', |
| | | type: 'bar', |
| | | yAxisIndex: 0, |
| | | data: chartData.salesAmountList || [], |
| | |
| | | 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: [ |
| | |
| | | ], |
| | | 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' } } |
| | | ] |
| | | } |
| | | indicatorChart.setOption(option) |
| | |
| | | <style scoped lang="scss"> |
| | | .indicator-stats { |
| | | padding: 20px; |
| | | background: #f5f7fa; |
| | | min-height: calc(100vh - 84px); |
| | | } |
| | | |