生产大屏模板分享

此模板为本公司大屏项目模板




背景用的暗色调背景，尺寸都是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 记得给点个赞哟~

先添加一张动态的背景图片，然后在初始化里加js：
setTimeout(function(){
        $('.widgetBackground').css('background','url(http://localhost:8075/WebReport/picture/1.gif)');
},100);
（注意url里面的路径）
非常感谢cherishdqy妹子，解决了背景不能用GIF动态图片的问题

根据帆软论坛运营委员最终评分，本篇帖子综合得分38分，具体参见：帆软论坛精华帖奖励计划
恭喜@天狮座，同时也希望更多的番薯积极参与精华帖奖励计划！

唯一我觉得做大屏有点不爽的是，背景不能动态图片或者视频，要是能用动态的，大屏效果会非常好

做的很炫嘛！

已提名精华帖，待论坛运营委员会评分后可评为精华帖，帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html
楼主可以分享一下做大屏的心得体会，补充些模板的内容，有助于提高评分哈~

值得鼓励

补上第四张图

模板中，除了main主图是固定位置，其他四张图是每30s自动跳转一次，因为这是满足我们公司的需要

在表单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. 
   
7. setInterval(function()
   
8. {
   
9.     if(flag == 1)
   
10.     {
    
11.         image.src = img1;
    
12.         image.onload = function(){
    
13.             base64 = getBase64Image(image);
    
14.         }
    
15.         $('.widgetBackground').css('background','url("'+base64+'")');
    
16.         flag = 2;
    
17.     }
    
18.     else
    
19.     {
    
20.         image.src = img2;
    
21.         image.onload = function(){
    
22.             base64 = getBase64Image(image);
    
23.         }
    
24.         $('.widgetBackground').css('background','url("'+base64+'")');
    
25.         flag = 1;
    
26.     }
    
27. },10000);
    
28. 
    
29. function getBase64Image(img) {
    
30.     var canvas = document.createElement("canvas");
    
31.     canvas.width = img.width;
    
32.     canvas.height = img.height;
    
33.     var ctx = canvas.getContext("2d");
    
34.     ctx.drawImage(img, 0, 0, img.width, img.height);
    
35.     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    
36.     var dataURL = canvas.toDataURL("image/"+ext);
    
37.     return dataURL;
    
38. }

复制代码

5.希望这次插件开发能够多搞点与Echarts集成的插件，毕竟说实话Echarts效果确实炫点。
——这次大赛不限制开源库的使用，百家争鸣，必能出精品

还请楼主录制一个gif动态演示图，更新到上面截图所示位置（编辑1楼就能看到）

静止的大屏是会“烧屏幕”的   ，请教一下这个怎么理解

圣体叶小凡 发表于 2017-8-11 15:59
静止的大屏是会“烧屏幕”的   ，请教一下这个怎么理解

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

圣体叶小凡 发表于 2017-8-11 15:59
静止的大屏是会“烧屏幕”的   ，请教一下这个怎么理解

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

圣体叶小凡 发表于 2017-8-11 15:59
静止的大屏是会“烧屏幕”的   ，请教一下这个怎么理解

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

天狮座 发表于 2017-8-11 16:22
因为我们大屏是新买的，制作大屏模板显示在大屏上面时硬件维护人员说，大屏幕一直静止不动，会导致大屏的 ...

还有这种操作，涨知识了

把第一张图的地图换成图片就更好了，现在有点违和感

zhangzhan 发表于 2017-8-11 16:36
把第一张图的地图换成图片就更好了，现在有点违和感

地图换成图片？？？我那个地图要用到的，只是现在脱敏了

利害了我的屏！！！

还是问几个实际问题：
1、看楼主应该是一个酒厂的生产大屏，那么对于酒厂这样的流程型制造企业，相关的数据是人工报表填报，还是通过外部系统中获取数据？
2、大屏是设定每3分钟刷新一次，还是数据变化后自动刷新？
3、这个大屏是放在生产办公室，还是老板办公室？

ccch 发表于 2017-8-14 14:31
还是问几个实际问题：
1、看楼主应该是一个酒厂的生产大屏，那么对于酒厂这样的流程型制造企业，相关的数 ...

1.我们目前是外部拿取数据，目前填报还在测试阶段。
2.时间间隔来刷新，现在FR还做不到数据进来就刷新吧，反正我没看到过。
3.大屏给业务部门使用，既要满足业务，又要好看

天狮座 发表于 2017-8-11 16:53
地图换成图片？？？我那个地图要用到的，只是现在脱敏了

我的意思是 把地图背景换成图片 然后不选择图片

楼主分享的真棒哈，需要大屏效果继续美化的话可以联系我QQ2851322936

天狮座 发表于 2017-8-11 16:23
因为我们大屏是新买的，制作大屏模板显示在大屏上面时硬件维护人员说，大屏幕一直静止不动，会导致大屏的 ...

我也是头一次听到这种说法。。在我的印象里，以前老式的显像管显示器，是需要屏幕保护程序（一些动画效果）来维护屏幕的，液晶屏因为工作原理改变，已经不需要了