{% extends "layout.html" %} {% block content %}
<div class="main-content">

    <div class="index-pos-box bgw">
        <div class="position f12 c6 pull-left" style="background:none;padding-left:15px">
            <span class="ico-system">系统:</span><span id="info" style="margin-left:10px;">正在获取中...</span>&#12288;&#12288;<span id="running"></span>
        </div>
        <span class="pull-right f12 c6" style="line-height:52px; margin-right:15px">
            <span id="version" style="margin-right:10px">{{config.version}}</span>
            <span id="toUpdate"><a class="btlink" href="javascript:checkUpdate();">更新</a></span> |
            <!-- <span style="margin:0 10px"><a class="btlink" href="javascript:rePanel();">修复</a></span> -->
            <span><a class="btlink" href="javascript:reBoot();">重启</a></span>
        </span>
    </div>

    <div class="container-fluid" style="padding-bottom: 66px;">
        
        <div class="danger-tips">
            <div class="alert alert-warning" id="messageError" style="display: none;background-color: #ffe0e0;border-color: #ffb0b0;color: #ff2020; margin-bottom:0;margin-top: 12px;"></div>
        </div>

        <div class="server bgw mtb15">
            <div class="title c6 f16 plr15">
                <h3 class="c6 f16 pull-left">状态</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" id="LoadList">
                        <h3 class="c5 f15">负载状态<a href="https://github.com/midoks/mdserver-web/wiki#负载简述" target="_blank" class="bt-ico-ask" style="cursor: pointer;">?</a></h3>
                        <div class="circle" style="cursor: pointer;">
                            <div class="pie_left">
                                <div class="left"></div>
                            </div>
                            <div class="pie_right">
                                <div class="right"></div>
                            </div>
                            <div class="mask"><span id="Load">0</span>%</div>
                        </div>
                        <h4 id="LoadState" class="c5 f15">获取中...</h4>
                    </li>
                    <li class="col-xs-6 col-sm-3 col-md-3 col-lg-2 mtb20 circle-box text-center" id="cpuChart">
                        <h3 class="c5 f15">CPU使用率</h3>
                        <div class="circle">
                            <div class="pie_left">
                                <div class="left"></div>
                            </div>
                            <div class="pie_right">
                                <div class="right"></div>
                            </div>
                            <div class="mask"><span id="state">0</span>%</div>
                        </div>
                        <h4 id="core" class="c5 f15">获取中...</h4>
                    </li>
                    <li class="col-xs-6 col-sm-3 col-md-3 col-lg-2 mtb20 circle-box text-center">
                        <h3 class="c5 f15">内存使用率</h3>
                        <div class="circle mem-release">
                            <div class="pie_left">
                                <div class="left"></div>
                            </div>
                            <div class="pie_right">
                                <div class="right"></div>
                            </div>
                            <div class="mask"><span id="left">0</span>%</div>
                            <div class="mem-re-min" style="display: none;"></div>
                            <div class="mem-re-con" title=""></div>
                        </div>
                        <h4 id="memory" class="c5 f15">获取中...</h4>
                    </li>
                </ul>
            </div>
        </div>

        
        <div class="conter-box system-info bgw clearfix mtb15">
            <div class="title c6 f16 plr15">概览</div>
            <div class="system-info-con mtb20">
                <ul class="clearfix text-center" id='index_overview'>
                    <li class="sys-li-box col-xs-3 col-sm-3 col-md-3 col-lg-3">
                        <p class="name f15 c9">网站</p>
                        <div class="val"><a class="btlink" href="/site/index">{{data['site_count']}}</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">软件</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 radius4" style="height:491px">
                    <div class="title c6 f16 plr15 tabs-nav">
                        <div class="tab-list">
                            <span class="tabs-item active">流量</span>
                            <span class="tabs-item">磁盘IO</span>
                        </div>

                        <div class="tabs-down">
                            <select class="bt-input-text" name="network-io" style="font-size: 12px;">
                                <option value="ALL">全部</option>
                            </select>
                            <select class="bt-input-text hide" name="disk-io" style="font-size: 12px;">
                                <option value="ALL">全部</option>
                            </select>
                        </div>
                    </div>

                    <div class="tabs-content">
                        <div class="tabs-active radius4 tabs-item">
                            <div class="bw-info">
                                <div class="col-sm-6 col-md-3"><p class="c9"><span class="ico-up"></span>上行</p><a id="upSpeed">0</a></div>
                                <div class="col-sm-6 col-md-3"><p class="c9"><span class="ico-down"></span>下行</p><a id="downSpeed">0</a></div>
                                <div class="col-sm-6 col-md-3"><p class="c9">总发送</p><a id="upAll">0</a></div>
                                <div class="col-sm-6 col-md-3"><p class="c9">总接收</p><a id="downAll">0</a></div>
                            </div>
                            <div id="netImg" style="width:100%;height:330px;"></div>
                        </div>

                        <div class="radius4 tabs-item">
                            <div class="bw-info">
                                <div class="col-sm-6 col-md-3"><p class="c9"><span class="ico-read"></span>读取</p><a id="readBytes">0</a></div>
                                <div class="col-sm-6 col-md-3"><p class="c9"><span class="ico-write"></span>写入</p><a id="writeBytes">0</a></div>
                                <div class="col-sm-6 col-md-3"><p class="c9">每秒读写</p><a id="diskIops">0</a></div>
                                <div class="col-sm-6 col-md-3"><p class="c9">读写IO延迟</p><a id="diskTime" style="color: rgb(32, 165, 58);">0</a></div>
                            </div>
                            <div id="ioStat" style="width:100%;height:330px;"></div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script type="text/javascript" src="/static/app/site.js?v={{config.version}}"></script>
<script type="text/javascript" src="/static/app/soft.js?v={{config.version}}"></script>
<script type="text/javascript" src="/static/app/index.js?v={{config.version}}"></script>
<script type="text/javascript">

index.init();

pluginInit();
//加载关键数据总数
loadKeyDataCount();

setTimeout(function() {
    getDiskInfo();
}, 500)

setTimeout(function() {
    indexSoft();
}, 1000);

setTimeout(function() {
    getInfo();
}, 200);

</script>
{% endblock %}