搜索
查看: 1112|: 0

带有天气预报的高大上web报表制作分享

[复制链接]

6

主题

0

回帖

43

积分

新手上路

积分
43
发表于 2015-4-8 16:17:41 | 显示全部楼层 |阅读模式

我用FineReport开发了挺多报表,但集成天气预报这样提高交互和人性化的还是第一次,所以跟大家分享下。

       这个报表是综合的门店销售管理分析面板,可以查询业绩分析、店员销售分析,店铺排行分析(可以看出是个连锁店),VIP生日提醒。怎么具体制作模板,业内人士一看即明,无需多讲,就重点说下怎么集成天气吧。

       先上图:


方法是加一段JS代码,具体如下:

[javascript] view plaincopy


  • var weather=function(){  
  •     var tmp=0;  
  •     var SWther={w:[{}],add:{}};  
  •     var SWther={};  
  •     this.getWeather=function(city,type){  
  •         //city=utf8ToGBK(city);  
  •         /*
  •         $.getScript("http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=2&city="+city+"&dfc=3",function(){if(type=='js'){echo(city);}});
  •         **/  
  • $.ajax({  
  • dataType:'script',  
  • scriptCharset:'gb2312',////////  
  • url:"http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=2&city="+city+"&dfc=3",  
  • success:function(){  
  • if(type=='js'){echo(city);}  
  • }  
  • })  
  •   
  •         }  
  •   
  • function dis_img(weather){  
  •     var style_img="image/s_13.png";  
  •     if(weather.indexOf("多云")!==-1||weather.indexOf("晴")!==-1){style_img="image/s_1.png";}  
  •     else if(weather.indexOf("多云")!==-1&&weather.indexOf("阴")!==-1){style_img="image/s_2.png";}  
  •     else if(weather.indexOf("阴")!==-1&&weather.indexOf("雨")!==-1){style_img="image/s_3.png";}  
  •     else if(weather.indexOf("晴")!==-1&&weather.indexOf("雨")!==-1){style_img="image/s_12.png";}  
  •     else if(weather.indexOf("晴")!==-1&&weather.indexOf("雾")!==-1){style_img="image/s_12.png";}  
  •     else if(weather.indexOf("晴")!==-1){style_img="image/s_13.png";}  
  •     else if(weather.indexOf("多云")!==-1){style_img="image/s_2.png";}  
  •     else if(weather.indexOf("阵雨")!==-1){style_img="image/s_3.png";}  
  •     else if(weather.indexOf("小雨")!==-1){style_img="image/s_3.png";}  
  •     else if(weather.indexOf("中雨")!==-1){style_img="image/s_4.png";}  
  •     else if(weather.indexOf("大雨")!==-1){style_img="image/s_5.png";}  
  •     else if(weather.indexOf("暴雨")!==-1){style_img="image/s_5.png";}  
  •     else if(weather.indexOf("冰雹")!==-1){style_img="image/s_6.png";}  
  •     else if(weather.indexOf("雷阵雨")!==-1){style_img="image/s_7.png";}  
  •     else if(weather.indexOf("小雪")!==-1){style_img="image/s_8.png";}  
  •     else if(weather.indexOf("中雪")!==-1){style_img="image/s_9.png";}  
  •     else if(weather.indexOf("大雪")!==-1){style_img="image/s_10.png";}  
  •     else if(weather.indexOf("暴雪")!==-1){style_img="image/s_10.png";}  
  •     else if(weather.indexOf("扬沙")!==-1){style_img="image/s_11.png";}  
  •     else if(weather.indexOf("沙尘")!==-1){style_img="image/s_11.png";}  
  •     else if(weather.indexOf("雾")!==-1){style_img="image/s_12.png";}  
  •     else{style_img="image/s_2.png";}  
  •     return style_img;};  
  •       
  • function echo(city){  
  •     $('#city').html(city);  
  •     $('#weather').html(window.SWther.w[city][0].s1);  
  •     $('#temperature').html(window.SWther.w[city][0].t1+'°');  
  •     $('#wind').html(window.SWther.w[city][0].p1);  
  •     $('#direction').html(window.SWther.w[city][0].d1);  
  •          
  •     var T_weather_img=dis_img(window.SWther.w[city][0].s1);  
  •     $('#T_weather_img').html("<img src='"+T_weather_img+"' title='"+window.SWther.w[city][0].s1+"' alt='"+window.SWther.w[city][0].s1+"' /><br><span id=\"T_weather\"></span>");  
  •     //$('#T_temperature').html(window.SWther.w[city][0].t1+'~'+window.SWther.w[city][0].t2+'°');  
  •     $('#T_temperature').html(window.SWther.w[city][0].t1);  
  • $('#T_weather').html(window.SWther.w[city][0].s1);  
  •   
  •     $('#T_wind').html(window.SWther.w[city][0].p1);  
  •     $('#T_direction').html(window.SWther.w[city][0].d1);  
  •     $('#M_weather').html(window.SWther.w[city][1].s1);  
  •       
  •     var M_weather_img=dis_img(window.SWther.w[city][1].s1);  
  •     $('#M_weather_img').html("<img src='"+M_weather_img+"' title='"+window.SWther.w[city][1].s1+"' alt='"+window.SWther.w[city][1].s1+"' />");  
  •     $('#M_temperature').html(window.SWther.w[city][1].t1+'~'+window.SWther.w[city][1].t2+'°');  
  •     $('#M_wind').html(window.SWther.w[city][1].p1);  
  •     $('#M_direction').html(window.SWther.w[city][1].d1);  
  •     $('#L_weather').html(window.SWther.w[city][2].s1);  
  •       
  •     var L_weather_img=dis_img(window.SWther.w[city][2].s1);  
  •     $('#L_weather_img').html("<img src='"+L_weather_img+"' title='"+window.SWther.w[city][2].s1+"' alt='"+window.SWther.w[city][2].s1+"' />");  
  •     $('#L_temperature').html(window.SWther.w[city][2].t1+'~'+window.SWther.w[city][2].t2+'°');  
  •     $('#L_wind').html(window.SWther.w[city][2].p1);$('#L_direction').html(window.SWther.w[city][2].d1);  
  •     }  
  •     }  
  •     //weather结束了  
  •     function jintian(){  
  •         weather_.getWeather(city,'js');  
  •         };  


如此,大功告成。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

大数据中国微信

QQ   

版权所有: Discuz! © 2001-2013 大数据.

GMT+8, 2024-12-23 15:00 , Processed in 0.147018 second(s), 24 queries .

快速回复 返回顶部 返回列表