三斗室

cdn自主监控(六):数据展示页面

02 August 2011

接下来进入我不擅长的页面部分了。规划页面分为side和main，side中提供时间选择框/类型下拉选择框和提交按钮；main中展示最后形成的chart。 时间选择框是用js和css完成的，这个网上有很多，不过要同时支持多浏览器和分钟级别的选项的，目前就发现一个好用的。下载地址如下：http://chenlinux.com/images/uploads/Calendar.zip 然后创建cachemoni/public/cdn.html如下： ```html

CDN Monitor </FRAMESET> </HTML>``` cachemoni/public/side.html如下： ```html select_time
  • begin
  • end
    • ``` cachemoni/views/charts.tt如下： ```html FusionCharts Free Documentation
    FusionCharts. </td> </tr> </table> </body> </html>``` cachemoni/lib/cachemoni.pm中相关函数如下： ```perl use Time::Local; get '/cdncharts' => sub { my $type = params->{chartstype}; my $begin = unix_time_format(params->{timefrom}); my $end = unix_time_format(params->{timeto}); my $req_url = "/xml?begin=${begin}&end=${end}&type=${type}"; my $line = 1 if $type eq 'time'; template 'charts', { line => $line, url => "$req_url", }; }; sub unix_time_format { my $time = shift; if ( $time =~ m/^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2})/ ) { return timelocal('00',$5,$4,$3,$2-1,$1-1900); }; };``` 这里比较怪的是，如果setDataURL里传的arg是直接2011-08-01 11:00的格式，fusionchart.js不会发起请求，只有1311111111才行，所以只能在用Time::Local模块转换时间了。 最终访问结果如下：