主题系统（V8.0及之后版本）：- 所有主题包位于 WebReport/WEB-INF/resources/fstheme/ 目录下
- 默认是不存在这个fstheme这个文件夹的，当您通过决策平台-管理系统-平台外观-主题-添加主题，将您从【FR-平台主题】版块下载的zip包导入后保存，即可自动生成fstheme文件夹，刷新决策平台即可看到新主题
概要：一个主题的美观度是由大背景图片＋主题配色＋主题包三大部分共同决定的。整体配色主要由背景图片和配色决定，这些可以在决策平台-管理系统-平台外观里自己配置；整体的交互和布局主要是由主题包来完成的，代码写的越多，可以变化的东西也越多，当然背景图片和主题配色可以都通过开放的API来在主题包的代码中来修改，并不局限于平台外观配置。
主题包格式：
- fs-theme-[主题名] (注：主题名建议使用非中文)
- |----style.css //导入样式
- |----theme.js //导入脚本
- |----cover.png //主题包封面( 建议尺寸240*170 )
- |----其他目录(包括需要使用到的一些自定义资源文件)
请不要被以下内容欺骗，其实很简单，建议下载几个主题包看看，点此直达
组件开放接口：
- 框架中总共有5大组件，分别是框架布局，目录树组件，多tab组件，Navigation组件和Gallery组件。
- {
- isCustom: true, //是否是自定义主题
- name: 'myTheme', //主题名称
- //框架布局配置属性
- config4frame: {},
- //Navigation配置属性
- config4navigation: {},
- //目录树组件配置属性
- config4MenuTree: {},
- //多tab组件配置属性
- config4tabPane: {}
- }
- <blockquote>config4frame = {
- config4MenuTree = {
- region: 'west', //默认所在区域
- onBeforeInit: null, //初始化前事件，参数：[element]
- onAfterInit: null, //初始化后事件，参数：[element]
- onDataFilter: null, //节点数据过滤事件，参数:[node, childNodes]
- onBeforeNodeClick: null, //函数，节点点击前事件，参数: [node, $node, $li]
- onNodeClick: null, //函数，节点点击事件，参数: [node, $node, $li]
- onAfterNodeClick: null, //函数，节点点击后事件，参数: [node, $node, $li]
- onBeforeNodeCreate: null, //函数，节点创建前事件，参数:[node, $node, $li]
- onNodeCreate: null, //函数，节点创建事件，参数:[node, $node, $li]
- onAfterNodeCreate: null, //函数，节点创建后事件，参数:[node, $node, $li]
- onBeforeNodeExpand: null, //函数，节点展开前事件，参数:[node, $node, $li]
- onNodeExpand: null, //函数，节点展开事件，参数:[node, $node, $li]
- onAfterNodeExpand: null, //函数，节点展开后事件，参数:[node, $node, $li]
- onBeforeNodeCollapse: null, //函数，节点收起前事件，参数:[node, $node, $li]
- onNodeCollapse: null, //函数，节点收起事件，参数:[node, $node, $li]
- onAfterNodeCollapse: null, //函数，节点收起后事件，参数:[node, $node, $li]
- onBeforeDisplayNodes: null, //函数，节点展示前事件，参数:[node, $node, $li]
- onDisplayNodes: null, //函数，节点展示事件，参数:[node, $node, $li]
- onAfterDisplayNodes: null //函数，节点展示后事件，参数:[node, $node, $li]
- }
- 参数说明：
- 1. node - 节点对象
- node = {
- text: '日报', //entry名
- id: '213', //entry id
- isexpand: false, //是否展开
- hasChildren: true, //是否具有子节点
- ChildNodes: [], //子节点数组
- isModule: false, //是否是标签页节点
- level: 1 //树深度，从0计数
- }
- 2. $node - 节点的DOM对象
- 3. $li - 节点所处的父层DOM对象
- config4tabPane = {
- region: 'east', //默认所在区域
- style: 'alpha', //内置样式，包括alpha和bravo两种选择
- tabWidth: 150, //单个tab标签的最大宽度
- isCollapsible: true, //是否可以收起
- hasHomepageBtn: false, //是否有主页按钮
- onCreateTab: null, //函数，创建Tab标签时的操作，可修改标签样式(全局)，参数:[$tab, entry]
- onSelectTab: null, //函数，选中每个Tab页面时的操作，可修改内容(全局)，参数:[$tab, $content, entry]
- onCloseTab: null, //函数，关闭每个Tab页面时的操作(全局)，参数:[$tab, $content, entry]
- afterLoadTab: null, //函数，加载每个Tab页面时的操作(全局)，参数:[$tab, $content, entry]
- }
- 开放方法：
- 1. FS.tabPane.addItem(item)
- 方法: 向多tab组件里添加并打开一个tab，如果tab已经存在，则直接选中；若不存在，则添加并选中。
- 参数: item {JSON}
- item = {
- text: 'newTab', //必须, tab标签名
- id: '213', //entry id
- url: 'http://www.finereport.com', //可选，正文内容为链接，iframe嵌入
- onCreate: null, //函数，创建Tab标签时的操作，可修改标签样式，参数:[$tab, entry]
- onSelect: null, //函数，选中每个Tab页面时的操作，可修改内容，参数:[$tab, $content, entry]
- onClose: null, //函数，关闭每个Tab页面时的操作，参数:[$tab, $content, entry]
- afterLoad: null, //函数，加载每个Tab页面时的操作，参数:[$tab, $content, entry]
- }
- config4navigation = {
- onBeforeInit: null, //初始化前事件
- onAfterInit: null //初始化后事件
- }
- config4Gallery: {
- region: null //默认所在区域
- }
主题包开发：
- 自定义主题包实为引入的外部js、css以及资源文件等。
- (function ($) {
- FS.THEME = $.extend(true, FS.THEME, {
- /**需要扩展的配置属性**/
- });
- })(jQuery);
- {
- config4frame: {
- resizable: true,
- //上区域
- north: {
- visible: true //是否可见
- },
- //下区域
- south: {
- visible: false //是否可见
- },
- //左区域
- west: {
- width: 230 //宽度
- },
- //右区域
- east: {}
- },
- config4Gallery: {
- region: null
- },
- config4MenuTree: {
- region: 'west'
- },
- config4tabPane: {
- region: 'east',
- style: 'bravo',
- isCollapsible: false,
- hasHomepageBtn: true
- },
- config4navigation: {
- onBeforeInit: null,
- onAfterInit: null
- }
- }
- {
- config4frame: {
- resizable: false,
- south: {
- visible: true
- }
- },
- config4Gallery: {
- region: 'east'
- },
- config4MenuTree: {
- onNodeExpand: function (node, $node, $parent) {
- return node.level !== 0;
- },
- onNodeClick: function (node, $node, $parent) {
- $('#fs-frame-wrapper') .empty();
- return false;
- }
- },
- config4tabPane: {
- style: 'alpha',
- region: 'south',
- isCollapsible: true,
- hasHomepageBtn: false
- }
- }
主题包示例：
→_→ 点此查看和下载更多FineReport平台主题
系统配色- 系统配色主要有4种：高亮色、图标外框色、底栏色和文字色，可通过复写css来修改任意地方的样式或者配色
- 颜色1——高亮色。“收藏”“消息”“个人中心”三个图标选中状态及tab选中项提亮色，
- 颜色2——图标外框色。导航栏图标外围色；
- 颜色3——底栏色。左侧导航栏激活项背景色以及Tab栏背景颜色；
- 颜色4——文字色。字体颜色。
系统配色分别对应如下css样式：
高亮色 - .fui-bsb{
- background-color: @color;
- }
- .fui-bsc{
- color: @color;
- }
- .fui-bsd{
- border-color: @color;
- }
图标外框色 - .fui-fhc{
- color: @color;
- }
- .fui-fht{
- text-shadow: 0 0 3px @color;
- }
底栏色 - .fui-seb{
- background-color: @color;
- }
文字色 - .fui-fbc{
- color: @color;
- }
- .fui-fbt{
- text-shadow: 0 0 1px @color;
- }
请求接口获取管理系统节点 | 请求 | 参数 | | FR.servletURL + "?op=fs_main&cmd=getmoduleitems" | {id: -1} |
获取目录树节点 | 请求 | 参数 | | FR.servletURL + "?op=fs_main&cmd=module_getrootreports" | {id: 1}
|
标签页单独集成
- <span style="font-weight: normal;"><font size="2">FS.loadModule(render, moduleName)
- 方法：根据模块名加载对应模块配置页面，用于集成独立页面
- 参数： render 渲染dom
- moduleName 模块名
- 例如：FS.loadModule($('<div/>').appendTo('body'), 'report');</font></span>
集成并加载指定标签模块，模块名列表如下：
| 模块名 | 参数值 | | 报表管理 | report | | 用户管理 | user | | 权限管理 | privilege | | 定时调度 | schedule | | 系统管理 | sysmgr | | 平台外观 | plate | | 注册信息 | register | | 系统监控 | monitor | | 移动平台 | mobile
|
可参考api调用实例:
demo.html
(1.28 KB, 下载次数: 341)
注: 必须先做单点登录，只有登录FS才有访问标签页的权限。
用户注销
- FS.signOut()
- 方法：注销当前登录的用户，并返回登录页面。
- 参数：无。
|
