1.需求背景
客户通过第三方系统开发的驾驶舱页面，点击驾驶舱的某一个位置打开iframe集成的透视分析或即席查询的报表中，界面UI不是很协调，需要做到整个背景色的修改、工具栏按钮以及勾选框的自适应修改等。
2.功能说明
对即席查询、透视分析，可以自定义样式。
注意：客户需要自己增加主题，可根据Smartbi开发的修改CSS模板进行自定义调整，完成后，将CSS文件上传到指定的服务器目录下，然后再在系统中配置对应信息即可。
生效资源
即席查询、透视分析
3.使用说明
3.1. 扩展包部署
扩展包：PD_CustomTheme
部署说明：扩展包部署
注意：更新扩展包之前，请做好知识库以及扩展包的备份。
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产品不兼容中文命名。
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
注意：只支持openresource.jsp的方式切换主题。
转码可使用浏览器控制台输入下属代码换行即可：encodeURI('{"diyTheme": "css文件名"}')
3.5. css样式示例
1）顶部工具栏背景色
css示例：
效果：
2）报表主体背景颜色
css示例：
效果：
3）过滤条件区样式
css示例：
效果：
4）表格区顶部横线样式
css示例：
效果：
5）设置区样式
css示例：
效果：
6）数据区样式
css示例：
效果：
7）数据区-新建计算列弹窗样式
css示例：
效果：
3.6 如何定位要修改的样式
切换主题主要是通过自定义的css覆盖产品内置的css，首先需要定位需要修改的样式class，可以在浏览器打开F12开发者模式，通过定位到要修改的元素，找到对应的class，点击进去，基于原有的定位器开发自定义的样式。
