样式配置

大屏样式配置是指通过设置设计器中各个组件的样式属性，来改变它们的表现形式和外观。每个组件都有一些样式属性，如颜色、大小、字体等。通过改变这些属性，可以改变组件的外观和行为。

【图-001】

组件的公共样式配置

每个组件都有一些基础的相同样式配置：见上图【图-001】

• 名称、尺寸【宽度和高度】
• 相对位置【左对齐，右对齐，水平居中，垂直居中】
• 绝对位置【上和左】

组件的其他样式配置

每个组件也有一些不同的样式配置，下面就举几个例子。

• 图表类：图例、X轴、Y轴、标签等字体和颜色的配置；见下图【图-002】
• 列表类：行数、表头背景颜色、奇偶数背景颜色、以及一些数据配置；见下图【图-003】
• 小组件类：边框颜色、背景颜色、内容设置、内容的字体大小、字体颜色等配置；见下图【图-004】

效果如下：

【图-002】

【图-003】

【图-004】

动画配置

在本系统中动画配置主要分为两类：入场动画和自身动画。

一类为组件入场动画：则是页面初始化加载，进入时，展示的动画。

二类为组件自身动画：则是该组件自身具备的动画，如边框闪烁，边框线条流动、独立线条流动等。

组件入场动画

入场动画，即页面第一次进入的动画。

组件自身动画

这类组件：包括带闪烁的边框组件、带流动线条的边框组件、流动的线条组件、动画图标、滚动字幕、跳动图表、滚动列表等。

数据配置

在本系统中数据配置主要分为两类：静态数据和动态数据。

• 静态数据：即用于快速构建Demo使用，通过简单的配置Json数据，导入组件即可使用。
• 动态数据：则是通过调用系统接口，查询最新的数据或实时读取设备的数据。

静态数据-图表数据静态

操作步骤：

• 任意拖动一个柱状图组件【滚动排名列表】到工作区；【其他图表操作一样】
• 单击图表进入右侧配置区域；单击数据源，请求方式选择静态数据；
• 在数据内容处；单击“编辑”按钮，即可将图表的模板数据进行修改；

动态数据-图表数据动态

操作步骤：

• 任意拖动一个图表组件【折线图动画】到工作区；【其他图表操作一样】
• 进入右侧配置区域；单击数据源，请求方式类型选择属性绑定并选择设备和属性；
• 启用高级设置：选择实时或者历史，选择时间周期，聚合方式，间隔时间/聚合方式为无时选择数据最大条数；
• 高级设置完成，单击“发送请求&保存”；则可看到请求返回的数据。

动态数据-文本信息数据动态【实时属性值展示】

操作步骤：

• 任意拖动一个信息组件【自定义文字】到工作区；
• 进入右侧配置区域；单击数据源，请求方式选择属性绑定并选择设备和属性；
• 参数设置完成，单击“发送请求&保存”；则可看到请求返回的数据（数据推送则实时更新数据）。

事件配置

大屏事件配置是指用户与网页交互时触发的一种行为或动作，可以被JavaScript侦测并处理。包括在网页上的点击、拖动、键盘输入、鼠标移动等操作；甚至还有一些高级事件，设置组件样式等。

功能说明

在系统中事件配置分三类：组件交互、基础事件、高级事件。

案例：按钮实现多页面切换

操作步骤如下：

设计第一页：

• 在大屏设计界面中，下方页码点击新增界面，作为‘第一页’和‘第二页’。
• 选择第一页，随机拖入几个组件，再拖入页面切换按钮，定制中按钮文字设置为第二页。
• 点击‘第二页’页面切换按钮，右侧“事件”区域中，组件交互处，单击“新增”，触发事件选择‘画布切换’，并选择第二页。

设计第二页：与第一页步骤一致。选择画布为第一页。

设计好后，预览默认为第一页，点击第二页按钮会跳转到第二页，第二页点击第一页会跳转到第一页，此时页面切换组件设计完成。

基础事件

常见的基础事件包括单击、双击、鼠标进入、鼠标移出；用户可以分别在这些事件下面分别做一些自定义设置等。

案例：鼠标进入时改变背景颜色

操作步骤如下：

• 在页面中，新增一个“自定义按钮”组件；
• 接着为“自定义按钮”设置基础事件；首先选中“自定义按钮”，单击“事件”标签；
• 在“基础事件配置”中，单击“编辑”按钮；
• 在鼠标进入“mouseenter”事件中加入【mouseEvent.target.style.backgroundColor = "#ff0000";】
• 在鼠标移出“mouseleave”事件中加入【mouseEvent.target.style.backgroundColor = "";】
• 设置完成；最后保存并预览结果。

高级事件

高级事件是可以根据用户的特殊情况，自定义设置组件的样式以及各种效果。

案例：切换多页按钮组件提示信息

操作步骤如下：

• 在页面中，新增一个“切换多页按钮”组件；
• 接着为“切换多页按钮”组件设置高级事件；首先选中该组件并，单击“事件”标签；
• 在“高级事件配置”中，单击“编辑”按钮；
• 在弹出的高级事件编辑器中，右侧系统提供了部分案例；单击“介绍案例”；
• 找到“案例6：添加设置文字组件点击事件样式”，将代码复制到左侧，"渲染之后（vnodeMounted）"中；
• 设置完成；保存后预览来进行操作来展示实际效果。