Python开发物联网数据分析平台---最新数据

前端页面minutes15.html代码如下：

代码语言：html复制

{% extends "base.html" %}
{% block css %}
<!-- DataTables -->
<link rel="stylesheet" href="plugins/datatables-bs4/css/dataTables.bootstrap4.css">
{% end %}
{% block body %}

<div class="content-wrapper" data-menu="data minutes15">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>最近15分钟</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">最近15分钟</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-12">

                <!-- /.card -->

                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">最近15分钟的数据</h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table id="table" class="table table-bordered table-striped"  data-filter-control="true"
  data-show-search-clear-button="true">
                            <thead>
                                <tr>
                                    <th>设备ID</th>
                                    <th data-filter-control="select">单位</th>
                                    <th>电压</th>
                                    <th>数值</th>
                                    <th>监测时间</th>
                                    <th>上传时间</th>
                                     <th>报警状态</th>
                                    <th>错误码</th>
                                </tr>
                            </thead>
                            <tbody>
                                {%set dictDevUnit0={1:"PRE(Pa)",2:"TEMP(℃)"} %} 
                                
                                {%set dictDevAlarm0={0:"正常",1:"高高报",2:"高报",3:"低报",4:"低低报"} %} 
                                 {%set dictErrorCode0={'0': '无异常', '1': '电压异常', '2': '压力异常',
              '3': '客户网络异常', '4': '设备液位异常',
              '5': '气体泄漏异常', '6': '位置异常', 
              '7': '温度异常', '8': '温度传感器通信故障',
              '9': '催化传感器故障', '10': '流量异常', '11': '井盖异动',
              '12': '门禁异常', '13': '境内液位异常', '14': '燃气阀门状态', 
              '15': '液位传感器故障'} %} 
                                {%for i in range(len(df0)) %}
                                {%set row=df0.iloc[i] %}
                                 
                                <tr>
                                    <td>{{row['DevID']}}</td>
                                    <td>{{dictDevUnit0.get(row['DevUnit'],"未知")}}</td>
                                    <td>{{row['voltage']}}</td>
                                    <td>{{row['DevData']}}</td>
                                    <td>{{row.name}}</td>
                                    <td>{{row['AddTime']}}</td>
                                    <td>{{dictDevAlarm0.get(row['DevAlarm'],"未知")}}</td>
                                    <td>{{dictErrorCode0.get(row['ErrorCode'],"未知")}}</td>
                                </tr>
                                {%end%}

                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>设备ID</th>
                                    <th>单位</th>
                                    <th>电压</th>
                                    <th>数值</th>
                                    <th>监测时间</th>
                                    <th>上传时间</th>
                                     <th>报警状态</th>
                                    <th>错误码</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>
{% end %}
{% block script %}
<!-- DataTables -->
<script src="plugins/datatables/jquery.dataTables.js"></script>
<script src="plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
<script src="static/js/minutes15.js"></script>
{% end %}

对应的JavaScript代码minutes15.js如下：

代码语言：javascript复制

 $(function () {
    
    $('#table').DataTable({
      "paging": true,
      "lengthChange": true,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": false,
    });
  });

后台和模板都是使用tornado，开发过程中体会到了使用模板的高效率和事半功倍，甚至对"php是最好的web编程语言"也明白了理由。

php javascript html tornado web

0 人点赞