产品介绍

1.1 什么是Jowo Studio

Jowo Studio是九物云平台（下文统称九物云）下的低代码应用开发平台，是应用设计、开发、调试、上线的一体化工具，提升工业应用的开发效率，提供了表单设计器（零代码）、页面编辑器（低代码）等应用开发模式。通过Jowo Studio提供的界面、逻辑、对象等可视化编排工具，以“拖、拉、拽”的方式来快速构建应用，从而实现所见即所得的快速应用开发和构建。

1.2 产品架构

九物系列产品包括九物边缘端硬件（主要是采集终端、显示采集一体终端和数据服务站）、Jowo Cloud九物云和九物SaaS化应用，解决了从端到云到应用落地的完整产品链，Jowo Studio九物低代码平台是九物云平台的一部分，提供了规则引擎、流程引擎、报表引擎等低代码开发工具以及页面编辑器、表单设计器、流程设计器等可视化开发工具。九物应用是基于Jowo Studio设计和开发的官方应用，其中DataBox九物数字化工厂为九物SaaS应用，为九物数字化工厂客户提供标准化的WEB应用，而九物标准应用是提供个所有九物租户使用的设备管理应用，在Jowo Studio页面编辑器中通过新建应用面板获取最新版本的标准应用，用户可以在此基础上进行学习、修改、新增其他功能页面的方式来开发适合企业的应用。

1.3 产品优势

• 降低应用构建门槛

  使用可视化、积木式、所见即所得方式进行应用开发，具备极低的学习成本，让业务人员可直接构建应用，人人都是开发者。

• 加速企业业务创新

  赋予员工开发技能，加速创新想法落地，开发自主可控，能快速响应、紧跟业务变化，降低长期竞争中淘汰风险，赋予员工开发技能，加速创新想法落地；

• 节约软件开发成本

  全云化线上开发，零代码/低代码开发模式，无需额外购买服务器和数据库。应用搭建完毕，即可预览和发布到云端以供使用。

• 灵活的开发方式

  支持多种页面类型和数据接入方式，可自建数据模型、接入数据源或对接API；支持海量组件及代码自定义，极富灵活度。

• 丰富的组件支持

  Jowo Studio提供200多种标准组件、行业组件、高阶组件，支持自定义。

• 完善的应用管理

  应用和页面均可进行版本管理，容错性高，即时回滚即时生效，支持开发者权限管理。

1.4 特色功能

• 零/低代码

  支持零/低代码两种页面类型的混搭开发应用，在应用编辑时可以创建自定义页面或数据表页面。

  自定义页面为低代码开发，主要用于开发应用中较复杂的前端页面，例如包含图片、图表、视频、地图等元素的页面。您可以将自定义页面应用于开发大屏、驾驶舱管理、设备监控、场站组态等，通过对组件、组件块拖拽、布局，并进行相关属性配置即可快速搭建应用。

  

  数据表页面为零代码开发，主要用于开发应用中较简单的功能页面，例如费用记录、申领记录、文件列表等，只需要配置表单字段就可以完成页面的开发，过程完全无需代码。

  

• 三维可视化

  通过三维可视化组件，可以加载、展示和动态交互数字化的三维模型，常应用到例如城市管廊、隧道、工厂、水务等行业场景中。

  

• 多端适配

  同一个应用可以适配PC电脑、手机、PAD以及大屏等不同终端的显示，保持显示效果和内容的一致性。

• 视频融合

  支持视频组件、视频墙组件，融合视频服务，支持多种品牌多种格式视频，使用方便性、可扩展。

• 地图融合

  支持二维地图、三维地图、GIS地图，以及GIS和BIM一体化展示形式等，普遍应用于设备、车辆、人员定位、轨迹回放，以及管网、航线、路线、环境监测、水情监测等多个行业领域。

• 融合通信

  支持语音、视频、图像、数据、文本消息等多种媒体融合，全面实现指挥调度过程中的多媒体消息交互。

• 用户权限

  采用了主流的 RBAC模型(基于角色的权限访问控制Role-Based Access Control),适用于大部分组织及权限设计要求，开箱即用。

• 规则引擎

  基于规则引擎的设备联动规则，多级告警规则的配置。

• 消息服务

  支持微信，企微、邮件、短信等多种消息通知的发送通道和消息模板配置。

• 开放性

  支持第三方组件开发，导入导出。

• 标准应用

  标配设备管理标准应用，开箱即用。

1.5 基本概念

• ​租户

  租户指使用平台的企业/组织的统称。一个租户拥有独立的运行环境与数据，包括用户、帐户与统计信息、用户在系统中建置的各式数据、以及用户本身的定制化应用程序环境等。

• 成员

  即用户，为平台的使用者，从属于特定租户。一般情况下，用户角色会包含管理员、开发者、实施人员、使用者四大类。

• 应用

  应用即一个App，是一个实现了某种业务功能的可运行软件程序。Jowo Studio就是应用的全生命周期管理平台，从应用的设计、开发、发布到运行、维护的全过程管理。通过拖拉拽创建功能不同的页面，可视化排列、配置各种组件、组件块元素，创建功能各异的行业应用。

• 模板应用

  在创建新应用的时候，可以从Jowo Studio提供的模板应用中选择一个合适的模板来进行创建，模板应用提供了完整应用的元素，包括页面、组件块和跳转逻辑、静态数据等，用户只需接入后端逻辑的数据和接口就能发布使用了。

• 标准应用

  在创建新应用的时候，可以从Jowo Studio提供的模板应用中选择一个合适的模板来进行创建，模板应用提供了完整应用的元素，包括页面、组件块和跳转逻辑、静态数据等，用户只需接入后端逻辑的数据和接口就能发布使用了。

• 组件块

  在自定义页面上可以将多个组件组合成组件块，或者在组件块列表中新建组件块，然后拖入各种组件进行布局和配置。组件块常用于弹出框、侧边框、标签页切换、重复列表等，组件块可以在多个页面重复调用，从而修改一个组件块，多个页面同时修改。

• 开发人员

  是指具有一定代码编写能力的软件开发技术人员，包括但不限于IT部门人员、软件开发人员等。

• 业务人员

  是指不具有代码编写能力的企业员工，包括但不限于管理人员、职能部门人员、销售部门人员、市场部门人员等。

• 人机料法环测

  人（Man）：操作者对质量的认识、技术熟练程度、身体状况等；机器（Machine）：机器设备、测量仪器的精度和维护保养状况等；材料（Material）：材料的成分、物理性能和化学性能等；方法（Method）：这里包括生产工艺、设备选择、操作规程等；测量（Measurement）：主要指测量时采取的方法是否标准、正确；环境（Environment）：工作地的温度、湿度、照明和清洁条件等；

2 入门导读

2.1 学习路径

Jowo Studio是九物云为行业客户、合作伙伴、开发者量身打造的一款零/低代码应用开发平台，通过Jowo Studio可轻松构建专业级应用。初次使用Jowo Studio，如果不知道从何处入手，可以通过入门导读可帮助您由浅入深的学习Jowo Studio，轻松完成专业级应用的构建。

2.1.1 入门指引

2.1.2 任务分解

任务	任务说明	适合角色
初学
注册租户	按照注册流程创建租户和超管账号	所有
添加成员	以超管账号登录，创建开发人员和应用使用人员账号	所有
了解Jowo Studio	阅读本文档1、2章节，初步了解Jowo Studio	所有
创建简单应用	使用数据表页面搭建零代码的简单应用	所有
进价
学习开发方法	阅读本文档第3章节，了解本平台构建应用的方法论	所有
学习标准应用	通过预览、编辑标准应用，了解标准应用的功能逻辑和页面实施的方式方法，尝试搭建同类型页面，实现一些简单页面功能。	产品/IT/开发
开发准备	包括学习常用组件的功能和数据对接方法	产品/开发
开发典型页面	设计和开发大屏页面、组态页面、列表页面、报表页面	产品/开发
实战
搭建设备运维应用		产品/开发
搭建智慧管廊应用		产品/开发
开发移动端应用	设计并开发一个移动端应用	产品/开发

2.2 开发准备

2.2.1 注册租户

1. 打开浏览器，输入网址https://www.jowocloud.com ，打开网页如下：

2. 点击登录框左下角的注册按钮，进入注册页面-创建组织；a）输入组织名称，按提示填写、b）勾选“我已阅读并同意……”、c）点击下一步；

3. 进入注册页面-创建管理员账号，a）填写手机号、b）点击获取验证码（这里会校验手机号是否已注册过九物云平台）、c）输入验证码、d）以此输入账号名称、输入密码和邮箱，再点击下一步；

4. 稍等片刻，平台正在完成租户的初始化，完成后页面中会有一个企业微信二维码图片，可以使用您的企业微信扫码加入九物客服服务中心后，可以获得及时在线帮助；或者点击“确认”按钮跳过；

5. 此时已完成注册，页面显示注册的相关信息，可以点击“去登录”按钮，跳转到登录页面，输入这个页面中的管理员信息的，账号或手机号，以及上面设置的密码就可以登录了。

6. 登录完成后，进入到九物开发平台，点击右上角“应用开发”按钮，进入应用开发管理页面；

2.2.2 添加组织

在管理中心左侧菜单点击“组织架构”，右侧可以看到部门列表（默认是空的），成员列表默认有一个是注册时创建的超管账号，超管账号是可以管理租户内所有资源的，不建议直接用超管账号直接去开发应用，所以管理、开发和使用要做一些权限的隔离。首先要添加一些组织部门，然后再添加使用平台的各个成员。

新建组织：组织名称是必填的，创建的第一个组织部门必然是租户下的一级组织部门，所以上级组织这里不用选，组织负责人这里因为还未添加成员，所以先不用选，填好组织名称就可以直接保存了。

组织管理：鼠标移到刚创建的组织名称上，可以看到名称右侧会显示三个点的图标按钮，点击展开弹出菜单，就可以看到添加子组织、编辑组织和删除组织的三个操作菜单。

2.2.3 添加成员

添加完组织部门后，就可以添加成员了，添加成员的方式是邀请制的，即所有被邀请的成员手机收到平台发出的邀请短信，通过短信链接或扫平台提供的邀请二维码，打开邀请页面填写个人信息、设置密码，提交即为同意邀请，管理员在成员列表就可以看到这些被邀请的成员，再进行审核和激活操作。在页面右上角可以看到邀请成员的相关操作按钮，下面分别介绍：

批量导入：先要下载导入模板，按照导入提示的要求格式填写成员信息，然后再上传编辑好的导入文件，导入完成后每个被邀请成员就会收到邀请短信，只有确认邀请并提交信息的成员才会出现在成员列表中。

手动邀请：就是单个邀请成员，一个个填写成员信息并提交，姓名、手机、邮箱和所属组织先填写好后提交。

链接邀请：通过图片和链接方式，发送给被邀请人，再扫码或点击链接访问邀请页面，被邀请人填写信息后提交，管理员再进行审核和激活操作。

成员加入设置：可根据设置项的操作提示对邀请成员的机制进行设置。

2.2.4 权限配置

权限管理有两个层面：一是系统级权限，主要针对使用管理中心的人员权限控制；二是应用级权限，主要针对登录应用内的人员权限控制，本章主要阐述系统级权限的管理。

1）角色管理

要进行应用开发，主要设置应用开发人员和应该管理员两种角色，Jowo Studio中已经内置了这两种角色：

应用管理员：可以管理所有应用，分配组织内哪些人可以访问哪些应用，应用内角色定义和角色权限设置；应用管理员不仅可以编辑所有应用还有发布权限；

应用开发人员：以创建应用，拥有自创建应用或已分配管理员权限的应用内的开发、发布的权限；可以对应用开发人员分配不同的应用，并赋予开发或管理权限；应用管理权限就是能发布应用和删除应用；

在角色用户页面，添加应用管理和应用开发人员的成员。

2）权限管理

这里主要是对应用开发人员的权限管理，在应用开发人员列表的右侧操作一栏有配置按钮，点击进入后就可以对该开发人员的权限进行配置，先勾选开启权限开关，然后勾选可开放的应用，在应用右侧操作权限一栏有开发和管理2种权限，开发权限是默认勾选的，管理权限可勾选，应用管理权限包括了发布、删除、备份和还原等操作权限。

3) 功能介绍

本章节主要对Jowo Studio应用编辑器的功能进行介绍说明。

3.1 应用管理

通过点击网站导航栏右侧的“应用开发”按钮或者管理中心左侧的“应该开发”菜单都可以进入到应用管理页面。

3.1.1 新建应用

点击应用列表最前面的“新建应用”按钮，在弹出界面提供了2种新建应用的方式：创建空白应用、从模板中心生成。

创建空白应用：填写应用名称，选择应用类型及页面尺寸，使用较多的PC端应用和手机端应用，选择一种适合的分辨率尺寸，没有合适的可以自定义尺寸。

从模板中心生成：预设模板的应用为平台提供的标准应用，这是带后台逻辑，创建后可直接使用，可以基于此应用做扩展开发；精选模板的应用为平台的模板应用，并不带后台逻辑，主要是提供样式模板和静态数据，可以为应用设计人员提供布局和样式框架。

3.1.2 应用管理

应用创建后，鼠标移到应用列表中的应用方块上会浮出一些操作按钮，下面三个按钮分别是预览、分享和编辑，点击编辑就进入编辑界面了，右上角的更多图标按钮，点开弹出菜单，未发布的应用有备份应用、更新/恢复应用和删除3个菜单项，发布后的应用会增加发布地址和发布记录菜单项。

应用有编辑、预览、发布3个形态，而且相对独立运行，应用保存后可预览，预览最后一次编辑保存的结果，主要在设计和开发验证时使用；应用发布后才有发布地址，发布地址主要提供给应用成员使用，应用发布后才会更新发布态的应用。

3.1.3 发布记录

应用每次发布都会有发布记录，可以预览每个发布记录，也可以把应用恢复到之前发布的版本。这个功能其实是应用的版本管理，应用发布后出现较大问题，需要对应用进行回滚操作。

3.1.4 备份与恢复

应用备份就是将编辑好的应用以Zip文件包形式备份保存在本地电脑上，以防止平台数据崩溃造成的应用丢失或数据损坏而无法使用，是灾备的一种形式；应用恢复就是用本地备份的应用替换或更新线上版本的应用，也可以重新上传该应用，生成一个新的应用。更新/恢复应用在上文提到的应用方块弹出菜单里，上传应用在应用列表右侧刷新按钮的右边更多按钮点开。

3.1.5 应用中心

通过访问www.jowocloud.com并登录后，进入应用中心页面，用来展示租户下发布后的所有应用，是应用登录的门户，注意是发布后的应用才会出现在这里，并且登录的成员拥有该应用使用权限才可以看到。如果该成员既是应用成员又是开发人员角色，在这个页面应用列表的右上角会有“应用开发”的按钮，点击后就会回到应用开发的页面。

3.2 编辑器界面

编辑界面主要分为5大区域：工具栏、功能标签、资源列表、操作区、配置面板。

1. 工具栏：左侧是撤回重做和复制剪切等操作按钮，中间是对齐、图层、锁定、组合等操作按钮，右侧就是保存、预览、发布等操作按钮。
2. 功能标签：包括了页面、组件、素材、组件块等资源对象列表的切换按钮，以及导航布局、应用设置等配置功能按钮，下文将对各功能进行详细说明。
3. 资源列表：切换不同的资源对象，展示不同的资源列表，关于列表的操作下文将分项介绍。
4. 操作区：页面的显示区域，可以拖拽组件放置在页面上进行布局，所见即所得的操作方式。
5. 配置面板：对页面和组件进行配置的主要操作区域。

3.3 页面列表

1. 新建页面：首先点击列表下方的“新建页面”按钮，可以选择自定义页面和数据表页面，先选择自定义页面，然后在弹出窗口填写页面名称，“添加到导航”开关的功能是指是否将此页面的名称加入到导航菜单中，新建的页面会出现在上面列表中。

2. 页面排序：鼠标按住页面名称就可以在列表中上下拖拽页面进行排序，另外还可以建立页面文件夹，对页面进行归类整理。
3. 元素列表：页面列表下面有个“元素”的展开列表，这里的元素就是当前页面上的组件、组合等元素对象，如果页面元素很多，上下叠加较多、组件打组后不方便拆开等鼠标选择不好操作情况下，可以直接选择元素列表里的对象。

4. 页面操作：点击页面名称右侧的更多按钮，弹出菜单项有更改名称、创建副本、锁定、删除和历史版本；

• 创建副本：复制页面，如果两个页面布局内容相似的话就可以复制页面，页面组件和配置都会一样，方便修改；
• 锁定：主要用在多人开发同一应用时，当前开发人员锁定页面后，列表中页面名称上会有锁住的icon，其他开发人员再打开这个页面时也会在操作区域进行提醒。

• 历史版本：是当前页面的历史保存记录，可以把页面还原到之前保存的版本；

3.4 页面配置

3.4.1 基础配置

当进入某个页面，不选择任何页面元素，右侧的配置面板就是页面设置，包括以下几个方面设置：

1) 页面背景：可以设置背景颜色或背景图片，背景图片是在背景颜色之上的，设置图片背景后，背景颜色就看不到了，背景图片是全屏拉伸的，所以图片尺寸和比例要与屏幕尺寸一致。

2) 屏幕尺寸：这个在创建应用时已设置好，一般情况下不会变动；但页面的高度可以另外设置，比如有的页面是大屏页面，需要全屏显示，有的是普通网页不需要全屏，非全屏时就要考虑浏览器的网页显示高度是小于全屏高度的，这时就可设置页面高度。

3) 导航布局：有三种导航布局方式——头部及左侧导航、只显示头部、不显示；头部及左侧导航是最常用的方式，而大屏页面一般会选择不显示导航，里面的跳转菜单可以自定义设计；只显示头部的方式，一般会和应用的导航布局设置配合使用，使导航菜单在头部显示。

4) 页面缩放：这是Jowo Studio的一个特色功能，可以使页面在不同屏幕分辨率下进行缩放显示，避免网页出现大量留白或者页面内容超出屏幕范围的情况；页面缩放有两种形式——自动缩放、组件自适应；

• 选择自动缩放后，下面会多出一个页面缩放范围的设置，默认值是0.8-2.0，意思是当前页面尺寸的0.8倍到2.0倍范围内自动缩放，为了适应更大范围的屏幕分辨率，我们扩大这个值的范围，比如设置成0.4-4，这里缩放是按适配浏览器宽度的缩放；
• 选择组件自适应后，组件的宽度将会根据当前浏览器窗口的宽度自动变化，将会按照组件初始状态下的宽度占比自动计算出最终的组件宽度。

5) 高度样式：开启高度自适应后，页面缩放会按浏览器可视高度进行缩放，这个功能一般不使用，因为有时页面高度比较长，高度自适应后，整体页面就会压瘪，比例失真。

6) 渲染模式：含固定模式和动态模式；固定模式就是组件在页面上的位置是绝对定位方式；动态模式是指页面有些内容是动态显示或隐藏的，页面高度支持动态变化。

7) 横屏模式：这个功能主要是在移动端页面上使用的，开启之后在移动端浏览该页面时就会自动横屏显示了。

8) 面包屑导航：这个设置是配合应用设置中布局风格的“风格2”设置项，配置该页面中面包屑的内容。（面包屑：即页面的层级路径，类似文件保存路径，例如“设备管理-设备列表-设备详情”）

9) 设为应用首页：应用首页就是打开应用后，第一个展示的页面；整个应用只能设置一个首页，如果没有一个页面设为首页，那么页面列表中最上面的一个页面会作为首页显示，如果已设置了一个页面为首页，再设置另外一个页面为首页后，原来的页面就不再是首页了，设为首页的页面在页面列表中的页面名称图标为一个“”图标。

10) 左侧导航设置：有全部展示、部分收起、全部收起三个选项，全部展示是默认选项，菜单名称和图标全部展示；部分收起是指收缩菜单栏宽度只显示各个菜单图标，鼠标移上去的时候完整菜单才会显示；全部收起是指在头部导航栏左侧显示一个菜单图标，左侧菜单栏完全不显示，鼠标移到头部菜单图标时，完整菜单才会显示。

11) 页面固定区域设置：页面固定区域是指，上下各留多少区域是不随页面滚动的，常用于移动端的头部导航和底部标签栏，这样它们就不会随页面上下滚动，方便操作。

3.4.2 变量

Studio应用的每个页面中都可以创建变量，变量主要用于存储页面渲染所需要的内容数据。通过修改变量中存储的数据，可以实现页面上对应区域内容的实时渲染更新。

1) 创建变量：

“变量”的管理区域在“页面设置”面板中，默认状态下页面中没有变量。点击“新增变量”按钮，将会弹出“添加变量”模态框。填写相关的信息点击“保存”即可创建变量。

变量的初始值要求是JSON格式。如果要创建的变量需要更复杂的数据格式，比如包含方法，则可以使用“自定义初始化函数”来实现变量数据的定义。通过该函数可以实现诸如“从网址Url上获取参数”、“创建自定义方法”等功能。一般情况下，如果需要在变量中存储方法，通常是要把这个变量作为页面级的全局模块使用，即只有这个页面会用到这些方法，这种情况下可以避免“全局模块”的过度使用。

2) 绑定变量

第一步，选中某个组件，找到需要绑定变量的那一行属性，右侧会统一有一个“绑定数据源”的图标。点击该图标将会弹出“数据源配置”的配置面板。

第二步，在“数据源配置”的面板中，将“数据来源”设置为“变量”，然后选择对应的变量名称，比如下图中的“姓名”。点击“确定”即完成了变量的绑定。如下图中，成功将姓名“张三”显示到页面中。

变量在绑定过程中，有很多情况需要进行进一步的加工处理。此时可以勾选“数据源配置”面板中的“数据处理”，此时可以在“数据处理”低代码方法体中对数据进行处理。比如在下图中，我们在“张三”后边追加了一个“感叹号”。

有时候我们需要同时绑定多个变量，此时我们可以直接使用“静态数据”，通过低代码区域中提供“Stage”参数，去获取这些变量的值并进行拼接。比如下图中，我们新增了一个“年龄”变量，并将“张三(18岁)”显示到页面上。

3) 修改变量

第一种方式，我们可以拖入一个“按钮”组件到页面中，并在这个按钮的“事件”面板中，添加一个“修改变量的”事件，实现“点击一下按钮，将姓名更改为李四”的效果。

第二种方式，我们可以将点击事件的“动作类型”修改为“执行自定义方法”，在自定义方法的低代码区域中填入修改变量的代码语句：Stage.setGlobal(“姓名”, “李四”)。自定义方法中可以以代码语句的形式实现所有其它类型的动作，它是Studio最底层同时也是功能最强大的动作类型。当“事件”的动作比较复杂时，比如同时修改多个变量，此时都应该使用“自定义方法”。

第三种方式，是在“数据发布”中修改变量。可以在“发布方式”中选择“赋值给变量”或者在“自定义发布函数”中通过修改变量语句实现变量的修改。“数据发布”的内容将会有另外进行单独的详细介绍。

3.4.3 数据发布

Studio应用的每个页面中都可以创建数据发布，数据发布的主要作用是加载服务端数据，即页面在加载后，请求服务端的数据接口，在获取到数据后，将这些数据更新到变量中。同时数据发布支持“定时刷新”、“监听变量”、“监听组件值”等多种触发方式，可以实现较为灵活的变量数据自动更新。

1） 创建数据发布

数据发布的管理区域在页面设置面板中，页面初始状态下未包含任何数据发布记录。点击“新增数据发布”按钮，将会弹出“新增数据发布”模态框，填写相关信息之后，点击保存按钮，即可创建数据发布。

2) 数据源配置

数据源是获取数据的途径方式，数据源配置不仅在数据发布，也在组件事件和组件属性值设置中都可进行数据源配置。在数据发布配置面板的数据源配置中，额外支持配置自定义接口、数据表和九物标准服务等数据来源，即支持配置来自服务端的数据。

• 静态数据：常用作静态数据展示，在产品设计阶段使用较多，各个组件里面的相关设置项静态数据配置的格式不太一样，我们在介绍组件时会分别说明。

• 变量：选择页面中的一个变量，然后进行数据处理赋值，详细说明参看变量。

• 组件值：根据所选择组件或组件块的当前值，再进行数据处理或逻辑判断。

• 数据表：数据表是在创建数据表页面时生成的或是在九物云管理中心的数据表中直接创建的表数据，这里数据表数据源是取某个表里的单条或多条数据，读取方式有指定记录和动态记录。

  

  指定记录：点开对话框中，可直接选取某个数据表的某条记录；

  动态记录：点开对话框，可以选择某个变量，还可以通过“数据处理”进行调整。

• 九物云标准服务：由九物云平台提供的标准服务接口，包括设备服务、测点数据、告警服务、报表服务、算法模型。

  设备服务：用于查询设备树、设备列表和场站详情中某些统计字段，并可对返回的数据进行数据处理和错误处理。

  测点数据：用于获取租户下多个设备测点的实时或历史数据，对历史数据可设置数据聚合方式、时间和时间段等参数进行查询，再对查询后的数据进行处理。

  告警服务：用于获取租户下某个场站或设备节点下的告警记录列表，可按设备等级、告警类型和告警时间等条件进行查询，再对查询后的数据进行处理。

  

• 自定义接口：能够通过调用http请求的方式来获取数据，非常灵活，通过“自定义接口”的配置可以轻松实现对服务端接口数据的请求。

  

  数据处理：服务端返回的数据可能不符合页面的要求，通过“数据处理”模块可以对获取到的数据进行二次处理。

  错误处理：有时候服务端可能会发生错误，此时可以通过“错误处理”模块来避免页面发生异常，也可以在此处给用户展示错误提示。

3）发布方式

提供两种发布方式，分别为赋值给变量和自定义发布函数。一般情况下是更推荐使用“自定义发布函数”方式，它可以实现更灵活的操作，比如同时给多个变量赋值、处理数据、打印调试信息以及在出现异常数据时弹出用户提示等。

4）定时刷新

数据发布可以通过设置定时刷新来设置“在固定一个周期内反复执行这个数据发布”的功能，比如每隔几秒请求一遍服务端的数据，实现页面数据自动更新的效果。 定时刷新的单位为秒，如果需要设置更短的时长，可以填写小数。比如填写0.3，实现300毫秒的定时刷新。

5）监听变量

数据发布可以通过设置“监听变量”来设置“在对应变量发生变更时自动触发执行这个数据发布”的功能。可以同时配置多个变量，如果配置了多个变量，则当这些变量中只要出现任意一个变量发生了变更，则该数据发布就将会被触发执行。

6）监听组件值

数据发布可以通过监听组件值来设置“在对应组件的组件值发生变更时自动触发执行这个数据发布”的功能。可以同时配置多个组件值，如果配置了多个组件值，则当这些组件值中只要出现任意一个组件值发生了变更，则该数据发布就将被触发执行。

组件值虽然在一定程度上可以提升灵活性，但组件值不如变量稳定，因为组件有可能会处于隐藏状态，这可能造成一定程度的数据失控。所以更推荐优先使用变量来做数据的流转，即通过组件值改变事件 -> 修改变量 -> 触发数据发布的数据流转链路来实现数据流转。

注意：在Studio的底层运行逻辑中，所有组件的组件值在页面加载时都处于“未设置”状态，组件在首次加载时，会按照组件规范进行一次组件值的修改。所以如果“数据发布”设置了“监听组件值”，则页面加载过程中会由于组件值的变更，触发一次数据发布。如果此时“加载页面时自动执行”的选项依然是启用状态，会造成“触发两次”的情况，此时应该关闭该选项。

3.4.4 全局模块

全局模块主要用于存储那些在应用内通用的内容，比如全局数据，辅助方法等。创建全局模块后，可以在低代码通过JowoMods来获取对应的内容，如下图所示。

3.5 组件配置

组件属性中有一部分属性是大部分组件都有的配置项，我们称之为通用属性，例如尺寸位置、颜色、背景图片、文字、边框、阴影等，先介绍一下通用属性的配置方法，然后针对一些常用组件介绍一下专有属性的配置方法。

3.5.1 基础属性

1) 位置尺寸：以页面左上角为原点的坐标体系，X轴从左至右值越大、Y轴从上至下值越大；宽度W、高度H输入框右侧的比例锁定开关按钮“”，当需要把组件进行等比例缩放时，可以先打开此开关为锁定状态“”；角度设定规则是以组件中心点为圆心，输入正数为顺时针旋转，负数为逆时针旋转。

2) 组件名称：组件拖到页面上之后，系统会赋予组件一个默认名称（组件类型名称+4位字母数字编码），当页面同类组件较多外观类似，或者一些组件被设为不可见时，就可以重新命名组件名称，这样我们在页面元素列表中，方便查找和选择。 3) 组件可见性：在一些页面交互场景中，某些组件或组合需要根据变量或其他组件值的条件来进行显示隐藏，我们可以在组件可见性的绑定数据源这里写一些判断条件的代码来进行控制，例如：return data === ' ' ? true : false

4) 不透明度：100为不透明，0为完全透明，这个属性是对组件整体透明度的设置，一般用于图片组件。 5) 动画效果：动画效果开启以后可以选择淡入淡出、左侧划入、右侧划入、顶部划入、底部划入5种动画类型，并可设置动画时长（ms），关闭入场动画，关闭离场动画；动画效果常用于一些默认隐藏的面板、弹框之类的页面元素，在触发显示条件后的显示动画效果，增强用户体验感。
6) 高级设置：“Key值绑定”配置项可以通过绑定到某个变量，在该值发生改变时，主动刷新组件。“底部贴边”和“右侧贴边”配置项可以实现一些高级的布局，特殊场景下很有用。

3.5.2 通用样式属性

组件的样式属性中有一些是通用的，设置方法一致。

1) 颜色：所有对颜色设置的地方基本操作是一样的，输入框内是颜色的HEX值，通常我们看到是6位16进制的编码组成，这里的是8位，后两位代表的是透明度的16进制值，前6位值可以通过取色工具获得，HEX值主要是便于复制和修改，要修改当前颜色，点击前面的颜色小方块，这个颜色就是当前HEX值的颜色，点击后会弹出调色板工具，可以点选颜色，也可以直接输入RGBA值，A就是透明度值，100为不透明，0为完全透明，下面色块是系统配色，最后两个分别是纯白不透明和纯白全透明，这两个使用频率会较多。

2) 渐变色：开启之后单色配置失效，渐变色可配置起始颜色、结束颜色和角度，起始结束颜色默认是从下至上的，角度设置是以组件中心为圆心的正数顺时针、负数逆时针进行旋转。

3) 背景图片：点击“选择图片”按钮，从图片选择器中上传或选择一张图片确认后，会出现图片相关设置项：背景位置是指图片在组件内的位置，位置原点是在组件左上角，自定义背景位置时可设置单位是像素px还是相对于组件宽高的百分比%的水平、垂直位置；背景尺寸也是指图片的大小，可设置具体像素px或相对于组件宽高的百分比%的宽高。

4) 边框：很多组件都有边框的属性，利用边框属性可以设计很多边框表现形式。

• 边框宽度：可输入多少像素的边框，通常默认1px，边框的宽度是向组件内部延伸的，即边框是在组件边界内的；

  

• 圆角类型：有边框圆角和独立圆角2中类型，边框圆角就是4个角的圆角统一设置的，独立圆角则可以单独设置每个圆角；

  

• 边框类型：有实线、虚线、点状线3种类型；

  

• 边框位置：控制4条边的显示隐藏；

  

  利用边框的这些设置项，可以设计出不同的表现形式组件：

  

5) 文字：所有需要展示文本的组件都会有文字的属性配置。

• 文字大小：注意中文最小显示大小为12px，这是所有系统浏览器的限制；
• 文字颜色：不同用途的文本需要设置不同的颜色，在一个页面中的文本尽量避免只设置一种颜色；
• 文字粗细：较细、标准、较粗、100 ~ 900 为字体指定了 9 级加粗度。100 对应较细，900 对应最粗的字体变形，数字 400 等价于标准，而 700 等价于较粗。
• 文字类型：就是字体，包括楷体、宋体、仿宋、黑体、幼圆、平方，系统默认平方，字体一般很少会做设置修改。
• 文字对齐方式：支持横向的靠左、居中、靠右、两端对齐。
• 文字间距：可以设置文本字符的间距，通常是用在大标题的文字间距调整。
• 是否斜体：文本斜体字形设置。
• 文字阴影：主要为了让文字在背景中更加的凸显，可以设置水平/垂直偏移、模糊距离和阴影颜色。

6) 阴影：组件和文本中都可以设置阴影，设置项基本一样。

• 阴影水平偏移：阴影水平偏移的方向和距离，数值为正数是向右偏移，数值为负数是向左偏移，数值越大则偏移越多。
• 阴影垂直偏移：阴影垂直偏移的方向和距离，数值为正数是向下偏移，数值为负数是向上偏移，数值越大则偏移越多。
• 阴影模糊距离：阴影的模糊距离，数值越大则阴影在视觉上越大且越模糊不清。
• 阴影大小：阴影的大小，数值越大则阴影范围越大。
• 阴影颜色：从调色板中选择一种纯色作为边框颜色。
• 阴影类型：阴影的样式类型，分为内阴影和外阴影两种，内阴影是指整个阴影部分在四条边框内，外阴影是指整个阴影部分在四条边框外。

3.5.3 事件

事件配置不仅仅是在组件属性面板中看到，在很多复合组件内也能看到事件配置，基本使用方法是一样的。这里的事件是所选组件的交互行为和执行逻辑的组合，事件类型包括点击、双击、值改变、鼠标移入、鼠标移出、鼠标按下、鼠标抬起。其中点击是最常用的事件，鼠标移入移出通常配合来使用，比如鼠标移到一个图标上，然后显示一个浮出面板，当鼠标移开图标，浮出面板就隐藏，这个交互逻辑就需要在图标上设置2个事件，一个鼠标移入，一个鼠标移出。

新增事件：在“事件”标签页下，点击“新增事件”按钮，就会新增一条事件的配置项，事件可新增多条，也可以点击事件名称右侧的“”按钮图标删除多余的事件。

选定事件类型后，就是选择执行动作，包括打开链接、修改变量、调用数据发布、弹出侧边栏、弹出模态框、弹出可拖拽模态框、修改设备测点、执行自定义方法，下面分别介绍这几个动作的配置方法：

1) 打开链接：点击“选择链接”按钮，打开链接配置项，链接类型包括当前应用页面和自定义URL，当前应用页面就是从应用的页面选择一个页面作为跳转的目标页面，在URL参数里面可以自定义一些参数,如下图所示；自定义URL在代码输入框输入URL地址，格式例如： return 'https://www.baidu.com'（注意：只支持https的URL地址）；打开窗口有当前窗口和新开窗口2种选择。

2) 修改变量：先在页面设置那里新增变量，然后再选择组件，在事件配置选择该变量，然后点击“配置数据源”，配置方法参考数据源配置章节。 3) 调用数据发布：可以主动选择一个已创建“数据发布”来主动触发。

4) 弹出模态框：即模态对话框（Modal Dialogue Box，又叫做模式对话框），常用于一些信息新建编辑等操作，模态框的内容由组件块组成，模态框的配置项与模态框效果对照见下图：

• 渲染模式：固定模式是指模态框的高度是固定的，动态模式是指模态框的高度是随内容的高度自动调整。

• 垂直居中展示：默认关闭，模态框的垂直位置相对浏览器可视窗口上边缘的距离是固定比例的；开启之后模态框的垂直位置相对浏览器可视窗口是居中的。 5) 弹出侧边栏：侧边栏是模态框的一种形式，配置项与模态框基本一样，多出一个弹出位置的选择，从浏览器可视窗口的上下左右边缘弹出。 6) 弹出可拖拽模态框：可拖拽模态框是模态框的一种形式，但可以通过鼠标拖拽模态框移动到其他位置，以下介绍一下可拖拽相关配置项：

• 模态框Key(唯一)：这里填入任意文本即可。由于可拖拽模态框允许同时存在多个，所以要求这个Key值是互不相同的，多个可拖拽模态框不要设置一样的Key。

• 自定义模态框初始位置：可配置模态框弹出时的初始水平和垂直位置，使用 "-" 符号分割，如 left-top, right-bottom... 等；水平位置，可使用 left, center, right关键字， 也可使用 10px, 10%... 等方式；垂直位置，可使用 top, center, bottom关键字， 也可使用 10px, 10%... 等方式。

• 拖拽热区：拖拽热区是鼠标可按住拖动的区域，热区的坐标和尺寸是相对于模态框而言的，X、Y坐标值的原点是在模态框的左上角；W是热区宽度，单位是百分比%，默认100%，意思是宽度跟模态框的宽度一样，H是热区高度，单位是像素px，默认10px；背景是热区的背景颜色，这个作用是为了标识可拖拽区域，方便用户操作。

  

7) 修改设备测点：常用于对设备的控制操作，包括开关、设置参数或者根据条件判断写入设备参数。

选择场站/设备/测点：以层层递进方式选择到具体测点，然后设置测点值；

设置方式：预设固定值就是写入一个固定值；由用户自行设定，那么在页面交互的时候就会弹出一个模态框，让用户自行填写，这个设置的形式由测点类型决定，比如开关控制测点就是开关的形式，范围控制测点就是输入框的形式；

动态指定设备ID：可以通过低代码的方式实现动态设备ID的指定。一般从URL或者全局配置里获取，如下图所示：

动态指定测点名称：可以通过低代码的方式实现动态测点名称的指定。

8) 执行自定义方法：通过填写低代码实现各种功能。通过发挥代码强大的表达能力，可以实现各种组合效果。方法中会提供Stage参数，Stage内包含如下方法：

方法	作用
getGlobal(name)	获取变量
setGlobal(name, value)	修改变量
getElement(name)	获取页面元素
runPublishEvent(name)	调用数据发布
getPageUrl(name, params)	获取页面Url地址
openPage(name, params)	打开页面
getParams(name)	获取页面Url参数
confirm(options)	弹出确认提示框
openModal(options)	打开模态框
closeModal()	关闭模态框
openDrawer(options)	打开侧边栏
closeDrawer()	关闭侧边栏
openDraggableModal(options)	打开可拖拽的模态框
closeDraggableModal()	关闭可拖拽的模态框
getAssetsRoot()	获取图片资源Url根路径
switchLeftSiderExpand()	切换左侧导航菜单栏显示状态
logout()	退出登录
getLoginState()	获取登录状态
getLoginUserName()	获取登录用户名称

3.5.4 数据源

数据源是组件获取数据的途径方式，数据源配置不仅在组件事件面板的修改变量中出现，在组件几乎所有属性都可进行数据源配置，数据源配置说明参考数据源配置。

3.5.5 说明

组件的说明功能是给应用设计人员提供的，可以填写页面交互逻辑说明和开发注意事项，这样开发人员在应用实施过程中看到，组件说明是用于应用开发的知识传递；该说明功能和黄色图标只在应用的预览态中显示，发布后是没有的。

3.6 常用组件

组件是页面内容的基本元素，页面开发大部分是对组件的设置，Jowo Studio提供了200多种各类组件，本节介绍一下使用较多的组件，其他组件的具体使用和组件开发，我们在《Jowo Studio组件使用与开发手册》中详细介绍。

3.6.1 背景

背景组件常用于页面背景、模块背景的填充，既可以纯色、渐变色作为背景，也可以添加图片作为背景。

1) 使用场景

在实际页面设计和开发中，由于背景的配置项比较丰富，用途不限于做背景使用，还可以做文本、按钮、图标等。

2) 基本用法

• 文字：可输入背景中的文字内容，支持主动换行。
• 背景：背景的填充有三种形式，纯色、渐变色和图片，其中纯色和渐变色只能二选一。

配置项	说明
背景颜色	从调色板中选择一种纯色作为背景颜色。
渐变色	可设置渐变色作为背景颜色。 包括设置起始颜色、结束颜色和渐变的方向角度。 比如角度0指的是起始颜色在下，结束颜色在上，从下往上渐变。 比如角度90指的是起始颜色在左，结束颜色在右，从左往右渐变。 比如角度180指的是起始颜色在上，结束颜色在下，从上往下渐变。 比如角度270指的是起始颜色在右，结束颜色在左，从右往左渐变。
背景图片	可选择一张图片作为背景。 包括图片所在的位置、尺寸、平铺方式（类似于Windows桌面墙纸的设置）和透明度。 透明度数值越低越透明，数值为0时完全透明。

• 边框：可设置背景的边框，包括边框颜色、宽度、类型等。

配置项	说明
边框宽度	设置边框的宽度，数值越大框线越粗，数值为0时表示不显示框线。
圆角类型	选择边框圆角类型，分为统一圆角和独立圆角两种。
边框圆角	边框圆角的数值越大，圆角的弧度越大，数值为0时即为直角。
边框颜色	从调色板中选择一种纯色作为边框颜色。
边框类型	选择边框的线条类型，分为实线、虚线和点状线三种。
边框位置	设置边框线的位置，分别为上边、右边、下边和左边四个方向。 如果上下左右四个方向都不设置框线时，则表示不显示框线。

• 换行：打开换行开关后，背景中的文字内容会根据背景的宽度进行强制换行，如果换一行后还是显示不全，则继续根据背景的宽度进行换行，依此类推。

  

• 提示文本：当鼠标悬浮在背景上时显示提示文本。

  

• 文字样式：可设置背景中的文字样式，包括字体、字号、颜色、对齐方式等。

配置项	说明
文字大小	设置文字的大小，屏幕显示的最小字号为12。
文字颜色	从调色板中选择一种纯色作为文字颜色。
文字粗细	设置文字的粗细。
文字类型	选择文字的字体，默认为平方。
文字对齐方式	可以设置文字的对齐方式，包括水平对齐和垂直对齐。
边距	边距即指文字到四条边框的距离，数值越小离边框越近，并且边距中输入的数值会在文字对齐方式的位置基础上进行偏移叠加。
行距	文字的行距离。
文字间距	文字的间距，数值越大，文字间的距离越大。
是否斜体	打开此开关时，将文字设为斜体。

文字对齐方式示例如下：

• 阴影：可设置背景的阴影样式，包括大小、颜色、类型、偏移距离等。

配置项	说明
阴影水平偏移	阴影水平偏移的方向和距离，数值为正数是向右偏移，数值为负数是向左偏移，数值越大则偏移越多。
阴影垂直偏移	阴影垂直偏移的方向和距离，数值为正数是向下偏移，数值为负数是向上偏移，数值越大则偏移越多。
阴影模糊距离	阴影的模糊距离，数值越大则阴影在视觉上越大且越模糊不清。
阴影大小	阴影的大小，数值越大则阴影范围越大。
阴影颜色	从调色板中选择一种纯色作为阴影颜色。
阴影类型	阴影的样式类型，分为内阴影和外阴影两种，内阴影是指整个阴影部分在四条边框内，外阴影是指整个阴影部分在四条边框外。

背景阴影效果如下：

• 悬浮背景色：如果设置了悬浮背景色，则当鼠标悬浮在背景上时，背景的颜色会发生改变，显示设置的悬浮背景颜色，常用于按钮类型的交互。

  

3.6.2 图标

图标组件用于页面中图标的添加，是语义化的矢量图形。Jowo Studio提供基础图标供用户选择使用，用户也可以使用自定义SVG。

1) 使用场景

进行应用开发时，使用图标可以引导指示应用的使用者，图文并茂、生动形象的帮助用户快速到达“目的地”，使得人机交互更容易。另外，还可以节省空间、增强界面美感，所以图标组件经常用于功能入口。

2) 基本用法

• 图标：可选择一个系统基础图标。

  

• 颜色：从调色板中选择一种纯色作为图标颜色。

  

• 自定义SVG：除了系统提供的基础图标以外，还可以自定义SVG图标。只需将SVG代码输入或粘贴于文本框中即可。

  

• 提示文本：当鼠标悬浮在图标上时显示提示文本。

  

3.6.3 图片

图片组件是显示图像的组件，支持位图和矢量图的显示，图片格式包括tif、jfif、bmp、pjp、apng、gif、svg、png、xbm、dib、jxl、jpeg、svgz、jpg、webp、ico、tif、pjpeg、avif。

1) 使用场景

页面中LOGO的添加、设备图片的展示等。

2) 基本用法

选择图片：从本地选择一张图片，选择图片后可更换或移除。

3.6.4 按钮

按钮是表单中不可缺少的对象，是应用中重要的触发事件的动作载体。Jowo Studio不仅可以创建标准按钮，还可以创建链接按钮、图标按钮和数字按钮，不同的按钮有不同的使用场景，并可以增加页面的美观效果。

1) 使用场景

进行应用开发时，使用图标可以引导指示应用的使用者，图文并茂、生动形象的帮助用户快速到达“目的地”，使得人机交互更容易。另外，还可以节省空间、增强界面美感，所以图标组件经常用于功能入口。

2) 基本用法

各种需要点击触发的响应事件，都可以使用按钮组件。

• 选择模式：可以选择按钮的模式，目前有按钮、链接按钮、图标按钮和数字按钮四种。样式参考如下：

按钮选择模式	说明
按钮	系统标准按钮，适用于大多数场景。
链接按钮	链接按钮没有背景色和边框，主要突出按钮标题中的文字，一般适用于网页中。
图标按钮	在标准按钮的基础上添加图标，可以是系统图标也可以是SVG。 如果此时清空按钮标题，则变为一个纯粹的图标按钮，图标按钮不占用太多屏幕空间且相对美观，多用于菜单或系统导航栏等功能中。
数字按钮	在标准按钮的基础上添加数字标识，一般用于需要显示条目数量的场景，比如TAB页签、导航栏等。

• 按钮标题：即按钮中显示的文字信息。

• 提示文本：当鼠标悬浮在按钮上时显示提示文本。

  

• 禁用：打开禁用开关后，按钮会置灰不可用，点击将无法触发事件效果。

  

• 文字：可设置按钮标题中的文字样式，包括字体、字号、颜色、对齐方式等。

• 背景：按钮的背景有两种形式，纯色和图片。

配置项	说明
背景颜色	从调色板中选择一种纯色作为按钮背景色。
背景图片	可选择一张图片作为背景。 包括图片所在的位置、尺寸、平铺方式（类似于Windows桌面墙纸的设置）。

• 按钮高亮色：如果设置了按钮高亮色，则当鼠标悬浮在按钮上时，按钮的颜色会发生改变，显示设置的按钮高亮颜色。

  

• 阴影：可设置按钮的阴影样式，包括大小、颜色、类型、偏移距离等。只有勾选（✔）配置项前的复选框后，该配置才会生效，配置方法参考阴影。

• 边框：可设置按钮的边框，包括边框颜色、宽度、类型等。只有勾选（✔）配置项前的复选框后，该配置才会生效，配置方法参考边框。

3.6.5 地图

地图组件对接了物联网平台数据分析模块的空间数据可视化服务，用于在地图上标识设备位置等重要信息，跟地图相关还有坐标拾取地图、轨迹下钻地图、下钻地图等类似的衍生组件，设置方法基本一致。

1) 使用场景

一般用于GIS、系统首页、大屏等页面的设备定位、人员定位、移动轨迹等。

2) 基本用法

• 地图配置：设置和地图相关的各项功能和样式配置。

配置项	说明
视图模式	分为2D和3D两种。 当设置为3D视图模式后，还可以对地图的俯仰角度进行配置。
主题	可以选择一种系统预设的地图配色主题。
初始中心	设置页面刚加载时，地图显示的中心点位置，即经纬度坐标。
缩放范围	设置地图缩放的最小级别和最大级别范围，最大可设置范围2~20。
缩放级别	设置页面刚加载时，地图显示的缩放级别。数值越大地图放大越多，最大可设置范围2~20。
旋转角度	设置地图的旋转角度。
显示元素	选择地图上显示的元素种类，分为地图背景、POI点、道路和建筑物四种。
地图缩放	打开此开关后，地图允许进行缩放操作。
拖拽平移	打开此开关后，地图允许进行拖拽平移操作。
地图可旋转	打开此开关后，地图允许进行旋转操作。
缓动特效	打开此开关后，地图在平移操作时，会有缓动特效。
平移动画	打开此开关后，地图在平移操作时，显示平移动画。
快捷键使用	打开此开关后，可以使用键盘快捷键对地图进行操作。
双击放大	打开此开关后，可以在地图上进行双击来放大地图。
滚轮缩放	打开此开关后，可以使用鼠标滚轮对地图进行缩放操作。
手势缩放	打开此开关后，可以使用手势对地图进行缩放操作。
地图事件	可以设置地图组件的事件效果，包括在加载完成、缩放更改、点击事件、双击事件或地图移动等场景下的事件动作。

• 图层配置：可以添加地图的图层配置，并可设置透明度、图层叠加顺序等配置项，以满足不同的业务场景需要，比如设置不同图层间的切换等。

图层类型	说明
卫星图层	是卫星将地面按一定的海拔高度扫描形成的地图图层。
路网图层	显示所有道路网络的地图图层。
实时交通图层	显示所有道路并用颜色区分实时交通状况的地图图层。
图片图层	可以自行添加一张图片作为一个单独图层。

• 覆盖物配置：地图覆盖物是标注在地图指定位置上的信息，包括点、线、信息窗口、图形等。

  

覆盖物类型	配置说明 阴影
点标记(多个)	设置地图上的点标记，比如建筑、标记物等。 点数据：配置格式为： return [[121.00539021395112,31.079936431355814]] 多个点的话则在内部“[ ]”间用“,”半角逗号隔开。 聚合：打开之后邻近的点可以聚合成一个带数字的标记，数字为聚合点的数量。 点标记属性包括： 标记位置：一般设置为，return record 图标的设置包括： 图标类型：默认图标和自定义图标，自定义图标比默认图标多了可以选择图标和定义图标的颜色，另外可以定义图标大小和图标偏移（注意：这里图标偏移设置的x轴、y轴偏移量是以像素为单位，所以偏移量不会随地图缩放，建议在经纬度上进行偏移计算）；其实自定义图标中的选择图标也是系统图标库中的图标，如果需要网上找的或自己画的图标，可以先找到这个图标的网络地址，然后在默认图标下的图标地址栏中填入，就可以实现自选的图标样式了。 文字提示：实现鼠标移到标点上时浮出文字提示框。 叠加顺序：实现多点层叠时的上下顺序，数字越大的在上面 缩放范围：指标记点随图层缩放的范围。 点击事件：实现在点击标点时的交互事件，比如弹窗、跳转 鼠标移入事件、鼠标移出事件：也是鼠标操作的交互事件。
海量点标记	设置批量样式一致的标记点，与标记点（多个）配置项基本一致，主要解决地图上需要标记几百上千的点位，比如光纤缆线上设置的虚拟测量点位，每隔1-2米一个点位，相当于10几公里的管线，点位就是海量的。
海量点标记(多样式)	相对海量标记点，增加了标记点多样式的配置支持，实现地图上多条管线点位的区分。
信息窗体(单个)	配置信息窗口，可以对地图中的内容加以说明。
矢量图形(多个)	矢量图形可以设置折线、多边形和其他标准图形，折线可用于类似管道、隧道、道路等类型的线段或者是移动轨迹路径等，多边形可用于电子围栏或者区域边界等。 矢量图数据：配置格式为： return [[[121.00539021395112,31.079936431355814]]] 注意有三层括号，最里面一层是折点，中间一层是折线，可以配置多条折线

• 插件配置：可配置多条轨迹回放的插件。

配置项	说明
轨迹数据	和矢量图数据配置格式一样
矢量路径	一般设置为，return record
轨迹配置	默认轨迹和通过轨迹配置，默认轨迹可以看做计划轨迹或者预设轨迹，比如原来计划走这条路线，通过轨迹就是实际轨迹
标记配置	相当于可以在轨迹上打点，配置图标、文字提示、标记的位置偏移、轨迹动画； 轨迹动画：可配置角度自适应（意思是车头随路径转动） 循环播放：就是路径回放可以重复播放； 每段速度：可以设置每段路径回放时的移动速度 每段时长：可以设置每段路径回放时的移动时长

3.6.6 文本

文本组件提供文本的显示能力，支持配置文本内容、字体颜色、字体大小等。

1) 使用场景 适合所有文字信息展示的场景，由于文字组件没有背景色和边框，可以直接对字体设置阴影，所以有时可以做出比较简单的艺术字效果。

2) 基本用法

• 文字内容：可输入文本组件中的文字内容。

  

• 自动折行：此开关默认打开，打开时文本组件中的文字内容会根据文本组件的宽度进行强制换行，如果换一行后还是显示不全，则继续根据文本组件的宽度进行换行，依此类推。

  当关闭自动折行开关后，系统会出现两个新配置项：【是否省略】和【开启提示框】。

  是否省略：当文本组件中的文字内容在一行中无法显示全时，将超出组件边界部分截断并用...表示。

  开启提示框：鼠标悬浮在文本组件上时，会将文字内容用气泡提示的方式显示。

  

• 提示文本：当鼠标悬浮在文本组件上时显示提示文本。请注意，提示文本和上一段介绍的开启提示框在样式上的区别。

  

3) 文字：可参考文字章节，利用文字的阴影等配置项，可以做出一些简单的艺术字效果，示例如下：

• 跑马灯效果：打开此开关后，文字内容会在文本组件中从左到右循环动画展示，并可以对动画的速度、延迟、跑马灯渐变色效果等配置项做出调整。只有勾选（✔）配置项前的复选框后，该配置才会生效。

配置项	说明
动画速度	文字从左到右循环动画的速度。
动画延迟（秒）	在文字开始循环动画前停留的时间长度，单位为秒。 如果数值为0，则页面加载时文字立刻开始循环动画。
渐变	渐变颜色	给跑马灯区域添加渐变色效果。 从调色板中选择一种纯色作为渐变色的起始颜色，渐变色的结束颜色默认为白色。 渐变色从文本组件的两端起始，往中间过渡，直至结束。
	渐变宽度	渐变起始颜色的对应宽度，数值为0时起始颜色无宽度（不显示），随着数值越大组件两端的起始颜色越宽，当数值大到一定程度后，起始颜色会盖过结束颜色，使得整个跑马灯区域都是一种颜色（起始颜色）。

• 动态高度：设置组件的高度随着组件内容多少的变化而变化，并可以设置其最小高度和最大高度。

3.6.7 重复列表

该组件支持按照相同的样式模板，讲数据源中不同数据对象以列表的方式逐条展示。例如，手机淘宝页面中使用相同的样式模板展示不同商品的图片、价格和销售详情等信息。

1) 使用场景

大量结构相同的数据并用相同样式模板展示的表单列表。

2) 基本用法

• 数据：可以设置重复列表的数据来源，支持静态数据、变量、组件值、设备测点等多种形式。其中静态数据的展示方式可以供产品设计原型时制作示例数据使用。
• 组件块：可以选择某个组件块设置为组件中的重复样式模板进行展示。
• 栅格化：打开此开关后，可设置重复列表分列显示。

配置项	说明
每行列数	设置每行的列数，分别为1、2、3、4、6、8、12等几种。
每列间隔	设置列与列之间的间隔距离，数值越大间隔越大。

• 分页：设置每页的数据条数。
• 阴影：可设置背景的阴影样式，包括颜色、偏移距离等。
• 展示列边框：打开此开关后，组件中重重复样式区块内容会显示其边框。
• 列边框：可设置列边框的样式，包括边框颜色、宽度、类型等。
• 列表行间距-上：可以设置组件中重复样式区块内容中的上内边距，数值越大边距越大。
• 列表行间距-下：可以设置组件中重复样式区块内容中的下内边距，数值越大边距越大。
• 边框：可设置整个组件的边框，包括边框颜色、宽度、类型等。
• 内边距：设置组件中重复样式区块内容距离组件边框的距离。内边距类型分为统一设置和分别设置两种形式。
• 背景颜色：从调色板中选择一种纯色作为组件的背景颜色。
• 动态高度：设置组件的高度随着组件内容多少的变化而变化，并可以设置其最小高度和最大高度。

3.6.8 数据表格

图标组件用于页面中图标的添加，是语义化的矢量图形。Jowo Studio提供基础图标供用户选择使用，用户也可以使用自定义SVG。

1) 使用场景

进行应用开发时，使用图标可以引导指示应用的使用者，图文并茂、生动形象的帮助用户快速到达“目的地”，使得人机交互更容易。另外，还可以节省空间、增强界面美感，所以图标组件经常用于功能入口。

2) 基本用法

• 列配置：维护表格的列，对每列的配置项进行设置。

配置项	说明
标签	每个标签代表一页，可以通过“新增”按钮创建新的列，也可以通过标签右侧的“×”号删除标签，另外可以拖拽标签进行列前后排序，规则就是将一个标签拖到另外一个标签的上面，就可排到这个标签的前面了，所有有类似标签的组件配置项的地方都是支持这种拖拽排序的方式。
标题	设置列的标题，即列的表头名称。
属性名	该列的key值。
列固定	可以设置该列的固定形式，分为不固定、左侧固定和右侧固定三种。 当设置为左侧固定后，该列会自动置放于表格的左侧位置。 当设置为右侧固定后，该列会自动置放于表格的右侧位置。
对齐方式	设置表格每个单元格的对齐方式，分为左对齐、居中、右对齐三种。
固定宽度	可以设置该列的宽度，数值越大越宽，该配置项的优先级高于【5）通用样式】中的配置项。
动态背景色	可以用代码的方式动态设置该列的背景颜色。只有勾选
允许换行	打开此开关后，该列的单元格内容如果过长则自动换行。 关闭此开关后，该列的单元格内容如果过长不会换行，超出部分会用...省略号表示。
渲染类型	渲染类型分为默认值、HTML模板、组件渲染和HTML模板(旧版)几种形式，一般使用默认值，对于一些特殊的样式要求则可以用HTML模板和组件渲染来实现。

几种渲染类型效果如下所示：

• HTML模板一般用于个性化的文本、按钮等效果。

• 组件渲染一般用于表格操作列的按钮、开关或自定义组件等效果。

  

• 表格数据：可以设置表格的数据来源，支持静态数据、变量、组件值、设备测点等多种形式。其中静态数据的展示方式可以供产品设计原型时制作示例数据使用，具体的写法和展示内容如下所示：

  

  

• 主属性Key：可以设置表格的主属性Key值。

• 行选择器：打开此开关后，在表格的第一列会增加行选择列，支持多行选择操作，格式如下：

  

• 通用样式：可以设置表格的通用样式，比如行高、列宽、边框颜色、字体大小等，这些配置项部分也可以在列配置、表头样式或表身样式中设置，且优先级会高于通用样式中的设置。

配置项	说明
行高	设置表格的行高，数值越大越高。
基础列宽	设置表格的列宽，数值越大越宽。
边框颜色	从调色板中选择一种纯色作为表格的边框颜色。
字体大小	设置表格文字的大小，屏幕显示的最小字号为12。
颜色主题	分为明亮和暗黑两种，明亮主题适用于浅色背景的页面，暗黑主题适用于深色背景的页面。
对齐方式	设置表格每个单元格的对齐方式，分为左对齐、居中、右对齐三种。

• 表头样式：可以设置表头的样式，其中字体大小和行高的配置项优先级高于通用样式。

配置项	说明
显示表头	只有打开此开关后，表头行才会显示，否则不显示。
背景色	从调色板中选择一种纯色作为表头的背景颜色。
字体加粗	打开此开关后，表头字体变为粗体。
字体颜色	从调色板中选择一种纯色作为表头的字体颜色。
字体大小	设置表头文字的大小，屏幕显示的最小字号为12。
行高	设置表头的行高。

• 表身样式：可以设置表身的样式。

配置项	说明
奇数行背景色	从调色板中选择一种纯色作为表格中奇数行的背景颜色。
偶数行背景色	从调色板中选择一种纯色作为表格中偶数行的背景颜色。
高亮行背景色	从调色板中选择一种纯色作为表格中高亮行的背景颜色。
字体加粗	打开此开关后，表身字体变为粗体。
字体颜色	从调色板中选择一种纯色作为表身的字体颜色。

有关表格的样式配置项参考如下：

• 动态高度：打开此开关后，组件的高度随着组件内容多少的变化而变化。

• 扩展表头： 利用此功能可以做出较为复杂的表头样式效果，比如复合表头，方法参考如下：

  

  在配置项中点击扩展表头边上的配置数据源按钮。

  

  在弹出的扩展表头-数据源配置弹窗中输入复合表头的数据。

  

  数据内容格式如下：

  return [
  
  [
  
  {
  
  "text": "聚合列A1",
  
  "colStart": 1,
  
  "colTake": 3,
  
  },
  
  {
  
  "text": "聚合列A2",
  
  "colStart": 4,
  
  "colTake": 2,
  
  "rowTake": 2
  
  }
  
  ],
  
  [
  
  {
  
  "text": "聚合列B1",
  
  "colStart": 2,
  
  "colTake": 2,
  
  }
  
  ]
  
  ]
  

  数据格式说明如下：

  上一节的数据中共有三个单元格的数据，其中两个在第一行，一个在第二行。下图中圈出来的单元格即为数据所对应的位置。你只需要配置必要的数据，表格将自动进行排版。

  

  ”聚合列A1”单元格的起始列为第二列，所以colStart设置为1（代码中是从0开始记数）。占用了三列，colTake设置为3。占用了一行，rowTake应该设置为1，但默认值为1，所以可以省略。

  数据内容是一个二维数组，外侧数组存储表格行的序号，内侧数组存储单元格的配置信息。

  所有单元格统一以最左侧最上方的格子作为基础定位依据。一个占用了N行的单元格，它的行序号为最上方那一行的序号。一个占用了N列的单元格，它的列序号为最左侧那一列的序号。

• 扩展表格（顶部追加）：可以用低代码方式在表格数据行第一行开始追加一些统计行或其他数据项。

• 扩展表格（底部追加）：可以用低代码方式在表格数据行最后追加一些统计行或其他数据项。

• 扩展表格（底部固定）：可以用低代码方式在表格数据行每页底部固定加一些统计行或其他数据项。

3.6.9 定制表单

定制表单包含了多种基础表单组件，通过配置的方式就可快速的搭建表单编辑项，支持简单的排版功能，并可以作为重复表单使用，还有每个输入项的显隐控制配置等。

1) 使用场景

定制表单多用于需要批量维护一组相同表单项的数据，组件高度大小随着数据内容的多少而变化。

2) 基本用法

• 表单项配置：配置定制表单中的表单项，包括表单项的控件类型、样式和一些简单的排版功能。

表单项	说明
文本输入框	可以输入任意信息。
数值输入框	只能输入数值，多用于输入年龄、数量等业务场景。
选择器	下拉选择框，可以配置下拉项内容。
树选择	树型下拉选择框，是结构化的下拉项数据。
文件上传	支持文件上传的控件。
日期选择框	日期选择框。
时间选择框	时间选择框。
单选框	单选组件，可以配置单选项。
多选框	多选组件，可以配置多选项。
级联选择	结构化的下拉选择框，支持选择多级且每级有上下关联关系的数据。
图片上传	支持图片上传的控件。
文本域	支持多行文本输入，多用于备注、详细说明等业务场景。

• 默认表单数据：可以设置动态定制表单的默认数据。

• 单行显示个数：设置每行显示的控件数量，最少1个，最多6个。

• 行间隔：设置行间隔大小，数值越大间隔越大。

• 列间隔：设置列间隔大小，数值越大间隔越大。

  有关行间隔和列间隔的样式参考如下：

  

• 颜色主题：分为明亮和暗黑两种，明亮主题适用于浅色背景的页面，暗黑主题适用于深色背景的页面。

• 标签样式：

配置项	说明
显示位置	可以选择控件的标签位置，一般在左侧或上方。
右侧间距	设置标签和控件的间距。
字体大小	设置文字的大小，屏幕显示的最小字号为12。
字体粗细	设置文字的粗细。
字体颜色	从调色板中选择一种纯色作为文字颜色。
标签宽度	控件标签的宽度设置。
显示冒号	标签后是否显示冒号。
必填标记颜色	设置为必填的控件标签前会添加 * ，这里可以设置 * 的颜色。

• 控件样式：

配置项	说明
控件尺寸	控件的尺寸大小，有小、默认、大三种选择。
字体大小	设置文字的大小，屏幕显示的最小字号为12。

• 重复区块：对于要维护批量的具有相同表单项的数据，可以使用重复区块。

  打开重复区块开关后，可以对区块样式进行配置：

配置项	说明
背景颜色	从调色板中选择一种纯色作为文字颜色。
边框	边框宽度	设置边框的宽度，数值越大框线越粗，数值为0时表示不显示框线。
	圆角类型	选择边框圆角类型，分为统一圆角和独立圆角两种。
	边框圆角	边框圆角的数值越大，圆角的弧度越大，数值为0时即为直角。
	边框颜色	从调色板中选择一种纯色作为边框颜色。
	边框类型	选择边框的线条类型，分为实线、虚线和点状线三种。
	边框位置	设置边框线的位置，分别为上边、右边、下边和左边四个方向。 如果上下左右四个方向都不设置框线时，则表示不显示框线。
内边距	内边距类型	设置定制表单的内边距类型，分为统一设置和分别设置两种。
	边距	设置内边距大小，数值越大距离越大。
外边距	上	设置上方的外边距大小，数值越大距离越大。
	下	设置下方的外边距大小，数值越大距离越大。
删除图标	选择图标	为删除图标选择一个系统基础图标。
	图标颜色	从调色板中选择一种纯色作为删除图标的颜色。
	图标位置	设置删除图标在区块中所在的位置，分别是距离区块上边距和右边距的距离。
	删除确认	勾选✔此配置项后，点击删除图标时会弹出确认提示框，并可以在【文本内容】配置项中维护删除确认提示的内容。
新增按钮	初始数据	设置新增按钮的初始数据。
	按钮文本	新增按钮的名称。
	字体颜色	从调色板中选择一种纯色作为文字颜色。
	字体大小	设置文字的大小，屏幕显示的最小字号为12。

3.6.10 树

树组件是递归类组件的典型代表，它常用于文件夹、组织架构、设备分类、行政地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

1) 使用场景

需要进行树形结构展示和节点选择的页面元素。

2) 基本用法

• 数据结构：树组件的数据可以通过数据结构配置。

配置项	说明
内容	该节点的显示名称。
key	该节点的key值。
禁用	打开此开关时，该节点不可选中。
子节点	该节点下对应的子节点配置。 子节点下可以继续添加新的子节点。

部分配置项效果如下所示：

• 是否禁用：打开此开关后，树组件会置灰，虽然可以展开全部节点，但是无法选中任意一个节点并触发事件效果。

  

• 是否添加复选框：打开此开关后，会在树组件所有节点前添加复选框并支持多选，同时会增加一个配置项【父子节点选中状态不再关联】，详细说明如下：

配置项	说明
父子节点选中状态不再关联	此开关关闭时，选中某一个子节点后，与之关联的父节点也会被选中。反之，选择某一个父节点后，其下关联的所有子节点都会被选中。 此开关打开时，选中某一个子节点后，与之关联的父节点不会被选中。即所有的父节点或子节点都是独立选中的。

• 选中的keys：可以用代码的形式实现树组件加载时即选中某一个或某一些节点的效果，格式如下：

场景	代码格式
选中某一个节点	return "节点key"
选中某些节点	return ["节点一key","节点二key","节点三key"]

• 是否展开全部节点：打开此开关后，在页面加载时该树的节点会处于全部展开状态。

  

• 是否显示连接线：打开此开关后，树组件中各节点间会添加连接线样式，使得各节点层次可读性更加清晰。

  

• 节点操作始终显示

• 打开此开关后，树组件中所有节点配置的额外操作始终在页面中显示，方便点击操作，但会影响一些页面美观度。

• 关闭此开关后，只有当鼠标悬浮到树组件中某行节点时，才会显示其额外操作，会给用户操作带来少许的麻烦，但页面更加简洁。

  

• 节点额外操作：可以统一设置树组件中每个节点的额外操作，一般会配置些按钮，用来点击后触发一些事件效果。额外操作有组件渲染和HTML模板两种实现方式。

配置项	说明
组件渲染	标题	组件标题名称，只是部分的标识，不作为页面上的展示名称。
	组件	有按钮、开关、单选框、图标按钮和自定义五种形式。
	组件配置	根据上面选择的不同的组件有不同的配置项，可以选择组件的内容、大小、是否禁用、样式等。
	事件	配置点击组件后触发的事件效果。
HTML模板	用HTML代码来实现额外操作。

• 样式：设置组件中的文字颜色。

配置项	说明
文字颜色	从调色板中选择一种纯色作为文字颜色。

• 动态高度：设置组件的高度随着组件内容多少的变化而变化，并可以设置其最小高度和最大高度。

3.6.11 基础Echarts

1) ECharts是一款基于JavaScript的数据可视化图表库，兼容当前绝大部分浏览器，提供直观、生动、可交互、可个性化定制的数据可视化图表。主要常用的图表有折线图、柱状图、饼图、散点图、K线图等。

2) 使用场景统计报表页面、大屏页面等。

3) 基本用法

• 数据：在编辑器中输入ECharts代码，点击确定后，可直接看到图表的展示效果。ECharts代码建议在其他实例网站上编辑调整好，然后自己拷贝进来。

  

  

• 事件：设置ECharts图表的事件效果。

  3.6.12 测点走势

Jowo Studio平台提供了展示设备测点趋势的集成化图表工具，直接拖拽并对数据源和样式做一定的配置就可满足大多数统计分析的业务场景。

1) 使用场景

测点数据趋势分析。

2) 基本用法

• 时序数据：设置测点走势图中的数据来源。

配置项	说明
时间窗口	选择需要统计的时间范围数据，包括实时数据或历史数据。
时序数据源	选择需要统计的场站-设备-测点数据源。

• 标记：可设置折线图中各标记点的样式，包括空心圆、实心圆、正方形等。
• 标记大小：可设置折线图中各标记点的大小，数值越大标记越大。
• 线条宽度：可设置折线的线条宽度，数值越大线条越宽。
• 颜色池：可设置图表中各条折线的颜色，可以从调色板中新增自定义颜色至颜色池中。
• 分隔段数：可设置图表的分割段数。
• 平滑曲线：打开此开关后，折线中各标记之间的连线变得平滑过渡。

1. 绑定动态数据源

• 测点走势组件的“时序数据”配置项现在支持绑定数据源，如下图所示。

• 数据源内容示例，如下图所示。代码文本内容也会贴在下方。

const deviceId = Stage.getGlobal("deviceId")

return {

"datasources": [

{

"sourceId": \`device-\${deviceId}\`,

"name": "笔记本",

"type": "devicePoint",

"devicePoint": {

"stationId": "dev_95ac6df5-44e7-434e-a4dd-8412c2e3689f",

"deviceId": deviceId,

"dataItems": [

{

"itemId": \`item1-\${deviceId}\`,

"pointAlias": "温度",

"pointName": "temp",

"useCustomTitle": false,

"customTitle": "",

"usePostProcessing": true,

"postFuncBody": "return value \* 10",

"units": "度",

"decimals": 2,

"styleProperties": {}

},

{

"itemId": \`item2-\${deviceId}\`,

"pointAlias": "CPU使用率",

"pointName": "cpu",

"useCustomTitle": false,

"customTitle": "",

"usePostProcessing": false,

"postFuncBody": "",

"units": "%",

"decimals": 2,

"styleProperties": {}

}

]

}

}

],

"timeWindow": {

"timeType": "realtime",

"realtime": {

"timeRangeType": "last",

"timewindowMs": 300000,

"quickInterval": "CURRENT_DAY",

"quickIntervalSoFar": true,

"interval": 5000

},

"history": {

"timeRangeType": "last",

"timewindowMs": 86400000,

"interval": 600000,

"fixedTimewindow": {},

"quickInterval": "CURRENT_DAY",

"quickIntervalSoFar": true

},

"aggregationType": "mean"

}

}

注意，绑定的数据源并不是最终数据，而是时序数据的描述信息，包含时间窗口以及数据来源的配置。Studio底层将会自动根据配置去加载对应的数据。

数据源要求的数据格式与手动属性配置的格式是一致的，所以建议实际开发时，先手动进行时序数据的配置。然后使用快捷键Ctrl+C复制该组件，就可以得到该组件的配置数据（JSON格式），将其粘贴到代码编辑器(如VS Code)中，从中可以获取到相应时序数据的数据内容，如下图所示。接下来基于这份初始数据进行二次修改，进行动态数据的注入。

3.7 组件块

组件块相当于一个独立的面板容器，里面可以摆放组件或者其他组件块，组件块可以被调用显示，也可以放在页面中重复使用，修改了组件块内容，所有放了该组件块的页面都会变动。

我们在页面设计和开发中，很多地方都会运用到组件块：

1) 前面介绍的事件里面的弹出模态框、侧边栏、可拖拽模态框；
2) 重复列表组件，用于卡片式的列表，单个卡片的样式模板就可以用组件块实现
3) 轮播组件，轮播内容里面也可以用组件块；
4) 智能切换组件，这个常用于标签的内容切换；
5) 组件块容器，这个跟重复列表类似，但组件块是非重复的，可以添加不同内容的组件块；

点击左侧功能标签按钮，切换到组件块列表，点击列表下面的“新建组件块”按钮，输入组件块名称，点确定后就新建了一个组件块，这时就进入了组件块编辑界面。另外还有一种方式，在页面编辑窗口中，选中多个组件，然后右键弹出菜单的最下面有个“创建组件块”的功能，点击后就能将选中的组件转成组件块，如新建组件块一样填写组件块名称，点确定进入到组件块编辑页面；已创建的组件块在组件块列表中，通过右键菜单的编辑功能，也能再进入到组件块编辑界面。

组件块编辑界面与页面编辑器界面类似，不过左侧变成了组件列表、组件块列表和组件块内的元素列表，右侧配置面板在不选中组件时是组件块的属性配置，中间编辑窗口右上角是组件块的操作按钮，每次编辑完成后要注意保持，返回前也可以预览下组件的交互效果，确任好后就可以点“返回”按钮，返回到页面编辑，如果你在编辑组件块时又进入了另外一个组件块的编辑界面，这时返回就是返回到上一个组件块的编辑界面。

3.8 我的素材

素材是可在租户内跨应用使用的，在页面编辑中，可以选中多个组件，通过右键菜单下面的“添加到我的素材”功能，创建素材，素材可以创建文件夹来进行管理，这里注意一下，组件块目前还不能跨应用使用，添加素材时尽量避免选中。

添加到我的素材后，在编辑其他应用时就能看到，直接拖拽出来就可以使用，会保留原来组件配置的属性和样式。

3.9 操作区

操作区是页面编辑的主要区域，下面介绍一下主要功能和操作技巧：

1) 标尺：在操作区窗口的上边和坐边，有两条刻度尺，单位是像素px，原点在页面的左上角，当鼠标移到刻度尺上时，页面上会出现一条红色的标线，标线的作用是为了在拖拽或移动组件时作为标准参考，找到合适位置后点击一下鼠标，标线就会固定在页面上，这时就可以操作组件布局了；如果要移动标线，就将鼠标移动到标线和刻度尺交叉的位置，鼠标手势会变成双箭头“”“”，这时只要上下或左右拖动标线即可；如果要删除标线，同上方法，鼠标箭头光标旁边有个“×”符号，点击一下就可以删除标线。

2) 辅助线：用来标识组件的位置，例如选中一个或多个组件后，按住“Alt”键，就会出现4条距离标注辅助线，就是组件4边距离页面4边的距离，如果选中组件后，再将鼠标指向另外一个组件，此时按住“Alt”，就会出现1条两个组件间距的辅助线，此功能在做组件位置调整时是很常用的。

3) 拖拽辅助：组件复制除了Ctrl+C和右键菜单复制外，还可以按住Alt键拖拽，就可以复制一个出来，此时按住Alt不松手，再按住shift键，就可以在水平或垂直方向进行吸附平移。
4) 视图缩放：除了在顶部工具栏的缩放工具按钮对页面进行视图缩放外，还可以按住Ctrl键同时滚动鼠标滑轮进行缩放；视图复原，点击两条标尺的相交位置就可让视图还原到整体最大可视的状态。

4.1 导航布局

点击左侧功能标签的“布局导航”按钮，进入配置弹框页面，导航布局主要是对应用的左侧导航菜单、顶部导航栏（主要是应用logo、名称）、右侧边栏（主要是消息列表）进行配置。

4.1.1 左侧导航

1) 导航菜单：点击“新增菜单项”，先创建一级菜单，一级菜单通常是目录，需要再点右侧的“＋”添加二级菜单，然后点击“”,打开菜单配置；

菜单配置：链接类型可以选自定义URL，但一般选择当前应用页面，然后选择链接页面，下面可配置URL参数；

菜单图标：每个菜单项都可配置图标，图标可选择系统提供的图标，也可以自定义SVG，输入SVG代码即可；

子页面：是指从当前菜单页面，比如设备列表页面，打开设备详情页面，设备详情就是子页面，配置好之后，当打开子页面后，菜单栏还是会停留在设备列表这个菜单项高亮，如果没有配置子页面，跳转到设备详情时，菜单高亮就会消失，不会选中任何菜单；子页面在九物云新权限体系下是很重要，如果有子页面的菜单项一定要配置全，否则未被配置的子页面会被权限验证为无权限访问。

2) 菜单样式：可配置左侧菜单栏的背景颜色（默认，非选中），菜单项高亮颜色（选中状态），菜单文字的默认和选中颜色以及字体大小；另外菜单工支持五级，每级菜单样式都可以单独调整，如果不勾选下面的几级菜单样式，就会统一用上面的样式；

缩进量：是指菜单距上级左边缘的距离，这个偏移量是所有层级统一的；

额外偏移量：在每个层级菜单样式配置上再额外偏移，可以填正负数，就是可以左右偏移；

只展开当前父级菜单：开启后的效果就是展开一个一级菜单，就会收缩之前打开的一级菜单；

3) 菜单过滤：有时候想要临时隐藏部分菜单，但又不想删除菜单时可以使用“菜单过滤”模块来临时移除不想显示的菜单。这是一个方法，参数是菜单列表，要求返回值是过滤后的菜单列表。

4.1.2 网站顶部

1) 标题样式：包括背景颜色、网站logo、自定义标题文字、标题字体的颜色和大小；
2) 菜单样式：需要开启显示导航菜单，可配置菜单字体颜色和大小，此配置适合只显示头部导航的页面布局；
3) 用户下拉菜单：用于配置点击导航栏右侧的“”图标按钮后的下拉菜单内容，

4.1.3 右侧边栏

打开启用右侧边栏开关后，显示相关配置项，常用来配置消息列表侧边栏，包括侧边栏的标题、选择组件块、渲染模式（固定模式是指模态框的高度是固定的，动态模式是指模态框的高度是随内容的高度自动调整）、还可以自定义图标，如果不打开这个配置项，默认是图标是“”。

4.2 应用设置

4.2.1 基本信息

1) 基本信息：包括应用名称、应用描述、屏幕尺寸、应用封面图（用于在应用管理页面展示，建议尺寸395×176px）；
2) 布局风格：“默认风格”是顶部导航左右通栏的方式，网站logo和标题在导航栏上的；“风格2”是左侧菜单栏为上下通栏的方式，网站logo和标题在菜单栏上；

3) 全局配置：应用全局的配置可以在此处设置。除了简单的文本配置之外，现在也支持配置复杂数据，但要求格式为JSON格式。如下图所示。

全局配置内的内容可以通过绑定数据源，从JowoConfig中获取并使用。如下图所示。

4.2.2 登录页面

用于配置自定义登录页面的样式，登录页面标题、标题颜色、标题上下边距、背景图片（建议jpg格式，分辨率大于应用页面尺寸）、logo图片（建议svg或png格式，logo的背景色透明）、子标题文字的内容大小和颜色（子标题在主标题下面，文字可以比主标题小一些）、页脚文字的内容大小和颜色（页脚一般放公司名称等附属信息）。

4.2.3 多屏幕适配

用于配置一个应用同时适应不同分辨率下的页面布局，比如我们访问一个应用的页面，在电脑上看和在手机上看都能适配，所以我们在页面开发的时候，就要在一个页面的两种分辨率窗口下配置各组件不同的尺寸和布局。

添加一个屏幕，设置标题、尺寸、自定义匹配方法，添加之后就能在编辑窗口页面左上角有个“”图标按钮，点开之后就能选择刚创建的屏幕尺寸；然后页面左上角就多出一个屏幕标签，这样就可以在不同屏幕下切换，进行页面设计和开发。

可以通过“自定义匹配方法”，判断屏幕的宽度或者浏览器的userAgent来决定使用哪个屏幕。如下图所示。

4.2.4 消息通知

用于配置全局消息弹窗，比如告警通知，还可以配置声效。

1) WebSocket连接地址：填写WebSocket的接口地址

2) 内容组件块：消息区块的显示内容，此处直接使用组件块。数据将通过record变量传递给组件块。
3) 弹出位置：消息区块弹出的位置。
4) 显示时长：消息区块显示的时长，超过这个时间将会自动隐藏。
5) 接收数据的处理方法：服务端返回来的数据可以在此处进行统一的修改处理。

6) 连接建立时的回调方法：常规Websocket连接的生命周期回调方法，可以增加打印日志等等操作，一般不需要配置。
7) 连接关闭时的回调方法：常规Websocket连接的生命周期回调方法，可以增加打印日志等等操作，一般不需要配置。
8) 通知面板点击事件：可以在此处统一设置点击事件，但更推荐在内容组件块中设置点击事件，那样会更加灵活。

4.2.5 环境定制

Studio的应用可以很方便的进行分发，也就是在一个环境下开发的应用，可以很方便的上传到另一个环境中。此时由于环境发生了变化，导致配置项需要修改。为了保持应用本体数据的稳定，Studio提供了“环境定制”模块，用于对应用默认配置的覆盖。这部分配置的数据将不会作为应用配置被分发，备份应用时也不会包含这些数据。目前仅提供 “全局配置覆盖”功能。

5 开发指南

本章将介绍在Jowo Studio平台上进行应用开发的一般流程。

5.1 概述

软件应用的开发应遵循软件工程的一般方法和路径，在此基础上Jowo Studio平台提供了低代码和零代码的应用开发方式，以提升开发效率和降低开发成本为目的。

5.2 需求定义

需求定义是软件应用开发最重要的前置工作，需求定义的结果就是构建数据对象（人机料法环测）的模型，需求定义也包括了一般的路径和方法，包括需求调研、需求分析、需求定义、开发需求几个阶段：

1) 需求调研：首先是需求范围的确认，包括现有业务和未来扩展业务场景下涉及的所有用户、业务流程、业务内容、业务对象，包括服务者、管理者和客户方几大方面，调研、收集和整理产品运营的需求，业务人员的需求、决策者需求、市场需求和战略需求；另外一方面要做的是业务场景调研和资料的收集，资料包括了业务过程表单、技术资料、市场资料等等；工业场景的需求调研主要是对“人、机、料、法、环、测”各环节的调研和资料收集。 2) 需求分析：简单需求分析是从业务场景和用户角色2个不同的维度去分析什么人（角色）在什么时间什么地点（场景）要做什么事情（行为/事件），做这个事情的目的和动机是什么，用户的期望是什么；

当我们把所有角色、场景和行为事件放在一张图上，并加以过程导线，就形成了基于业务的流程图，这是整个软件应用开发的基本逻辑。

3) 需求定义：

• 基于需求分析基础上，从工业领域6要素“人、机、料、法、环、测”角度出发，首先对软件工程重点关注的人、机进行抽象，定义组织和角色模型（人）、设备模型和场站模型（机）等；
• 定义业务模型（法），即详细业务流程，每个环节所涉及的表单、数据和业务逻辑等;业务模型是逻辑最为复杂的部分，需要将各环节的各种情况充分考虑并逻辑自洽；
  
• 数采方案（测）定义，需要考虑采集仪器、通讯协议和组网方案；

4) 开发需求：产品设计人员参与并提供产品需求文档（PRD），包括需求定义的各部分、产品功能和信息结构、业务流程、功能详细说明，最好能提供页面原型和交互逻辑。开发需求需要进行多轮的评审和确认，尽量减少开发中的需求变更。

5.3 应用设计

产品设计人员可以在Jowo Studio上直接开始应用的设计，设计的页面即为后续的开发页面，SaaD设计即软件。

5.3.1 数据建模

在设计和开发之前，在平台上先建立一个业务对象的数据模型，即数据建模，包括组织、用户组、角色、权限、设备模型和场站模型等，这些都可以通过标准应用或在管理中心中先配置好，配置说明可参考《九物互联_标准应用使用说明V1.0》。

5.3.2 页面设计

数据建模和应用创建好之后，就可以编辑应用进入到页面设计阶段。

1) 页面及菜单结构：开始设计页面之前，应该要有应用的模块和结构概念，这样在后面每个页面详细设计的时候更有整体或逻辑感，所以先创建页面目录结构，包括页面文件夹和页面，在创建页面时需要考虑创建的页面类型，这要看页面的主要功能是什么，比如首页是大屏页面，那么这种布局和内容比较复杂的页面应该采用自定义页面，如果有些页面功能比较单一，比如报修记录，就可以采用表单页面，但目前的大多数应用的页面功能和逻辑都比较复杂，所以自定义页面会占大多数；

2) 页面风格和布局：页面风格是指应用的整体界面风格，分为亮色和暗色2个大的风格方向，然后就是菜单栏、顶部导航栏以及页面底色的配色；

亮色系风格参考 暗色系风格参考

• 配色风格：亮色系的左侧菜单栏建议为暗色，比如深灰、深蓝等，导航栏可以为白色或蓝等亮色，页面底色可以为白色或浅灰色；暗色系的菜单栏和导航栏的颜色比较统一，页面背景也为暗色或深色调图片；大面的风格确定好后，就是主色调统一，主色调是整个页面的点睛之笔，也决定了亮黑风格方向下的分支风格，主色调包括了主按钮背景色、菜单栏高亮背景色、图标颜色、链接文字颜色，这些都需统一到主色调颜色。
• 页面布局：页面布局是指页面功能区块的划分，页面布局是根据页面功能来设计的，但类似功能的页面布局应统一，这样使用体验才不会觉得混乱，页面统一布局可参考下图:

3) 页面详细设计：根据页面功能和内容，选择合适的组件进行布局、样式、静态数据配置和交互设计；

• 组件布局：首先选择合适的组件拖入到页面中，比如标题用文本组件，一般表格可用数据表格，按钮就用按钮组件…在前面的常用组件中已经介绍了常用场景；组件拖入后先进行位置设置，组件的位置布局要强调的2点是对齐和统一原则，比如上面的列表页面1图画中的标题就要与表格左对齐，按钮需要跟表格右边对齐，另外统一原则是指大小、字体、颜色、间距等样式统一，比如上面的列表页面1图画中的表格左右的间距（表格左边距左侧导航栏、表格右边距右边缘）统一，这个统一是整个应用的；
• 组件样式：组件样式的配置方法可参考组件配置，组件样式也需强调统一原则，也就是各页面同功能的组件样式要一致，为保证统一性，我们常用组件复制和页面复制来操作，有时也需用到stage copy功能（Ctrl+Alt+shift+C），这样页面样式也一同复制，保证了样式的统一性，也节省了配置时间；
• 交互设计：交互设计跟功能布局和交互流程有关，设计原则是重要的操作需要醒目，不需要用户过多思考和查找，然后流程简单，减少点击操作；为了让开发人员更容易理解交互流程，需要在组件上加一些事件配置，比如基本的页面切换、弹出模态框、标签页切换等；
• 静态数据：主要是为了开发人员理解业务内容，也是为了验证组件的设计效果是否合适，静态数据的配置方法在常用组件中会专门介绍；

5.4 应用实施

5.4.1 IoT接入

IoT接入是指设备数据接入到平台，整个过程包括了现场的设备、网关接线和网关的数据接入配置等工作，具体操作方法参考《九物互联_智能边缘网关_用户手册V1.8》。

5.4.2 消息通道

九物云通过消息通道配置集成的第三方消息推送平台，用于设备告警，平台消息通知等内容的推送。共分为消息通道和消息模板两部分。

1) 消息通道：消息通道用于第三方消息发送平台的配置，目前支持微信公众号和企业微信两种平台，配置内容如下图所示

2) 消息模板：消息模板用于配置消息通道中第三方平台发送消息的内容格式模板，目前仅支持微信公众号的消息模板配置，配置内容如下图所示

5.5 系统测试

从软件工程上看，软件系统的测试与开发工作同等重要，也伴随着开发同步进行的。软件测试过程也是系统性工作，有一定方法和流程模型。

软件测试模型

左边是设计和分析，是软件设计实现的过程，同时伴随着质量保证活动——审核的过程，也就是静态的测试过程；

右边是对左边结果的验证，是动态测试的过程，即对设计和分析的结果进行测试，以确认是否满足用户的需求。

（1）需求调研对应验收测试，说明在做需求调研的同时，测试人员就可以阅读、审查需求调研的结果，从而了解业务场景、用户的真正需求，确定测试目标。

（2）当设计人员在做需求分析时，测试人员可以了解系统的基本功能和业务流程，并开始设计系统的测试方案和测试计划，并事先准备系统的测试环境和测试硬件等。

（3）当设计人员在做在做概要和详细设计时，测试人员可以参与设计，对设计进行评审，找出设计的缺陷，同时设计功能、新特性等各方面的测试用例，完善测试计划，并基于这些测试用例以开发测试脚本。

（4）在编程的同时，进行单元测试，是一种很有效的办法，可以尽快找出程序中的错误，充分的单元测试可以大幅度提高程序质量、减少开发成本。

从垂直方向看，越在下面，白盒测试（把测试对象当成一个透明的盒子，允许测试人员利用程序内部逻辑结构及相关信息）方法使用越多，到了集成、系统测试，更多是将白盒测试方法和黑盒测试（把测试对象当成一个黑盒子，测试人员完全不考虑逻辑结构和内部特性，只依据程式的需求说明书来检查程式的功能是否满足它的功能说明）方法结合起来使用，形成灰盒测试方法。而在验收测试过程中，由于用户一般要参与，使用黑盒测试方法。

• 单元测试：是最小规模的测试，测试对象是某个功能或代码块，一般由程序员而 非测试员来做。
• 集成测试：是指一个应用系统的各个部件的联合测试，以决定它们能否在一起共同工作并没有冲突，是单元测试的逻辑拓展，一般来说接口测试是属于集成测试阶段的。
• 系统测试：是基于系统整体需求说明书的黑盒类测试，应覆盖系统所有联合的部件。系统测试是针对整个产品系统进行的测试，目的是验证系统是否满足了需求定义，找出与需求不相符合或与之有矛盾的地方。系统测试的对象不仅仅包括需要测试的产品系统的软件，还要包含软件所依赖的硬件、外设甚至包括某些数据、某些支持软件及其接口等。因此，必须将系统中的软件与各种依赖的资源结合起来，在系统实际运行环境下来进行测试。一般我们系统测试是按照需求文档以及事先编辑好的测试用例来逐步进行测试。
• 验收测试：验收测试是以用户为主的测试，软件开发和QA人员也应该参加，测试一般在用户所在地进行，由用户验证软件产品是否满足了所有的需求的一系列的验收测试工作。先内部测试稳定后，再交由客户进行验收测试，验收测试的目的是为了以发现“未实现的需求”，以评估“适合使用”为目标，该类测试的不是以发现缺陷为主要目的。

5.6 应用发布

5.6.1 WEB端发布

编辑人员在studio编辑器中完成页面编辑后，管理员审核后可以在studio编辑器中发布该应用,发布后即可在发布地址中查看发布后的web应用。如下图所示：

通过这个地址可以打开一个九物云应用的通用登录页面，如下图所示：

在前面章节我们介绍了如何配置应用的登录页面，那个登录页面是应用的自定义登录页面，我们在应用ID（在发布地址最后的一串数字就是这个应用的ID）的前面加一串固定地址，例如上面应用的ID为“560”，自定义登录页面地址就为：https://www.jowocloud.com/login#/oem/560，打开自定义登录页面如下图所示：

应用发布之后，可以通过发布记录对发布的版本进行管理。

5.6.2 移动端发布

Jowo Studio创建的应用可以打包为Android应用，

1）使用Android studio 导入打包app 的图标

2）在.env文件中配置app信息，

3）执行打包命令：npm run android-build 即可打包生成Android应用

配置如图：

5.6.3 微信小程序

Jowo Studio创建的应用可以打包为微信小程序

1）在小程序的后台配置业务域名

2）打开小程序项目配置studio应用的发布地址

3）按照小程序的开发流程上传代码并发布应用

5.6.4 企业微信应用

1) 登录企业微信管理后台

方式一：在电脑浏览器打开官网（https://work.weixin.qq.com/），点击页面右上角企业登录，可通过企业微信app的扫一扫登陆管理后台，扫码后需要在手机端选择需要登录的企业，并确认登录。目前仅超级管理员或分级管理员支持登陆管理后台。

2) 创建应用

在应用管理标签页面，点击“创建应用”；

上传应用logo，输入应用名称，选择应用可见范围；

设置应用主页，填入APP的自定义登录页面地址；

6 最佳实践

6.1 大屏页面开发

大屏页面在很多工业互联网应用中会经常用到的页面形式，下面以车间大屏为例介绍大屏页面的开发，车间大屏用于展示车间产量，车间设备在线状况，车间能耗等。如下图：

大屏页面由下列组件拼装而成，组件介绍顺序为从上到下、从左到右：

• 基础echarts ：用于统计设备状态，绘制成饼图；

• 轮播图+基础echarts：用户统计设备状态甘特图；

• 轮播表格：用于统计设备的故障信息；

• 文本组件：用于展示车间内的生产详情，日产量、月产量、日能耗、生产计划、时间稼动率、运行设备数；

• 基础echarts+基础表格+基础echarts：用于统计各种类生产成品的产量统计绘制成相应的柱状图和饼图；

• 基础echarts：用于统计最近一周内成品的产量统计，绘制成相应的曲线图；

• 轮播表格：用于统计该车间的生产信息；

• 基础echarts：用于统计该车间的能耗信息；

• 重复列表：用于展示该车间的设备卡片详情；

  下面介绍大屏页面开发的过程：

1) 在项目列表页面，单击右上角的“+ 新建应用”。 2) 选择创建空白应用，填写应用名称，页面类型选择大屏。

3) 点击新增页面，自定义页面，填写页面名称（车间总览）。

4) 设置页面的属性，屏幕尺寸（1920*1080）、背景颜色（#1C222AFF）、背景图片、导航布局等。

5) 从全部组件中，分别拖拽相应的组件到画布区域，

6) 配置文本组件

7) 配置基础echarts 参考https://echarts.apache.org/examples/zh/index.html

使用官方ui代码设计出对应的饼图或者曲线图。

复制echarts代码 进入studio编辑器 点击 选中基础echarts组件 右侧数据配置 将复制的代码粘贴。

效果图如下：

8) 配置下拉选择组件。

效果如图：

9) 配置下表格组件。

数据配置如下：

const alramList = Stage.getGlobal("故障信息")

if(!alramList) return []

return alramList.map(d=\>({

time:d.faultTime && moment(d.faultTime).format("YYYY-MM-DD HH:mm:ss"),

device:d.stationName,

workshop:d.stationName,

alarm_info:d.faultInfo

}))

表头配置如下：

数据和列配置对应关系如下：

10) 配置轮播图组件

选择轮播图组件，配置所需要轮播的内容，如下图：

组件块的定义详见组件块

选择图片时，可以本地上传图片至平台

选择组件块时，可以选择事先在平台中创建的组建块

效果展示，如下图：

选择组件块时，可以进行数据交互

模拟数据如下：

return {

mesg:"测试数据。。。。"

}

组件块内部新建变量record

选中一个文本组件 ，点击绑定数据源

效果展示：

11) 其它组件部分参考上方的的功能，当所有组件都完成时 ，点击右上角的预览按钮，可以进入到预览态查看整个页面的效果。

6.2 ​组态页面开发

一般由定制化组件构成，根据实际的业务场景，使用或者定制开发相应的组件，可实现水流的动画、指示灯的开关、风机的开关、照明的开关等。

现阶段平台提供了空调、电力、水务、船务、塔吊行业的相关组件。

组态示例：

前6个步骤可以参考开发大屏页面

• 鼓风机组件配置（开关状态 true或者false）

• 管道组件配置（开启流动 true或者false）

• 指示灯组件配置(状态类型 在线-green 离线-grey 故障-red)

• 沉淀池组件配置（沉淀池类型、颜色、水位）

• 污水提升泵组件配置（静态展示，无配置项）

• 流量计组件配置

根据上方所有的组件构造成页面 。

注意:组态页面一般需要配合jowoiot的后端服务使用 在数据发布中，新建数据发布（测点请求）并且新建变量（测点集合）。

点击配置数据源：

获取的数据源赋值给变量测点集合，选中一个文本组件，点击绑定数据源 下方以文本为例

数据源选择变量-测点集合，并勾选数据处理。

6.3 ​列表页面开发

使用表格组件以及各类表单组件，和相应后台设计（增删改查等），构建出能够自主进行表格的新增、删除、编辑、修改等的功能页面

上图生产统计列表 在后台数据库mysql中有相应的表设计（包含必填字段以及非必填、校验等）接口化给到前端人员进行调用。

• 前6个步骤可以参考开发大屏页面。

• 表格组件配置,同大屏页面上的轮播表格。

  

return [

{

index:"1",

name:"张三",

age:"18"

},

{

index:"2",

name:"李四",

age:"20"

}
]

列表配置：

• 表单组件配置，按上图拖动相应的表单组件。

  

表单的数据源配置示例，树组件测试数据：

[

{

"name": "databox-6",

"id": "993531800098443264",

"type": 1,

"alias": "databox-6",

"mdmId": null,

"code": null,

"longitudeLatitude": null,

"address": null,

"createdTime": 1656918040005,

"parentId": null,

"parentName": null,

"extendedProperties": {},

"children": [

{

"name": "0702公司",

"id": "993541930622824448",

"type": 2,

"alias": "0702公司",

"mdmId": null,

"code": null,

"longitudeLatitude": "",

"address": "",

"createdTime": null,

"parentId": "993531800098443264",

"parentName": "databox-6",

"extendedProperties": {},

"children": [

{

"name": "0704工厂",

"id": "993551912144084992",

"type": 3,

"alias": "0704工厂",

"mdmId": null,

"code": null,

"longitudeLatitude": "121.463889,31.230972",

"address": "",

"createdTime": null,

"parentId": "993541930622824448",

"parentName": "0702公司",

"extendedProperties": {},

"children": [

{

"name": "0704车间",

"id": "993552134752575488",

"type": 4,

"alias": "",

"mdmId": "dev_8f06569e-f682-4415-b5b9-75a7654eb135",

"code": null,

"longitudeLatitude": null,

"address": null,

"createdTime": null,

"parentId": "993551912144084992",

"parentName": "0704工厂",

"extendedProperties": {

"images": [

"/minio/databox-6/worksheet/1656922907958_1656295832730_u%3D2766537514%2C2964424378%26fm%3D26%26fmt%3Dauto.png&1656922907958_1656295832730_u=2766537514,2964424378&fm=26&fmt=auto.png"

],

"videoType": "1",

"videoAddress": "http://www.baidu.com"

},

"children": [

{

"name": "day",

"id": "1002579854166695936",

"type": 5,

"alias": null,

"mdmId": "dev_db942759-fb64-41a7-b2ef-9db5da71eea4",

"code": "002",

"longitudeLatitude": null,

"address": null,

"createdTime": 1658991994513,

"parentId": "993552134752575488",

"parentName": "0704车间",

"extendedProperties": {},

"children": []

},

{

"name": "code001",

"id": "1001558053846573056",

"type": 5,

"alias": "",

"mdmId": "dev_f27b27c1-8cd1-46fe-befb-da156ee9a939",

"code": "001code",

"longitudeLatitude": null,

"address": null,

"createdTime": null,

"parentId": "993552134752575488",

"parentName": "0704车间",

"extendedProperties": {

"deviceNumber": "code001",

"manufacturer": "code001"

},

"children": []

},

{

"name": "大电流设备-01",

"id": "1053263762528342016",

"type": 5,

"alias": "",

"mdmId": "dev_a57cd49e-b571-47a2-b907-8c2394ca2346",

"code": "TSd-01",

"longitudeLatitude": null,

"address": null,

"createdTime": null,

"parentId": "993552134752575488",

"parentName": "0704车间",

"extendedProperties": {

"ratedCurrent": 70,

"deviceNumber": "TSd-01",

"manufacturer": "ts厂商"

},

"children": []

},

{

"name": "0704设备",

"id": "993552327426318336",

"type": 5,

"alias": "",

"mdmId": "dev_288d50e1-1a18-45ff-8a44-6420e178f675",

"code": "0704设备",

"longitudeLatitude": null,

"address": null,

"createdTime": null,

"parentId": "993552134752575488",

"parentName": "0704车间",

"extendedProperties": {

"ratedCurrent": 30,

"deviceNumber": "0704设备",

"pdaImage": [

"/minio/databox-6/worksheet/1656922938553_1656295832730_u%3D2766537514%2C2964424378%26fm%3D26%26fmt%3Dauto.png&1656922938553_1656295832730_u=2766537514,2964424378&fm=26&fmt=auto.png"

],

"manufacturer": "0704设备"

},

"children": []

}

]

}

]

},

{

"name": "test",

"id": "1054717373336002560",

"type": 3,

"alias": "test",

"mdmId": null,

"code": null,

"longitudeLatitude": "121.478068,31.220697",

"address": "",

"createdTime": null,

"parentId": "993541930622824448",

"parentName": "0702公司",

"extendedProperties": {},

"children": []

}

]

},

{

"name": "1125公司",

"id": "1045750997799059456",

"type": 2,

"alias": "1125公司",

"mdmId": null,

"code": null,

"longitudeLatitude": "",

"address": "",

"createdTime": null,

"parentId": "993531800098443264",

"parentName": "databox-6",

"extendedProperties": {},

"children": []

}

]

}

]

递归方法：

const default_data_type_id_v2 = (tree,type,getChildren,typeChildren = [],mapping = {}) =\> { // (树,那个层级的第一个,是否有返回子级id,那些层级下的id)

let mapping\_ = {

type:'type',

id:'id',

...mapping

}

let tree\_ = tree

// 判断层级匹配的第一个

if (type){

let istype = true

let recursive_tree = (tree_0) =\> {

istype && tree_0.forEach(i=\> {

if (!istype) return

if (i[mapping_.type] == type) {

tree\_ = [i]

istype = false

}else{

i.children && i.children.length \> 0 && recursive_tree(i.children)

}

})

}

recursive_tree(tree)

}

// // 判断子 id 是否返回

if(getChildren){

// console.log('子id=========',tree_)

let id_s = []

let recursive_tree = (tree_1) =\> {

tree_1.forEach(i=\> {

if (typeChildren.length \> 0){

typeChildren.includes(i[mapping_.type]) && i[mapping_.id] && id_s.push(i[mapping_.id])

}else{

i[mapping_.id] && id_s.push(i[mapping_.id])

}

i.children && i.children.length \> 0 && recursive_tree(i.children)

})

}

recursive_tree(tree_)

return id_s

}else{

let id_s = []

id_s.push( tree\_ && tree_[0] && tree_[0][mapping_.id] )

return id_s

}

}

return disable_Tree_v2(tree,[1,2,3],[4,5])

• 确认按钮事件，获取每个表单组件的组件值。

使用Stagef方法 Stage.getElement(“组件名称”).variables.value

示例代码 + 判空

let workshopId = Stage.getElement("工厂车间").variables.value \|\| {}

let deviceId = Stage.getElement("设备").variables.value

let operatorId = Stage.getElement("操作工").variables.value \|\| 1 // 操作工

let shiftId = Stage.getElement("生产班次").variables.value

let start = Stage.getElement("开始时间").variables.value

let end = Stage.getElement("结束时间").variables.value

let productSpecificationId = Stage.getElement("成品名称").variables.value

let yieldNum = Stage.getElement("产量").variables.value

if(!workshopId){

error.push({msg:"工厂/车间不能为空！"})

}else if(!start){

error.push({msg:"开始时间不能为空！"})

}else if(!end){

error.push({msg:"结束时间不能为空！"})

}

if(error.length \> 0){

for(let i in error){

Stage.message.error(error[i].msg)

return false

}

}

构建后端所需提交的数据并且调用接口 ：

let data = {

"workshopId": workshopId.id,

"factoryId": workshopId.parentId,

"deviceId": deviceId,

"operatorId": operatorId,

"productSpecificationId": productSpecificationId,

"shiftId": shiftId,

"start": start,

"end": end,

"yield": yieldNum

}

console.log("===",data)

if(!rowData){ // 提交

JowoMods.fetchApi.fetchApiPost("/production/record",data).then((res) =\> {

Stage.message.success("保存成功")

props && props.setGlobal("refresh",res)

props && props.closeModal()

// props.onSubmit && props.onSubmit(res)

}).catch((e) =\> {

Stage.message.error(e.response.data.message)

})

}else{ // 修改

JowoMods.fetchApi.fetchApiPut(\`/production/record/\${rowData.recordId}\`,data).then((res) =\> {

Stage.message.success("修改成功")

props && props.setGlobal("refresh",res)

props && props.closeModal()

}).catch((e) =\> {

Stage.message.error(e.response.data.message)

})

}

• 新增按钮配置

  

const tree = Stage.getGlobal("tree")

const user = Stage.getGlobal("操作员")

const specification = Stage.getGlobal("成品规格")

return {

closeModal:Stage.closeModal,

setGlobal:Stage.setGlobal,

tree,

user,

specification

}

• 导出按钮配置 （后端导出）

  

const station = Stage.getElement("场站节点").variables.originValue

const operatorID = Stage.getElement("操作员").variables.value

const specificationID = Stage.getElement("成品规格").variables.value

const time = Stage.getElement("时间").variables.value \|\| []

return JowoMods.fetchApi.fetchApiGet('/production/record/report',{

operator:operatorID,

prod:specificationID,

stationId:station,

start:time[0],

end:time[1],

}, {

responseType: "blob",

}).then(response=\>{

const oa = document.createElement('a');

oa.href = URL.createObjectURL(response);

console.log('URL',URL)

console.log('response',response)

oa.setAttribute('target', '_blank');

document.body.appendChild(oa);

oa.download = \`\${moment().format("YYYY-MM-DD HH:mm")}.xlsx\`

oa.click();

document.body.removeChild(oa);

})