wushenghua/vczero.github.io
1
0
Fork 0
mirror of https://github.com/wu736139669/vczero.github.io.git synced 2026-10-18 21:40:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

refomat

Browse Source
This commit is contained in:
lh_wang
2015-08-20 19:06:32 +08:00
parent 493d30081e
commit 93fa5e674b
7 changed files with 698 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
catapp/html/index.html
Executable → Regular
View File
catapp/html/welcome.html
+163
View File
@@ -0,0 +1,163 @@
<style type="text/css" id="css_jingle_welcome">
#welcome_robot{
width: 300px;height: 100%;margin:0 auto;margin-top: 80px;position: relative;
}
#welcome_robot>div{
position: absolute;
border: 5px solid #fff;
font-size: 20px;
font-weight: bold;
color: #fff;
border-radius: 40%;
}
#r_head{
left: 100px;top:0;
width: 100px;height: 100px;line-height: 100px;display: none;
}
#r_hand_left{
left: 10px;top:110px;
width: 40px;-webkit-transform:rotate(45deg);height: 120px;display: none;
}
#r_hand_right{
right: 10px;top:110px;
width: 40px;-webkit-transform:rotate(315deg);height: 120px;display: none;
}
#r_body{
left: 75px;top:110px;
width:150px;height: 150px;padding: 10px 5px;display: none;
}
#r_foot_left{
left: 75px;top:260px;-webkit-transform:rotate(30deg);
width: 40px;height: 120px;display: none;
}
#r_foot_right{
right: 95px;top:260px;
width:40px;height: 120px;display: none;
}
.w_box{
font-weight: bold;
font-size: 20px;
border-radius: 5px;
padding: 13px 8px;
margin:30px 40px;
background-color: #e4eefc;
text-align:left;
}
/*welcome robots*/
@-webkit-keyframes r_head {
0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}
@-webkit-keyframes r_hand_l {
0% {-webkit-transform: translateX(-100%);}
100% {-webkit-transform: translateX(0) rotate(45deg);}
}
@-webkit-keyframes r_hand_r {
0% {-webkit-transform: translateX(100%);}
100% {-webkit-transform: translateX(0) rotate(315deg);}
}
@-webkit-keyframes r_body {
0% {-webkit-transform: scale(.1) rotate(0);}
10% {-webkit-transform: scale(.2) rotate(360deg);}
40% {-webkit-transform: scale(.5) rotate(0);}
50% {-webkit-transform: scale(.6) rotate(360deg);}
80% {-webkit-transform: scale(.9) rotate(0);}
100% {-webkit-transform: scale(1.1) rotate(360deg);}
}
@-webkit-keyframes r_foot_l {
0% {-webkit-transform: translateX(250%) translateY(-300%) rotate(145deg);}
100% {-webkit-transform: translateX(0) translateY(0) rotate(30deg);}
}
@-webkit-keyframes r_foot_r {
0% {-webkit-transform: translateX(-300%) translateY(300%) rotate(270deg);}
100% {-webkit-transform: translateX(0) translateY(0) rotate(0);}
}
@-webkit-keyframes welcome_robot{
0%{-webkit-transform: scale(.8)}
20%{-webkit-transform: scale(1)}
40%{-webkit-transform: scale(.9)}
60%{-webkit-transform: scale(1)}
80%{-webkit-transform: scale(.8)}
100%{-webkit-transform: scale(1)}
}
@-webkit-keyframes welcome_jinlge{
0%{-webkit-transform: scale(.6); border-color : #E74C3C;color:#E74C3C}
20%{-webkit-transform: scale(1); border-color : #E67E22;color:#E67E22}
40%{-webkit-transform: scale(.7); border-color : #9f00a7;color:#9f00a7}
60%{-webkit-transform: scale(1) ;border-color : #2980B9;color:#2980B9}
80%{-webkit-transform: scale(.8); border-color : #C0392B;color:#C0392B}
100%{-webkit-transform: scale(1) ;border-color : #fff;color:#fff}
}
@-webkit-keyframes shake {
0% {-webkit-transform:rotate(-5deg);}
100% {-webkit-transform:rotate(5deg);}
}
#welcome_btn{
position: absolute;bottom: 100px;right: 80px;
-webkit-animation-name: shake;
-webkit-animation-duration: 0.10s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes box_l {
0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@-webkit-keyframes box_r {
0% { -webkit-transform: translateX(-100%) skewX(30deg); opacity: 0; }
60% { -webkit-transform: translateX(20%) skewX(-30deg); opacity: 1; }
80% { -webkit-transform: translateX(0%) skewX(15deg); opacity: 1; }
100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
</style>
<div id="jingle_welcome" class="slide">
<div class="slideWrapper" style="color: #fff;font-size: 1.5em;text-shadow: 1px 2px 1px rgba(0,0,0,0.5)">
<div style="text-align: center; height: 100%;background-color: rgb(97, 179, 81)">
<div id="welcome_jingle" style="height: 140px;width: 140px;border-radius: 50%;border: 8px solid #fff;font-size: 40px;font-weight:bold;line-height: 124px;margin: 40px auto">
CAT
</div>
<div style="margin-top: 100px;font-weight: 700;">Centralized Application Tracking</div>
</div>
<!--div style="text-align: center;height: 100%;background-color: #9B59B6;">
<div id="welcome_robot">
<div id="r_head">CAT</div>
<div id="r_hand_left">监控</div>
<div id="r_body" style="border-radius: 25%;">迅速利用框架产品的埋点</div>
<div id="r_hand_right">实时</div>
<div id="r_foot_left">轻量</div>
<div id="r_foot_right">全面</div>
</div>
<button id="welcome_btn" onclick="Jingle.Welcome.hide();">进入</button>
</div-->
<!--div style="text-align: center;height: 100%;background-color: #95A5A6">
<div id="w_box_1" class="w_box alizarin" style="margin-top: 80px;">CAT的独特之处</div>
<div id="w_box_2" class="w_box violet">实时不仅意味着快，也意味着准</div>
<div id="w_box_3" class="w_box peter-river">只要更新你的框架DLL，就能看到CAT统计</div>
<div id="w_box_4" class="w_box emerland">框架埋点经过反复review，不是海量日志</div>
</div>
<div style="text-align: center;height: 100%;background-color: #E67E22;position:relative;">
<div style="margin-top: 100px;font-weight: 900; text-align: left;padding-left: 20px;">
<h1>CAT网址</h1>
<h2>FWS:</h2>
<a>cat.fws.qa.nt.ctripcorp.com/cat/r/</a>
<h2>LPT:</h2>
<a>http://cat.lpt.qa.nt.ctripcorp.com/cat/r</a>
<h2>UAT:</h2>
<a>http://cat-uat/</a>
<h2>Prod:</h2>
<a>http://cat/</a>
</div>
</div-->
</div>
</div>
catapp/img/cat.mp3
BIN
View File
Binary file not shown.
catapp/img/detail_baocuo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

catapp/index.html
+259 -76
View File
@@ -1,92 +1,127 @@
<!--<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>cat demo app</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/Jingle.css"/>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="section_container">
<section id="index_section" class="active">
<header style="background-color:#368CE9;">
<h1 class="title">Cat Demo App</h1>
</header>
<article class="active" data-scroll="true">
<div style="padding: 10px 0 20px;">
<ul class="list inset demo-list">
<li data-icon="next" data-selected="selected">
<span class="icon mobile" style="font-size:25px;margin-top:-16px;"></span>
<a href="#appMonitor_section?a=1&b=2" data-target="section">
<strong>App监控</strong>
<p>mobile app</p>
</a>
</li>
</ul>
</div>
</article>
</section>
</div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/template.min.js"></script>
<script type="text/javascript" src="js/Jingle.debug.js"></script>
<script type="text/javascript" src="js/zepto.touch2mouse.js"></script>
<script type="text/javascript" src="js/JChart.debug.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>-->
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8">
<title>CAT V0.0.1</title>
<title>CAT V0.1</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/Jingle.css"/>
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/template.min.js"></script>
<script type="text/javascript" src="js/Jingle.debug.js"></script>
<script type="text/javascript" src="js/zepto.touch2mouse.js"></script>
<script type="text/javascript" src="js/JChart.debug.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<style>
.header-secondary .active{
border-bottom:4px solid #0093d5;
}
#aside_container span.icon {
position: inherit;
font-size: 40px;
color: #524d4b;
padding: 0 10px;
}
#aside_container a {
-webkit-box-flex: 1;
}
#aside_container li {
display: -webkit-box;
}
#aside_container i {
color:black;
}
#aside_container .tag{
width: 16px;
height: 16px;
position: absolute;
left: 21px;
top: 13px;
border-radius: 8px;
z-index: 999;
text-align: center;
}
#aside_container li strong {
padding-left: 5px;
}
#aside_container .header {
height:43px;
}
.indented > * {
margin: 5px 10px;
}
#module_article span.icon {
position: inherit;
font-size: 16px;
color: #524d4b;
padding: 0 10px;
}
.control-group li > a{
color:#A3A3A3;
}
</style>
</head>
<body>
<div id="aside_container"><!---侧边栏容器--->
<aside id="filter_aside" data-position="right" data-transition="push" style="-webkit-transform: translateX(0%);">
<div class="header">高级筛选</div>
<aside id="left_push_aside" data-position="left" data-transition="push">
<div class="header">已选模块</div>
<div class="center">
<ul class="list" id="module_list">
<li data-icon="next" data-selected="selected" class="" data-href="App_section" id="module_App_section">
<i class="icon next"></i>
<div class="tag alizarin">1</div>
<a >
<i class="icon newspaper"></i>
<strong>App监控</strong>
</a>
</li>
<li data-selected="selected" class="" data-href="Event_section" id="module_Event_section">
<i class="icon"></i>
<div class="tag alizarin">2</div>
<a>
<i class="icon bubble"></i>
<strong>Event监控</strong>
</a>
</li>
<li data-selected="selected" class="" data-href="Problem_section" id="module_Problem_section">
<i class="icon"></i>
<div class="tag alizarin">8</div>
<a >
<i class="icon bell"></i>
<strong>Problem监控</strong>
</a>
</li>
</ul>
<ul class="list" style="padding-top:20px;">
<li data-icon="plus" data-selected="selected" class="">
<i class="icon plus" id="module_add"></i>
<a href="#add_module" data-target="section">
<strong>添加模块</strong>
</a>
</li>
</ul>
</div>
</aside>
</div>
<div id="section_container"><!--页面容器--->
<section id="index_section" class="active">
<section id="App_section" class="active" data-transition="slideUp">
<header>
<h1 class="title">CAT</h1>
<nav class="left">
<div class="alizarin" style=" width: 12px;height: 12px;position: absolute; right: 0px;top: 5px;border-radius: 6px;"></div>
<a href="#left_push_aside" data-target="menu" data-icon="list"><i class="icon list"></i></a>
</nav>
<nav class="right">
<a href="#form_section" data-target="section" data-icon="search"><i class="icon search"></i></a>
</nav>
<h1 class="title">App监控</h1>
</header>
<nav class="header-secondary" style="overflow: hidden;">
<!--nav class="header-secondary" style="overflow: hidden;">
<div style="width: 640px; transition-property: transform; -webkit-transition-property: transform; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform-origin: 0px 0px 0px; transform: translate(-28px, 0px) scale(1) translateZ(0px);" class="grid">
<a href="javascript:void(0);" class="one-part active" style="display: block;">App</a>
<a href="javascript:void(0);" class="one-part" style="display: block;">Event</a>
@@ -96,7 +131,7 @@
<a href="javascript:void(0);" class="one-part" style="display: block;">Cache</a>
</div>
<i id="btn_add_module" class="icon plus" style="position: absolute;right:0;top:0;opacity:.9;z-index:9999;background-color:#282c32; margin: 0px; width: 21px;"></i>
</nav>
</nav-->
<article id="App_article" class="active">
<ul class="control-group" id="changeDragChartType" style="margin:10px 30px;">
<li class="active" data-type="request">请求数</li>
@@ -149,29 +184,177 @@
</div>
</div>
</article>
<article id="Event_article" class="indented">
event_article
</article>
<article id="No_article" class="indented">
No_article
</article>
</section>
<section id="add_module" data-init="true" >
<section id="Problem_section" class="" data-transition="slideUp">
<header>
<nav class="left">
<a href="#" data-icon="previous" data-target="back" style="color:white;"><i class="icon previous"></i>Back</a>
<div class="alizarin" style=" width: 12px;height: 12px;position: absolute; right: 0px;top: 5px;border-radius: 6px;"></div>
<a href="#left_push_aside" data-target="menu" data-icon="list"><i class="icon list"></i></a>
</nav>
<nav class="right">
<a href="#Problem_search_section" data-target="section" data-icon="search"><i class="icon search"></i></a>
</nav>
<h1 class="title">Problem监控</h1>
</header>
<article id="Problem_article" id="inset_list_article" style="padding-top:10px; overflow: scroll;" class="active">
<div>
<div id="__mychart" style="float:left;left:10px;position:absolute;right:50px;border-left:1px solid #F0F0F0;box-sizing:border-box;"></div>
<div id="__ids" style="float:right;position:absolute;width:50px;right:0;"></div>
<div style="position:absolute;top: 310px;left:10px;right:10px;font-size:0.9em;">
<div style="margin-top:10px;border-left: 4px solid #368CE9;padding-left:3px;">描述：
<span id="__id_tip">酒店产品查询服务器</span>
</div>
<div style="color:#A3A3A3;font-size:0.8em;margin-top:10px;">
System.ArgumentException 3.0
System.Net.WebException 62.0
System.Net.WebException 90.0
System.Web.HttpException 7.0
</div>
<div style="width:100%;">
<img style="width:100%;" src="./img/detail_baocuo.png"/>
</div>
</div>
</div>
</article>
</section>
<section id="add_module" class="" data-init="true" data-transition="slideUp">
<header>
<nav class="left">
<a href="#left_push_aside" data-icon="previous" data-target="menu" style="color:white;"><i class="icon previous"></i>Back</a>
</nav>
<h1 class="title">选择模块</h1>
</header>
<article class="active" data-scroll="true" id="module_article">
<ul class="list">
<li data-icon="checkbox-unchecked"><i class="icon checkbox-unchecked"></i>Cache</li>
<li data-icon="checkbox-unchecked"><i class="icon checkbox-unchecked"></i>Database</li>
<li data-icon="checkbox-unchecked"><i class="icon checkbox-unchecked"></i>Matraix</li>
<li data-icon="checkbox-unchecked"><i class="icon checkbox-unchecked"></i>State</li>
<li data-icon="checkbox-checked" data-href="App_section" data-icons="newspaper">
<span class="icon newspaper"></span>
<i class="icon checkbox-checked"></i>
App监控
</li>
<li data-icon="checkbox-checked" class="active" data-href="Event_section" data-icons="bubble">
<span class="icon bubble"></span>
<i class="icon checkbox-checked"></i>Event监控
</li>
<li data-icon="checkbox-checked" data-href="Problem_section" data-icons="bell">
<span class="icon bell"></span>
<i class="icon checkbox-checked"></i>Problem监控
</li>
<li data-icon="checkbox-unchecked" data-href="Matraix_section" data-icons="rocket">
<span class="icon rocket"></span>
<i class="icon checkbox-unchecked"></i>Matraix监控
</li>
</ul>
</article>
</section>
<section id="form_section" data-init="true">
<header>
<nav class="left">
<a href="#" data-icon="previous" data-target="back"><i class="icon previous"></i>Back</a>
</nav>
<h1 class="title">高级搜索</h1>
</header>
<article data-scroll="true" id="form_article" class="active" data--jscroll-="_jscroll_10" style="overflow: hidden;">
<div class="indented" style="transition-property: transform; -webkit-transition-property: transform; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) scale(1) translateZ(0px);">
<!-- Input -->
<form>
<input type="date">
<input type="time">
</form>
<!-- Input group -->
<form class="input-group">
<input type="text" placeholder="命令字">
<input type="email" placeholder="返回码">
<input type="text" placeholder="网络类型">
<input type="text" placeholder="版本">
<input type="text" placeholder="连接类型">
<input type="text" placeholder="平台">
<input type="text" placeholder="地区">
<input type="text" placeholder="运营商">
<input type="text" placeholder="网络类型">
<div class="input-row">
<label>选择对比</label>
<div class="toggle active" data-on="是" data-off="否" name="sex"><input style="display: none;" name="sex" value="true"><div class="toggle-handle"></div></div>
</div>
</form>
<form>
<a class="button block" data-icon="search" data-target="back" ><i class="icon search"></i>查询</a>
</form>
</div>
</article>
</section>
<section id="Problem_search_section" data-init="true">
<header>
<nav class="left">
<a href="#" data-icon="previous" data-target="back"><i class="icon previous"></i>Back</a>
</nav>
<h1 class="title">高级搜索</h1>
</header>
<article id="Problem_search_article" class="active" id="inset_list_article" data-scroll="true" style="padding-top:10px;">
<div style="margin-left:10px;margin-right:10px;">
<input type="date"/>
</div>
<div style="line-height:40px;font-size:1em;margin-left:10px;margin-right:10px;height:50px;width:100%;">
<div style="float:left;">
<input type="text" style="width:50px;text-align:center;" value="14"/>
</div>
<div style="float:left;margin-left:8px;">点</div>
<div style="float:left;margin-left:8px;">
<input type="text" style="width:50px;text-align:center;" value="35"/>
</div>
<div style="float:left;margin-left:8px;">分</div>
</div>
<div style="margin-left:10px;margin-right:10px;margin-top:20px;">
<a onclick="javascript:createProblem();" data-target="back" class="button" style="width:100%;background-color:#368CE9;height:40px;line-height:25px;">查看报表</a>
</div>
</article>
</section>
<section id="empty_section" class="" data-transition="slideUp">
<header>
<nav class="left">
<div class="alizarin" style=" width: 12px;height: 12px;position: absolute; right: 0px;top: 5px;border-radius: 6px;"></div>
<a href="#left_push_aside" data-target="menu" data-icon="list"><i class="icon list"></i></a>
</nav>
<h1 class="title"></h1>
</header>
<article id="App_article" class="active">
<div class="chartTitle" id="chartTitle_sp">该模块在努力的开发中......</div>
</article>
</section>
</div>
<audio controls="true" loop="false" hidden="true" id="myaudio" autoplay=false>
<source src="./img/cat.mp3" />
</audio>
<script>
var myAuto = document.getElementById('myaudio');
myAuto.pause();
</script>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/template.min.js"></script>
<script type="text/javascript" src="js/Jingle.debug.js"></script>
<script type="text/javascript" src="js/zepto.touch2mouse.js"></script>
<script type="text/javascript" src="js/JChart.debug.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
catapp/js/Jingle.debug.js
+1 -1
View File
@@ -47,7 +47,7 @@ var Jingle = J = {
launch : function(opts){
$.extend(this.settings,opts);
var hasShowWelcome = window.localStorage.getItem('hasShowWelcome');
if(!hasShowWelcome && this.settings.showWelcome){
if(/**!hasShowWelcome && */this.settings.showWelcome){
this.Welcome.show();
}
this.Element.init();
catapp/js/main.js
+275 -14
View File
@@ -15,11 +15,48 @@ var App = (function() {
}
});
});
J.Transition.add('flip', 'slideLeftOut', 'flipOut', 'slideRightOut', 'flipIn');
Jingle.launch({
showWelcome: false,
welcomeSlideChange: false,
showWelcome : true,
welcomeSlideChange : function(i){
switch(i){
case 0 :
J.anim('#welcome_jingle','welcome_jinlge',1000);
setTimeout(function(){
$("#css_jingle_welcome").remove();
$("#jingle_welcome").remove();
},1000)
break;
case 1 :
$('#r_head,#r_body,#r_hand_left,#r_hand_right,#r_foot_left,#r_foot_right').hide()
J.anim($('#r_head').show(),'r_head',500,function(){
J.anim($('#r_body').show(),'r_body',1200,function(){
J.anim($('#r_hand_left').show(),'r_hand_l',500);
J.anim($('#r_hand_right').show(),'r_hand_r',500,function(){
J.anim($('#r_foot_left').show(),'r_foot_l',500);
J.anim($('#r_foot_right').show(),'r_foot_r',500,function(){
J.anim('#welcome_robot','welcome_robot',2000);
});
});
});
});
break;
case 2 :
$('#w_box_1,#w_box_2,#w_box_3,#w_box_4').hide()
J.anim($('#w_box_1').show(),'box_l',500,function(){
J.anim($('#w_box_2').show(),'box_r',500,function(){
J.anim($('#w_box_3').show(),'box_l',500,function(){
J.anim($('#w_box_4').show(),'box_r',500);
});
});
});
break;
}
},
// welcomeSlideChange:false,
showPageLoading: false,
remotePage: {
'#about_section': 'remote/about_section.html'
@@ -150,9 +187,15 @@ function AppMonitor() {
$dely_vs = $('#success_delay_c');
var LINE_HEIGHT = 200;
$lineChart.attr('width', wh.width).attr('height', wh.height - LINE_HEIGHT);
$barChart.attr('width', wh.width).attr('height', wh.height - LINE_HEIGHT);
$delay.attr('width', wh.width).attr('height', wh.height - LINE_HEIGHT);
var newValue = wh.height - LINE_HEIGHT;
if(newValue < 200){
newValue = 200;
}
$lineChart.attr('width', wh.width).attr('height', newValue);
$barChart.attr('width', wh.width).attr('height', newValue);
$delay.attr('width', wh.width).attr('height', newValue);
var data = {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
@@ -188,9 +231,9 @@ function AppMonitor() {
}]
};
$('#changeDragChartType').on('change', function(e, el) {
$lineChart.attr('width', wh.width).attr('height', wh.height - LINE_HEIGHT);
$barChart.attr('width', wh.width).attr('height', wh.height - LINE_HEIGHT);
$delay.attr('width', wh.width).attr('height', wh.height - LINE_HEIGHT);
$lineChart.attr('width', wh.width).attr('height',newValue);
$barChart.attr('width', wh.width).attr('height', newValue);
$delay.attr('width', wh.width).attr('height', newValue);
renderChart(el.data('type'), data, data3);
@@ -200,13 +243,176 @@ function AppMonitor() {
}
$("#module_list").delegate("li","tap",function(){
var $li = $(this).find(">i");
var href = $(this).data("href");
var text = $(this).find("strong").text();
if($(this).find(".alizarin").css("display")!=="none"){
J.showToast("严重错误提示！！",'error',1000);
}
$(this).find(".alizarin").hide();
$(this).find(".alizarin").html(0);
clearNotice();
if($li.hasClass("next")){
J.Router.goTo("#"+href);
}else{
$("#module_list").find(".next").removeClass("next");
$li.addClass("next");
if($("#"+href).length){
J.Router.goTo("#"+href);
}else{
$("#empty_section").find(".title").text(text);
J.Router.goTo("#empty_section");
}
}
})
App.page('index', function() {
$("#module_article").delegate("li","tap",function(){
var $this = $(this);
var $i = $(this).find(">i");
var href = $this.data("href");
var icon = $this.data("icons");
var text = $this.text();
console.log(this)
if($i.hasClass("checkbox-unchecked")){
$i.removeClass("checkbox-unchecked").addClass("checkbox-checked");
$this.addClass("active");
var $li = $('<li data-selected="selected" class="" data-href="'+href+'" id="module_'+href+'"></li>');
var html = [
' <i class="icon"></i>',
' <div class="tag alizarin">8</div>',
' <a >',
' <i class="icon '+icon+'"></i>',
' <strong>'+text+'</strong>',
' </a>'
];
$li.html(html.join(""));
$li.appendTo($("#module_list"));
//
}else{
if($this.hasClass("active")){
$i.removeClass("checkbox-checked").addClass("checkbox-unchecked");
$this.removeClass("active");
console.log("module_"+href)
console.log($("#module_"+href)[0])
$("#module_"+href).remove();
//
}else{
}
}
});
function addModule(){
}
function deleteModule(){
}
function createProblem(){
//随机生成
var data = [];
var ids = [];
for (var i = 0; i < 15; i++) {
data[i] = Math.ceil(Math.random() * 1200);
if(data[i] <= 70){
data[i] = 70 + Math.ceil(Math.random()*10);
}
ids[i] = Math.ceil(Math.random() * 10000);
if(ids[i] <= 1000){
ids[i] = 1000 + Math.ceil(Math.random()*106);
}
}
var tagValue = 0;　
//排序
for (i = 0; i < data.length; i++) {
var min = data[i];
var temp;
var index = i;
for (var j = i + 1; j < data.length; j++) {
if (data[j] > min) {
min = data[j];
index = j;
}
}
temp = data[i];
data[i] = min;
data[index] = temp;
}
//渲染
console.log(data);
console.log(ids);
$('#__mychart').empty();
$('#__ids').empty();
for(i = 0; i< data.length; i++){
var rate = Math.floor((data[i]/ data[0]) * 100) + '%';
var color = '';
if(data[i] >= 1000){
color = '#E10B70';
}
if(data[i] >= 500 && data[i] < 1000){
color = '#E6BC00';
}
if(data[i] < 500){
color = '#3BC1FF';
}
var str = '<div onclick="showTip()" style="height:15px;padding-left:1px;box-sizing:border-box;background-color:';
str += color + ';margin-bottom:4px;';
str += 'width:' + rate + ';font-size:0.9em;color:#fff;font-style:italic;">';
str += data[i] + '</div>'
$('#__mychart').append(str);
var idStr = '<div style="font-size:0.9em;color:#999;margin-bottom:2px;">';
idStr += ids[i] + '</div>';
$('#__ids').append(idStr);
}
window.showTip = function showTip(){
$('#__id_tip').text("");
var str = ['酒店产品查询服务器', '机票产品查询服务器', '汽车服务器', '商旅', '团队游'];
var index = parseInt(Math.random() * 5);
$('#__id_tip').text(str[index]);
}
}
createProblem();
App.page('add_module', function() {
this.init = function() {
J.Scroll('#index_section nav.header-secondary', {
hScroll: true,
hScrollbar: false
});
}
})
App.page('app', function() {
this.init = function() {
// J.Scroll('#index_section nav.header-secondary', {
// hScroll: true,
// hScrollbar: false
// });
AppMonitor();
$('#App_article').css('overflow', 'scroll');
$('#index_section nav.header-secondary a').on('tap', function(e) {
@@ -237,6 +443,61 @@ App.page('index', function() {
}
});
function ramNotice(){
var len = $("#module_list").find("li").length;
var ram =Math.round(Math.random()*(len-1));
var $li = $("#module_list").find("li").get(ram);
var $alizarin = $($li).find(".alizarin");
if($alizarin.css("display")!=="none"){
}else{
val = 0;
}
if(val==".."){
curVla="..";
}else{
var val = $alizarin.text()*1;
var curVla = val+1;
if(curVla>9){
curVla="..";
}
}
$alizarin.text(curVla)
$alizarin.show();
clearNotice();
autoPlay();
}
setInterval(function(){
ramNotice();
},1000*8);
function clearNotice(){
var len = 0;
$("#module_list").find(".alizarin").each(function(){
if($(this).css("display")!="none"){
len = 1;
return false
}
})
console.log(len)
if(len){
$("header .alizarin").show();
}else{
$("header .alizarin").hide();
}
}
function autoPlay(){
console.log("autoPlay")
var myAuto = document.getElementById('myaudio');
myAuto.play();
setTimeout(function(){
myAuto.pause();
}, 1000);
}
$(function() {
App.run();