Python开发物联网数据分析平台---设备列表

 {% extends "base.html" %}

 {% block body %}
 <div class="content-wrapper" data-menu="overview ids">
     <!-- Content Header (Page header) -->
     <section class="content-header">
         <div class="container-fluid">
             <div class="row mb-2">
                 <div class="col-sm-6">
                     <h1>设备</h1>
                 </div>
                 <div class="col-sm-6">
                     <ol class="breadcrumb float-sm-right">
                         <li class="breadcrumb-item"><a href="#">总览</a></li>
                         <li class="breadcrumb-item active">设备</li>
                     </ol>
                 </div>
             </div>
         </div><!-- /.container-fluid -->
     </section>

     <!-- Main content -->
     <section class="content">
         <div class="container-fluid">
             <h5 class="mb-2">所有设备</h5>
             {%set css=["success","info","warning","danger"] %}
             {%set m=len(df0)//4 %}
             {%set n=len(df0)%4 %}
             {%for i in range(m) %}
             {%set row1=df0.iloc[i*4] %}
             {%set row2=df0.iloc[i*4+1] %}
             {%set row3=df0.iloc[i*4+2] %}
             {%set row4=df0.iloc[i*4+3] %}


             <div class="row">
                 <div class="col-md-3 col-sm-6 col-12" data-id={{row1['DevID']}}>
                     <div class="info-box">
                         <span class="info-box-icon bg-{{css[0]}}"><i class="far fa-envelope"></i></span>

                         <div class="info-box-content">
                             <a href="id?ids={{row1['DevID']}}" target="_blank"><span class="info-box-text">{{row1['DevID']}}</span></a>
                             <a href="year?ids={{row1['DevID']}}" target="_blank"><span class="info-box-number">{{row1['ID']}}条数据</span></a>
                                                    
                             <a href="error?ids={{row1['DevID']}}" target="_blank">
                                 <span class="float-right badge bg-error">报警</span>
                             </a>
                             <a href="offline?ids={{row1['DevID']}}" target="_blank">
                                 <span class="float-right badge bg-error">掉钱</span>
                             </a>
                             
                         </div>
                         <!-- /.info-box-content -->
                     </div>
                     <!-- /.info-box -->
                 </div>
                 <!-- /.col -->
                 <div class="col-md-3 col-sm-6 col-12" data-id={{row2['DevID']}}>
                     <div class="info-box">
                         <span class="info-box-icon bg-{{css[1]}}"><i class="far fa-flag"></i></span>

                         <div class="info-box-content">
                             <a href="id?ids={{row2['DevID']}}" target="_blank"><span class="info-box-text">{{row2['DevID']}}</span></a>
                             <a href="year?ids={{row2['DevID']}}" target="_blank"><span class="info-box-number">{{row2['ID']}}条数据</span></a>
                              <a href="error?ids={{row2['DevID']}}" target="_blank">
                                 <span class="float-right badge bg-error">报警</span>
                             </a>
                             <a href="offline?ids={{row2['DevID']}}" target="_blank">
                                 <span class="float-right badge bg-error">掉钱</span>
                             </a>
                         </div>
                         <!-- /.info-box-content -->
                     </div>
                     <!-- /.info-box -->
                 </div>
                 <!-- /.col -->
                 <div class="col-md-3 col-sm-6 col-12" data-id={{row3['DevID']}}>
                     <div class="info-box">
                         <span class="info-box-icon bg-{{css[2]}}"><i class="far fa-copy"></i></span>

                         <div class="info-box-content">
                             <a href="id?ids={{row3['DevID']}}" target="_blank"><span class="info-box-text">{{row3['DevID']}}</span></a>
                             <a href="year?ids={{row3['DevID']}}" target="_blank"><span class="info-box-number">{{row3['ID']}}条数据</span></a>
                              <a href="error?ids={{row3['DevID']}}" target="_blank">
                                 <span class="float-right badge bg-error">报警</span>
                             </a>
                             <a href="offline?ids={{row3['DevID']}}" target="_blank">
                                 <span class="float-right badge bg-error">掉钱</span>
                             </a>
                         </div>
                         <!-- /.info-box-content -->
                     </div>
                     <!-- /.info-box -->
                 </div>
                 <!-- /.col -->
                 <div class="col-md-3 col-sm-6 col-12" data-id={{row4['DevID']}}>
                     <div class="info-box">
                         <span class="info-box-icon bg-{{css[3]}}"><i class="far fa-star"></i></span>

                         <div class="info-box-content">
                             <a href="id?ids={{row4['DevID']}}" target="_blank"><span class="info-box-text">{{row4['DevID']}}</span></a>
                             <a href="year?ids={{row4['DevID']}}" target="_blank"><span class="info-box-number">{{row4['ID']}}条数据</span></a>
                              <a href="error?ids={{row4['DevID']}}" target="_blank">
                                 <span class="float-right badge bg-error">报警</span>
                             </a>
                             <a href="offline?ids={{row4['DevID']}}" target="_blank">
                                 <span class="float-right badge bg-error">掉钱</span>
                             </a>
                         </div>
                         <!-- /.info-box-content -->
                     </div>
                     <!-- /.info-box -->
                 </div>
                 <!-- /.col -->
             </div>
             {%end%}

             <div class="row">
                 {%for i in range(n) %}
                 {%set row=df0.iloc[m*4+i] %}
                 <div class="col-md-3 col-sm-6 col-12" data-id={{row['DevID']}}>
                     <div class="info-box">
                         <span class="info-box-icon bg-{{css[i]}}"><i class="far fa-envelope"></i></span>

                         <div class="info-box-content">
                             <a href="id?ids={{row['DevID']}}" target="_blank"><span class="info-box-text">{{row['DevID']}}</span></a>
                             <a href="year?ids={{row['DevID']}}" target="_blank"><span class="info-box-number">{{row['ID']}}条数据</span></a>
                              <a href="error?ids={{row['DevID']}}" target="_blank">
                                 <span class="float-right badge bg-error">报警</span>
                             </a>
                             <a href="offline?ids={{row['DevID']}}" target="_blank">
                                 <span class="float-right badge bg-error">掉钱</span>
                             </a>
                         </div>
                         <!-- /.info-box-content -->
                     </div>
                     <!-- /.info-box -->
                 </div>
                 {%end%}
                 <!-- /.col -->
             </div>

         </div>
     </section>
 </div>
 {% end %}
 {% block script %}

 <script src="static/js/ids.js"></script>
 {% end %}

 $(function () {
     $.fn.delayKeyup = function (callback, ms) {
         var timer = 0;
         $(this).keyup(function (event) {

             if (event.keyCode !== 13 && event.keyCode !== 38 && event.keyCode !== 40) {
                 clearTimeout(timer);
                 timer = setTimeout(function () {
                     callback(event);
                 }, ms);
             } else {
                 callback(event);
             }
         });
         return $(this);
     };


     $('input[type=search]').delayKeyup(function () {
         var text = $('input[type=search]').val().trim();

         $('.content .row .col-md-3').filter(function () {
             return !$(this).data('id').toString().match(text)
         }).fadeOut();
         $('.content .row .col-md-3').filter(function () {
             return !!$(this).data('id').toString().match(text)
         }).fadeIn();

     });

     $('#selectNames').change(function () {
             var ids = $('#selectNames').val();
             if (ids.length > 0) {
                 $('.content .row .col-md-3').filter(function () {
                     return !(ids.indexOf($(this).data('id').toString()) > -1)
                 }).fadeOut();
                 $('.content .row .col-md-3').filter(function () {
                     return !!(ids.indexOf($(this).data('id').toString()) > -1)
                 }).fadeIn();
             } else {
                 $('.content .row .col-md-3').fadeIn();
             }
          

     });



 })