我们自己重新做了个web页面开查看报表。
主要这么些功能
- 报表目录结构较多较深时，打开不方便，我们做了三级目录分别展示
- 报表地址可以直接复制，让对方打开更为方便。
- 可以插入自己开发的web页面，报表做不到的需求随便来！
重写的登录页，源码已开放，各位小伙伴可以自行修改。
一级目录下拉框，多个tab打开时，当前打开的报表会高亮，同时一级二级树状目录都会高亮，一眼就看到报表的前三级路径。
tab的左侧有个刷新按钮，比原来hover弹出刷新按钮的方式更为方便。
二级目录在上方展示，三级目录在左侧树状结构展示，更加方便快速查看报表
自定义页面，通过配置无缝接入报表信息。只需配一个空白报表，拿到目录ID, 然后在源码的setting中设置
vuePagePaths: {
'00a9e37f-ca1f-49cc-bb0b-f30f27f7ad1f': '/testpage'
},
setting 文件 配置games 属性，可以自动打开某个目录对应的默认页面，更加方便快捷。
games: [
{
name: '财务部门',
tabs: [
{
name: '概览',
mainid: '37264d12-7597-4ee7-9068-3dd6633b108f',
},
],
},
{
name: '客服',
tabs: [
{
name: '今日',
mainid: 'f880ddb1-03dc-4559-9d4f-b7658f8770db',
}
]
}
]
源码地址 https://github.com/harryYao/FineBiWeb，使用者需要一点的前端开发基础，有webpack+vue的相关开发经验
1. git clone https://github.com/harryYao/FineBiWeb.git
2. 进入目录 cd FinebiWeb
3. 安装依赖 yarn
4. 启动开发模式 npm run dev
如果本地有安装FineBi服务，那么启动FIneBI, 打开以下地址就可以看到页面
http://localhost:37799/webroot/#
如果是线上项目
在config/index.js 文件中 修改 dev.proxyTable, target修改为你的线上地址
proxyTable: {
"/webroot/decision": {
target: "http://localhost:37799/",
changeOrigin: true
}
},
5. 配置setting, 根据你的报表目录结构，配置需要展示的目录和默认打开的页面
如何寻找目录ID？
1. 打开原来的finebi管理后台， F12找到对应iframe, 如下 其中的37264d12-7597-4ee7-9068-3dd6633b108f 就是 目录id
<iframe class="bi-single bi-iframe bi-card" frameborder="0" src="/webroot/decision/v10/entry/access/37264d12-7597-4ee7-9068-3dd6633b108f?dashboardType=4" style="width: 100%; height: 100%; left: 0px; top: 0px; position: absolute;"></iframe>
2. 开启刚才的 开发模式，点开对应的报表，url中就已经带有目录id
例如： http://localhost:37799/webroot/#/?page=a52d8875-7e31-413a-bcce-5c7059b554db&title=%E4%BA%A4%E5%8F%89%E8%A1%A8
6. 构建部署 npm run build
将构建后的dist中的全部文件拷贝到FineBI对应安装目录下的 D:\program\FineBI5.1\webapps\webroot 即可
7. 完成，
打开 http://localhost:37799/webroot/#/login 就可以看到我们的页面
编辑于 2021-3-5 12:26
|
