登录/注册

首页 › Wyn 商业智能专区 › 产品教程 › 查看内容

141 主题	211 帖子	1380 积分

积分: 1380

8526
金币
141
主题
211
帖子

最新发帖

[仪表板] 【仪表板-交互分析】选项卡根据条件显示图片

讲师达人认证

悬赏达人认证

高级会员 / 发表于：2020-12-31 10:10 / 查看：3746 / 回复：2

本帖最后由 Bella.Yuan 于 2023-1-5 18:36 编辑

场景：在展示仪表板时，需要根据内容显示内容对应的图片，例如：工程项目图片自动轮播，动态查看员工照片等。
此时，需要使用到图片组件。

根据条件动态显示图片，需要给图片组件绑定存储到数据库中的图片访问地址。

实现步骤如下：
1、在安装目录的 C:\Program Files\Wyn Enterprise\Portal\wwwroot 路径下新建文件夹projectimages(文件夹名称可以自定义)，将图片存放在该文件夹下。
image.png804586181.png

image.png804586181.png

2、通过url访问图片测试，获取url路径。
url路径构成：IP或域名+端口号51980/文件夹名称/图片名称
image.png275838927.png

image.png275838927.png

3、将url保存到对应的记录表中。
将对应的图片URL路径添加到对应的项目或者项目信息中。
image.png854406432.png

image.png854406432.png

4、新建数据集。

image.png225474852.png

5、在仪表板添加图片并绑定字段。
image.png278286132.png

image.png278286132.png

6、设置联动元素。
设置一个表格或者图表，展示项目信息，当点击表格或图表时，图片组件联动。
image.png991872863.png

image.png991872863.png

7、选项卡动态轮播。
每个选项卡展示不同项目的图片，可以通过在各选项卡中添加筛选器的方式，选择对应tab中需要展示的图片，最后开启图层设置，将筛选器置于底层。
7.1、每个Tab内设计图片，并绑定图片字段。
image.png971690978.png

image.png971690978.png

7.2、每个Tab页添加筛选器。
开启仪表板元素叠加，添加筛选器。
image.png418532103.png

image.png418532103.png

image.png726094360.png

7.3、设置选项卡的筛选范围。
将整个页面改为当前容器，这样筛选器就会只作用于当前选项卡Tab。
image.png548656920.png

image.png548656920.png

7.4、选择每页筛选器的默认值。将每个筛选器默认值设置当前项目对应的图片。
image.png644067687.png

image.png644067687.png

image.png458623961.png

7.5、将筛选器置于底层隐藏。
image.png286745604.png

image.png286745604.png

收藏

回复

2 个回复

倒序浏览

zyingzi33
金牌服务用户 / 发表于：2021-6-10 14:54:52 沙发

选项卡的动态轮播图片的方式可不可以有淡入、淡出、翻页等样式可以选择，现在每个图的跳转太生硬。

回复 使用道具举报

Crystal.Li
论坛元老 / 发表于：2021-6-10 15:01:05 板凳

zyingzi33 发表于 2021-6-10 14:54
选项卡的动态轮播图片的方式可不可以有淡入、淡出、翻页等样式可以选择，现在每个图的跳转太生硬。

您可以去产品需求版块提需求哦~ 产品经理会对您的需求做评估~~

回复 使用道具举报