@extends('admin/site/side_layout')
@section('right')
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right"></span>
                    <h5>已发布内容</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{{ $total_content }}</h1>
                    <div class="stat-percent font-bold text-success">
                    </div>
                    <small></small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right"></span>
                    <h5>网页浏览量</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{{$total_pv_data['pv']}}</h1>
                    <div class="stat-percent font-bold text-info">
                    </div>
                    <small></small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right"></span>
                    <h5>访客数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{{$total_pv_data['uv']}}</h1>
                    <div class="stat-percent font-bold text-navy">
                    </div>
                    <small></small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-danger pull-right"></span>
                    <h5>平均在线时长</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{{$total_pv_data['avg_duration']}}</h1>
                    <div class="stat-percent font-bold text-danger">
                    </div>
                    <small></small>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="row">
                        <div class="col-sm-6">
                            <h5>流量趋势</h5>
                        </div>

                        <div class="col-sm-6">
                            <h5>行为趋势</h5>
                        </div>
                    </div>
                    {{--<h5>流量趋势</h5><h5>行为趋势</h5>--}}
                    {{--<div class="pull-right">--}}
                        {{--<div class="btn-group">--}}
                            {{--<button type="button" class="btn btn-xs btn-white active">周</button>--}}
                            {{--<button type="button" class="btn btn-xs btn-white">月</button>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                </div>
                <div class="ibox-content">

                    <div class="row">
                        <div class="col-sm-6">
                            <div id="main" style="width: 100%;height: 300px;"></div>

                            <script>
                                var charts = [];
                                window.onresize = function () {
                                    for (var i = 0; i < charts.length; i++) {
                                        charts[i].resize();
                                    }
                                }

                            </script>
                            <script src="{{asset('js/plugins/echarts/echarts.min.js')}}"></script>
                            <script type="text/javascript">
                                var myChart = echarts.init(document.getElementById('main'));
                                //app.title = '折柱混合';

                                var xAxis_data =@json($pv_data['xAxis']);
                                var pv =@json($pv_data['pv']);
                                var uv =@json($pv_data['uv']);
                                var duration =@json($pv_data['duration']);
                                var bounces =@json($pv_data['bounces']);

                                var option = {
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type: 'cross',
                                            crossStyle: {
                                                color: '#999'
                                            }
                                        }
                                    },
                                    toolbox: {
                                        feature: {
                                            dataView: {show: true, readOnly: false},
                                            magicType: {show: true, type: ['line', 'bar']},
                                            restore: {show: true},
                                            saveAsImage: {show: true}
                                        }
                                    },
                                    legend: {
                                        data: ['点击量', '访客数']
                                    },
                                    xAxis: [
                                        {
                                            type: 'category',
                                            data: xAxis_data,
                                            axisPointer: {
                                                type: 'shadow'
                                            },
                                            splitLine: {
                                                show: false
                                            }
                                        }
                                    ],
                                    yAxis: [
                                        {
                                            type: 'value',
                                            name: '',
                                            min: 0,
                                            axisLabel: {
                                                formatter: '{value}'
                                            },
                                            axisLine: {
                                                show: false //隐藏Y轴
                                            }
                                        }
                                    ],
                                    series: [
                                        {
                                            name: '点击量',
                                            type: 'bar',
                                            data: pv
                                        },
                                        {
                                            name: '访客数',
                                            type: 'line',
                                            data: uv
                                        }
                                    ]
                                };
                                myChart.setOption(option);
                                charts.push(myChart);

                            </script>
                        </div>
                        <div class="col-sm-6">
                            <div id="main2" style="width: 100%;height:300px;"></div>
                            {{--<div class="flot-chart">--}}
                            {{--<div class="flot-chart-content" id="flot-dashboard-chart"></div>--}}
                            {{--</div>--}}
                            <script type="text/javascript">
                                var myChart = echarts.init(document.getElementById('main2'));
                                //app.title = '折柱混合';

                                var option = {
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type: 'cross',
                                            crossStyle: {
                                                color: '#999'
                                            }
                                        }
                                    },
                                    toolbox: {
                                        feature: {
                                            dataView: {show: true, readOnly: false},
                                            magicType: {show: true, type: ['line', 'bar']},
                                            restore: {show: true},
                                            saveAsImage: {show: true}
                                        }
                                    },
                                    legend: {
                                        data: ['平均在线时长', '跳出率']
                                    },
                                    xAxis: [
                                        {
                                            type: 'category',
                                            data: xAxis_data,
                                            axisPointer: {
                                                type: 'shadow'
                                            },
                                            splitLine: {
                                                show: false
                                            }
                                        }

                                    ],
                                    yAxis: [
                                        {
                                            type: 'value',
                                            name: '',
                                            min: 0,
                                            axisLabel: {
                                                formatter: '{value}'
                                            },
                                            axisLine: {
                                                show: false //隐藏Y轴
                                            }
                                        },
                                        {
                                            type: 'value',
                                            name: '',
                                            min: 0,
                                            max: 200,
                                            axisLabel: {//数字
                                                formatter: '{value}',
                                                show:false
                                            },
                                            axisTick:{//刻度线
                                                show:false
                                            },
                                            splitLine: {//横线
                                                show: false
                                            },
                                            axisLine: {
                                                show: false //隐藏Y轴
                                            }
                                        }
                                    ],
                                    series: [
                                        {
                                            name: '平均在线时长',
                                            type: 'bar',
                                            data: duration
                                        },
                                        {
                                            name: '跳出率',
                                            type: 'line',
                                            yAxisIndex: 1,
                                            data: bounces
                                        }
                                    ]
                                };
                                myChart.setOption(option);
                                charts.push(myChart);

                            </script>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="row">


        <div class="col-sm-12">

            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>网站入口TOP10</h5>
                            <div class="ibox-tools">
                            </div>
                        </div>
                        <div class="ibox-content">
                            <table class="table table-hover no-margins">
                                <thead>
                                <tr>
                                    <th>URL</th>
                                    <th><a style="font-size: 12px;font-weight: normal;color: black"
                                           onclick="units.more()">更多...</a></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($top_url as $key=>$value)
                                    @if($key>=10) @break; @endif
                                    <tr>
                                        <td>{{$value['url']}}</td>
                                        <td class="text-navy"> {{$value['pv']}}</td>
                                    </tr>
                                @endforeach

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>来源网站TOP10</h5>
                            <div class="ibox-tools">
                            </div>
                        </div>
                        <div class="ibox-content">
                            <table class="table table-hover no-margins">
                                <thead>
                                <tr>
                                    <th>来源</th>
                                    <th><a style="font-size: 12px;font-weight: normal;color: black"
                                           onclick="units.sourceMore()">更多...</a></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($top_host as $key=>$value)
                                    @if($key>=10) @break; @endif
                                    <tr>
                                        <td>{{$value['ref_host']?$value['ref_host']:'直接访问'}}</td>
                                        <td class="text-navy"> {{$value['pv']}}</td>
                                    </tr>
                                @endforeach

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>区域统计</h5>
                        </div>
                        <div class="ibox-content">

                            <div class="row">
                                <div class="col-sm-8">
                                    <div id="main3" style="width: 100%;height:300px;"></div>
                                    <script type="text/javascript">
                                        var myChart = echarts.init(document.getElementById('main3'));

                                        var country =@json($country_data['country']);
                                        var pv =@json($country_data['pv']);
                                        var uv =@json($country_data['uv']);
                                        var duration =@json($country_data['duration']);
                                        var bounces =@json($country_data['bounces']);
                                        var option = {
                                            tooltip: {
                                                trigger: 'axis',
                                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                                }
                                            },
                                            legend: {
                                                data: ['访问量', '访客数', '平均在线时长', '跳出率']
                                            },
                                            grid: {
                                                left: '3%',
                                                right: '4%',
                                                bottom: '3%',
                                                containLabel: true
                                            },
                                            xAxis: {
                                                type: 'value'
                                            },
                                            yAxis: {
                                                type: 'category',
                                                data: country
                                            },
                                            series: [
                                                {
                                                    name: '访问量',
                                                    type: 'bar',
                                                    stack: '总量',
                                                    label: {
                                                        normal: {
                                                            show: true,
                                                            position: 'inside'
                                                        }
                                                    },
                                                    data: pv
                                                },
                                                {
                                                    name: '访客数',
                                                    type: 'bar',
                                                    stack: '总量',
                                                    label: {
                                                        normal: {
                                                            show: true,
                                                            position: 'inside'
                                                        }
                                                    },
                                                    data: uv
                                                },
                                                {
                                                    name: '平均在线时长',
                                                    type: 'bar',
                                                    stack: '总量',
                                                    label: {
                                                        normal: {
                                                            show: true,
                                                            position: 'inside'
                                                        }
                                                    },
                                                    data: duration
                                                },
                                                {
                                                    name: '跳出率',
                                                    type: 'bar',
                                                    stack: '总量',
                                                    label: {
                                                        normal: {
                                                            show: true,
                                                            position: 'inside'
                                                        }
                                                    },
                                                    data: bounces
                                                }
                                            ]
                                        };
                                        myChart.setOption(option);
                                        charts.push(myChart);

                                    </script>
                                </div>


                                <div class="col-sm-4">
                                    <div id="main4" style="width: 100%;height:300px;"></div>
                                    <script type="text/javascript">
                                        var myChart = echarts.init(document.getElementById('main4'));
                                        var pie_data = @json($country_data['pie']);
                                        var pie_country =@json($country_data['pie_country']);
                                        var option = {
                                            tooltip: {
                                                trigger: 'item',
                                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                                            },
                                            legend: {
                                                orient: 'vertical',
                                                left: 'left',
                                                data: pie_country
                                            },
                                            series: [
                                                {
                                                    name: '访问来源',
                                                    type: 'pie',
                                                    radius: '55%',
                                                    center: ['50%', '60%'],
                                                    data: pie_data,
                                                    itemStyle: {
                                                        emphasis: {
                                                            shadowBlur: 10,
                                                            shadowOffsetX: 0,
                                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                        }
                                                    }
                                                }
                                            ]
                                        };


                                        myChart.setOption(option);
                                        charts.push(myChart);
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('footer_extend')
    <script>

        var units = {
            more: function () {

                var str = '<div class="ibox float-e-margins">\n' +
                    '                        <div class="ibox-title">\n' +
                    '                            <h5>网站入口TOP10</h5>\n' +
                    '                            <div class="ibox-tools">\n' +
                    '                            </div>\n' +
                    '                        </div>\n' +
                    '                        <div class="ibox-content">\n' +
                    '                            <table class="table table-hover no-margins">\n' +
                    '                                <thead>\n' +
                    '                                <tr>\n' +
                    '                                    <th>URL</th>\n' +
                    '                                    <th></th>\n' +
                    '                                </tr>\n' +
                    '                                </thead>\n' +
                    '                                <tbody>\n' +
                    '                                @foreach($top_url as $key=>$value)' +
                    '                                    <tr>\n' +
                    '                                        <td>{{$value['url']}}</td>\n' +
                    '                                        <td class="text-navy"> {{$value['pv']}}</td>\n' +
                    '                                    </tr>\n' +
                    '                                @endforeach' +
                    '\n' +
                    '                                </tbody>\n' +
                    '                            </table>\n' +
                    '                        </div>\n' +
                    '                    </div>';
                layer.open({
                    type: 1,
                    content: str,
                    area: ['60%', '100%'],
                    title: '网站入口'
                });
            },
            sourceMore: function () {
                var str = '    <div class="ibox float-e-margins">\n' +
                    '                        <div class="ibox-title">\n' +
                    '                            <h5>来源网站TOP10</h5>\n' +
                    '                            <div class="ibox-tools">\n' +
                    '                            </div>\n' +
                    '                        </div>\n' +
                    '                        <div class="ibox-content">\n' +
                    '                            <table class="table table-hover no-margins">\n' +
                    '                                <thead>\n' +
                    '                                <tr>\n' +
                    '                                    <th>来源</th>\n' +
                    '                                    <th></th>\n' +
                    '                                </tr>\n' +
                    '                                </thead>\n' +
                    '                                <tbody>\n' +
                    '                                @foreach($top_host as $value)' +
                    '                                    @if($key>=10) @break; @endif' +
                    '                                    <tr>\n' +
                    '                                        <td>{{$value['ref_host']?$value['ref_host']:'直接访问'}}</td>\n' +
                    '                                        <td class="text-navy"> {{$value['pv']}}</td>\n' +
                    '                                    </tr>\n' +
                    '                                @endforeach' +
                    '\n' +
                    '                                </tbody>\n' +
                    '                            </table>\n' +
                    '                        </div>\n' +
                    '                    </div>';

                layer.open({
                    type: 1,
                    content: str,
                    area: ['60%', '100%'],
                    title: '来源网站详情'
                });
            }
        };

    </script>
@endsection