mirror of
https://github.com/wu736139669/vczero.github.io.git
synced 2026-08-05 06:23:38 +00:00
add cat app
This commit is contained in:
lh_wang
@@ -0,0 +1,37 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<projectDescription>
|
||||
<name>catdemoapp</name>
|
||||
<comment>Create By HBuilder</comment>
|
||||
<projects>
|
||||
</projects>
|
||||
<buildSpec>
|
||||
<buildCommand>
|
||||
<name>com.aptana.ide.core.unifiedBuilder</name>
|
||||
<arguments>
|
||||
</arguments>
|
||||
</buildCommand>
|
||||
</buildSpec>
|
||||
<natures>
|
||||
<nature>com.aptana.projects.webnature</nature>
|
||||
</natures>
|
||||
<filteredResources>
|
||||
<filter>
|
||||
<id>1439967738909</id>
|
||||
<name></name>
|
||||
<type>10</type>
|
||||
<matcher>
|
||||
<id>org.eclipse.ui.ide.orFilterMatcher</id>
|
||||
<arguments>
|
||||
<matcher>
|
||||
<id>org.eclipse.ui.ide.multiFilter</id>
|
||||
<arguments>1.0-projectRelativePath-matches-false-false-bin</arguments>
|
||||
</matcher>
|
||||
<matcher>
|
||||
<id>org.eclipse.ui.ide.multiFilter</id>
|
||||
<arguments>1.0-projectRelativePath-matches-false-false-setting</arguments>
|
||||
</matcher>
|
||||
</arguments>
|
||||
</matcher>
|
||||
</filter>
|
||||
</filteredResources>
|
||||
</projectDescription>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,76 @@
|
||||
/**** control group **/
|
||||
.control-group li{
|
||||
border-color:#368CE9;
|
||||
}
|
||||
|
||||
.control-group li.active {
|
||||
background: #368CE9;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.selected{
|
||||
background-color: #E6E6E6 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chartTitle{
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.7em;
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
|
||||
.legend{
|
||||
border: 1px solid #b9b4b6;
|
||||
margin:0 auto;
|
||||
width: 150px;
|
||||
border-radius:4px;
|
||||
padding:3px;
|
||||
display: -webkit-box;
|
||||
}
|
||||
.legend>div{
|
||||
-webkit-box-flex : 1;
|
||||
box-flex : 1;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.item_list{
|
||||
font-size:0.8em;width:100%;height:25px;
|
||||
}
|
||||
|
||||
.item_listl_left{
|
||||
float:left;
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
|
||||
.item_list_high{
|
||||
color:#A1A1A1;
|
||||
}
|
||||
|
||||
.item_list_right{
|
||||
float:right;
|
||||
margin-right:10px;
|
||||
}
|
||||
|
||||
|
||||
.item_list_green{
|
||||
color:#A1A1A1;
|
||||
}
|
||||
|
||||
|
||||
header{
|
||||
background-color:#368CE9;
|
||||
}
|
||||
|
||||
.one-part{
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
<section id="appMonitor_section" >
|
||||
<header style="background-color:#368CE9;">
|
||||
<nav class="left">
|
||||
<a href="#" data-icon="previous" data-target="back">回退</a>
|
||||
</nav>
|
||||
<h1 class="title">App趋势图</h1>
|
||||
</header>
|
||||
|
||||
<article class="active">
|
||||
<ul class="control-group" id="changeDragChartType" style="margin:10px 30px;">
|
||||
<li class="active" data-type="request">请求数</li>
|
||||
<li data-type="success">成功率</li>
|
||||
<li data-type="delay">成功延时</li>
|
||||
</ul>
|
||||
<div class="chartTitle" id="chartTitle_sp">请求数（个/每分钟）</div>
|
||||
<canvas id="chart_drag_line_canvas"></canvas>
|
||||
<canvas id="chart_drag_bar_canvas" style="display: none;"></canvas>
|
||||
<canvas id="chart_drag_delay_canvas" style="display: none;"></canvas>
|
||||
<div class="legend">
|
||||
<div data-icon="stop" style="color: #368CE9;">当前值</div>
|
||||
<div data-icon="stop" style="color: #FFBB00;">对比值</div>
|
||||
</div>
|
||||
|
||||
<h1 class="chartTitle" style="text-align:left;font-size:0.85em;">当前值</h1>
|
||||
<div class="item_list">
|
||||
<div class="item_listl_left">
|
||||
<span>成功率:</span> <span id="success_value_c" class="item_list_high">95.799%</span>
|
||||
</div>
|
||||
<div class="item_list_right">
|
||||
<span>总请求数:</span> <span id="success_request_c" class="item_list_green">85,773</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item_list">
|
||||
<div class="item_listl_left">
|
||||
<span>总请求数(%):</span> <span id="success_requestA_c" class="item_list_high">100.000%</span>
|
||||
</div>
|
||||
<div class="item_list_right">
|
||||
<span>成功平均延迟(ms):</span> <span id="success_delay_c" class="item_list_green">13,240</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="chartTitle" style="text-align:left;font-size:0.85em;">对比值</h1>
|
||||
<div class="item_list">
|
||||
<div class="item_listl_left">
|
||||
<span>成功率:</span> <span class="item_list_high" id="success_value_vs">95.799%</span>
|
||||
</div>
|
||||
<div class="item_list_right">
|
||||
<span>总请求数:</span> <span id="success_request_vs" class="item_list_green">85,773</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_list">
|
||||
<div class="item_listl_left">
|
||||
<span>总请求数(%):</span> <span id="success_requestA_vs" class="item_list_high">100.000%</span>
|
||||
</div>
|
||||
<div class="item_list_right">
|
||||
<span>成功平均延迟(ms):</span> <span id="success_delay_vs" class="item_list_green">13,240</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</section>
|
||||
|
||||
|
||||
Executable
+148
@@ -0,0 +1,148 @@
|
||||
<!DOCTYPE >
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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="Jingle/dist/Jingle.min.1.css"/>
|
||||
<script type="text/javascript" src="Jingle/libs/zepto.js"></script>
|
||||
<script type="text/javascript" src="Jingle/libs/iscroll.js"></script>
|
||||
<script type="text/javascript" src="Jingle/libs/template.min.js"></script>
|
||||
<script type="text/javascript" src="Jingle/dist/Jingle.debug.js"></script>
|
||||
|
||||
<style>
|
||||
.header-secondary .active{
|
||||
border-bottom:4px solid #0093d5;
|
||||
}
|
||||
</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>
|
||||
<div class="center">
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
<div id="section_container"><!--页面容器--->
|
||||
<section id="index_section" class="active">
|
||||
<header>
|
||||
<h1 class="title">CAT（Central Application Tracking）</h1>
|
||||
</header>
|
||||
<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>
|
||||
<a href="javascript:void(0);" class="one-part" style="display: block;">Problem</a>
|
||||
<a href="javascript:void(0);" class="one-part" style="display: block;">Heartbeat</a>
|
||||
<a href="javascript:void(0);" class="one-part" style="display: block;">Cross</a>
|
||||
<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>
|
||||
<article id="App_article" class="active">
|
||||
app_article
|
||||
</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" >
|
||||
<header>
|
||||
<nav class="left">
|
||||
<a href="#" data-icon="previous" data-target="back" 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>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
var App = (function(){
|
||||
var pages = {};
|
||||
var run = function(){
|
||||
$.each(pages,function(k,v){
|
||||
var sectionId = '#'+k+'_section';
|
||||
$('body').delegate(sectionId,'pageinit',function(){
|
||||
v.init && v.init.call(v);
|
||||
});
|
||||
$('body').delegate(sectionId,'pageshow',function(e,isBack){
|
||||
//页面加载的时候都会执行
|
||||
v.show && v.show.call(v);
|
||||
//后退时不执行
|
||||
if(!isBack && v.load){
|
||||
v.load.call(v);
|
||||
}
|
||||
});
|
||||
});
|
||||
Jingle.launch();
|
||||
};
|
||||
var page = function(id,factory){
|
||||
return ((id && factory)?_addPage:_getPage).call(this,id,factory);
|
||||
}
|
||||
var _addPage = function(id,factory){
|
||||
pages[id] = new factory();
|
||||
};
|
||||
var _getPage = function(id){
|
||||
return pages[id];
|
||||
}
|
||||
//动态计算chart canvas的高度，宽度，以适配终端界面
|
||||
var calcChartOffset = function(){
|
||||
return {
|
||||
height : $(document).height() - 44 - 30 -60,
|
||||
width : $(document).width()
|
||||
}
|
||||
|
||||
}
|
||||
return {
|
||||
run : run,
|
||||
page : page,
|
||||
calcChartOffset : calcChartOffset
|
||||
}
|
||||
}());
|
||||
|
||||
App.page('index',function(){
|
||||
this.init = function(){
|
||||
J.Scroll('#index_section nav.header-secondary',{
|
||||
hScroll:true,
|
||||
hScrollbar : false
|
||||
});
|
||||
$('#index_section nav.header-secondary a').on('tap',function(){
|
||||
if(!$(this).hasClass("active")){
|
||||
$(this).parent().find(".active").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
}
|
||||
|
||||
var text = $(this).text();
|
||||
var id = "#"+text+"_article";
|
||||
var noid = "#No_article";
|
||||
if($(id).length){
|
||||
J.Router.showArticle(id,$(id));
|
||||
}else{
|
||||
J.Router.showArticle(noid,$(noid));
|
||||
}
|
||||
})
|
||||
$('#index_section #btn_add_module').on('tap',function(){
|
||||
J.Router.goTo('#add_module');
|
||||
});
|
||||
|
||||
}
|
||||
})
|
||||
App.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,177 @@
|
||||
<!--<!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>
|
||||
<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;
|
||||
}
|
||||
</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>
|
||||
<div class="center">
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
<div id="section_container"><!--页面容器--->
|
||||
<section id="index_section" class="active">
|
||||
<header>
|
||||
<h1 class="title">CAT</h1>
|
||||
</header>
|
||||
<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>
|
||||
<a href="javascript:void(0);" class="one-part" style="display: block;">Problem</a>
|
||||
<a href="javascript:void(0);" class="one-part" style="display: block;">Heartbeat</a>
|
||||
<a href="javascript:void(0);" class="one-part" style="display: block;">Cross</a>
|
||||
<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>
|
||||
<article id="App_article" class="active">
|
||||
<ul class="control-group" id="changeDragChartType" style="margin:10px 30px;">
|
||||
<li class="active" data-type="request">请求数</li>
|
||||
<li data-type="success">成功率</li>
|
||||
<li data-type="delay">成功延时</li>
|
||||
</ul>
|
||||
<div class="chartTitle" id="chartTitle_sp">请求数（个/每分钟）</div>
|
||||
<canvas id="chart_drag_line_canvas"></canvas>
|
||||
<canvas id="chart_drag_bar_canvas" style="display: none;"></canvas>
|
||||
<canvas id="chart_drag_delay_canvas" style="display: none;"></canvas>
|
||||
<div class="legend">
|
||||
<div data-icon="stop" style="color: #368CE9;">当前值</div>
|
||||
<div data-icon="stop" style="color: #FFBB00;">对比值</div>
|
||||
</div>
|
||||
|
||||
<h1 class="chartTitle" style="text-align:left;font-size:0.85em;">当前值</h1>
|
||||
<div class="item_list">
|
||||
<div class="item_listl_left">
|
||||
<span>成功率:</span> <span id="success_value_c" class="item_list_high">95.799%</span>
|
||||
</div>
|
||||
<div class="item_list_right">
|
||||
<span>总请求数:</span> <span id="success_request_c" class="item_list_green">85,773</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item_list">
|
||||
<div class="item_listl_left">
|
||||
<span>总请求数(%):</span> <span id="success_requestA_c" class="item_list_high">100.000%</span>
|
||||
</div>
|
||||
<div class="item_list_right">
|
||||
<span>成功平均延迟(ms):</span> <span id="success_delay_c" class="item_list_green">13,240</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="chartTitle" style="text-align:left;font-size:0.85em;">对比值</h1>
|
||||
<div class="item_list">
|
||||
<div class="item_listl_left">
|
||||
<span>成功率:</span> <span class="item_list_high" id="success_value_vs">95.799%</span>
|
||||
</div>
|
||||
<div class="item_list_right">
|
||||
<span>总请求数:</span> <span id="success_request_vs" class="item_list_green">85,773</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_list">
|
||||
<div class="item_listl_left">
|
||||
<span>总请求数(%):</span> <span id="success_requestA_vs" class="item_list_high">100.000%</span>
|
||||
</div>
|
||||
<div class="item_list_right">
|
||||
<span>成功平均延迟(ms):</span> <span id="success_delay_vs" class="item_list_green">13,240</span>
|
||||
</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" >
|
||||
<header>
|
||||
<nav class="left">
|
||||
<a href="#" data-icon="previous" data-target="back" 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>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,15 @@
|
||||
(function(){
|
||||
function BarcodeScanner() {};
|
||||
|
||||
BarcodeScanner.prototype.scan = function(mode,win,err){
|
||||
cordova.exec(win, err, "BarcodeScanner", "scan", [mode]);
|
||||
};
|
||||
|
||||
|
||||
if(!window.plugins) {
|
||||
window.plugins = {};
|
||||
}
|
||||
if (!window.plugins.barcodeScanner) {
|
||||
window.plugins.barcodeScanner = new BarcodeScanner();
|
||||
}
|
||||
})();
|
||||
Vendored
+6947
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,243 @@
|
||||
var App = (function() {
|
||||
var pages = {};
|
||||
var run = function() {
|
||||
$.each(pages, function(k, v) {
|
||||
var sectionId = '#' + k + '_section';
|
||||
$('body').delegate(sectionId, 'pageinit', function() {
|
||||
v.init && v.init.call(v);
|
||||
});
|
||||
$('body').delegate(sectionId, 'pageshow', function(e, isBack) {
|
||||
//页面加载的时候都会执行
|
||||
v.show && v.show.call(v);
|
||||
//后退时不执行
|
||||
if (!isBack && v.load) {
|
||||
v.load.call(v);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
J.Transition.add('flip', 'slideLeftOut', 'flipOut', 'slideRightOut', 'flipIn');
|
||||
Jingle.launch({
|
||||
showWelcome: false,
|
||||
welcomeSlideChange: false,
|
||||
showPageLoading: false,
|
||||
remotePage: {
|
||||
'#about_section': 'remote/about_section.html'
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
var page = function(id, factory) {
|
||||
return ((id && factory) ? _addPage : _getPage).call(this, id, factory);
|
||||
}
|
||||
var _addPage = function(id, factory) {
|
||||
pages[id] = new factory();
|
||||
};
|
||||
var _getPage = function(id) {
|
||||
return pages[id];
|
||||
}
|
||||
|
||||
//动态计算chart canvas的高度，宽度，以适配终端界面
|
||||
var calcChartOffset = function() {
|
||||
return {
|
||||
height: $(document).height() - 44 - 30 - 60,
|
||||
width: $(document).width()
|
||||
}
|
||||
|
||||
};
|
||||
return {
|
||||
run: run,
|
||||
page: page,
|
||||
calcChartOffset: calcChartOffset
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
|
||||
//打开监控页面
|
||||
function AppMonitor() {
|
||||
var $lineChart = null;
|
||||
var $barChart = null;
|
||||
var $delay = null;
|
||||
var $request_c = null;
|
||||
var $request_vs = null;
|
||||
var $success_c = null;
|
||||
var $success_vs = null;
|
||||
var $request_A_c = null;
|
||||
var $request_A_vs = null;
|
||||
var $dely_c = null;
|
||||
var $dely_vs = null;
|
||||
|
||||
var renderChart = function(type, data, data3) {
|
||||
if (type == 'request') {
|
||||
$lineChart.show();
|
||||
$barChart.hide();
|
||||
$delay.hide();
|
||||
new JChart.Line(data, {
|
||||
id: 'chart_drag_line_canvas',
|
||||
smooth: false,
|
||||
fill: false,
|
||||
datasetGesture: true,
|
||||
datasetOffsetNumber: 10
|
||||
}).draw(true);
|
||||
$('#chartTitle_sp').text('请求数（个/每分钟）');
|
||||
$success_c.text('95.736%');
|
||||
$success_vs.text('95.484%');
|
||||
$request_c.text('93,984');
|
||||
$request_vs.text('202,242');
|
||||
$request_A_c.text('100.000%');
|
||||
$request_A_vs.text('215.188%');
|
||||
$dely_c.text('12,614');
|
||||
$dely_vs.text('8,605');
|
||||
|
||||
}
|
||||
|
||||
if (type === 'success') {
|
||||
$lineChart.hide();
|
||||
$delay.hide();
|
||||
$barChart.show();
|
||||
new JChart.Line(data, {
|
||||
id: 'chart_drag_bar_canvas',
|
||||
datasetGesture: true,
|
||||
datasetOffsetNumber: 10
|
||||
}).draw(true);
|
||||
$('#chartTitle_sp').text('成功率（％/每分钟）');
|
||||
$success_c.text('96.736%');
|
||||
$success_vs.text('95.34%');
|
||||
$request_c.text('91,984');
|
||||
$request_vs.text('102,242');
|
||||
$request_A_c.text('100.000%');
|
||||
$request_A_vs.text('165.188%');
|
||||
$dely_c.text('12,634');
|
||||
$dely_vs.text('8,905');
|
||||
}
|
||||
|
||||
if (type === 'delay') {
|
||||
$lineChart.hide();
|
||||
$barChart.hide();
|
||||
$delay.show();
|
||||
new JChart.Line(data3, {
|
||||
id: 'chart_drag_delay_canvas',
|
||||
datasetGesture: true,
|
||||
datasetOffsetNumber: 10,
|
||||
smooth: false,
|
||||
fill: false
|
||||
}).draw(true);
|
||||
$('#chartTitle_sp').text('超时平均值（毫秒/每分钟）');
|
||||
$success_c.text('97.736%');
|
||||
$success_vs.text('99.34%');
|
||||
$request_c.text('92,984');
|
||||
$request_vs.text('109,242');
|
||||
$request_A_c.text('100.000%');
|
||||
$request_A_vs.text('195.188%');
|
||||
$dely_c.text('12,834');
|
||||
$dely_vs.text('9,905');
|
||||
}
|
||||
};
|
||||
|
||||
(function() {
|
||||
var wh = App.calcChartOffset();
|
||||
$lineChart = $('#chart_drag_line_canvas');
|
||||
$barChart = $('#chart_drag_bar_canvas');
|
||||
$delay = $('#chart_drag_delay_canvas');
|
||||
$success_c = $('#success_value_c');
|
||||
$success_vs = $('#success_value_vs');
|
||||
$request_c = $('#success_request_c');
|
||||
$request_vs = $('#success_request_vs');
|
||||
$request_A_c = $('#success_requestA_c');
|
||||
$request_A_vs = $('#success_requestA_vs');
|
||||
$dely_c = $('#success_delay_c');
|
||||
$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 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],
|
||||
datasets: [{
|
||||
name: '当前值',
|
||||
color: "#368CE9",
|
||||
pointColor: "#00C349",
|
||||
pointBorderColor: "#fff",
|
||||
data: [65, 59, 90, 81, 56, 55, 40, 20, 13, 20, 11, 60, 65, 59, 90, 81, 56, 55, 40, 20, 11, 20, 10, 60, 11, 60, 65]
|
||||
}, {
|
||||
name: '对比值',
|
||||
color: "#FFBB00",
|
||||
pointColor: "#00C349",
|
||||
pointBorderColor: "#fff",
|
||||
data: [28, 48, 40, 19, 96, 27, 100, 40, 40, 70, 11, 89, 28, 48, 40, 19, 96, 27, 100, 40, 40, 70, 10, 89, 28, 48, 40]
|
||||
}]
|
||||
};
|
||||
|
||||
var data3 = {
|
||||
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],
|
||||
datasets: [{
|
||||
name: '当前值',
|
||||
color: "#3C9BFD",
|
||||
pointColor: "#00C349",
|
||||
pointBorderColor: "#fff",
|
||||
data: [165, 159, 90, 81, 56, 55, 40, 120, 13, 20, 11, 60, 165, 59, 390, 81, 56, 55, 840, 20, 11, 20, 10, 60, 11, 60, 65]
|
||||
}, {
|
||||
name: '对比值',
|
||||
color: "#FACC02",
|
||||
pointColor: "#00C349",
|
||||
pointBorderColor: "#fff",
|
||||
data: [28, 48, 140, 19, 96, 227, 100, 40, 40, 770, 11, 89, 28, 48, 40, 19, 96, 327, 100, 40, 40, 470, 10, 89, 28, 48, 40]
|
||||
}]
|
||||
};
|
||||
$('#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);
|
||||
|
||||
renderChart(el.data('type'), data, data3);
|
||||
|
||||
})
|
||||
renderChart('request', data);
|
||||
})();
|
||||
}
|
||||
|
||||
|
||||
|
||||
App.page('index', 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) {
|
||||
if (!$(this).hasClass("active")) {
|
||||
$(this).parent().find(".active").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
}
|
||||
|
||||
var text = $(this).text();
|
||||
var id = "#" + text + "_article";
|
||||
var noid = "#No_article";
|
||||
if ($(id).length) {
|
||||
J.Router.showArticle(id, $(id));
|
||||
} else {
|
||||
J.Router.showArticle(noid, $(noid));
|
||||
}
|
||||
|
||||
|
||||
if ($(e.srcElement).text() === 'App') {
|
||||
AppMonitor();
|
||||
$('#App_article').css('overflow', 'scroll');
|
||||
}
|
||||
|
||||
})
|
||||
$('#index_section #btn_add_module').on('tap', function() {
|
||||
J.Router.goTo('#add_module');
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$(function() {
|
||||
App.run();
|
||||
});
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
+2420
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,89 @@
|
||||
(function ($) {
|
||||
/**
|
||||
* If no touch events are available map touch events to corresponding mouse events.
|
||||
**/
|
||||
if(!('ontouchstart' in window)){
|
||||
var _fakeCallbacks = {}; // store the faked callbacks so that they can be unbound
|
||||
function touch2mouse(context,args){
|
||||
var type = args[0],//事件类型
|
||||
t = type ,matched = false;
|
||||
if ((typeof type) == "object") {
|
||||
return args;
|
||||
}
|
||||
if(type.indexOf('touchstart')>-1){
|
||||
matched = true;
|
||||
t = t.replace('touchstart','mousedown');
|
||||
}else if(t.indexOf('touchend')>-1){
|
||||
matched = true;
|
||||
t = t.replace('touchend','mouseup');
|
||||
}else if(t.indexOf('touchmove')>-1){
|
||||
matched = true;
|
||||
t = t.replace('touchmove','mousemove');
|
||||
}
|
||||
if(matched){//匹配到touch事件
|
||||
var ci = -1;
|
||||
//找出callback，需要更换里面的event对象的属性
|
||||
for(var i =1;i<args.length;i++){
|
||||
if(typeof args[i] == 'function'){
|
||||
ci = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
args[0] = t;
|
||||
if(ci > -1){
|
||||
args[ci] = fakeTouches(type, args[ci] , context);
|
||||
}
|
||||
}
|
||||
return args;
|
||||
}
|
||||
|
||||
function fakeTouches(type, callback, context) {
|
||||
// wrap the callback with a function that adds a fake
|
||||
// touches property to the event.
|
||||
return _fakeCallbacks[callback] = function (event) {
|
||||
if(event.liveFired)context = this;//if it is delegate event,change context to target element
|
||||
if (event.button) {
|
||||
return false;
|
||||
}
|
||||
event.touches = [{
|
||||
length: 1,// 1 mouse (finger)
|
||||
clientX: event.clientX,
|
||||
clientY: event.clientY,
|
||||
pageX: event.pageX,
|
||||
pageY: event.pageY,
|
||||
screenX: event.screenX,
|
||||
screenY: event.screenY,
|
||||
target: event.target
|
||||
}];
|
||||
event.touchType = type;
|
||||
return callback.apply(context, [event]);
|
||||
}
|
||||
}
|
||||
|
||||
var _trigger = $.fn.trigger;
|
||||
$.fn.trigger = function(event, data){
|
||||
var args = Array.prototype.slice.call(arguments,0);
|
||||
return _trigger.apply(this,touch2mouse(this,args));
|
||||
};
|
||||
var _triggerHandler = $.fn.triggerHandler;
|
||||
$.fn.triggerHandler = function(event, data){
|
||||
var args = Array.prototype.slice.call(arguments,0);
|
||||
return _triggerHandler.apply(this, touch2mouse(this,args));
|
||||
};
|
||||
var _on = $.fn.on;
|
||||
$.fn.on = function(event, selector, data, callback, one){
|
||||
var args = Array.prototype.slice.call(arguments,0);
|
||||
return _on.apply(this,touch2mouse(this,args));
|
||||
}
|
||||
var _off = $.fn.off;
|
||||
$.fn.off = function(event, selector, callback){
|
||||
var args = [event];
|
||||
if(typeof selector == 'string'){
|
||||
args.push(selector);
|
||||
}
|
||||
var result = touch2mouse(this,args).concat([_fakeCallbacks[callback]||callback]);
|
||||
delete(_fakeCallbacks[callback]);
|
||||
return _off.apply(this,result);
|
||||
}
|
||||
}
|
||||
})(Zepto);
|
||||
Reference in New Issue
Block a user