276 lines
14 KiB
HTML
276 lines
14 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
.chart-box{
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.rank{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 16.5%;
|
|
color: #999;
|
|
line-height: 30px;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.chart-li{
|
|
width: 105px;
|
|
height: 105px;
|
|
position: relative;
|
|
}
|
|
.chart-li canvas{
|
|
cursor: pointer;
|
|
}
|
|
.mem_mask{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(220,220,220,.1);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
.mem_mask .men_inside_mask{
|
|
position: absolute;
|
|
left: 7px;
|
|
top: 7px;
|
|
bottom: 7px;
|
|
right: 7px;
|
|
background: rgba(255,255,255,0.8);
|
|
border-radius: 50%;
|
|
}
|
|
.info-status{
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
.outerCircle{
|
|
width: 105px;
|
|
height: 105px;
|
|
text-align: center;
|
|
background-color: #e5e5e5;
|
|
border-radius: 50%;
|
|
padding: 7px;
|
|
}
|
|
.outerCircle .innerCircle{
|
|
width: 100%;
|
|
height: 100%;
|
|
line-height: 91px;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
font-size: 17px;
|
|
background-color: #fff;
|
|
}
|
|
</style>
|
|
<div class="main-content">
|
|
<div class="container-fluid" style="padding-bottom: 66px;padding-left: 15px;">
|
|
<div class="index-pos-box bgw mtb15">
|
|
<div class="position f12 c6 pull-left flex" style="background:none;padding-left:15px">
|
|
<span class="bind-user c4" style="background-position-y: center;">
|
|
<a href="javascript:bt.pub.bind_btname();" class="btlink">{{data['lan']['ACCOUNT']}}</a>
|
|
</span>
|
|
<span class="flex" style="align-items: center;margin-right:16px;"><i class="icon-demand"></i><a class="btlink" onClick="javascript:bt.openFeedback({title:'YakPanel demand feedback collection',placeholder:'<span>If you encounter any problems or imperfect functions during use, please describe <br> your problems or needs to us in detail, we will try our best to solve or improve for <br> you</span>',recover:'We pay special attention to your requirements feedback, and we conduct regular weekly requirements reviews. I hope I can help you better',key:993,proType:2});" style="margin-left: 5px;">Feedback</a></span>
|
|
{% if data['pd'].find("{{data['lan']['ACCOUNT']}}") != -1 %}
|
|
<span class="bt-dashi" style="background-position-y: center;">
|
|
<a class="btlink" href="https://www.yakpanel.com" target="_blank" style="margin-left:5px">{{data['lan']['INVITATION_REWARD']}}</a>
|
|
</span>
|
|
{% endif %}
|
|
<!--<span class="bind-weixin c4"><a href="javascript:bt.weixin.open_wxapp();" class="btlink">{{data['lan']['WECHAT']}}</a></span>-->
|
|
<span class="ico-system" style="background-position-y: center;">{{data['lan']['S1']}}</span><span id="info" style="margin-left:10px;"> {{data['lan']['S2']}}</span>　　{{data['lan']['S3']}} <span id="running">{{data['lan']['S4']}}</span>
|
|
</div>
|
|
<span class="pull-right f12 c6" style="line-height:52px; margin-right:15px">
|
|
{{ data['pd'] | safe }}
|
|
<span id="btversion" style="margin-right:10px">
|
|
<a onclick="index.open_log()" style="cursor: pointer;">{{session['version']}}</a>
|
|
</span>
|
|
<span id="toUpdate"><a class="btlink" href="javascript:index.check_update();">{{data['lan']['UPDATE']}}</a></span>
|
|
<span style="margin:0 10px"><a class="btlink" href="javascript:index.re_panel();">{{data['lan']['FIX']}}</a></span>
|
|
<span style="margin-right:10px"><a class="btlink" href="javascript:index.re_server();">{{data['lan']['RESTART']}}</a></span>
|
|
</span>
|
|
</div>
|
|
<div class="col-xs-24 col-sm-24 col-md-24" id="home-recommend"></div>
|
|
<div class="danger-tips">
|
|
<div class="important-title" id="messageError" style="display: none; margin-top:15px"></div>
|
|
</div>
|
|
<div class="conter-box server bgw mtb15">
|
|
<div class="title c6 f16 plr15">
|
|
<h3 class="c6 f16 pull-left">{{data['lan']['STATUS']}}</h3>
|
|
</div>
|
|
<div class="server-circle">
|
|
<!-- <ul class="row" id="systemInfoList">
|
|
<li class="col-xs-6 col-sm-3 col-md-3 col-lg-2 mtb20 circle-box text-center loadbox">
|
|
<h3 class="c9 f15">{{data['lan']['LOAD_STATUS']}}<a href="https://www.yakpanel.com/forum/d/1265-what-does-the-data-in-load-status-represent" target="_blank" class="bt-ico-ask" style="cursor: pointer;">?</a></h3>
|
|
<div class="cicle">
|
|
<div class="bar bar-left">
|
|
<div class="bar-left-an bar-an"></div>
|
|
</div>
|
|
<div class="bar bar-right">
|
|
<div class="bar-right-an bar-an"></div>
|
|
</div>
|
|
<div class="occupy"><span>0</span>%</div>
|
|
</div>
|
|
<h4 class="c9 f15">{{data['lan']['S2']}}</h4>
|
|
</li>
|
|
<li class="col-xs-6 col-sm-3 col-md-3 col-lg-2 mtb20 circle-box text-center cpubox">
|
|
<h3 class="c9 f15">{{data['lan']['P1']}}</h3>
|
|
<div class="cicle">
|
|
<div class="bar bar-left">
|
|
<div class="bar-left-an bar-an"></div>
|
|
</div>
|
|
<div class="bar bar-right">
|
|
<div class="bar-right-an bar-an"></div>
|
|
</div>
|
|
<div class="occupy"><span>0</span>%</div>
|
|
</div>
|
|
<h4 class="c9 f15">{{data['lan']['S2']}}</h4>
|
|
</li>
|
|
<li class="col-xs-6 col-sm-3 col-md-3 col-lg-2 mtb20 circle-box text-center membox">
|
|
<h3 class="c9 f15">{{data['lan']['P2']}}</h3>
|
|
<div class="cicle mem-release">
|
|
<div class="bar bar-left">
|
|
<div class="bar-left-an bar-an"></div>
|
|
</div>
|
|
<div class="bar bar-right">
|
|
<div class="bar-right-an bar-an"></div>
|
|
</div>
|
|
<div class="occupy"><span>0</span>%</div>
|
|
<div class="mem-re-min"></div>
|
|
<div class="mem-re-con" title="$data['lan']['P3']"></div>
|
|
</div>
|
|
<h4 class="c9 f15">{{data['lan']['S2']}}</h4>
|
|
</li>
|
|
</ul> -->
|
|
<ul class="row" id="systemInfoList">
|
|
<li class="rank col-xs-6 col-sm-3 col-md-3 col-lg-2 mtb20 circle-box text-center">
|
|
<div class="titles">
|
|
<span>{{data['lan']['LOAD_STATUS']}}</span>
|
|
<a href="https://www.yakpanel.com/forum/d/1265-what-does-the-data-in-load-status-represent" target="_blank" class="bt-ico-ask" style="cursor: pointer;">?</a>
|
|
</div>
|
|
<div id="loadChart" class="chart-li">
|
|
<div class="outerCircle"><div class="innerCircle">0%</div></div>
|
|
</div>
|
|
<div id="load" class="info-status">{{data['lan']['S2']}}</div>
|
|
</li>
|
|
<li class="rank col-xs-6 col-sm-3 col-md-3 col-lg-2 mtb20 circle-box text-center">
|
|
<div class="titles">{{data['lan']['P1']}}</div>
|
|
<div id="cpuChart" class="chart-li">
|
|
<div class="outerCircle"><div class="innerCircle">0%</div></div>
|
|
</div>
|
|
<div id="cpu" class="info-status">{{data['lan']['S2']}}</div>
|
|
</li>
|
|
<li class="rank col-xs-6 col-sm-3 col-md-3 col-lg-2 mtb20 circle-box text-center">
|
|
<div class="titles">{{data['lan']['P2']}}</div>
|
|
<div id="memChart" class="chart-li">
|
|
<div class="outerCircle"><div class="innerCircle">0%</div></div>
|
|
</div>
|
|
<div id="mem" class="info-status">{{data['lan']['S2']}}</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="system-info bgw clearfix mtb15">
|
|
<div class="title c6 f16 plr15">
|
|
{{data['lan']['Overview']}}
|
|
</div>
|
|
<div class="system-info-con mtb20">
|
|
<ul class="clearfix text-center">
|
|
<li class="sys-li-box ccol-xs-4 col-sm-4 col-md-4 col-lg-3">
|
|
<p class="name f15 c9">{{data['lan']['N1']}}</p>
|
|
<div class="val"><a class="btlink" href="/site">{{data['siteCount']}}</a></div>
|
|
</li>
|
|
<li class="sys-li-box ccol-xs-4 col-sm-4 col-md-4 col-lg-3">
|
|
<p class="name f15 c9">{{data['lan']['N3']}}</p>
|
|
<div class="val"><a class="btlink" href="/ftp">{{data['ftpCount']}}</a></div>
|
|
</li>
|
|
<li class="sys-li-box ccol-xs-4 col-sm-4 col-md-4 col-lg-3">
|
|
<p class="name f15 c9">{{data['lan']['N2']}}</p>
|
|
<div class="val"><a class="btlink" href="/database">{{data['databaseCount']}}</a></div>
|
|
</li>
|
|
<li class="sys-li-box ccol-xs-4 col-sm-4 col-md-4 col-lg-3">
|
|
<p class="name f15 c9">{{data['lan']['N4']}}</p>
|
|
<div class="val"><a class="btlink warning_num" href="javascript:;" onclick="index.reader_warning_view()">0</a></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-6 pull-left pd0">
|
|
<div class="pr8">
|
|
<div class="bgw">
|
|
<div class="title c6 f16 plr15">{{data['lan']['P4']}}</div>
|
|
<div class="setting-con" style="padding:0; height:442px; margin-right: -4px; overflow: hidden;">
|
|
<div class="container-fluid soft-man">
|
|
<input name="list1SortOrder" type="hidden" value="" />
|
|
<div id="indexsoft" class="row"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-6 pull-left pd0">
|
|
<div class="pl7">
|
|
<div class="bgw" style="height:283.5px">
|
|
<div class="title c6 f16 plr15 tabs-nav">
|
|
<span class="active">{{data['lan']['FLOW']}}</span>
|
|
<span>Disk IO</span>
|
|
<div class="tabs-down">
|
|
<select class="bt-input-text" name="network-io" style="font-size: 12px;"></select>
|
|
<select class="bt-input-text hide" name="disk-io" style="font-size: 12px;"></select>
|
|
</div>
|
|
</div>
|
|
<div class="tabs-content">
|
|
<div class="tabs-active tabs-item">
|
|
<div class="bw-info">
|
|
<div class="col-sm-6 col-md-3"><p class="c9"><span class="ico-up"></span>{{data['lan']['UPLOAD']}}</p><a id="upSpeed">{{data['lan']['S2']}}</a></div>
|
|
<div class="col-sm-6 col-md-3"><p class="c9"><span class="ico-down"></span>{{data['lan']['DOWNLOAD']}}</p><a id="downSpeed">{{data['lan']['S2']}}</a></div>
|
|
<div class="col-sm-6 col-md-3"><p class="c9">{{data['lan']['TOTAL_TX']}}</p><a id="upAll">{{data['lan']['S2']}}</a></div>
|
|
<div class="col-sm-6 col-md-3"><p class="c9">{{data['lan']['TOTAL_RX']}}</p><a id="downAll">{{data['lan']['S2']}}</a></div>
|
|
</div>
|
|
<div id="NetImg" style="width:100%;height: 370px;"></div>
|
|
</div>
|
|
<div class="tabs-item">
|
|
<div class="bw-info">
|
|
<div class="col-sm-6 col-md-3"><p class="c9"><span class="ico-read"></span>Read</p><a id="readBytes">{{data['lan']['S2']}}</a></div>
|
|
<div class="col-sm-6 col-md-3"><p class="c9"><span class="ico-write"></span>Write</p><a id="writeBytes">{{data['lan']['S2']}}</a></div>
|
|
<div class="col-sm-6 col-md-3"><p class="c9">TPS</p><a id="diskIops">{{data['lan']['S2']}}</a></div>
|
|
<div class="col-sm-6 col-md-3"><p class="c9">IO Wait</p><a id="diskTime">{{data['lan']['S2']}}</a></div>
|
|
</div>
|
|
<div id="IoStat" style="width:100%;height: 370px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<script type="text/javascript" src="/static/js/jquery.dragsort-0.5.2.min.js"></script>
|
|
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
|
|
<script type="text/javascript" src="/static/js/index.js?f2={{g['version']}}"></script>
|
|
<script type="text/javascript" src="/static/js/soft.js?version_20191219={{g['version']}}"></script>
|
|
<script type="text/javascript" src="/static/ace/ace.js?date={{g.version}}"></script>
|
|
<script type="text/javascript">
|
|
$(".btpro span").click(function(){
|
|
layer.confirm(lan.index.change_free, { icon: 3, btn: [lan.index.ubind], closeBtn: 2, title: lan.index.confirm_cancel }, function () {
|
|
$.post('/ssl?action=DelToken', {}, function (rdata) {
|
|
layer.msg(rdata.msg);
|
|
setTimeout(function () {
|
|
window.location.reload();
|
|
},2000);
|
|
});
|
|
});
|
|
});
|
|
bt.set_cookie('serverType', "{{session['webserver']}}");
|
|
</script>
|
|
|
|
{% endblock %} |