产品文档

京东城市莫奈可视化平台

媒体组件

图片

适用场景

用户可自行导入自己需要的图片,满足大家功能及装饰上的需求。并可在图片中通过超链接配置等实现页面切换,跳转页面等复杂交互。

样式设置

图片的样式设置可设置图片的链接,或上传图片,并支持配置图片的超链接。

上传图片:支持从本地上传图片,将图片拖到右侧样式设置的图片上传区域,即可完成图片上传。或点击图片上传区域,上传图片。

删除图片:鼠标悬停在右侧样式设置的图片上传区域,会出现删除按钮,可进行图片的删除。

超链接设置:图片可设置超链接,直接将网址粘贴即可,如不配置,则无超链接。超链接可选择在新窗口打开,如勾选,则点击图片后的超链接会在新的浏览器标签页打开,如不勾选,则点击图片后的超链接会在当前页面打开。

数据设置

数据设置可以设置hyperUrl字段和Url字段。

hyperUrl:图片超链接url

Url:图片本身的Url。

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

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

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

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

 js
[{"hyperUrl":"","url":""}]

视频

适用场景

视频相对于文字图片来说,展现形式更加直观,可以在短时间内捕获用户注意力。一些炫酷视频配合其他组件共同使用,使大屏更加立体生动。

样式设置

视频的样式设置可设置视频的地址链接,配置视频是否自动播放,循环播放以及是否显示控制条。

视频组件暂不支持本地上传。

数据设置

数据字段

视频组件的数据字段包括:url

url:视频的地址链接;

需要注意的是:如果数据设置和样式设置中同时配置了视频的URL,那么将以数据设置中的链接为准;

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

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

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

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

 js
[
    {
        "url":""
    }
]

实时视频

适用场景

实时视频指将组件绑定在实时进行的视频URL中,如直播等。相比较一般视频,实时视频更重要的特点是实时性,信息的同步性。适用于一些对视频时效性要求较高的情境。

样式设置

实时视频的样式设置可设置视频的地址链接,配置视频是否自动播放,循环播放以及是否显示控制条。

该组件暂不支持本地上传。

数据设置

数据字段

实时视频组件的数据字段包括:url

url:视频的地址链接;

需要注意的是:如果数据设置和样式设置中同时配置了视频的URL,那么将以数据设置中的链接为准;

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

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

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

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

 js
[{"url":""}]

图片轮播组件

适用场景

在有多张图片需要循环展示并要查看其详细信息,可以使用图片轮播组件。

样式设置

图片轮播的样式设置支持上传本地图片,上传顺序即为轮播顺序,可对任意位置的图片进行替换或删除。

图片轮播组件填充方式有四种:等比例宽度铺满、等比例高度铺满、全部铺满、无。

图片轮播组件的标题栏可以设置位置与标题文字相对标题栏的对齐方式。

图片轮播的切换按钮支持大小、颜色、选中颜色与位置的设置。位置设置非常灵活,可以通过边距和位置联合调整到组件内的任意位置。

图片轮播组件的动画设置可以选择循环翻页或首页暂停。在轮播时,鼠标移入则轮播停止。

图片轮播组件支持对每个图片添加弹窗,预览后单击添加过弹窗链接的组件即可查看弹窗信息。

数据设置

数据字段

视频组件的数据字段包括:title、imageUrl、iframeUrl

title:图片的标题(必填,有多少标题则轮播多少图片);

imageUrl:图片的地址链接(非必填);

iframeUrl:弹窗的地址链接(非必填);

需要注意的是:如果数据设置和样式设置中同时配置了图片,那么将以数据设置中为准;

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

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

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

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

 js
[{"title":"标题1","image":"https://storage.360buyimg.com/visualdata/7000a130de51442d91550849f519fa97.png"},{"title":"标题2","image":"https://storage.360buyimg.com/visualdata/b3d7b06e4cc147d6b7545b0b9f8d21e5.png"},{"title":"标题3","image":"https://storage.360buyimg.com/visualdata/5ca9100867c7452791c80b4c8abd0482.png"}]
更新时间:2021-04-01 10:59:43
feedback