{% extends "./base.html" %}

{% block title %}行为统计{% endblock %}
{% block pagehead %}

<ol class="breadcrumb">
    <li><a href="{% url 'groups_index' %}"><i class="fa fa-dashboard"></i> 主页</a></li>
    <li class="active">行为观察统计</li>
</ol>
{% endblock %}
{% block content %}
{% load static %}
<div class="callout callout-warning" style="margin-top: 20px;">
    <h3>行为统计</h3>
</div>
<div style="height:600px;width:100%;background-color:#dac2a3">
    <div style="width:100%;height:100px;">
        开始日期：<input type="text" id="test">
        结束日期：<input type="text" id="test2">

        <button class="btn btn-info" onclick="funTypeChange()">&nbsp;查询</button>
    </div>

    <div id="obvchart" style="width:60%;height:400px;margin:auto"></div>
</div>
<!-- jQuery 3 -->
<script src="{% static 'groups/bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'groups/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>

<script src="{% static 'groups/time/laydate/laydate.js' %}"></script>
<link rel="stylesheet" href="{% static 'groups/time/laydate/theme/default/laydate.css' %}">
<!-- iCheck -->
<script src="{% static 'groups/plugins/iCheck/icheck.min.js' %}"></script>
<script src="{% static 'groups/bower_components/echarts.min.js' %}"></script>
<script type="text/javascript">
    //隐患数量趋势图


    $(function () {

        laydate.render({
            elem: '#test'
            , format: 'yyyy-MM-dd' //可任意组合
        });
        laydate.render({
            elem: '#test2'
            , format: 'yyyy-MM-dd' //可任意组合
        });
        observe();

    });
    function funTypeChange() {
        observe();
    }




    function observe() {

        var start = $("#test").val();
        var end = $("#test2").val();

        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/groups/api/observeChart?code=obv&start=" + start + "&end=" + end,    //请求发送
            dataType: "json",        //返回数据形式为json
            success: function (data) {
                console.log(data);
                //请求成功时执行该函数内容，data即为服务器返回的json对象
                var obvChart = echarts.init(document.getElementById("obvchart"));
                var obvnum = [];
                var companyName = [];
                if (data.data.observelist != null) {
                    $.each(data.data.observelist, function (i, item) {


                        obvnum.push(item.number);

                        companyName.push(item.usecomp__partname);

                    })

                    obvChart.setOption(

                        option = {
                            color: ['#00a65a'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },

                            title: {
                                text: '本集团各公司行为观察统计图'
                            },
                            tooltip: {},
                            legend: {
                                data: ['公司行为观察总数']
                            },
                            xAxis: {
                                type: 'category',
                                data: companyName,
                                boundaryGap: [0, 0.01],
                                axisLabel: {
                                    interval: 0,//横轴信息全部显示
                                    rotate: -30,//-30度角倾斜显示
                                }
                            },
                            grid: {
                                y2: 140
                            },
                            yAxis: {},
                            series: [{
                                name: '公司行为观察总数',
                                data: obvnum,
                                type: 'bar'
                            }]

                        }

                    );

                }
            },
            error: function (errorMsg) {
                obvChart.hideLoading();
            }
        });

    }


</script>
    {% endblock %}