状态卡片

组件概述

状态卡片是一种文字组件，通常以彩色圆点的形式展示某一实体（例如，服务器）的当前状态和相关信息，支持配置多个状态类别。

使用场景

常用于在可视化应用中直观地展示多种类别的状态信息。例如，展示一个集群中多台服务器的运行状态。

效果展示

• 横向布局

• 纵向布局

• 交互场景

前提条件

• 已创建数据看板，支持使用模板创建、使用空白画布创建、使用AI智能生成。

• 已准备业务数据，详情请参见数据源。

添加状态卡片

1. 登录DataV控制台。

2. 在工作台页面的数据看板区域，鼠标悬停至目标看板，单击编辑，进入看板的画布编辑页面。

3. 在左侧导航栏的组件库 > 信息列表下，单击状态卡片组件，添加该组件至画布。

您也可使用全局搜索添加相关组件。

接入业务数据

添加组件后，您可将已准备的业务数据接入组件进行显示。单击状态卡片，在右侧的数据源页签，即可选择该组件所要呈现的数据。

• 状态卡片接收的数据字段介绍如下。

  字段	说明
  name	设置状态卡片中每种状态对应的文本内容。
  value	设置状态卡片的状态类型（即文本前的圆点）。需要与样式 > 系列 > 状态种类 > 状态类型名配置项的内容对应，并且使用状态类型中定义的样式进行渲染，若超出状态类型名的取值范围，相应状态类型将无法显示。

  示例状态卡片的数据结构及效果展示如下。

  [
    {
      "name": "运行中",
      "value": "1"
    },
    [
      "等待中",
      "2"
    ],
    [
      "运行完成",
      "3"
    ],
    [
      "运行失败",
      "4"
    ]
  ]

  

• 数据源的核心配置项介绍如下。

  配置项	描述
  选择数据源	支持接入CSV文件、API、各类数据库等多种类型数据，详情请参见支持的数据源类型。您可使用可视化表格或代码方式编辑数据字段。
  配置过滤器（可选）	用于自定义过滤代码，实现数据的结构转换、筛选、展示和简单的计算，详情请参见管理数据过滤器。
  配置数据映射	用于将所选数据源中的字段映射至组件对应的字段上，实现数据的实时匹配。单击图标可配置字段样式。
  查看响应结果	用于实时展示组件所接入的数据。当组件数据源发生变化时，此处会对应展示最新数据。 单击数据响应结果，可查看编写的数据字段代码。 单击查看示例，可查看数据源接收的数组类型及代码示例。您可参考示例编写相关字段。 其他数据请求配置： 禁止加载态：勾选后，在组件更新或预览数据看板时，将不呈现组件初始化时的加载内容。 受控模式：勾选后，组件在初始化状态下不会请求数据。此时仅支持通过蓝图编辑器或全局变量事件发起数据请求。 自动更新请求：勾选后，平台会根据您设置的轮询时间，动态轮询更新数据；不勾选，则需手动刷新页面，或通过蓝图编辑器和全局变量事件来触发请求更新数据。

配置状态卡片

单击状态卡片组件，即可在右侧面板配置组件的基础样式、交互事件，以及蓝图交互配置。

[
  {
    "name": "虚拟机已启动",
    "value": "1"  //此处与样式面板的状态类型名内容对应
  }
]

    {
      // 移动方式。绝对定位：to，相对定位：by。默认值：to。
      "positionType": "to",
      // 指定位置。x坐标，y坐标。
      "attr": {
        "x": 0,
        "y": 0
      },
      // 动画方式。
      "animation": {
        "enable": false,
        // 动画延时。
        "animationDuration": 1000,
        // 动画曲线。可选值为：linear|easeInOutQuad|easeInOutExpo。
        "animationEasing": "linear"
      }
    }

{
  "animationType": "fade",
  "animationDuration": 1000,
  "animationEasing": "linear"
}

案例演示

本案例通过轮播列表与状态卡片进行交互，展示不同地区的虚拟机状态。单击轮播列表的某一行后，状态卡片将动态显示该地区对应虚拟机的状态。

1. 添加组件至画布。

   1. 登录DataV控制台。

   2. 选择任一数据看板，单击编辑，进入画布编辑器。

   3. 在左侧导航栏的组件库中，单击轮播列表和状态卡片两个组件，添加至画布。

2. 配置轮播列表。

   1. 修改接入数据。

      单击轮播列表，在数据源面板按下图步骤修改静态数据内容。

      

      示例数据如下

      [
        {
          "cluster": "华东",
          "vm": "vm-001",
          "status": "正常"
        },
        {
          "cluster": "华南",
          "vm": "vm-002",
          "status": "未连接"
        },
        {
          "cluster": "华西",
          "vm": "vm-003",
          "status": "故障"
        },
        {
          "cluster": "华北",
          "vm": "vm-004",
          "status": "正常"
        }
      ]

   2. 配置组件样式。

      在样式面板，按下图步骤设置全局样式的表格行数为3，并开启轮播；修改自定义列的标签内容。标签内容如下：

      • 列字段名：依次修改为“cluster”、“vm”、“status”。

      • 列显示名：依次修改为“集群”、“虚拟机”、“状态”。

      

3. 配置状态卡片。

   1. 修改接入数据。

      单击状态卡片，在数据源面板按下图步骤修改静态数据内容。

      

      示例代码如下

      [
        {
          "name": "状态正常",
          "value": "正常"
        },
        [
          "状态异常",
          "故障"
        ],
        [
          "虚拟机未连接",
          "未连接"
        ]
      ]

   2. 配置组件样式。

      在样式面板，按下图步骤修改状态卡片的状态种类。保留三种状态，依次为正常（绿色）、故障（红色）、未连接（白色）。

4. 配置蓝图交互。

   1. 单击页面左上角的图标，进入蓝图页面。

   2. 在左侧图层节点页签，鼠标悬停至组件，单击图标，添加组件至主画布。

      您需依次执行该操作，添加轮播列表、状态卡片组件至主画布。

   3. 在左侧逻辑节点页签，鼠标悬停至串行数据处理节点，单击图标，添加组件至主画布。

   4. 按下图连接组件，实现点击轮播列表某行时，导入该行的相应状态至状态卡片。

   5. 单击串行数据处理节点，配置节点的处理方法。

      单击轮播列表指定行，状态卡片将导入该行的虚拟机名称及状态信息。示例代码如下。

      return [
        {
          "name": data.vm,
          "value": data.status,
        }
      ]

5. 单击页面右上角的预览，预览展示结果。