ops / monitor-ui · Commits

Go to a project

Authored by FengRuwei
Commit 94da205ff351b0b51fa446cb574e4c6fbade4fe3 2 parents 02236a43 1e1a3e89

Merge branch 'master' into zelei_dev 

# Conflicts:
#	monitor-ui-web/src/main/webapp/index.jsp
#	monitor-ui-web/src/main/webapp/jsp/table.jsp
Inline Side-by-side
Showing 8 changed files with 381 additions and 110 deletions
eclipse.preferences.version=1
encoding//src/main/java=UTF-8
encoding/<project>=UTF-8
... ...
... ... @@ -29,12 +29,12 @@ public class HostInfoCtrl {
@RequestMapping("/getHostInfos")
@ResponseBody
public BaseResponse getHostInfos(HostInfoReq req) throws Exception {
req.setAlias("a");
BaseResponse response=httpRestClient.defaultPost("/hostInfo/getHostInfos", req, BaseResponse.class);
System.out.println("*****************************"+ JSON.toJSON(response));
return response;
}
}
... ...
... ... @@ -22,8 +22,19 @@
<link rel="stylesheet" href="<%=basePath %>css/uniform.css" />
<link rel="stylesheet" href="<%=basePath %>css/select2.css" />
<script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>/js/bootstrap.min.js"></script>
<script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8" type="text/javascript"></script>
<script>
var contextPath='<%=basePath %>';
</script>
<title>Insert title here</title>
</head>
... ... @@ -37,9 +48,12 @@
<!-- 左侧菜单项 -->
<div id="sidebar">
<ul>
<li class="active"><a href="#"><i class="icon icon-home"></i> <span>Dashboard</span></a></li>
<li><a href="#" onclick="clickMenuToPage('/jsp/table.jsp')" ><i class="icon icon-th"></i> <span>Tables</span></a></li>
<li><a href="#" onclick="clickMenuToPage('/jsp/host/hostInfoList.jsp')" ><i class="icon icon-th"></i> <span>主机信息</span></a></li>
<li class=""><a href="#"><i class="icon icon-home"></i> <span>Dashboard</span></a></li>
<li class="" id="jsptablejsp" onclick="clickMenuToPage('/jsp/table.jsp')"><a href="#" ><i class="icon icon-th"></i> <span>Tables</span></a></li>
<li class="" id="jsphosthostGroupListjsp" onclick="clickMenuToPage('jsp/host/hostGroupList.jsp')" ><a href="#" ><i class="icon icon-th"></i> <span>主机组</span></a></li>
<li class="" id="jsphosthostInfoListjsp" onclick="clickMenuToPage('jsp/host/hostInfoList.jsp')" ><a href="#" ><i class="icon icon-th"></i> <span>主机信息</span></a></li>
</ul>
</div>
<!-- 右侧具体内容 -->
... ... @@ -49,8 +63,10 @@
<script type="text/javascript">
function clickMenuToPage(page){
var g = page.replace(/\//g,"").replace(".","");
$("#"+g).addClass("active").siblings().removeClass("active");
//加载左侧内容
$("#content").load("<%=basePath %>"+page);
$("#content").load(contextPath+page);
}
</script>
</body>
... ...
... ... @@ -45,10 +45,6 @@ var opMap = {
"contain" : "包含",
"not_contain" : "不包含"
};
//webcontext
var contextPath = "/crm";
//全局的panel的样式
var panelStyle = "panel-primary";
... ...
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Home</a> <a href="#" class="current">Tables</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>Dynamic table</h5>
</div>
<div class="widget-content nopadding">
<div class="widget-title" style="height: 53px;">
<div>
<div class="form-inline" role="form" id="inBoxQueryDiv"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div class="input-group" style="float: left;">
<span class="input-group-addon">IP：</span>
<input type="text" id="" class="form-control" placeholder=""/>
</div>
<div class="input-group" style="float: left;">
<span class="input-group-addon">IP：</span>
<input type="text" id="" class="form-control" placeholder=""/>
</div>
<button id="submit" class="btn btn-default">搜索</button>
</div>
<button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 900px;">新增</button>
</div>
</div>
<div id="table">
</div>
</div>
</div>
</div>
<script>
$(function () {
var data = [];
for (var i = 0; i < 20; i++) {
data.push({
userId: i,
userName: "用户" + i,
status: i % 3 == 0 ? 0 : 1
});
}
$("#table").table({
striped: true,
panelClass: "panel-success",
pagination: true,
columns: [{
title: "用户id",
field: "userId"
}, {
title: "用户名称",
field: "userName"
}, {
title: "状态",
field: "status"
}],
data: data
});
});
</script>
\ No newline at end of file
<form method="post" id="smsTemplateForm" name="smsTemplateForm">
<div>
<br/>
<label> <span style="color:red">*</span>模板标题：</label>
<input type="text" class="form-control" id="smsTemplateTitle" name="smsTemplateTitle" placeholder="最多30个汉字" maxlength="30" size="40"/>
</div>
<div>
<br/>
<label><span style="color:red">*</span>模板内容：</label>
<textarea class="form-control" rows="12" cols="100" id="smsTemplateContent" name="smsTemplateContent" placeholder="请输入模板内容" maxlength="990" ></textarea>
</div>
<div id="countDiv">
<label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
</div>
<br/>
<div class="form-group">
<input type="button" class="btn btn-primary" style="margin-left:100px" id="saveSmsTemplateBtn" value="保存" />
</div>
</form>
<script>
var TextCount = (function () {
var _bind = function (that) {
that.input.on('keyup', function () {
that.render();
});
}
var _getNum = function (that) {
return that.input.val().length;
}
var TextCountFun = function (config) {
this.id = config.id;
}
TextCountFun.prototype.init = function () {
this.input = $(this.id);
this.render();
_bind(this);
};
TextCountFun.prototype.render = function () {
var num = _getNum(this);
if ($('#_test_count').length == 0) {
$('#countDiv').append('<span id="_test_count"></span>');
};
if (num < 71) {
$('#_test_count').html(num + '/990');
} else if (num <= 990) {
var message = "共" + num + "字符，含短信签名，将被做" + Math.ceil(num / 70) + "条短信计价。每条短信最多70个字符";
$('#_test_count').html(num + '/990' + '&nbsp;&nbsp;<span style="color: red">' + message + '</span>');
} else {
$('#_test_count').html('990/990');
}
};
return TextCountFun;
})();
$(function () {
$("#smsTemplateForm #smsTemplateTitle").validate({
required: true,
validateOnBlur : false
});
$("form #smsTemplateContent").validate({
required: true,
validateOnBlur : false
});
//保存
$("#saveSmsTemplateBtn").click(function(){
var smsTemplateId = $("#smsTemplateId").val();
var btn = $(this);
btn.prop("disabled", true);
$("#smsTemplateForm").form("submit", {
submitUrl : contextPath + "/SmsTemplateController/saveSmsTemplate.do",
submitData : {
smsTemplateId : paramObj.smsTemplateId
},
onBeforeSubmit : function() {
if (!$("#smsTemplateForm").form("validate")) {
btn.removeAttr("disabled");
return false;
}
},
success : function(data) {
btn.removeAttr("disabled");
if (!data || data.code != 200) {
$.messageAlert("错误", data.message);
return;
}else{
$("#body").load(contextPath + "/html/chatChannel/smsTemplate/smsTemplateList.html")
}
}
});
});
//加载form
$("#smsTemplateForm").form({
loadUrl : contextPath + "/SmsTemplateController/getTemplateById.do",
loadParams : {
smsTemplateId : paramObj.smsTemplateId
},
loadFilter : function(data) {
return defaultLoadFilter(data);
},
onBeforeLoad : function(loadParams) {
if (loadParams.smsTemplateId == 0) {
return false;
}
},
onLoadSuccess : function(data) {
new TextCount({id: '#smsTemplateContent'}).init();
}
});
new TextCount({id: '#smsTemplateContent'}).init();
});
</script>
\ No newline at end of file
... ...
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Home</a> <a href="#" class="current">Tables</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>Dynamic table</h5>
</div>
<div class="widget-content nopadding">
<div class="widget-title" style="height: 53px;">
<div>
<div class="form-inline" role="form" id="inBoxQueryDiv"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div class="input-group" style="float: left;">
<span class="input-group-addon">IP：</span>
<input type="text" id="" class="form-control" placeholder=""/>
</div>
<div class="input-group" style="float: left;">
<span class="input-group-addon">IP：</span>
<input type="text" id="" class="form-control" placeholder=""/>
</div>
<button id="submit" class="btn btn-default">搜索</button>
</div>
<button id="addHostInfoBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 900px;">新增</button>
</div>
</div>
<div id="hostInfoTable">
</div>
</div>
</div>
</div>
<script>
$(function () {
//加载表格
$("#hostInfoTable").table({
columnAutoWidth : false,
url : contextPath+"/hostInfo/getHostInfos",
striped : true,
title : "主机信息列表",
dataType : "json",
pagination : true,
pageSize : 10,
loadFilter : function(data) {
return defaultLoadFilter(data);
},
columns : [{
title : "ID",
field : "id",
width : "5%"
}, {
title : "主机别名",
field : "alias",
width : "8%"
}, {
title : "IP",
field : "ip",
width : "10%"
}, {
title : "主机组名称",
field : "groupName",
width : "5%"
}, {
title : "机器类型",
field : "cloudType",
formatter : function(value, rowData, rowIndex) {
if(value == 1){
return 'AWS';
} else if(value == 2){
return '腾讯云';
}else{
return '其他';
}
},
width : "12%"
}, {
title : "操作",
field : "op",
width : "15%"
}]
});
$("#addHostInfoBtn").click(function() {
editHostInfo(0);
});
});
//打开新增或修改页面
function editHostInfo(hoseInfoId) {
alert(1);
paramObj.hoseInfoId = hoseInfoId;
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
size : "modal-lg",
title : (hoseInfoId == 0 ? "新增" : "修改") + "主机信息",
backdrop : "static",
href : contextPath +"jsp/host/editHostInfo.jsp",
buttons : [{
text : "关闭",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
}
}, {
text : "提交",
className : "btn-success",
onclick : function() {
var btn = $(this);
this.prop("disabled", "disabled");
$("#smsTmplateEditForm").form("submit", {
submitUrl : contextPath + "/hostInfo/saveHostInfo.do",
submitData : {
smTemplateId : hoseInfoId
},
onBeforeSubmit : function() {
if (!$(this).form("validate")) {
btn.removeAttr("disabled");
return false;
}
},
success : function(data) {
if (!data || data.code != 200) {
btn.removeAttr("disabled");
$("#smsTmplateEditForm #messageAlert").alerts({
content : data.message,
type : "danger"
});
return;
}
$("#smsListTable").table("load");
$(dialog).dialog("hide");
}
});
}
}]
});
}
</script>
\ No newline at end of file
... ...
... ... @@ -18,10 +18,21 @@
<h5>Dynamic table</h5>
</div>
<!-- 树 -->
<div ></div>
<div id="continer" style="margin-top: 45px; float: left;margin-top: 120px;"></div>
<div style="margin-top: 45px; float: left;margin-top: 54px;border: dashed;width: 300px;color: #D3D3D3;height: 580px;">
<div class="widget-title">
<h5>Tree Title</h5>
</div>
<ul class="ui-widget ui-helper-clearfix" id="icons" style="float: left;margin-left: 165px;">
<li title=".ui-icon-plusthick" class="ui-state-default ui-corner-all" onclick="deletebtn()"><span class="ui-icon ui-icon-plusthick"></span></li>
</ul>
<ul class="ui-widget ui-helper-clearfix" id="icons" style="margin-right: 12px;">
<li title=".ui-icon-minusthick" class="ui-state-default ui-corner-all" onclick="editbtn()"><span class="ui-icon ui-icon-minusthick"></span></li>
</ul>
<div id="continer" ></div>
</div>
<!-- 列表 -->
<div class="widget-content nopadding" style="margin-left: 250px;">
<div class="widget-content nopadding" style="margin-left: 300px;">
<div class="widget-title" style="height: 53px;">
<div>
<div class="form-inline" role="form" id="inBoxQueryDiv" style=" margin-top: 12px;margin-left: 25px;float: left;">
... ... @@ -47,9 +58,10 @@
var data = [];
for (var i = 0; i < 20; i++) {
data.push({
userId: i,
userName: "用户" + i,
status: i % 3 == 0 ? 0 : 1
moName: i,
moHostIp: "用户" + i,
moType: i % 3 == 0 ? 0 : 1,
moStatus: "normal"
});
}
$("#table").table({
... ... @@ -57,16 +69,19 @@
panelClass: "panel-success",
pagination: true,
columns: [{
title: "用户id",
field: "userId"
title: "监控网元",
field: "moName"
}, {
title: "用户名称",
field: "userName"
title: "主机地址",
field: "moHostIp"
}, {
title: "状态",
field: "status"
title: "网元类型",
field: "moType"
},{
title: "网元状态",
field: "moStatus"
}, {
title: "状态",
title: "操作",
formatter : function(value, rowData, rowIndex) {
var div = $("<div>");
var editBtn = $("<button>").addClass("btn btn-inverse btn-mini").html("修改").appendTo(div);
... ... @@ -86,15 +101,35 @@
});
});
//模拟数据
var jsonData = [
{"id":"1","name":"父节点1","url":"www.baidu.com","pid":"0"},
{"id":"4","name":"父节点11","url":"","pid":"1"},
{"id":"14","name":"父节点112","url":"","pid":"4"},
{"id":"5","name":"父节点12","url":"","pid":"1"},
{"id":"6","name":"父节点13","url":"","pid":"1"},
{"id":"2","name":"父节点4","url":"","pid":"0"},
{"id":"7","name":"父节点41","url":"","pid":"2"},
{"id":"8","name":"父节点42","url":"","pid":"2"},
{"id":"9","name":"父节点43","url":"","pid":"2"},
{"id":"3","name":"父节点5","url":"","pid":"0"},
{"id":"10","name":"父节点51","url":"","pid":"3"},
{"id":"13","name":"父节点111","url":"","pid":"4"},
{"id":"11","name":"父节点52","url":"","pid":"3"},
{"id":"12","name":"父节点53","url":"","pid":"3"}
] ;
//主方法，运用递归实现
function createTree(jsons,pid){
if(jsons != null){
var ul = '<ul class="" style="width: 250px;" >' ;
var ul = '<ul class="" style="width: 120px;" >' ;
for(var i=0;i<jsons.length;i++){
if(jsons[i].typeParentId == pid){
ul += '<input type="checkbox" name="checkBox" value='+jsons[i].typeId+' style="float: left;margin-top: 6px;width:10px;height:10px;"><li class="tree" value='+jsons[i].typeParentId+'>' + jsons[i].typeName + "</li>" ;
ul += createTree(jsons,jsons[i].typeId);
if(jsons[i].pid == pid){
ul += '<input type="checkbox" name="checkBox" value='+jsons[i].id+' style="float: left;margin-top: 6px;width:10px;height:10px;"><li class="tree" value='+jsons[i].id+'><a href="#">' + jsons[i].name + "</a></li>" ;
ul += createTree(jsons,jsons[i].id);
}
}
ul += "</ul>" ;
... ... @@ -103,23 +138,27 @@
}
$(function(){
$.get("type/all", function (data,state) {
console.log(state)
var jsonData=JSON.parse(data);
var ul = createTree(jsonData,0) ;
$("#continer").append(ul) ;
//控制菜单的隐藏显示
$("ul[class] li").each(function(){
$(this).click(function(){
$(this).next().toggle();
}) ;
var ul = createTree(jsonData,0) ;
$("#continer").append(ul) ;
//控制菜单的隐藏显示
$("ul[class] li").each(function(){
$(this).click(function(){
$(this).next().toggle();
}) ;
});
}) ;
}) ;
var dom = document.getElementById("icons");
var str = dom.getAttribute("style");
str = str.replace(/height\b\s*\:\s*\d+\px;?/ig, "");
dom.setAttribute("style",str);
function deletebtn(){
alert(1);
}
function editbtn(){
alert(2);
}
</script>
 
\ No newline at end of file
... ...