提问
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

生产大屏模板分享

天狮座 社区微信达人实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-10 13:47 | 显示全部楼层 |取消关注该作者的回复
报表模板投稿
功能演示:
功能说明:
打码了
此模板为本公司大屏项目模板
59154599503851464f.png
854245995045f3f336.png
83992599504cc8439e.png
8554759950438d3d8b.png
背景用的暗色调背景,尺寸都是1920*1080,目前还是初稿,希望大家能够多提意见
既然马上要升为精华帖,叫兽们让我写下心得:
1.帆软的大屏模板确实很少,而且问过技术支持很多也不是很清楚。大屏效果其实需要很炫的,而且大多是要动态的才好看,静止的大屏是会“烧屏幕”的,我觉得肯定会有很少人想到这点。
2.大屏最重要的是展示什么?我们公司做大屏时,做方案就用了半个月,半个月就是为了展示的样式和方案,讨论了很长时间才确定下来,毕竟之前都没有尝试过,所以做大屏的时候,我觉得最重要的还是展示的数据。如果用来给拜访人员用的,就做一些炫丽的总体数据。给业务人员看的,应该做几样详细数据表,然后稍微加点好看的效果。
3.大屏显示的风格,现在大屏风格大体上都是暗色调或者有个别的浅色调也很好看,选中风格很重要,毕竟这个风格要跟着你的大屏过一辈子
4.能不能多搞点动态效果,能不能多搞点动态效果,能不能多搞点动态效果!!!{:9_850:}{:9_850:}{:9_850:}想要炫,我们也要能动起来才能够炫啊,不然我以前学的AE啥的都无处发挥啊。(帆软的动态变化太小了,据我目前知道的只有柱状图和折线图那种点和柱就动一动,柱状图动的还有点模糊,动态确实有点鸡肋)
5.希望这次插件开发能够多搞点与Echarts集成的插件,毕竟说实话Echarts效果确实炫点。

关于js动态背景等大家比较关心的问题,我重新发了一个帖子:http://bbs.fanruan.com/thread-95220-1-1.html
然后大家觉得JS动态背景还不太懂的,就可以看看这个:http://help.finereport.com/doc-view-2125.html 记得给点个赞哟~
编辑于 2017-8-22 17:15  

编辑于 2017-8-23 10:12  

评分

参与人数 3F豆 +121 F币 +38 收起 理由
亚虎-小王 + 5 默默地点个赞,然后闪人
jiangsr + 50 默默地点个赞,然后闪人
兔子酱 + 66 + 38 感谢参与精华帖奖励计划!

查看全部评分

此帖共有 5402 位番薯登录后查看
回复

使用道具 举报

天狮座 社区微信达人实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-11 11:10 | 显示全部楼层 |取消关注该作者的回复
先添加一张动态的背景图片,然后在初始化里加js:
setTimeout(function(){
        $('.widgetBackground').css('background','url(http://localhost:8075/WebReport/picture/1.gif)');
},100);
(注意url里面的路径)
非常感谢cherishdqy妹子,解决了背景不能用GIF动态图片的问题 编辑于 2017-8-11 11:11  
编辑于 2017-8-21 08:50  
  收起(8)
  • zzydsg1989 zzydsg1989 : 按这个做还是实现不了,哪里出错了?{:8_213:}
    2017-08-17 18:38 评论
  • 天狮座 天狮座 : 额。。。你加一个我QQ,我给你看看
    2017-08-18 08:06 评论
  • 打咕基 打咕基 : 回复 天狮座 :初始化加在哪儿?
    2017-08-18 14:40 评论
  • 天狮座 天狮座 : 回复 打咕基 :初始化???
    2017-08-18 14:45 评论
  • 打咕基 打咕基 : 回复 天狮座 :您说的是在初始化里面加那一段js的呀,请问加在哪儿
    2017-08-18 14:48 评论
  • 还有3条评论 点击查看

    评论

回复 支持 反对

使用道具 举报

兔子酱 社区微信达人帆软员工 管理员
发表于 2017-8-17 09:41 | 显示全部楼层 |取消关注该作者的回复
根据帆软论坛运营委员最终评分,本篇帖子综合得分38分,具体参见:帆软论坛精华帖奖励计划
恭喜@天狮座,同时也希望更多的番薯积极参与精华帖奖励计划!
  • 评论

回复 支持 反对

使用道具 举报

天狮座 社区微信达人实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-10 13:53 | 显示全部楼层 |取消关注该作者的回复
唯一我觉得做大屏有点不爽的是,背景不能动态图片或者视频,要是能用动态的,大屏效果会非常好
  收起(5)
  • 传说哥 传说哥 : 提需求~~{:8_198:}
    2017-08-10 14:22 评论
  • 天狮座 天狮座 : 咋提啊
    2017-08-10 15:00 评论
  • cherishdqy cherishdqy : 背景动态图片可以用js实现~
    2017-08-10 15:57 评论
  • 天狮座 天狮座 : 回复 cherishdqy :怎么做?求教
    2017-08-10 16:03 评论
  • 天狮座 天狮座 : 回复 cherishdqy :大神,怎么用js能够做出动态背景啊
    2017-08-10 17:19 评论
  • 评论

回复 支持 反对

使用道具 举报

大欧 帆软员工 管理员
发表于 2017-8-10 13:59 | 显示全部楼层 |取消关注该作者的回复
做的很炫嘛!
  • 评论

回复 支持 反对

使用道具 举报

cherishdqy 社区微信达人实名认证 番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP2
发表于 2017-8-10 14:25 | 显示全部楼层 |取消关注该作者的回复
已提名精华帖,待论坛运营委员会评分后可评为精华帖,帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html
楼主可以分享一下做大屏的心得体会,补充些模板的内容,有助于提高评分哈~
  收起(1)
  • 传说哥 传说哥 : 666666666666
    2017-08-11 13:44 评论
  • 评论

回复 支持 反对

使用道具 举报

yiminglian 社区微信达人实名认证 番薯互助团队 互助新人
发表于 2017-8-10 14:28 | 显示全部楼层 |取消关注该作者的回复
值得鼓励
  • 评论

回复 支持 反对

使用道具 举报

天狮座 社区微信达人实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-10 14:33 | 显示全部楼层 |取消关注该作者的回复
59529598bfe1f89e7a.png
补上第四张图
  收起(2)
  • cherishdqy cherishdqy : 这张图可以补到帖子里哈~
    2017-08-10 15:18 评论
  • 天狮座 天狮座 : 回复 cherishdqy :已补
    2017-08-10 15:25 评论
  • 评论

回复 支持 反对

使用道具 举报

天狮座 社区微信达人实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-10 14:34 | 显示全部楼层 |取消关注该作者的回复
模板中,除了main主图是固定位置,其他四张图是每30s自动跳转一次,因为这是满足我们公司的需要
  • 评论

回复 支持 反对

使用道具 举报

星痕 社区微信达人番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP1
发表于 2017-8-10 15:36 | 显示全部楼层 |取消关注该作者的回复
  • 评论

回复 支持 1 反对 0

使用道具 举报

cherishdqy 社区微信达人实名认证 番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP2
发表于 2017-8-10 17:29 | 显示全部楼层 |取消关注该作者的回复
在表单body的初始化事件中添加下面的代码,可以实现动态切换背景图,不过有点小问题,第一次切换时背景变空白了,后面就正常了,我还没找到原因。把背景图片放到项目下,表单的主体背景是将图片转化为base64格式存储到文件中的,所以需要做一下转换。
  1. var img1 = "http://localhost:8075/WebReport/back1.png";//imgurl 就是你的图片路径
  2. var img2 = "http://localhost:8075/WebReport/back2.png";
  3. var image = new Image();
  4. var base64 = '';
  5. var flag = 1;

  6. setInterval(function()
  7. {
  8.     if(flag == 1)
  9.     {
  10.         image.src = img1;
  11.         image.onload = function(){
  12.             base64 = getBase64Image(image);
  13.         }
  14.         $('.widgetBackground').css('background','url("'+base64+'")');
  15.         flag = 2;
  16.     }
  17.     else
  18.     {
  19.         image.src = img2;
  20.         image.onload = function(){
  21.             base64 = getBase64Image(image);
  22.         }
  23.         $('.widgetBackground').css('background','url("'+base64+'")');
  24.         flag = 1;
  25.     }
  26. },10000);

  27. function getBase64Image(img) {
  28.     var canvas = document.createElement("canvas");
  29.     canvas.width = img.width;
  30.     canvas.height = img.height;
  31.     var ctx = canvas.getContext("2d");
  32.     ctx.drawImage(img, 0, 0, img.width, img.height);
  33.     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
  34.     var dataURL = canvas.toDataURL("image/"+ext);
  35.     return dataURL;
  36. }
复制代码


编辑于 2017-8-10 17:30  
  收起(1)
  • 天狮座 天狮座 : 666666,妹子给个联系方式
    2017-08-10 17:33 评论
  • 评论

回复 支持 1 反对 0

使用道具 举报

传说哥 社区微信达人实名认证 番薯互助团队 帆软员工 管理员
发表于 2017-8-11 13:46 | 显示全部楼层 |取消关注该作者的回复
5.希望这次插件开发能够多搞点与Echarts集成的插件,毕竟说实话Echarts效果确实炫点。
——这次大赛不限制开源库的使用,百家争鸣,必能出精品
  收起(1)
  • 天狮座 天狮座 : {:8_202:}那就好啊
    2017-08-11 13:58 评论
  • 评论

回复 支持 反对

使用道具 举报

传说哥 社区微信达人实名认证 番薯互助团队 帆软员工 管理员
发表于 2017-8-11 13:48 | 显示全部楼层 |取消关注该作者的回复
93347598d45244974f.png

还请楼主录制一个gif动态演示图,更新到上面截图所示位置(编辑1楼就能看到)
  收起(5)
  • 天狮座 天狮座 : 已经放上去了
    2017-08-11 13:58 评论
  • cherishdqy cherishdqy : 回复 天狮座 :动态图里的背景gif是你自己做的啊?
    2017-08-11 14:35 评论
  • 天狮座 天狮座 : 回复 cherishdqy :嗯啊
    2017-08-11 14:39 评论
  • cherishdqy cherishdqy : 回复 天狮座 :求教~用的是什么软件?
    2017-08-11 14:43 评论
  • 天狮座 天狮座 : 回复 cherishdqy :我用的AE,然后做个短视频效果,转换出来的格式,再通过格式工厂转换为GIF动图
    2017-08-11 14:55 评论
  • 评论

回复 支持 反对

使用道具 举报

圣体叶小凡 社区微信达人实名认证 番薯互助团队 互助砖家
发表于 2017-8-11 15:59 | 显示全部楼层 |取消关注该作者的回复
静止的大屏是会“烧屏幕”的   ,请教一下这个怎么理解
  • 评论

回复 支持 反对

使用道具 举报

天狮座 社区微信达人实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-11 16:22 | 显示全部楼层 |取消关注该作者的回复
圣体叶小凡 发表于 2017-8-11 15:59
静止的大屏是会“烧屏幕”的   ,请教一下这个怎么理解

因为我们大屏是新买的,制作大屏模板显示在大屏上面时硬件维护人员说,大屏幕一直静止不动,会导致大屏的内容会因为高温印到大屏上面
  • 评论

回复 支持 反对

使用道具 举报

天狮座 社区微信达人实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-11 16:22 | 显示全部楼层 |取消关注该作者的回复
圣体叶小凡 发表于 2017-8-11 15:59
静止的大屏是会“烧屏幕”的   ,请教一下这个怎么理解

因为我们大屏是新买的,制作大屏模板显示在大屏上面时硬件维护人员说,大屏幕一直静止不动,会导致大屏的内容会因为高温印到大屏上面
  • 评论

回复 支持 反对

使用道具 举报

天狮座 社区微信达人实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-11 16:23 | 显示全部楼层 |取消关注该作者的回复
圣体叶小凡 发表于 2017-8-11 15:59
静止的大屏是会“烧屏幕”的   ,请教一下这个怎么理解

因为我们大屏是新买的,制作大屏模板显示在大屏上面时硬件维护人员说,大屏幕一直静止不动,会导致大屏的内容会因为高温印到大屏上面,这样的话以后显示其他东西,屏幕效果就有影响
  • 评论

回复 支持 反对

使用道具 举报

圣体叶小凡 社区微信达人实名认证 番薯互助团队 互助砖家
发表于 2017-8-11 16:24 | 显示全部楼层 |取消关注该作者的回复
天狮座 发表于 2017-8-11 16:22
因为我们大屏是新买的,制作大屏模板显示在大屏上面时硬件维护人员说,大屏幕一直静止不动,会导致大屏的 ...

还有这种操作,涨知识了
  • 评论

回复 支持 反对

使用道具 举报

zhangzhan 社区微信达人帆软员工 初学乍练(Lv1)
发表于 2017-8-11 16:36 | 显示全部楼层 |取消关注该作者的回复
把第一张图的地图换成图片就更好了,现在有点违和感
  • 评论

回复 支持 反对

使用道具 举报

天狮座 社区微信达人实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-11 16:53 | 显示全部楼层 |取消关注该作者的回复
zhangzhan 发表于 2017-8-11 16:36
把第一张图的地图换成图片就更好了,现在有点违和感

地图换成图片???我那个地图要用到的,只是现在脱敏了
  • 评论

回复 支持 反对

使用道具 举报

ccch  决策菁英一期
发表于 2017-8-14 14:24 | 显示全部楼层 |取消关注该作者的回复
利害了我的屏!!!
  • 评论

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

Copyright © 帆软|联系帆软| 联系管理员@兔子酱|免责声明|手机版|帆软社区 ( 苏ICP备14031611号-3 )

GMT+8, 2018-8-17 03:26 , Processed in 1.061100 second(s), 233 queries , Gzip On.

返回顶部 返回列表