/
big_ng.html
137 lines (125 loc) · 7.88 KB
/
big_ng.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
{% extends "base_ng.html" %}
{%block head_js%}
{{super()}}
<script>
// 这里是后台渲染出来的参数
// 首页请求的参数
var obj = {};
obj.id='{{g.id}}';
obj.start={{g.start}};
obj.end = {{g.end}};
obj.cf='{{g.cf}}';
obj.sum='{{g.sum}}';
obj.sumonly='{{g.sumonly}}';
obj.graph_type='{{g.graph_type}}';
// 后续请求的参数
var obj2 = {};
obj2.id='{{g.id}}';
obj2.start=-300;
obj2.cf='{{g.cf}}';
obj2.tongbi='{{g.tongbi}}';
obj2.sum='{{g.sum}}';
obj2.sumonly='{{g.sumonly}}';
obj2.graph_type='{{g.graph_type}}';
</script>
<script src="{{url_for('static', filename='js/angular.min.js')}}"></script>
<script src="/static/js/jquery.flot.js?_v=0.0.3"></script>
<script src="{{url_for('static', filename='js/jquery.flot.time.js')}}"></script>
<script src="{{url_for('static', filename='js/jquery.flot.selection.js')}}"></script>
<script src="{{url_for('static', filename='js/jquery.flot.stack.js')}}"></script>
<script src="{{url_for('static', filename='js/underscore.js')}}"></script>
<script src="/static/js/util_ng.js?_v=0.0.4"></script>
<script src="/static/js/big_ng.js?_v=0.0.4"></script>
<script src="/static/js/angular-multi-check.js"></script>
{%endblock%}
{%block body_head%}
<body style="height:100%; padding: 0px; margin: 0px; font-size:12px;">
{%endblock%}
{% block container_outer %}
<div id="container" class="container-fluid" ng-app="app">
<div class="row" style="margin:0px;" ng-controller="BigCtrl as vm">
<div class="panel panel-default">
<div class="panel-heading">
<a class="btn btn-default btn-xs reset-zoom pull-right">
<span class="glyphicon glyphicon-zoom-out" aria-hidden="true">
</a>
<div class="btn-group pull-right chart-config">
<a class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" href="javascript:;" style="margin-left:0px; vertical-align:top;">
<span class="caret"></span></a>
<ul class="dropdown-menu" style="min-width:400px; margin:0 0 0 0px;">
<table class="table table-striped">
<tbody><tr><td width="100px;"><span>{{_('date range')}}</span>
</td><td>
<a ng-class="{enable: vm.param.start == -3600}" ng-click="vm.param.start=-3600" class="chart-opt">1h</a>
<a ng-class="{enable: vm.param.start == -21600}" ng-click="vm.param.start=-21600" class="chart-opt">6h</a>
<a ng-class="{enable: vm.param.start == -43200}" ng-click="vm.param.start=-43200" class="chart-opt">12h</a>
<a ng-class="{enable: vm.param.start == -86400}" ng-click="vm.param.start=-86400" class="chart-opt">24h</a>
<a ng-class="{enable: vm.param.start == -259200}" ng-click="vm.param.start=-259200" class="chart-opt">3d</a>
<a ng-class="{enable: vm.param.start == -604800}" ng-click="vm.param.start=-604800" class="chart-opt">7d</a>
<a ng-class="{enable: vm.param.start == -2592000}" ng-click="vm.param.start=-2592000" class="chart-opt">1m</a>
</td></tr>
<tr><td> <span>{{_('sampling method')}}</span>
</td><td>
<a ng-class="{enable: vm.param.cf=='MAX'}" ng-click="vm.param.cf='MAX'" class="chart-opt">{{_('max')}}</a>
<a ng-class="{enable: vm.param.cf=='MIN'}" ng-click="vm.param.cf='MIN'" class="chart-opt">{{_('min')}}</a>
<a ng-class="{enable: vm.param.cf=='AVERAGE'}" ng-click="vm.param.cf='AVERAGE'" class="chart-opt">{{_('average')}}</a>
</td></tr>
<tr><td><span>{{_('other')}}</span>
</td><td>
<a ng-click="vm.param.sum='on';vm.param.sumonly='off'" data-k="sum|sumonly" data-v="1| " class="chart-opt">{{_('sum')}}</a>
<a ng-click="vm.param.sum='on';vm.param.sumonly='on'" data-k="sumonly" data-v="1" class="chart-opt">{{_('sum only')}}m</a>
<a ng-click="vm.param.sum='off';vm.param.sumonly='off'" data-k="sum|sumonly" data-v=" | " class="chart-opt">{{_('cancel sum')}}</a>
<a ng-click="vm.reset()" data-k="start|end|sum|cf|tongbi|sumonly" data-v=" | | | | | | " class="chart-opt"><b>{{_('reset')}}</b></a>
</td></tr>
</tbody></table>
</ul>
</div>
<span class="panel-title graph-title">[[ vm.chart.title ]]</span>
</div>
<div class="panel-body" style="position: relative;">
<div my-flot config="vm.config" newdata="vm.newdata" type="b">
<div class="row">
<div class="col-lg-12">
<div class="chart-container-big">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="legend panel-body graph-legend"></div>
</div>
<div class="col-lg-5" style="color:#ACABAB;font-family:sans-serif;">
<div class="filter">
<div class="form-inline">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="all" id="" ng-model="vm.all" ng-change="vm.checkAll()"/>{{_('select all')}}
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="reverse" id="" ng-model="vm.reverse" ng-change="vm.checkReverse()" />{{_('reverse select')}}反选
</label>
</div>
<a class="form-control input-sm btn btn-default check" ng-click="vm.checkSearch()"><small>{{_('refresh')}}</small></a>
</div>
<div class="form-group search-area">
<input class="form-control input-sm" ng-model="vm.query" id="searchinput" style="width:250px;"
ng-enter="vm.checkFilter(); vm.checkSearch();"
type="search" placeholder="{{_('type to fiter, enter to refresh...')}}">
</div>
</div>
<ul multi-check-group class="list-unstyled" style="font-family: 'verdana', 'Microsoft YaHei', 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono';">
<li ng-repeat="s in vm.data | filter: { label:vm.query }">
<input id="" type="checkbox" style="margin-right:5px;" multi-check ng-model="s.check" value="[[ s.label ]]">[[ s.label ]]
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}