隐藏界面操作

<< Click to Display Table of Contents >>

当前位置:  部署与集成 

隐藏界面操作

复制链接

1.概述

用户在将BI产品集成到自己的系统中时，经常会有需要根据实际需要隐藏相关操作的场合，产品支持用户通过自定义css文件、配置bi.properties属性、配置URL参数控制数据源、数据集和报告、Wap端界面操作的隐藏、显示。

2.自定义css文件

自定义css文件隐藏功能步骤：数据源、数据集、报告、Wap模块先获取支持的data-locator，其他模块通过浏览器开发工具（F12）先获取css元素，然后定义css文件，在bi.properties中添加属性external.resources=XXX.css（XXX为css文件名称），其次重启BI，最后进入产品对应界面，确认功能隐藏。

➢说明：

data-locator是一种简单定位元素的方式，浏览器开发工具的css标准规则是一种精准定位元素的方式。

2.1支持data-locator的页面元素的隐藏

当用户想要隐藏制作报告左侧资源树上方的更多/刷新和报告中的第一个分隔线（分隔线包括横向和竖向），可通过指定data-locator将其隐藏。

1)在产品安装路径/bihome路径新建css文件，在下文中找到操作的data-locator 放入css文件，并设置该操作的display:none !important;。

css文件中data-locator内容写法如下：

[data-locator=db-editor] [data-locator=menu-rep-tree] [data-locator=action-refresh]  

{ 

        display:none !important;

}

[data-locator=action-separator-0]

{

        display:none !important;

}

2)在bi.properties中添加属性external.resources=XXX.css（XXX为css文件名称），然后重启。

hiddenaction

3)打开制作报告页面左侧资源树上方的更多/刷新和报告中的第一个分隔线（分隔线包括横向和竖向）已隐藏，隐藏前后对比图如下。

set_db_data_locator_eg

2.2数据源界面的data-locator

[data-locator=conn-editor] [data-locator=conn_tree] [data-locator=action-newConn]       左侧资源树上方的新建

[data-locator=conn-editor] [data-locator=conn_tree] [data-locator= tree] [data-locator= searchInput]      左侧资源树上方的搜索栏   

[data-locator=conn-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=toolButton]      左侧资源树上方的驱动管理    

[data-locator=conn-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=moreButton] [data-locator=action-tree-more]      左侧资源树上方的更多

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-add-folder]      左侧资源树上方的更多/新建文件夹       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-paste-to-root]      左侧资源树上方的更多/粘贴      

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-refresh]      左侧资源树上方的更多/刷新     

db_3

[data-locator=conn-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=action-common-search]       数据源/搜索       

[data-locator=conn-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=action-common-tree-more]       数据源/更多       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-open]       数据源/打开数据源       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-rename]       数据源/重命名       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-copy]       数据源/复制       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-move]       数据源/移动到…       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-paste]       数据源/粘贴       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-remove]       数据源/删除       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-refreshConn]       数据源/刷新数据       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-newQuery]       数据源/新建数据集   

db_0_zoom81    

[data-locator=conn-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=action-common-tree-more]       文件夹/更多       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-rename]       文件夹/重命名       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-add-folder]       文件夹/新建文件夹       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-copy]       文件夹/复制       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-paste]       文件夹/粘贴       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-move]       文件夹/移动到…       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-remove]       文件夹/删除       

db_1

[data-locator=conn-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=action-common-tree-more]       表/更多       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-addTable]       表/新建表…       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-refreshConn]       表/刷新数据       

db_6

[data-locator=conn-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=action-common-detaildata]       表名/预览数据       

[data-locator=conn-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=action-common-tree-more]       表名/更多    

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-addTable]       表名/新建表…       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-removeTable]       表名/删除表       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-refreshConn]       表名/刷新数据       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-newDB]       表名/新建报告       

db_8

[data-locator=conn-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=action-common-tree-more]       视图/更多       

[data-locator=conn-editor] [data-locator=menu] [data-locator=action-refreshConn]       视图/刷新数据       

db_9   

[data-locator=conn-editor] [data-locator=g-toolbar] [data-locator=action-editParamQry]       数据库配置信息上方/编辑参数       

[data-locator=conn-editor] [data-locator=g-toolbar] [data-locator=action-refreshParamQry]       数据库配置信息上方/刷新参数

[data-locator=conn-editor] [data-locator=g-toolbar] [data-locator=action-settingQry]      数据库配置信息上方/设置

[data-locator=conn-editor] [data-locator=g-toolbar] [data-locator=action-createQry]       数据库配置信息上方/新建数据集   

[data-locator=conn-editor] [data-locator=g-toolbar] [data-locator=action-testConn]        数据库配置信息上方/测试连接

[data-locator=conn-editor] [data-locator=g-toolbar] [data-locator=action-saveConn]       数据库配置信息上方/保存       

[data-locator=conn-editor] [data-locator=g-toolbar] [data-locator=action-saveAsConnection]       数据库配置信息上方/另存为                     

db_5_zoom53

2.3数据集界面的data-locator

[data-locator=qry-editor] [data-locator=conn_tree] [data-locator=action-newQuery]         左侧资源树上方的新建

[data-locator=qry-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=searchInput]      左侧资源树上方的搜索栏       

[data-locator=qry-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=toolButton]      左侧资源树上方的数据脱敏       

[data-locator=qry-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=moreButton] [data-locator=action-tree-more]      左侧资源树上方的更多      

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-add-folder]      左侧资源树上方的更多/新建文件夹       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-openLineageAnalyze]      左侧资源树上方的更多/打开查看血缘       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-paste-to-root]      左侧资源树上方的更多/粘贴       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-refresh]      左侧资源树上方的更多/刷新       

query_0

[data-locator=qry-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=action-common-tree-more]       文件夹/更多      

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-rename]       文件夹/重命名       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-add-folder]       文件夹/新建文件夹       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-copy]       文件夹/复制       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-move]       文件夹/移动到…       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-paste]       文件夹/粘贴       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-remove]       文件夹/删除       

query_3

[data-locator=qry-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=action-common-detaildata]       数据集/数据详情       

[data-locator=qry-editor] [data-locator=conn_tree] [data-locator=tree] [data-locator=action-common-tree-more]       数据集/更多       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-open]       数据集/打开数据集       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-rename]       数据集/重命名       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-openLineageAnalyze]       数据集/查看血缘       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-downloadQryItem]       数据集/下载…       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-copy]       数据集/复制       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-move]       数据集/移动到…       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-paste]       数据集/粘贴       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-remove]       数据集/删除       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-newDB]       数据集/新建报告

query_5

[data-locator=qry-editor] [data-locator=g-toolbar] [data-locator=action-editParamQry]       数据集信息上方/编辑参数   

[data-locator=qry-editor] [data-locator=g-toolbar] [data-locator=action-refreshParamQry]       数据集信息上方/刷新参数

[data-locator=qry-editor] [data-locator=g-toolbar] [data-locator=action-settingQry]  数据集信息上方/设置   

[data-locator=qry-editor] [data-locator=g-toolbar] [data-locator=action-perfQry]       数据集信息上方/检测性能  

[data-locator=qry-editor] [data-locator=g-toolbar] [data-locator=action-downloadQry]       数据集信息上方/下载

[data-locator=qry-editor] [data-locator=g-toolbar] [data-locator=action-createDB]       数据集信息上方/新建报告                

[data-locator=qry-editor] [data-locator=g-toolbar] [data-locator=action-saveQry]       数据集信息上方/保存       

[data-locator=qry-editor] [data-locator=g-toolbar] [data-locator=action-saveAsQry]       数据集信息上方/另存为                 

[data-locator=qry-editor] [data-locator=g-toolbar]       数据集信息上方/分隔横线       

[data-locator=qry-editor] [data-locator=export_more_button]       打开数据集/更多       

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-export_query_data]       打开数据集/导出到数据库

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-export_query_data_csv] 打开数据集/导出为CSV文件

[data-locator=qry-editor] [data-locator=menu] [data-locator=action-export_query_data_excel] 打开数据集/导出为Excel文件      

[data-locator=qry-editor] [data-locator=export_query_data]       打开数据集/抽取数据       

[data-locator=qry-editor] [data-locator=export_query_data]       打开数据集/禁止下载       

query_2_zoom54

2.4报告界面的data-locator

报告界面相关的data-locator，可以通过以下方式获取：

浏览器打开开发者模式，在控制台输入命令行“window.getYHAPI('startFindUILocator').then((m) => {m()});”回车，然后点击操作，控制台会返回data-locator。

使用完成后在控制台输入命令行“window.getYHAPI('stopFindUILocator').then((m) => {m()});”结束查找data-locator。

get_locator_zoom69

➢说明：

此方法目前只支持获取报告界面的data-locator。

2.5Wap界面的data-locator

[data-locator=hidden-download] 下载

[data-locator=hidden-search] 搜索框

[data-locator=hidden-header] 工具栏

waptop_zoom22

2.6没有支持data-locator的页面元素的隐藏

•当用户希望将管理系统中的监控预警模块隐藏，但没有支持data-locator，可通过浏览器开发者工具（F12）的css标准规则定位到对应的元素将其隐藏。

1)首先访问页面，打开浏览器开发者工具（F12）, 通过定位工具找到需要隐藏的元素。

locatecsselement_zoom47

Head-container-lv1即定位到对应元素，父元素为head-div-list, 可以多写几个父层级精准定位。head-div-list下有多个平行同名的元素可以通过类选择器定位。

:nth-child为css的定位语法， 意为当前元素下的第4个子节点。

css文件中元素标准规则写法如下：

.yh-console .yh-console-manage .level1-container .head-div .level1 .head-div-list :nth-child(4)

{

display:none !important;

}

常见的css选择器，可参考CSS - 常用的伪类选择器简单介绍与基本使用，不仅支持隐藏，还支持修改颜色等样式。

2)在bi.properties中添加属性external.resources=XXX.css（XXX为css文件名称），然后重启。

hiddenaction

3)打开管理系统，监控预警页面已隐藏，隐藏前后对比图如下。

setauditcssegg_zoom62

3.配置bi.properties属性

•hidden.command.bar=true，同时隐藏首页、退出等按钮

•hide.portal.home.icon=true，隐藏门户的首页图标。

•hide.portal.exit.icon=true，隐藏门户的退出图标。

•hidden.portal.bar.greet=true，隐藏门户的问候语。

•hide.advanced.options=true，隐藏个人中心-个性化设置中的邮箱、账号密码

•qrcode.visible=true，隐藏个人中心的服务器二维码

•ml.homepage.hide=true，隐藏深度分析内置的行业案例。

•permission.asset.author.hide=true，隐藏【管理系统>认证授权】下的授权编辑标签页。

•sched.type.email.hide=true，隐藏发送邮件。

•user.edit.strict=true，隐藏【系统设置 > 认证授权 > 用户邮箱、用户密码、批量导入用户、批量导出用户。

•global.action.hidden=XXX，隐藏数据源、数据集、订阅、邮箱、作业执行提醒设置、网页组件

•phone.browser.showToolbar=true，隐藏移动端报告顶部的工具栏

•hideDBToolbar=hide,hide,hide，隐藏移动端报告工具栏上的返回、标题、更多菜单

•hideFullscreenToolbar=hide,hide,hide，隐藏移动端组件工具栏上的返回、标题、更多菜单

•light.db.toolbar=false，隐藏轻应用内报告的工具栏

4.配置URL参数

•在手机浏览器URL后面添加参数dbToolbar=false，隐藏当前浏览器查看的报告的顶部工具栏

•在手机浏览器URL后面添加参数download=false，隐藏当前浏览器下载App入口

•在手机浏览器URL后面添加参数hideDBToolbar=true，隐藏当前浏览器报告工具栏上的返回、标题、更多菜单

•在手机浏览器URL后面添加参数hideFullscreenToolbar=true，隐藏当前浏览器组件工具栏上的返回、标题、更多菜单

•在手机浏览器URL后面添加参数hideAttention=true，隐藏当前浏览器报告收藏功能

•在手机浏览器URL后面添加参数showToolbar=false，隐藏当前浏览器首页菜单、搜索框。

•在手机浏览器URL后面添加参数lightDBtoolbar=false，隐藏轻应用内报告的工具栏