DeXun/screen
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

热力地图大屏优化

Browse Source
This commit is contained in:
jhd
2026-06-02 18:23:02 +08:00
parent 73ebc8b1e7
commit 4ec6164b5c
3 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/api/sales.js
View File

@@ -3,11 +3,11 @@ import request from '@/utils/request'
// ===== Mock 数据（后端无认证时兜底） ===== // ===== Mock 数据（后端无认证时兜底） =====
const mockSummary = { const mockSummary = {
totalOrderCount: 450, totalOrderCount: 450,
totalSalesAmount: 9860, totalSalesAmount: 98600000,
completedOrderCount: 320, completedOrderCount: 320,
completedSalesAmount: 7230, completedSalesAmount: 72300000,
totalUnpaidAmount: 2630, totalUnpaidAmount: 26300000,
avgOrderAmount: 21.9 avgOrderAmount: 219000
} }
const mockSalesmanStats = [ const mockSalesmanStats = [
@@ -118,26 +118,26 @@ export function getFullSalesReport(params) {
// ===== 省份热力地图数据 ===== // ===== 省份热力地图数据 =====
const mockProvinceStats = [ const mockProvinceStats = [
{ name: '山东省', customerCount: 124, orderCount: 2800, salesAmount: 3100 }, { name: '山东省', customerCount: 124, orderCount: 2800, salesAmount: 31000000 },
{ name: '河南省', customerCount: 103, orderCount: 2300, salesAmount: 2550 }, { name: '河南省', customerCount: 103, orderCount: 2300, salesAmount: 25500000 },
{ name: '江苏省', customerCount: 35, orderCount: 850, salesAmount: 950 }, { name: '江苏省', customerCount: 35, orderCount: 850, salesAmount: 9500000 },
{ name: '天津市', customerCount: 17, orderCount: 420, salesAmount: 480 }, { name: '天津市', customerCount: 17, orderCount: 420, salesAmount: 4800000 },
{ name: '河北省', customerCount: 12, orderCount: 310, salesAmount: 360 }, { name: '河北省', customerCount: 12, orderCount: 310, salesAmount: 3600000 },
{ name: '上海市', customerCount: 10, orderCount: 260, salesAmount: 320 }, { name: '上海市', customerCount: 10, orderCount: 260, salesAmount: 3200000 },
{ name: '湖北省', customerCount: 7, orderCount: 180, salesAmount: 210 }, { name: '湖北省', customerCount: 7, orderCount: 180, salesAmount: 2100000 },
{ name: '辽宁省', customerCount: 6, orderCount: 150, salesAmount: 170 }, { name: '辽宁省', customerCount: 6, orderCount: 150, salesAmount: 1700000 },
{ name: '浙江省', customerCount: 5, orderCount: 130, salesAmount: 150 }, { name: '浙江省', customerCount: 5, orderCount: 130, salesAmount: 1500000 },
{ name: '安徽省', customerCount: 4, orderCount: 100, salesAmount: 115 }, { name: '安徽省', customerCount: 4, orderCount: 100, salesAmount: 1150000 },
{ name: '四川省', customerCount: 4, orderCount: 90, salesAmount: 100 }, { name: '四川省', customerCount: 4, orderCount: 90, salesAmount: 1000000 },
{ name: '湖南省', customerCount: 3, orderCount: 75, salesAmount: 85 }, { name: '湖南省', customerCount: 3, orderCount: 75, salesAmount: 850000 },
{ name: '福建省', customerCount: 3, orderCount: 70, salesAmount: 80 }, { name: '福建省', customerCount: 3, orderCount: 70, salesAmount: 800000 },
{ name: '山西省', customerCount: 2, orderCount: 50, salesAmount: 55 }, { name: '山西省', customerCount: 2, orderCount: 50, salesAmount: 550000 },
{ name: '陕西省', customerCount: 2, orderCount: 45, salesAmount: 50 }, { name: '陕西省', customerCount: 2, orderCount: 45, salesAmount: 500000 },
{ name: '江西省', customerCount: 2, orderCount: 40, salesAmount: 45 }, { name: '江西省', customerCount: 2, orderCount: 40, salesAmount: 450000 },
{ name: '北京市', customerCount: 1, orderCount: 25, salesAmount: 30 }, { name: '北京市', customerCount: 1, orderCount: 25, salesAmount: 300000 },
{ name: '广东省', customerCount: 1, orderCount: 20, salesAmount: 25 }, { name: '广东省', customerCount: 1, orderCount: 20, salesAmount: 250000 },
{ name: '海南省', customerCount: 1, orderCount: 15, salesAmount: 18 }, { name: '海南省', customerCount: 1, orderCount: 15, salesAmount: 180000 },
{ name: '广西壮族自治区', customerCount: 1, orderCount: 10, salesAmount: 12 } { name: '广西壮族自治区', customerCount: 1, orderCount: 10, salesAmount: 120000 }
] ]
/** /**

10
src/views/screens/sales-heatmap/index.vue
View File

@@ -95,7 +95,7 @@ const kpiList = computed(() => [
{ label: '覆盖省份', value: provinceData.value.length, unit: '省', color: '#00d4ff' }, { label: '覆盖省份', value: provinceData.value.length, unit: '省', color: '#00d4ff' },
{ label: '总客户数', value: provinceData.value.reduce((s, d) => s + d.customerCount, 0), unit: '个', color: '#7c63ff' }, { label: '总客户数', value: provinceData.value.reduce((s, d) => s + d.customerCount, 0), unit: '个', color: '#7c63ff' },
{ label: '总订单数', value: provinceData.value.reduce((s, d) => s + d.orderCount, 0), unit: '单', color: '#00ff88' }, { label: '总订单数', value: provinceData.value.reduce((s, d) => s + d.orderCount, 0), unit: '单', color: '#00ff88' },
{ label: '总销售额', value: provinceData.value.reduce((s, d) => s + d.salesAmount, 0).toLocaleString(), unit: '万元', color: '#f0ad4e' } { label: '总销售额', value: provinceData.value.reduce((s, d) => s + Number(d.salesAmount), 0).toLocaleString(), unit: '元', color: '#f0ad4e' }
]) ])
// ===== 缩放 ===== // ===== 缩放 =====
@@ -137,11 +137,11 @@ const updateMapChart = (data) => {
if (!mapChart) return if (!mapChart) return
const raw = Array.isArray(data) ? data : [] const raw = Array.isArray(data) ? data : []
const list = raw.map(d => ({ const list = raw.map(d => ({
name: d.name, name: d.province,
value: d.salesAmount || 0, value: Number(d.salesAmount) || 0,
customerCount: d.customerCount || 0, customerCount: d.customerCount || 0,
orderCount: d.orderCount || 0, orderCount: d.orderCount || 0,
salesAmount: d.salesAmount || 0 salesAmount: Number(d.salesAmount) || 0
})) }))
const maxVal = Math.max(...list.map(d => d.value), 10) const maxVal = Math.max(...list.map(d => d.value), 10)
mapChart.setOption({ mapChart.setOption({
@@ -153,7 +153,7 @@ const updateMapChart = (data) => {
return p.name + return p.name +
'<br/>客户数：' + d.customerCount + ' 个' + '<br/>客户数：' + d.customerCount + ' 个' +
'<br/>订单数：' + d.orderCount + ' 单' + '<br/>订单数：' + d.orderCount + ' 单' +
'<br/>销售额：' + d.salesAmount.toLocaleString() + ' 万元' '<br/>销售额：' + d.salesAmount.toLocaleString() + ' 元'
}, },
backgroundColor: 'rgba(10,20,40,0.9)', backgroundColor: 'rgba(10,20,40,0.9)',
borderColor: '#1e3a5f', borderColor: '#1e3a5f',

24
src/views/screens/sales/index.vue
View File

@@ -367,11 +367,11 @@ const normalizeOrders = (data) => {
// KPI // KPI
const kpiList = ref([ const kpiList = ref([
{ label: '总订单数', value: mockSummary.totalOrderCount, unit: '单', color: '#00d4ff' }, { label: '总订单数', value: mockSummary.totalOrderCount, unit: '单', color: '#00d4ff' },
{ label: '总销售额', value: mockSummary.totalSalesAmount, unit: '万元', color: '#7c63ff' }, { label: '总销售额', value: mockSummary.totalSalesAmount, unit: '元', color: '#7c63ff' },
{ label: '已完成订单', value: mockSummary.completedOrderCount, unit: '单', color: '#00ff88' }, { label: '已完成订单', value: mockSummary.completedOrderCount, unit: '单', color: '#00ff88' },
{ label: '已完成金额', value: mockSummary.completedSalesAmount, unit: '万元', color: '#f0ad4e' }, { label: '已完成金额', value: mockSummary.completedSalesAmount, unit: '元', color: '#f0ad4e' },
{ label: '未结款金额', value: mockSummary.totalUnpaidAmount, unit: '万元', color: '#ff6b81' }, { label: '未结款金额', value: mockSummary.totalUnpaidAmount, unit: '元', color: '#ff6b81' },
{ label: '平均订单额', value: mockSummary.avgOrderAmount, unit: '万元', color: '#ff85c0' } { label: '平均订单额', value: mockSummary.avgOrderAmount, unit: '元', color: '#ff85c0' }
]) ])
const orderList = ref(mockOrders) const orderList = ref(mockOrders)
@@ -572,11 +572,11 @@ const loadData = async () => {
const s = summaryRes && summaryRes.data ? summaryRes.data : summaryRes || {} const s = summaryRes && summaryRes.data ? summaryRes.data : summaryRes || {}
kpiList.value = [ kpiList.value = [
{ label: '总订单数', value: s.totalOrderCount ?? 0, unit: '单', color: '#00d4ff' }, { label: '总订单数', value: s.totalOrderCount ?? 0, unit: '单', color: '#00d4ff' },
{ label: '总销售额', value: s.totalSalesAmount ?? 0, unit: '万元', color: '#7c63ff' }, { label: '总销售额', value: s.totalSalesAmount ?? 0, unit: '元', color: '#7c63ff' },
{ label: '已完成订单', value: s.completedOrderCount ?? 0, unit: '单', color: '#00ff88' }, { label: '已完成订单', value: s.completedOrderCount ?? 0, unit: '单', color: '#00ff88' },
{ label: '已完成金额', value: s.completedSalesAmount ?? 0, unit: '万元', color: '#f0ad4e' }, { label: '已完成金额', value: s.completedSalesAmount ?? 0, unit: '元', color: '#f0ad4e' },
{ label: '未结款金额', value: s.totalUnpaidAmount ?? 0, unit: '万元', color: '#ff6b81' }, { label: '未结款金额', value: s.totalUnpaidAmount ?? 0, unit: '元', color: '#ff6b81' },
{ label: '平均订单额', value: s.avgOrderAmount ?? 0, unit: '万元', color: '#ff85c0' } { label: '平均订单额', value: s.avgOrderAmount ?? 0, unit: '元', color: '#ff85c0' }
] ]
// 销售员排行（归一化后端字段 → 前端字段） // 销售员排行（归一化后端字段 → 前端字段）
@@ -603,11 +603,11 @@ const loadData = async () => {
const s = mockSummary const s = mockSummary
kpiList.value = [ kpiList.value = [
{ label: '总订单数', value: s.totalOrderCount, unit: '单', color: '#00d4ff' }, { label: '总订单数', value: s.totalOrderCount, unit: '单', color: '#00d4ff' },
{ label: '总销售额', value: s.totalSalesAmount, unit: '万元', color: '#7c63ff' }, { label: '总销售额', value: s.totalSalesAmount, unit: '元', color: '#7c63ff' },
{ label: '已完成订单', value: s.completedOrderCount, unit: '单', color: '#00ff88' }, { label: '已完成订单', value: s.completedOrderCount, unit: '单', color: '#00ff88' },
{ label: '已完成金额', value: s.completedSalesAmount, unit: '万元', color: '#f0ad4e' }, { label: '已完成金额', value: s.completedSalesAmount, unit: '元', color: '#f0ad4e' },
{ label: '未结款金额', value: s.totalUnpaidAmount, unit: '万元', color: '#ff6b81' }, { label: '未结款金额', value: s.totalUnpaidAmount, unit: '元', color: '#ff6b81' },
{ label: '平均订单额', value: s.avgOrderAmount, unit: '万元', color: '#ff85c0' } { label: '平均订单额', value: s.avgOrderAmount, unit: '元', color: '#ff85c0' }
] ]
rawOrderList.value = mockOrders rawOrderList.value = mockOrders
orderList.value = mockOrders orderList.value = mockOrders