产品文档

京东城市莫奈可视化平台

其他组件

内嵌网页

适用场景:

可以通过内嵌网页加载别的网站的内容,方便页面展示的同时不干扰页面其他内容,此外,可通过内嵌网页实现当前大屏与其它大屏的交互。

样式设置

内嵌网页即iframe,将网址链接粘贴到样式设置中的链接地址中即可显示网页。

数据设置

数据设置包括url一个字段,代表网页的url地址。

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据。

弹出框

样式设置

image-20200312130403683

样式设置中包含基础设置和样式设置与图表位置、图表尺寸的配置。

其中基础配置包含文本设置、对齐方式和默认显示状态的配置

样式设置包含弹出框的宽度和高度的配置

数据设置

数据设置中包含text和url两个字段的配置

image-20200312130951387

url字段指的是点击弹出框之后,生成界面的url地址。

数据设置包括url一个字段,代表网页的url地址。

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据。

 js
[{"text":"弹出框文字","url":"https://monet.urban-computing.cn/#/screen?key=7c75144b1e8b4e38a20da1f492d544e9"}]

轮播组件

适用场景:

想在大屏内相同位置展示多个维度的信息:如多张图表,多张图片,多个页面等,可使用轮播组件,加深信息展现维度。

样式设置

样式设置中包含标题栏设置,切换按钮设置,动画设置。

其中标题栏设置包含标题高度,文本设置,以及边框和背景的设置。

切换按钮设置包括按钮大小,边距和颜色设置,还有按钮位置设置。

动画设置包括循环翻页和首页暂停。

数据设置

数据设置中包含text和url两个字段的配置

数据设置包括url一个字段,代表网页的url地址。

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据。

 js
[{"title":"标题1","url":"https://monet.urban-computing.cn/#/screen?key=7c75144b1e8b4e38a20da1f492d544e9"},{"title":"标题2","url":"https://monet.urban-computing.cn/#/screen?key=7c75144b1e8b4e38a20da1f492d544e9"},{"title":"标题3","url":"https://monet.urban-computing.cn/#/screen?key=7c75144b1e8b4e38a20da1f492d544e9"}]

滚动通知栏组件

适用场景:

对于一些不止一条的简短的讯息,新闻类信息,希望实现动态展示时可以使用滚动通知栏组件。

样式设置

滚动通知栏组件的样式设置包含:单条设置,标题,描述,标签1,标签2。

单条设置

单条设置可以对条与条之间的间距,轮播时间以及内填充,背景图,条高度进行设置。

背景图

可以选择是否显示背景图片,选择是时可以自行导入你想要的背景图片。

标题

可以对标题显示与否,字号,高度,是否单独成行,字体颜色,字体粗细,对齐方式进行设置。

描述

可以对描述内容样式进行设置:可设置是否显示,字体,字号,颜色,粗细;描述的高度以及文本对齐方式。

标签1

可对标签1的字体,字号,颜色,粗细,对齐方式,以及左边距,右边距,文字是否显示等进行设置。

标签2

可对标签2的字体,字号,颜色,粗细,对齐方式,文字是否显示进行设置。

数据设置

数据字段包含4个:title,text,tag1,tag2

title:设置标题的内容

text:设置描述中的内容

tag1:设置标签1中的内容

tag2:设置标签2中的内容

数据源类型支持静态数据,数据库,API三种接入方式。

数据设置包括url一个字段,代表网页的url地址。

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现放大输入窗口,方便用户进行操作。窗口内操作方式相同,修改数据完成后点击完成即可保存并进行后续字段映射。

当点击高级输入时,用户需在输入框中输入json格式的数据。

 js
[{"title":"【执法类型1】","text":"执法内容显示执法内容显示执法内容显示执法内容显是","tag1":"2020-01-03","tag2":"对应委办局名称"},{"title":"【执法类型2】","text":"执法内容显示执法内容显示执法内容显示执法内容显示 示执法内容显示执法内容显示。","tag1":"2020-01-03","tag2":"对应委办局名称"},{"title":"【执法类型3】","text":"执法内容显示执法内容显示执法内容显示执法内容显是","tag1":"2020-01-03","tag2":"对应委办局名称"},{"title":"【执法类型4】","text":"执法内容显示执法内容显示执法内容显示执法内容显示 示执法内容显示执法内容显示。","tag1":"2020-01-03","tag2":"对应委办局名称"},{"title":"【执法类型5】","text":"执法内容显示执法内容显示执法内容显示执法内容显示 示执法内容显示执法内容显示。","tag1":"2020-01-03","tag2":"对应委办局名称"},{"title":"【执法类型6】","text":"执法内容显示执法内容显示执法内容显示执法内容显是","tag1":"2020-01-03","tag2":"对应委办局名称"},{"title":"【执法类型7】","text":"执法内容显示执法内容显示执法内容显示执法内容显是","tag1":"2020-01-03","tag2":"对应委办局名称"},{"title":"【执法类型8】","text":"执法内容显示执法内容显示执法内容显示执法内容显是","tag1":"2020-01-03","tag2":"对应委办局名称"},{"title":"【执法类型9】","text":"执法内容显示执法内容显示执法内容显示执法内容显是","tag1":"2020-01-03","tag2":"对应委办局名称"},{"title":"【执法类型10】","text":"执法内容显示执法内容显示执法内容显示执法内容显是","tag1":"2020-01-03","tag2":"对应委办局名称"}]

自定义组件

适用场景

自定义组件,允许用户通过自己写js代码并将莫奈可访问的资源链接配置进资源地址,实现在莫奈前端的展示。适用于现有组件不满足需求情况下,支持用户自定义开发满足自己需求的组件。

样式设置

image-20200723163834826

自定义组件的样式设置包含:组件名、资源地址和导入配置

在实际使用中,必须保证组件名和资源地址对应的资源名称一致,否则将无法识别。

同时资源链接中的js规范必须遵循莫奈studio代码规范,详情请联系ERP: wuxiaolong20

导入配置中,允许用户通过写代码实现对资源地址中js配置的修改。

更新时间:2021-03-25 16:07:56
feedback