前端页面id.html代码如下:
{% extends "base.html" %}
{% block body %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" data-menu="status id">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">设备状态</h1>
</div><!-- /.col -->
<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><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header border-0">
<div class="d-flex justify-content-between">
<h3 class="card-title">最近一天数据</h3>
<a href="javascript:void(0);">View Report</a>
</div>
</div>
<div class="card-body">
<!--
<div class="d-flex">
<p class="d-flex flex-column">
<span class="text-bold text-lg">820</span>
<span>Visitors Over Time</span>
</p>
<p class="ml-auto d-flex flex-column text-right">
<span class="text-success">
<i class="fas fa-arrow-up"></i> 12.5%
</span>
<span class="text-muted">昨日数据</span>
</p>
</div>
-->
<div class="position-relative mb-4">
<canvas id="day-chart" height="200"></canvas>
</div>
<div class="d-flex flex-row justify-content-end">
<span class="mr-2">
<i class="fas fa-square text-primary"></i> 最近一天
</span>
<span>
<i class="fas fa-square text-success"></i> 最近一天的昨天
</span>
<span>
<i class="fas fa-square text-gray"></i> 最近一天的上周
</span>
</div>
</div>
</div>
</div>
<!-- /.col -->
</div>
<div class="row">
<!-- /.col-md-6 -->
<div class="col-lg-12">
<div class="card">
<div class="card-header border-0">
<div class="d-flex justify-content-between">
<h3 class="card-title">根据小时汇总(最近一天)</h3>
<a href="javascript:void(0);">View Report</a>
</div>
</div>
<div class="card-body">
<!--
<div class="d-flex">
<p class="d-flex flex-column">
<span class="text-bold text-lg">$18,230.00</span>
<span>Sales Over Time</span>
</p>
<p class="ml-auto d-flex flex-column text-right">
<span class="text-success">
<i class="fas fa-arrow-up"></i> 33.1%
</span>
<span class="text-muted">Since last month</span>
</p>
-->
</div>
<!-- /.d-flex -->
<div class="position-relative mb-4">
<canvas id="hour-chart" height="200"></canvas>
</div>
<div class="d-flex flex-row justify-content-end">
<span class="mr-2">
<i class="fas fa-square text-primary"></i> 平均值
</span>
<span>
<i class="fas fa-square text-gray"></i> 中值
</span>
</div>
</div>
</div>
</div>
<div class="row">
<!-- /.col-md-6 -->
<div class="col-lg-12">
<div class="card">
<div class="card-header border-0">
<div class="d-flex justify-content-between">
<h3 class="card-title">根据小时汇总(所有历史数据)</h3>
<a href="javascript:void(0);">View Report</a>
</div>
</div>
<div class="card-body">
<!--
<div class="d-flex">
<p class="d-flex flex-column">
<span class="text-bold text-lg">$18,230.00</span>
<span>Sales Over Time</span>
</p>
<p class="ml-auto d-flex flex-column text-right">
<span class="text-success">
<i class="fas fa-arrow-up"></i> 33.1%
</span>
<span class="text-muted">Since last month</span>
</p>
-->
</div>
<!-- /.d-flex -->
<div class="position-relative mb-4">
<canvas id="hhour-chart" height="200"></canvas>
</div>
<div class="d-flex flex-row justify-content-end">
<span class="mr-2">
<i class="fas fa-square text-primary"></i> 平均值
</span>
<span>
<i class="fas fa-square text-gray"></i> 中值
</span>
</div>
</div>
</div>
</div>
<div class="row">
<!-- /.col-md-6 -->
<div class="col-lg-12">
<div class="card">
<div class="card-header border-0">
<div class="d-flex justify-content-between">
<h3 class="card-title">百分数分布</h3>
<a href="javascript:void(0);">View Report</a>
</div>
</div>
<div class="card-body">
<!--
<div class="d-flex">
<p class="d-flex flex-column">
<span class="text-bold text-lg">$18,230.00</span>
<span>Sales Over Time</span>
</p>
<p class="ml-auto d-flex flex-column text-right">
<span class="text-success">
<i class="fas fa-arrow-up"></i> 33.1%
</span>
<span class="text-muted">Since last month</span>
</p>
-->
</div>
<!-- /.d-flex -->
<div class="position-relative mb-4">
<canvas id="month-chart" height="200"></canvas>
</div>
<div class="d-flex flex-row justify-content-end">
<span class="mr-2">
<i class="fas fa-square text-primary"></i> 最近一天数据
</span>
<span>
<i class="fas fa-square text-gray"></i> 最近30天数据
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">最新数据</h3>
</div>
<!-- /.card-header -->
<div class="card-body p-0">
<table class="table table-striped">
<thead>
<tr>
<th data-filter-control="select">单位</th>
<th>电压</th>
<th>数值</th>
<th>监测时间</th>
<th>上传时间</th>
<th>报警状态</th>
<th>错误码</th>
</tr>
</thead>
<tbody>
{% set df0=info['df0'].sort_index(ascending=False) %}
{%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>{{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>
</table>
</div>
<!-- /.card-body -->
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /.content -->
{% set d1=info['d1'] %}
{% set d2=info['d2'] %}
{% set d3=info['d3'] %}
{% set q1=info['q1'] %}
{% set q2=info['q2'] %}
{% set g1=info['g1'] %}
{% set g2=info['g2'] %}
<input id="dayChartLabels1" type="hidden" value="{% raw d1.index.strftime('%H:%M:%S').to_list()%}">
<input id="dayChartValues1" type="hidden" value="{% raw d1['DevData'].values.tolist() %}">
<input id="dayChartLabels2" type="hidden" value="{% raw d2.index.strftime('%H:%M:%S').to_list()%}">
<input id="dayChartValues2" type="hidden" value="{% raw d2['DevData'].values.tolist() %}">
<input id="dayChartLabels3" type="hidden" value="{% raw d3.index.strftime('%H:%M:%S').to_list()%}">
<input id="dayChartValues3" type="hidden" value="{% raw d3['DevData'].values.tolist() %}">
<input id="monthChartLabels1" type="hidden" value="{% raw (q1.index*100).astype('int16').to_list()%}">
<input id="monthChartValues1" type="hidden" value="{% raw q1.values.tolist() %}">
<input id="monthChartLabels1" type="hidden" value="{% raw (q2.index*100).astype('int16').to_list()%}">
<input id="monthChartValues2" type="hidden" value="{% raw q2.values.tolist() %}">
<input id="hourChartLabels1" type="hidden" value="{% raw (g1.mean().index).astype('int16').to_list()%}">
<input id="hourChartValues1" type="hidden" value="{% raw g1.mean().values.tolist() %}">
<input id="hourChartLabels1" type="hidden" value="{% raw (g1.median().index).astype('int16').to_list()%}">
<input id="hourChartValues2" type="hidden" value="{% raw g1.median().values.tolist() %}">
<input id="hhourChartLabels1" type="hidden" value="{% raw (g2.mean().index).astype('int16').to_list()%}">
<input id="hhourChartValues1" type="hidden" value="{% raw g2.mean().values.tolist() %}">
<input id="hhourChartLabels1" type="hidden" value="{% raw (g2.median().index).astype('int16').to_list()%}">
<input id="hhourChartValues2" type="hidden" value="{% raw g2.median().values.tolist() %}">
{% end %}
{% block script %}
<script src="static/js/id.js"></script>
{% end %}
对应的id.js代码如下:
$(function () {
'use strict'
$('#selectNames').attr('multiple', false);
var ticksStyle = {
fontColor: '#495057',
fontStyle: 'bold'
}
var mode = 'index'
var intersect = true
var $monthChart = $('#month-chart')
var monthChart = new Chart($monthChart, {
type: 'bar',
data: {
labels: eval($("#monthChartLabels1").val()),
datasets: [
{
backgroundColor: '#007bff',
borderColor: '#007bff',
data: eval($("#monthChartValues1").val())
},
{
backgroundColor: '#ced4da',
borderColor: '#ced4da',
data: eval($("#monthChartValues2").val())
}
]
},
options: {
maintainAspectRatio: false,
tooltips: {
mode: mode,
intersect: intersect
},
hover: {
mode: mode,
intersect: intersect
},
legend: {
display: false
},
scales: {
yAxes: [{
// display: false,
gridLines: {
display: true,
lineWidth: '4px',
color: 'rgba(0, 0, 0, .2)',
zeroLineColor: 'transparent'
},
ticks: $.extend({
beginAtZero: true,
// Include a dollar sign in the ticks
callback: function (value, index, values) {
if (value >= 1000) {
value /= 1000
value += 'k'
}
return value
}
}, ticksStyle)
}],
xAxes: [{
display: true,
gridLines: {
display: false
},
ticks: ticksStyle
}]
}
}
})
var $dayChart = $('#day-chart')
var dayChart = new Chart($dayChart, {
data: {
labels: eval($("#dayChartLabels1").val()),
datasets: [{
type: 'line',
label: '最近一天',
data: eval($("#dayChartValues1").val()),
backgroundColor: '#007bff',
borderColor: '#007bff',
pointBorderColor: '#007bff',
pointBackgroundColor: '#007bff',
fill: false
// pointHoverBackgroundColor: '#007bff',
// pointHoverBorderColor : '#007bff'
},
{
type: 'line',
label: '最近一天的昨天',
data: eval($("#dayChartValues2").val()),
backgroundColor: '#1be659',
borderColor: '#1be659',
pointBorderColor: '#1be659',
pointBackgroundColor: '#1be659',
fill: false
// pointHoverBackgroundColor: '#ced4da',
// pointHoverBorderColor : '#ced4da'
},
{
type: 'line',
label: '最近一天的上周',
data: eval($("#dayChartValues3").val()),
backgroundColor: '#ced4da',
borderColor: '#ced4da',
pointBorderColor: '#ced4da',
pointBackgroundColor: '#ced4da',
fill: false
// pointHoverBackgroundColor: '#ced4da',
// pointHoverBorderColor : '#ced4da'
}]
},
options: {
maintainAspectRatio: false,
responsive: true,
tooltips: {
mode: mode,
intersect: intersect
},
hover: {
mode: mode,
intersect: intersect
},
legend: {
display: true
},
scales: {
yAxes: [{
// display: false,
gridLines: {
display: true,
lineWidth: '4px',
color: 'rgba(0, 0, 0, .2)',
zeroLineColor: 'transparent'
},
ticks: $.extend({
beginAtZero: true,
// suggestedMax: 200
}, ticksStyle)
}],
xAxes: [{
display: true,
gridLines: {
display: false
},
ticks: ticksStyle
}]
}
}
})
var $hourChart = $('#hour-chart')
var hourChart = new Chart($hourChart, {
type: 'bar',
data: {
labels: eval($("#hourChartLabels1").val()),
datasets: [
{
backgroundColor: '#007bff',
borderColor: '#007bff',
data: eval($("#hourChartValues1").val())
},
{
backgroundColor: '#ced4da',
borderColor: '#ced4da',
data: eval($("#hourChartValues2").val())
}
]
},
options: {
maintainAspectRatio: false,
tooltips: {
mode: mode,
intersect: intersect
},
hover: {
mode: mode,
intersect: intersect
},
legend: {
display: false
},
scales: {
yAxes: [{
// display: false,
gridLines: {
display: true,
lineWidth: '4px',
color: 'rgba(0, 0, 0, .2)',
zeroLineColor: 'transparent'
},
ticks: $.extend({
beginAtZero: true,
// Include a dollar sign in the ticks
callback: function (value, index, values) {
if (value >= 1000) {
value /= 1000
value += 'k'
}
return value
}
}, ticksStyle)
}],
xAxes: [{
display: true,
gridLines: {
display: false
},
ticks: ticksStyle
}]
}
}
})
var $hhourChart = $('#hhour-chart')
var hhourChart = new Chart($hhourChart, {
type: 'bar',
data: {
labels: eval($("#hhourChartLabels1").val()),
datasets: [
{
backgroundColor: '#007bff',
borderColor: '#007bff',
data: eval($("#hhourChartValues1").val())
},
{
backgroundColor: '#ced4da',
borderColor: '#ced4da',
data: eval($("#hhourChartValues2").val())
}
]
},
options: {
maintainAspectRatio: false,
tooltips: {
mode: mode,
intersect: intersect
},
hover: {
mode: mode,
intersect: intersect
},
legend: {
display: false
},
scales: {
yAxes: [{
// display: false,
gridLines: {
display: true,
lineWidth: '4px',
color: 'rgba(0, 0, 0, .2)',
zeroLineColor: 'transparent'
},
ticks: $.extend({
beginAtZero: true,
// Include a dollar sign in the ticks
callback: function (value, index, values) {
if (value >= 1000) {
value /= 1000
value += 'k'
}
return value
}
}, ticksStyle)
}],
xAxes: [{
display: true,
gridLines: {
display: false
},
ticks: ticksStyle
}]
}
}
})
})
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。