puti
/
snd-escloud


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
							<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{admin/common/common}">
<head>
    <title>活动管理活动统计</title>
    <style>
        .tabCon {
            padding-top: 30px;
        }
        .highcharts-credits {
            display: none;
        }
        .shaixuan {
            margin-top: 20px;
        }
        .shaixuan .row {
            margin-bottom: 20px;
        }
    </style>
</head>
<body layout:fragment="content">
<div class="page-container">
    <div id="tab-system" class="HuiTab">
        <div class="tabBar cl">
            <span class="aa current">活动热度</span>
            <span class="aa">阅读数对比</span>
            <span class="aa">报名数对比</span>
            <span class="aa">签到数对比</span>
            <span class="aa">反馈数对比</span>
            <span class="aa">活动趋势对比</span>
        </div>
        <div>
            <div class="tabCon" style="display: block;">
                <!--<p>2018年活动热度对比情况<button class="btn btn-primary radius">pdf导出</button></p>-->
                <div id="container" style="min-width:700px;height:400px"></div>
                <div class="shaixuan">
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2" style="text-align: right"><span>时间维度：</span></label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input  type="text" class="input-text"  id="start_date" name="start_date" style="width:200px;"/> --
                            <input  type="text" class="input-text"  id="end_date" name="end_date" style="width:200px;"/>
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2" style="text-align: right"><span>分类对比：</span></label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <span class="btn btn-defalut radius">全部分类</span>
                            <span class="btn btn-defalut radius">类别1</span>
                            <span class="btn btn-defalut radius">类别2</span>
                            <span class="btn btn-defalut radius">类别3</span>
                            <span class="btn btn-defalut radius">类别4</span>
                        </div>
                    </div>
                    <div class="row cl" style="text-align: center">
                        <span class="btn btn-primary radius">返回</span>
                    </div>
                </div>
            </div>
            <div class="tabCon">
                <div id="container2" style="min-width:700px;height:400px"></div>
                <div class="shaixuan">
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2" style="text-align: right"><span>时间维度：</span></label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input  type="text" class="input-text"  id="start_date" name="start_date" style="width:200px;"/> --
                            <input  type="text" class="input-text"  id="end_date" name="end_date" style="width:200px;"/>
                        </div>
                    </div>
                    <div class="row cl" style="text-align: center">
                        <span class="btn btn-primary radius">返回</span>
                    </div>
                </div>
            </div>
            <div class="tabCon">
                <div id="container3" style="min-width:700px;height:400px"></div>
                <div class="shaixuan">
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2" style="text-align: right"><span>时间维度：</span></label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input  type="text" class="input-text"  id="start_date" name="start_date" style="width:200px;"/> --
                            <input  type="text" class="input-text"  id="end_date" name="end_date" style="width:200px;"/>
                        </div>
                    </div>
                    <div class="row cl" style="text-align: center">
                        <span class="btn btn-primary radius">返回</span>
                    </div>
                </div>
            </div>
            <div class="tabCon">
                <div id="container4" style="min-width:700px;height:400px"></div>
                <div class="shaixuan">
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2" style="text-align: right"><span>时间维度：</span></label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input  type="text" class="input-text"  id="start_date" name="start_date" style="width:200px;"/> --
                            <input  type="text" class="input-text"  id="end_date" name="end_date" style="width:200px;"/>
                        </div>
                    </div>
                    <div class="row cl" style="text-align: center">
                        <span class="btn btn-primary radius">返回</span>
                    </div>
                </div>
            </div>
            <div class="tabCon">
                <div id="container5" style="min-width:700px;height:400px"></div>
                <div class="shaixuan">
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2" style="text-align: right"><span>时间维度：</span></label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input  type="text" class="input-text"  id="start_date" name="start_date" style="width:200px;"/> --
                            <input  type="text" class="input-text"  id="end_date" name="end_date" style="width:200px;"/>
                        </div>
                    </div>
                    <div class="row cl" style="text-align: center">
                        <span class="btn btn-primary radius">返回</span>
                    </div>
                </div>
            </div>
            <div class="tabCon">
                <div id="container6" style="min-width:700px;height:400px"></div>
                <div class="shaixuan">
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2" style="text-align: right"><span>时间维度：</span></label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input  type="text" class="input-text"  id="start_date" name="start_date" style="width:200px;"/> --
                            <input  type="text" class="input-text"  id="end_date" name="end_date" style="width:200px;"/>
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2" style="text-align: right"><span>活动类别：</span></label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <span class="select-box" style="width: 200px;">
                                <select th:id="type" class="select" th:name="type" >
                                    <option value="">全部类别</option>
                                    <option>类别1</option>
                                    <option>类别2</option>
                                    <option>类别3</option>
                                </select>
                            </span>
                        </div>
                    </div>
                    <div class="row cl" style="text-align: center">
                        <span class="btn btn-primary radius">返回</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" th:src="@{/js/lib/highcharts/highcharts.js}"></script>
<script type="text/javascript" th:src="@{/js/lib/highcharts/exporting.js}"></script>
<script>
    $(function () {
        //活动热度对比
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '2018年活动热度对比情况'
            },
            // subtitle: {
            //     text: 'Source: WorldClimate.com'
            // },
            xAxis: {
                categories: [
                    '类别1',
                    '类别2',
                    '类别3',
                    '类别4'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: '发布量',
                data: [49.9, 71.5, 106.4, 129.2]

            },  {
                name: '参与量',
                data: [42.4, 33.2, 34.5, 39.7]

            }]
        });

        //阅读量对比图
        $('#container2').highcharts({
            chart: {
                type: 'column',
                inverted: true
            },
            title: {
                text: '2018年阅读量对比图'
            },
            // subtitle: {
            //     text: 'Source: WorldClimate.com'
            // },
            xAxis: {
                categories: [
                    '活动1',
                    '活动2',
                    '活动3',
                    '活动4',
                    '活动5',
                    '活动6'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: '阅读数',
                data: [49.9, 71.5, 106.4, 129.2, 178.9, 45.8]

            }]
        });

        //报名数对比图
        $('#container3').highcharts({
            chart: {
                type: 'column',
                inverted: true
            },
            title: {
                text: '2018年报名数对比图'
            },
            // subtitle: {
            //     text: 'Source: WorldClimate.com'
            // },
            xAxis: {
                categories: [
                    '活动1',
                    '活动2',
                    '活动3',
                    '活动4',
                    '活动5',
                    '活动6'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: '报名数',
                data: [49.9, 71.5, 106.4, 129.2, 178.9, 45.8]

            }]
        });

        //签到数对比图
        $('#container4').highcharts({
            chart: {
                type: 'column',
                inverted: true
            },
            title: {
                text: '2018年签到数对比图'
            },
            // subtitle: {
            //     text: 'Source: WorldClimate.com'
            // },
            xAxis: {
                categories: [
                    '活动1',
                    '活动2',
                    '活动3',
                    '活动4',
                    '活动5',
                    '活动6'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: '签到数',
                data: [49.9, 71.5, 106.4, 129.2, 178.9, 45.8]

            }]
        });

        //反馈数对比图
        $('#container5').highcharts({
            chart: {
                type: 'column',
                inverted: true
            },
            title: {
                text: '2018年反馈数对比图'
            },
            // subtitle: {
            //     text: 'Source: WorldClimate.com'
            // },
            xAxis: {
                categories: [
                    '活动1',
                    '活动2',
                    '活动3',
                    '活动4',
                    '活动5',
                    '活动6'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: '反馈数',
                data: [49.9, 71.5, 106.4, 129.2, 178.9, 45.8]

            }]
        });

        //活动趋势对比图
        $('#container6').highcharts({
            title: {
                text: '2018年活动趋势对比图',
                x: -20 //center
            },
            // subtitle: {
            //     text: 'Source: WorldClimate.com',
            //     x: -20
            // },
            xAxis: {
                categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                title: {
                    text: ''
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: ''
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: '阅读数',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: '报名数',
                data: [0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: '签到数',
                data: [0.3, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: '反馈数',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 100, 10.3, 6.6, 4.8]
            }]
        });
        // $("#tab-system").Huitab({
        //     index:0
        // });

        // tab切换
        tabChange(".tabBar",".tabCon");

        laydate.render({
            elem: '#start_date', //指定元素
            min: 0
        });
        laydate.render({
            elem: '#end_date', //指定元素
            min: 0
        });
    })
</script>
</body>
</html>