# 使用在线构建方式新建卡片 支持无模板在线构建图表卡片和表单卡片。 #### 前提条件 需要具备AppStage指标开发者或运营管理员权限，权限申请的操作请参见[权限管理](https://support.huaweicloud.com/usermanual-appstage/appstage_04_0009.html)。 #### 使用在线构建方式新建图表卡片 1. 登录[AppStage业务控制台](https://appstage.huaweicloud.com/portal/home)。 2. 在快捷入口选择"运营中心"，进入运营中心。 3. 在左侧导航栏选择"看板管理 \> 我的卡片"。 4. 在"我的卡片"页面，选择卡片分类，单击"新建卡片"。 5. 选择卡片创建方式。在"创建方式"下单击"在线构建"。 6. （可选）在界面右上方，单击"选择模板"，在卡片模板列表通过搜索选择需要的卡片模板，单击"确定"。 仅使用模板新建卡片时，操作此步骤。 7. 在左侧"组件库"下，拖拽组件至中间画布中。 图表卡片：为图形和表格组成的卡片。 组件库包含基础组件、图表组件、高级组件，单击对应组件名称，即可查看该组件内的全部组件。 画布上显示标尺，在画布最下方，可设置画布的宽高、背景图片及颜色、置空背景、放大、缩小、自适应、缩略图导航、组件对齐方式，也可以手动输入画布的缩放比例，撤销与恢复在画布中对组件的操作。 8. 在左侧"图层"下，为组件设置显示效果，操作图标解释请参考[表1]。 表1图层操作图标释义 | 图标 | 含义 | |:---|:---| | ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021988665.png) | 展示/收起组合的组件。 | | ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021909169.png) | 复制组件。 | | ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985389390.png) | 组件上移一层。 | | ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021988673.png) | 组件下移一层。 | | ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021909137.png) | 组件组合。 | | ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021988653.png) | 拆分组合。 | | ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985549078.png) | 锁定/解锁组件。 | | ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021988705.png) | 删除组件。 | | ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021909157.png) | 显示/隐藏组件。 | 9. 在右侧设置数据服务，数据服务设置请参考[表2]。 表2图表卡片数据服务参数说明 | 参数 | 说明 | |:---|:---| | 数据源类型 | 选择数据源类型。支持静态数据、Restful。 静态数据：在JSON编辑器中，编辑静态数据。 - ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985549054.png)：数据校验，校验JSON文件数据格式正确性。 - ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985389374.png)：复制，复制JSON文件。 | | 类型 | 当"数据源类型"值为"Restful"时，才有此参数。 - 默认 - 指标 | | 数据服务URL | 当"数据源类型"值为"Restful"且"类型"值为"默认"时，才有此参数。 数据服务的URL。 | | 请求类型 | 当"数据源类型"值为"Restful"且"类型"值为"默认"时，才有此参数。 在下拉框中选择请求类型，支持GET、POST。 | | 认证 | 当"数据源类型"值为"Restful"且"类型"值为"默认"时，才有此参数。 在下拉框中选择认证方式，支持No auth、BasicAuth、Token、AK/SK。 - No auth：Restful API不对SVE进行鉴权。 - BasicAuth：Restful API会对SVE进行BasicAuth认证，此时，还需要填写鉴权用户名和密码。 - Token：Token方式，会自动获取当前登录运营中心的用户对应的Token。 - AK/SK：Restful API会对SVE进行AK/SK方式认证。 | | 请求头 | 当"数据源类型"值为"Restful"且"类型"值为"默认"时，才有此参数。 | | 指标列表 | 当"数据源类型"值为"Restful"且"类型"值为"指标"时，才有此参数。 在下拉框中选择关联指标。指标在"指标模板库"或"指标管理"界面配置。 - ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985389386.png)：数据格式化，校验JSON文件数据格式正确性。 - ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021988685.png)：复制，复制JSON文件。 | | 请求参数 | 当"数据源类型"值为"Restful"时，才有此参数。 单击![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985389346.png)，填写Key和Value的值。 | | 请求间隔（秒） | 当"数据源类型"值为"Restful"时，才有此参数。 设置请求时间间隔。 | | 查看服务返回结果 | 单击"查看服务返回结果"，进入"数据响应结果"页面，进行数据影射，如[图1]所示，配置完成后自动保存。如果不配置，则在"组件属性 \> 基础属性 \> 绑定数据"下拉框中选择不到数据。 图1配置映射 ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985549090.png) | 10. 在右侧设置组件属性。不同组件显示的组件属性不同，具体以界面显示为准。这里以"图表组件 \> 折线图"为例，请参考[表3]。 - 编辑：编辑状态才可以设置组件属性。 - 查看：查看状态不能设置组件属性。 表3图表卡片组件属性参数说明 | 参数 || 说明 | |:---|---|:---| | 基础属性 || - 绑定数据：绑定数据源，在下拉框中设置。数据源在[9]的"查看数据返回结果"中进行设置。 - 组件样式：设置组件的宽高及XY轴的值。 | | 特有属性 | 常规配置 | 设置组件上下左右的边距。 | | 特有属性 | 轴线配置 | - 折线属性：设置折线类型、粗细，根据需求开启曲线、折叠、阶梯型开关。 - ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985549098.png)：表示关闭。 - ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985389378.png)：表示开启。 - 标记：设置标记点的类型、大小。 - 标线/最大值/最小值/区域：根据需求开启并设置。 | | 特有属性 | 数值标签 | 根据需求开启并设置。 | | 特有属性 | 坐标轴 | 设置是否显示X/Y/Z轴，以及X/Y/Z轴的文本样式、位置、轴线样式、刻度样式、分割线样式、指示器颜色及透明度。 | | 特有属性 | 系列 | 当"坐标轴"设置显示Z轴后，选择折线展示的基准轴线。 | | 样式属性 | 图例 | 根据需求开启图例，设置文本样式、尺寸、标记、间距、排列方式、位置、是否滚动。 | | 样式属性 | 提示框 | 根据需求开启提示框，设置文本样式、背景颜色、边距。 | | 样式属性 | 主题 | 选择主题信息，根据需求开启自定义颜色。 | 11. 在右侧设置卡片信息，请参考[表4]。 表4卡片信息参数说明 | 参数 | 说明 | |:---|:---| | 名称 | 必填项。 自定义卡片的名称。由1\~64个字符组成，包含中文、字母、数字及下划线。 | | 版本 | 卡片的版本信息，不可修改。 | | 样式分类 | 卡片的分类，不可修改。 | | 卡片分类 | 必选项。 在下拉框中选择卡片的分类名称。默认显示第一个分类名称。 | | 描述 | 必填项。 自定义卡片的描述信息。 | | 封面图 | 卡片的封面图。 - 自动截图：单击"截屏"，自动获取画布中的图片。 - 上传封面：单击"添加图片"，在弹出界面，单击![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985389350.png)，选择本地准备好的图片，裁剪出符合要求的尺寸后，单击![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985389366.png)。 | 12. 在界面右上方单击"保存"，系统自动弹出"保存"页面，确认卡片信息，单击"保存"。 13. （可选）在界面右上角单击"预览"，预览配置效果。 14. 预览无误后，在界面右上角单击"发布"。 返回"我的卡片"界面，发布后的卡片，默认显示在"我的卡片"所选择的卡片分类列表下。 #### 使用在线构建方式新建表单卡片 1. 进入"在线构建"页面，单击"表单卡片"，在"消息提示"对话框单击"确认"。 2. （可选）在左侧"选择模板"中，选择在线构建的表单模板，在"提示框"中单击"确认"。 仅使用模板新建卡片时，操作此步骤。 3. 在左侧"组件库"下，拖拽组件至中间画布或模板中。 表单卡片：为纯表格卡片。 组件库包含布局组件、装饰组件、输入组件、选择组件，单击对应组件名称，即可查看该组件内的全部组件。 4. 在右侧设置公共属性，请参考[表5]。 表5表单卡片公共属性参数说明 | 参数 | 说明 | |:---|:---| | 基础属性 | - 栅格间隔：组件的宽度。可以手动输入，也可以单击+/-调节。取值范围为0\~100，缺省值为15。 - 组件尺寸：组件尺寸大小。包含中等、较小和迷你，缺省值为较小。 - 标签对齐：组件标签的对齐方式。包含左对齐、右对齐、顶对齐，缺省值为右对齐。 - 禁用组件：开启后则无法编辑该组件。 - 标题：为表单设置标题。 - 显示标题：设置是否显示表单标题。 | | 数据属性 | 为了使卡片的数据能够正常提交存入数据库，必须配置数据属性。 - 编辑器展开：展开JSON编辑器，编辑数据。 - ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021909149.png)：数据校验，校验JSON文件数据格式正确性。 - ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021988689.png)：复制，复制JSON文件。 - ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021988681.png)：数据应用，使JSON文件生效。 - 编辑器收起：折叠JSON编辑器。 - 模型名称：卡片数据模型名称。单击![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985549058.png)后自动填充，不可编辑。 - 组件字段：单击![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985549102.png)后，在下拉框中选择导入JSON文件中的组件字段。 选择"组件字段"后，单击"一键生成卡片"。 生成卡片会清空已导入组件。 | | 业务规则 | 单击![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021909177.png)，新增业务规则，配置组件之间的交互规则。 | 5. 在右侧设置组件属性，不同组件显示的组件属性不同具体以界面显示为准。这里以无模板"装饰组件 \> 静态文字"为例，请参考[表6]。 - 编辑：编辑状态才可以设置组件属性。 - 查看：查看状态不能设置组件属性。 表6表单卡片组件属性参数说明 | 参数 | 说明 | |:---|:---| | 基础属性 | - 绑定数据：绑定数据源，在下拉框中设置。绑定的数据从[步骤9]的"数据属性"中获取。 - 文本内容：输入文字。 - 栅格占据的列数：组件所占列数。可以手动输入，也可以单击+/-调节。取值范围为1\~12，缺省值为12。 | | 特有属性 | - 跳转地址：填写需要跳转的链接。 - 打开方式：根据需求设置链接的打开方式。 - 千位分割：根据需求开启数字的分隔符。 - ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985549062.png)：表示关闭。 - ![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000002021909153.png)：表示开启。 | | 样式属性 | 这里是文本内容的样式属性。 - 文本：设置外形、对齐方式、字体及颜色、文本大小及单位。 文本大小设置后，在屏幕中文本大小会根据屏幕分辨率自适应。 - 外形：设置文字的背景颜色、边框颜色、边框类型及圆角单位、边框宽度、边框圆角、阴影颜色、阴影方向、阴影X偏移、阴影Y偏移、阴影模糊半径、阴影扩散半径、背景不透明度。 | 6. 在右侧设置卡片信息，请参考[表7]。 表7卡片信息参数说明 | 参数 | 说明 | |:---|:---| | 名称 | 必填项。 自定义卡片的名称。由1-64个字符组成，包含中文、字母、数字及下划线。 | | 版本 | 卡片的版本信息，不可修改。 | | 样式分类 | 卡片的分类，不可修改。 | | 卡片分类 | 必选项。 在下拉框中选择卡片的分类名称。默认显示第一个分类名称。 | | 描述 | 必填项。 自定义卡片的描述信息。 | | 封面图 | 卡片的封面图。 - 自动截图：单击"截屏"，自动获取画布中的图片。 - 上传封面：单击"添加图片"，在弹出界面，单击![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985549082.png)，选择本地准备好的图片，裁剪出符合要求的尺寸后，单击![](https://support.huaweicloud.com/usermanual-wiseoperation/zh-cn_image_0000001985389394.png)。 | 7. 在界面右上方单击"保存"，系统自动弹出"保存"页面，确认卡片信息，单击"保存"。 8. （可选）在界面右上角单击"预览"，预览配置效果。 9. 预览无误后，在界面右上角单击"发布"。 返回"我的卡片"界面，发布后的卡片，默认显示在"我的卡片"所选择的卡片分类列表下。