带有天气预报的高大上web报表制作分享
来源:互联网 发布:甩手掌柜工具箱软件 编辑:程序博客网 时间:2024/05/01 03:06
我用FineReport开发了挺多报表,但集成天气预报这样提高交互和人性化的还是第一次,所以跟大家分享下。
这个报表是综合的门店销售管理分析面板,可以查询业绩分析、店员销售分析,店铺排行分析(可以看出是个连锁店),VIP生日提醒。怎么具体制作模板,业内人士一看即明,无需多讲,就重点说下怎么集成天气吧。
先上图:
方法是加一段JS代码,具体如下:
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');};
如此,大功告成。
1 0
- 带有天气预报的高大上web报表制作分享
- 带有天气预报的高大上web报表制作分享
- 高大上 web ppt 制作
- EXCEL制作高大上的商业滑珠图
- 一道某高大上互联网公司的笔试题分享
- 教你怎么制作高大上的三维热力图
- UE4中制作高大上的相机动画
- web前端开发高大上的jquery插件
- “高大上”的位运算
- 高大上的链路层简介
- 又一次高大上的培训!
- 我的高大上专有名词
- 价值5000元的web报表分享
- ProcessOn - 高大上的免费中文在线作图工具/思维导图制作软件
- 高大上
- 高大上的ViewPager的PageTransformer
- 高大上的优质JS代码写法
- 高大上的多边形字体效果教程
- Linux Another app is currently holding the yum lock...问题解决
- Burp Suite工具使用之二-Intruder模块介绍
- Linux那些事儿 之 戏说USB(31)驱动的生命线(三)
- Burp Suite工具使用之三-Repeater and Comparer模块介绍
- Burp Suite工具使用之四-Sequencer模块介绍
- 带有天气预报的高大上web报表制作分享
- ARM Linux 3.x的设备树(Device Tree)
- 关于结构体的内存对齐
- Burp Suite详细使用教程-Intruder模块详解
- 记录make结束时间,其他Linux程序其实也可以
- 第3周-项目1-三角形类的构造函数-有默认参数的构造函数
- python 2.x字符编码显示问题
- HDU-5190-Go to movies
- Apache+tomcat+mod_jk+centos6.2负载均衡集群配置