3.5.6.4 动作的配置

在3.5.3【Action的类型】一文中,我们介绍Action的几种类型,以及组合动作。

通用配置

配置项 可选值 默认值 作用
name 动作名称
label 显示名称
icon 图标
type primary defaultlink primary 按钮类型样式,支持主要样式、次要样式以及链接样式。
bizStyle defaultsuccesswarningdangerinfo default 按钮业务样式,支持成功(green)、警告(yellow)、危险(red)、信息(grey)四种样式。
invisible truefalse condition false 展示规则,有简单的true/false显隐,也支持复杂的表达式
disabled truefalse condition 根据动作上下文类型进行自动推断 是否禁用自动推断规则:当上下文类型为【单行】时,相当于使用表达式LIST_COUNT(context.activeRecords) != 1当上下文类型为【多行】时,相当于使用表达式LIST_COUNT(context.activeRecords) <= 1当上下文类型为【单行或多行】时,相当于使用表达式LIST_COUNT(context.activeRecords) == 0
disabledTitle string 根据动作上下文类型进行自动推断 禁用悬浮提示

表3-5-6-12 动作通用配置

二次确认配置

二次确认框默认支持两种模式,对话框和气泡框;

对话框

image.png

图3-5-6-51 对话框提示

气泡框

image.png

图3-5-6-52 气泡框警告

配置项

配置项 可选值 默认值 作用 备注
confirm string 二次确认提示文字 配置后开启二次确认
confirmType POPPER(气泡提示框) MODAL(对话框) POPPER 确认框类型
confirmPosition TM(按钮上方) BM(按钮下方) LM(按钮左侧) RM(按钮右侧) BM 确认框位置 气泡框该配置生效
enterText 确定 确定按钮文字
cancelText 取消 取消按钮文字

表3-5-6-13 配置项

弹出层动作配置(窗口动作ViewAction)

目前平台对于弹出层支持了两种展示形式。弹窗(modal/dialog)和抽屉(drawer)

支持两种配置方式【内嵌视图配置】和【引用已有页面】,内嵌视图配置优先于引用已有页面。

内嵌视图配置

该配置对于弹窗和抽屉均适用。

<action name="窗口动作名称" label="创建">
    <view model="模型编码" type="form">
        <template slot="form" widget="form">
            <field data="id" invisible="true" />
            <field data="code" label="编码" widget="Input" />
            <field data="name" label="名称" widget="Input" />
        </template>
        <template slot="footer">
            <action name="$$internal_DialogCancel" label="关闭" type="default" />
            <action name="create" label="确定" />
        </template>
    </view>
</action>

图3-5-6-53 内嵌视图配置

引用已有页面配置

该配置对于弹窗和抽屉均适用。

<view model="模型编码" type="form">
    <template slot="form" widget="form">
        <field data="id" invisible="true" />
        <field data="code" label="编码" widget="Input" />
        <field data="name" label="名称" widget="Input" />
    </template>
    <template slot="footer">
        <action name="$$internal_DialogCancel" label="关闭" type="default" />
        <action name="create" label="确定" />
    </template>
</view>

图3-5-6-54 引用已有页面示例

<action name="窗口动作名称" label="创建" resViewName="$viewName$" />

图3-5-6-55 引用已有页面

弹窗

当窗口动作的路由方式(target)为dialog时,内嵌视图/引用页面将以弹窗形式展示在页面上。

配置项

配置项 可选值 默认值 作用
title string 动作名称 标题名称
width string/number/enumsmall(560px)medium(890px)large(1200px) medium 宽度

表3-5-6-14 弹窗配置项

示例:配置标题名称为【自定义创建弹窗】,宽度为70%的弹窗

<!-- 内嵌视图配置 -->
<action name="窗口动作名称" label="创建">
    <template slot="default" title="自定义创建弹窗" width="70%">
        <view model="模型编码" type="form">
            <template slot="form" widget="form">
                <field data="id" invisible="true" />
                <field data="code" label="编码" widget="Input" />
                <field data="name" label="名称" widget="Input" />
            </template>
            <template slot="footer">
                <action actionType="client" name="$$internal_DialogCancel" label="关闭" type="default" />
                <action name="create" label="确定" />
            </template>
        </view>
    </template>
</action>

<!-- 引用已有页面配置 -->
<action name="窗口动作名称" label="创建" resViewName="引用页面名称">
    <template slot="default" title="自定义创建弹窗" width="70%" />
</action>

图3-5-6-56 内嵌视图配置

抽屉

当窗口动作的路由方式(target)为drawer时,内嵌视图/引用页面将以弹窗形式展示在页面上。

配置项

配置项 可选值 默认值 作用 备注
title string 动作名称 标题名称
placement top(上)right(右)bottom(下)left(左) right 抽屉打开位置
width string/number/enumsmall(20%)medium(40%)large(80%) small 宽度 打开位置为left和right时生效
height string/number/enumsmall(20%)medium(40%)large(80%) small 宽度 打开位置为top和bottom时生效

表3-5-6-15 抽屉配置项

示例:配置从下方打开,高度为large的抽屉

<!-- 内嵌视图配置 -->
<action name="窗口动作名称" label="创建">
    <template slot="default" placement="bottom" height="large">
        <view model="模型编码" type="form">
            <template slot="form" widget="form">
                <field data="id" invisible="true" />
                <field data="code" label="编码" widget="Input" />
                <field data="name" label="名称" widget="Input" />
            </template>
            <template slot="footer">
                <action actionType="client" name="$$internal_DialogCancel" label="关闭" type="default" />
                <action name="create" label="确定" />
            </template>
        </view>
    </template>
</action>

<!-- 引用已有页面配置 -->
<action name="窗口动作名称" label="创建" resViewName="引用页面名称">
    <template slot="default" placement="bottom" height="large" />
</action>

图3-5-6-57 配置从下方打开,高度为large的抽屉

组合动作配置

具体例子详见3.5.3【Aciton的类型】一文中介绍的“前端动作之组合动作”部分。

服务器动作串行

<action actionType="composition" label="组合动作">
    <action name="服务器动作1" />
    <action name="服务器动作2" />
</action>

图3-5-6-58 服务器动作串行

服务器动作与跳转动作组合执行

<action actionType="composition" label="组合动作">
    <action name="服务器动作1" />
    <action name="跳转动作1" />
</action>

图3-5-6-59 服务器动作与跳转动作组合执行

后端动作与前端动作组合

<action actionType="composition" label="组合动作">
    // 校验表单
    <action actionType="client" name="$$internal_ValidateForm" />
    <action name="服务器动作" />
    // 返回上一级页面
    <action actionType="client" name="$$internal_GotoListTableRouter" />
</action>

图3-5-6-60 后端动作与前端动作组合

展示规则

在介绍3.5.3【Action的类型】一文中的“ServerAction之前端展示规则(举例)”部分,用到invisible这个属性定义。这个在xml中也可以配置,而且前端的优先级高于后端

可以通过 invisible 属性配置一个表达式来使动作根据数据记录条件显示、隐藏。

如果 invisible 所引用的动作的 bindingType 是个列表型视图,则要用 context.activeRecords 获取当前选中记录,如果是个对象型视图或列表型视图的行内显示则需用 context.activeRecord:

<!-- 列表型视图 -->
<action name="a" invisible="context.activeRecords && context.activeRecords[0].a === true" />
<!-- 对象型视图或列表型视图的行内显示 -->
<action name="b" invisible="context.activeRecord && context.activeRecord.b === true" />

图3-5-6-61 列表型视图

举例

Table视图动作配置

示例1:不允许删除编码为“5”的数据

PS:当配置disabled时,自动推断规则将会失效,需要按需配置。下方的配置保留了【单行或多行】的自动推断规则。

<view model="模型编码" type="table">
    <template slot="actionBar" widget="actionBar">
        <action name="delete" label="删除" disabled="LIST_COUNT(context.activeRecords) == 0 || LIST_CONTAINS(LIST_FIELD_VALUES(context.activeRecords, '', 'code'), '5')" refreshData="true" />
    </template>
    <template slot="fields">
        <field data="id" invisible="true" />
        <field data="code" label="编码" widget="Input" />
        <field data="name" label="名称" widget="Input" />
    </template>
</view>

图3-5-6-62 Table视图动作配置

结果展示

未选中时

image.png

图3-5-6-63 未选中时

选中编码不是“5”的数据

image.png

图3-5-6-64 选中编码不是“5”的数据

选中编码包含“5”的数据

image.png

图3-5-6-65 选中编码包含“5”的数据

Form视图动作配置

示例:创建和编辑使用同一个视图配置

<view model="模型编码" type="form">
    <template slot="actionBar" widget="actionBar">
        <action actionType="client" name="$$internal_GotoListTableRouter" label="返回" type="default" />
        <action name="create" label="创建" invisible="!IS_NULL(activeRecord.id)" validateForm="true" goBack="true" />
        <action name="update" label="更新" invisible="IS_NULL(activeRecord.id)" validateForm="true" goBack="true" />
    </template>
    <template slot="fields">
        <pack widget="fieldset" title="基础信息">
            <field data="id" invisible="true" />
            <field data="code" label="编码" widget="Input" />
            <field data="name" label="名称" widget="Input" />
        </pack>
    </template>
</view>

<!-- 使用组合动作实现validateForm和goBack属性 -->
<view model="模型编码" type="form">
    <template slot="actionBar" widget="actionBar">
        <action actionType="client" name="$$internal_GotoListTableRouter" label="返回" type="default" />
        <action actionType="composition" label="创建" invisible="!IS_NULL(activeRecord.id)">
            <action actionType="client" name="$$internal_ValidateForm" />
            <action name="create" />
            <action actionType="client" name="$$internal_GotoListTableRouter" />
        </action>
        <action actionType="composition" label="更新" invisible="IS_NULL(activeRecord.id)">
            <action actionType="client" name="$$internal_ValidateForm" />
            <action name="update" />
            <action actionType="client" name="$$internal_GotoListTableRouter" />
        </action>
    </template>
    <template slot="fields">
        <pack widget="fieldset" title="基础信息">
            <field data="id" invisible="true" />
            <field data="code" label="编码" widget="Input" />
            <field data="name" label="名称" widget="Input" />
        </pack>
    </template>
</view>

图3-5-6-66 创建和编辑使用同一个视图配置

结果展示

使用【上下文无关】的跳转动作进入该视图时

image.png

图3-5-6-67 使用上下文无关的跳转动作进入该视图时

使用【单行】的跳转动作进入该视图时

image.png

图3-5-6-68 使用单行的跳转动作进入该视图时

实战

Step1 修改宠物商品代理表格视图的Template

启用和禁用服务器动作根据状态分别显示其中一个

<view name="tableView1" type="TABLE" cols="2" enableSequence="false" model ='demo.PetShopProxy' priority="1" >
    <template slot="actions" autoFill="true"/>
    <template slot="rowActions">
        <action name="dataStatusEnable" label="启用" invisible="activeRecord.dataStatus == 'ENABLED'" />
        <action name="dataStatusDisable" label="禁用" invisible="activeRecord.dataStatus == 'DISABLED'" />
    </template>
    <template slot="fields">
        <field priority="1" data="income" label="收入"/>
        <field priority="101" data="code" label="店铺编码"/>
        <field priority="102" data="relatedShopName" label="引用字段shopName"/>
        <field priority="102" data="codeTwo" label="店铺编码2"/>
        <field priority="103" data="createrId" label="引用创建者Id"/>
        <field priority="110" data="description" label="描述"/>
        <field priority="111" data="description1" label="描述"/>
        <field priority="112" data="descHtml" label="html描述"/>
        <field priority="113" data="anniversary" label="店庆"/>
        <field priority="114" data="publishYear" label="开店年份"/>
        <!-- 表格其他字段-->
    </template>
</view>

图3-5-6-69 修改宠物商品代理表格视图的Template

Step2 重启看效果

【已启用】状态时只显示【禁用】按钮

image.png

图3-5-6-70 已启用状态时只显示禁用按钮

【已禁用】状态时只显示【启用】按钮

image.png

图3-5-6-71 已禁用状态时只显示启用按钮

Oinone社区 作者:史, 昂原创文章,如若转载,请注明出处:https://doc.oinone.top/oio4/9263.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
史, 昂's avatar史, 昂数式管理员
Previous 2024年5月23日 am9:15
Next 2024年5月23日 am9:17

相关推荐

  • 数据编码

    1. 什么是数据编码 当模型中的字段数据需要有一定的编码规定,可以在模型中设计模型或字段的数据编码。 编码预览:实时展示规则设置后的编码。 2. 编码前/后缀 编码前缀:必须以字母开头,且仅支持数字或字母,最多8个字符。 编码后缀:必须以字母开头,且仅支持数字或字母,最多8个字符。 3. 格式化日期 开关默认关闭,即数据编码中不包含日期。开关打开后,默认的日期格式为“年年年年月月日日”,也可以切换成“年年月月日日、年年月月、年年年年、年年”。 序列归零周期:与格式化日期选择有关,若选择为“年年年年月月日日”,则可选“年、月、日”,选择为“年年年年”,则只可选“年”数据编码序列会按照设置的这个周期归零。 4. 编码序列 编码方式:可选择连续序列或非连续序列,选择会影响后续包含哪些设置。 序列长度:序列包含多少位数字,可以设置1 – 18之间的整数。 序列起始值:数据编码序列的起始值,默认值为3。 当编码方式设置为非连续序列时,展示其余两个配置项。 步长类型:默认值为“自定义步长”,也可以设置成“1 – 10之间随机步长”。 步长:当选择“自定义步长”时,设置的步长即为真实步长。当选择“1 – 10之间随机步长”时,实际步长为1 – 设置值之间的随机整数。

    2024年6月20日
    2.5K00
  • 3.5.3 Action的类型

    各类动作我们都碰到过,但都没有展开讲过。这篇文章我们来系统介绍下oinone涉及到的所有Action类型。 一、动作类型 服务器动作ServerAction 类似于Spring MVC的控制器Controller,通过模型编码和动作名称路由,定义存储模型或代理模型将为该模型自动生成动作名称为consturct,queryOne,queryPage,create,update,delete,deleteWithFieldBatch的服务器动作。定义传输模型将为该模型自动生成动作名称为consturct的服务器动作 窗口动作ViewAction 站内跳转,通过模型编码和动作名称路由。系统将为存储模型和代理模型自动生成动作名称为redirectDetailPage的跳转详情页窗口动作,动作名称为redirectListPage的跳转列表页窗口动作,动作名称为redirectCreatePage的跳转新增页窗口动作,动作名称为redirectUpdatePage的跳转更新页窗口动作。 跳转动作UrlAction 外链跳转 客户端动作ClientAction 调用客户端函数 二、默认动作 如果在UI层级,有开放新增语义函数,则会默认生成新增的窗口动作ViewAction,跳转到新增页面 如果在UI层级,有开放更新语义函数,则会默认生成修改的窗口动作ViewAction,跳转到更新页面 如果在UI层级,有开放删除语义函数,则会默认生成删除的客户端动作ClientAction,弹出删除确认对话框 三、第一个服务器动作ServerAction 回顾第一个ServerAction 第一个ServerAction是在3.3.2【模型的类型】一文中的“代理模型”部分出现的,再来看下当时的定义代码 package pro.shushi.pamirs.demo.core.action; ……引用类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { @Override protected PetShopProxy fetchData(PetShopProxy data) { return data.queryById(); } @Action(displayName = "启用") public PetShopProxy dataStatusEnable(PetShopProxy data){ data = super.dataStatusEnable(data); data.updateById(); return data; } ……其他代码 } 图3-5-3-1 回顾第一个ServerAction @Action注解将创建服务器动作,并@Model.model绑定 自定义ServerAction请勿使用get、set、unset开头命名方法或toString命名方法。 ServerAction之校验(举例) Step1 为动作配置校验表达式 使用@Validation注解为PetShopProxyAction的dataStatusEnable服务端动作进行校验表达式配置 package pro.shushi.pamirs.demo.core.action; ……引用类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { @Override protected PetShopProxy fetchData(PetShopProxy data) { return data.queryById(); } @Validation(ruleWithTips = { @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"), @Validation.Rule(value = "LEN(data.shopName) < 128", error = "名称过长,不能超过128位"), }) @Action(displayName = "启用") public PetShopProxy dataStatusEnable(PetShopProxy data){ data = super.dataStatusEnable(data); data.updateById(); return data; } ……其他代码 } 图3-5-3-2 为动作配置校验表达式 注: ruleWithTips可以声明多个校验规则及错误提示; IS_BLANK和LEN为内置文本函数,更多内置函数详见4.1.12【函数之内置函数与表达式】一文; 当内置函数不满足时参考4.1.13【Action之校验】一文。 Step2 重启看效果 在商店管理页面点击【启用】得到了预期返回错误信息,显示"编码为必填项" 图3-5-3-3 在商店管理页面点击启用得到了预期返回错误信息 ServerAction之前端展示规则(举例) 既然后端对ServerAction发起提交做了校验,那能不能在前端就不展示呢?当然可以,我们现在就来试下。 Step1 配置PetShopProxyAction的dataStatusEnable的前端出现规则 用注解@Action.Advanced(invisible="!(activeRecord.code !== undefined && !IS_BLANK(activeRecord.code))")来表示,注意这里配对invisible是给前端识别的,所以写法上跟后端的校验有些不一样,但如内置函数IS_BLANK这些是前后端一致实现的,activeRecord在前端用于表示当前记录。 package pro.shushi.pamirs.demo.core.action; ……引用类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { @Override protected PetShopProxy fetchData(PetShopProxy data) { return data.queryById(); } @Validation(ruleWithTips = { @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"), @Validation.Rule(value = "LEN(data.name) < 128", error = "名称过长,不能超过128位"), }) @Action(displayName = "启用") @Action.Advanced(invisible="!(activeRecord.code !== undefined…

    2024年5月23日
    1.8K00
  • 1.2 Oinone的致敬

    占在巨人的肩膀上,天地孤影任我行 1.2.1 数字化时代Oinone接棒Odoo 在数字化时代,中国在互联网化的应用、技术的领先毋庸置疑,但在软件的工程化、产品化输出方面仍有许多改进的空间。这时,我了解到了Odoo——一个国外非常优秀的开源ERP厂商,全球ERP用户数量排名第一,百级别员工服务全球客户。Odoo的工程化能力和商业模式深深吸引了我,它是软件行业典型的产品制胜和长期主义者的胜利之一。 在2019年,也就是数式刚成立的时候,我们跟很多投资人聊起公司的对标是谁,我不是要成为数字化时代的SAP,而是要成为Odoo。然而,当时大部分国内投资人并不了解Odoo,尽管它已经是全球最大的ERP厂商之一,因为当时Odoo还没有明确的估值。直到2021年7月份获得Summit Partners的2.15亿美元投资后,Odoo才正式成为IT独角兽企业。 Odoo对我们提供了极大的启示,因此我们致敬Odoo,同样选择开源,每年对产品进行升级发布。如今,Odoo15已经发布,而Oinone也已推出第三版,恰好相隔12年,这是一个时代的接棒,从信息化升迁至数字化。 1.2.2Oinone与Odoo的不同之处 技术方面的不同 在技术上,Oinone和Odoo有相同之处,也有不同之处。它们都基于元数据驱动的软件系统,但是它们在如何让元数据运作的机制上存在巨大差异。Odoo是企业管理场景的单体应用,而Oinone则致力于企业商业场景的云原生应用。因此,它们在技术栈的选择、前后端协议设计、架构设计等方面存在差异。 场景方面的不同 在场景上,Oinone和Odoo呈现许多差异。相对于SAP这些老牌ERP厂商,Odoo算是西方在企业级软件领域的后起之秀,其软件构建方式、开源模式和管理理念在国外取得了非凡的成就。然而,在国内,Odoo并没有那么成功或者并没有那么知名。国内做Odoo的伙伴普遍认为,Odoo与中国用户的交互风格不符,收费模式设计以及外汇管制使商业活动受到限制,本地化服务不到位,国内生态没有形成合力,伙伴们交流合作都非常少。另外,Odoo在场景方面主要围绕内部流程管理,与国内老牌ERP如用友、金蝶重叠,市场竞争激烈。相比之下,Oinone看准了企业视角由内部管理转向业务在线、生态在线(协同)带来的新变化,聚焦新场景,利用云、端等新技术的发展,从企业内外部协同入手,以业务在线驱动企业管理流程升级。它先立足于国内,做好国内生态服务,再着眼未来的国际化。 无代码设计器的定位 在无代码设计器的定位上,Odoo的无代码设计器是一个非常轻量的辅助工具,因为ERP场景下,一个企业实施完以后基本几年不会变,流程稳定度非常高。相反,Oinone为适应"企业业务在线化后,所有的业务变化与创新都需要通过系统来触达上下游,从而敏捷响应快速创新"的时代背景,重点打造出五大设计器。(如下图1-2所示)。 图1-2 Oinone五大设计器 在数字化时代中国软件将接棒世界,而Oinone也要接棒Odoo,把数字化业务与技术的最佳实践赋能给企业,帮助企业数字化转型不走弯路!

    2024年5月23日
    2.5K00
  • 3.5.6.2 视图的配置

    ,视图的大致配置在3.5.2.2【构建View的Template】一文中已经介绍过,这里主要介绍视图层的基本属性配置,这些配置会透传给视图内的组件Widget,组件会根据配置内容做出不同的呈现样式 视图的配置 Table的配置 配置项 可选值 默认值 作用 activeCount number 5 表格上方动作区默认展示操作的数量,超过个数的操作将被折叠收起 inlineActiveCount number 3 表格最右侧操作列默认展示操作的数量,超过个数的操作将被折叠收起 defaultPageSize number 30 表格默认分页条数 表3-5-6-9 Table的配置 Form/Detail的配置 配置项 可选值 默认值 作用 direction horizontal/vertical(大小写不明感) vertical 表单标题排列方式 表3-5-6-10 Form/Detail的配置 Table的配置项举例 Step1 修改宠物达人的表格视图 我们在宠物达人的自定义表格视图的Template文件中增加三个属性配置activeCount="1" 、inlineActiveCount="1"、 defaultPageSize="1" <view name=tableView model=demo.PetTalent cols=1 activeCount=1 inlineActiveCount=1 defaultPageSize=1 type=TABLE enableSequence=true > </view> 图3-5-6-15 在宠物达人的自定义表格视图的Template文件中增加三个属性配置 Step2 重启看效果 图3-5-6-16 示例效果 Form的配置举例 Step1 修改宠物达人的表单视图 我们在宠物达人的自定义表格视图的Template文件中增加一个属性配置direction = horizontal 。 另:宠物达人在之前的教程中增加了一些字段,大家利用默认视图把新增字段也展示出来。还是通过数据库查看默认页面定义,找到base_view表,过滤条件设置为model =\’demo.PetTalent\’ and name =\’formView\’,查看template字段,把里面涉及新增字段复制到pet_talent_form.xml文件中。 <view name=formView1 model=demo.PetTalent cols=2 type=FORM priority=1 direction = horizontal> </view> 图3-5-6-17 增加一个属性配置direction = "horizontal" Step2 重启看效果 图3-5-6-18 示例效果

    2024年5月23日
    1.9K00
  • 数据大屏

    1. 业务场景 数据大屏是利用相应的系统来分析数据,通过图形的形式为企业提供客观、直接的数据分析结果,让业务人员和企业决策者直观面对数据背后的信息,实时监测企业数据,给予更直观的决策场景体验,助力企业数字化运营升级。 2. 操作流程 1)进入数据可视化,进入数据大屏tab,维护分组信息; 2)在二级分组名称后点击“+”【添加数据大屏】,对数据大屏进行设计; 3)创建完成后可以【编辑】数据大屏; 4)数据大屏完善后,可以点击【发布】数据大屏,则数据大屏此时可以被显示器引用播放; 5)如果数据大屏有更新,则可以点击【更新发布】; 6)如果数据大屏数据不再可以公开使用,则需要通过【隐藏】功能将数据大屏的引用权限收起,但不影响已被使用的数据大屏; 7)隐藏后可以【取消隐藏】,数据大屏恢复隐藏前的状态和功能,可以被引用 。 3. 操作流程图解 3.1 创建分组 1)操作流程:创建分组 2)操作路径:数据可视化-数据大屏-创建分组 3)点击搜索框后的「+」创建一级分组,输入一级分组名称后,点击一级分组后的「+」创建二级分组,输入二级分组名称后,此时分组创建完成,可以在二级分组下创建数据大屏 3.2 编辑分组名称 1)操作流程:选择分组-编辑分组名称 2)操作路径:数据可视化-数据大屏-编辑分组名称 3)鼠标移动至需要修改的分组上,点击出现的「编辑图标」,可以修改分组名称,修改后分组名称实时更新 3.3 删除分组 1)操作流程:选择分组-删除分组 2)操作路径:数据可视化-数据大屏-删除分组 3)鼠标移动至需要删除的分组上,当分组下无报表时出现「删除图标」,可以点击图标后删除分组,删除一级分组时对应所有的二级分组也会被删除,删除后消失,只有分组下没有数据大屏的分组才能直接删除成功 3.4 创建数据大屏 1)操作流程:选择二级分组-创建数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-创建数据大屏 3)鼠标移动至需要创建数据大屏的二级分组上,出现「+」,点击图标后=需要填写数据大屏标题 a数据大屏标题:最大支持20个字,支持汉字、数字、大小写字母、-;同个一级分组下不允许重复; 4)输入标题后进入设计页面 3.5 编辑数据大屏 1)操作流程:选择数据大屏-编辑数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-编辑数据大屏 3)只能编辑未发布或者已发布但没有被隐藏的数据大屏,且存在三种编辑情况 a. 第一种:点击数据大屏标题后的编辑图标,仅能编辑数据大屏标题; b. 第二种:点击数据大屏中的数据大屏标题、备注后的编辑图标,可以直接编辑数据大屏标题; c. 第三种:点击【编辑】按钮,进入数据大屏设计页面,带出已有的组件内容,编辑时的规则与创建时一致,编辑后可以点击保存进行更新,如果未保存直接返回,则编辑无效; 4)编辑后实时生效,数据大屏信息保持展示最新效果 3.6 删除数据大屏 1)操作流程:选择数据大屏-删除数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-删除数据大屏 3)未发布或者已发布但没有被隐藏的数据大屏,并且没被引用,才展示数据大屏菜单名称后的删除图标 4)删除后数据大屏消失 3.7 复制 1)操作流程:选择数据大屏-复制数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-复制数据大屏 3)点击【复制】按钮,复制成功,名称为copy of 原数据大屏标题,展示在原数据大屏分组的最后一个 3.8 发布 1)操作流程:选择数据大屏-发布数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-发布 3)选择单个未发布且没有被隐藏的数据大屏,点击【发布】按钮,数据大屏状态变为已发布,展示最近发布时间; 4)如果数据大屏发布后有更新内容,会展示的更新类型:更新数据大屏信息/更新数据大屏内容 3.9 查看最近一次发布的版本 1)操作流程:选择数据大屏-查看最近一次发布的版本 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-更新发布数据大屏 3)当数据大屏发布后有更新,在最近发布时间左侧展示【查看】,在最近发布时间下展示更新的类型,点击查看可以查看最近发布的版本 3.10 更新发布 1)操作流程:选择数据大屏-更新发布数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-更新发布数据大屏 3)选择单个已发布且没有被隐藏的数据大屏,并且该数据大屏在上次发布后有所更新,可以点击【更新发布】按钮,将最新的数据大屏内容发布至业务系统,业务系统引用的数据大屏为最新内容; 4)如果更新了内容,但未点击更新发布,则展示的仍是上次发布的数据大屏 3.11 隐藏 1)操作流程:选择数据大屏-隐藏数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-隐藏数据大屏 3)数据大屏默认不隐藏,点击数据大屏左侧的是否隐藏可以切换 a. 未发布的数据大屏,较隐藏前,不可以操作【发布】,可以【取消隐藏】; b. 已发布的数据大屏,较隐藏前,只能操作【导出图片、导出excel、取消隐藏】; 4)隐藏后的数据大屏不可以被用于展示在其他大屏上,但不影响已经被引用的数据 3.12 取消隐藏 1)操作流程:选择数据大屏-取消隐藏数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-取消隐藏数据大屏 3)隐藏后的数据大屏可以取消隐藏,切换是否隐藏=否,取消隐藏后,数据大屏恢复隐藏前的状态和功能,可以被引用 3.13 查看引用 1)流程:选择图表-查看被哪些报表/数据大屏/页面引用 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-更多-查看引用 3)选择具体的数据大屏,查看当前数据大屏被引用的所有信息 3.14 不允许别人编辑 1)流程:选择数据大屏-不允许别人编辑 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-更多-不允许别人编辑 3)选择自己创建的数据大屏,对数据大屏是否允许其他人编辑进行设置;如果设置为不允许,则其他人无法编辑数据大屏 3.15 不允许别人引用 1)流程:选择图表-更多-不允许别人引用 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-更多-不允许别人引用 3)选择自己创建的数据大屏,对数据大屏是否允许他人引用进行设置;如果设置为不允许,则其他人无法选择到 3.16 导出图片 1)操作流程:选择数据大屏-导出图片 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-导出图片 3)选择数据大屏后,点击【导出图片】按钮可以将当前数据大屏导出为图片 3.17 导出EXCEL 1)操作流程:选择数据大屏-导出EXCEL 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-数据大屏导出EXCEL 3)选择数据大屏后,点击【导出EXCEL】按钮可以将当前数据大屏包含的图表导出为EXCEL 4. 数据大屏设计页面 4.1 缩放自适应 1)流程:创建数据大屏-进入数据大屏设计页面 2)操作路径:数据可视化-数据大屏-创建/编辑-设计页面 3)进入页面后,默认按照当前屏幕展示最适合的数据大屏尺寸,可以通过+、-进行自定义缩放,每次缩放10% 4.2 全屏 1)流程:创建数据大屏-进入数据大屏设计页面 2)操作路径:数据可视化-数据大屏-创建/编辑-设计页面 3)进入页面后,设置完成,可以【全屏】查看效果,按esc退出全屏 4.3 保存 1) 流程:创建数据大屏-进入数据大屏设计页面 2) 操作路径:数据可视化-数据大屏-创建/编辑-设计页面 3) 进入页面后,设置完成后进行保存,数据大屏保持最新内容 4.4 添加、编辑、删除组件 1)流程:创建数据大屏-进入数据大屏设计页面 2)操作路径:数据可视化-数据大屏-创建/编辑-设计页面 3)可以添加图表、文本、通用标题、倒计时、时间器、图片、轮播图、视频、边框等组件;图表组件中,一个图表只能添加一次,其他组件不限制数量; 4)所有组件添加后均可进行设置样式,有编辑权限的图表组件可以通过【编辑】图标直接进入图表设计页面; 5)添加后均可删除,删除后组件不再展示在数据大屏画布中,可以重新添加 4.5 数据大屏设置 1)操作流程:创建数据大屏-进入数据大屏设计页面 2)操作路径:数据可视化-数据大屏-创建/编辑-设计页面 3)设置数据大屏时可以设置屏幕的宽高、背景颜色、背景图片、主题 a. 宽高:根据数据大屏需要投放的屏幕大小进行设置; b. 背景颜色:当数据大屏无图片背景时可以调整背景颜色; c. 背景图片:支持为数据大屏上传一张图片作为背景; d. 主题模版:可任选其一,需要先选定模版后再进行设计,不然设计完后再修改模版,会清空已选组件。 4.6 图表组件设置 1)操作流程:创建数据大屏-进入数据大屏设计页面 2)操作路径:数据可视化-数据大屏-创建/编辑-设计页面 3)拖入图表组件,可与边框合为一体,可以设置图表的显示内容、边框信息、动画效果、刷新频率 a. 图表显示内容:展示标题、副标题、描述、标签、图例,一屏展示条数,原图表有的内容在设置展示后展示在数据大屏,原图表没有的内容设置展示后不生效; b. 边框信息:包括边框样式、背景颜色、边框线条颜色、展示边框标题、边框标题内容、边框标题颜色、边框标题字体大小; c. 动画效果:可以设置自动轮播,为是时可以设置结束后停顿时长、速度、切换形式; d. 刷新频率:设置图表获取数据的频率,自动刷新、刷新频率。 4.7 文本组件设置 1)操作流程:创建数据大屏-进入数据大屏设计页面 2)操作路径:数据可视化-数据大屏-创建/编辑-设计页面 3)拖入文本组件后,可以输入多行文本,可以设置内容、对齐方式、字体大小、字体加粗、字体颜色、背景颜色、边框样式、文字滚动、结束后停顿、速度 4)当文字滚动开启时,文字会按照一行展示,通过设置结束后停顿和速度来控制文字滚动的效果 4.8 通用标题组件设置…

    2024年6月20日
    1.7K00

Leave a Reply

Please Login to Comment