前端页面error.html的代码如下:
{% 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">×</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 %}
前端页面对应的error.js的代码如下:
$(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
})
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。