BizScreenDecor 大屏装饰件

数据大屏装饰标准件：corner 四角描角 / frame 细框内发光 / capsule 上下胶囊端头三种边框装饰（包裹任意内容），title 大屏标题牌（渐变底 + 斜切右缘 + 副标题 / extra 操作位）。颜色统一经 color 属性注入（默认 EP 主色变量），与 BizScreenContainer 等比缩放容器配套。

边框装饰

设备总数：1,286在线率：98.6%

frame：细边框 + 内发光，适合指标卡与中部内容区

capsule：上下渐隐胶囊端头（success 色），适合列表区块

三种边框变体包裹指标 / 内容区（深色底演示大屏观感），color 换主题色。

<script setup lang="ts">
/** 三种边框装饰：corner 四角描角 / frame 细框内发光 / capsule 胶囊端头（包裹任意内容） */
import { BizScreenDecor } from 'vue3-ep-biz-lib'

const stats = [
  { label: '设备总数', value: '1,286' },
  { label: '在线率', value: '98.6%' },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 20px; max-width: 560px; background: var(--el-fill-color-darker); padding: 20px; border-radius: 8px">
    <BizScreenDecor variant="corner">
      <div style="display: flex; gap: 32px; padding: 8px 4px; color: var(--el-text-color-primary)">
        <span v-for="s in stats" :key="s.label">
          {{ s.label }}：<b style="font-size: 20px">{{ s.value }}</b>
        </span>
      </div>
    </BizScreenDecor>

    <BizScreenDecor variant="frame">
      <div style="padding: 10px 4px; color: var(--el-text-color-primary)">
        frame：细边框 + 内发光，适合指标卡与中部内容区
      </div>
    </BizScreenDecor>

    <BizScreenDecor variant="capsule" color="var(--el-color-success)">
      <div style="padding: 10px 4px; color: var(--el-text-color-primary)">
        capsule：上下渐隐胶囊端头（success 色），适合列表区块
      </div>
    </BizScreenDecor>
  </div>
</template>

显示代码

标题牌

城市运行监测中心CITY OPERATION CENTER

深色底上叠放标题牌与指标内容，配合 BizScreenContainer 等比缩放组成大屏页头。

variant="title"：标题 + 副标题 + extra 插槽（状态徽标 / 时间等）。

<script setup lang="ts">
/** 标题牌：variant=title 渐变底 + 斜切右缘 + 副标题 / extra 操作位 */
import { ElTag } from 'element-plus'
import { BizScreenDecor } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="background: var(--el-fill-color-darker); padding: 24px; border-radius: 8px">
    <BizScreenDecor variant="title" title="城市运行监测中心" subtitle="CITY OPERATION CENTER">
      <ElTag size="small" effect="dark" type="danger">实时</ElTag>
    </BizScreenDecor>
    <div style="margin-top: 16px; color: var(--el-text-color-secondary); font-size: 13px">
      深色底上叠放标题牌与指标内容，配合 BizScreenContainer 等比缩放组成大屏页头。
    </div>
  </div>
</template>

显示代码

主题色注入

正常设备1,024

预警设备186

故障设备47

离线设备29

color 接受任意 css color，同一装饰按指标语义配色。

<script setup lang="ts">
/** 主题色注入：color 接受任意 css color——同一装饰按指标语义配色 */
import { BizScreenDecor } from 'vue3-ep-biz-lib'

const cards = [
  { label: '正常设备', value: '1,024', color: 'var(--el-color-success)' },
  { label: '预警设备', value: '186', color: 'var(--el-color-warning)' },
  { label: '故障设备', value: '47', color: 'var(--el-color-danger)' },
  { label: '离线设备', value: '29', color: 'var(--el-color-info)' },
]
</script>

<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 560px; background: var(--el-fill-color-darker); padding: 20px; border-radius: 8px">
    <BizScreenDecor v-for="c in cards" :key="c.label" variant="corner" :color="c.color">
      <div style="display: flex; justify-content: space-between; padding: 8px 4px; color: var(--el-text-color-primary)">
        <span>{{ c.label }}</span>
        <b style="font-size: 20px">{{ c.value }}</b>
      </div>
    </BizScreenDecor>
  </div>
</template>

显示代码

指标卡阵列

今日交易额（万元）

8,264

+12.4%

在线用户

32,981

+3.2%

订单量

56,204

-1.8%

服务可用率

99.98%

持平

corner 包裹指标位组成大屏顶部核心指标行。

<script setup lang="ts">
/** 指标卡阵列：corner 包裹四个指标位（大屏顶部核心指标行典型用法） */
import { BizScreenDecor } from 'vue3-ep-biz-lib'

const stats = [
  { label: '今日交易额（万元）', value: '8,264', trend: '+12.4%' },
  { label: '在线用户', value: '32,981', trend: '+3.2%' },
  { label: '订单量', value: '56,204', trend: '-1.8%' },
  { label: '服务可用率', value: '99.98%', trend: '持平' },
]
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 760px; background: var(--el-fill-color-darker); padding: 20px; border-radius: 8px">
    <BizScreenDecor v-for="s in stats" :key="s.label" variant="corner">
      <div style="padding: 10px 6px; color: var(--el-text-color-primary); text-align: center">
        <div style="font-size: 12px; color: var(--el-text-color-secondary)">{{ s.label }}</div>
        <div style="font-size: 24px; font-weight: 600; margin: 4px 0">{{ s.value }}</div>
        <div style="font-size: 12px" :style="{ color: s.trend.startsWith('-') ? 'var(--el-color-danger)' : s.trend === '持平' ? 'var(--el-text-color-secondary)' : 'var(--el-color-success)' }">
          {{ s.trend }}
        </div>
      </div>
    </BizScreenDecor>
  </div>
</template>

显示代码

胶囊列表区

实时动态

14:32:05深圳福田站 告警恢复

14:28:41广州天河站 新增巡检工单

14:21:17上海浦东站 客流峰值 2.1 万

14:15:52北京朝阳站 设备固件升级完成

14:02:36杭州西湖站 电量低预警

13:56:20成都锦江站 数据同步完成

capsule 端头包裹滚动列表（实时动态 / 排行位）。

<script setup lang="ts">
/** 胶囊列表区：capsule 端头包裹滚动列表（大屏左右两栏的排行 / 实时动态位） */
import { BizScreenDecor } from 'vue3-ep-biz-lib'

interface EventRow { time: string; text: string }

const events: EventRow[] = [
  { time: '14:32:05', text: '深圳福田站 告警恢复' },
  { time: '14:28:41', text: '广州天河站 新增巡检工单' },
  { time: '14:21:17', text: '上海浦东站 客流峰值 2.1 万' },
  { time: '14:15:52', text: '北京朝阳站 设备固件升级完成' },
  { time: '14:02:36', text: '杭州西湖站 电量低预警' },
  { time: '13:56:20', text: '成都锦江站 数据同步完成' },
]
</script>

<template>
  <div style="max-width: 420px; background: var(--el-fill-color-darker); padding: 20px; border-radius: 8px">
    <BizScreenDecor variant="capsule">
      <div style="padding: 4px 12px; color: var(--el-text-color-primary)">
        <div style="font-size: 13px; color: var(--el-text-color-secondary); padding: 6px 0 2px">实时动态</div>
        <div
          v-for="e in events"
          :key="e.time"
          style="display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--el-border-color-darker); font-size: 13px"
        >
          <span style="color: var(--el-color-primary)">{{ e.time }}</span>
          <span>{{ e.text }}</span>
        </div>
      </div>
    </BizScreenDecor>
  </div>
</template>

显示代码

组合面板

园区能耗监测ENERGY MONITORING

接入站点

86

在线率

98.6%

今日告警

12

主变压器负载 72% · 今日用电 12,480 kWh · 较昨日 +6.3%

14:32 深圳福田站 告警恢复

14:28 广州天河站 新增工单

14:21 上海浦东站 客流峰值

title 标题牌 + corner 指标行 + frame 内容区 + capsule 动态栏拼出迷你大屏面板。

<script setup lang="ts">
/** 组合示例：title 标题牌 + corner 指标行 + frame 内容区 + capsule 动态栏拼出一块迷你大屏面板 */
import { ElTag } from 'element-plus'
import { BizScreenDecor } from 'vue3-ep-biz-lib'

const stats = [
  { label: '接入站点', value: '86' },
  { label: '在线率', value: '98.6%' },
  { label: '今日告警', value: '12' },
]

const events = ['14:32 深圳福田站 告警恢复', '14:28 广州天河站 新增工单', '14:21 上海浦东站 客流峰值']
</script>

<template>
  <div style="max-width: 720px; background: var(--el-fill-color-darker); padding: 20px; border-radius: 8px; display: flex; flex-direction: column; gap: 16px">
    <BizScreenDecor variant="title" title="园区能耗监测" subtitle="ENERGY MONITORING">
      <ElTag size="small" effect="dark" type="success">运行中</ElTag>
    </BizScreenDecor>

    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px">
      <BizScreenDecor v-for="s in stats" :key="s.label" variant="corner">
        <div style="text-align: center; padding: 6px 0; color: var(--el-text-color-primary)">
          <div style="font-size: 12px; color: var(--el-text-color-secondary)">{{ s.label }}</div>
          <div style="font-size: 20px; font-weight: 600">{{ s.value }}</div>
        </div>
      </BizScreenDecor>
    </div>

    <BizScreenDecor variant="frame">
      <div style="padding: 12px; color: var(--el-text-color-primary); font-size: 13px">
        主变压器负载 72% · 今日用电 12,480 kWh · 较昨日 +6.3%
      </div>
    </BizScreenDecor>

    <BizScreenDecor variant="capsule" color="var(--el-color-warning)">
      <div style="padding: 4px 12px; color: var(--el-text-color-primary); font-size: 13px">
        <div v-for="e in events" :key="e" style="padding: 5px 0; border-bottom: 1px solid var(--el-border-color-darker)">
          {{ e }}
        </div>
      </div>
    </BizScreenDecor>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
variant	'corner' | 'frame' | 'capsule' | 'title'	corner	装饰样式
color	string	var(--el-color-primary)	主题色（任意 css color）
title	string	''	variant=title 标题文案
subtitle	string	—	variant=title 副标题

Slots

插槽名	说明
default	边框变体包裹的内容
title	variant=title 覆盖标题文案
extra	variant=title 标题右侧操作位