mirror of https://github.com/midoks/mdserver-web
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
554 lines
12 KiB
554 lines
12 KiB
<style>
|
|
/*任务管理器*/
|
|
.man-menu-sub {
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #ccc;
|
|
height: 50px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.t-mana .table > tbody > tr.active td {
|
|
background-color: #E4EEE0;
|
|
}
|
|
|
|
.search-bar {
|
|
}
|
|
|
|
.search-bar .search_input {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
border-radius: 2px;
|
|
border: 1px solid #ccc;
|
|
outline: none;
|
|
padding-left: 8px;
|
|
vertical-align: top;
|
|
width: 230px;
|
|
}
|
|
|
|
.search-bar .search_input:focus {
|
|
border-color: #20a53a;
|
|
|
|
span.glyphicon-search {
|
|
color: #20a53a;
|
|
}
|
|
}
|
|
|
|
.search-bar .glyphicon {
|
|
position: relative;
|
|
top: 1px;
|
|
display: inline-block;
|
|
font-family: 'Glyphicons Halflings';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.search-bar .glyphicon-search {
|
|
height: 28px;
|
|
line-height: 28px;
|
|
padding: 0 10px;
|
|
color: #888;
|
|
position: absolute;
|
|
right: 14px;
|
|
top: 11px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
.r56 {
|
|
right: 56px !important;
|
|
}
|
|
|
|
.man-menu-sub {
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #ccc;
|
|
height: 50px;
|
|
}
|
|
|
|
.man-menu-sub span {
|
|
padding: 14px 15px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.man-menu-sub .on {
|
|
border-bottom: 2px solid #20a53a;
|
|
color: #20a53a;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.soft-ico-min {
|
|
display: inline-block;
|
|
width: 16px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.soft-ico-min img {
|
|
width: 16px;
|
|
}
|
|
|
|
.table-cont {
|
|
height: 500px;
|
|
overflow: auto;
|
|
border: #ddd 1px solid;
|
|
position: relative;
|
|
}
|
|
|
|
.ts-line {
|
|
position: absolute;
|
|
top: 99px;
|
|
height: 1px;
|
|
background-color: #ddd;
|
|
left: 16px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.t-mana .bt-ico-ask {
|
|
height: 14px;
|
|
width: 14px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.mini-info {
|
|
width: 100%;
|
|
border-top: #DBDBEA 1px solid;
|
|
background-color: #f6f6f6;
|
|
padding: 15px;
|
|
}
|
|
|
|
.mini-info-box {
|
|
width: 500px;
|
|
margin: 0 auto;
|
|
background-color: #fff;
|
|
border: #DBDBEA 1px solid;
|
|
border-radius: 6px;
|
|
height: 66px;
|
|
box-shadow: 0 0 40px #eee;
|
|
}
|
|
|
|
.mini-info-con {
|
|
float: left;
|
|
height: 100%;
|
|
width: 33%;
|
|
line-height: 26px;
|
|
padding: 6px 16px;
|
|
}
|
|
|
|
.mini-info-con:nth-of-type(2) {
|
|
border-left: #DBDBEA 1px solid;
|
|
border-right: #DBDBEA 1px solid;
|
|
width: 34%;
|
|
}
|
|
|
|
.mini-info-con p {
|
|
text-align: right;
|
|
position: relative;
|
|
}
|
|
|
|
.mini-info-con .tname {
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
.mini-level {
|
|
border: #ddd 1px solid;
|
|
width: 166px;
|
|
background-color: #fff;
|
|
border-radius: 6px;
|
|
margin: 0 auto;
|
|
height: 66px;
|
|
line-height: 66px;
|
|
text-align: center;
|
|
}
|
|
|
|
.jc-detail .tname {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.jc-detail h3.tname {
|
|
margin-bottom: 10px;
|
|
margin-top: 15px;
|
|
color: #999;
|
|
}
|
|
|
|
.jc-detail .jc-info {
|
|
margin: 10px 0;
|
|
border-bottom: #ddd 1px solid;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
#TaskManagement .td-pid {
|
|
/* display: flex; */
|
|
/* border-top: #ddd 2px solid; */
|
|
/* height: 38px; */
|
|
/* height: 100%; */
|
|
/* margin-top: 1px; */
|
|
}
|
|
|
|
.td-pid img {
|
|
/* margin-right: 8px; */
|
|
/* display: inline-block; */
|
|
float: left;
|
|
cursor: pointer;
|
|
/* position: relative;
|
|
left: -80px;
|
|
filter: drop-shadow(#fff 80px 0); */
|
|
/* position: relative;
|
|
left: -80px;
|
|
filter: drop-shadow(#238B37 0 80px); */
|
|
}
|
|
|
|
.td-pid svg {
|
|
float: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.td-pid .colp {
|
|
transform: rotate(-90deg);
|
|
-moz-transform: rotate(-90deg);
|
|
-webkit-transform: rotate(-90deg);
|
|
}
|
|
|
|
.td-pid .arrow:hover {
|
|
filter: drop-shadow(#999999 0 0)
|
|
}
|
|
|
|
.td-pid .process-child {
|
|
margin-left: 50px;
|
|
/* display: none; */
|
|
}
|
|
|
|
.td-pid span {
|
|
display: inline-block;
|
|
float: right;
|
|
}
|
|
|
|
.td-pid a {
|
|
display: block;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
#TaskManagement th: {
|
|
height: 34px;
|
|
}
|
|
|
|
#TaskManagement tr: {
|
|
height: 38px;
|
|
}
|
|
|
|
#TaskManagement tr:hover {
|
|
/* background-color: rgb(245, 247, 250,0.6); */
|
|
background-color: rgb(246, 246, 246, 0.65);
|
|
}
|
|
|
|
#TaskManagement .process-select {
|
|
/* background-color: rgb(242, 242, 242); */
|
|
/* background-color: rgb(245, 247, 250,0.6); */
|
|
background-color: rgb(246, 246, 246, 0.6);
|
|
/* background-color: rgb(246, 246, 246,0.65); */
|
|
}
|
|
|
|
#taskResourceTable .process-select {
|
|
/* background-color: rgb(242, 242, 242); */
|
|
background-color: #F1F9F3;
|
|
}
|
|
|
|
#TaskManagement .process-select:hover {
|
|
/* background-color: rgb(211, 210, 210); */
|
|
/* background-color: rgb(245, 247, 250); */
|
|
background-color: rgb(246, 246, 246);
|
|
/* border: 1px solid #ddd;
|
|
box-sizing: border-box; */
|
|
}
|
|
|
|
#taskResourceTable .process-select:hover {
|
|
/* background-color: rgb(211, 210, 210); */
|
|
background-color: #BCE4C4;
|
|
}
|
|
|
|
.resource-panel {
|
|
display: none;
|
|
width: 100%;
|
|
height: 700px;
|
|
/* height: 300px; */
|
|
}
|
|
|
|
.resource-tab {
|
|
float: left;
|
|
width: 100px;
|
|
height: 300px;
|
|
background-color: thistle;
|
|
}
|
|
|
|
.resource-right {
|
|
margin-left: 100px;
|
|
/* width: 100%; */
|
|
/* background-color: gray; */
|
|
/* height: 600px; */
|
|
}
|
|
|
|
.resource-panel-show {
|
|
display: block;
|
|
}
|
|
|
|
.divtable-hide {
|
|
display: none;
|
|
/* visibility: hidden; */
|
|
}
|
|
|
|
.resource-tab span {
|
|
display: block;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.resource-tab span:hover {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.plug_menu {
|
|
display: none;
|
|
}
|
|
.plug_menu .setting_ul::after{
|
|
display: none;
|
|
}
|
|
.plug_menu .setting_ul.undisplay::after {
|
|
content: '';
|
|
position: absolute;
|
|
color: #fff;
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 14px;
|
|
top: -7px;
|
|
right: 8px;
|
|
display: inline-block;
|
|
background: #fff;
|
|
transform: rotate(-45deg);
|
|
border-top: 1px solid rgba(0, 0, 0, 0.25);
|
|
border-right: 1px solid rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.set_list_fid_dropdown {
|
|
display: inline-block;
|
|
line-height: 30px;
|
|
margin-left: 10px;
|
|
position: relative;
|
|
vertical-align: bottom;
|
|
}
|
|
.set_list_fid_dropdown .setting_btn {
|
|
border: 1px solid #ccc;
|
|
height: 30px;
|
|
width: 30px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
.set_list_fid_dropdown .setting_btn:hover{
|
|
background: #e9f6eb;
|
|
border-color: #bce4c4;
|
|
}
|
|
.set_list_fid_dropdown .icon-setting {
|
|
color: rgb(102, 102, 102);
|
|
}
|
|
.set_list_fid_dropdown .setting_btn:hover .icon-setting {
|
|
color: #20a53a;
|
|
}
|
|
.set_list_fid_dropdown .setting_ul {
|
|
position: absolute;
|
|
z-index: 99;
|
|
background: #fff;
|
|
width: 150px;
|
|
right: 0;
|
|
border-radius: 4px;
|
|
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
|
|
padding: 10px 0;
|
|
margin-top: 10px;
|
|
display: none;
|
|
}
|
|
.set_list_fid_dropdown .setting_ul::after {
|
|
content: '';
|
|
position: absolute;
|
|
color: #fff;
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 14px;
|
|
top: -7px;
|
|
right: 8px;
|
|
display: inline-block;
|
|
background: #fff;
|
|
transform: rotate(-45deg);
|
|
border-top: 1px solid rgba(0, 0, 0, 0.25);
|
|
border-right: 1px solid rgba(0, 0, 0, 0.25);
|
|
}
|
|
.setting_ul .setting_ul_li{
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 27px;
|
|
padding: 0 16px;
|
|
cursor: pointer;
|
|
}
|
|
.setting_ul .setting_ul_li:hover{
|
|
background: #e9f6eb;
|
|
}
|
|
.setting_ul .setting_ul_li.disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.setting_ul .setting_ul_li i {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 1px solid #ccc;
|
|
background-color: #fff;
|
|
vertical-align: top;
|
|
position: relative;
|
|
border-radius: 2px;
|
|
}
|
|
.setting_ul .setting_ul_li.active i {
|
|
background-color: #20a53a;
|
|
border-color: #20a53a;
|
|
}
|
|
.setting_ul .setting_ul_li.disabled i {
|
|
background-color: #edf2fc;
|
|
border-color: #dcdfe6;
|
|
}
|
|
.setting_ul .setting_ul_li.active.disabled i {
|
|
background-color: #f2f6fc;
|
|
border-color: #dcdfe6;
|
|
}
|
|
.setting_ul .setting_ul_li.active.disabled i::after{
|
|
border: solid #dcdfe6;
|
|
border-width: 0 2px 2px 0;
|
|
}
|
|
.setting_ul .setting_ul_li.active i::after{
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -2px;
|
|
margin-top: -6px;
|
|
width: 5px;
|
|
height: 10px;
|
|
border: solid #fff;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
</style>
|
|
|
|
<div class="t-mana TaskManView">
|
|
<div class="man-menu-sub mlr15">
|
|
<div>
|
|
<span class="p_list on">进程</span>
|
|
<!-- <span class="p_resource">资源</span> -->
|
|
<span class="p_run">启动项</span>
|
|
<span class="p_service">服务</span>
|
|
<span class="p_network">网络</span>
|
|
<span class="p_user">用户</span>
|
|
<span class="p_cron">计划任务</span>
|
|
<span class="p_session">会话</span>
|
|
</div>
|
|
<div style="display: flex;flex-direction: row;align-items: center;justify-content: flex-end;">
|
|
<div class="search-bar ">
|
|
<input type="text" class="search_input " style="" placeholder="支持名称、字段模糊搜索">
|
|
<span class="glyphicon glyphicon-search r56" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="table_config set_list_fid_dropdown" title="设置表头">
|
|
<div class="setting_btn"><i class="glyphicon glyphicon-cog icon-setting"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ts-line"></div>
|
|
|
|
<div class="divtable taskdivtable pd15">
|
|
<div id="table-cont" class="table-cont">
|
|
<table id="TaskManagement" class="table table-hover" width="100%" style="border:none"></table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="resource-panel pd15">
|
|
<div class="resource-tab">
|
|
<span>CPU</span>
|
|
<span>内存</span>
|
|
<span>磁盘</span>
|
|
</div>
|
|
|
|
<div class="resource-right">
|
|
<div class="resource-top"></div>
|
|
<div class="resource-middle divtable">
|
|
<div id="table-cont" class="table-cont" style="height:100px;">
|
|
<table id="taskResourceTable" class="table table-hover" width="100%" style="border:none">
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="resource-bottom"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mini-info" id="load_average"></div>
|
|
<div class="plug_menu set_list_fid_dropdown">
|
|
<ul class="setting_ul" style="display: none;">
|
|
<li class="setting_ul_li ps active disabled" name="ps">
|
|
<i></i><span class="ml10">应用名称</span>
|
|
</li>
|
|
<li class="setting_ul_li pid active disabled" name="pid">
|
|
<i></i> <span class="ml10">PID</span>
|
|
</li>
|
|
<li class="setting_ul_li threads active" name="threads">
|
|
<i></i> <span class="ml10">线程</span>
|
|
</li>
|
|
<li class="setting_ul_li user active" name="user">
|
|
<i></i> <span class="ml10">用户</span>
|
|
</li>
|
|
<li class="setting_ul_li cpu_percent active disabled" name="cpu_percent">
|
|
<i></i> <span class="ml10">CPU</span>
|
|
</li>
|
|
<li class="setting_ul_li memory_used active disabled" name="memory_used">
|
|
<i></i> <span class="ml10">内存</span>
|
|
</li>
|
|
<li class="setting_ul_li io_read_bytes active" name="io_read_bytes">
|
|
<i></i> <span class="ml10">io读</span>
|
|
</li>
|
|
<li class="setting_ul_li io_write_bytes active" name="io_write_bytes">
|
|
<i></i> <span class="ml10">io写</span>
|
|
</li>
|
|
<li class="setting_ul_li up active" name="up">
|
|
<i></i> <span class="ml10">上行</span>
|
|
</li>
|
|
<li class="setting_ul_li down active" name="down">
|
|
<i></i> <span class="ml10">下行</span>
|
|
</li>
|
|
<li class="setting_ul_li connects active" name="connects">
|
|
<i></i> <span class="ml10">连接</span>
|
|
</li>
|
|
<li class="setting_ul_li status active" name="status">
|
|
<i></i> <span class="ml10">状态</span>
|
|
</li>
|
|
<li class="setting_ul_li active disabled" name="">
|
|
<i></i> <span class="ml10">操作</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
$('.layui-layer-page').css({'width': '1000px'});
|
|
$.getScript( "/plugins/file?name=task_manager&f=js/task_manager.js", function(){
|
|
console.log("load js ok!");
|
|
});
|
|
</script>
|
|
|
|
|