BizStatisticGroup 统计栏组

横向分页容器：默认展示 visible（3）张统计卡——items 数据驱动内部渲染 BizStatistic（props 全透传），或 default 插槽放任意自定义卡片；超出后左右箭头步进浏览，首位左箭头置灰（或隐藏）、末位右箭头同理。可配翻页/单卡步进、常显/悬停箭头、底部页码点与循环步进。看板 KPI 带、工作台指标行超出屏宽时的标准滚动容器。

基础用法

今日销售额

¥1,284,560

+12.4%较昨日

订单数

3,421单

+8.2%较昨日

支付转化率

3.6%

-0.3%较昨日

客单价

¥375

+2.1%较上周

退款率

1.2%

持平较上周

5 项指标默认展示 3 张：内容未超出不渲染箭头；超出后初始在首位，左箭头置灰不可点，翻到末页后右箭头置灰。

<script setup lang="ts">
/** 基础用法：5 项指标默认展示 3 张，超出后箭头步进浏览，首位左箭头置灰 */
import { BizStatisticGroup } from 'vue3-ep-biz-lib'
import type { BizStatisticGroupItem } from 'vue3-ep-biz-lib'

const items: BizStatisticGroupItem[] = [
  { title: '今日销售额', value: 1284560, prefix: '¥', trend: 'up', trendText: '+12.4%', trendLabel: '较昨日' },
  { title: '订单数', value: 3421, suffix: '单', trend: 'up', trendText: '+8.2%', trendLabel: '较昨日' },
  { title: '支付转化率', value: 3.6, precision: 1, suffix: '%', trend: 'down', trendText: '-0.3%', trendLabel: '较昨日' },
  { title: '客单价', value: 375, prefix: '¥', trend: 'up', trendText: '+2.1%', trendLabel: '较上周' },
  { title: '退款率', value: 1.2, precision: 1, suffix: '%', trend: 'flat', trendText: '持平', trendLabel: '较上周' },
]
</script>

<template>
  <div style="max-width: 820px">
    <BizStatisticGroup :items="items" />
  </div>
</template>

显示代码

运营总览仪表盘（超屏翻页 + 范围联动）

近 7 天近 30 天

GMV

¥8,912,000

+9.8%环比

订单数

23,410单

+6.4%环比

支付转化率

4.2%

+0.4%环比

客单价

¥381

持平环比

活跃用户

156,800人

+11.2%环比

新客占比

28.4%

-1.6%环比

退款率

1.3%

-0.2%环比

复购率

32.7%

+2.3%环比

8 项 KPI 默认展示 3 张，左右箭头按页翻动浏览；切换时间范围整组数据联动刷新

8 项 KPI 默认 3 张可视，箭头按页翻动浏览全部；切换时间范围（近 7 天 / 近 30 天）整组数据联动刷新。

<script setup lang="ts">
/** 场景：运营总览仪表盘——8 项 KPI 超屏翻页浏览 + 时间范围切换联动 */
import { computed, ref } from 'vue'
import { ElRadioButton, ElRadioGroup } from 'element-plus'
import { BizStatisticGroup } from 'vue3-ep-biz-lib'
import type { BizStatisticGroupItem } from 'vue3-ep-biz-lib'

const range = ref<'week' | 'month'>('week')

const dataSource: Record<'week' | 'month', BizStatisticGroupItem[]> = {
  week: [
    { title: 'GMV', value: 8912000, prefix: '¥', trend: 'up', trendText: '+9.8%', trendLabel: '环比' },
    { title: '订单数', value: 23410, suffix: '单', trend: 'up', trendText: '+6.4%', trendLabel: '环比' },
    { title: '支付转化率', value: 4.2, precision: 1, suffix: '%', trend: 'up', trendText: '+0.4%', trendLabel: '环比' },
    { title: '客单价', value: 381, prefix: '¥', trend: 'flat', trendText: '持平', trendLabel: '环比' },
    { title: '活跃用户', value: 156800, suffix: '人', trend: 'up', trendText: '+11.2%', trendLabel: '环比' },
    { title: '新客占比', value: 28.4, precision: 1, suffix: '%', trend: 'down', trendText: '-1.6%', trendLabel: '环比' },
    { title: '退款率', value: 1.3, precision: 1, suffix: '%', trend: 'down', trendText: '-0.2%', trendLabel: '环比' },
    { title: '复购率', value: 32.7, precision: 1, suffix: '%', trend: 'up', trendText: '+2.3%', trendLabel: '环比' },
  ],
  month: [
    { title: 'GMV', value: 37245000, prefix: '¥', trend: 'up', trendText: '+14.1%', trendLabel: '环比' },
    { title: '订单数', value: 98670, suffix: '单', trend: 'up', trendText: '+10.9%', trendLabel: '环比' },
    { title: '支付转化率', value: 4.5, precision: 1, suffix: '%', trend: 'up', trendText: '+0.3%', trendLabel: '环比' },
    { title: '客单价', value: 377, prefix: '¥', trend: 'down', trendText: '-1.0%', trendLabel: '环比' },
    { title: '活跃用户', value: 523400, suffix: '人', trend: 'up', trendText: '+15.6%', trendLabel: '环比' },
    { title: '新客占比', value: 31.2, precision: 1, suffix: '%', trend: 'up', trendText: '+2.8%', trendLabel: '环比' },
    { title: '退款率', value: 1.1, precision: 1, suffix: '%', trend: 'down', trendText: '-0.2%', trendLabel: '环比' },
    { title: '复购率', value: 34.9, precision: 1, suffix: '%', trend: 'up', trendText: '+2.2%', trendLabel: '环比' },
  ],
}

const items = computed(() => dataSource[range.value])
</script>

<template>
  <div style="max-width: 820px">
    <ElRadioGroup v-model="range" style="margin-bottom: 12px">
      <ElRadioButton value="week">近 7 天</ElRadioButton>
      <ElRadioButton value="month">近 30 天</ElRadioButton>
    </ElRadioGroup>
    <BizStatisticGroup :items="items" />
    <div style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      8 项 KPI 默认展示 3 张，左右箭头按页翻动浏览；切换时间范围整组数据联动刷新
    </div>
  </div>
</template>

显示代码

设备监控大屏（悬停箭头 + 页码点 + 下钻）

在线设备

168台

+6较昨日

离线设备

7台

-2较昨日

告警数

12个

+3较昨日

平均负载

62.4%

+4.1%较昨日

今日能耗

4,286kW·h

-3.2%较昨日

芯片温度

71°C

+2°C较昨日

运行时长

126 天

稳定本月

悬停组容器浮现左右箭头；底部页码点指示当前位置；点击卡片下钻该指标明细

arrow-trigger="hover" 悬停组容器才浮现箭头，配合 indicator 底部页码点指示当前位置；item-click 作为指标下钻入口。

<script setup lang="ts">
/** 场景：设备监控大屏——悬停浮现箭头 + 底部页码点 + 卡片点击下钻 */
import { ElMessage } from 'element-plus'
import { Connection, Cpu, Monitor, Odometer, WarningFilled, WindPower } from '@element-plus/icons-vue'
import { BizStatisticGroup } from 'vue3-ep-biz-lib'
import type { BizStatisticGroupItem } from 'vue3-ep-biz-lib'

const items: BizStatisticGroupItem[] = [
  { key: 'online', title: '在线设备', value: 168, suffix: '台', icon: Monitor, trend: 'up', trendText: '+6', trendLabel: '较昨日' },
  { key: 'offline', title: '离线设备', value: 7, suffix: '台', icon: Connection, trend: 'down', trendText: '-2', trendLabel: '较昨日' },
  { key: 'alarm', title: '告警数', value: 12, suffix: '个', icon: WarningFilled, trend: 'up', trendText: '+3', trendLabel: '较昨日' },
  { key: 'load', title: '平均负载', value: 62.4, precision: 1, suffix: '%', icon: Odometer, trend: 'up', trendText: '+4.1%', trendLabel: '较昨日' },
  { key: 'energy', title: '今日能耗', value: 4286, suffix: 'kW·h', icon: WindPower, trend: 'down', trendText: '-3.2%', trendLabel: '较昨日' },
  { key: 'chip', title: '芯片温度', value: 71, precision: 0, suffix: '°C', icon: Cpu, trend: 'up', trendText: '+2°C', trendLabel: '较昨日' },
  { key: 'uptime', title: '运行时长', value: '126 天', trend: 'flat', trendText: '稳定', trendLabel: '本月' },
]

const onDrill = (item: BizStatisticGroupItem, index: number): void => {
  ElMessage.info(`下钻「${item.title}」指标明细（第 ${index + 1} 项，真实业务为路由跳转设备列表）`)
}
</script>

<template>
  <div style="max-width: 820px">
    <BizStatisticGroup :items="items" arrow-trigger="hover" indicator @item-click="onDrill" />
    <div style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      悬停组容器浮现左右箭头；底部页码点指示当前位置；点击卡片下钻该指标明细
    </div>
  </div>
</template>

显示代码

审批工作台（边界箭头不展示 + 单卡步进）

待我审批

23件

+5今日新增

我发起的

9件

持平今日

已通过

156件

+18本周

已驳回

12件

-4本周

超时未处理

4件

+2本周

首位时左箭头不展示、末位时右箭头不展示；步进按单卡移动（step="card"），适合逐项巡检式浏览

arrow-disabled-mode="hidden"：首位时左箭头不展示、末位时右箭头不展示；step="card" 每次移动一张，适合逐项巡检式浏览。

<script setup lang="ts">
/** 场景：审批工作台——5 项待办指标，到边界箭头不展示（hidden 形态） */
import { Bell, Clock, Document, Reading, Tickets } from '@element-plus/icons-vue'
import { BizStatisticGroup } from 'vue3-ep-biz-lib'
import type { BizStatisticGroupItem } from 'vue3-ep-biz-lib'

const items: BizStatisticGroupItem[] = [
  { title: '待我审批', value: 23, suffix: '件', icon: Tickets, trend: 'up', trendText: '+5', trendLabel: '今日新增' },
  { title: '我发起的', value: 9, suffix: '件', icon: Document, trend: 'flat', trendText: '持平', trendLabel: '今日' },
  { title: '已通过', value: 156, suffix: '件', icon: Reading, trend: 'up', trendText: '+18', trendLabel: '本周' },
  { title: '已驳回', value: 12, suffix: '件', icon: Bell, trend: 'down', trendText: '-4', trendLabel: '本周' },
  { title: '超时未处理', value: 4, suffix: '件', icon: Clock, trend: 'up', trendText: '+2', trendLabel: '本周' },
]
</script>

<template>
  <div style="max-width: 820px">
    <BizStatisticGroup :items="items" arrow-disabled-mode="hidden" step="card" />
    <div style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      首位时左箭头不展示、末位时右箭头不展示；步进按单卡移动（step="card"），适合逐项巡检式浏览
    </div>
  </div>
</template>

显示代码

连锁门店业绩带（切换刷新 + 数字滚动）

杭州西湖店上海静安店北京朝阳店

月销售额

¥1,268,000

+8.4%环比

月订单数

3,842单

+5.1%环比

转化率

4.1%

+0.3%环比

客单价

¥330

持平环比

退款率

1.2%

-0.1%环比

切换门店后同构 KPI 复用卡片实例，数值从旧值缓动到新值（animation 透传 BizStatistic）

门店切换后同构 KPI 复用卡片实例，animation 透传至 BizStatistic，数值从旧值缓动到新值。

<script setup lang="ts">
/** 场景：连锁门店业绩带——门店切换整组刷新，数值从旧值滚动到新值（animation） */
import { computed, ref } from 'vue'
import { ElRadioButton, ElRadioGroup } from 'element-plus'
import { BizStatisticGroup } from 'vue3-ep-biz-lib'
import type { BizStatisticGroupItem } from 'vue3-ep-biz-lib'

type StoreKey = 'xihu' | 'jingan' | 'chaoyang'

const store = ref<StoreKey>('xihu')

const storeNames: Record<StoreKey, string> = {
  xihu: '杭州西湖店',
  jingan: '上海静安店',
  chaoyang: '北京朝阳店',
}

interface StoreKpi {
  gmv: number
  orders: number
  conversion: number
  avgPrice: number
  refund: number
}

const dataSource: Record<StoreKey, StoreKpi> = {
  xihu: { gmv: 1268000, orders: 3842, conversion: 4.1, avgPrice: 330, refund: 1.2 },
  jingan: { gmv: 2035000, orders: 5218, conversion: 4.8, avgPrice: 390, refund: 0.9 },
  chaoyang: { gmv: 1782000, orders: 4630, conversion: 4.4, avgPrice: 385, refund: 1.6 },
}

const items = computed<BizStatisticGroupItem[]>(() => {
  const kpi = dataSource[store.value]
  return [
    { title: '月销售额', value: kpi.gmv, prefix: '¥', animation: true, animationDuration: 1200, trend: 'up', trendText: '+8.4%', trendLabel: '环比' },
    { title: '月订单数', value: kpi.orders, suffix: '单', animation: true, animationDuration: 1200, trend: 'up', trendText: '+5.1%', trendLabel: '环比' },
    { title: '转化率', value: kpi.conversion, precision: 1, suffix: '%', animation: true, animationDuration: 1200, trend: 'up', trendText: '+0.3%', trendLabel: '环比' },
    { title: '客单价', value: kpi.avgPrice, prefix: '¥', animation: true, animationDuration: 1200, trend: 'flat', trendText: '持平', trendLabel: '环比' },
    { title: '退款率', value: kpi.refund, precision: 1, suffix: '%', animation: true, animationDuration: 1200, trend: 'down', trendText: '-0.1%', trendLabel: '环比' },
  ]
})
</script>

<template>
  <div style="max-width: 820px">
    <ElRadioGroup v-model="store" style="margin-bottom: 12px">
      <ElRadioButton v-for="(name, key) in storeNames" :key="key" :value="key">{{ name }}</ElRadioButton>
    </ElRadioGroup>
    <BizStatisticGroup :items="items" />
    <div style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      切换门店后同构 KPI 复用卡片实例，数值从旧值缓动到新值（animation 透传 BizStatistic）
    </div>
  </div>
</template>

显示代码

IT 资源池概览（good 口径 + large 大屏档）

CPU 使用率

43.6%

-2.4%

内存占用

68.2%

-1.1%

存储用量

15.7 TB

+0.4 TB

网络入流量

826 Mbps

-45

运行实例

312个

+12

光伏供电占比

27.5%

+3.6%

good 口径：使用率下降渲染为绿色（好）；large 档位放大数值与内边距，适配投屏与数据大屏

size: 'large' 透传放大数值与内边距适配投屏；trend-mode: 'good' 时使用率下降渲染为绿色（好）。

<script setup lang="ts">
/** 场景：IT 资源池概览——good 口径（涨=绿=好）+ large 大屏档位 */
import { Coin, Connection, Cpu, DataLine, Platform, Sunny } from '@element-plus/icons-vue'
import { BizStatisticGroup } from 'vue3-ep-biz-lib'
import type { BizStatisticGroupItem } from 'vue3-ep-biz-lib'

const items: BizStatisticGroupItem[] = [
  { title: 'CPU 使用率', value: 43.6, precision: 1, suffix: '%', icon: Cpu, trend: 'down', trendText: '-2.4%', trendMode: 'good', size: 'large' },
  { title: '内存占用', value: 68.2, precision: 1, suffix: '%', icon: Coin, trend: 'down', trendText: '-1.1%', trendMode: 'good', size: 'large' },
  { title: '存储用量', value: 15.7, precision: 1, suffix: ' TB', icon: DataLine, trend: 'up', trendText: '+0.4 TB', trendMode: 'good', size: 'large' },
  { title: '网络入流量', value: 826, suffix: ' Mbps', icon: Connection, trend: 'down', trendText: '-45', trendMode: 'good', size: 'large' },
  { title: '运行实例', value: 312, suffix: '个', icon: Platform, trend: 'up', trendText: '+12', trendMode: 'good', size: 'large' },
  { title: '光伏供电占比', value: 27.5, precision: 1, suffix: '%', icon: Sunny, trend: 'up', trendText: '+3.6%', trendMode: 'good', size: 'large' },
]
</script>

<template>
  <div style="max-width: 880px">
    <BizStatisticGroup :items="items" />
    <div style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      good 口径：使用率下降渲染为绿色（好）；large 档位放大数值与内边距，适配投屏与数据大屏
    </div>
  </div>
</template>

显示代码

自定义插槽卡

库存总量

101.2m³

-4.2%较昨日

1 号原料罐正常

36.0 m³ / 50 m³

2 号原料罐高液位

45.5 m³ / 50 m³

3 号成品罐正常

13.5 m³ / 30 m³

4 号成品罐正常

5.4 m³ / 30 m³

5 号应急罐正常

0.8 m³ / 10 m³

不传 items 时 default 插槽任意内容成组：直接子元素按可视数等宽并参与滚动分页

不传 items 时 default 插槽任意内容成组：直接子元素按可视数等宽约束并参与滚动分页，可与 BizStatistic 混排。

<script setup lang="ts">
/** 场景：自定义插槽卡——default 插槽混排 BizStatistic 与带进度的自绘卡，栏组只管分页约束 */
import { ElProgress } from 'element-plus'
import { BizStatistic, BizStatisticGroup } from 'vue3-ep-biz-lib'

interface TankRow {
  name: string
  percent: number
  volume: string
  status: 'normal' | 'warning'
}

const tanks: TankRow[] = [
  { name: '1 号原料罐', percent: 72, volume: '36.0 m³ / 50 m³', status: 'normal' },
  { name: '2 号原料罐', percent: 91, volume: '45.5 m³ / 50 m³', status: 'warning' },
  { name: '3 号成品罐', percent: 45, volume: '13.5 m³ / 30 m³', status: 'normal' },
  { name: '4 号成品罐', percent: 18, volume: '5.4 m³ / 30 m³', status: 'normal' },
  { name: '5 号应急罐', percent: 8, volume: '0.8 m³ / 10 m³', status: 'normal' },
]
</script>

<template>
  <div style="max-width: 820px">
    <BizStatisticGroup>
      <BizStatistic title="库存总量" :value="101.2" :precision="1" suffix="m³" trend="down" trend-text="-4.2%" trend-label="较昨日" />
      <div
        v-for="tank in tanks"
        :key="tank.name"
        style="display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; background: var(--el-bg-color); border: 1px solid var(--el-border-color-lighter); border-radius: var(--el-border-radius-base)"
      >
        <div style="display: flex; align-items: center; justify-content: space-between">
          <span style="font-size: var(--el-font-size-base); color: var(--el-text-color-secondary)">{{ tank.name }}</span>
          <span :style="{ fontSize: '13px', color: tank.status === 'warning' ? 'var(--el-color-warning)' : 'var(--el-text-color-placeholder)' }">
            {{ tank.status === 'warning' ? '高液位' : '正常' }}
          </span>
        </div>
        <ElProgress :percentage="tank.percent" :status="tank.status === 'warning' ? 'warning' : 'success'" :stroke-width="8" />
        <span style="font-size: 13px; color: var(--el-text-color-regular)">{{ tank.volume }}</span>
      </div>
    </BizStatisticGroup>
    <div style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      不传 items 时 default 插槽任意内容成组：直接子元素按可视数等宽并参与滚动分页
    </div>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
items	BizStatisticGroupItem[]	—	统计项数组（透传 BizStatistic 全部 props + key 列表键）；缺省走 default 插槽
visible	number	3	可视卡数（容器过窄时按卡片 min-width: 180px 自动降级）
gap	number	16	卡间距 px
step	'page' | 'card'	'page'	箭头步进单位：翻一页 / 移一张
arrow-trigger	'always' | 'hover'	'always'	箭头显示时机：常显 / 悬停浮现
arrow-disabled-mode	'disabled' | 'hidden'	'disabled'	到边界箭头形态：置灰 / 不展示
indicator	boolean	false	底部页码指示器
loop	boolean	false	循环步进（首尾相接，箭头不置灰）

BizStatisticGroupItem 继承 BizStatisticProps 全部属性（title / value / trend / animation / size 等），另含 key?: string | number。

Events

事件名	参数	说明
item-click	(item: BizStatisticGroupItem, index: number)	数据卡点击（指标下钻入口；插槽模式不触发）

Slots

插槽名	说明
default	自定义卡片（与 items 二选一）：直接子元素按可视数等宽约束并参与滚动分页

Expose

名称	类型	说明
prev	() => void	上一步进（含循环回绕）
next	() => void	下一步进（含循环回绕）
scrollToIndex	(index: number) => void	滚动到指定卡
scrollToPage	(page: number) => void	滚动到指定页（0 起）
refresh	() => void	重新测量（插槽模式内容变化后手动调用）