<?php
// +----------------------------------------------------------------------
// | Quotes [未来可期]
// +----------------------------------------------------------------------
// +----------------------------------------------------------------------
// | Author: 自助建站系统 https://www.kancloud.cn/btwcms-com/btwcms/2265967 作者QQ：1617643
// +----------------------------------------------------------------------
// | Date: 2020年2月5日
// +----------------------------------------------------------------------
include('header.php');
?>
    <!-- Page Content-->
    <div class="page-content">

        <div class="container-fluid">
            <!-- Page-Title -->
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box">
                        <div class="float-right">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">服务中心</a></li>
                                <li class="breadcrumb-item active">服务台</li>
                            </ol>
                        </div>
                        <h4 class="page-title">服务台</h4>
                    </div><!--end page-title-box-->
                </div><!--end col-->
            </div>
            <!-- end page title end breadcrumb -->


            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="mt-0 header-title">操作记录Chart</h4>
                            <p class="text-muted mb-3 d-inline-block text-truncate w-100">.
                            </p>
                            <div id="log_record" style="height: 300px"></div>
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div> <!-- end col -->
            </div> <!-- end row -->

        </div><!-- container -->

    <?php
    include('footer.php');
    ?>


    <!--Morris Chart-->
    <script src="../assets/plugins/morris/morris.min.js"></script>
    <script src="../assets/plugins/raphael/raphael.min.js"></script>
    <script src="../assets/pages/jquery.morris.init.js"></script>

    <script>

        !function($) {
            "use strict";

            var MorrisCharts = function() {};

            //creates line chart
            MorrisCharts.prototype.createLineChart = function(element, data, xkey, ykeys, labels, lineColors) {
                Morris.Line({
                    element: element,
                    data: data,
                    xkey: xkey,
                    ykeys: ykeys,
                    labels: labels,
                    hideHover: 'auto',
                    gridLineColor: '#dbe5ec',
                    resize: true, //defaulted to true
                    lineColors: lineColors
                });
            },


                //creates Donut chart
                MorrisCharts.prototype.createDonutChart = function(element, data, colors) {
                    Morris.Donut({
                        element: element,
                        data: data,
                        resize: true,
                        colors: colors,
                        labelColor:"#464457",
                    });
                },

                MorrisCharts.prototype.init = function() {
                    //请求数据
                    var $data;

                    $.ajax
                    ({
                        cache: false,
                        async: false,
                        dataType: 'json', type: 'post',
                        url: "ajax.php?act=getLogRecord",
                        success: function (resp){
                            if(resp.code == 1){
                                $data = resp.data;
                                console.log($data);
                            }
                        }
                    });


                  /*  //create line chart
                     $data  = [
                        { y: '2009', a: 3 },
                        { y: '2010', a: 30 },
                        { y: '2011', a: 10 },
                        { y: '2012', a: 10 },
                        { y: '2013', a: 22 },
                        { y: '2014', a: 12 },
                        { y: '2020', a: 5 }
                    ];*/

                    this.createLineChart('log_record', $data, 'date', ['count'], ['操作记录：'], ['#4d79f6']);



                },
                //init
                $.MorrisCharts = new MorrisCharts, $.MorrisCharts.Constructor = MorrisCharts
        }(window.jQuery),

//initializing
            function($) {
                "use strict";
                $.MorrisCharts.init();
            }(window.jQuery);
    </script>