{%set loadUrl = data['url']['data'] + '&ajax=1' %}
{% if data['ajax'] == False %}
<!DOCTYPE html>
<html>
    <head>
        {%include '../inc/header.html'%}
        {% if 'camera' in data and data['camera'] %}
        <link href="{{static_url('pc/lib/player/video-js.min.css')}}" rel="stylesheet">
        {% end %}
        <style>
        .btn-switch {
            cursor: pointer;
        }
        .button dt {
            margin-top: -9px;
            padding-bottom: 9px;
        }
        .button .btn-switch {
            border-radius: 0px;
            height:32px;
            width: 40px;
            font-size:12px;
            cursor: pointer;
            outline:none;
            margin-left:-9px;
        }
        .button .open {
            color:white;
        }
        .button .disabled {
            color:#bababa;
        }
        .button .loading {
            background-image: url(data:image/gif;base64,R0lGODlhIAAgALMAAP///7Ozs/v7+9bW1uHh4fLy8rq6uoGBgTQ0NAEBARsbG8TExJeXl/39/VRUVAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBQAAACwAAAAAIAAgAAAE5xDISSlLrOrNp0pKNRCdFhxVolJLEJQUoSgOpSYT4RowNSsvyW1icA16k8MMMRkCBjskBTFDAZyuAEkqCfxIQ2hgQRFvAQEEIjNxVDW6XNE4YagRjuBCwe60smQUDnd4Rz1ZAQZnFAGDd0hihh12CEE9kjAEVlycXIg7BAsMB6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YEvpJivxNaGmLHT0VnOgGYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHQjYKhKP1oZmADdEAAAh+QQFBQAAACwAAAAAGAAXAAAEchDISasKNeuJFKoHs4mUYlJIkmjIV54Soypsa0wmLSnqoTEtBw52mG0AjhYpBxioEqRNy8V0qFzNw+GGwlJki4lBqx1IBgjMkRIghwjrzcDti2/Gh7D9qN774wQGAYOEfwCChIV/gYmDho+QkZKTR3p7EQAh+QQFBQAAACwBAAAAHQAOAAAEchDISWdANesNHHJZwE2DUSEo5SjKKB2HOKGYFLD1CB/DnEoIlkti2PlyuKGEATMBaAACSyGbEDYD4zN1YIEmh0SCQQgYehNmTNNaKsQJXmBuuEYPi9ECAU/UFnNzeUp9VBQEBoFOLmFxWHNoQw6RWEocEQAh+QQFBQAAACwHAAAAGQARAAAEaRDICdZZNOvNDsvfBhBDdpwZgohBgE3nQaki0AYEjEqOGmqDlkEnAzBUjhrA0CoBYhLVSkm4SaAAWkahCFAWTU0A4RxzFWJnzXFWJJWb9pTihRu5dvghl+/7NQmBggo/fYKHCX8AiAmEEQAh+QQFBQAAACwOAAAAEgAYAAAEZXCwAaq9ODAMDOUAI17McYDhWA3mCYpb1RooXBktmsbt944BU6zCQCBQiwPB4jAihiCK86irTB20qvWp7Xq/FYV4TNWNz4oqWoEIgL0HX/eQSLi69boCikTkE2VVDAp5d1p0CW4RACH5BAUFAAAALA4AAAASAB4AAASAkBgCqr3YBIMXvkEIMsxXhcFFpiZqBaTXisBClibgAnd+ijYGq2I4HAamwXBgNHJ8BEbzgPNNjz7LwpnFDLvgLGJMdnw/5DRCrHaE3xbKm6FQwOt1xDnpwCvcJgcJMgEIeCYOCQlrF4YmBIoJVV2CCXZvCooHbwGRcAiKcmFUJhEAIfkEBQUAAAAsDwABABEAHwAABHsQyAkGoRivELInnOFlBjeM1BCiFBdcbMUtKQdTN0CUJru5NJQrYMh5VIFTTKJcOj2HqJQRhEqvqGuU+uw6AwgEwxkOO55lxIihoDjKY8pBoThPxmpAYi+hKzoeewkTdHkZghMIdCOIhIuHfBMOjxiNLR4KCW1ODAlxSxEAIfkEBQUAAAAsCAAOABgAEgAABGwQyEkrCDgbYvvMoOF5ILaNaIoGKroch9hacD3MFMHUBzMHiBtgwJMBFolDB4GoGGBCACKRcAAUWAmzOWJQExysQsJgWj0KqvKalTiYPhp1LBFTtp10Is6mT5gdVFx1bRN8FTsVCAqDOB9+KhEAIfkEBQUAAAAsAgASAB0ADgAABHgQyEmrBePS4bQdQZBdR5IcHmWEgUFQgWKaKbWwwSIhc4LonsXhBSCsQoOSScGQDJiWwOHQnAxWBIYJNXEoFCiEWDI9jCzESey7GwMM5doEwW4jJoypQQ743u1WcTV0CgFzbhJ5XClfHYd/EwZnHoYVDgiOfHKQNREAIfkEBQUAAAAsAAAPABkAEQAABGeQqUQruDjrW3vaYCZ5X2ie6EkcKaooTAsi7ytnTq046BBsNcTvItz4AotMwKZBIC6H6CVAJaCcT0CUBTgaTg5nTCu9GKiDEMPJg5YBBOpwlnVzLwtqyKnZagZWahoMB2M3GgsHSRsRACH5BAUFAAAALAEACAARABgAAARcMKR0gL34npkUyyCAcAmyhBijkGi2UW02VHFt33iu7yiDIDaD4/erEYGDlu/nuBAOJ9Dvc2EcDgFAYIuaXS3bbOh6MIC5IAP5Eh5fk2exC4tpgwZyiyFgvhEMBBEAIfkEBQUAAAAsAAACAA4AHQAABHMQyAnYoViSlFDGXBJ808Ep5KRwV8qEg+pRCOeoioKMwJK0Ekcu54h9AoghKgXIMZgAApQZcCCu2Ax2O6NUud2pmJcyHA4L0uDM/ljYDCnGfGakJQE5YH0wUBYBAUYfBIFkHwaBgxkDgX5lgXpHAXcpBIsRADs=);
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: 15px 15px;
        }
        </style>
    </head>
    <body>
        <div class="wrapper clearfix">
            {%include '../inc/nav.html'%}
            <div class="right-cont">
            {%include '../inc/top.html'%}
            <div class="main">
                {%include '../inc/msg.html'%}
                {%include 'inc/menu.html'%}

                {% if 'stat' in data and data['stat'] %}
                <div>
                    <div class="pannel" name="chart" id="chart">
                        <h2>今日（<span class="name">{{data['stat']['name']}}</span>）数据趋势</h2>
                        <div class="box" id="main" style="width: 100%;height:405px;"></div>
                    </div> 
                </div>
                {% end %}

                {% if 'camera' in data and data['camera'] %}
                {% for k,v in enumerate(data['camera']) %}
                <div class="{% if k%2 == 0 %}left{% else %}right{% end %} w-half">
                    <div class="pannel">
                        <h2>{{v['name']}}</h2>
                        <video id="player-{{k}}" class="player video-js vjs-default-skin" controls>
                          <source
                             src="{{v['value']}}"
                             type="application/x-mpegURL">
                        </video>
                    </div>
                </div>
                {% end %}
                {% end %}

                <div id="loadMain">
                {% end %}

                {% if 'pic' in data and data['pic'] %}

                {% if 'camera' in data and data['camera'] %}
                {%set index = 0 %}
                {% for v in data['camera'] %}
                {%set index = index+1 %}
                {% end %}
                {% else %}
                {%set index = 0 %}
                {% end %}

                {% for k,v in enumerate(data['pic']) %}
                <div class="{% if index%2 == 0 %}left{% else %}right{% end %} w-half">
                    <div class="pannel">
                        <h2>{{v['name']}}</h2>
                        <div class="box">
                            <img src="{{v['value']}}" width="100%" style="display: block;" />
                        </div>
                    </div>
                </div>
                {%set index = index+1 %}
                {% end %}
                {% end %}

                {%include 'inc/data.html'%}
                {% if data['ajax'] == False %}
                </div>
            </div>
        </div>
    </div>
{%include '../inc/footer.html'%}
{%include '../inc/script.html'%}
{% end %}

{% if 'stat' not in data %}
{% else %}
{% if data['ajax'] == False %}
{%include 'chart/simple.html'%}
{% else %}
{%include 'chart/ajax.html'%}
{% end %}
{% end %}
{% if data['ajax'] == False %}
{%include 'inc/load.html'%}
</body>
</html>
{% end %}