企业官网建设流程全解析

后台骨架好了，这篇写打开后台第一眼看到的页面：仪表盘。8 张指标卡 + 1 张饼图，一天的工作量。

看板展示什么：先定指标，再写代码

指标选择的原则：运营每天要做的决策，倒推要看的数据。

• 今日营收 / 累计营收 —— 今天生意怎么样
• 今日订单 / 累计订单 / 用户数 / 司机数 / 待审核司机数 —— 各条线健康度
• 7 日订单状态分布 —— 有没有单子卡在某个状态（比如大量 PENDING = 运力不足）
  

后端一个聚合接口全给了：

publicOverviewRespoverview(){returnOverviewResp.builder().todayRevenue(orderMapper.sumTodayRevenue()).todayOrders(orderMapper.countToday()).pendingDrivers(driverMapper.countByStatus(0)).weekStatusDist(orderMapper.countWeekGroupByStatus())// List<{status, cnt}>.build();}

SQL 都是GROUP BY一句话的事，别在 Java 里循环查库（见过有人查出全表再 stream 分组——数据量一上去看板就是慢查询现场）。

ECharts 饼图：封装成组件的克制版

<template> <div ref="chartEl" style="height: 320px"></div> </template> <script setup> import * as echarts from 'echarts' import { onMounted, ref } from 'vue' const props = defineProps({ data: Array }) // [{name:'待接单', value:12}, ...] const chartEl = ref() onMounted(() => { const chart = echarts.init(chartEl.value) chart.setOption({ tooltip: { trigger: 'item' }, series: [{ type: 'pie', radius: ['40%', '70%'], label: { formatter: '{b}: {c}单' }, data: props.data }] }) }) </script>

状态文案映射（PENDING → 待接单）做成前端常量表，订单状态这种枚举翻译永远不该散落在模板里。

两个加分细节

1. 待办数字要醒目："待审核司机 3"做成红色角标挂在侧边栏入口上，运营不用主动找活
2. 看板数据加时间条件：营收类指标全部带"今日/7日"维度，别只给累计值——累计数好看但没决策价值，趋势才有

本篇成果

仪表盘完成：8 张指标卡 + 七日订单状态饼图，打开后台 3 秒看清全局。到这里三端全部开发完毕。下篇写三端联调与真机测试——代码写完只是 60 分，跑通整条业务流才是 90 分。