JVS-BI数字大屏设计器:一站式解决方案

news2024/9/23 1:28:08

数字大屏介绍

数字大屏是当下数据展示、业务监控、指挥调度常见的业务表达形态,常有可视化的图表、效果装饰、事件操作等技术组成酷炫的效果展示。

配置入口

进入JVS-BI(bi.bctools.cn),进入大屏页面,如下图所示

①:大屏配置、展示页面

②:点击“+”号,系统弹出新建菜单

③:点击新建目录时,可以创建左侧的菜单目录

④:点击新建大屏,系统需要选择在哪个目录下新建大屏页面

⑤:点击设置按钮,进入大屏的素材管理页面

⑥:大屏的操作菜单,其中分目录与具体大屏页面

⑦:大屏的预览页面,点击左侧目录下的具体页面,可以在这里预览大屏

素材管理

素材是大屏展示中会常用的内容,JVS提供了自定义素材的能力,如下图所示:

系统提供素材的目录管理、素材的自定义上传,素材的预览、重命名、删除等操作。

大屏结果预览

在左侧目录上,点击具体页面,系统将在右侧展示预览的效果

基础说明

大屏设计器的进入入口,如下图所示,具备设计权限的工具,在对应的大屏展示页面菜单上,鼠标悬浮“...”按钮时,系统自动弹出设计菜单,点击页面设计,即可进入大屏设计器

大屏设计器包括页面设置、大屏设计、页面权限三个部分,如下图所示,页面设置包括页面的基本信息和备注描述,这里的大屏名称和左上角的页面名称是实时同步的。

页面布局

大屏设计界面为整个配置器的核心页面,如下图所示,

①:大屏的名称,可以点击“笔”图标,进入名称修改状态,完成修改后通过回车即可保存

②:大屏设计过程的配置按钮,包括预览、发布为模板、保存,这里的发布模板是将配置的大屏结果发布到模板中心,其他的用户可以通过这个模板快速创建展示页面;保存按钮是对当前配置内容进行保存

③:资源面板,包括画布-图层-组件的配置管理,每一个组件的引入会作为一个单独图层进行展示,画布是由多个组件(图层)合并构建的,一个大屏的设计的结果可以是由多个画布组成。

④:配置面板,选中画布中的内容组件,这里展示每个组件对应的配置内容,如果没有选中任何组件,那么这里展示的画布的基础配置内容

⑤:配置面板折叠按钮,通过这个按钮可以折 配置面板

⑥:页面切换,通过点击不同的页面,可实现页面的切换为当前编辑页,这里的母版 是在所有页面都会生效的内容,且在其他页面不能编辑。

⑦:页面控制操作,包括页面的移动、页面的前进后退、页面的放大缩小。

资源面板

资源面板如下图所示,资源版本核心包括组件、图层和画布

资源面板的开启与隐藏,可以通过下图中的三种方式开启资源面板的配置,

当点击上图中的②时,如果点击组件,则进入组件配置页面,如果点击的画布,则进入画布页面。

配置面板

配置面板主要是对选中对象的配置窗口,如果选中的是图表组件,系统将弹出对图表相关的配置内容,下图所示,

如果选中的是装饰图片,右侧将切换为图片相关的配置设置,如果是点击空白位置,右侧展示的是大屏基础的设置内容,例如背景样式等内容。

底部状态栏

底部状态栏包括画布编辑的切换,通过点击对应画布,将对应的页面作为当前编辑页,选择对应的画布时,左侧将相应的展示当前画布的图层(组件),画布中的母版内容会对所有页面有影响

通过放大、缩小按钮会对画布的内部展示的大小进行缩放控制,可以通过在画布上点击右键,对画布进行拖动位置调整。

在线demo:http://bi.bctools.cn/

gitee地址:https://gitee.com/software-minister/jvs-bi

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1152827.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

少儿编程 2023年9月中国电子学会图形化编程等级考试Scratch编程四级真题解析(选择题)

2023年9月scratch编程等级考试四级真题 选择题(共25题,每题2分,共50分) 1、角色为一个紫色圆圈,运行程序后,舞台上的图案是 A、 B、 C、 D、 答案:A

springboot集成swagger3以及美化调试

实现效果如下&#xff1a; http://localhost:9999/doc.html#/ http://localhost:9999/swagger-ui/index.html#/ 代码开始&#xff1a; 一 引入pom <!-- swagger接口文档 --> <dependency><groupId>io.springfox</groupId><artifactId>springf…

Day 4 登录页及路由 (二) -- Vue状态管理

状态管理 之前的实现中&#xff0c;判断登录状态用了伪实现&#xff0c;实际当中&#xff0c;应该是以缓存中的数据为依据来进行的。这就涉及到了应用程序中的状态管理。在Vue中&#xff0c;状态管理之前是Vuex&#xff0c;现在则是推荐使用Pinia&#xff0c;在脚手架项目创建…

【年终特惠】全流程HEC-RAS 1D/2D水动力与水环境模拟技术案例实践及拓展应用

水动力与水环境模型的数值模拟是实现水资源规划、环境影响分析、防洪规划以及未来气候变化下预测和分析的主要手段。然而&#xff0c;一方面水动力和水环境模型的使用非常复杂&#xff0c;理论繁复&#xff1b;另一方面&#xff0c;免费的水动力和水环境软件往往缺少重要功能&a…

什么是神经网络,它的原理是啥?(2)

参考&#xff1a;https://www.youtube.com/watch?vmlk0rddP3L4&listPLuhqtP7jdD8CftMk831qdE8BlIteSaNzD 视频3&#xff1a;什么是激活函数&#xff1f;为什么我们需要激活函数&#xff1f;它的类型有哪些&#xff1f; 为什么需要激活函数&#xff1f;如果没有激活函数&…

无品牌国产PLC模块调试说明

地址30001对应的aiw9 30002对应aiw10 30003 aiw11 30004 aiw12 模块接线及拨码全部向下&#xff0c;对应的DeviceID为15地址 使用串口线链接的时候a要接b0 b接a0 要反着接才能有数据

LeetCode|动态规划|1035. 不相交的线 、53. 最大子数组和

目录 一、1035. 不相交的线 1.题目描述 2.解题思路 3.代码实现 二、53. 最大子数组和 1.题目描述 2.解题思路 3.代码实现&#xff08;动态规划解法&#xff09; 一、1035. 不相交的线 1.题目描述 在两条独立的水平线上按给定的顺序写下 nums1 和 nums2 中的整数。 现…

学习Linux/GNU/C++/C过程中遇到的问题

学习Linux/GNU/C/C过程中遇到的问题 1.源函数调用&#xff1a;2.linux静态库使用&#xff1a;3.vscode创建c程序调用onnxruntime:问题1&#xff1a;找不到头文件或者未定义函数问题2:error while loading shared libraries: libonnxruntime.so.1.16.1: cannot open shared obje…

HQChart使用教程97-K线X轴滚动条

HQChart使用教程97-K线X轴滚动条 效果图创建步骤1. 创建滚动条div2. 初始化滚动条实例3. 配置滚动条属性4. 创建滚动条5. K线图和滚动条绑定6. 滚动条显示位置 完整示例HQChart代码地址 效果图 示例地址&#xff1a;https://jones2000.github.io/HQChart/webhqchart.demo/sampl…

Python武器库开发-高级特性篇(十)

高级特性篇(十) 多进程 多进程就是指通过应用程序利用计算机的多核资源达到同时执行多个任务的目的&#xff0c;以此来提升程序的执行效率 import os from multiprocessing import Processdef hello(name):#获取当前进程#os.getpid()print(process {}.format(os.getpid()))p…

内衣洗衣机和手洗哪个干净?好用的内衣洗衣机测评

最近一段时间&#xff0c;关于内衣到底是机洗好&#xff0c;还是手洗好这个话题&#xff0c;有很多人都在讨论&#xff0c;坚决的手洗党觉得应该用手来清洗&#xff0c;机洗与其它衣物混合使用&#xff0c;会产生交叉感染&#xff0c;而且随着使用时间的推移&#xff0c;会变得…

【ChatGLM2-6B】从0到1部署GPU版本

准备机器资源 显卡: 包含NVIDIA显卡的机器&#xff0c;如果是阿里云服务器可以选择ecs.gn6i-c4g1.xlarge规格硬盘: 大约50G左右操作系统: CentOS 7.9 64位CPU内存: 4C16G 更新操作系统 sudo yum update -y sudo yum upgrade -y下载并安装anaconda 在命令行中&#xff0c;输…

python--杂识--15--python调用c代码

两种方法&#xff1a; Python/C apictypes 1 Python/C api 1.1编写代码 c_test.c #include <Python.h>// C的原生函数&#xff0c;实现两个整数的相加 int add(int a, int b) {return a b; };// compute_add【一般&#xff1a;模块名_函数名】&#xff0c;按照pyth…

渗透测试-Fastjson反序列化漏洞getshell

目录 前言 测试环境准备 dnslog测试 搭建rmi服务器&准备恶意类 引用JdbcRowSetImpl攻击 反弹shell$命令执行 总结 关键字&#xff1a;fastjson 1.2.24反序列化导致任意命令执行漏洞 注&#xff1a;本次渗透测试全在虚拟机中进行仅用于学习交流&#xff0c;请勿在实…

直播间讨论区需要WebSocket,简单了解下

由于 http 存在一个明显的弊端&#xff08;消息只能有客户端推送到服务器端&#xff0c;而服务器端不能主动推送到客户端&#xff09;&#xff0c;导致如果服务器如果有连续的变化&#xff0c;这时只能使用轮询&#xff0c;而轮询效率过低&#xff0c;并不适合。于是 WebSocket…

QT-- out of memory, returning null image

提示&#xff1a;本文为学习内容&#xff0c;若有错误&#xff0c;请及时联系作者&#xff0c;谦虚受教 文章目录 前言一、崩溃信息二、错误原因1.QImage2.QStandardItemModel 三、问题解决总结 前言 学如逆水行舟&#xff0c;不进则退。 一、崩溃信息 崩溃信息: QImage: out…

UIButton

titleEdgeInsets和imageEdgeInsets titleEdgeInsets和imageEdgeInsets的作用是用来移动btn两个子空间的排布的 它们只是image和label相较于原来位置的偏移量&#xff0c;那什么是原来的位置呢&#xff1f;其实就是不设置Insets的那个状态。下面为不设置insets的状态。 默认情…

AGMZE-A-32/100、AGMZE-A-10/350比例溢流阀控制器

AGMZO-A-10/315、AGMZO-A-20/210、AGMZO-A-32/100、AGMZO-A-10/50、AGMZO-A-20/350、AGMZE-A-10/50、AGMZE-A-20/210、AGMZE-A-32/100、AGMZE-A-10/350、AGMZE-A-20/50锥阀型&#xff0c;先导式&#xff0c;数字型比例溢流阀&#xff0c;用于压力开环控制。 A型&#xff0c;与…

风格迁移常用代码

nn.MSELoss均方损失函数 LPIPS感知损失 学习感知图像块相似度(Learned Perceptual Image Patch Similarity, LPIPS)也称为“感知损失”(perceptual loss)&#xff0c;用于度量两张图像之间的差别&#xff0c;来源于论文《The Unreasonable Effectiveness of Deep Features as …