{% extends "layout.html" %}

{% block content %}
<div class="main-content">
    <div class="container-fluid" style="padding-bottom: 50px;">
        <div class="pos-box bgw mtb15">
            <div class="position f14 c9 pull-left">
                <a class="plr10 c4" href="/">{{data['lan']['H1']}}</a>/<span class="plr10 c4">{{data['lan']['H2']}}</span>
            </div>
        </div>
        <div class="safe container-fluid  bgw mtb15 pd15" style="overflow: hidden;">
            <div class="mr50 pull-left">
                <div class="ss-text pull-left">
                    <em>{{data['lan']['C1']}}</em>
                    <div class='ssh-item' id="openJK">
                    </div>
                </div>
            </div>
            <div class="mr50 pull-left">
                <div class="ss-text pull-left">
                    <em>{{data['lan']['C2']}}</em>
                    <input class="bt-input-text" id="saveDay" value="" type="number">
                </div>
                <div class="ss-text pull-left" style="margin-left:10px">
                    <button class="btn btn-default btn-sm" type="button" onclick="SetControl(true);">{{data['lan']['C3']}}</button>
                </div>
            </div>
            <div class="mr50 pull-left" style="padding-left:50px; border-left:#ccc 1px solid; margin-right:0">
                <button class="btn btn-default btn-sm" type="button" onclick="CloseControl()">{{data['lan']['C4']}}</button>
            </div>
        </div>
        <div class="control">
            <div class="col-xs-12 col-sm-12 col-md-12 pull-left pd0 view0">
                <div class="mb15">
                    <div class="bgw pb15">
                        <div class="title c6 plr15 mb15">
                            <h3 class="c-tit f16">平均负载</h3>
                            <div class="searcTime pull-right">
                                <span class="tit">{{data['lan']['S1']}}</span><span class="gt" onclick="Wday(1,'getload')">{{data['lan']['D1']}}</span><span class="gt on" onclick="Wday(0,'getload')">{{data['lan']['D2']}}</span><span class="gt" onclick="Wday(7,'getload')">{{data['lan']['D3']}}</span><span class="gt" onclick="Wday(30,'getload')">{{data['lan']['D4']}}</span>
                                <div class="ss">
                                    <span class="st">{{data['lan']['S2']}}</span>
                                    <div class="time">
                                        <span class="bt">{{data['lan']['G1']}}<input class="btime" type="text" value="2017/1/10 00:00:00"></span>
                                        <span class="et">{{data['lan']['G2']}}<input class="etime" type="text" value="2017/1/13 00:00:00"></span>
                                        <div class="sbtn time_range_submit" data-type="getload">{{data['lan']['G3']}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="getloadview" style="width:100%; height:330px"></div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 pull-left pd0 view1">
                <div class="pr8">
                    <div class="bgw pb15">
                        <div class="title c6 plr15">
                            <h3 class="c-tit f16">{{data['lan']['T1']}}</h3>
                            <div class="searcTime pull-right">
                                <span class="tit">{{data['lan']['S1']}}</span><span class="gt" onclick="Wday(1,'cpu')">{{data['lan']['D1']}}</span><span class="gt on" onclick="Wday(0,'cpu')">{{data['lan']['D2']}}</span><span class="gt" onclick="Wday(7,'cpu')">{{data['lan']['D3']}}</span><span class="gt" onclick="Wday(30,'cpu')">{{data['lan']['D4']}}</span>
                                <div class="ss">
                                    <span class="st">{{data['lan']['S2']}}</span>
                                    <div class="time">
                                        <span class="bt">{{data['lan']['G1']}}<input class="btime" type="text" value="2017/1/10 00:00:00"></span>
                                        <span class="et">{{data['lan']['G2']}}<input class="etime" type="text" value="2017/1/13 00:00:00"></span>
                                        <div class="sbtn time_range_submit" data-type="cpu">{{data['lan']['G3']}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="cpuview" style="width:100%; height:330px"></div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 pull-left pd0 view2">
                <div class="pl7">
                    <div class="bgw pb15">
                        <div class="title c6 plr15">
                            <h3 class="c-tit f16">{{data['lan']['T2']}}</h3>
                            <div class="searcTime pull-right">
                                <span class="tit">{{data['lan']['S1']}}</span><span class="gt" onclick="Wday(1,'mem')">{{data['lan']['D1']}}</span><span class="gt on" onclick="Wday(0,'mem')">{{data['lan']['D2']}}</span><span class="gt" onclick="Wday(7,'mem')">{{data['lan']['D3']}}</span><span class="gt" onclick="Wday(30,'mem')">{{data['lan']['D4']}}</span>
                                <div class="ss">
                                    <span class="st">{{data['lan']['S2']}}</span>
                                    <div class="time">
                                        <span class="bt">{{data['lan']['G1']}}<input class="btime" type="text" value="2017/1/10 00:00:00"></span>
                                        <span class="et">{{data['lan']['G2']}}<input class="etime" type="text" value="2017/1/13 00:00:00"></span>
                                        <div class="sbtn time_range_submit" data-type="mem">{{data['lan']['G3']}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="memview" style="width:100%; height:330px"></div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 pull-left pd0 view1">
                <div class="pr8">
                    <div class="bgw pb15">
                        <div class="title c6 plr15 mb15">
                            <h3 class="c-tit f16">{{data['lan']['T3']}}</h3>
                            <div class="searcTime pull-right">
                                <span class="tit">{{data['lan']['S1']}}</span><span class="gt" onclick="Wday(1,'disk')">{{data['lan']['D1']}}</span><span class="gt on" onclick="Wday(0,'disk')">{{data['lan']['D2']}}</span><span class="gt" onclick="Wday(7,'disk')">{{data['lan']['D3']}}</span><span class="gt" onclick="Wday(30,'disk')">{{data['lan']['D4']}}</span>
                                <div class="ss">
                                    <span class="st">{{data['lan']['S2']}}</span>
                                    <div class="time">
                                        <span class="bt">{{data['lan']['G1']}}<input class="btime" type="text" value="2017/1/10 00:00:00"></span>
                                        <span class="et">{{data['lan']['G2']}}<input class="etime" type="text" value="2017/1/13 00:00:00"></span>
                                        <div class="sbtn time_range_submit" data-type="disk">{{data['lan']['G3']}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="position: relative;">
                            <div id="diskview" style="width:100%; height:330px"></div>
                            <div style="position: absolute;top: 15px;left: 6%;" class="hide">
                                单位：<div class="bt-crontab-select-button">
                                    <div class="bt-select-full only-one disk-unit">
                                        <div class="select-picker-search">
                                            <span class="picker-text-list">KB/s</span>
                                            <span class="down-select-full"></span>
                                        </div>
                                        <div class="select-list-item">
                                            <ul style="width:auto;max-height: auto;">
                                                <li data-attr="KB/s"><span class="select-name-full">KB/s</span></li>
                                                <li data-attr="MB/s"><span class="select-name-full">MB/s</span></li>
                                                <li data-attr="GB/s"><span class="select-name-full">GB/s</span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 pull-left pd0 view2">
                <div class="pl7">
                    <div class="bgw pb15">
                        <div class="title c6 plr15 mb15">
                            <h3 class="c-tit f16"><span class="mr5" style="vertical-align: middle;">{{data['lan']['T4']}}:</span><select class="bt-input-text hide" style="vertical-align: middle;font-size:13px;" name="network-io" ><option value="all">全部</option></select></h3>
                            <div class="searcTime pull-right">
                                <span class="tit">{{data['lan']['S1']}}</span><span class="gt" onclick="Wday(1,'network')">{{data['lan']['D1']}}</span><span class="gt on" onclick="Wday(0,'network')">{{data['lan']['D2']}}</span><span class="gt" onclick="Wday(7,'network')">{{data['lan']['D3']}}</span><span class="gt" onclick="Wday(30,'network')">{{data['lan']['D4']}}</span>
                                <div class="ss">
                                    <span class="st">{{data['lan']['S2']}}</span>
                                    <div class="time">
                                        <span class="bt">{{data['lan']['G1']}}<input class="btime" type="text" value="2017/1/10 00:00:00"></span>
                                        <span class="et">{{data['lan']['G2']}}<input class="etime" type="text" value="2017/1/13 00:00:00"></span>
                                        <div class="sbtn time_range_submit" data-type="network">{{data['lan']['G3']}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="position: relative;">
                            <div id="network" style="width:100%; height:330px"></div>
                            <div style="position: absolute;top: 15px;left: 6%;" class="hide">
                                单位：<div class="bt-crontab-select-button">
                                    <div class="bt-select-full only-one network-unit">
                                        <div class="select-picker-search">
                                            <span class="picker-text-list">KB/s</span>
                                            <span class="down-select-full"></span>
                                        </div>
                                        <div class="select-list-item">
                                            <ul style="width:auto;max-height: auto;">
                                                <li data-attr="KB/s"><span class="select-name-full">KB/s</span></li>
                                                <li data-attr="MB/s"><span class="select-name-full">MB/s</span></li>
                                                <li data-attr="GB/s"><span class="select-name-full">GB/s</span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .bt-crontab-select-button {
        display: inline-block;
        position: relative;
        border: 1px solid #ccc;
        border-radius: 2px;
        font-size: 12px;
        vertical-align: middle;
    }

    .bt-crontab-select-button .select-picker-search:hover {
        background: #ebf1f5;
        cursor: pointer;
    }

    .bt-crontab-select-button .select-picker-search {
        height: 25px;
        line-height: 25px;
        border: none;
        outline: none;
    }

    .bt-crontab-select-button .select-picker-search span {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
    }

    .bt-crontab-select-button .picker-text-list {
        margin-right: 25px;
        padding-left: 10px;
    }

    .bt-crontab-select-button input {
        padding: 5px 10px;
        height: 35px;
        line-height: 35px;
        border: none;
        border-bottom: 1px solid #ccc;
    }

    .bt-crontab-select-button input:focus {
        outline: none;
    }

    .bt-crontab-select-button .only-one {
        position: relative;
    }

    .bt-crontab-select-button .down-select-full {
        display: inline-block;
        width: 0;
        height: 0;
        border-width: 5px;
        border-style: solid;
        border-color: #777 transparent transparent transparent;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .bt-crontab-select-button .select-list-item {
        transition: all 500ms;
        background: #fff;
        position: absolute;
        top: 28px;
        display: none;
        box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
        border-radius: 4px;
        z-index: 9999;
    }

    .bt-crontab-select-button .select-list-item.active {
        display: block;
        z-index: 2;
    }

    .bt-crontab-select-button .select-list-item ul {
        overflow: auto;
        border-radius: 4px;
    }

    .bt-crontab-select-button .select-list-item li:hover {
        background: #20a53a;
        color: #fff;
    }

    .bt-crontab-select-button .only-one .select-list-item li.active {
        background-color: #20a53a;
        color: #fff;
    }

    .bt-crontab-select-button .select-list-item li .select-name-full {
        white-space: nowrap;
        padding: 0 23px 0 10px;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        display: inline-block;
    }

    .bt-crontab-select-button .select-check-full {
        display: inline-block;
        height: 16px;
        width: 16px;
        border-radius: 1px;
        margin-right: 5px;
        cursor: pointer;
        border: 1px solid #c2c2c2;
        position: relative;
        line-height: 20px;
        transition: all 200ms;
        vertical-align: sub;
    }

    .bt-crontab-select-button .select-list-item li.active .select-check-full {
        border: none;
        position: relative;
        top: 1px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        background: #5FB878;
        color: #fff;
    }

    .bt-crontab-select-button .select-list-item li.active .select-check-full:after {
        content: "\e013";
        font-size: 12px;
        transform: scale(.85);
        position: absolute;
        left: 2px;
        top: 2px;
    }
</style>
{% endblock %}
{% block scripts %}
	<script type="text/javascript" src="{{g.cdn_url}}/js/echarts.min.js?version={{g['version']}}"></script>
    <script type="text/javascript" src="{{g.cdn_url}}/js/control.js?version={{g['version']}}&repair={{data['js_random']}}"></script>
    <script type="text/javascript">
        if(getCookie('network-unitType') == undefined) {
            setCookie('network-unitType', "KB/s");
            setCookie('disk-unitType', "KB/s");
        }else{
            $(".network-unit .picker-text-list").text(getCookie('network-unitType'));
            $(".disk-unit .picker-text-list").text(getCookie('disk-unitType'));
            $(".network-unit .select-list-item li:contains("+getCookie('network-unitType')+")").addClass("active");
            $(".disk-unit .select-list-item li:contains("+getCookie('disk-unitType')+")").addClass("active");
        }
        $(".bt-crontab-select-button").on('click','.select-picker-search',function(){
            $(this).next().toggle();
            if ($(this).parent().hasClass('network-unit')) {
                $(".disk-unit .select-list-item").hide();
            }else{
                $(".network-unit .select-list-item").hide();
            }
        });
        $(".bt-crontab-select-button").on('click','.select-list-item li',function(){
            var _button = $(this).parents('.bt-crontab-select-button');
            $(this).addClass('active').siblings().removeClass('active');
            _button.find('.picker-text-list').text($(this).text());
            _button.find(".select-list-item").toggle();
            var cookie_type = $(this).parents('.bgw').find('.searcTime .time_range_submit').attr('data-type');
            setCookie(cookie_type+'-unitType', $(this).attr('data-attr'));
            $(this).parents('.bgw').find('.searcTime .gt.on').click();
        });
        $(document).click(function(event){
            var _con = $('.bt-crontab-select-button');  // 设置目标区域
            if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
               $(".select-list-item").hide();     //淡出消失
            }
       });
    </script>
{% endblock %}
