电子表格FineReport教程：[3]平台外观

2024-10-24 20:48:59

下面就通过电子表格FineReport来简单介绍一下。

工具/原料

电子表格FineReport7.1.1

大小：148.2M 适用平台：windows/linux

登陆页

1、描述登录网页是指输入用户名密码登录系统页面。自定义登录网页包括设置登录背景图片和设置登录网页，如下图：

电子表格FineReport教程：[3]平台外观

2、背景图片更改若不需要调整整体登录界面格式，只需要修改背景，选择自定义登录背景图片，点击图片上传按钮，上传背景图片，然后点击保存按钮即可。注：自定义登陆界面的图片是有大小限制的，不小于1024*768。

电子表格FineReport教程：[3]平台外观

3、效果查看保存设置之后，登出系统，可以看到登录页面的背景图片更改了，如下图：

电子表格FineReport教程：[3]平台外观

4、更改登录网页若不希望使用内置的登陆界面，想自定义一个网页作为登陆界面，请选择设置登录网页完全自定义登录界面，如下图：

电子表格FineReport教程：[3]平台外观

5、login.html页面的代码如下：<html> <head> <script type="text/javascript" src="ReportServer?op=emb&resource=finereport.js"></script> <script type="text/javascript"> function doSubmit() { var username = FR.cjkEncode(document.getElementById("username").value); //获取输入的用户名 var password = FR.cjkEncode(document.getElementById("password").value); //获取输入的参数 jQuery.ajax({ url:"http://localhost:8075/WebReport/ReportServer?op=fs_load&cmd=sso",//单点登录的报表服务器 dataType:"jsonp",//跨域采用jsonp方式 data:{"username":username,"password":password},//获取用户名密码 jsonp:"callback", timeout:5000,//超时时间（单位：毫秒） success:function(data) { if (data.status === "success") { window.location=data.url; //登录成功 } else if (data.status === "fail"){ alert("用户名或密码错误");//登录失败（用户名或密码错误） } }, error:function(){ alert("超时或服务器其他错误");// 登录失败（超时或服务器其他错误） } });} </script> </head> <body> <p>请登录</p> <form name="login" method="POST"> <p> 用户名: <input id="username" type="text" /> </p> <p> 密码: <input id="password" type="password" /> </p> <input type="button" value="登录" onclick="doSubmit()" /> </form> </body> </html>

6、效果查看点击保存，登出系统，看到的登录页面如下图：

电子表格FineReport教程：[3]平台外观

首页

1、描述首页就是指用户登录FineReport数据决策系统之后，首页的链接。FineReport平台可实现不同用户登录系统查看不同的首页。

2、默认首页数据决策系统默认首页是FineReport的一张模板，默认首页标签不能修改名字，不能选择用户，即默认首页是所有用户都能看的到的，只能修改其URL，如下图：

电子表格FineReport教程：[3]平台外观

3、效果查看点击保存，刷新页面，可以看到首页页面变成了FineReport官网，如下图：

电子表格FineReport教程：[3]平台外观

4、自定义首页自定义首页是指新添加一个首页标签，并将该首页的分配给不同的用户，那么该用户登录系统的时候看到的首页不是默认首页，而是自定义首页。

5、添加首页标签在首页栏中点击添加按钮，新增一个首页标签，如下图：

电子表格FineReport教程：[3]平台外观

6、设置URL选中刚刚新建的首页标签，在右侧的URL地址文本框中输入新的首页地址，如下图：

电子表格FineReport教程：[3]平台外观

7、分配使用权限在右侧的用户选择框中，勾选技术支持部门，那么该部门的所有用户登录系统时，如下图：

电子表格FineReport教程：[3]平台外观

8、效果查看点击保存，首页就设置好了，下面我们分别使用技术支持部门的用户和非技术支持部门的用户登录系统查看效果。使用技术支持部门的Anna登录系统，可以看到该用户的首页显示为帆软的bbs：

电子表格FineReport教程：[3]平台外观

9、使用非技术支持部门的Lily登录系统，其首先显示的是默认首页地址，帆软的官网地址，如下图：

电子表格FineReport教程：[3]平台外观

平台样式

1、描述平台样式的设置包括平台标题、顶部导航栏、配色选择和背景图片。

2、平台标题平台的标题默认为数据决策系统，有时候为了跟整个公司的系统统一，希望能够直接修改平台标题，使用自己公司的名称，可在管理系统>平台外观>平台样式中的平台标题后面的文本框中输入需要更改的标题，如下图：

3、开启顶部导航栏顶部导航栏是指系统顶部的导航按钮，可以设置将导航按钮显示在顶部或者是左侧，如下图：

电子表格FineReport教程：[3]平台外观

4、自定义图标开启顶部导航栏时，可自定义顶部导航栏图标，在自定义图标选项中单击需要修改图标样式的目录，比如说报表展示，弹出图标编辑对话框，可使用FR内置的两种图标方案，也可自定义，即上传图标图片，如下图：

电子表格FineReport教程：[3]平台外观

5、FR内置图标样式有两种：素雅和缤纷，两种样式中有多个不同的图标可选择。选择缤纷样式中的粉红图标，保存设置，刷新页面，如下图：

电子表格FineReport教程：[3]平台外观

6、关闭顶部导航栏如果用户不想将导航栏显示在顶部，可以关闭顶部导航栏，效果如下图：注：数据决策系统的顶部导航栏是默认开启的，并且导航栏关闭之后，没有自定义图标选项。

电子表格FineReport教程：[3]平台外观

7、配色选择配色是指数据决策系统的整体颜色的配置，FR内置有3种不同的配色选择，系统默认选择第二个配色，如下图，将配色方案更改为第一个：

电子表格FineReport教程：[3]平台外观

8、效果查看点击保存按钮，刷新页面，如下图，可以看到系统配色发生了变化：

电子表格FineReport教程：[3]平台外观

9、背景图片背景图片是指系统的背景图片，如下图，可点击上传按钮上传图片进行修改：

电子表格FineReport教程：[3]平台外观

10、效果查看点击上传按钮，上传一张符合尺寸要求的背景图片，在预览选项中图片显示出来之后，点击保存按钮，刷新页面，即可看到效果，如下图：

电子表格FineReport教程：[3]平台外观

相关推荐

电子表格FineReport中FS的介绍

电子表格FineReport中cookie的介绍

电子表格FineReport中控件事件的分类

电子表格FineReport中事件响应的方式

电子表格FineReport中如何设置动态打印

猜你喜欢

猜你喜欢