<!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/main1.css">
|
<link rel="stylesheet" href="./css/main/jquery-ui.min.css">
|
<link rel="stylesheet" href="./js/ant-design-vue/antd.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="./js/resourceAnalyse.js"></script>
|
<script src="../lanwebapp/js/paramconfig.js"></script>
|
<link rel="stylesheet" href="./css/bootstrap/bootstrap.css">
|
<link rel="stylesheet" href="./js/ant-design-vue/antd.css">
|
<script>
|
$.ajaxSetup({
|
dataType: "json",
|
cache: false,
|
headers: {
|
// TODO
|
},
|
xhrFields: {
|
withCredentials: false
|
},
|
crossDomain: true
|
});
|
|
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 resourceChart = null; //用户调用折线图
|
|
$(document).ready(function () {
|
auditstatuschart = echarts.init(document.getElementById("auditstatus"));
|
resUsagechart = echarts.init(document.getElementById("resinvokechart"));
|
useractionchart = echarts.init(document.getElementById("useractionchart"));
|
resourceChart = echarts.init(document.getElementById("resourceChart"));
|
servicestatus();
|
resUsageAction();
|
userAction();
|
resource();
|
//在线人员和异常资源 更多列表
|
$('.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 cpuEchart() {
|
var myChart = echarts.init(document.getElementById("Sys_cpu_chart"));
|
myChart.setOption({
|
|
tooltip: {
|
trigger: 'axis'
|
},
|
|
toolbox: {
|
show: true,
|
|
},
|
calculable: true,
|
xAxis: [{
|
type: 'category',
|
boundaryGap: false,
|
splitLine: {
|
show: false
|
},
|
axisLine: {
|
show: false
|
},
|
data: ['', '', '', '', '', '', '']
|
|
}],
|
yAxis: [{
|
type: 'value',
|
axisLine: {
|
show: false
|
},
|
show: false
|
}],
|
series: [{
|
name: '用量',
|
type: 'line',
|
smooth: true,
|
itemStyle: {
|
normal: {
|
areaStyle: {
|
type: 'default'
|
}
|
}
|
},
|
data: cpulist
|
},
|
|
|
]
|
})
|
}
|
|
/**
|
* 服务状态
|
*/
|
function servicestatus() {
|
$.get(LanCatalogBaseApiURL + 'monitor/jitmonitor/getGisResNumByResStatus', function (data) {
|
var map = 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);
|
});
|
}
|
|
/**
|
* 正常资源
|
* @param domid
|
* @param data
|
*/
|
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) {
|
|
var map = data;
|
|
|
useractionchart.setOption(option = {
|
title: {
|
show: false,
|
text: '用户操作行为统计图',
|
left: '3%',
|
textStyle: {
|
color: '#73879a',
|
fontSize: 25
|
},
|
},
|
|
tooltip: {
|
trigger: 'axis'
|
},
|
grid: {
|
// TODO
|
},
|
xAxis: {
|
axisLabel: {
|
rotate: 50,
|
textStyle: {
|
color: '#73879a',
|
fontSize: 10
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#73879a'
|
}
|
}
|
},
|
data: map.map(function (item) {
|
return item.remark;
|
})
|
},
|
yAxis: {
|
type: 'value',
|
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 resUsageAction(resid) {
|
$.get(LanCatalogBaseApiURL + 'monitor/jitmonitor/queryResourceLog?resourceid=' + (resid != undefined ? resid :
|
""), function (data) {
|
var date_res = [];
|
var data_res = [];
|
var dataList = data.data;
|
for (var i = 0; i < dataList.length; i++) {
|
date_res.push(dataList[i].time)
|
data_res.push(dataList[i].count)
|
}
|
resUsagechart.clear();
|
|
setTimeout(
|
resUsagechart.setOption(option = {
|
|
tooltip: {
|
position: function (pt) {
|
return [pt[0], '10%'];
|
},
|
trigger: 'axis',
|
formatter: function (params) {
|
console.log(params[0].name);
|
|
var data = dataList[params[0].dataIndex];
|
var showcontent = data.time + "<br>" + "资源ID:" + data.userid +
|
" 调用次数: " +
|
data.count + "<br>";
|
|
return showcontent;
|
}
|
},
|
title: {
|
show: false,
|
left: '4%',
|
textStyle: {
|
color: '#73879a',
|
fontSize: 25
|
},
|
text: '资源调用状态',
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: date_res
|
},
|
yAxis: {
|
type: 'value',
|
boundaryGap: [0, '100%']
|
},
|
dataZoom: [{
|
type: 'inside',
|
start: 0,
|
end: 100
|
}, {
|
start: 0,
|
end: 100,
|
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
handleSize: '80%',
|
handleStyle: {
|
color: '#fff',
|
shadowBlur: 3,
|
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
shadowOffsetX: 2,
|
shadowOffsetY: 2
|
}
|
}],
|
series: [{
|
name: '模拟数据',
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
sampling: 'average',
|
itemStyle: {
|
normal: {
|
color: 'rgb(255, 70, 131)'
|
}
|
},
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: 'rgb(255, 158, 68)'
|
}, {
|
offset: 1,
|
color: 'rgb(255, 70, 131)'
|
}])
|
}
|
},
|
data: data_res
|
}]
|
})
|
,500)
|
});
|
|
|
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(LanCatalogBaseApiURL + 'monitor/jitmonitor/warning', function (response) {
|
|
// var data = JSON.parse(response).data;
|
var data = 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();
|
}, 1000)
|
|
|
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;
|
}
|
var cpulist = [];
|
//---------------服务器状态-------------------------------
|
function cpuandmem(data) {
|
var cpu = data.cpuinfo;
|
var mem = data.meminfo;
|
$("#usercpusge").html(cpu.cpuUserUsage);
|
$(".SysText_cpu").html(cpu.cpuUserUsage);
|
if (cpulist.length > 6) {
|
cpulist = cpulist.slice(1)
|
|
|
}
|
|
cpulist.push(parseFloat(cpu.cpuUserUsage))
|
|
cpuEchart();
|
|
|
var html =
|
'<div class="Syslabel">总内存</div><div><exclamationCircleOutlined><exclamationCircleOutlined/></div>';
|
html += '<div class="SysText">' + mem.totalmem + '</div>';
|
html += '<div class="Sys_Info">';
|
html += '<div>已使用 ' + mem.use + '</div>';
|
html += '<div class="sys_sy">使用率 ' + ((parseFloat(mem.use) / parseFloat(mem.totalmem)).toFixed(2))*100 +
|
'%</div>';
|
html += '</div>';
|
$(".SystemNC").html(html);
|
}
|
|
|
|
//----------------------socket通讯------------------------
|
var socket;
|
|
function openSocket() {
|
if (typeof (WebSocket) == "undefined") {
|
console.log("您的浏览器不支持WebSocket");
|
} else {
|
console.log("您的浏览器支持WebSocket");
|
|
console.log(socketUrl);
|
if (socket != null) {
|
socket.close();
|
socket = null;
|
}
|
socket = new WebSocket(socketUrl);
|
//打开事件
|
socket.onopen = function () {
|
console.log("websocket已打开");
|
};
|
//获得消息事件
|
socket.onmessage = function (msg) {
|
var obj = eval('(' + msg.data + ')');
|
if (obj.cpuinfo !== undefined) {
|
cpuandmem(obj);
|
}
|
|
if (obj.onlineUser !== undefined) {
|
acptonlineUser(obj);
|
}
|
|
if (obj.errorsystem !== undefined) {
|
errorsystemdata = obj;
|
$("#errorsystem").text(obj.count);
|
}
|
|
};
|
//关闭事件
|
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,
|
});
|
}
|
</script>
|
</head>
|
<style>
|
html,
|
body {
|
background-color: rgb(240, 242, 245) !important;
|
}
|
|
a {
|
/*color:black;*/
|
color: black !important;
|
font-size: 14px !important;
|
}
|
|
.table thead th {
|
vertical-align: bottom;
|
border-bottom: 1px solid #dee2e6;
|
border-top: 0px;
|
}
|
|
.form-control {
|
display: block;
|
width: 100%;
|
height: 2rem !important;
|
padding: 0 !important;
|
font-size: 14px !important;
|
font-weight: 400;
|
line-height: 1.0 !important;
|
color: #495057;
|
background-color: #fff;
|
background-clip: padding-box;
|
border: 1px solid #6c757d !important;
|
border-radius: 0.25rem;
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
}
|
|
.btn-primary {
|
/* color: #fff;
|
background-color: #007bff;
|
border-color: #007bff;
|
height: 2rem !important;
|
line-height: 2rem !important;
|
font-size: 14px !important; */
|
}
|
|
.btn-primary {
|
color: #fff;
|
background-color: #007bff;
|
border-color: #007bff;
|
padding: 0.265rem 0.55rem;
|
}
|
|
.table-striped tbody tr:nth-of-type(odd) {
|
background-color: transparent !important;
|
}
|
|
.table {
|
/* font-size: 14px !important; */
|
}
|
|
.SystemNC {
|
width: 70%;
|
height: 92%;
|
margin-left: 15%;
|
}
|
|
.Syslabel {
|
width: 20%;
|
height: 22%;
|
font-family: sans-serif;
|
font-size: 13px;
|
color: gray;
|
text-align: left;
|
margin-left: 20px;
|
}
|
|
.SysText {
|
width: 65%;
|
height: 48%;
|
font-family: sans-serif;
|
font-size: 27px;
|
color: #1b1e21;
|
text-align: center;
|
letter-spacing: 2px;
|
}
|
|
.Sys_Info {
|
display: flex;
|
width: 90%;
|
height: 23%;
|
margin-left: 6%;
|
font-family: sans-serif;
|
font-size: 13px;
|
}
|
|
.sys_sy {
|
margin-left: 25px;
|
}
|
|
.System_cpu {
|
width: 70%;
|
height: 92%;
|
margin-left: 15%;
|
}
|
|
.SysText_cpu {
|
width: 65%;
|
height: 34%;
|
font-family: sans-serif;
|
font-size: 27px;
|
color: #1b1e21;
|
text-align: center;
|
letter-spacing: 2px;
|
}
|
|
#errorsystem {
|
width: 100%;
|
height: 74%;
|
font-family: sans-serif;
|
font-size: 31px;
|
color: #1b1e21;
|
text-align: center;
|
letter-spacing: 2px;
|
margin-top: 15px;
|
}
|
|
#warningResNum {
|
width: 100%;
|
height: 74%;
|
font-family: sans-serif;
|
font-size: 31px;
|
color: #1b1e21;
|
text-align: center;
|
letter-spacing: 2px;
|
margin-top: 15px;
|
}
|
|
#Sys_cpu_chart {
|
width: 100%;
|
height: 100%;
|
margin-top: -26px;
|
}
|
</style>
|
|
<body style="background-color: #fff;">
|
<div id="main">
|
<div id="box">
|
|
<div id="left">
|
<!-- 服务器状态-->
|
<div id="severstatus">
|
<div class="severstatus_left panel panel-default">
|
<div class="partbox">
|
<div class="SystemNC">
|
</div>
|
<div class="divider"></div>
|
<div style="color: #6c757d;">系统内存</div>
|
</div>
|
<div class="partbox">
|
<div class="System_cpu">
|
<div class="Syslabel">CPU用量</div>
|
<div class="SysText_cpu"></div>
|
<div id="Sys_cpu_chart"></div>
|
</div>
|
<div class="divider"></div>
|
<div style="color: #6c757d;">cpu系统用量</div>
|
|
</div>
|
<div class="partbox">
|
<div class="System_cpu">
|
<div class="Syslabel">异常个数</div>
|
<div id="errorsystem"></div>
|
</div>
|
<div class="divider"></div>
|
<div style="color: #6c757d;">异常系统个数</div>
|
</div>
|
<div class="partbox">
|
<div class="System_cpu">
|
<div class="Syslabel">服务告警</div>
|
<div id="warningResNum"></div>
|
</div>
|
<div class="divider"></div>
|
<div style="color: #6c757d;">服务资源告警</div>
|
</div>
|
</div>
|
</div>
|
|
<div id="tabpanel">
|
|
<div class="title">
|
|
<div class="tabtitle active" data-item='tab2'>服务资源状态</div>
|
<div class="tabtitle " data-item='tab3'>用户操作行为</div>
|
<div class="tabtitle " data-item='tab1'>资源调用状态</div>
|
<div class="tabtitle " data-item='tab4'>资源调用统计</div>
|
|
</div>
|
|
<div class="divider" style="width: 98%;"></div>
|
<div class="tabcontent" id="tabpanel-tab2">
|
<div class="chart">
|
<div id="resstatus"></div>
|
<div id="auditstatus">
|
</div>
|
</div>
|
</div>
|
<div class="tabcontent" id="tabpanel-tab3" style="display: none;">
|
<div style="margin-left: 20px; margin-top: 13px;">
|
<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; width: 1600px !important; height: 350px;">
|
</div>
|
</div>
|
</div>
|
|
<div class="tabcontent" id="tabpanel-tab4" style="display: none;">
|
<div style="margin-left: 20px; margin-top: 13px;">
|
<input type="text" class="form-control useractionlabeltext" id="resource" name="UserName"
|
onkeyup="findUserByWord()" onclick="findUserByWord()" placeholder="请输入用户名称查询">
|
<a> </a>
|
<button type="button" id="resourceActionButton" class="btn btn-primary">查询</button>
|
</div>
|
<div class="useractionbox ">
|
<div id="resourceChart" class="panel-heading"
|
style="background-color: white; border-color: white; width: 1600px !important; height: 350px;">
|
</div>
|
</div>
|
</div>
|
<div class="tabcontent" id="tabpanel-tab1" style="display: block;">
|
<div style="margin-left: 20px; margin-top: 13px;">
|
<!-- <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="resUsagebox">
|
<div id="resinvokechart"></div>
|
</div>
|
</div>
|
</div>
|
|
<div style="margin-top: 15px;">
|
<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>
|
<td scope="col">用户ID</td>
|
<td scope="col">用户名</td>
|
<td scope="col">上线时间</td>
|
</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>
|
<td scope="col">资源ID</td>
|
<td scope="col">资源名称</td>
|
<td scope="col">资源状态</td>
|
<td scope="col">异常时间</td>
|
</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>
|
</div>
|
</body>
|
|
</html>
|
|
<script>
|
$('.tabtitle').on("click", function () {
|
$('.tabtitle').removeClass('active');
|
$(this).addClass('active');
|
|
var tab = $(this).attr('data-item');
|
$(".tabcontent").hide();
|
$("#tabpanel-" + tab).show();
|
try {
|
resUsagechart.resize()
|
} catch (ex) {}
|
try {
|
auditstatuschart.resize()
|
} catch (ex) {}
|
try {
|
resUsagechart.resize()
|
} catch (ex) {}
|
|
try {
|
useractionchart.resize()
|
} catch (ex) {}
|
try {
|
resourceChart.resize()
|
} catch (ex) {}
|
});
|
</script>
|
