feat(statistical-table): 新增司机接单排名模块并优化统计表格功能

hejianhao

2026-06-24 1277eb964f54bcc28481e528512b63a380e00255

feat(statistical-table): 新增司机接单排名模块并优化统计表格功能

- 重构工具函数：将时间格式化函数迁移至通用utils文件，新增数字千分位格式化工具
- 新增司机接单排名完整组件，包含前三名展示、其余排名列表，支持日/周/月维度筛选
- 为统计图表新增动态筛选控件：年份选择、日期范围选择、时段范围选择
- 修复组件导入路径、排名项布局样式问题
- 新增排名徽章所需图片资源

 screen/src/assets/img/home/rank-one.png

 screen/src/assets/img/home/rank-three.png

 screen/src/assets/img/home/rank-two.png

 screen/src/utils/time.js

File was deleted

 screen/src/utils/utils.js

@@ -23,3 +23,40 @@
  str = strName[0] + '***'
  return str
}

/**
 * 数字格式化处理（添加千分位）
 * @param {number} num - 需要格式化的数字
 * @returns {string} 格式化后的数字字符串，例如 '1,234,567'
 */
export const formatNumber = (num) => {
  if (num === undefined || num === null) return '0'
  return Number(num).toLocaleString('en-US');
}

/**
 * 格式化当前时间，返回包含日期、星期、时间的结构化对象
 * @returns {Object} 包含以下属性的对象：
 * - currentDate {string} 当前日期，格式为 YYYY-MM-DD
 * - currentDay {string} 当前星期，例如 '星期一'
 * - currentTime {string} 当前时间，格式为 HH:mm:ss
 */
export const formatTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const date = String(now.getDate()).padStart(2, '0');
  
  const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const currentDay = days[now.getDay()];
  
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  return {
    currentDate: `${year}-${month}-${date}`,
    currentDay,
    currentTime: `${hours}:${minutes}:${seconds}`
  };
}

 screen/src/view/route-item/index.vue

@@ -46,7 +46,7 @@
</template>

<script>
import { formatTime } from '@/utils/time';
import { formatTime } from '@/utils/utils';

export default {
  name: "RouteItem",

 screen/src/view/statistical-table/charts/yearTrend.js

@@ -3,9 +3,11 @@
/**
 * 初始化年度趋势图表
 * @param {HTMLElement} chartDom - 图表容器 DOM 元素
 * @param {string|number} year - 选择的年份
 * @param {Array<number>} seriesData - 图表数据
 * @returns {echarts.ECharts} ECharts 实例
 */
export function initYearTrendChart(chartDom) {
export function initYearTrendChart(chartDom, year = '2026', seriesData = [2500, 3500, 2300, 3000, 2500, 3300, 1600, 2000, 1600, 3000, 1600, 2500]) {
  if (!chartDom) return null;
  const myChart = echarts.init(chartDom);

@@ -39,7 +41,7 @@
        const data = params[0];
        return `
          <div>
            2026年${data.name}月
            ${year}年${data.name}月
            <div style="display:flex;align-items:center;">
              <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#66FFFF;"></span>
              <p style="color:#fff;margin-top:4px;">成功订单</p>
@@ -118,7 +120,7 @@
            borderWidth: 2,
          },
        },
        data: [2500, 3500, 2300, 3000, 2500, 3300, 1600, 2000, 1600, 3000, 1600, 2500],
        data: seriesData,
      },
    ],
  };

 screen/src/view/statistical-table/index.vue

@@ -22,7 +22,6 @@
        <span>{{ currentTime }}</span>
      </div>
    </div>

    <!-- 内容区 -->
    <div class="content-container">
      <!-- 左侧 -->
@@ -32,9 +31,27 @@
          <TitleBox>
            <template #left>年度趋势</template>
            <template #right>
              <div class="date-picker-box">
                <img src="~@/assets/img/home/date-icon.png" class="date-icon" />
                <span>2026</span>
              <div 
                @click="() => $refs.yearTrendPicker.focus()" 
                class="date-picker-box relative cursor-pointer"
                style="overflow: hidden;"
              >
                <el-date-picker
                  v-model="yearTrendDate"
                  ref="yearTrendPicker"
                  type="year"
                  placeholder="选择年"
                  value-format="yyyy"
                  class="custom-date-picker absolute top-0 left-0 w-full h-full opacity-0"
                  style="opacity: 0; position: absolute; z-index: -1;"
                  :clearable="false"
                  @change="handleYearTrendChange"
                >
                </el-date-picker>
                <div class="flex a-center pointer-events-none" style="pointer-events: none;">
                  <img src="~@/assets/img/home/date-icon.png" class="date-icon" />
                  <span>{{ yearTrendDate || '2026' }}</span>
                </div>
              </div>
            </template>
          </TitleBox>
@@ -46,20 +63,40 @@
          <TitleBox>
            <template #left>总体订单统计</template>
            <template #right>
              <div class="date-range-picker-box">
                <div class="date-item">
                  <img
                    src="~@/assets/img/home/date-icon.png"
                    class="date-icon"
                  />
                  <span>2026-01-30</span>
                </div>
                <div class="date-item">
                  <img
                    src="~@/assets/img/home/date-icon.png"
                    class="date-icon"
                  />
                  <span>2026-05-30</span>
              <div 
                @click="() => $refs.totalOrderPicker.focus()" 
                class="date-range-picker-box relative cursor-pointer"
                style="overflow: hidden;"
              >
                <el-date-picker
                  v-model="totalOrderDateRange"
                  ref="totalOrderPicker"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  class="custom-date-range-picker"
                  style="opacity: 0; position: absolute; z-index: -1;"
                  :clearable="false"
                  @change="handleTotalOrderChange"
                >
                </el-date-picker>
                <div class="flex pointer-events-none" style="pointer-events: none; display: flex; gap: 20px;">
                  <div class="date-item">
                    <img
                      src="~@/assets/img/home/date-icon.png"
                      class="date-icon"
                    />
                    <span>{{ totalOrderDateRange ? totalOrderDateRange[0] : '2026-01-30' }}</span>
                  </div>
                  <div class="date-item">
                    <img
                      src="~@/assets/img/home/date-icon.png"
                      class="date-icon"
                    />
                    <span>{{ totalOrderDateRange ? totalOrderDateRange[1] : '2026-05-30' }}</span>
                  </div>
                </div>
              </div>
            </template>
@@ -158,9 +195,33 @@
          <TitleBox>
            <template #left>当日各时段订单情况</template>
            <template #right>
              <div class="time-picker-box">
                <img src="~@/assets/img/home/history-icon.png" class="time-icon" />
                <span>16~24时</span>
              <div 
                @click="() => $refs.dayOrderPicker.focus()" 
                class="time-picker-box relative cursor-pointer"
              >
                <el-time-picker
                  is-range
                  v-model="dayOrderTimeRange"
                  ref="dayOrderPicker"
                  range-separator="~"
                  start-placeholder="开始"
                  end-placeholder="结束"
                  placeholder="选择时间范围"
                  value-format="HH"
                  format="HH时"
                  class="custom-time-picker"
                  style="opacity: 0; position: absolute; z-index: -1; width: 100%; right: 0;"
                  :clearable="false"
                  @blur="handleDayOrderTimeBlur"
                >
                </el-time-picker>
                <div class="flex a-center pointer-events-none" style="pointer-events: none;">
                  <img
                    src="~@/assets/img/home/history-icon.png"
                    class="time-icon"
                  />
                  <span>{{ displayDayOrderTimeRange ? displayDayOrderTimeRange[0] + '~' + displayDayOrderTimeRange[1] + '时' : '16~24时' }}</span>
                </div>
              </div>
            </template>
          </TitleBox>
@@ -170,30 +231,100 @@
      <!-- 右侧 -->
      <div class="right-content">
        <!-- 司机接单排名 -->
        <div class="driver-order-rank"></div>
        <!-- 乘客排名 -->
        <div class="driver-order-rank">
          <TitleBox>
            <template #left>司机接单排名</template>
            <template #right>
              <div class="filter-btn-group">
                <div
                  class="filter-btn"
                  :class="{ active: driverRankFilter === 'day' }"
                  @click="driverRankFilter = 'day'"
                >
                  今日
                </div>
                <div
                  class="filter-btn"
                  :class="{ active: driverRankFilter === 'week' }"
                  @click="driverRankFilter = 'week'"
                >
                  本周
                </div>
                <div
                  class="filter-btn"
                  :class="{ active: driverRankFilter === 'month' }"
                  @click="driverRankFilter = 'month'"
                >
                  本月
                </div>
              </div>
            </template>
          </TitleBox>
          <div class="driver-rank-content">
            <!-- 前三名 -->
            <div class="top-three">
              <!-- 第二名 -->
              <div class="top-card card-2" v-if="driverRankList[1]">
                <div class="order-count">{{ formatNumber(driverRankList[1].count) }}</div>
                <div class="plate-number">{{ driverRankList[1].plate }}</div>
              </div>
              <!-- 第一名 -->
              <div class="top-card card-1" v-if="driverRankList[0]">
                <div class="order-count">{{ formatNumber(driverRankList[0].count) }}</div>
                <div class="plate-number">{{ driverRankList[0].plate }}</div>
              </div>
              <!-- 第三名 -->
              <div class="top-card card-3" v-if="driverRankList[2]">
                <div class="order-count">{{ formatNumber(driverRankList[2].count) }}</div>
                <div class="plate-number">{{ driverRankList[2].plate }}</div>
              </div>
            </div>

            <!-- 第4-10名 -->
            <div class="other-rank-list">
              <div
                class="other-rank-item"
                v-for="(item, index) in driverRankList.slice(3)"
                :key="index + 3"
              >
                <div class="left-top-triangle"></div>
                <div class="rank-index-hex">{{ index + 4 }}</div>
                <div class="plate-number">{{ item.plate }}</div>
                <div class="progress-bar-container">
                  <div
                    class="progress-bar"
                    :style="{
                      width: (item.count / maxDriverOrderCount) * 100 + '%',
                    }"
                  ></div>
                </div>
                <div class="order-count">{{ formatNumber(item.count) }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 乘客排名 -->
        <div class="passenger-rank">
          <TitleBox>
            <template #left>乘客排名</template>
            <template #right>
              <div class="filter-btn-group">
                <div 
                  class="filter-btn" 
                <div
                  class="filter-btn"
                  :class="{ active: passengerRankFilter === 'day' }"
                  @click="passengerRankFilter = 'day'"
                >
                  今日
                </div>
                <div 
                  class="filter-btn" 
                <div
                  class="filter-btn"
                  :class="{ active: passengerRankFilter === 'week' }"
                  @click="passengerRankFilter = 'week'"
                >
                  本周
                </div>
                <div 
                  class="filter-btn" 
                <div
                  class="filter-btn"
                  :class="{ active: passengerRankFilter === 'month' }"
                  @click="passengerRankFilter = 'month'"
                >
@@ -202,7 +333,7 @@
              </div>
            </template>
          </TitleBox>
          

          <div class="rank-list-container">
            <div class="rank-header">
              <span class="header-index"></span>
@@ -211,14 +342,19 @@
              <span class="header-orders">完成订单数</span>
            </div>
            <div class="rank-list">
              <div 
                class="rank-item" 
                v-for="(item, index) in passengerRankList" 
              <div
                class="rank-item"
                v-for="(item, index) in passengerRankList"
                :key="index"
                :class="'bg-' + (index < 3 ? index + 1 : 4)"
              >
                <div class="rank-index-wrapper">
                  TOP <span class="rank-number" :class="'rank-' + (index < 3 ? index + 1 : 4)">{{ index + 1 }}</span>
                  TOP
                  <span
                    class="rank-number"
                    :class="'rank-' + (index < 3 ? index + 1 : 4)"
                    >{{ index + 1 }}</span
                  >
                </div>
                <div class="item-phone">{{ item.phone }}</div>
                <div class="item-count">{{ item.count }}</div>
@@ -233,7 +369,7 @@
</template>

<script>
import { formatTime } from "@/utils/time";
import { formatTime, formatNumber } from "@/utils/utils";
import TitleBox from "@/components/TitleBox.vue";
import { initYearTrendChart } from "./charts/yearTrend";
import { initTotalOrderChart } from "./charts/totalOrder";
@@ -306,6 +442,10 @@
      newPassengerFilter: "month",
      /** @type {string} 订单量筛选类型: 'day' 日订单量 | 'month' 月订单量 */
      orderVolumeFilter: "month",
      /** @type {string} 司机接单排名筛选类型: 'day' | 'week' | 'month' */
      driverRankFilter: "day",
      /** @type {Array} 司机接单排名数据 */
      driverRankList: [],
      /** @type {string} 乘客排名筛选类型: 'day' | 'week' | 'month' */
      passengerRankFilter: "day",
      /** @type {Array} 乘客排名数据 */
@@ -320,9 +460,25 @@
      orderVolumeChartInstance: null,
      /** @type {Object|null} 当日各时段订单情况图表实例 */
      dayOrderVolumeChartInstance: null,
      /** @type {string} 年度趋势选择年份 */
      yearTrendDate: "2026",
      /** @type {Array<string>} 总体订单统计时间段 */
      totalOrderDateRange: ["2026-01-30", "2026-05-30"],
      /** @type {Array<string>} 单日各时段订单情况时间段 */
      dayOrderTimeRange: ["16", "24"],
      /** @type {Array<string>} 实际用于显示的单日各时段订单情况时间段 */
      displayDayOrderTimeRange: ["16", "24"],
    };
  },
  computed: {},
  computed: {
    /**
     * @returns {number} 司机排名列表中最大的接单次数，用于计算进度条比例
     */
    maxDriverOrderCount() {
      if (!this.driverRankList || this.driverRankList.length === 0) return 1;
      return Math.max(...this.driverRankList.map((item) => item.count));
    }
  },
  watch: {
    /**
     * 监听新增乘客的筛选条件，改变时重新渲染图表
@@ -337,10 +493,23 @@
      this.initOrderVolumeChart();
    },
    /**
     * 监听司机排名的筛选条件，改变时更新数据
     */
    driverRankFilter() {
      this.fetchDriverRankData();
    },
    /**
     * 监听乘客排名的筛选条件，改变时更新数据
     */
    passengerRankFilter() {
      this.fetchPassengerRankData();
    },
    /**
     * 监听当日各时段订单的时间变化，因为 el-time-picker 会在滚动时实时触发 change
     * 我们改为监听其 visible 状态（通过 watch 或 blur 等），或者只监听用户主动操作完成后的数据变化
     */
    dayOrderTimeRange(newVal, oldVal) {
      // 在 Vue 的 watch 中不做任何事，将逻辑移交给 Element UI 隐藏时间选择器的 blur 事件
    }
  },
  created() {
@@ -368,19 +537,40 @@
    }
  },
  mounted() {
    // 首次挂载时传入默认静态数据，防止 X 轴默认 16~24 却只有 12 条数据导致的图表不匹配
    const defaultDayOrderData = [85, 130, 185, 145, 120, 180, 170, 160, 215]; 

    this.initChart();
    this.initTotalOrderChart();
    this.initNewPassengerChart();
    this.initOrderVolumeChart();
    this.initDayOrderVolumeChart();
    this.initDayOrderVolumeChart(defaultDayOrderData);
    this.fetchDriverRankData();
    this.fetchPassengerRankData();
    

    window.addEventListener("resize", this.handleResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    formatNumber,
    handleYearTrendChange(val) {
      console.log('年度趋势年份改变:', val);
      // 模拟数据改变
      const newData = Array.from({ length: 12 }, () => Math.floor(Math.random() * 3000) + 1000);
      this.initChart(newData);
    },
    handleTotalOrderChange(val) {
      console.log('总体订单时间段改变:', val);
      // 模拟数据改变
      this.orderStats = this.orderStats.map(item => ({
        ...item,
        value: Math.floor(Math.random() * 800) + 200,
        percent: Math.floor(Math.random() * 20 + 5) + '%'
      }));
      this.initTotalOrderChart();
    },
    /**
     * 更新顶部时间显示
     */
@@ -412,13 +602,16 @@
    },
    /**
     * 初始化年度趋势图表
     * @param {Array} seriesData 模拟的新数据，如果为空则使用默认值
     */
    initChart() {
    initChart(seriesData) {
      if (this.yearTrendChartInstance) {
        this.yearTrendChartInstance.dispose();
      }
      this.yearTrendChartInstance = initYearTrendChart(
        this.$refs.yearTrendChart
        this.$refs.yearTrendChart,
        this.yearTrendDate,
        seriesData
      );
    },
    /**
@@ -538,48 +731,97 @@
    },
    /**
     * 初始化当日各时段订单情况图表数据
     * @param {Array} seriesData 模拟的新数据，如果为空则使用默认值
     */
    initDayOrderVolumeChart() {
    initDayOrderVolumeChart(seriesData) {
      if (this.dayOrderVolumeChartInstance) {
        this.dayOrderVolumeChartInstance.dispose();
      }

      const xData = [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
      ];
      const seriesData = [
        85, 130, 185, 145, 120, 180, 170, 160, 215, 120, 85, 85,
      ];
      // 动态生成 X 轴的小时数据
      let startHour = 1;
      let endHour = 12;
      
      if (this.dayOrderTimeRange && this.dayOrderTimeRange.length === 2) {
        startHour = parseInt(this.dayOrderTimeRange[0]);
        endHour = parseInt(this.dayOrderTimeRange[1]);
      }
      
      const xData = [];
      const actualSeriesData = seriesData || [];
      
      // 如果没有传模拟数据，或者修改了时间范围，生成一些新的模拟数据
      if (!seriesData) {
        for (let i = startHour; i <= endHour; i++) {
          xData.push(String(i).padStart(2, '0'));
          actualSeriesData.push(Math.floor(Math.random() * 200) + 50);
        }
      } else {
        // 如果传入了固定数据（例如第一次初始化时）
        for (let i = startHour; i <= endHour; i++) {
          xData.push(String(i).padStart(2, '0'));
        }
      }

      this.dayOrderVolumeChartInstance = initDayOrderVolumeChart(
        this.$refs.dayOrderVolumeChart,
        xData,
        seriesData
        actualSeriesData
      );
    },
    handleDayOrderTimeBlur(component) {
      // Element UI 时间范围选择器失去焦点时（即选择完成点击面板外部或确认后）触发
      const val = this.dayOrderTimeRange;
      if (val && val.join(',') !== this.displayDayOrderTimeRange.join(',')) {
        this.handleDayOrderTimeChange(val);
      }
    },
    handleDayOrderTimeChange(val) {
      console.log('单日各时段订单时间段确认:', val);
      if (val) {
        this.displayDayOrderTimeRange = val;
      }
      this.initDayOrderVolumeChart(); // 调用时会自动根据新的 dayOrderTimeRange 生成随机数据
    },
    /**
     * 获取司机接单排名数据
     */
    fetchDriverRankData() {
      // 模拟接口请求数据
      let multiplier =
        this.driverRankFilter === "month"
          ? 30
          : this.driverRankFilter === "week"
          ? 7
          : 1;
      // 模拟 10 条数据
      this.driverRankList = [
        { plate: "豫GD99832", count: 1294 * multiplier },
        { plate: "豫GD99832", count: 889 * multiplier },
        { plate: "豫GD99832", count: 438 * multiplier },
        ...Array.from({ length: 7 }, (_, i) => ({
          plate: "豫GD99832",
          count: Math.floor(3234 - i * 50) * multiplier,
        })),
      ];
    },
    /**
     * 获取乘客排名数据
     */
    fetchPassengerRankData() {
      // 模拟接口请求数据
      let multiplier = this.passengerRankFilter === 'month' ? 30 : this.passengerRankFilter === 'week' ? 7 : 1;
      let multiplier =
        this.passengerRankFilter === "month"
          ? 30
          : this.passengerRankFilter === "week"
          ? 7
          : 1;
      this.passengerRankList = Array.from({ length: 8 }, (_, i) => ({
        phone: '15215268013',
        phone: "15215268013",
        count: Math.floor((88 - i * 5) * multiplier),
        orders: Math.floor((335 - i * 15) * multiplier)
        orders: Math.floor((335 - i * 15) * multiplier),
      }));
    }
    },
  },
};
</script>
@@ -590,5 +832,6 @@
@import "./styles/new-passenger.less";
@import "./styles/order-volume.less";
@import "./styles/day-order-volume.less";
@import "./styles/driver-order-rank.less";
@import "./styles/passenger-rank.less";
</style>

 screen/src/view/statistical-table/styles/driver-order-rank.less

New file
@@ -0,0 +1,134 @@
.driver-order-rank {
  position: relative;
  width: 100%;
  height: 465px;
  background: linear-gradient(142deg, #0066ff1a -1%, #0066ff1a 38%, #009bff00 130%);
  box-sizing: border-box;
  border: 1px solid;
  border-image: linear-gradient(4deg, #007be178 2%, #00000000 101%) 1;

  .driver-rank-content {
    padding: 20px;
    height: calc(100% - 40px);
    display: flex;
    flex-direction: column;

    .top-three {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      .top-card {
        position: relative;
        flex: 1;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        align-items: center;

        .order-count {
          font-size: 24px;
          font-weight: bold;
          color: #ffffff;
        }

        .plate-number {
          font-size: 14px;
          color: #ffffff;
        }

        &.card-2 {
          height: 80px;
          background-image: url("~@/assets/img/home/rank-two.png");
        }

        &.card-1 {
          height: 92px;
          flex: 1.1; // 稍微宽一点
          background-image: url("~@/assets/img/home/rank-one.png");

          .order-count {
            font-size: 28px;
          }
        }

        &.card-3 {
          height: 68px;
          background-image: url("~@/assets/img/home/rank-three.png");
        }
      }
    }

    .other-rank-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;

      .other-rank-item {
        position: relative;
        display: flex;
        align-items: center;
        height: 36px;
        background: rgba(14, 191, 218, 0.05);
        padding: 0 13px;
        box-sizing: border-box;

        .left-top-triangle {
          position: absolute;
          top: 0;
          left: 0;
          width: 5px;
          height: 5px;
          background-image: url("~@/assets/img/home/driver-rank-item-left-top.png");
          background-size: 100% 100%;
        }

        .rank-index-hex {
          width: 24px;
          height: 28px;
          background-image: url("~@/assets/img/home/driver-rank-index-bg.png");
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #20DBFD;
          font-size: 16px;
          margin-right: 8px;
        }

        .plate-number {
          font-size: 14px;
          color: #ffffff;
          white-space: nowrap;
        }

        .progress-bar-container {
          flex: 1;
          height: 6px;
          background: rgba(32, 219, 253, 0.1);
          margin: 0 18px;
          border-radius: 5px;
          position: relative;
          overflow: hidden;

          .progress-bar {
            height: 100%;
            background: linear-gradient(270deg, #20dbfd 0%, #20dbfd00 100%);
            border-radius: 5px;
          }
        }

        .order-count {
          font-size: 14px;
          color: #ffffff;
          font-weight: 900;
        }
      }
    }
  }
}

 screen/src/view/statistical-table/styles/passenger-rank.less

@@ -92,6 +92,7 @@
                gap: 10px;

                .rank-number {
                    flex-shrink: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;

 screen/src/view/statistical-table/styles/year-trend.less

@@ -27,6 +27,7 @@
  .date-icon {
    width: 14px;
    height: 14px;
    margin-right: 8px;
  }

  span {