Python开发物联网数据分析平台---报警和异常

{% extends "base.html" %}

{% block body %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" data-menu="status error">
    <!-- 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">
            <!-- COLOR PALETTE -->
            <h5 class="mt-4 mb-2">高低报汇总</h5>
            {%set css=["success","info","warning","danger","secondary","primary"] %}
            {%set  dictErrorCode0={'0': '无异常', '1': '电压异常', '2': '压力异常',\
              '3': '客户网络异常', '4': '设备液位异常',\
              '5': '气体泄漏异常', '6': '位置异常', \
              '7': '温度异常', '8': '温度传感器通信故障',\
              '9': '催化传感器故障', '10': '流量异常', '11': '井盖异动',\
              '12': '门禁异常', '13': '境内液位异常', '14': '燃气阀门状态', \
              '15': '液位传感器故障'} %}
            {%set  dictDevAlarm0={'0':"正常",'1':"高高报",'2':"高报",'3':"低报",'4':"低低报"} %}
            <div class="row">

                <!-- /.col (left) -->
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">高低报汇总</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            {%set df0=info['dfAlarm'].groupby("DevAlarm")['ID'].count().reset_index() %}
                            {%set sum0=df0.ID.sum() %}
                            {%for i in range(len(df0)) %}
                            {%set row=df0.iloc[i] %}
                            <div class="progress mb-3">
                                <div class="progress-bar bg-{{css[i%6]}}" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: {{int(row['ID']*100/sum0)}}%">
                                    <span class="sr-only"></span>
                                </div>

                            </div>
                            <p><code>{{row['ID']}}次 ({{dictDevAlarm0.get(str(row['DevAlarm']),'未知')}})</code></p>
                            {% end %}
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">异常统计</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body text-center">



                            {%set df0=info['dfError'].groupby("ErrorCode")['ID'].count().reset_index() %}
                            {%set sum0=df0.ID.sum() %}
                            {%for i in range(len(df0)) %}
                            {%set row=df0.iloc[i] %}
                            <p><code>{{row['ID']}}次 ({{dictErrorCode0.get(str(row['ErrorCode']),'未知')}})</code></p>
                            <div class="progress vertical">
                                <div class="progress-bar bg-{{css[i%6]}}" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: {{int(row['ID']*100/sum0)}}%">
                                    <span class="sr-only"></span>
                                </div>
                            </div>
                            {% end %}


                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col (right) -->
            </div>
            <div class="row">

                <!-- /.col (left) -->
                <div class="col-md-12">
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title">小时分布</h3>

                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="barChart" style="height:230px; min-height:230px"></canvas>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>

            </div>
            <div class="row">


                <div class="col-md-12">
                    <div class="card card-info">
                        <div class="card-header">
                            <h3 class="card-title">最近30天</h3>

                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="stackedBarChart" style="height:230px; min-height:230px"></canvas>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
            </div>
             
             {%set df0=info['dfAlarm'] %}
            {%set df1=df0[df0.DevAlarm==1] %}
            {%set df2=df0[df0.DevAlarm==2] %}
            {%set df3=df0[df0.DevAlarm==3] %}
            {%set df4=df0[df0.DevAlarm==4] %}
            
            <div class="row"  {%if  df1.empty %} style="display: none;" {%end%}>
                

                <div class="col-md-12">
                    <div class="card card-danger">
                        <div class="card-header">
                            <h3 class="card-title">最常高高报设备</h3>

                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="alarmBarChart1" style="height:230px; min-height:230px"></canvas>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
            </div>
           
              <div class="row"  {%if  df2.empty %} style="display: none;" {%end%}>


                <div class="col-md-12">
                    <div class="card card-warning">
                        <div class="card-header">
                            <h3 class="card-title">最常高报设备</h3>

                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="alarmBarChart2" style="height:230px; min-height:230px"></canvas>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
            </div>
            
             
            <div class="row"  {%if  df3.empty %} style="display: none;" {%end%}>


                <div class="col-md-12">
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title">最常低报设备</h3>

                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="alarmBarChart3" style="height:230px; min-height:230px"></canvas>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
            </div>
                
             
            <div class="row" {%if  df4.empty %} style="display: none;" {%end%}>


                <div class="col-md-12">
                    <div class="card card-info">
                        <div class="card-header">
                            <h3 class="card-title">最常低低报设备</h3>

                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="alarmBarChart4" style="height:230px; min-height:230px"></canvas>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
            </div>
            
             
            <!-- /.card -->
            <!-- START ALERTS AND CALLOUTS -->
            <h5 class="mt-4 mb-2">报警和异常</h5>

            <div class="row">
                <div class="col-md-6">
                    <div class="card card-default">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-exclamation-triangle"></i>
                                报警
                            </h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">

                            {%set df0=info['dfAlarm'] %}
                            {%for i in range(len(df0)) %}
                            {%set row=df0.iloc[i] %}

                            <div class="alert alert-warning alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                <h5><i class="icon fas fa-exclamation-triangle"></i> Alert!</h5>
                                {{row['DevID']}} 于 {{row['RecDateTime']}}发生{{dictDevAlarm0.get(str(row['DevAlarm']),'未知')}}
                            </div>
                            {%end%}
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <div class="col-md-6">
                    <div class="card card-default">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-bullhorn"></i>
                                异常
                            </h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            {%set df0=info['dfError'] %}
                            {%for i in range(len(df0)) %}
                            {%set row=df0.iloc[i] %}
                            <div class="callout callout-danger">
                                <h5>{{dictErrorCode0.get(str(row['ErrorCode']),'未知')}}</h5>

                                <p>{{row['DevID']}} 于 {{row['RecDateTime']}}</p>
                            </div>
                            {%end%}
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>

                <!-- /.col -->


                <!-- /.col -->
            </div>
            <!-- /.row -->
            <!-- END ALERTS AND CALLOUTS -->


            <!-- /.row -->
            <!-- END CUSTOM TABS -->
            <!-- START PROGRESS BARS -->

            <!-- /.row -->

            <!-- /.row -->
            <!-- END PROGRESS BARS -->









            <!-- /.row -->
            <!-- END TYPOGRAPHY -->
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
{%set hours=list(range(24)) %}
{%set df0=info['dfAlarm'] %}
{%set df0=df0.reset_index(drop=True).set_index('RecDateTime').sort_index() %}
{%set df1=df0[df0.DevAlarm==1] %}
{%set df2=df0[df0.DevAlarm==2] %}
{%set df3=df0[df0.DevAlarm==3] %}
{%set df4=df0[df0.DevAlarm==4] %}
 

{% set g1=df1.groupby(lambda x:int(x.strftime('%H'))).count()['ID'] %}

{% set g2=df2.groupby(lambda x:int(x.strftime('%H'))).count()['ID'] %}
{% set g3=df3.groupby(lambda x:int(x.strftime('%H'))).count()['ID'] %}
{% set g4=df4.groupby(lambda x:int(x.strftime('%H'))).count()['ID'] %}

{% set g11=df1.groupby(df1.DevID).count()['ID'].sort_values(ascending=False)[:10] %}

{% set g22=df2.groupby(df2.DevID).count()['ID'].sort_values(ascending=False)[:10] %}
{% set g33=df3.groupby(df3.DevID).count()['ID'].sort_values(ascending=False)[:10] %}
{% set g44=df4.groupby(df4.DevID).count()['ID'].sort_values(ascending=False)[:10] %}



<input id="barChartLabels" type="hidden" value="{%raw hours %}">
<input id="barChartValues1" type="hidden" value="{% raw list(map(lambda x:g1.get(x,0),hours)) %}">
<input id="barChartValues2" type="hidden" value="{% raw list(map(lambda x:g2.get(x,0),hours)) %}">
<input id="barChartValues3" type="hidden" value="{% raw list(map(lambda x:g3.get(x,0),hours)) %}">
<input id="barChartValues4" type="hidden" value="{% raw list(map(lambda x:g4.get(x,0),hours)) %}">


<input id="alarmBarChartLabels1" type="hidden" value="{%raw g11.index.to_list() %}">
<input id="alarmBarChartLabels2" type="hidden" value="{%raw g22.index.to_list() %}">
<input id="alarmBarChartLabels3" type="hidden" value="{%raw g33.index.to_list() %}">
<input id="alarmBarChartLabels4" type="hidden" value="{%raw g44.index.to_list() %}">
<input id="alarmBarChartValues1" type="hidden" value="{% raw g11.values.tolist() %}">
<input id="alarmBarChartValues2" type="hidden" value="{% raw g22.values.tolist() %}">
<input id="alarmBarChartValues3" type="hidden" value="{% raw g33.values.tolist() %}">
<input id="alarmBarChartValues4" type="hidden" value="{% raw g44.values.tolist() %}">


{% from pandas import date_range %}

{%set hours=list(range(24)) %}


{% if not df0.empty %}
{%set start=df0.index[0].strftime('%Y-%m-%d') %}
{%set end=df0.index[-1].strftime('%Y-%m-%d') %}
{%set dates=date_range(start,end).astype('S16').values.tolist() %}

{%set df1=df0[df0.DevAlarm==1] %}
{%set df2=df0[df0.DevAlarm==2] %}
{%set df3=df0[df0.DevAlarm==3] %}
{%set df4=df0[df0.DevAlarm==4] %}
 


{% set g1=df1.groupby(lambda x:x.strftime('%Y-%m-%d')).count()['ID'] %}
{% set g2=df2.groupby(lambda x:x.strftime('%Y-%m-%d')).count()['ID'] %}
{% set g3=df3.groupby(lambda x:x.strftime('%Y-%m-%d')).count()['ID'] %}
{% set g4=df4.groupby(lambda x:x.strftime('%Y-%m-%d')).count()['ID'] %}





<input id="stackedChartLabels" type="hidden" value="{%raw dates %}">
<input id="stackedChartValues1" type="hidden" value="{% raw list(map(lambda x:g1.get(x,0),dates)) %}">
<input id="stackedChartValues2" type="hidden" value="{% raw list(map(lambda x:g2.get(x,0),dates)) %}">
<input id="stackedChartValues3" type="hidden" value="{% raw list(map(lambda x:g3.get(x,0),dates)) %}">
<input id="stackedChartValues4" type="hidden" value="{% raw list(map(lambda x:g4.get(x,0),dates)) %}">
{% end %}
<!-- /.content-wrapper -->
{% end %}
{% block script %}
<!-- DataTables -->

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

$(function () {
    
//-------------
    //- BAR CHART -
    //-------------
    var barChartData = {
      labels  : eval($("#barChartLabels").val()),
      datasets: [
        {
          label               : '高高报',
          backgroundColor     : 'rgba(188, 60, 129, 0.9)',
          borderColor         : 'rgba(60,141,188,0.8)',
          pointRadius          : false,
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : eval($("#barChartValues1").val())
        },
        {
          label               : '高报',
          backgroundColor     : 'rgb(138, 26, 221)',
          borderColor         : 'rgba(210, 214, 222, 1)',
          pointRadius         : false,
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : eval($("#barChartValues2").val())
        },
          {
          label               : '低报',
          backgroundColor     : 'rgba(33, 219, 33, 0.9)',
          borderColor         : 'rgba(60,141,188,0.8)',
          pointRadius          : false,
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : eval($("#barChartValues3").val())
        },
        {
          label               : '低低报',
          backgroundColor     : 'rgb(199, 221, 35)',
          borderColor         : 'rgba(210, 214, 222, 1)',
          pointRadius         : false,
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : eval($("#barChartValues4").val())
        },
      ]
    }
    var barChartCanvas = $('#barChart').get(0).getContext('2d')
    
     
  

    var barChartOptions = {
      responsive              : true,
      maintainAspectRatio     : false,
      datasetFill             : false
    }

    var barChart = new Chart(barChartCanvas, {
      type: 'bar', 
      data: barChartData,
      options: barChartOptions
    })

    //---------------------
    //- STACKED BAR CHART -
    //---------------------
    
    var stackedBarChartData = {
      labels  : eval($("#stackedChartLabels").val()),
      datasets: [
        {
          label               : '高高报',
          backgroundColor     : 'rgba(188, 60, 129, 0.9)',
          borderColor         : 'rgba(60,141,188,0.8)',
          pointRadius          : false,
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : eval($("#stackedChartValues1").val())
        },
        {
          label               : '高报',
          backgroundColor     : 'rgb(138, 26, 221)',
          borderColor         : 'rgba(210, 214, 222, 1)',
          pointRadius         : false,
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : eval($("#stackedChartValues2").val())
        },
          {
          label               : '低报',
          backgroundColor     : 'rgba(33, 219, 33, 0.9)',
          borderColor         : 'rgba(60,141,188,0.8)',
          pointRadius          : false,
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : eval($("#stackedChartValues3").val())
        },
        {
          label               : '低低报',
          backgroundColor     : 'rgb(199, 221, 35)',
          borderColor         : 'rgba(210, 214, 222, 1)',
          pointRadius         : false,
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : eval($("#stackedChartValues4").val())
        },
      ]
    }
    var stackedBarChartCanvas = $('#stackedBarChart').get(0).getContext('2d')
    

    var stackedBarChartOptions = {
      responsive              : true,
      maintainAspectRatio     : false,
      scales: {
        xAxes: [{
          stacked: true,
        }],
        yAxes: [{
          stacked: true
        }]
      }
    }

    var stackedBarChart = new Chart(stackedBarChartCanvas, {
      type: 'bar', 
      data: stackedBarChartData,
      options: stackedBarChartOptions
    })
     })


var alarmBarChartOptions = {
      legend: {
            display: false
        },
      responsive              : true,
      maintainAspectRatio     : false,
      datasetFill             : false
    }


var alarmBarChartData1 = {
      labels  : eval($("#alarmBarChartLabels1").val()),
      datasets: [
        {
          label               : '高高报',
          backgroundColor     : 'rgba(188, 60, 129, 0.9)',
          borderColor         : 'rgba(60,141,188,0.8)',
          pointRadius          : false,
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : eval($("#alarmBarChartValues1").val())
        } 
         
      ]
    }
    var alarmBarChartCanvas1 = $('#alarmBarChart1').get(0).getContext('2d')
    
    var alarmBarChart1 = new Chart(alarmBarChartCanvas1, {
      type: 'bar', 
      data: alarmBarChartData1,
      options: alarmBarChartOptions
    })

    var alarmBarChartData2 = {
      labels  : eval($("#alarmBarChartLabels2").val()),
      datasets: [
        {
           label               : '高报',
          backgroundColor     : 'rgb(138, 26, 221)',
          borderColor         : 'rgba(210, 214, 222, 1)',
          pointRadius         : false,
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : eval($("#alarmBarChartValues2").val())
        } 
         
      ]
    }
    var alarmBarChartCanvas2 = $('#alarmBarChart2').get(0).getContext('2d')
    
    var alarmBarChart2 = new Chart(alarmBarChartCanvas2, {
      type: 'bar', 
      data: alarmBarChartData2,
      options: alarmBarChartOptions
    })
    var alarmBarChartData3 = {
      labels  : eval($("#alarmBarChartLabels3").val()),
      datasets: [
        {
           label               : '低报',
          backgroundColor     : 'rgba(33, 219, 33, 0.9)',
          borderColor         : 'rgba(60,141,188,0.8)',
          pointRadius          : false,
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : eval($("#alarmBarChartValues3").val())
        } 
         
      ]
    }
    var alarmBarChartCanvas3 = $('#alarmBarChart3').get(0).getContext('2d')
    
    var alarmBarChart3 = new Chart(alarmBarChartCanvas3, {
      type: 'bar', 
      data: alarmBarChartData3,
      options: alarmBarChartOptions
    })
    var alarmBarChartData4 = {
      labels  : eval($("#alarmBarChartLabels4").val()),
      datasets: [
        {
         label               : '低低报',
          backgroundColor     : 'rgb(199, 221, 35)',
          borderColor         : 'rgba(210, 214, 222, 1)',
          pointRadius         : false,
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : eval($("#alarmBarChartValues4").val())
        } 
         
      ]
    }
    var alarmBarChartCanvas4 = $('#alarmBarChart4').get(0).getContext('2d')
    
    var alarmBarChart4 = new Chart(alarmBarChartCanvas4, {
      type: 'bar', 
      data: alarmBarChartData4,
      options: alarmBarChartOptions
    })