带有天气预报的高大上web报表制作分享
我用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'); };
如此,大功告成!
带有天气预报的高大上web报表制作分享的更多相关文章
- 汽车4S店经验指标完成情况报表制作分享
集团公司一般为了加强下属的经营管理,以及项经营指标完情况,需要制定一些报表.我们平时也经常遇到这种情况,而这些报表要包括什么内容呢?该怎么制作呢?用什么制作呢?今天小编就以4s店为例,分享给大家一个报 ...
- 第二篇:Power BI数据可视化之基于Web数据的报表制作(经典级示例)
前言 报表制作流程的第一步显然是从各个数据源导入数据,Power BI能从很多种数据源导入数据:如Excel,CSV,XML,以及各类数据库(SQL Server,Oracle,My SQL等),两大 ...
- 价值5000元的web报表分享
价值5000元的web报表分享 与一个朋友聊天,发现他最近做了一个很棒的报表,用他的话来讲,起码值5000RMB,我拿来与大家分享下,共同进步. 用朋友A的话,就是他最近接到公司财务部长大人的需求,需 ...
- 如何创建带有大纲和书签的交互式web报表
交互式报表允许用户与之交互.例如,报表可以包含超链接.书签和大纲.通过点击大纲部分的标题,你可以将书签导航到报表中的所需位置.这样的报表经常用在产品目录中.(查看更多web报表教程) 让我们为Web创 ...
- 《奥威Power-BI智能分析报表制作方法》精彩回顾
年的最后一个月,一年又快过去.工作和学习都不能耽误,本周三奥威公开课又如约与大家见面咯!不知老师教的图文报表在课后你们都有练习吗?趁热打铁,我们现在再次来温习一下吧. 本期分享的内容:<奥威Po ...
- Fastreport生成WEB报表
开发WEB应用系统通常都会遇到报表打印问题.简单应用可利用IE的页面打印功能,利用HTML标签控制格式来实现.但复杂的业务型应用系统,报表不仅是组成应用的 重要部分,还常常是相当复杂的.现在很多应用系 ...
- 挖到一款免费好用的web报表插件
最近公司项目需要用到报表,公司领导要求我来调研下报表工具.开始的时候了解了目前市场上功能强大,占有率高的两款报表工具,帆软报表和润乾报表,这两款报表工具功能比较强大,覆盖的行业较广,基本能满足所有的报 ...
- 设计与开发一款简单易用的Web报表工具(支持常用关系数据及hadoop、hbase等)
EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(Ro ...
- 推荐6款常用的Java开源报表制作工具
JasperReports是一个基于Java的开源报表工具,它可以在Java环境下像其它IDE报表工具一样来制作报表.JasperReports 支持PDF.HTML.XLS.CSV和XML文件输出格 ...
随机推荐
- 十一个行为模式之责任链模式(Responsible Chain Pattern)
定义: 将具有相同接口的责任类串行在一起,解耦请求的发送者和处理者.沿着这条链进行请求,直到有对象处理它为止. 结构图: Handler:抽象处理类,定义了所有责任类处理方法的接口,不同的处理方法在子 ...
- JSCapture – 基于 HTML5 实现的屏幕捕捉库
JSCapture 是用纯 JavaScript 和 HTML5 实现的屏幕捕捉库.它可以让从您的浏览器中截图和记录在桌面的视频.JSCapture 使用 getUserMedia 来实现屏幕捕获.目 ...
- 从0开始学angularjs-笔记03
大家好,今天上班第一天,可能大家都不是很想上班吧,我也是一样啦---不想上班就来继续写我的angualrjs教程,造福大家吧!! 今天的主要讲解部分有以下几点:1.演示一个完整的项目结构 2.$sc ...
- javascript之DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- ReactNative ScrollView或ListView头部莫名其妙多了20px
之前在还没有加TabBarIOS时,ScrollView一直是好好的,然后随着深入,需要做其他tab页面的时候问题来了,当我把首页加入TabBarIOS.Item时..我首页中的ScrollView头 ...
- Node入门
一 node定位 Node.js是一个事件驱动I/O服务端JavaScript环境,是一个基于Google的V8引擎的Chrome JavaScript 运行时建立的一个平台. 二 node安装 (1 ...
- User Profile Service Application 配置同步连接时,报 MOSS MA not found
最近在试着配置"我的网站",不知什么原因在配置同步连接时报:MOSS MA not found 搜索发现,需要启动Forefront Identity Manager Servic ...
- SharePoint基于windows验证的如何通过组策略实现IE自动以当前域账号登录SP站点
通过组策略实现IE自动以当前域账号登录SP站点 1. 在运行中运行MMC,启动"组策略对象编辑器". 如下图: 找到组策略如下图: 找到域 点右键编辑 找到如下图: 找到[计算机配 ...
- SharePoint2013的头像显示和读取
前言 有个时候SP的二次开发,需要用代码获取头像显示,如SP基于AD验证,AD有头像属性,做为头像数据来源(因为Exchange和lync的头像也来自AD),说道这里大家都知道有2种办法,一种从A ...
- Urban Planning and Public Health - Reflection on Professor Webster's article in Urban Planning Forum
1. General review. Professor Webster published this article in Urban Planning Forum, one of the top ...