Python开发物联网数据分析平台---设备数据概览

{% 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 %}

$(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
        }]
            }
        }
    })
})