我用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);}
}
})}functiondis_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";}returnstyle_img;};functionecho(city){$('#city').html(city);$('#weather').html(window.SWther.w[city][0].s1);$('#temperature').html(window.SWther.w[city][0].t1+'&deg;');$('#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+'&deg;');$('#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+'&deg;');$('#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+'&deg;');$('#L_wind').html(window.SWther.w[city][2].p1);$('#L_direction').html(window.SWther.w[city][2].d1);}}//weather结束了functionjintian(){weather_.getWeather(city,'js');};

如此,大功告成!

转载于:https://www.cnblogs.com/laoA188/p/4370840.html

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

  1. 汽车4S店经验指标完成情况报表制作分享

    集团公司一般为了加强下属的经营管理,以及项经营指标完情况,需要制定一些报表.我们平时也经常遇到这种情况,而这些报表要包括什么内容呢?该怎么制作呢?用什么制作呢?今天小编就以4s店为例,分享给大家一个报 ...

  2. 高大上 web ppt 制作

    https://revealjs.com https://github.com/hakimel/reveal.js/ 每页只需要简单的markdown或html就可以制作PPT,见主页效果

  3. 使用JavaReport制作Web报表与图形 入门示例

    工作中非常需要根据客户录入的数据在页面上生成一些报表,苦于那个AnyChart是收费的,不敢用,所以就找了个免费的基于Java的第三方报表组件:      JavaReport是一款国产的第三方组件, ...

  4. html5表格在线生成,专业的Web报表工具——表格在线生成制作工具

    Smartbi报表工具是新一代的在线Web报表工具,它具有丰富的帮助提示与向导指引,支持字段拖拽报表制作,并提供方便的快捷菜单和报表功能,旨在让报表制作工作变得更轻松! 丰富的帮助提示与向导指引 在w ...

  5. odoo openerp 分享-oe嵌入qweb】用js读取数据库数据,用类似html语言重写web报表

    [分享-oe嵌入qweb]用js读取数据库数据,用类似html语言重写web报表  (阅读 4403 次) 阿狸 新手上路 帖子: 26 人气: 1 开启阅读模式 [分享-oe嵌入qweb]用js读取 ...

  6. html5 表格 在线生成,专业的Web报表软件——在线表格生成制作工具

    Smartbi报表工具是新一代的在线Web报表工具,它具有丰富的帮助提示与向导指引,支持字段拖拽报表制作,并提供方便的快捷菜单和报表功能,旨在让报表制作工作变得更轻松! 丰富的帮助提示与向导指引 在w ...

  7. 小猿圈分享-web报表中电子印章/水印的轻松实现

    报表数据系统中,有一个重要功能叫做电子签章,通俗的讲,就是不需要实际去盖章,而直接把印章打印到纸质文件上,省去手工盖章的费时费力环节,例如,银行系统中的银行流水打印,都需要盖章才能生效,如果按传统的做 ...

  8. 专业的Web报表工具--在线表格生成制作工具

    Smartbi报表工具是新一代的在线Web报表工具,它具有丰富的帮助提示与向导指引,支持字段拖拽报表制作,并提供方便的快捷菜单和报表功能,旨在让报表制作工作变得更轻松! 丰富的帮助提示与向导指引 在w ...

  9. power bi报表html,Power BI -- 第二篇:Power BI数据可视化之基于Web数据的报表制作(经典级示例)...

    http://www.cnblogs.com/muchen/p/5391101.html 阅读目录 •前言 •Power BI的三大工作区 •导入数据 •数据塑形 - 工作区介绍 •数据塑形 - 工作 ...

最新文章

  1. 我看过的编译原理方面的好文章
  2. 关于宝塔下的项目中的php不能访问的问题
  3. 加速数据读取的利器-缓存及分布式存储
  4. 气象ts评分_给大家分享一个格点插值到站点然后TS评分的程序
  5. MySQL max()函数
  6. 学会这两个技巧!让你的Mac文件共享超简单
  7. R语言决策树:NBA球员如何拿到大合同
  8. 兆易创新GD32系列单片机不同容量和启动文件之间的选择(GD32F10X_MD/GD32F10X_HD/GD32F10X_XD/GD32F10X_CL)
  9. 任务栏文件资源管理器打开特别卡
  10. yy聊天室-创建登录界面与好友列表界面
  11. 代码打累了看看短腿基!
  12. 怪兽融合、神秘药水?《Monster Tamer》深度攻略,来不及解释快上车!
  13. 网易AI平台开放多项技术,助力网易七鱼智能客服升级
  14. 基于树莓派的手势识别Oled屏幕显示
  15. html 全场开场动画,HTML5 星际大战电影开场字幕动画
  16. 独家思维导图!让你秒懂李宏毅2020机器学习(二)—— Classification分类
  17. 高级运维工程师证书_一位IT运维工程师的CISSP认证历程,值得借鉴!
  18. colorkey唇釉是否安全_colorkey唇釉
  19. Basler工业相机基于opencv 采集图像
  20. “合十”高端酒店餐饮用米受邀参加2021中国企业家博鳌论坛

热门文章

  1. StarWind RAM 磁盘仿真程序
  2. 某医院信息化硬件平台建设方案
  3. IE中如何屏蔽窗口关闭
  4. C++知识整理 内存模型和命名空间
  5. c++学习笔记(7) 面向对象思想
  6. VMware虚拟机中ubuntu的磁盘怎么扩容
  7. 我的第一本算法书(图解算法)——什么是堆
  8. python判断最小公倍数
  9. 的it生活_IT行业是干啥的
  10. Failed to parse PID from file /run/nginx.pid: Invalid argument