统一查询面板配置傻瓜手册V0.2

统一查询面板配置傻瓜手册 --戴明利

1 概述

葵花宝典之引刀自宫，精简配置。自定义查询，只需配置三项即可： a.)、配置导航树 b.)、配置新专题 c.）、配置新面板。

2 配置导航树

先配置monitor_menu的monitor_id，monitor_name，monitor_parent_id，state；后续添加面板的时候再修改monitor_url。

上述 monitor_id，monitor_name，monitor_parent_id 均可自行配置，只要每个新专题根节点的 monitor_parent_id 为空即可 。如下图：

3 配置新专题

3.1 在主页添加

1．）提单添加或修改首页链接图标 2.)修改 work_link 表链接地址

如：把相应新专题的link_value 设置成

javascript:displayMaxWindow('workshop/queryTemplate/main.html?id=4','',true)

其中ID 是 monitor_menu 对应该专题导航树根节点的monitor_id。

如下图，则 monitor_id=4：

3.2 在 网管监控-稽核报告 处添加（或其他地方添加）

网管监控-稽核报告，新增一个自定义查询，

如下图：在高额分析下添加一个“统一面板查询配置测试“”专题。

1.）添加一个“统一面板查询配置测试”专题

2.）其配置SQL在自定义查询报表中没用，如下：

3.）修改链接地址

select * from privilege t where t.privilege_name ='统一面板查询配置测试'

把相应添加的专题链接地址改成新专题的链接地址，如：

SERVER_URL_NAME=’workshop/queryTemplate/main.html?id=11’ SCRIPT_NAME=’doMenu_open()’

4.）点击相应链接即可看到新专题了。如下图：

4 配置新面板

4.1 单列表

4.1.1 配置面板BASE_PANEL

BASE_PANEL 配置面板ID和标题，ID值可以自行配置，标题可以不配置，如下图有两个面板。

注：a.）此处的面板ID在monitor_menu配置标签页时用到，见下图（html?panel=1）ID=1:

b.) 标题见下图标红处：

4.1.2 配置工具条信息PANEL_TOOLBAR, PANEL_TOOLBAR_CFG

1.) PANEL_TOOLBAR（存放所有面板的工具条配置信息，通过PANEL_TOOLBAR_CFG实现TYPE=param的工具条与BASE_PANEL的多对多关系。）

2.) PANEL_TOOLBAR_CFG在PANEL_TOOLBAR中配置的工具条需要在这里配置一下归属于那个面板

4.1.3 配置查询控件及默认值 PARAM_COMPONENT

1.) PARAM_COMPONENT（存放所有面板的查询控件，也是SQL_PARAM_CFG的“已存在的控件（COMP_ID=13）”类型的数据来源，存放所有面板的查询控件， ，配置显示控件的名称）

注：a.）PARAM_COMPONENT 的COMP_ID为查询控件的类型: 普通文本框（COMP_ID=1），日期选择框（COMP_ID=2），SQL下拉（COMP_ID=4），树形控件（通过指定SQL）（COMP_ID=7）等；CMOP_DS是相应查询控件SQL的语句。

b.) PARAM_COMPONENT 的PARAM_COMP_ID 在 SQL_PARAM_CFG的COMP_DS中相对应，且SQL_PARAM_CFG 的COMP_ID=13.

c.) PARAM_COMPONENT的 DEFAULT_VALUE 该查询控件的默认值。 当DEFAULT_VALUE 不是JS、SQL语句时，GET_TYPE=text 当DEFAULT_VALUE 是一个JS语句时，GET_TYPE=js。 当DEFAULT_VALUE 是一个SQL语句时，GET_TYPE=sql。 如：i. )

DEFAULT_VALUE=’$TODAY’ 时， GET_TYPE=text。 ii.)

DEFAULT_VALUE=’select to_char(sysdate,’yyyy-mm-dd’) from dual’ 时， GET_TYPE=sql。

d.) PARAM_COMPONENT的PARAM_COMP_ID =33时

COMP_DS的内容如下：

2.) PANEL_TOOLBAR_BY_PARAM（存放TYPE=param的工具条的具体配置信息。PARAM_COMPONENT中的那些查询控件需要在这里配置一下归属于那个工具条） 其中SORT_ID是查询控件在界面展示的顺序。

4.1.4 配置报表SQL语句SQL_CFG

测试列表的主要配置如下： SQL_ID=20401 SQL_TEXT=’

Select

to_char(t.create_time,'yyyy-mm-dd t.kpi_id,b.kpi_name,t.alarm_title

from ne_alarm_list t,kpi_code_list b

where t.create_time>=to_date(:begindate,'yyyy-mm-dd') and t.create_time

order by t.create_time,kpi_id,alarm_title’

hh24:mi:ss')create_time ,

4.1.5 配置参数表 SQL_PARAM_CFG

1.) SQL_PARAM_CFG 的SQL_ID 与SQL_CFG 的SQL_ID 一致。

2.)SQL_PARAM_CFG 的PARAM_NAME与SQL_CFG的SQL_TEXT中SQL语句的参数名称一致，

SQL_CFG的SQL_ID=20401中 SQL_TEXT，其中参数 :begindate , :enddate, :p_oprt_state 3.) SQL_PARAM_CFG的COMP_ID=13,COMP_DS= PARAM_COMPONENT相应查询控件的ID。 如下：

4.1.6 配置数据来源关联表GET_VALUE_CFG

1.) GET_VALUE_CFG 当GET_VALUE_TYPE=’SQL’ 时 GET_VALUE_ID 与SQL_CFG

的SQL_ID一致。

2.) GET_VALUE_CFG的GET_VALUE_CFG_ID给MONITOR_MENU中MONITOR_URL 提供

数据来源，如：

MONIOTOR_URL=’tabtitle@TemplateFourChart.html?panel=1&grid=30401’ 其中30401 即是GET_VALUE_CFG的GET_VALUE_CFG_ID。如下：

4.1.7 配置列表显示样式GET_VALUE_SHOW_CFG

1.) GET_VALUE_SHOW_CFG中的GET_VALUE_CFG_ID与GET_VALUE_CFG的GET_VALUE_CFG_ID一致。

2.）GET_VALUE_SHOW_CFG中的TITLE 配置列表标题，见下图：

3.）GET_VALUE_SHOW_CFG中的IS_PAGE和PAGE_SIZE 配置分页及IS_FORCEFIT 滚动条（每页 100条记录，并显示滚动条，如下图：）

4.) GET_VALUE_SHOW_CFG中的TOOLBAR_MENU_ID的值设置为21, 增加导出EXCEL功能

5.). 配置GET_VALUE_SHOW_CFG中的CONFIG_SCRIPT，实现自动换行。其值设置为： {

isNewLine:true }

6.) 配置GET_VALUE_SHOW_CFG中的CONFIG_SCRIPT，实现自动刷新 ，interval刷新频率单位毫秒。其值设置为： {

interval:3*1000 }

4.1.8 配置列表显示字段GET_VALUE_CFG_FIELD 1.) GET_VALUE_CFG_FIELD

2.)

中GET_VALUE_CFG_ID与GET_VALUE_CFG的

GET_VALUE_CFG_ID一致。

GET_VALUE_CFG_FIELD中NAME与SQL_CFG中的SQL_TEXT语句中的字段名称相对应。

4.1.9 配置列表数据源归属哪个面板，并把相应面板配置到MONITOR_MENU

的MONITOR_URL中。

4.1.10 查看配置效果

4.2 两个图表

4.2.1 模仿单列表配置两个图表的查询SQL（4.1.1~4.1.6）

1.) 图表1的SQL_CFG配置如下: SQL_ID=20402 SQL_TEXT=’

Select

to_char(t.create_time,'yyyy-mm-dd') create_time ,

count(*) cnt from ne_alarm_list t

where t.create_time>=to_date(:begindate,'yyyy-mm-dd') and t.create_time

2.）图表2的SQL_CFG配置如下: SQL_ID=20403 SQL_TEXT=’

Select

to_char(t.create_time,'yyyy-mm-dd') create_time , Sum(decode(t.oprt_state,20,1,0)) cnt2,

Sum(decode(t.oprt_state,10,1,0)) cnt1,

Sum(decode(t.oprt_state,30,1,0)) cnt3

from ne_alarm_list t

where t.create_time>=to_date(:begindate,'yyyy-mm-dd') and t.create_time

3.)

4.2.2 配置图形标题，类型等GET_CHART_CFG

1.)GET_CHART_CFG中的GET_VALUE_CFG_ID与GET_VALUE_CFG中的GET_VALUE_CFG_ID

一致

2.) GET_CHART_CFG中的CHART_TYPE为图表类型(line曲线，pie 饼图，column柱状图) 3.) GET_CHART_CFG中的TITLE即为图表标题

4.) GET_CHART_CFG中的X_LABEL，X轴显示标签 5.) GET_CHART_CFG中的Y_LABEL，Y轴显示标签

4.2.3 配置存放显示图形X轴和Y轴的信息CHART_COLUMN_CFG(插入配置信

息（使用一个X轴多个Y轴的情况）)

1.）CHART_COLUMN_CFG 中的GET_VALUE_CFG_ID与GET_VALUE_CFG中的GET_VALUE_CFG_ID一致

2.) CHART_COLUMN_CFG 中的TYPE=’METRIC’即X轴，TYPE=’ATTRIBUTE’即Y轴；COL_NAME 与 SQL_CFG的SQL_TEXT中X/Y轴对应字段名称相对应，COL_LABEL 对应字段的显示名称。

4.2.4 存放图中每条曲线（柱子）的个性化定义CHART_LINE_CFG(可不配置) 1.）CHART_LINE_CFG中的GET_VALUE_CFG_ID与GET_VALUE_CFG中的

GET_VALUE_CFG_ID一致。

2.) CHART_LINE_CFG中的LINE_NAME= Count(*)+100000（声明对那条线或柱进行定制，填入字段名）

3.) CHART_LINE_CFG中的LINE_TYPE= column（转换为线或柱，取值为line，column，放空为不改变）

4.) CHART_LINE_CFG中的LINE_COLOR= #FF0000（显示颜色，放空为不改变）

5.) CHART_LINE_CFG中的STYLE=（个性化定制接口，提供个性化需求，放空为不改变） 配置后刷新页面显示效果如下

4.2.5 配置数据源到MONITOR_MENU相应的MONITOR_URL中。

MONITOR_URL='标签页1@TemplateFourChart.html?panel=1&grid=30401/图表标签页

@TemplateFourChart.html?panel=1&chart=30402,-1,-1,30403& height=300,200&flex=1,1,1,1'

4.2.6 查看配置效果

4.3 配置列表+图表

四图表+列表的模板支持配置出最多四个图表和一个列表的面板配置模板，可配置出不定数(最多四个)图表+列表(列表也可不配置)的页面。

1.）一列表：

tabtitle@TemplateFourChart.html?panel=1&grid=3 2）两列表：

tabtitle @TemplateTwoGrid.html?panel=1&grid=3,4 3.）一图表：

tabtitle@TemplateFourChart.html?panel=1&chart=3&height=300 4.）两图表(左右结构)：

tabtitle@TemplateFourChart.html?panel=1&chart=3,2&height=300 5.）一图表+列表：

tabtitle@TemplateFourChart.html?panel=1&chart=3,-1&grid=3&height=300,200

6.）两图表+列表，flex可不配：

tabtitle@TemplateFourChart.html?panel=1&chart=3,2&grid=3&height=300,200&flex=1,2 7．）两图表+两图表，flex可不配：

tabtitle@TemplateFourChart.html?panel=1&chart=3,2,4,6&

height=300,200&flex=1,2,2,1 8．）一图表+两图表，flex可不配:

tabtitle@TemplateFourChart.html?panel=1&chart=3,-1,4,6& height=300,200&flex=1,1,2,1 9．）一图表+一图表，flex可不配，上下、左右结构均可配。上下结构配置如下: tabtitle@TemplateFourChart.html?panel=1&chart=3,-1,-1,6& height=300,200&flex=1,1,1,1

10.) 两图表+两图表+列表，flex可不配:

tabtitle@TemplateFourChart.html?panel=1&grid=3&chart=3,4,5,6&flex=1,2,2,1&height=300,300,250

11.) 一图表+两图表+列表，flex可不配:

tabtitle@TemplateFourChart.html?panel=1&grid=3&chart=3,-1,5,6&flex=1,1,2,1&height=300,300,250

12.) 一图表+一图表+列表，flex可不配:

tabtitle@TemplateFourChart.html?panel=1&grid=3&chart=3,-1,-1,6&flex=1,1,1,1&height=300,300,250

4.4 PARAM_COMPONENT查询控件

上面的例子里我们使用了文本输入框（COMP_ID=1）来实现对sid和name这两个参数的赋值。系统目前支持的控件类型都存放在COMPONENT中，使用控件时它的配置信息由3部分构成，分别为COMP_ID，COMP_DS，COMP_CFG（目前使用这些控件的配置表为SQL_PARAM_CFG和PARAM_COMPONENT）。

COMP_ID 配置使用何种控件，数据来源于COMPONENT。

COMP_DS 配置控件的数据来源，需要配置的控件包括数组下拉、SQL下拉、树形控件（通过指定URL）、树形控件（通过指定SQL）、树形控件（通过指定valuecfg）、树形控件（通过指定无Level的SQL）、分步加载树、域下拉、已存在的控件。

COMP_CFG 程序留有的接口，使用json格式。用以拓展控件的功能或配置控件的一些特有属性，以满足一些个性化需求。

接下来就依次介绍不同控件类型的配置方法，下面的演示还是建立在之前那个例子的配置数据上，选择不同控件时，默认须将SQL_PARAM_CFG的COMP_ID修改为相应控件的COMP_ID。

4.4.1.1 普通文本框（COMP_ID=1）

普通的文本输入框，无需配置COMP_DS，控件显示效果如下图

4.4.1.2 日期选择框（COMP_ID=2）

日期选择框，无需配置COMP_DS，使用的日期格式为“YYYY-MM-DD”。配置的SQL如果是使用时间过滤，则必须用to_date函数来转换参数值或者使用to_char函数来转换日期型字段，这个时候SQL_PARAM_CFG的DATA_TYPE配置成STRING。控件显示效

果如下图

4.4.1.3 数组下拉（COMP_ID=3）

下拉菜单的一种，需要配置COMP_DS。COMP_DS配置为一个嵌套的json数组，第一层数组描述有几个下拉项（系统默认会添加一个“-无-”的下拉选项以方便清空该查询条件），第二层数组的第一个元素表示下拉项的value，第二个元素表示下拉项的text。如配置COMP_DS= [[1,\测试数据1\测试数据2\测试数据3\，则显示如下图

4.4.1.4 SQL下拉（COMP_ID=4）

下拉菜单的一种，需要配置COMP_DS。COMP_DS配置为一段sql文本，sql需要返回2个字段。sql的第一个字段表示下拉项的value，第二个字段表示下拉项的text，如果只有一个字段则同时表示value和text。如配置COMP_DS= SELECT CODE,MEAN FROM CODELIST WHERE CODE_TYPE = 'DOMAIN_CIM_LINKTYPE' ORDER BY SORT_ID，则显示如下图

4.4.1.5 模糊输入框（COMP_ID=5）

与普通文本框类似，也无需配置COMP_DS，显示效果也一样。只是会在值的前后加上“%”，与sql里like配合使用。

4.4.1.6 树形控件（通过指定URL）（COMP_ID=6）

树形下拉的一种，需要配置COMP_DS。COMP_DS配置能返回符合树形控件XML数据格式的URL（基本是现有代码已经提供的，如/resource/xml/TreeType.xml中提供的一些地址）。如配置COMP_DS= /servlet/RegionTree?action=4，则显示效果如下图

4.4.1.7 树形控件（通过指定SQL）（COMP_ID=7）

树形下拉的一种，需要配置COMP_DS。COMP_DS配置为一段使用CONNECT BY的sql文本，sql需要返回3个字段，sql的第一个字段表示树节点的value，第二个字段表示树节点的text，第三个字段为关键字level。如配置COMP_DS = SELECT ORG_ID, ORG_NAME, LEVEL FROM ORGANIZATION CONNECT BY PRIOR ORG_ID = PARENT_ORG_ID START WITH ORG_ID = 0，则显示效果如下图

4.4.1.8 树形控件（通过指定VALUECFG）（COMP_ID=8）

树形下拉的一种，需要配置COMP_DS。COMP_DS配置为另一个自定义查询的GET_VALUE_CFG_ID。因为采用树形控件（通过指定SQL）和树形控件（通过指定无Level的SQL）这两种树形控件所配置的sql均为静态sql，即sql中不能使用参数。如果需要在配置sql中使用参数，则必须将这段sql配置为一个自定义查询，即配置SQL_CFG和GET_VALUE_CFG。而这个时候新定义的自定义查询的参数只能通过url的方式赋值。如现在树形控件还是显示组织树，但根节点必须动态指定。配置如下

1) 添加SQL_CFG

SQL_ID = 2

SQL_TEXT= SELECT ORG_ID, ORG_NAME, LEVEL FROM ORGANIZATION CONNECT BY PRIOR ORG_ID = PARENT_ORG_ID START WITH ORG_ID = :ROOT（注意：这里把之前写死的0改成使用root参数） SQL_TYPE=SQL

2) 添加GET_VALUE_CFG

GET_VALUE_CFG_ID=3（将配置到COMP_DS） GET_VALUE_TYPE=SQL GET_VALUE_ID=2 3) 配置COMP_DS

COMP_DS=3（新添的那个自定义查询GET_VALUE_CFG_ID） 4) 执行show_result.html

执行show_result.html?reuslt=2&root=0（通过url传入GET_VALUE_CFG_ID=3中定义的查询参数值），显示效果如下（因为传入是0所以与之前静态sql效果一样）

执行show_result.html?reuslt=2&root=2（这里的root=2是根据我数据库里一个ORG_ID，大家可以依据各自数据库里实际ORG_ID来测试效果），显示效果如下

4.4.1.9 树形控件（通过指定无LEVEL的SQL）（COMP_ID=9）

树形下拉的一种，需要配置COMP_DS。COMP_DS配置为sql文本（不使用CONNECT BY），sql需要返回3个字段，第一个字段表示树节点的value，第二个字段表示树节点父节点的value，第三个字段为树节点的text。如配置COMP_DS = SELECT ORG_ID, PARENT_ORG_ID, ORG_NAME FROM ORGANIZATION，则显示效果如下图

4.4.1.10 员工选择框（COMP_ID=10）

用于选择员工信息，无需配置COMP_DS，显示效果如下图

4.4.1.11 分步加载树（COMP_ID=11）

树形下拉的一种，需要配置COMP_DS。当树的节点过多时，一次性完全载入，将使得

页面操作十分缓慢，如网元树。这个时候就不能再使用前面说明那些树形下拉，而必须使用分布加载机制的树形下拉控件。COMP_DS配置为/WEB-INF/dbTree.xml中声明那些分布加载树。如配置COMP_DS =ne，显示效果与一般的树下拉控件无异，只是使用分布加载机制，就不截图演示了。

4.4.1.12 域下拉（COMP_ID=12）

下拉菜单的一种，需要配置COMP_DS。COMP_DS配置为TP_DOMAIN中声明的domain，将domain列表转换为下拉菜单。如配置COMP_DS = DOMAIN_LABEL_VALUE_TYPE，显示效果如下图

4.4.1.13 已存在的控件（COMP_ID=13）

为了自定义查询面板扩展的，自定义查询表格中不会使用，将在自定义面板配置中加以说明。

5 个性化配置

5.1 给某一列打底色

a.) 新建 set_colnumn_background.js ，并上传至 /workshop/queryTemplate 内容如下： function bgrender(val, p, r){ if(val=='不平衡'){ return https://www.bwwdw.com/plus/\ }

if(val=='失败'){ return https://www.bwwdw.com/plus/\ }

if(val=='2030660000001'){ return https://www.bwwdw.com/plus/\ }

return val; }

b.) 修改相应数据源的get_value_show_cfg 中的 IMPORT_JS:

IMPORT_JS=’ /workshop/queryTemplate/set_colnumn_background.js’

c.)修改相应数据源的get_value_cfg_field 的对应要打底色的列上的config_script: config_script=’{sortable: false, renderer: bgrender}’

如下图：则当KPI_ID=’2030660000001’ 或 ’不平衡’ 或 ’失败’ 时，KPI_ID列将被打成红底色。

d.)查看效果

5.2 给某一行打底色

a.)新建set_row_background.css ，并上传至 /workshop/queryTemplate 内容如下： .x-grid-back-low {

background: #FACABA; }

.x-grid-back-orange { background: orange; }

.x-grid-back-blue { background: blue; }

.x-grid-back-red { background: red; }

.x-grid-back-green { background: green; }

.x-grid-back-yellow { background: yellow; }

b.) 新建set_row_background.js ，并上传至 /workshop/queryTemplate 内容如下： function setbackground(record,rowIndex,rowParams,store) {

var v=record.get('KPI_ID');//KPI_ID字段名称要大写

//获取行记录的KPI_ID字段的值,然后根据不同的值返回在CSS定义的不同样式 if (v=='2030531100004' || v=='6030530000911'){ return 'x-grid-back-yellow' } }

c.) 修改相应数据源

get_value_show_cfg 中的 IMPORT_JS和import_css, config_script: IMPORT_JS=’ /workshop/queryTemplate/set_row_background.js’

import_css=’ /workshop/queryTemplate/set_row_background.css’ config_script=’ {viewConfig:{getRowClass:setbackground}}’ 其中 setbackground是在JS中定义的函数。

d.) 查看效果：当KPI_ID='2030531100004' 或 '6030530000911'时，整行被打黄底色。

5.3 参考杨锋以下文档, 可对字体颜色个性化定制：

统一查询面板-grid背景颜色配置.doc

5.4 配置成96球,LINK_STATE =1 正常,=0 异常,多种状态也可配。

Select

'

6 总结所有配置表单

--首页图片链接

select * from work_link ----自定义面板配置

1.BASE_PANEL（配置面板ID,标题）

2.PANEL_TOOLBAR（存放所有面板的工具条配置信息，通过PANEL_TOOLBAR_CFG实现与BASE_PANEL的多对多关系）

3.PANEL_TOOLBAR_CFG（在PANEL_TOOLBAR中配置的工具条需要在这里配置一下归属于那个面板）

4.PANEL_TOOLBAR_BY_MENU（PANEL_TOOLBAR_BY_MENU存放TYPE=menu的工具条的具体配置信息，可以不用配置）

5.PARAM_COMPONENT（存放所有面板的查询控件，也是SQL_PARAM_CFG的“已存在的控件（COMP_ID=13）”类型的数据来源，存放所有面板的查询控件，也是SQL_PARAM_CFG的“已存在的控件（COMP_ID=13）”类型的数据来源，配置显示控件的名称）

6.PANEL_TOOLBAR_BY_PARAM（存放TYPE=param的工具条的具体配置信息。PARAM_COMPONENT中的那些查询控件需要在这里配置一下归属于那个工具条） ------面板关联-- 1.sql_cfg

2.get_value_cfg

3.sql_param_cfg(参数，COMP_DS=5（数据来源为PARAM_COMPONENT中配置的查询控件标识）)

4.COMPONENT_DEFAULT_VALUE（参数默认值） 5.GET_VALUE_SHOW_CFG a.TITLE 标题，

b.IS_PAGE和PAGE_SIZE 配置分页， c.IS_FORCEFIT 滚动条，

d.TOOLBAR_MENU_ID 工具条， e.RIGHT_MENU_ID 右键菜单；

f.增加导出EXCEL功能,字段TOOLBAR_MENU_ID的值设置为21。 g.自动换行，CONFIG_SCRIPT的值设置为： {

isNewLine:true

}

h.自动刷新 interval刷新频率 单位毫秒：对字段CONFIG_SCRIPT的值设置为： {

interval:3*1000 }

6.GET_VALUE_CFG_FIELD （显示字段配置）

7.GET_CHART_CFG（配置图形标题，X、Y轴,legend:汉字说明配置,为空则不显示，如：饼图的各个组成部分的说明）

8.CHART_COLUMN_CFG(存放显示图形X轴和Y轴的配置信息，插入配置信息（使用一个X轴多个Y轴的情况）)

9.CHART_LINE_CFG（存放图中每条线（或柱子）的个性化定义）

10.MONITOR_MENU（导航树,默认标签欢迎页：default_display='0BT' ）

本文来源：https://www.bwwdw.com/article/0iao.html