更换产品显示方式_扩展包方式

由于很多客户对Logo文字，图片等有较多个性化需求，我们就在产品中增加了界面设置，但产品中个性化配置项有限，本文介绍的扩展包方式适用更广范围。

如果您需要了解如何查找定位对应图片、css或js，便于扩展本文中没有涉及到的修改，见Smartbi前端框架介绍，调试定位入门等。

在客户的生产环境中部署 Smartbi 程序时，通常需要需要对其做一些简单的客户化定制，比如替换登录界面、以及主界面顶部的LOGO和图片、或者修改程序名称标识等。如果您遇到类似需求，请参考下面的步骤修改和部署 ChangeLogo 扩展包。

注意事项

所有第三方对smartbi的修改，必须放在扩展包中，不能直接修改war包里面的文件。

更多关于产品的OEM定制，譬如移动端换logo请见：移动端自定义logo扩展包

修改扩展包

扩展包修改方法

请首先下载 ChangeLogo 扩展包，下载地址：ChangeLogo.ext （此扩展包适用于V11以上版本）。如果需要修改其中的某个文件，请参照如下步骤进行。

首先用 WinRAR 之类的压缩工具，打开 ChangeLogo.ext 文件。
然后将需要修改的文件从 WinRAR 窗口中拖出来，对其进行修改。
接着将修改后的文件，拖放回 WinRAR 窗口中，覆盖以前的旧文件。
关闭 WinRAR 窗口保存修改即可。

浏览器标题栏title

修改浏览器标题栏上显示的名称，对应的文件路径是：ChangeLogo.ext\vision\js\ext\ConfigurationPatch.js。其中 loginTitle 是登录界面的标题、configTitle是配置界面的标题。

注意：当标题栏title出现乱码时，是由于该JS文件编码格式不对，

请采用UTF-8编码格式，将文件编码格式改成UTF-8，最简单的方式是使用Uedit工具打开ConfigurationPatch.js 文件，将文件另存为UTF-8文件，使用转码后文件即可。

登录界面LOGO

登录界面的图片文件路径是：ChangeLogo.ext\vision\img\login\logo.png 。直接将项目上所用的 LOGO 文件拖放到对应路径中，覆盖同名文件即可。

注意！如果是替换图片，则要求图片文件的名称、扩展名、图片的大小尺寸必须完全一致。

主界面、Config配置界面和仪表盘界面logo

Smartbi 主界面的顶部logo文件、Config配置界面和仪表盘界面logo是同一个：

大LOGO路径是：ChangeLogo.ext\vision\img\baseframe\logo.png，尺寸为180*40

小LOGO路径是：ChangeLogo.ext\vision\img\baseframe\logo-light.png，尺寸为198*33

更改主页面最顶端的颜色，对应的文件路径为ChangeLogo.ext\vision\css\patch.css，修改background-color参数，如background-color:#0000ff;

Config登录界面

LOGO路径是：ChangeLogo.ext\vision\img\config-login-logo.png，尺寸为183*23

Config页面左上角图标

LOGO路径是：ChangeLogo.ext\vision\img\mainframe\logo.png，尺寸为230*52

屏蔽右上角图标

系统右上角的功能图标入口

用户可以根据需求进行屏蔽和释放，通过修改文件“BannerView.js.patch”中的代码实现。

该文件对应的路径是：ChangeLogo.ext\vision\js\bof\baseajax\common。

修改定制详情如下表：

修改内容

修改详情

搜索图标（）

找到如下代码：

// 'SEARCH',

将这段代码的注释取消则屏蔽了“搜索”图标。

导航页图标（）

找到如下代码：

// 'GUIDE_PAGE',

将这段代码的注释取消则屏蔽了“导航页”图标。

代办图标（）

找到如下代码：

// 'TODO_LIST',

将这段代码的注释取消则屏蔽了“导航页”图标。

消息中心图标（）

找到如下代码：

// 'MESSAGE_CENTER',

将这段代码的注释取消则屏蔽了“导航页”图标。

管理员

找到如下代码：

// 'LOGIN_USER'

将这段代码的注释取消则屏蔽了“管理员”。

屏蔽右上角更多下拉框菜单

用户可以根据需求进行屏蔽和释放，通过修改文件“BannerMoreMenusDialog.js.patch”中的代码实现。

该文件对应的路径是：ChangeLogo.ext\vision\js\bof\baseajax\common\dialog。

修改定制详情如下表：

修改内容

修改详情

帮助文档

找到如下代码：

// 'ONLINE_HELP',

将这段代码的注释取消则屏蔽了“帮助文档”列。

用户日志

找到如下代码：

// 'USER_LOGS',

将这段代码的注释取消则屏蔽了“用户日志”列。

系统监控

找到如下代码：

// 'SYS_MONITOR',

将这段代码的注释取消则屏蔽了“系统监控”列。

登录二维码

找到如下代码：

// 'QRCode',

将这段代码的注释取消则屏蔽了“登录二维码”列。

插件下载

找到如下代码：

// 'PLUGIN_DOWNLOAD',

将这段代码的注释取消则屏蔽了“插件下载”列。

关于

找到如下代码：

// 'ABOUT_SMARTBI',

将这段代码的注释取消则屏蔽了“关于”列。

注销

找到如下代码：

// 'LOGOUT'

将这段代码的注释取消则屏蔽了“注销”列。

关于页面信息

Smartbi “关于”对话框上的图片LOGO、公司名称、网站等信息的修改。

图片LOGO文件对应路径是：ChangeLogo.ext\vision\img\about\logo.png
麦粉社区、版本发布说明：扩展包会隐藏这一行信息，不支持修改。
“关于 Smartbi” 标识：

编辑 ChangeLogo.ext\META-INF 目录下的下图中的这 3 个文件，分别在这 3 个文件中填写英文、中文、繁体 3 种语言的标识，填写规则为增加两行，分别为 UpperProduceName=标识和 LowerProduceName=标识。

标识包含非英文字符时，需要转为 unicode 编码，例如标识为 “Smartbi思迈特” 转为 unicode 编码为 “smartbi\u601d\u8fc8\u7279”。将文件转为 unicode 编码可百度“unicode在线编码”，使用在线工具转换。

填写示例：标识为“思迈特公司”，则分别在这 3 个文件中填写以下内容：

extension_lang_en.properties （英文）：

UpperProduceName=SmartBI Company LowerProduceName=SmartBI Company

extension_lang_zh_CN.properties （中文）：

UpperProduceName=\u601D\u8FC8\u7279\u516C\u53F8

LowerProduceName=\u601D\u8FC8\u7279\u516C\u53F8

extension_lang_zh_TW.properties （繁体）：

UpperProduceName=\u601D\u9081\u7279\u516C\u53F8

LowerProduceName=\u601D\u9081\u7279\u516C\u53F8

更新扩展包后，可以看到在不同语言环境下显示的标识分别为上方编写的英文、中文、繁体：

公司名称：同上，修改中、英、繁配置文件，分别增加一行 Smartbi=公司名称。
公司官网：同上，修改中、英、繁配置文件，分别增加一行 WebAddress=官网地址。

联系邮箱：同上，修改中、英、繁配置文件，分别增加一行 ContactusEmail=邮箱地址。

隐藏导航页的帮助，社区，官网，在线咨询列表

用户可以根据需求进行屏蔽和释放

该文件对应的路径是：ChangeLogo.ext\vision\js\freequery\mycenter\MyCenter.js.patch，ChangeLogo.ext\vision\js\smartbi\baseframe\module\navigationpage\NavigationPageTaskPanel.js.patch。

屏蔽搜索弹窗的帮助文档列和麦粉社区列

用户可以根据需求进行屏蔽和释放

该文件对应的路径是：ChangeLogo.ext\vision\js\bof\baseajax\common\dialog\SearchDialog.js.patch。

下图中扩展包默认的代码为屏蔽帮助文档和麦粉社区：

将该文件的内容替换为以下内容，则搜索弹框会显示内部资源、帮助文档、麦粉社区这 3 列：

SearchDialog.prototype.getAction_oem = SearchDialog.prototype.getAction;
SearchDialog.prototype.getAction = function() {
  var action = this.getAction_oem();
  var actionIds = ['innerResource', 'helpDocument', 'forum'];
  action = action.filter(e => actionIds.includes(e.id));
  return action;
}

其中第 4 行的 3 个 id 分别代表：

innerResource：内部资源

helpDocument：帮助文档

forum：麦粉社区

可修改第 4 行的代码，去除不需要的列 id。

例如只需要显示内部资源，可修改为：

var actionIds = ['innerResource'];

例如只需要显示内部资源和麦粉社区，可修改为：

var actionIds = ['innerResource', 'forum'];

自定义登录界面

我们参照“1.3 登录界面图片”章节的方法，可以替换登录界面上的图片，但这在很多时候无法满足要求，客户希望把整个登录界面完全换成另外一种风格。针对此需求，可以参照如下步骤操作。

编写登录界面的 jsp 文件。可以参考 ChangeLogo.ext\vision\login_demo.jsp 示例文件，其中 javascript 代码的登录逻辑部分可以不用修改（直接拷贝使用），该文件的其余部分可以任意修改，把界面修改为客户所要求的设计风格。

<script type="text/javascript" src="js/freequery/lang/JSLoader.js"></script>
<script>
	<!-- 以下代码为登录 Smartbi 的处理逻辑，可直接拷贝使用 -->
	<!-- 直接修改 document.getElementById("user") 等代码段即可 -->
	var jsloader = new JSLoader();
	var util = jsloader.resolve("freequery.common.util");
	document.onkeydown = keydown;
	function init() {
		var userName = document.getElementById("user");
		if (userName)
			userName.focus();
	}
	
	function login() {
		var userName = document.getElementById("user"); //用户名输入框ID修改为实际HTML中的元素ID
		var password = document.getElementById("password"); //密码输入框ID修改为实际HTML中的元素ID
		var ret = util.remoteInvokeEx("UserService", "login", [userName.value, password.value]); //调用Smartbi登录方法
		
		if (!ret || !ret.result){
			alert("登录失败!");
			return;	
		} else {
			window.location.reload();
		}
	}
	
	function keydown(e) {
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;    
        if (code == 13) {
            login();
        }    
	}
	<!--------------------->
</script>

增加登录界面 jsp 文件配置项。对应的配置文件路径是：ChangeLogo.ext\vision\js\ext\ConfigurationPatch.js，将其中的 loginJspPath 属性值改为登录界面 jsp 文件路径。注意：此路径为相对于smartbi.war/vision/ 的路径。

其它说明：

系统统一访问入口仍然为 http://localhost:18080/smartbi/vision/index.jsp；访问 Smartbi 时如果用户未登录，会自动跳转到 login_demo.jsp 页面中。
此登录界面的处理逻辑为：点击“登录”按钮时，调用 smartbi 的登录API进行登录，再重新刷新本页面。

自定义登录界面示例：

试用版水印修改

修改插件包ChangeLogo\vision\js\ext\路径下的ConfigurationPatch.js文件，配置项说明如下：

waterMarkName：试用版水印标题

帮助文档指定对应的访问地址

修改插件包ChangeLogo\vision\js\ext\路径下的ConfigurationPatch.js文件，配置项说明如下：

onlineHelpAddressConfig：自定义帮助文档跳转地址

部署扩展包

根据项目上的客户化定制需求，修改完 ChangeLogo 扩展包后，需要将其部署系统中。完整的部署过程和操作步骤，请参考扩展包部署。

关注我们

服务支持

页面树结构

更换产品显示方式_扩展包方式

修改扩展包

扩展包修改方法

浏览器标题栏title

登录界面LOGO

主界面、Config配置界面和仪表盘界面logo

Config登录界面

Config页面左上角图标

屏蔽右上角图标

屏蔽右上角更多下拉框菜单

关于页面信息

隐藏导航页的帮助，社区，官网，在线咨询列表

屏蔽搜索弹窗的帮助文档列和麦粉社区列

自定义登录界面

试用版水印修改

帮助文档指定对应的访问地址

部署扩展包