宜搭创建大屏实操

本文主要介绍如何使用企业经营管理系统中客户库表及签约表表单数据,来创建并配置企业经营管理大屏。宜搭创建大屏实操视频,请参见:宜搭创建大屏实操视频

创建企业经营管理系统

操作步骤如下:

  1. 登录宜搭系统,通过空白应用创建名称为企业经营管理系统的应用。

  2. 新建两个企业经营中需要的基础表单,分别为客户库签约表。其中客户库表单包括姓名所属行业联系方式客户来源所在地址以及经纬度等信息。客户库信息

    签约表表单包括签约日期合同编码客户名称合同名称我方签约人客户签约人合同金额单位已收回款未收回款客户所在地址以及签约明细等信息。

    签约表信息

  3. 在创建好的客户库签约表中分别录入一些数据,以便后续大屏展示。

  4. 单击企业经营管理系统页面左上角的搜索框后的新建图标,在弹出的下拉列表内,单击选择新建大屏(Beta)新建大屏

  5. 进入请选择大屏模板页面,在模板列表中选择集团数据大屏模板,并单击下方的就选它选择模板

  6. 模板大屏创建成功后,在大屏编辑界面上方,单击重命名处,将大屏的名称修改为企业经营数据大屏更改大屏名称

  7. 在大屏编辑界面,从左往右依次为图层区,组件区,画布编辑区,页面配置区,单击选中画布中的某个组件,右侧面板显示为组件配置区。大屏编辑页面

  8. 您可以根据需求删除不需要的组件,如删除表示员工数量通用标题数字翻牌器组件。同时在画布编辑器中选择表示2017年累计销售额数字翻牌器组件,在右侧配置面板中修改标题名2022年累计签约额。按照同样的方法,可以修改其它数字翻牌器的名称。修改数字翻牌器标题

    说明

    对于Windows电脑可以通过ctrl+鼠标单击+delete的方式多选删除组件,Mac电脑可以通过command+鼠标单击+delete方式多选删除组件。

  9. 单击画布编辑器中表示公司数量通用标题组件,在数据面板中单击配置数据源配置数据源设置数据源模块,修改静态数据value值为客户数量通用标题重命名

    说明
    • 选择组件时,您可以在画布编辑器中单击选择,也可以在左侧图层栏面板中单击选择。

    • 在画布编辑器中选择覆盖面比较大的图层,如基础平面地图组件,右键单击锁定,则被它所覆盖的柱状图组件将会展示出来,如果需要解锁,可以在左侧图层栏面板中选中基础平面地图组件,并右键单击解锁

  10. 按照同样的方法修改其它组件的配置,来完成企业经营数据大屏的配置。下图为企业经营数据大屏效果展示,其中左侧为集团签约概况和员工签约排名;中间为客户分布地图;下方为2022年各地区签约总额;右侧为产品类型分布、客户引入渠道以及签约详细信息。企业经营数据大屏效果展示

客户库表数据配置大屏组件

本节使用客户库表数据配置的大屏组件包括:数字翻牌器轮播饼图基础平面地图组件。

配置数字翻牌器组件

配置数字翻牌器组件的操作步骤如下:

  1. 打开创建完成的企业经营数据大屏,单击右上角编辑大屏,进入大屏编辑页面。

  2. 选择表示2022年累计客户数数字翻牌器组件,在组件右侧面板中,单击选择数据面板,并单击配置数据源

  3. 设置数据源模块,单击数据源类型下拉框,选择宜搭数据源,并单击进入配置设置数据源

  4. 图表数据配置对话框:

    • 数据集配置:数据集选择客户库

    • 数值配置:通过拖拽方式将数据集内左侧的姓名字段配置到中间图表字段映射中的数值处,单击姓名字段后的设置按钮图标,选择计数函数,用于统计客户库中有多少人。设置计数

    • 筛选条件配置:使用同样的方法,将创建时间字段配置到筛选条件处,并设置为在202211日到202311日之间。

    同时,您可以在右侧图表预览区域中查看您图表配置数据后的样式,并单击面板右下角的确定图表配置

  5. 返回配置面板,选择翻牌器 > 后缀,输入所需数据单位。配置单位

配置轮播饼图组件

配置轮播饼图组件的操作步骤如下:

  1. 在画布编辑器中选择表示客户引入渠道饼图组件,在组件的右侧面板中,选择数据面板,单击配置数据源,选择宜搭数据源,并单击进入配置

  2. 图表数据配置对话框中,将数据集选择客户库,通过拖拽的方式,将类别名配置为客户来源中文字段,值说明配置为姓名字段,并设置计数,图表样式预览无误后,单击右下角的确定饼状图图表数据配置

配置基础平面地图组件

配置基础平面地图组件的操作步骤如下:

  1. 在画布编辑器中,选择表示客户分布的基础平面地图组件,在组件的右侧配置面板中,单击+子组件管理,打开子组件管理面板,在面板中选择散点层,并单击子组件面板最下方的+添加子组件添加子组件

  2. 在子组件管理处,单击选择散点层子组件,切换进入散点层子组件的数据面板,单击配置数据源,选择宜搭数据源,单击进入配置

  3. 图表数据配置对话框中,将数据集选择客户库。通过拖拽的方式,将纬度配置为lat字段,经度配置为lng字段,图表预览无误后,单击右下角的确定地图图表配置

    说明

    如果配置散点层完成后,页面上无法查看到散点的信息,您可以在散点层配置面板,系列配置中查看到类型过滤值配置项为ok。类型过滤器

    在散点层数据面板中的设置数据源模块,勾选数据过滤器,添加一个数据过滤器,并按如下图方法配置数据过滤器的代码。添加数据过滤器代码示例如下:

    data.forEach(item=>{
      item.type = "ok"
    }

    过滤器内容配置完成后,散点层数据中将筛选出符合过滤要求的散点信息内容,并显示在地图中。

签约表数据配置大屏组件

本节使用签约表数据配置的大屏组件包括:轮播列表柱状图基本柱图轮播列表组件。

配置轮播列表柱状图组件

配置轮播列表柱状图组件的操作步骤如下:

  1. 打开创建完成的企业经营数据大屏,单击右上角编辑大屏,进入大屏编辑页面。

  2. 选择表示签约排名轮播列表柱状图组件,在组件右侧面板中,选择数据面板,单击配置数据源,选择宜搭数据源,并单击进入配置

  3. 图表数据配置对话框中,将数据集选择签约表,并通过拖拽的方式,将配置为合同金额字段,内容配置为我方签约人字段,图表预览无误后,单击确定轮播列表柱状图图表配置

    说明

    轮播列表柱状图默认降序排列。

配置基本柱图组件

配置基本柱图组件的操作步骤如下:

  1. 在画布编辑器中,选择表示产品类型分布基本柱图组件,在组件右侧面板中,选择数据面板,单击配置数据源,选择宜搭数据源,单击进入配置

  2. 图表数据配置对话框中,将数据集选择签约表.签约明细,通过拖拽的方式,将类目配置为产品分类字段,配置为数量字段,排序设置为按数量字段排序,图表预览无误后,单击确定基本柱图图表配置

添加并配置轮播列表组件

添加并配置轮播列表组件的操作步骤如下:

  1. 在画布编辑器中,从全部资产栏,单击添加表示签约详情信息轮播列表组件。

  2. 在组件右侧配置面板,设置表格行数表头行配置以及序列号背景颜色签约详情信息

    • 表格行数:单击全局配置项,打开下拉列表,设置表格行数5。

    • 表头背景颜色:单击表头配置项,打开下拉列表,参见下图设置,配置表头的背景颜色。

    • 奇偶行背景颜色:单击行配置,打开下拉列表,参见下图设置,配置奇偶行的背景颜色。

    • 序号列背景颜色:单击序列号配置项,打开下拉列表,参见下图设置,配置序列号的背景颜色。轮播列表基本配置

  3. 单击自定义列配置项,打开下拉列表,在图表数据配置对话框中,配置列字段内容。自定义列

  4. 图表数据配置对话框中,将数据集选择签约表,将需要展示的我方签约人客户签约人合同金额签约日期字段拖拽至列字段中,默认按签约日期设置成降序排列,单击右下角的确定轮播列表图表配置

  5. 返回配置页面,打开数据面板,您需要新增几个自定义列标签,并将数据响应结果中返回的多个字段内容复制粘贴到自定义列中对应标签的字段中。自定义列配置

  6. 至此企业经营数据大屏的看板全部配置完成,效果展示如下图。企业经营数据大屏效果展示