| | |
| | | </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 class="stat-content"> |
| | | <div class="stat-value">{{ indicatorKpis.shipRate }}</div> |
| | | <div class="stat-label">发货率</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> |
| | |
| | | if (res && res.data) { |
| | | indicatorKpis.orderCount = res.data.total || 0 |
| | | indicatorKpis.salesAmount = res.data.contractAmountTotal || 0 |
| | | // 发货率如果接口没有返回,保持原值或设为0 |
| | | // 回款率如果接口没有返回,保持原值或设为0 |
| | | indicatorKpis.shipRate = res.data.shipRate || 0 |
| | | } |
| | | } catch (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); |
| | | } |
| | | |