页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

客户通过第三方系统开发的驾驶舱页面,点击驾驶舱的某一个位置打开iframe集成的透视分析或即席查询的报表中,界面UI不是很协调,需要做到整个背景色的修改、工具栏按钮以及勾选框的自适应修改等。

2.功能说明

对即席查询、透视分析的页面样式生效。

信息

注意:客户需要自己增加主题,可根据Smartbi开发的修改CSS模板进行自定义调整,完成后,将CSS文件上传到指定的服务器目录下,然后再在系统中配置对应信息即可。


生效资源

即席查询、透视分析

3.使用说明

3.1. 扩展包部署

扩展包:PD扩展包:PD_ForbidErrorWindowCustomTheme

部署说明:扩展包部署

信息

注意:更新扩展包之前,请做好知识库以及扩展包的备份。


3.2.逻辑说明

1)通过patch.js判断当前是否设置了theme=xxx参数,如果有则插入对应参数值的css文件;

2)新增css文件,通过在class的css覆盖,实现样式的覆盖;

3)使用自定义的css时,在url中增加参数diyTheme=DIYCSS即可,前端会根据DIYCSS的名称从扩展包中加载ExtendedFontsExt\src\web\smartbix\DIYCSS.css

3.3 css文件说明

1)css样式文件目录为扩展包 PD_CustomTheme.ext\smartbix;

2)使用解压缩工具打开扩展包,找到上述路径,把自定义的css文件拖进去,并确认压缩即可;

信息

注意:自定义css文件名称,不允许使用中文,Smartbi产品不兼容中文命名。

Image Added

3.4 使用说明

在嵌入第三方系统前,请在openresource.jsp的地址中,增加一个参数customParams,参数值为{"diyTheme": "CSS文件名"},并且需要进行url转码,例如css文件名如下【diyTheme.css】,则参数的原值:{"diyTheme": "diyTheme"},编码后:%7B%22diyTheme%22:%20%22diyTheme%22%7D,最终传入的参数为:customParams=%7B%22diyTheme%22:%20%22diyTheme%22%7D


则url地址示例如下:

http://localhost:8011/smartbi/vision/openresource.jsp?resid=资源id&customParams=%7B%22diyTheme%22:%20%22diyTheme%22%7D

转码可使用浏览器控制台输入下属代码换行即可:encodeURI('{"diyTheme": "css文件名"}')


说明:目前仅支持V11新版的即席查询和透视分析报表,对于旧版的即席查询和透视分析报表暂不支持切换主题,并且只支持openresource.jsp的方式切换主题,请知悉!

 

1.1.4. Css样式示例


1.1.4.1. 顶部工具栏背景色:

css示例:


效果:



1.1.4.2

...

(1)管理员登录系统后,在【运维设置】- 【系统选项】 - 【公共设置】中,会增加“屏蔽弹窗提示”选项,如下:

  • 默认为“空”,表示不对任何报错进行屏蔽处理
  • 多个关键词时可使用英文逗号分隔即可

Image Removed

(2)打开对应的资源,相关效果说明

以 电子表格 为例

设置为 空 时,如下图:

Image Removed

设置为“获取数据SQL错误”时,如下图:

Image Removed

...

. 报表主体背景颜色

css示例:


效果:



1.1.4.3. 过滤条件区样式

css示例:


效果:




1.1.4.4. 表格区顶部横线样式

css示例:


效果:


1.1.4.5. 设置区样式

css示例:


效果:



1.1.4.6. 数据区样式

css示例:


效果:



1.1.4.7. 数据区-新建计算列弹窗样式

css示例:


效果:



1.1.5. 如何定位要修改的样式

切换主题主要是通过自定义的css覆盖产品内置的css,首先需要定位需要修改的样式class,可以在浏览器打开F12开发者模式,通过定位到要修改的元素,找到对应的class,点击进去,基于原有的定位器开发自定义的样式。