快速搭建大屏可视化应用

1. 概述

云智易物联网平台支持构建多种形式、多种场景的大屏可视化页面。本文以搭建“城市 IOC”为示例，介绍如何通过应用的页面设计功能实现 IOC 的可视化配置。

2. 详细操作指南

2.1 组态配置

操作步骤：

创建页面
- 选择大屏可视化（IOC） ⚠️ 注意：示例IOC是以3520*1120分辨率进行配置。
- 页面创建完分三个部分，左侧挂件容器、右侧挂件容器、以及中间部分，左右挂件容器是用来放置各种数据指标数据，中间部分以地图进行显示
配置‘挂件容器’
- 设置挂件容器宽度，固定宽度1000，加入‘挂件’组件进行布局
加入所需组件
- 物联感知概览
  1、使用迭代器，根据数据遍历对应数量的指标数据
  2、通过文字、图片进行排版
  3、将文字、图片进行数据绑定
- 今日数据接入 1、使用容器设置指标的背景图片（外观-背景），加上文字进行内容展示
  2、折线图绑定数据
- 今日巡检 1、使用图片展示、文字，通过容器的定位模式可以将文字显示在图片中央
  2、组合图绑定数据
- 数据共享 1、使用按钮组、折线图，通过按钮组的值来控制要显示的是哪个折线图
- 近7天设备异常趋势 1、加入柱状图，绑定数据
- 告警事件分析 1、使用指标卡组、滚动列表 2、配置指标卡名称、数据 3、滚动列表绑定数据源，配置显示列
- 事件类型 1、使用饼图、柱状图 2、进行数据绑定
- 区域能耗统计 1、使用指标卡组、滚动列表 2、配置指标卡名称、数据 3、滚动列表绑定数据源，配置显示列
- 重点区域监控 1、使用视频监控，一个设置栅格宽度12，其他的设置为6 2、设置视频设备ID
添加地图
- 添加"地图"组件
- 设置地图初始中心经纬度、初始缩放级别
- 通过数据源进行点位加载（如果没有动态数据来源可以通过‘上下文变量’构建静态数据）
- 设置点位点击事件（选中点位时，打开‘设备详情’；设备详情页面需另外配置） ⚠️ 注意：如果IOC涉及多个同层级页面，且都需要用到地图，可将地图单独放置一个页面配置；并用页面容器绑定至IOC中，启用保活；此时在切换页面时就无需重新重新渲染地图内容