提问
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

生产大屏模板分享

天狮座 实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-10 13:47:12 | 显示全部楼层 |取消关注该作者的回复
报表模板投稿
功能演示:
功能说明:
打码了
此模板为本公司大屏项目模板
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 感谢参与精华帖奖励计划!

查看全部评分

此帖共有 93 位番薯登录后查看

已有5人关注本帖

九霄qxl2
回复

使用道具 举报

天狮座 实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-11 11:10:30 | 显示全部楼层 |取消关注该作者的回复
先添加一张动态的背景图片,然后在初始化里加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:25 | 显示全部楼层 |取消关注该作者的回复
根据帆软论坛运营委员最终评分,本篇帖子综合得分38分,具体参见:帆软论坛精华帖奖励计划
恭喜@天狮座,同时也希望更多的番薯积极参与精华帖奖励计划!
  • 评论

回复 支持 反对

使用道具 举报

天狮座 实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-10 13:53:21 | 显示全部楼层 |取消关注该作者的回复
唯一我觉得做大屏有点不爽的是,背景不能动态图片或者视频,要是能用动态的,大屏效果会非常好
  收起(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:49 | 显示全部楼层 |取消关注该作者的回复
做的很炫嘛!
  • 评论

回复 支持 反对

使用道具 举报

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

回复 支持 反对

使用道具 举报

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

回复 支持 反对

使用道具 举报

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

回复 支持 反对

使用道具 举报

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

回复 支持 反对

使用道具 举报

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

回复 支持 1 反对 0

使用道具 举报

cherishdqy 社区微信达人实名认证 番薯互助团队 文档共创团队 互助叫兽、助理编辑、VIP2
发表于 2017-8-10 17:29:45 | 显示全部楼层 |取消关注该作者的回复
在表单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:13 | 显示全部楼层 |取消关注该作者的回复
5.希望这次插件开发能够多搞点与Echarts集成的插件,毕竟说实话Echarts效果确实炫点。
——这次大赛不限制开源库的使用,百家争鸣,必能出精品
  收起(1)
  • 天狮座 天狮座 : {:8_202:}那就好啊
    2017-08-11 13:58 评论
  • 评论

回复 支持 反对

使用道具 举报

传说哥 社区微信达人实名认证 番薯互助团队 帆软员工 管理员
发表于 2017-8-11 13:48:57 | 显示全部楼层 |取消关注该作者的回复
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:13 | 显示全部楼层 |取消关注该作者的回复
静止的大屏是会“烧屏幕”的   ,请教一下这个怎么理解
  • 评论

回复 支持 反对

使用道具 举报

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

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

回复 支持 反对

使用道具 举报

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

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

回复 支持 反对

使用道具 举报

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

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

回复 支持 反对

使用道具 举报

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

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

回复 支持 反对

使用道具 举报

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

回复 支持 反对

使用道具 举报

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

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

回复 支持 反对

使用道具 举报

ccch  初学乍练(Lv1)
发表于 2017-8-14 14:24:39 | 显示全部楼层 |取消关注该作者的回复
利害了我的屏!!!
  • 评论

回复 支持 反对

使用道具 举报

ccch  初学乍练(Lv1)
发表于 2017-8-14 14:31:58 | 显示全部楼层 |取消关注该作者的回复
还是问几个实际问题:
1、看楼主应该是一个酒厂的生产大屏,那么对于酒厂这样的流程型制造企业,相关的数据是人工报表填报,还是通过外部系统中获取数据?
2、大屏是设定每3分钟刷新一次,还是数据变化后自动刷新?
3、这个大屏是放在生产办公室,还是老板办公室?
  • 评论

回复 支持 反对

使用道具 举报

天狮座 实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-14 14:38:59 来自手机 | 显示全部楼层 |取消关注该作者的回复
ccch 发表于 2017-8-14 14:31
还是问几个实际问题:
1、看楼主应该是一个酒厂的生产大屏,那么对于酒厂这样的流程型制造企业,相关的数 ...

1.我们目前是外部拿取数据,目前填报还在测试阶段。
2.时间间隔来刷新,现在FR还做不到数据进来就刷新吧,反正我没看到过。
3.大屏给业务部门使用,既要满足业务,又要好看
  收起(1)
  • 为中华之崛起 为中华之崛起 : 现在是后台监控数据变化的
    2017-08-15 10:45 评论
  • 评论

回复 支持 反对

使用道具 举报

zhangzhan 社区微信达人帆软员工 渐入佳境(Lv2)
发表于 2017-8-14 14:40:02 | 显示全部楼层 |取消关注该作者的回复
天狮座 发表于 2017-8-11 16:53
地图换成图片???我那个地图要用到的,只是现在脱敏了

我的意思是 把地图背景换成图片 然后不选择图片
  收起(1)
  • 天狮座 天狮座 : 不是很懂,地图之前用的少
    2017-08-14 15:45 评论
  • 评论

回复 支持 反对

使用道具 举报

为中华之崛起 帆软员工 渐入佳境(Lv2)
发表于 2017-8-15 10:46:37 | 显示全部楼层 |取消关注该作者的回复
楼主分享的真棒哈,需要大屏效果继续美化的话可以联系我QQ2851322936
  • 评论

回复 支持 反对

使用道具 举报

为中华之崛起 帆软员工 渐入佳境(Lv2)
发表于 2017-8-15 10:55:45 | 显示全部楼层 |取消关注该作者的回复
天狮座 发表于 2017-8-11 16:23
因为我们大屏是新买的,制作大屏模板显示在大屏上面时硬件维护人员说,大屏幕一直静止不动,会导致大屏的 ...

我也是头一次听到这种说法。。在我的印象里,以前老式的显像管显示器,是需要屏幕保护程序(一些动画效果)来维护屏幕的,液晶屏因为工作原理改变,已经不需要了
  收起(1)
  • 天狮座 天狮座 : 这个我也不清楚,我是听我们维护人员这么说的
    2017-08-15 15:46 评论
  • 评论

回复 支持 反对

使用道具 举报

alu  浪迹天涯(Lv4)
发表于 2017-8-15 14:44:14 | 显示全部楼层 |取消关注该作者的回复
还是没搞太懂:
1、这个窗体的背景是怎么加上去的?
2、第一张动态的背景是怎么实现的?
4892359929839a3321.png
  • 评论

回复 支持 反对

使用道具 举报

alu  浪迹天涯(Lv4)
发表于 2017-8-15 14:48:36 | 显示全部楼层 |取消关注该作者的回复
还是没高太懂:
1、这个窗体的背景是怎么加上去的?
2、第一张动态的背景是怎么实现的(流星划过),我下载了怎么没这个动画效果呢?
  • 评论

回复 支持 反对

使用道具 举报

alu  浪迹天涯(Lv4)
发表于 2017-8-15 14:49:14 | 显示全部楼层 |取消关注该作者的回复
还是没高太懂:1、这个窗体的背景是怎么加上去的?
2、第一张动态的背景是怎么实现的(流星划过)?
3、地图的背景和大屏的背景没能很好融合,怎么解决呢?

编辑于 2017-8-15 14:54  
135603qayi07buu067axqn.gif
  收起(1)
  • 天狮座 天狮座 : 1.背景就是写那段js,然后把图片放到url里面的位置
    2.动态图片嘛,然后就是自己做的
    3.主意好分辨率
    2017-08-15 15:49 评论
  • 评论

回复 支持 反对

使用道具 举报

alu  浪迹天涯(Lv4)
发表于 2017-8-15 16:26:03 | 显示全部楼层 |取消关注该作者的回复
alu 发表于 2017-8-15 14:49
还是没高太懂:1、这个窗体的背景是怎么加上去的?
2、第一张动态的背景是怎么实现的(流星划过)?
3、 ...

能否分享一下您的那张背景gif图片?很喜欢
  • 评论

回复 支持 反对

使用道具 举报

lwlwlw123  初学乍练(Lv1)
发表于 2017-8-15 19:04:14 来自手机 | 显示全部楼层 |取消关注该作者的回复
alu 发表于 2017-8-15 14:48
还是没高太懂:
1、这个窗体的背景是怎么加上去的?
2、第一张动态的背景是怎么实现的(流星划过),我下 ...

能分享下下载的模版吗,F币不够呀。
  • 评论

回复 支持 反对

使用道具 举报

gyvip22006  初学乍练(Lv1)
发表于 2017-8-16 09:22:02 | 显示全部楼层 |取消关注该作者的回复
样子不错,先看看
  • 评论

回复 支持 反对

使用道具 举报

天狮座 实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-16 09:46:13 | 显示全部楼层 |取消关注该作者的回复
gyvip22006 发表于 2017-8-16 09:22
样子不错,先看看

谢谢关注哟
  • 评论

回复 支持 反对

使用道具 举报

天狮座 实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-16 09:46:28 | 显示全部楼层 |取消关注该作者的回复
lwlwlw123 发表于 2017-8-15 19:04
能分享下下载的模版吗,F币不够呀。

这是F豆下载的
  • 评论

回复 支持 反对

使用道具 举报

天狮座 实名认证 番薯互助团队 文档共创团队 互助新人、助理编辑
发表于 2017-8-16 09:46:48 | 显示全部楼层 |取消关注该作者的回复
alu 发表于 2017-8-15 16:26
能否分享一下您的那张背景gif图片?很喜欢

好,我等下上传一下附件
  • 评论

回复 支持 反对

使用道具 举报

alu  浪迹天涯(Lv4)
发表于 2017-8-16 09:55:27 | 显示全部楼层 |取消关注该作者的回复
天狮座 发表于 2017-8-16 09:46
好,我等下上传一下附件

谢谢啦