ops / monitor-ui · Commits

Go to a project

Authored by fanzelei
Commit 144da866787680fd16887075bef1a1861a77ea07 1 parent be3eeb22

zk监控

Inline Side-by-side
Showing 3 changed files with 432 additions and 3 deletions
  1 +/*!
  2 + * Datetimepicker for Bootstrap 3
  3 +//! version : 4.0.0-beta
  4 + * https://github.com/Eonasdan/bootstrap-datetimepicker/
  5 + */
  6 +.bootstrap-datetimepicker-widget.dropdown-menu {
  7 + margin: 2px 0;
  8 + padding: 4px;
  9 + width: 19em;
  10 +}
  11 +@media (min-width: 768px) {
  12 + .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
  13 + width: 38em;
  14 + }
  15 +}
  16 +@media (min-width: 992px) {
  17 + .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
  18 + width: 38em;
  19 + }
  20 +}
  21 +@media (min-width: 1200px) {
  22 + .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
  23 + width: 38em;
  24 + }
  25 +}
  26 +.bootstrap-datetimepicker-widget.dropdown-menu:before,
  27 +.bootstrap-datetimepicker-widget.dropdown-menu:after {
  28 + content: '';
  29 + display: inline-block;
  30 + position: absolute;
  31 +}
  32 +.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
  33 + border-left: 7px solid transparent;
  34 + border-right: 7px solid transparent;
  35 + border-bottom: 7px solid #ccc;
  36 + border-bottom-color: rgba(0, 0, 0, 0.2);
  37 + top: -7px;
  38 + left: 7px;
  39 +}
  40 +.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
  41 + border-left: 6px solid transparent;
  42 + border-right: 6px solid transparent;
  43 + border-bottom: 6px solid white;
  44 + top: -6px;
  45 + left: 8px;
  46 +}
  47 +.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
  48 + border-left: 7px solid transparent;
  49 + border-right: 7px solid transparent;
  50 + border-top: 7px solid #ccc;
  51 + border-top-color: rgba(0, 0, 0, 0.2);
  52 + bottom: -7px;
  53 + left: 6px;
  54 +}
  55 +.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
  56 + border-left: 6px solid transparent;
  57 + border-right: 6px solid transparent;
  58 + border-top: 6px solid white;
  59 + bottom: -6px;
  60 + left: 7px;
  61 +}
  62 +.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
  63 + left: auto;
  64 + right: 6px;
  65 +}
  66 +.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
  67 + left: auto;
  68 + right: 7px;
  69 +}
  70 +.bootstrap-datetimepicker-widget .list-unstyled {
  71 + margin: 0;
  72 +}
  73 +.bootstrap-datetimepicker-widget a[data-action] {
  74 + padding: 6px 0;
  75 +}
  76 +.bootstrap-datetimepicker-widget a[data-action]:active {
  77 + box-shadow: none;
  78 +}
  79 +.bootstrap-datetimepicker-widget .timepicker-hour,
  80 +.bootstrap-datetimepicker-widget .timepicker-minute,
  81 +.bootstrap-datetimepicker-widget .timepicker-second {
  82 + width: 54px;
  83 + font-weight: bold;
  84 + font-size: 1.2em;
  85 + margin: 0;
  86 +}
  87 +.bootstrap-datetimepicker-widget button[data-action] {
  88 + padding: 6px;
  89 +}
  90 +.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
  91 + position: absolute;
  92 + width: 1px;
  93 + height: 1px;
  94 + margin: -1px;
  95 + padding: 0;
  96 + overflow: hidden;
  97 + clip: rect(0, 0, 0, 0);
  98 + border: 0;
  99 + content: "Increment Hours";
  100 +}
  101 +.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
  102 + position: absolute;
  103 + width: 1px;
  104 + height: 1px;
  105 + margin: -1px;
  106 + padding: 0;
  107 + overflow: hidden;
  108 + clip: rect(0, 0, 0, 0);
  109 + border: 0;
  110 + content: "Increment Minutes";
  111 +}
  112 +.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
  113 + position: absolute;
  114 + width: 1px;
  115 + height: 1px;
  116 + margin: -1px;
  117 + padding: 0;
  118 + overflow: hidden;
  119 + clip: rect(0, 0, 0, 0);
  120 + border: 0;
  121 + content: "Decrement Hours";
  122 +}
  123 +.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
  124 + position: absolute;
  125 + width: 1px;
  126 + height: 1px;
  127 + margin: -1px;
  128 + padding: 0;
  129 + overflow: hidden;
  130 + clip: rect(0, 0, 0, 0);
  131 + border: 0;
  132 + content: "Decrement Minutes";
  133 +}
  134 +.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
  135 + position: absolute;
  136 + width: 1px;
  137 + height: 1px;
  138 + margin: -1px;
  139 + padding: 0;
  140 + overflow: hidden;
  141 + clip: rect(0, 0, 0, 0);
  142 + border: 0;
  143 + content: "Show Hours";
  144 +}
  145 +.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
  146 + position: absolute;
  147 + width: 1px;
  148 + height: 1px;
  149 + margin: -1px;
  150 + padding: 0;
  151 + overflow: hidden;
  152 + clip: rect(0, 0, 0, 0);
  153 + border: 0;
  154 + content: "Show Minutes";
  155 +}
  156 +.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
  157 + position: absolute;
  158 + width: 1px;
  159 + height: 1px;
  160 + margin: -1px;
  161 + padding: 0;
  162 + overflow: hidden;
  163 + clip: rect(0, 0, 0, 0);
  164 + border: 0;
  165 + content: "Toggle AM/PM";
  166 +}
  167 +.bootstrap-datetimepicker-widget .picker-switch {
  168 + text-align: center;
  169 +}
  170 +.bootstrap-datetimepicker-widget .picker-switch::after {
  171 + position: absolute;
  172 + width: 1px;
  173 + height: 1px;
  174 + margin: -1px;
  175 + padding: 0;
  176 + overflow: hidden;
  177 + clip: rect(0, 0, 0, 0);
  178 + border: 0;
  179 + content: "Toggle Date and Time Screens";
  180 +}
  181 +.bootstrap-datetimepicker-widget .picker-switch td {
  182 + padding: 0;
  183 + margin: 0;
  184 + height: auto;
  185 + width: auto;
  186 + line-height: inherit;
  187 +}
  188 +.bootstrap-datetimepicker-widget .picker-switch td span {
  189 + line-height: 2.5;
  190 + height: 2.5em;
  191 + width: 100%;
  192 +}
  193 +.bootstrap-datetimepicker-widget table {
  194 + width: 100%;
  195 + margin: 0;
  196 +}
  197 +.bootstrap-datetimepicker-widget td,
  198 +.bootstrap-datetimepicker-widget th {
  199 + text-align: center;
  200 + border-radius: 4px;
  201 +}
  202 +.bootstrap-datetimepicker-widget th {
  203 + height: 20px;
  204 + line-height: 20px;
  205 + width: 20px;
  206 +}
  207 +.bootstrap-datetimepicker-widget th.picker-switch {
  208 + width: 145px;
  209 +}
  210 +.bootstrap-datetimepicker-widget th.disabled,
  211 +.bootstrap-datetimepicker-widget th.disabled:hover {
  212 + background: none;
  213 + color: #777777;
  214 + cursor: not-allowed;
  215 +}
  216 +.bootstrap-datetimepicker-widget th.prev::after {
  217 + position: absolute;
  218 + width: 1px;
  219 + height: 1px;
  220 + margin: -1px;
  221 + padding: 0;
  222 + overflow: hidden;
  223 + clip: rect(0, 0, 0, 0);
  224 + border: 0;
  225 + content: "Previous Month";
  226 +}
  227 +.bootstrap-datetimepicker-widget th.next::after {
  228 + position: absolute;
  229 + width: 1px;
  230 + height: 1px;
  231 + margin: -1px;
  232 + padding: 0;
  233 + overflow: hidden;
  234 + clip: rect(0, 0, 0, 0);
  235 + border: 0;
  236 + content: "Next Month";
  237 +}
  238 +.bootstrap-datetimepicker-widget thead tr:first-child th {
  239 + cursor: pointer;
  240 +}
  241 +.bootstrap-datetimepicker-widget thead tr:first-child th:hover {
  242 + background: #eeeeee;
  243 +}
  244 +.bootstrap-datetimepicker-widget td {
  245 + height: 54px;
  246 + line-height: 54px;
  247 + width: 54px;
  248 +}
  249 +.bootstrap-datetimepicker-widget td.cw {
  250 + font-size: .8em;
  251 + height: 20px;
  252 + line-height: 20px;
  253 + color: #777777;
  254 +}
  255 +.bootstrap-datetimepicker-widget td.day {
  256 + height: 20px;
  257 + line-height: 20px;
  258 + width: 20px;
  259 +}
  260 +.bootstrap-datetimepicker-widget td.day:hover,
  261 +.bootstrap-datetimepicker-widget td.hour:hover,
  262 +.bootstrap-datetimepicker-widget td.minute:hover,
  263 +.bootstrap-datetimepicker-widget td.second:hover {
  264 + background: #eeeeee;
  265 + cursor: pointer;
  266 +}
  267 +.bootstrap-datetimepicker-widget td.old,
  268 +.bootstrap-datetimepicker-widget td.new {
  269 + color: #777777;
  270 +}
  271 +.bootstrap-datetimepicker-widget td.today {
  272 + position: relative;
  273 +}
  274 +.bootstrap-datetimepicker-widget td.today:before {
  275 + content: '';
  276 + display: inline-block;
  277 + border-left: 7px solid transparent;
  278 + border-bottom: 7px solid #428bca;
  279 + border-top-color: rgba(0, 0, 0, 0.2);
  280 + position: absolute;
  281 + bottom: 4px;
  282 + right: 4px;
  283 +}
  284 +.bootstrap-datetimepicker-widget td.active,
  285 +.bootstrap-datetimepicker-widget td.active:hover {
  286 + background-color: #428bca;
  287 + color: #ffffff;
  288 + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  289 +}
  290 +.bootstrap-datetimepicker-widget td.active.today:before {
  291 + border-bottom-color: #fff;
  292 +}
  293 +.bootstrap-datetimepicker-widget td.disabled,
  294 +.bootstrap-datetimepicker-widget td.disabled:hover {
  295 + background: none;
  296 + color: #777777;
  297 + cursor: not-allowed;
  298 +}
  299 +.bootstrap-datetimepicker-widget td span {
  300 + display: inline-block;
  301 + width: 54px;
  302 + height: 54px;
  303 + line-height: 54px;
  304 + margin: 2px 1.5px;
  305 + cursor: pointer;
  306 + border-radius: 4px;
  307 +}
  308 +.bootstrap-datetimepicker-widget td span:hover {
  309 + background: #eeeeee;
  310 +}
  311 +.bootstrap-datetimepicker-widget td span.active {
  312 + background-color: #428bca;
  313 + color: #ffffff;
  314 + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  315 +}
  316 +.bootstrap-datetimepicker-widget td span.old {
  317 + color: #777777;
  318 +}
  319 +.bootstrap-datetimepicker-widget td span.disabled,
  320 +.bootstrap-datetimepicker-widget td span.disabled:hover {
  321 + background: none;
  322 + color: #777777;
  323 + cursor: not-allowed;
  324 +}
  325 +.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
  326 + height: 27px;
  327 + line-height: 27px;
  328 +}
  329 +.input-group.date .input-group-addon {
  330 + cursor: pointer;
  331 +}
  332 +.sr-only {
  333 + position: absolute;
  334 + width: 1px;
  335 + height: 1px;
  336 + margin: -1px;
  337 + padding: 0;
  338 + overflow: hidden;
  339 + clip: rect(0, 0, 0, 0);
  340 + border: 0;
  341 +}
@@ -24,8 +24,8 @@ @@ -24,8 +24,8 @@
24 <link rel="stylesheet" href="<%=basePath %>css/uniform.css"/> 24 <link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
25 <link rel="stylesheet" href="<%=basePath %>css/select2.css"/> 25 <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
26 <link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/> 26 <link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
27 -  
28 - <link rel="stylesheet" href="<%=basePath %>css/yoho.css"/> 27 + <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
  28 + <link rel="stylesheet" href="<%=basePath %>css/bootstrap-datetimepicker.css"/>
29 <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script> 29 <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
30 <script src="<%=basePath %>/js/bootstrap.min.js"></script> 30 <script src="<%=basePath %>/js/bootstrap.min.js"></script>
31 <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script> 31 <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
@@ -47,6 +47,9 @@ @@ -47,6 +47,9 @@
47 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script> 47 <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
48 <script src="<%=basePath %>js/jstree/jstree.min.js"></script> 48 <script src="<%=basePath %>js/jstree/jstree.min.js"></script>
49 <script src="<%=basePath %>js/jquery.toaster.js"></script> 49 <script src="<%=basePath %>js/jquery.toaster.js"></script>
  50 + <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8" type="text/javascript"></script>
  51 + <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8" type="text/javascript"></script>
  52 +
50 <script> 53 <script>
51 var contextPath = '<%=basePath %>'; 54 var contextPath = '<%=basePath %>';
52 </script> 55 </script>
@@ -73,6 +76,8 @@ @@ -73,6 +76,8 @@
73 </li> 76 </li>
74 <li class="" id="javaApiList"><a href="?page_type=javaApiList"><i class="icon icon-th"></i><span>JAVA服务信息</span></a> 77 <li class="" id="javaApiList"><a href="?page_type=javaApiList"><i class="icon icon-th"></i><span>JAVA服务信息</span></a>
75 </li> 78 </li>
  79 + <li class="" id="zkInfo"><a href="?page_type=zkInfo"><i class="icon icon-th"></i><span>ZK监控</span></a>
  80 + </li>
76 </ul> 81 </ul>
77 </div> 82 </div>
78 <!-- 右侧具体内容 --> 83 <!-- 右侧具体内容 -->
@@ -85,7 +90,8 @@ @@ -85,7 +90,8 @@
85 "mobjectInfo": 'jsp/mobject/mobjectInfo.jsp', 90 "mobjectInfo": 'jsp/mobject/mobjectInfo.jsp',
86 "hostGroupList": 'jsp/host/hostGroupList.jsp', 91 "hostGroupList": 'jsp/host/hostGroupList.jsp',
87 "hostInfoList": 'jsp/host/hostInfoList.jsp', 92 "hostInfoList": 'jsp/host/hostInfoList.jsp',
88 - "javaApiList": 'jsp/javaapi/javaApiList.jsp' 93 + "javaApiList": 'jsp/javaapi/javaApiList.jsp',
  94 + "zkInfo": '/jsp/zkInfo/zkInfoList.jsp'
89 } 95 }
90 var page_type = "<%=page_type %>"; 96 var page_type = "<%=page_type %>";
91 $(function () { 97 $(function () {
  1 +<%@ page language="java" contentType="text/html; charset=UTF-8"
  2 + pageEncoding="UTF-8"%>
  3 +<%
  4 + String path = request.getContextPath();
  5 + String basePath = request.getScheme() + "://"
  6 + + request.getServerName() + ":" + request.getServerPort()
  7 + + path + "/";
  8 +%>
  9 +<div id="breadcrumb">
  10 + <a href="#" title="Go to Home" class="tip-bottom"><i
  11 + class="icon-home"></i> Home</a> <a href="#" class="current">ZK监控</a>
  12 +</div>
  13 +
  14 +<div class="container-fluid">
  15 + <div class="widget-box">
  16 + <div class="widget-title">
  17 + <h5>ZK监控</h5>
  18 + </div>
  19 + <div class="widget-content nopadding">
  20 + <div class="widget-title" style="height: 53px;">
  21 + <div>
  22 + <div class="form-inline" role="form" id="zkQueryDiv"
  23 + style=" margin-top: 12px;margin-left: 25px;float: left;">
  24 + <div class="input-group" style="float: left;">
  25 + <span class="input-group-addon">ip：</span>
  26 + <input type="text" id="" name="" class="form-control" placeholder=""/>
  27 + </div>
  28 + <div class="input-group" style="float: left;">
  29 + <span class="input-group-addon">时间：</span>
  30 + <input type="text" id="time" name="time" class="form-control" placeholder=""/>
  31 + </div>
  32 + <button id="" class="btn btn-default">搜索</button>
  33 + </div>
  34 + <button id="addInfoBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 100px;">
  35 + 新增
  36 + </button>
  37 + <button id="modeoBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 100px;">
  38 + 编辑
  39 + </button>
  40 + </div>
  41 + </div>
  42 + <div id="zkInfoTable">
  43 +
  44 + </div>
  45 + </div>
  46 + </div>
  47 +</div>
  48 +
  49 +<script>
  50 + $(function(){
  51 + $("#zkInfoTable").table({
  52 + columnAutoWidth: false,
  53 + url: "",
  54 + striped: true,
  55 + title: "ZK监控列表",
  56 + dataType: "json",
  57 + pagination: true,
  58 + pageSize: 10,
  59 + loadFilter: function (data) {
  60 + return defaultLoadFilter(data);
  61 + },
  62 + columns: [{
  63 + title: "ID",
  64 + field: ""
  65 + },{
  66 + title: "ID",
  67 + field: ""
  68 + },{
  69 + title: "ID",
  70 + field: ""
  71 + },{
  72 + title: "ID",
  73 + field: ""
  74 + }]
  75 + });
  76 + });
  77 +
  78 + //设置默认时间
  79 + $("#zkQueryDiv #time").datetimepicker({
  80 + format : 'YYYY-MM-DD HH:mm:ss'
  81 + });
  82 +</script>