生产大屏模板分享

楼主
让数据起飞
报表模板投稿
功能演示:
功能说明:
打码了
此模板为本公司大屏项目模板




背景用的暗色调背景,尺寸都是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  
分享扩散:
参与人数 +4 F豆 +221 F币 +38 理由
krystal033 + 100
风之幻影 + 5 默默地点个赞,然后闪人
jiangsr + 50 默默地点个赞,然后闪人
兔子酱 + 66 + 38 感谢参与精华帖奖励计划!

查看全部评分

来自 10#
发表于 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  
来自 41#
发表于 2017-8-17 09:41:25
根据帆软论坛运营委员最终评分,本篇帖子综合得分38分,具体参见:帆软论坛精华帖奖励计划
恭喜@天狮座,同时也希望更多的番薯积极参与精华帖奖励计划!
沙发
发表于 2017-8-10 13:53:21
唯一我觉得做大屏有点不爽的是,背景不能动态图片或者视频,要是能用动态的,大屏效果会非常好
板凳
发表于 2017-8-10 13:59:49
做的很炫嘛!
地板
发表于 2017-8-10 14:25:46
已提名精华帖,待论坛运营委员会评分后可评为精华帖,帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html
楼主可以分享一下做大屏的心得体会,补充些模板的内容,有助于提高评分哈~
5楼
发表于 2017-8-10 14:28:01
值得鼓励
6楼
发表于 2017-8-10 14:33:14

补上第四张图
7楼
发表于 2017-8-10 14:34:03
模板中,除了main主图是固定位置,其他四张图是每30s自动跳转一次,因为这是满足我们公司的需要
8楼
发表于 2017-8-10 15:36:51
9楼
发表于 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  
11楼
发表于 2017-8-11 13:46:13
5.希望这次插件开发能够多搞点与Echarts集成的插件,毕竟说实话Echarts效果确实炫点。
——这次大赛不限制开源库的使用,百家争鸣,必能出精品
12楼
发表于 2017-8-11 13:48:57


还请楼主录制一个gif动态演示图,更新到上面截图所示位置(编辑1楼就能看到)
13楼
发表于 2017-8-11 15:59:13
静止的大屏是会“烧屏幕”的   ,请教一下这个怎么理解
14楼
发表于 2017-8-11 16:22:42
圣体叶小凡 发表于 2017-8-11 15:59
静止的大屏是会“烧屏幕”的   ,请教一下这个怎么理解

因为我们大屏是新买的,制作大屏模板显示在大屏上面时硬件维护人员说,大屏幕一直静止不动,会导致大屏的内容会因为高温印到大屏上面
15楼
发表于 2017-8-11 16:22:51
圣体叶小凡 发表于 2017-8-11 15:59
静止的大屏是会“烧屏幕”的   ,请教一下这个怎么理解

因为我们大屏是新买的,制作大屏模板显示在大屏上面时硬件维护人员说,大屏幕一直静止不动,会导致大屏的内容会因为高温印到大屏上面
16楼
发表于 2017-8-11 16:23:44
圣体叶小凡 发表于 2017-8-11 15:59
静止的大屏是会“烧屏幕”的   ,请教一下这个怎么理解

因为我们大屏是新买的,制作大屏模板显示在大屏上面时硬件维护人员说,大屏幕一直静止不动,会导致大屏的内容会因为高温印到大屏上面,这样的话以后显示其他东西,屏幕效果就有影响
17楼
发表于 2017-8-11 16:24:24
天狮座 发表于 2017-8-11 16:22
因为我们大屏是新买的,制作大屏模板显示在大屏上面时硬件维护人员说,大屏幕一直静止不动,会导致大屏的 ...

还有这种操作,涨知识了
18楼
发表于 2017-8-11 16:36:11
把第一张图的地图换成图片就更好了,现在有点违和感
19楼
发表于 2017-8-11 16:53:26
zhangzhan 发表于 2017-8-11 16:36
把第一张图的地图换成图片就更好了,现在有点违和感

地图换成图片???我那个地图要用到的,只是现在脱敏了
20楼
发表于 2017-8-14 14:24:39
利害了我的屏!!!
21楼
发表于 2017-8-14 14:31:58
还是问几个实际问题:
1、看楼主应该是一个酒厂的生产大屏,那么对于酒厂这样的流程型制造企业,相关的数据是人工报表填报,还是通过外部系统中获取数据?
2、大屏是设定每3分钟刷新一次,还是数据变化后自动刷新?
3、这个大屏是放在生产办公室,还是老板办公室?
22楼
发表于 2017-8-14 14:38:59
来自手机
ccch 发表于 2017-8-14 14:31
还是问几个实际问题:
1、看楼主应该是一个酒厂的生产大屏,那么对于酒厂这样的流程型制造企业,相关的数 ...

1.我们目前是外部拿取数据,目前填报还在测试阶段。
2.时间间隔来刷新,现在FR还做不到数据进来就刷新吧,反正我没看到过。
3.大屏给业务部门使用,既要满足业务,又要好看
23楼
发表于 2017-8-14 14:40:02
天狮座 发表于 2017-8-11 16:53
地图换成图片???我那个地图要用到的,只是现在脱敏了

我的意思是 把地图背景换成图片 然后不选择图片
24楼
发表于 2017-8-15 10:46:37
楼主分享的真棒哈,需要大屏效果继续美化的话可以联系我QQ2851322936
25楼
发表于 2017-8-15 10:55:45
天狮座 发表于 2017-8-11 16:23
因为我们大屏是新买的,制作大屏模板显示在大屏上面时硬件维护人员说,大屏幕一直静止不动,会导致大屏的 ...

我也是头一次听到这种说法。。在我的印象里,以前老式的显像管显示器,是需要屏幕保护程序(一些动画效果)来维护屏幕的,液晶屏因为工作原理改变,已经不需要了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部 返回列表