<!doctype html>
<html lang="en">

    <head>
        
        <meta charset="utf-8" />
        <title>首页 | 消毒灭菌在线监测系统</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
        <meta content="Themesdesign" name="author" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="assets/images/tub1.png">

        <!-- jquery.vectormap css -->
        <link href="assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />

        <!-- DataTables -->
        <link href="assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />

        <!-- Responsive datatable examples -->
        <link href="assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />  

        <!-- Bootstrap Css -->
        <link href="assets/css/bootstrap-dark.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
        <!-- Icons Css -->
        <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
        <!-- App Css-->
        <link href="assets/css/app-dark.min.css" id="app-style" rel="stylesheet" type="text/css" />

        <!-- 引入vue.js -->
        <script src="assets/js/pages/vue2.6.11.js"></script>

    </head>

    <body data-topbar="dark" data-layout="horizontal">

        <!-- Begin page -->
        <div id="layout-wrapper">
                
            <!-- 头部开始 -->
            <?php include_once('header_admin.tpl.html'); ?>
            <!-- 头部结束 -->
            <!-- 头部导航栏    -->
            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="main-content" id="app">

                <div class="page-content" style="margin-top: 10px;">
                    <div class="container-fluid" style="max-width: 100%;">
                        <div class="row">
                            <div class="col-xl-3">
                                <div class="card">
                                    <div class="card-body" style="padding: 15px;">
                                        <div class="media">
                                           <div class="media-body overflow-hidden">
                                                <h6 class="mb-2" style="font-size:16px;">消毒灭菌概况</h6>
                                            </div> 
                                        </div>
                                    </div>
                                    <div class="card-body" style="padding-top: 5px;">
                                        <div class="media">
                                            <div class="media-body overflow-hidden" style="text-align: center;height: 90px;background: #1E232F;">
                                                <div style="margin-top: 10px;">
                                                    <a href="?c=device&a=returnDeviceRunPage"><h2 title="展示消毒灭菌传感器今日消毒次数" class="mb-2" style="font-weight: 600;">{{indexCount.todayCount}}</h2></a>
                                                    <a href="?c=device&a=returnDeviceRunPage"><h4 title="展示消毒灭菌传感器今日消毒次数" class="text-truncate font-size-14 mb-2">今日次数</h4></a>
                                                </div>
                                            </div>
                                            <div class="media-body overflow-hidden" style="text-align: center;margin-left: 20px;height: 90px;background: #1E232F;">
                                                <div style="margin-top: 10px;">
                                                    <a href="?c=device&a=returnDeviceRunPage"><h2 title="展示消毒灭菌传感器本周消毒次数" class="mb-2" style="font-weight: 600;">{{indexCount.weekCount}}</h2></a>
                                                    <a href="?c=device&a=returnDeviceRunPage"><h4 title="展示消毒灭菌传感器本周消毒次数" class="text-truncate font-size-14 mb-2">本周次数</h4></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body" style="padding-top: 5px;">
                                        <div class="media">
                                            <div class="media-body overflow-hidden" style="text-align: center;height: 90px;background: #1E232F;">
                                                <div style="margin-top: 10px;">
                                                    <a href="?c=device&a=returnDeviceRunPage"><h2 title="展示消毒灭菌传感器本月消毒次数" class="mb-2" style="font-weight: 600;">{{indexCount.monthCount}}</h2></a>
                                                    <a href="?c=device&a=returnDeviceRunPage"><h4 title="展示消毒灭菌传感器本月消毒次数" class="text-truncate font-size-14 mb-2">本月次数</h4></a>
                                                </div>
                                            </div>
                                            <div class="media-body overflow-hidden" style="text-align: center;margin-left: 20px;height: 90px;background: #1E232F;">
                                                <div style="margin-top: 10px;">
                                                    <a href="?c=device&a=returnDeviceRunPage"><h2 title="展示消毒灭菌传感器本年消毒次数" class="mb-2" style="font-weight: 600;">{{indexCount.yearCount}}</h2></a>
                                                    <a href="?c=device&a=returnDeviceRunPage"><h4 title="展示消毒灭菌传感器本年消毒次数" class="text-truncate font-size-14 mb-2">本年次数</h4></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body" style="padding: 15px;">
                                        <div class="media">
                                           <div class="media-body overflow-hidden">
                                                <h6 class="mb-2" style="font-size:16px;">消毒灭菌锅概况</h6>
                                            </div> 
                                        </div>
                                    </div>
                                    <div class="card-body" style="padding-top: 5px;">
                                        <div class="media" v-for="item in indexRunStatus">
                                            <div class="media-body overflow-hidden" style="height: 60px;border: 2px solid #1E232F;border-radius: 10px;">
                                                <div style="float: left;">
                                                    <p style="font-size: 13px;margin-top: 10px;margin-left: 10px;margin-bottom: 0px;">{{item.description}}</p>
                                                    <p style="font-size: 13px;margin-top: 2px;margin-left: 10px;margin-bottom: 0px;color: white;">{{item.name}}</p>
                                                </div>
                                                <a href="?c=device&a=returnDeviceRunPage"><div style="float: right;border: 2px solid #5663D2;margin-top: 15px;margin-right: 10px;width: 60px;height: 30px;text-align: center;border-radius: 15px;line-height: 30px;font-size: 12px;font-weight: 700;color: #5663D2;">
                                                    {{item.status}}
                                                </div></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="media">
                                           <div class="media-body overflow-hidden">
                                                <h6 class="mb-2" style="font-size:16px;">消毒灭菌统计</h6>
                                            </div> 
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div>
                                            <div id="line-column-chart" class="apex-charts"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body">
                                        <div class="media">
                                           <div class="media-body overflow-hidden">
                                                <h6 class="mb-2" style="font-size:16px;">事件数据</h6>
                                            </div> 
                                        </div>
                                        <div class="card-body">
                                            <div class="media">
                                                <div style="height: 100px;width: 25%;text-align: center;background: rgb(30, 35, 47);border-radius: 10px;margin-left:-20px;">
                                                    <div style="margin-top: 10px;">
                                                        <h1 style="font-weight: 600;">{{indexEvent.noStandard}}</h1>
                                                        <h4 class="text-truncate font-size-14 mb-2">灭菌不达标</h4>
                                                    </div>
                                                </div>
                                                <div style="height: 100px;width: 25%;text-align: center;background: rgb(30, 35, 47);border-radius: 10px;margin-left:20px;">
                                                    <div style="margin-top: 10px;">
                                                        <h1 style="font-weight: 600;">{{indexEvent.LowFrequency}}</h1>
                                                        <h4 class="text-truncate font-size-14 mb-2">灭菌频率低</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3">
                                <div class="card">
                                    <div class="card-body" style="padding: 15px;">
                                        <div class="media">
                                           <div class="media-body overflow-hidden">
                                                <h6 class="mb-2" style="font-size:16px;">预警概览</h6>
                                            </div> 
                                        </div>
                                    </div>
                                    <div class="card-body" style="padding-top: 5px;">
                                        <div class="media">
                                            <div class="media-body overflow-hidden" style="text-align: center;height: 90px;background: #1E232F;">
                                                <div style="margin-top: 10px;">
                                                     <a href="?c=warn&a=returnWarnRecordPage"><h2 class="mb-2" style="font-weight: 600;">{{indexWarnCount.warnCount}}</h2></a>
                                                     <a href="?c=warn&a=returnWarnRecordPage"><h4 class="text-truncate font-size-14 mb-2">预警次数</h4></a>
                                                </div>
                                            </div>
                                            <div class="media-body overflow-hidden" style="text-align: center;margin-left: 20px;height: 90px;background: #1E232F;">
                                                <div style="margin-top: 10px;">
                                                    <a href="?c=warn&a=returnWarnRecordPage"><h2 class="mb-2" style="font-weight: 600;">{{indexWarnCount.warnDealCount}}</h2></a>
                                                    <a href="?c=warn&a=returnWarnRecordPage"><h4 class="text-truncate font-size-14 mb-2">处理次数</h4></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body" style="padding: 15px;">
                                        <div class="media">
                                            <div class="media-body overflow-hidden">
                                                <h6 class="mb-2" style="font-size:16px;">预警分布</h6>
                                            </div> 
                                        </div>
                                        <div class="card-body">

                                            <div id="donut-chart" class="apex-charts"></div>

                                            <div class="row">
                                                <div class="col-4">
                                                    <div class="text-center mt-4">
                                                        <h6 class="mb-2 text-truncate"><i class="mdi mdi-circle text-primary font-size-2"></i> 温度预警</h6>
                                                        <h5>{{indexWarnTypePieInfo.temperature}} %</h5>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="text-center mt-4">
                                                        <h6 class="mb-2 text-truncate"><i class="mdi mdi-circle text-success font-size-2"></i> 压力预警</h6>
                                                        <h5>{{indexWarnTypePieInfo.pressure}} %</h5>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="text-center mt-4">
                                                        <h6 class="mb-2 text-truncate"><i class="mdi mdi-circle text-warning font-size-2"></i> 时间预警</h6>
                                                        <h5>{{indexWarnTypePieInfo.time}} %</h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body" style="padding: 15px;">
                                        <div class="media">
                                           <div class="media-body overflow-hidden">
                                                <h6 class="mb-2" style="font-size:16px;">预警设备</h6>
                                            </div> 
                                        </div>
                                        <div class="card-body" style="padding-top: 5px;padding-left:0px;">
                                            <div class="media" v-for="item in IndexWarnDeviceList">
                                                <div class="media-body overflow-hidden" style="height: 60px;">
                                                    <div style="float: left;">
                                                        <p style="font-size: 13px;margin-top: 10px;margin-left: 10px;margin-bottom: 0px;color: white;">{{item.hospital}} &nbsp;&nbsp;&nbsp;&nbsp;{{item.name}}</p>
                                                        <p style="font-size: 13px;margin-top: 2px;margin-left: 10px;margin-bottom: 0px;">{{item.type}}（{{item.level}}）&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.notification_time}}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                

            <!-- 尾部开始 -->
            <?php include_once('footer.tpl.html'); ?>
            <!-- 尾部结束 -->
            </div>
            

        </div>
        

        <!-- Right Sidebar -->
        <!-- /Right-bar -->

        <!-- Right bar overlay-->
        <div class="rightbar-overlay"></div>

        <!-- JAVASCRIPT -->
        <script src="assets/libs/jquery/jquery.min.js"></script>
        <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="assets/libs/metismenu/metisMenu.min.js"></script>
        <script src="assets/libs/simplebar/simplebar.min.js"></script>
        <script src="assets/libs/node-waves/waves.min.js"></script>

        <!-- apexcharts -->
        <script src="assets/libs/apexcharts/apexcharts.min.js"></script>
        <script src="assets/libs/chart.js/Chart.bundle.min.js"></script>
        

        <!-- jquery.vectormap map -->
        <script src="assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.min.js"></script>
        <script src="assets/libs/admin-resources/jquery.vectormap/maps/jquery-jvectormap-us-merc-en.js"></script>

        <!-- Required datatable js -->
        <script src="assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
        <script src="assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
        
        <!-- Responsive examples -->
        <script src="assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
        <script src="assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>

        <script src="assets/js/pages/dashboard_1.init.js"></script>

        <script src="assets/js/app.js"></script>

        <!--数据绑定-->
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: { 
                    indexCount: [],
                    indexRunStatus: [],
                    indexWarnCount: [],
                    indexWarnTypePieInfo: [],
                    IndexWarnDeviceList: [],
                    indexEvent:[]
                },
                created: function () {
                    this.getIndexCount();
                    this.getIndexRunStatus();
                    this.getIndexWarnCount();
                    this.getIndexWarnTypePie();
                    this.getIndexWarnTypePieInfo();
                    this.getIndexWarnDeviceList();
                    this.getIndexEvent();
                    this.getIndexLine();
                },
                methods: { 
                    // 消毒灭菌次数详情
                    getIndexCount: function () {
                        let _this = this;
                        $.ajax({
                            url: '?c=index&a=getIndexCount',
                            type: 'get',
                            dataType: 'json',
                            success: function(mes) {
                                _this.indexCount = mes.data
                            },
                            error: function (msg) {
                                console.info('ajax请求失败!')
                            }
                        })
                    },
                    // 查看当前设备运行状态
                    getIndexRunStatus: function () {
                        let _this = this;
                        $.ajax({
                            url: '?c=index&a=getIndexRunStatus',
                            type: 'get',
                            dataType: 'json',
                            success: function(mes) {
                                _this.indexRunStatus = mes.data
                            },
                            error: function (msg) {
                                console.info('ajax请求失败!')
                            }
                        })
                    },
                    // 查看消毒灭菌统计
                    getIndexLine: function () {
                        let _this = this;
                        $.ajax({
                            url: '?c=index&a=getIndexLine',
                            type: 'get',
                            dataType: 'json',
                            success: function(mes) {
                                var options={chart:{height:350,type:"bar",toolbar:{show:!1}},plotOptions:{bar:{horizontal:!1,columnWidth:"45%",endingShape:"rounded"}},dataLabels:{enabled:!1},stroke:{show:!0,width:2,colors:["transparent"]},series:[{name:"灭菌次数",data:mes.data.count},{name:"合格灭菌次数",data:mes.data.qualifiedCount}],colors:["#5664d2","#1cbb8c","#fcb92c"],xaxis:{categories:mes.data.time},grid:{borderColor:"#f1f1f1",padding:{bottom:10}},fill:{opacity:1},tooltip:{y:{formatter:function(e){return e}}},legend:{offsetY:7}};(chart=new ApexCharts(document.querySelector("#line-column-chart"),options)).render();
                            },
                            error: function (msg) {
                                console.info('ajax请求失败!')
                            }
                        })
                    },
                    // 预警详情
                    getIndexWarnCount: function () {
                        let _this = this;
                        $.ajax({
                            url: '?c=index&a=getIndexWarnCount',
                            type: 'get',
                            dataType: 'json',
                            success: function(mes) {
                                _this.indexWarnCount = mes.data
                            },
                            error: function (msg) {
                                console.info('ajax请求失败!')
                            }
                        })
                    },
                    getIndexWarnTypePie: function () {
                        let _this = this;
                        $.ajax({
                            url: '?c=index&a=getIndexWarnTypePie',
                            type: 'get',
                            dataType: 'json',
                            success: function(mes) {
                                var options={series:mes.data,chart:{height:230,type:"donut"},labels:["温度预警","压力预警","时间预警"],plotOptions:{pie:{donut:{size:"75%"}}},dataLabels:{enabled:!1},legend:{show:!1},colors:["#5664d2","#1cbb8c","#eeb902"]};(chart=new ApexCharts(document.querySelector("#donut-chart"),options)).render();
                            },
                            error: function (msg) {
                                console.info('ajax请求失败!')
                            }
                        }) 
                    },
                    getIndexWarnTypePieInfo: function () {
                        let _this = this;
                        $.ajax({
                            url: '?c=index&a=getIndexWarnTypePieInfo',
                            type: 'get',
                            dataType: 'json',
                            success: function(mes) {
                                 _this.indexWarnTypePieInfo = mes.data
                            },
                            error: function (msg) {
                                console.info('ajax请求失败!')
                            }
                        }) 
                    },
                    // 报警设备列表
                    getIndexWarnDeviceList: function () {
                        let _this = this;
                        $.ajax({
                            url: '?c=index&a=getIndexWarnDeviceList',
                            type: 'get',
                            dataType: 'json',
                            success: function(mes) {
                                 _this.IndexWarnDeviceList = mes.data
                            },
                            error: function (msg) {
                                console.info('ajax请求失败!')
                            }
                        }) 
                    },
                    // 事件数据
                    getIndexEvent: function () {
                        let _this = this;
                        $.ajax({
                            url: '?c=index&a=getIndexEvent',
                            type: 'get',
                            dataType: 'json',
                            success: function(mes) {
                                 _this.indexEvent = mes.data
                            },
                            error: function (msg) {
                                console.info('ajax请求失败!')
                            }
                        }) 
                    }
                }
            })
            
        </script>
        <!--数据绑定-->
    </body>
</html>
