监控大屏轻松建,简易教程在这里!

文 | 商业智能BI相关文章 阅读次数:1,669 次浏览
2023-06-12 21:50:55

不少公司和学校将信息化手段应用到了监控大屏中,数字大屏可以用做数据监控的前端平台,也能通过数据监控警醒大家不可放松警惕,在数据监控与分析中可以起到重要作用。

但是,制作一张大屏可要花费不少精力,如何在一天内快速做好一张数据实时监控大屏?需要做什么准备,用到什么材料、功能和技巧?

本文主要介绍在大屏模板中使用自定义模型组件导入3D模型,并构建园区等场景的主要步骤。不介绍图表、表格、指标卡等2D组件的实现。

监控大屏,数据监控,3D园区监控场景

实现效果

效果1:点击模型或按钮,拉进三维视角

监控大屏,数据监控,3D园区监控场景

效果2:点击模型弹框监控视频

监控大屏,数据监控,3D园区监控场景

3D园区监控场景示例

新建组件

新建一个FineVis大屏模板:

监控大屏,数据监控,3D园区监控场景

新增一个「自定义模型」组件,点击「编辑组件」,进入自定义模型编辑页面。如下图所示:

监控大屏,数据监控,3D园区监控场景

创建3D园区监控场景

自定义模型组件首次进入编辑界面时,需要创建场景。默认选择的是「科技网络风格」,本例直接点击「生成场景」即可。

监控大屏,数据监控,3D园区监控场景

创建好场景后,进入组件编辑界面,选择「场景」,将地面背景设置为「蜂巢」。如下图所示:

监控大屏,数据监控,3D园区监控场景

设置模型

导入模型

FineVis大屏编辑模式中,自定义模型组件仅支持glb格式的模型,用户需要将其他格式的模型转化为glb格式。

本文提供两个示例模型:仓库.glb、车间.glb 。

1)点击右侧配置栏的「模型>添加模型对象>自定义模型」,点击「上传新模型」,选择本地准备好的 .glb 文件类型的自定义模型,即可上传到模板中。

监控大屏,数据监控,3D园区监控场景

2)分别点击需要上传的两个模型,即可进行多选,点击「完成按钮」,即可将模型添加到组件界面,同一模型可多次重复添加。如下图所示:

监控大屏,数据监控,3D园区监控场景

调整模型

刚导入的模型可能看不到,有可能是模型过大、过小,或者所在位置超出视野范围。

1)尝试将模型大小缩小至 0.1 倍(或其他等级),再在这个量级上做进一步调整。

监控大屏,数据监控,3D园区监控场景

2)选中模型时,会出现位移工具,拖动位移工具即可调整模型位置。如下图所示:

也可手动调整位置处的 (x,y,z) 坐标系数值。

监控大屏,数据监控,3D园区监控场景

3)调整模型的旋转视角

支持用户调整模型的旋转角度,一般只需要调整沿Y轴的旋转角度,即水平面上的旋转角度。如下图所示:

监控大屏,数据监控,3D园区监控场景

4)调整整体场景的视角和大小

一般先在组件编辑界面调整视角和视野大小,再「返回大屏编辑器」界面,调整到适合大屏整体的效果。

先在3D组件编辑界面调整(请看下图中的操作说明):

监控大屏,数据监控,3D园区监控场景

再返回模板编辑界面,选中组件,点击右上角「视角调整」,组件边框变为虚线,即可调整模型视角。调整好后单击模板界面其他任意位置可退出视角调整。如下图所示:

监控大屏,数据监控,3D园区监控场景

配置数据

在 FineVis 中,通过模型的名称关联 FR 数据集,配置数据标签。本例模板已添加 2 个数据集作为示例。

1)进入组件编辑界面,在右侧配置面板点击「数据>添加数据图层」。

监控大屏,数据监控,3D园区监控场景

2)将图层名称改为对应的模型名称,根据模型名称匹配对应数据集的「模型名称」和「模型内容」字段,在标签设置处设置显示内容、字符大小、色相即显示形式。如下图所示:

监控大屏,数据监控,3D园区监控场景

设计弹窗和分页跳转

在 FineVis 中,以模型的数据图层作参数,将图层中的模型名称传递给交互对象,从而配置模型的联动、弹框等特效。

设计监控视频弹窗

1)返回大屏编辑器界面,选中自定义模型组件,在「交互」tab 中添加点击事件。选择事件对象为刚刚添加的「仓库」图层,再选中弹出框事件。

监控大屏,数据监控,3D园区监控场景

2)设置弹框的内容链接为弹框内容页面的预览链接。这意味着用户需要为弹框内容再制作一张 fvs 或 frm 等模板,引用模板内容。

本例弹框中使用的模板为「保安房监控1.fvs」 ,将此模板放在本地设计器预览后,复制预览链接即可使用。

监控大屏,数据监控,3D园区监控场景

设置多分页+平滑过渡实现模型视角切换

用户需要实现“点击某个模型或按钮,拉进视角或钻取到场景的某个位置”时,我们需要为每个视角制作一个分页,利用多分页和平滑过渡效果实现模型视角的切换、空间位置的移动或钻取。

1)点击新建页面,新增两个页面并修改页面名称。该模板最终包含三个分页:首页、仓库、生产车间。

监控大屏,数据监控,3D园区监控场景

2)在首页中,选中自定义模型组件,为每个模型分别设置点击分页跳转事件。

例如点击仓库,跳转到仓库页面:

监控大屏,数据监控,3D园区监控场景监控大屏,数据监控,3D园区监控场景

同理设置点击生产车间模型,跳转到生产车间页面。

3)还可以制作自定义按钮,触发跳转分页的事件。

例如使用标题组件,设置边框背景,文字内容,还可以通过调整组件的内边距,调整文字与背景的布局效果。如下图所示:

监控大屏,数据监控,3D园区监控场景

同样为标题组件设置「交互>点击事件」,如下图所示:

监控大屏,数据监控,3D园区监控场景

4)设置好所有点击事件后,选中首页所有组件,复制粘贴到另外两张分页中,事件也同样被复制。

调整「仓库」和「生产车间」的自定义模型组件视角,使其仅显示对应的单个模型。并新增其他组件,如下图所示:

监控大屏,数据监控,3D园区监控场景

5)开启页面间的平滑过渡

FineVis 多分页平滑过渡可以使同一组件在不同分页中切换时,不需要重新加载,这可以满足自定义模型组件切换视角的需求。

实现平滑过渡需要满足两个条件:

每个分页均需开启「平滑过渡」按钮

平滑过渡的组件同类型且同名称(复制粘贴到不同分页的组件自动同名)

监控大屏,数据监控,3D园区监控场景

3D园区监控场景效果预览监控大屏,数据监控,3D园区监控场景

在当前的数字信息化时代,借助FineVis这样的数据可视化产品,可以让企业高效监控业务指标,助力经营分析决策。目前,市场主流的数据可视化软件FineVis,整合了数据源、超强模板编辑器、丰富的模板素材资源,最重要的是,它支持低门槛搭建3D场景,快速简单上手,提升了数据可视化应用效率。FineVis提供强大的数据可视化设计、开发和多终端展示能力,将工厂、园区、产线、产品等业务相关物体映射到数据世界中,助力企业全方位释放数据可视化的价值。监控大屏,数据监控,3D园区监控场景

FineVis可视化大屏产品更多介绍: https://www.fanruan.com/finemax

产品体验

相关内容

目录
立即体验 立即体验

商务咨询

在线咨询
专业顾问帮您解答问题

电话咨询

技术问题

投诉入口

微信咨询

返回顶部