01：adminLTE2基本使用

{% extends "base.html" %}
{% block title %}运维工单平台{% endblock %}
{% block console_name %}
    运维工单平台
{% endblock %}
{% block extra_js %}

{% endblock %}
{% block ol_a_link %}

{% endblock %}

{% block main_content %}
    <div class="row">
        <div class="col-lg-3 col-xs-3">
            <div class="small-box bg-aqua">
                <div class="inner" id="server_count">
                    <p>我的进行中工单</p>
                    <h3>110</h3>
                </div>
                <a href="#">详情</a>

                <div class="icon">
                    <i class="ion ion-gear-a"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xs-3">
            <div class="small-box bg-aqua">
                <div class="inner" id="server_count">
                    <p>我的所有工单</p>
                    <h3>44</h3>
                </div>
                <a href="#">详情</a>
                <div class="icon">
                    <i class="ion ion-gear-a"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xs-3">
            <div class="small-box bg-aqua">
                <div class="inner" id="user_count">
                    <p>待我审批工单</p>
                    <h3>33</h3>
                </div>
                <a href="#">详情</a>
                <div class="icon">
                    <i class="ion ion-person-stalker"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xs-3">
            <div class="small-box bg-aqua">
                <div class="inner" id="user_count">
                    <p>我已审批工单</p>
                    <h3>22</h3>
                </div>
                <a href="#">详情</a>
                <div class="icon">
                    <i class="ion ion-person-stalker"></i>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title">30日工单统计</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="chart">
                        <canvas id="myChart" style="height: 300px;  627px;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block end_js %}
    <script src="/static/AdminLTE/plugins/chartjs/Chart.js"></script>
    <script type="application/javascript">
        $(function () {
            var areaChartData = {
                labels:['1', '2', '3', '4', '5', '6', '7'],    // X轴显示内容，Y轴数据会根据数据线自动生成
                // datasets是一个列表，列表中每个字典都是一条数据线
                datasets: [
                    {
                        label: "申请",
                        //背景颜色
                        fillColor: 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ', 0.4' + ')',
                        //路径颜色
                        strokeColor: 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ', 0.4' + ')',
                        //数据点颜色
                        pointColor: 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ', 0.4' + ')',
                        {#                        fillColor: "rgba(210, 214, 222, 1)",#}
                        {#                        strokeColor: "rgba(210, 214, 222, 1)",#}
                        {#                        pointColor: "rgba(210, 214, 222, 1)",#}
                        {#                        pointStrokeColor: "#d1091b",#}
                        {#                        pointHighlightFill: "#0eff93",#}
                        {#                        pointHighlightStroke: "rgba(220,220,220,1)",#}
                        data: ['1', '53', '10', '15', '20', '25', '33'],
                    },
                    {
                        label: "审批",
                        //背景颜色
                        fillColor: 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ', 0.4' + ')',
                        //路径颜色
                        strokeColor: 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ', 0.4' + ')',
                        //数据点颜色
                        pointColor: 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ', 0.4' + ')',
                        {#                        fillColor: "rgba(210, 214, 222, 1)",#}
                        {#                        strokeColor: "rgba(210, 214, 222, 1)",#}
                        {#                        pointColor: "rgba(210, 214, 222, 1)",#}
                        {#                        pointStrokeColor: "#d16397",#}
                        {#                        pointHighlightFill: "#2d35ff",#}
                        {#                        pointHighlightStroke: "rgba(220,220,220,1)",#}
                        data: ['1', '4', '10', '17', '10', '15', '20'],
                    }

                ]
            };


            var areaChartOptions = {
                //Boolean - If we should show the scale at all
                showScale: true,
                //Boolean - Whether grid lines are shown across the chart
                scaleShowGridLines: false,
                //String - Colour of the grid lines
                scaleGridLineColor: "rgba(0,0,0,.05)",
                //Number - Width of the grid lines
                scaleGridLineWidth: 1,
                //Boolean - Whether to show horizontal lines (except X axis)
                scaleShowHorizontalLines: true,
                //Boolean - Whether to show vertical lines (except Y axis)
                scaleShowVerticalLines: true,
                //Boolean - Whether the line is curved between points
                bezierCurve: true,
                //Number - Tension of the bezier curve between points
                bezierCurveTension: 0.3,
                //Boolean - Whether to show a dot for each point
                pointDot: false,
                //Number - Radius of each point dot in pixels
                pointDotRadius: 4,
                //Number - Pixel width of point dot stroke
                pointDotStrokeWidth: 1,
                //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
                pointHitDetectionRadius: 20,
                //Boolean - Whether to show a stroke for datasets
                datasetStroke: true,
                //Number - Pixel width of dataset stroke
                datasetStrokeWidth: 2,
                //Boolean - Whether to fill the dataset with a color
                datasetFill: true,
                //String - A legend template
                {#      legendTemplate: "<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",#}
                //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
                maintainAspectRatio: true,
                //Boolean - whether to make the chart responsive to window resizing
                responsive: true,
                multiTooltipTemplate: "<%= datasetLabel %> : <%= value %>"
            };

            var ctx = document.getElementById("myChart").getContext("2d");
            var myLineChart = new Chart(ctx);
            var mychartoption = areaChartOptions;
            mychartoption.datasetFill = false;
            myLineChart.Line(areaChartData, mychartoption);
            {#            window.mychart = new Chart(ctx).Line(areaChartData, {#}
            {#                responsive : true,#}
            {#                animation: true,#}
            {#                barValueSpacing : 5,#}
            {#                barDatasetSpacing : 1,#}
            {#                tooltipFillColor: "rgba(0,0,0,0.8)",#}
            {#                multiTooltipTemplate: "<%= datasetLabel %> : <%= value %>"#}
            {#            });#}
            {#            var netifin = document.getElementById("myChart2").getContext("2d");#}
            {#            var linechart_netifin = new Chart(netifin);#}
            {#            var linechartoptions_netifin = areaChartOptions;#}
            {#            linechartoptions_netifin.datasetFill = false;#}
            {#            linechart_netifin.Line(areaChartData2, linechartoptions_netifin);#}
        })
    </script>
{% endblock %}