<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>运维监控</title>
|
|
<link rel="stylesheet" href="./css/main/main.css">
|
<link rel="stylesheet" href="./css/main/jquery-ui.min.css">
|
<script src="./js/jquery.js"></script>
|
<script src="./js/bootstrap/bootstrap.js"></script>
|
<script src="./js/sockjs.js"></script>
|
<script src="./js/jquery-ui.min.js"></script>
|
<script src="./js/echarts.js"></script>
|
<script src="./js/echarts.js"></script>
|
<script src="../lanwebapp/js/paramconfig.js"></script>
|
<link rel="stylesheet" href="./css/bootstrap/bootstrap.css">
|
<script>
|
var errorsystemdata = "";//异常系统
|
var onlineUser = null;//在线人员
|
var warningserver = "";//异常服务
|
var cpuchart = null;//cpu图表
|
var memchart = null;//内存图表
|
var resstatuschart = null;//资源状态饼状图
|
var auditstatuschart = null;//资源审核统计图
|
var resUsagechart = null;//资源使用折线图
|
var useractionchart = null;//用户调用折线图
|
|
/* var restServerBaseURL="http://18.1.1.231:8081/";
|
var LanCatalogBaseURL = "http://18.1.1.231:8082/";
|
var socketUrl = "ws://18.1.1.231:8081/ws"; */
|
|
var restServerBaseURL = "http://18.1.1.231:8081/";
|
var LanCatalogBaseURL = "http://18.1.1.231:8082/api/";
|
var socketUrl = "ws://18.1.1.231:8081/ws";
|
|
$(document).ready(function () {
|
// cpuchart = echarts.init(document.getElementById("cpuinfo")); //cpuechart
|
// memchart = echarts.init(document.getElementById("meminfo")); //memchart
|
// resstatuschart = echarts.init(document.getElementById("resstatus"));
|
auditstatuschart = echarts.init(document.getElementById("auditstatus"));
|
resUsagechart = echarts.init(document.getElementById("resinvokechart"));
|
useractionchart = echarts.init(document.getElementById("useractionchart"));
|
|
// cpuchart.setOption(cpupieEchart(), true);
|
// memchart.setOption(mempieEchart(), true);
|
// auditstatuschart.setOption(pieEchart(), true);
|
$("#errorsystem").on("click", function () {
|
// 异常系统个数
|
// debugger
|
var frameSrc = "./errorsystem.html";
|
$("#NoPermissioniframe").attr("src", frameSrc);
|
$('#NoPermissionModal').modal({ show: true, backdrop: 'static' });
|
});
|
|
$("#warningResNum").on("click", function () {
|
// 服务资源告警
|
var frameSrc = "./warningResource.html";
|
$("#serverstatusiframe").attr("src", frameSrc);
|
$('#serverstatusModal').modal({ show: true, backdrop: 'static' });
|
});
|
servicestatus();
|
resUsageAction();
|
userAction();
|
|
//在线人员和异常资源 更多列表
|
$('.personcountmore').on("click", function () {
|
|
window.open("./onlineUser.html?data=" + encodeURI(encodeURI(JSON.stringify(onlineUser))));
|
console.log("在线人员列表");
|
})
|
$('.errorResNummore').on("click", function () {
|
window.open("./warningResource.html");
|
console.log("异常资源列表");
|
})
|
$("#useractionbutton").on("click", function () {
|
|
userAction($("#UserName").val());
|
})
|
$("#resactionbutton").on("click", function () {
|
resUsageAction($("#zyid").val());
|
})
|
});
|
|
function servicestatus() {
|
$.get(LanCatalogBaseURL + 'monitor/jitmonitor/getGisResNumByResStatus', function (data) {
|
var map = JSON.parse(data);
|
var resStatus = [];
|
map.resStatus.forEach(item => {
|
var temp = {};
|
temp.name = item.RESOURCESTATUS == 0 ? "正常资源" : "异常资源";
|
temp.value = item.COUNT;
|
resStatus.push(temp);
|
})
|
ChartsPie('resstatus', resStatus);
|
activeStatusChart('auditstatus', map);
|
});
|
}
|
|
function activeStatusChart(domid, data) {
|
var myChart = echarts.init(document.getElementById(domid));
|
var colors = [' #d3e9af', '#ed9678', "#3DD1F9", "#BBA767", "#982CD5", "#FFD1B0", "#FFAD05", "#531477", "#0066FF",
|
"#FFC200", "#E52F70", "#CA6821", "#FF3A3A", "#1EAD06", "#D04311", "#6D6815", "#49A7FF", "#FFF000", "#1E7532",
|
"#FFA889", "#E986AA"
|
];
|
var total = 0;
|
data.resStatus.forEach(item => {
|
|
total = item.COUNT + total;
|
})
|
|
myChart.setOption({
|
grid: [{
|
width: "800px",
|
height: "800px"
|
}],
|
color: colors,
|
tooltip: {
|
trigger: 'item',
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
},
|
legend: {
|
orient: 'vertical',
|
x: 'left',
|
textStyle: {
|
color: '#73879a'
|
},
|
data: ['活跃资源', '不活跃资源']
|
},
|
|
calculable: true,
|
|
series: [{
|
name: '访问来源',
|
type: 'pie',
|
radius: ['50%', '70%'],
|
center: ['50%', '70%'],
|
bottom: '10%',
|
itemStyle: {
|
normal: {
|
label: {
|
show: false
|
},
|
labelLine: {
|
show: false
|
},
|
},
|
emphasis: {
|
label: {
|
show: true,
|
position: 'center',
|
textStyle: {
|
fontSize: '20',
|
fontWeight: 'bold'
|
}
|
}
|
}
|
},
|
data: [{
|
"name": "活跃资源",
|
"value": data.activeResourceNum
|
|
}, {
|
"name": "不活跃资源",
|
"value": total - data.activeResourceNum
|
|
}]
|
}]
|
})
|
}
|
//服务资源状态
|
function ChartsPie(domid, data1) {
|
var myChart = echarts.init(document.getElementById(domid));
|
var colors = [' #d3e9af', '#ed9678', "#3DD1F9", "#BBA767", "#982CD5", "#FFD1B0", "#FFAD05", "#531477", "#0066FF",
|
"#FFC200", "#E52F70", "#CA6821", "#FF3A3A", "#1EAD06", "#D04311", "#6D6815", "#49A7FF", "#FFF000", "#1E7532",
|
"#FFA889", "#E986AA"
|
];
|
|
myChart.setOption({
|
color: colors,
|
tooltip: {
|
trigger: 'item',
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
},
|
legend: {
|
orient: 'vertical',
|
x: 'left',
|
textStyle: {
|
color: '#73879a'
|
},
|
data: ['正常资源', '异常资源']
|
},
|
|
calculable: true,
|
series: [{
|
name: '访问来源',
|
type: 'pie',
|
radius: ['50%', '70%'],
|
center: ['50%', '70%'],
|
bottom: "10%",
|
itemStyle: {
|
normal: {
|
label: {
|
show: false
|
},
|
labelLine: {
|
show: false
|
}
|
},
|
emphasis: {
|
label: {
|
show: true,
|
position: 'center',
|
textStyle: {
|
fontSize: '20',
|
fontWeight: 'bold'
|
}
|
}
|
}
|
},
|
data: data1
|
}]
|
})
|
}
|
//-----------------------用户操作行为---------------------------
|
function userAction(username) {
|
$.get(restServerBaseURL + 'api/monitor/analysisUser?username=' + (username != undefined ? username : ""), function (data) {
|
// debugger;
|
|
var map = JSON.parse(data);
|
|
useractionchart.setOption(option = {
|
/* color: 'blue', */
|
title: {
|
text: '用户操作行为统计图',
|
left: '3%',
|
textStyle: {
|
color: '#73879a',
|
fontSize: 25
|
},
|
},
|
|
tooltip: {
|
trigger: 'axis'
|
},
|
grid: {
|
left: '10%',
|
right: '5%',
|
bottom: '40%'
|
},
|
xAxis: {
|
|
axisLabel: {
|
rotate: 50,
|
textStyle: {
|
color: '#73879a',
|
fontSize: 14
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#73879a'
|
|
}
|
}
|
},
|
data: map.map(function (item) {
|
return item.REMARK;
|
})
|
},
|
yAxis: {
|
type: 'value',
|
max: 20,
|
axisLabel: {
|
textStyle: {
|
color: '#73879a',
|
fontSize: 14
|
}
|
}
|
},
|
|
series: {
|
name: '查询',
|
type: 'bar',
|
data: map.map(function (item) {
|
return item.COUNT;
|
}),
|
markLine: {
|
silent: true,
|
lineStyle: {
|
color: '#333'
|
}
|
|
}
|
}
|
});
|
});
|
useractionchart.on("click", function (params) {
|
console.log("iframe 用户行为页面");
|
var frameSrc = "./useraction.html?username=" + $("#UserName").val();
|
$("#serverstatusiframe").attr("src", frameSrc);
|
$('#serverstatusModal').modal({ show: true, backdrop: 'static' });
|
})
|
}
|
//-----------------------资源调用行为---------------------------
|
|
// function test(){
|
// data.forEach(){
|
|
// }
|
// echarts.util.each(datas,function(data)
|
// {
|
// var id=data.USERID;
|
// datasetwithFilters.push({
|
// id:id,
|
// fromDataSetId:'datasSet_raw',
|
// transform:{
|
// type:'filter',
|
// config:{
|
// and:[
|
// {}
|
// ]
|
// }
|
// }
|
// })
|
// }
|
// )
|
// }
|
function resUsageAction(resid) {
|
$.get(LanCatalogBaseURL + 'monitor/jitmonitor/queryResourceLog?resourceid=' + (resid != undefined ? resid : ""), function (data) {
|
var map = JSON.parse(data).data;
|
var series = [];
|
var col = {};
|
// map.forEach(item=>{
|
// console.log(item);
|
// var temp=item;
|
// if( typeof(col[item.USERID])=="undefined"){
|
// col[item.USERID]=[];
|
// col[item.USERID].push(temp.COUNT);
|
// }else{
|
// col[item.USERID].push(temp.COUNT);
|
// }
|
|
// console.log(col);
|
// })
|
var counttime = [];
|
var dataBytime = [];
|
|
map.forEach(item => {
|
console.log(item);
|
var temp = item;
|
if (typeof (col[item.TIME]) == "undefined") {
|
col[item.TIME] = [];
|
dataBytime[item.TIME] = [];
|
col[item.TIME].push(temp.COUNT);
|
dataBytime[item.TIME].push(temp);
|
} else {
|
col[item.TIME].push(temp.COUNT);
|
dataBytime[item.TIME].push(temp);
|
}
|
|
console.log(col);
|
})
|
|
function countTotalBytime() {
|
var count = 0;
|
Object.keys(col).forEach(item => {
|
|
console.log(item);
|
count = col[item].reduce((pre, n) => {
|
pre + n
|
});
|
console.log(count);
|
counttime.push(count);
|
})
|
}
|
countTotalBytime();
|
Object.keys(col).forEach(item => {
|
var temp = {
|
name: item,
|
type: 'line',
|
markLine: {
|
silent: true,
|
lineStyle: {
|
color: '#000'
|
},
|
data: [{
|
yAxis: 50
|
}, {
|
yAxis: 100
|
}, {
|
yAxis: 150
|
}, {
|
yAxis: 200
|
}, {
|
yAxis: 300
|
}]
|
},
|
data: col[item]
|
};
|
|
console.log(temp);
|
|
series.push(temp);
|
})
|
|
resUsagechart.setOption(option = {
|
title: {
|
text: '资源调用状态',
|
left: '4%',
|
textStyle: {
|
color: '#73879a',
|
fontSize: 25
|
},
|
},
|
tooltip: {
|
trigger: 'axis',
|
formatter: function (params) {
|
|
console.log(params[0].name);
|
|
// Object.keys(col).forEach(item=>{
|
|
// console.log(item);
|
// count=col[item].reduce((pre,n)=>{pre+n});
|
// console.log(count);
|
// counttime.push(count);
|
var data = dataBytime[params[0].name];
|
var showcontent = params[0].name + "<br>";
|
data.forEach(item => {
|
showcontent += "用户ID:" + item.USERID + " 调用次数: " + item.COUNT + "<br>";
|
})
|
return showcontent;
|
}
|
},
|
grid: {
|
left: '10%',
|
right: '5%',
|
bottom: '10%'
|
},
|
xAxis: {
|
axisLabel: {
|
textStyle: {
|
color: '#73879a',
|
fontSize: 14
|
}
|
},
|
data: map.map(function (item) {
|
return item.TIME;
|
})
|
},
|
yAxis: {
|
type: 'value',
|
max: 5,
|
axisLabel: {
|
textStyle: {
|
color: '#73879a',
|
fontSize: 14
|
}
|
}
|
},
|
dataZoom: [{
|
startValue: '2014-06-01'
|
}, {
|
type: 'inside'
|
}],
|
|
series: {
|
name: '',
|
type: 'line',
|
data: counttime,
|
markLine: {
|
silent: true,
|
lineStyle: {
|
color: '#000'
|
}
|
|
}
|
}
|
});
|
});
|
|
resUsagechart.on("click", function (params) {
|
// debugger
|
console.log("iframe 用户行为页面");
|
var frameSrc = "./ziyuantrace.html?resourceid=" + $("#zyid").val();
|
$("#serverstatusiframe").attr("src", frameSrc);
|
$('#serverstatusModal').modal({ show: true, backdrop: 'static' });
|
})
|
}
|
//-----------------------在线人员-------------------------------
|
function acptonlineUser(data) {
|
onlineUser = data.onlineUser;
|
|
$("#personcount").text(`(${data.count})`);
|
$("#onlineUsertable tbody").empty();
|
onlineUser.forEach((element, index) => {
|
console.log(index);
|
console.log(element);
|
|
$("#onlineUsertable tbody").append("<tr>" +
|
"<td>" + element['USERID'] + "</td>" +
|
"<td>" + element['CHINESENAME'] + "</td>" +
|
"<td>" + element['time'] + "</td>" +
|
"</tr>");
|
});
|
|
}
|
|
function warningRes() {
|
$.get(LanCatalogBaseURL + 'monitor/jitmonitor/warning', function (response) {
|
|
var data = JSON.parse(response).data;
|
warningserver = data;
|
$("#errorResNum").text(`(${data.length})`);
|
$("#warningResNum").html(data.length);
|
$("#errorRestable tbody").empty();
|
data.forEach((element, index) => {
|
console.log(index);
|
console.log(element);
|
|
$("#errorRestable tbody").append("<tr>" +
|
"<td>" + element['RESOURCEID'] + "</td>" +
|
"<td>" + element['TITLE'] + "</td>" +
|
"<td>" + element['SERVERSTATUS'] + "</td>" +
|
"<td>" + element['TIME'] + "</td>" +
|
"</tr>");
|
});
|
});
|
|
}
|
setInterval(() => {
|
warningRes();
|
}, 100000)
|
|
|
//-----------------------服务器状态----------------------------
|
// function pieEchart(data) {
|
|
// var legendvalue = Object.keys(data);
|
// var result = [];
|
// Object.keys(data).forEach(function (key) {
|
// var temp = {};
|
// temp.name = key;
|
// temp.value = data[key];
|
// console.log(temp);
|
// result.push(temp);
|
// })
|
// option = {
|
// tooltip: {
|
// trigger: 'item',
|
// formatter: '{a} <br/>{b}: {c} ({d}%)'
|
// },
|
// legend: {
|
// orient: 'vertical',
|
// left: 10,
|
// data: legendvalue
|
// },
|
// series: [
|
// {
|
// name: '访问来源',
|
// type: 'pie',
|
// radius: ['50%', '70%'],
|
// avoidLabelOverlap: false,
|
// label: {
|
// show: false,
|
// position: 'center'
|
// },
|
// emphasis: {
|
// label: {
|
// show: true,
|
// fontSize: '30',
|
// fontWeight: 'bold'
|
// }
|
// },
|
// labelLine: {
|
// show: false
|
// },
|
// data: result
|
// }
|
// ]
|
// };
|
|
// return option;
|
// }
|
|
function cpupieEchart(data) {
|
|
var cpuinfo = { "cpu用户使用率": "6.53", "cpu当前等待率": "0", "cpu当前使用率": "14.6", "cpu系统使用率": "7.96" };
|
var objs = [];
|
Object.keys(cpuinfo).forEach(item => {
|
var temp = {};
|
temp.name = item;
|
temp.value = cpuinfo[item];
|
objs.push(temp);
|
})
|
option = {
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
},
|
series: [{
|
name: 'cpu状态',
|
type: 'pie',
|
radius: ['50%', '70%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: '30',
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: objs
|
}]
|
};
|
|
return option;
|
}
|
|
|
function mempieEchart(data) {
|
|
var obj = { "剩余内存 ": "953.36MB", "使用": "7GB", "使用率": "88.26%", "总内存": "7.93GB" };
|
var objs = [];
|
Object.keys(obj).forEach(item => {
|
var temp = {};
|
temp.name = item;
|
temp.value = obj[item];
|
objs.push(temp);
|
})
|
option = {
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
},
|
series: [{
|
name: 'cpu状态',
|
type: 'pie',
|
radius: ['50%', '70%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: '30',
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: objs
|
}]
|
};
|
|
return option;
|
}
|
//---------------服务器状态-------------------------------
|
function cpuandmem(data) {
|
var cpu = data.cpuinfo;
|
var mem = data.meminfo;
|
$("#usercpusge").html(cpu.cpuUserUsage);
|
$("#syscpusge").html(cpu.cpuUserUsage);
|
$("#memusge").html(mem.use + "/" + mem.totalmem);
|
}
|
|
|
|
//----------------------socket通讯------------------------
|
var socket;
|
|
function openSocket() {
|
if (typeof (WebSocket) == "undefined") {
|
console.log("您的浏览器不支持WebSocket");
|
} else {
|
console.log("您的浏览器支持WebSocket");
|
//实现化WebSocket对象，指定要连接的服务器地址与端口 建立连接
|
|
// var socketUrl="ws://127.0.0.1:22599/webSocket/"+userId;
|
|
console.log(socketUrl);
|
if (socket != null) {
|
socket.close();
|
socket = null;
|
}
|
socket = new WebSocket(socketUrl);
|
//打开事件
|
socket.onopen = function () {
|
console.log("websocket已打开");
|
//socket.send("这是来自客户端的消息" + location.href + new Date());
|
};
|
//获得消息事件
|
socket.onmessage = function (msg) {
|
// var serverMsg = "收到服务端信息：" + msg.data;
|
// document.getElementById('content').innerText = serverMsg;
|
var obj = eval('(' + msg.data + ')');
|
if (obj.cpuinfo !== undefined) {
|
cpuandmem(obj);
|
// cpuchart.setOption(cpupieEchart(obj.cpuinfo), true);
|
// memchart.setOption(pieEchart(obj.meminfo), true);
|
}
|
|
if (obj.onlineUser !== undefined) {
|
acptonlineUser(obj);
|
}
|
|
if (obj.errorsystem !== undefined) {
|
errorsystemdata = obj;
|
$("#errorsystem").text(obj.count);
|
}
|
|
|
|
// console.log(serverMsg);
|
//发现消息进入 开始处理前端触发逻辑
|
};
|
//关闭事件
|
socket.onclose = function () {
|
console.log("websocket已关闭");
|
};
|
//发生了错误事件
|
socket.onerror = function () {
|
console.log("websocket发生了错误");
|
}
|
}
|
}
|
|
function sendMessage() {
|
|
}
|
|
function theclose() {
|
|
//关闭事件
|
if (socket != null) {
|
socket.close();
|
socket = null;
|
}
|
}
|
|
openSocket();
|
function findUserByWord() {
|
var username = $("#UserName").val();
|
$("#UserName").autocomplete({
|
source: restServerBaseURL + 'org/user/findUserByWord?keyWord=' + encodeURI(encodeURI(username)), //请求的url
|
minLength: 1,
|
});
|
}
|
window.onload = function () {
|
//jquery鍏ㄥ眬閰嶇疆
|
$.ajaxSetup({
|
// beforeSend: function(xhr) {
|
// console.log("beforeSend:token is [%s]",token);
|
// },
|
dataType: "json",
|
cache: false,
|
headers: {
|
// "token": token
|
},
|
xhrFields: {
|
withCredentials: true
|
},
|
crossDomain: true,
|
complete: function (xhr) {
|
// console.log("complete:token is [%s], xhr.responseJSON:",token,xhr.responseJSON);
|
//鏃犳晥鐨則oken锛屽垯璺宠浆鍒扮櫥褰曢〉闈�
|
if (!!xhr.responseJSON && xhr.responseJSON.code == 401) {
|
//localStorage.setItem("token", "");
|
//alert("鏃犳晥鐨則oken,璇峰埛鏂伴〉闈㈡垨閲嶆柊鐧婚檰绯荤粺锛�");
|
//parent.location.href = baseURL + 'admin/login.html';
|
//debugger;
|
//getToken();
|
}
|
//鏃犳晥鐨則oken鐨勫彟涓€绉嶆儏鍐碉細ajax璇锋眰鏈畬鎴愬嵆杩斿洖閿欒
|
// if(!!token && !xhr.responseJSON){
|
// debugger;
|
// getToken();
|
// }
|
}
|
});
|
}
|
function test8082() {
|
$.get("http://71.3.21.232:8082/api/res/ZiYuan/selectResMainInfojoinCatalog?_dc=1629968906238&title=&resourceclass=" +
|
"&resourcestatus=0&catlogid=&catlogcode=&catlogtitle=&createuserid=&faburen=&pubdateBegin=&pubdatefinish=&auditstatus=&sharprotocol=&" +
|
"page=1&start=0&limit=10", (function (res) {
|
debugger
|
})
|
)
|
}
|
function test80821() {
|
$.get('http://71.3.21.232:8082/api/monitor/jitmonitor/getGisResNumByResStatus', function (data) {
|
debugger
|
});
|
|
}
|
</script>
|
</head>
|
<style>
|
a {
|
/*color:black;*/
|
color: inherit;
|
}
|
|
.table thead th {
|
vertical-align: bottom;
|
border-bottom: 1px solid #dee2e6;
|
border-top: 0px;
|
}
|
</style>
|
|
<body style=" background-color: #fff;">
|
<!-- <div id="top">
|
<div id="header_left">
|
<img src="/image/log.jpeg">
|
<span>泰瑞运维监控</span>
|
</div>
|
<div id="header_right">
|
<span class="username">张波</span>
|
<span class="logout">注销</span>
|
</div>
|
</div> -->
|
<div id="main">
|
<div id="box">
|
|
<div id="left">
|
<!-- 服务器状态-->
|
<div id="severstatus">
|
<div class="severstatus_left panel panel-default">
|
<div class="title panel-heading"><span>服务器状态</span></div>
|
<div class="SysinfoBox">
|
<div class="sysinfo">
|
<div class="partbox">内存用量/总内存<br><a id="memusge">-/-</a></div>
|
</div>
|
<div class="sysinfo">
|
<div class="partbox">cpu系统用量<br><a id="syscpusge">-.--%</a></div>
|
</div>
|
<div class="sysinfo">
|
<div class="partbox">异常系统个数<br><a id="errorsystem">--</a></div>
|
</div>
|
<div class="sysinfo">
|
<div class="partbox">服务资源告警<br><a id="warningResNum">--条</a></div>
|
</div>
|
</div>
|
</div>
|
<div class="severstatus_right panel panel-default">
|
<div class="title panel-heading"><span>服务资源状态</span></div>
|
<div class="chart">
|
<div id="resstatus"></div>
|
<div id="auditstatus">
|
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 用户使用行为-->
|
<div id="useraction">
|
<div class="useraction_left panel panel-default" style="height: 396px;">
|
<div style="float:left;margin-top: 13px;
|
margin-bottom: 14px;margin-left: 55px;">
|
<!-- 用户搜索下拉框 -->
|
<label class="control-label useractionlabel">用户名称</label>
|
<input type="text" class="form-control useractionlabeltext" id="UserName" name="UserName"
|
onkeyup="findUserByWord()" onclick="findUserByWord()" placeholder="输入用户名、中文名或拼音首字母查询">
|
<a> </a><button type="button" id="useractionbutton" class="btn btn-primary">查询</button>
|
</div>
|
<div class="useractionbox ">
|
<div id="useractionchart" class="panel-heading" style="background-color:white;border-color: white"></div>
|
</div>
|
</div>
|
<!-- <div class="useraction_right"></div> -->
|
</div>
|
<!-- 服务资源状态-->
|
<!-- <div id="resstatus">
|
<div class="resstatus_left">
|
|
|
</div>
|
<div class="resstatus_right"></div>
|
</div> -->
|
<!-- 资源调用情况-->
|
<div id="resUsage">
|
<div class="resUsage_left panel panel-default">
|
<div style="float:left;margin-top: 13px;
|
margin-bottom: 14px;
|
margin-left: 55px;">
|
<!-- 用户搜索下拉框 -->
|
<label class="control-label useractionlabel">资源ID</label>
|
<input type="text" class="form-control useractionlabeltext" id="zyid" name="zyid" placeholder="输入资源id">
|
<a> </a><button type="button" class="btn btn-primary" id="resactionbutton">查询</button>
|
</div>
|
<!-- <div class="resUsage_left_top">资源ID：<input type="text"/></div> -->
|
<div class="resUsagebox">
|
<div id="resinvokechart"></div>
|
</div>
|
</div>
|
<!-- <div class="resUsage_right"></div> -->
|
</div>
|
|
|
|
</div>
|
<div id="right">
|
<div id="onlineUser" class="panel panel-default">
|
<div class="title panel-heading"><span>在线人员<a id="personcount"></a> <a class="personcountmore"
|
style="float:right">更多</a></span></div>
|
<table id="onlineUsertable" class="table table-striped table-hover">
|
<thead>
|
<tr>
|
<th scope="col">用户ID</th>
|
<th scope="col">用户名</th>
|
<th scope="col">上线时间</th>
|
</tr>
|
</thead>
|
<tbody>
|
|
</tbody>
|
</table>
|
</div>
|
|
<div id="warnResource" class="panel panel-default">
|
<div class="title panel-heading"><span>异常资源<a id="errorResNum"></a><a class="errorResNummore"
|
style="float:right">更多</a></span></div>
|
<table id="errorRestable" class="table table-striped table-hover ">
|
<thead>
|
<tr>
|
<th scope="col">资源ID</th>
|
<th scope="col">资源名称</th>
|
<th scope="col">资源状态</th>
|
<th scope="col">异常时间</th>
|
</tr>
|
</thead>
|
<div class=" pre-scrollable">
|
<tbody class="tbbox">
|
|
</tbody>
|
</div>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- -----------------------iframe模态框------------------------------- -->
|
<div class="modal fade" id="NoPermissionModal">
|
<div class="modal-dialog modal-lg">
|
<div class="modal-content" style="width: 800px;height:400px">
|
<div class="modal-header">
|
<h4 class="modal-title" id="NoPermissionModalLabel">系统消息</h4>
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
|
×
|
</button>
|
|
</div>
|
<div class="modal-body">
|
|
<iframe id="NoPermissioniframe" width="100%" height="50%" frameborder="0"></iframe>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
|
<div class="modal fade" id="serverstatusModal">
|
<div class="modal-dialog modal-lg">
|
<div class="modal-content" style="width: 800px;height:400px">
|
<div class="modal-header">
|
<h4 class="modal-title" id="serverstatusModalLabel">系统消息</h4>
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
|
×
|
</button>
|
|
</div>
|
<div class="modal-body">
|
<iframe id="serverstatusiframe" width="100%" height="100%" frameborder="0"></iframe>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</body>
|
|
</html>
|
