农业监控大屏
更新时间：2019-01-25 22:05:39
概述
在这个教程里，我们将学习如何用Web可视化开发搭建一个农业大屏。在这个面板里，我们将学习以下几个点：
- 画布的自适应
- 视频网页的嵌入
- 设备数据的展示
- 设备统计的展示
- 使用形状进行页面布局
最终效果预览：
Step1 新建应用，调整画布分辨率，设置画布自适应
在页面设置中，点击页面分辨率下拉框，选择1920*1080（常见宽屏比例）。
在底部工具栏，选中自适应，这样在预览和发布的应用中，就可以自适应屏幕大小（等比缩放，宽度撑满为止）。
tips：
- 鼠标点击画布任意非组件区域，即可做页面配置
- 页面分辨率一旦调整，所有新建的页面画布都遵循该分辨率
- Web可视化编辑器暂时不支持自动保存，切记随时Ctrl+S保存一下
Step2 添加页面背景色
找到页面设置项的背景颜色，使用自定义颜色功能，输入颜色值。
Step3 布局
步骤3-1 使用矩形作为区块分隔
拖拽矩形组件到画布中。
设置背景色为#FFF，边框粗细为0。
拖动改变组件大小，满足一个区块要求。
步骤3-2 完成其他区块
复制、黏贴，并完成其余区块的大小、位置调整。
拖拽iframe/图片组件到画布中，并调整大小和位置。
步骤3-3 精确调整位置和大小
可以用右侧面板的输入框来完成最后的微调。
Step4 配置各组件
步骤3-1 添加文本
拖拽文字组件到画布，在右侧操作栏中设置文字内容以及文字样式。最终调整到合理的位置。
步骤3-2 添加仪表盘
拖拽文字组件到画布，在右侧操作栏中点击配置数据。
选择设备数据源，逐项选择产品、设备、属性即可。
若实体设备未到位：
- 可以不选择设备，使用模拟数据来预览调试，应用发布以后再绑定真实设备。
- 也可以通过“在线模拟”入口，去产品管理页面创建模拟设备。
步骤3-3 设置iframe组件
选中iframe组件，在关联链接处，点击配置，填入URL即可，推荐使用HTTPS的URL。
：：
tips：
由于HTTPS网站内是不允许内嵌HTTP的地址，因此在编辑器中无法实时预览，可以通过预览页面（需要手动改为HTTP协议)来查看界面。
tips：
如果像嵌入视频网站的视频，必须使用分享地址中的URL，否则视频网站会禁止被嵌入。
步骤3-4 添加时钟组件
拖拽时钟组件，配置时钟的样式。
步骤3-5 配置图片
选中图片组件，在右侧配置图片。
步骤3-6 为文字组件绑定设备数据
拖拽一个文字组件，选中组件，配置数据项，选择设备数属性作为数据源。
步骤3-7 为文字组件绑定产品统计数据
拖拽一个文字组件，选中组件，配置数据项，选择接口-》产品与设备信息-》获取物的数量，即可动态显示设备数量
tips：
如动图所示，描述文字可以放在动态文本的左右，通过左右对齐完成样式调整。
获取物的数量接口，可以支持多种筛选参数，如总数、激活数、在线数等等，详见接口文档。
步骤3-8 添加实时曲线图
拖拽曲线图组件，配置设备数据，选产品-》设备-》设备历史属性，完成配置后，即可看到设备属性的实时曲线。
tips：
若使用的是虚拟设备，则可能因为历史数据太少，曲线图为空的情况，只需要多做几次模拟设备数据下发。
以上就是所需的组件及其配置方式，相同的组件以及细节的样式调整优化就不赘述了，祝大家用的顺利！