帶有天氣預報的高大上web報表制作分享

我用FineReport開發了挺多報表，但集成天氣預報這樣提高交互和人性化的還是第一次，所以跟大家分享下。

       這個報表是綜合的門店銷售管理分析面板，可以查詢業績分析、店員銷售分析，店鋪排行分析（可以看出是個連鎖店），VIP生日提醒。怎么具體制作模板，業內人士一看即明，無需多講，就重點說下怎么集成天氣吧。

       先上圖：

 方法是加一段JS代碼，具體如下：

[javascript] view plaincopy

1. var weather=function(){  

2.     var tmp=0;  

3.     var SWther={w:[{}],add:{}};  

4.     var SWther={};  

5.     this.getWeather=function(city,type){  

6.         //city=utf8ToGBK(city);  

7.         /* 

8.         $.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);}}); 

9.         **/  

10. $.ajax({  

11. dataType:'script',  

12. scriptCharset:'gb2312',////////  

13. url:"http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=2&city="+city+"&dfc=3",  

14. success:function(){  

15. if(type=='js'){echo(city);}  

16. }  

17. })  

18.   

19.         }  

20.   

21. function dis_img(weather){  

22.     var style_img="p_w_picpath/s_13.png";  

23.     if(weather.indexOf("多云")!==-1||weather.indexOf("晴")!==-1){style_img="p_w_picpath/s_1.png";}  

24.     else if(weather.indexOf("多云")!==-1&&weather.indexOf("陰")!==-1){style_img="p_w_picpath/s_2.png";}  

25.     else if(weather.indexOf("陰")!==-1&&weather.indexOf("雨")!==-1){style_img="p_w_picpath/s_3.png";}  

26.     else if(weather.indexOf("晴")!==-1&&weather.indexOf("雨")!==-1){style_img="p_w_picpath/s_12.png";}  

27.     else if(weather.indexOf("晴")!==-1&&weather.indexOf("霧")!==-1){style_img="p_w_picpath/s_12.png";}  

28.     else if(weather.indexOf("晴")!==-1){style_img="p_w_picpath/s_13.png";}  

29.     else if(weather.indexOf("多云")!==-1){style_img="p_w_picpath/s_2.png";}  

30.     else if(weather.indexOf("陣雨")!==-1){style_img="p_w_picpath/s_3.png";}  

31.     else if(weather.indexOf("小雨")!==-1){style_img="p_w_picpath/s_3.png";}  

32.     else if(weather.indexOf("中雨")!==-1){style_img="p_w_picpath/s_4.png";}  

33.     else if(weather.indexOf("大雨")!==-1){style_img="p_w_picpath/s_5.png";}  

34.     else if(weather.indexOf("暴雨")!==-1){style_img="p_w_picpath/s_5.png";}  

35.     else if(weather.indexOf("冰雹")!==-1){style_img="p_w_picpath/s_6.png";}  

36.     else if(weather.indexOf("雷陣雨")!==-1){style_img="p_w_picpath/s_7.png";}  

37.     else if(weather.indexOf("小雪")!==-1){style_img="p_w_picpath/s_8.png";}  

38.     else if(weather.indexOf("中雪")!==-1){style_img="p_w_picpath/s_9.png";}  

39.     else if(weather.indexOf("大雪")!==-1){style_img="p_w_picpath/s_10.png";}  

40.     else if(weather.indexOf("暴雪")!==-1){style_img="p_w_picpath/s_10.png";}  

41.     else if(weather.indexOf("揚沙")!==-1){style_img="p_w_picpath/s_11.png";}  

42.     else if(weather.indexOf("沙塵")!==-1){style_img="p_w_picpath/s_11.png";}  

43.     else if(weather.indexOf("霧")!==-1){style_img="p_w_picpath/s_12.png";}  

44.     else{style_img="p_w_picpath/s_2.png";}  

45.     return style_img;};  

46.       

47. function echo(city){  

48.     $('#city').html(city);  

49.     $('#weather').html(window.SWther.w[city][0].s1);  

50.     $('#temperature').html(window.SWther.w[city][0].t1+'°');  

51.     $('#wind').html(window.SWther.w[city][0].p1);  

52.     $('#direction').html(window.SWther.w[city][0].d1);  

53.           

54.     var T_weather_img=dis_img(window.SWther.w[city][0].s1);  

55.     $('#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>");  

56.     //$('#T_temperature').html(window.SWther.w[city][0].t1+'~'+window.SWther.w[city][0].t2+'°');  

57.     $('#T_temperature').html(window.SWther.w[city][0].t1);  

58. $('#T_weather').html(window.SWther.w[city][0].s1);  

59.   

60.     $('#T_wind').html(window.SWther.w[city][0].p1);  

61.     $('#T_direction').html(window.SWther.w[city][0].d1);  

62.     $('#M_weather').html(window.SWther.w[city][1].s1);  

63.       

64.     var M_weather_img=dis_img(window.SWther.w[city][1].s1);  

65.     $('#M_weather_img').html("<img src='"+M_weather_img+"' title='"+window.SWther.w[city][1].s1+"' alt='"+window.SWther.w[city][1].s1+"' />");  

66.     $('#M_temperature').html(window.SWther.w[city][1].t1+'~'+window.SWther.w[city][1].t2+'°');  

67.     $('#M_wind').html(window.SWther.w[city][1].p1);  

68.     $('#M_direction').html(window.SWther.w[city][1].d1);  

69.     $('#L_weather').html(window.SWther.w[city][2].s1);  

70.       

71.     var L_weather_img=dis_img(window.SWther.w[city][2].s1);  

72.     $('#L_weather_img').html("<img src='"+L_weather_img+"' title='"+window.SWther.w[city][2].s1+"' alt='"+window.SWther.w[city][2].s1+"' />");  

73.     $('#L_temperature').html(window.SWther.w[city][2].t1+'~'+window.SWther.w[city][2].t2+'°');  

74.     $('#L_wind').html(window.SWther.w[city][2].p1);$('#L_direction').html(window.SWther.w[city][2].d1);  

75.     }  

76.     }  

77.     //weather結束了  

78.     function jintian(){  

79.         weather_.getWeather(city,'js');  

80.         };  

如此，大功告成。