@layout("/common/_container.html"){
<link href="${ctxPath}/static/css/plugins/switchery/switchery.css" rel="stylesheet">
<style>
    .table1{
        display: inline;
        width: 25%;
        float:left;
        text-align:center;
        border-collapse:collapse;
        font-size: 18px;
    }
    .table2{
        display: inline;
        width: 50%;
        float:left;
        text-align:center;
        border-collapse:collapse;
        font-size: 18px;
    }
    .table3{
        display: inline;
        width: 50%;
        float:left;
        text-align:center;
        border-collapse:collapse;
        font-size: 18px;
    }
    .table1:hover{
        background-color: rgba(255,0,0,.3);
    }
    .newWidth, .single-line{
        max-width:150px !important;display: initial !important;
    }
    .companyValueClass td:first-child {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal">
            <div class="row">
                    <div style="height: 50px;box-sizing: border-box;background:#f3f3f4;line-height: 50px;border:1px solid;margin-bottom: 20px;width: auto">
                        <div id="div1" class='table1' onclick="getContent(1)" style="border-right: 1px solid #333;background-color: rgb(26, 179, 148);color: white;">激战球场</div>
                        <div id="div2" class='table1' onclick="getContent(2)" style="border-right: 1px solid #333;">SUTU智慧球门</div>
                        <div id="div3" class='table1' onclick="getContent(3)" style="border-right: 1px solid #333;">社区世界杯跨城赛</div>
                        <div id="div4" class='table1' onclick="getContent(4)" style="border-right: 1px solid #333;">社区世界杯90°准度赛</div>
                    </div>
                    <div class="row" id="content1" style="margin-left: 100px;">
                        <div class="col-sm-11">
                            <div class="form-group" style="display: flex;margin-left: 150px" >
                                <span id="totalNumber">全球场次总数：</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span id="totalTime">全球比赛时长：</span>
                            </div>
                        </div>
                        </br>
                        <div class="col-sm-11">
                            <div class="form-group" style="display: flex;margin-left: -150px">
                                <label class="col-sm-3 control-label">*所属门店：</label>
                                <select style="width: 300px" class="form-control" id="stores" name="stores">
                                    <option value="">全球</option>
                                    @for(obj in stores){
                                    <option style="width: 300px" value="${obj.id}">${obj.name}</option>
                                    @}
                                </select>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <#button name="搜索" icon="fa-search" clickFun="Search()"/>
                            </div>
                            <div class="col-sm-10">
                                <div class="row" id="t1" style="margin-left: 100px;">

                                    <div id="number" style="width: 1280px;height:500px;"></div>
                                    <div id="time" style="width: 1280px;height:500px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="content2" style="margin-left: 100px;">
                        <div class="col-sm-11">
                            <div class="form-group">
                                <div class="col-sm-10">
                                    </br>
                                    </br>
                                    </br>
                                    <h2>总场次统计</h2>
                                    <div id="gameTotal" style="width: 1500px;height:500px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-11" style="display: flex">
                            <div class="form-group" >
                                <label class="col-sm-3 control-label">*筛选内容：</label>
                                <div class="col-sm-9" style="display: flex;">
                                    <input style="width: 300px" class="form-control" id="con1"  placeholder="请输入年份或者月份" type="text">
                                </div>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="form-group">
                                <label class="col-sm-3 control-label">*筛选城市：</label>
                                <div class="col-sm-9">
                                    <select style="width: 300px" class="form-control" id="cCode" name="cCode" onchange="getStoreByCity(this)">
                                        <option value="">全球</option>
                                        @for(obj in list){
                                        <option style="width: 300px" value="${obj.cityCode}">${obj.city}</option>
                                        @}
                                    </select>
                                </div>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="form-group" >
                                <label class="col-sm-3 control-label">*筛选场地：</label>
                                <div class="col-sm-9">
                                    <select style="width: 300px" class="form-control" id="site" name="site">
                                        <option value="">全球</option>
                                        @for(obj in sites){
                                        <option style="width: 300px" value="${obj.id}">${obj.name}</option>
                                        @}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-11" style="display: flex">
                        <div class="form-group" >
                            <label class="col-sm-3 control-label">*游戏类型：</label>
                            <div class="col-sm-9">
                                <select style="width: 300px" class="form-control" id="games" name="site">
                                    @for(obj in games){
                                    <option style="width: 300px" value="${obj.id}">${obj.name}</option>
                                    @}
                                </select>
                            </div>
                        </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<#button name="搜索" icon="fa-search" clickFun="Search1()"/>
                        </div>
                        <div class="col-sm-10">
                            <div class="row" id="t2" style="margin-left: 100px;">
                                <div id="number1" style="width: 1280px;height:500px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="content3" style="margin-left: 100px;">
                        <div class="col-sm-11" style="display: flex">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">*筛选城市：</label>
                                <div class="col-sm-9">
                                    <select style="width: 200px" class="form-control" id="yearOrMonth3" name="cCode" onchange="getStoreByCity1(this)">
                                        <option value="y">年度</option>
                                        <option value="m">月度</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" >
                                <label class="col-sm-3 control-label">*筛选内容：</label>
                                <div class="col-sm-9" style="display: flex;">
                                    <input style="width: 200px" class="form-control" id="con3"  placeholder="请输入年份或者月份" type="text">
                                </div>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="form-group">
                                <label class="col-sm-3 control-label">*筛选城市：</label>
                                <div class="col-sm-9">
                                    <select style="width: 200px" class="form-control" id="cCode3" name="cCode" onchange="getStoreByCity1(this)">
                                        <option value="">全球</option>
                                        @for(obj in list){
                                        <option style="width: 200px" value="${obj.cityCode}">${obj.city}</option>
                                        @}
                                    </select>
                                </div>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="form-group" >
                                <label class="col-sm-3 control-label">*筛选场地：</label>
                                <div class="col-sm-9">
                                    <select style="width: 200px" class="form-control" id="site3" name="site">
                                        <option value="">全球</option>
                                        @for(obj in sites){
                                        <option style="width: 200px" value="${obj.id}">${obj.name}</option>
                                        @}
                                    </select>
                                </div>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<#button name="搜索" icon="fa-search" clickFun="TSite.search3()"/>
                        </div>
                        <#table id="TSiteTable"/>
                    </div>
                <div class="row" id="content4" style="margin-left: 100px;">
                    <div class="col-sm-11" style="display: flex">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">*筛选城市：</label>
                            <div class="col-sm-9">
                                <select style="width: 200px" class="form-control" id="yearOrMonth4" name="cCode" onchange="getStoreByCity1(this)">
                                    <option value="y">年度</option>
                                    <option value="m">月度</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" >
                            <label class="col-sm-3 control-label">*筛选内容：</label>
                            <div class="col-sm-9" style="display: flex;">
                                <input style="width: 300px" class="form-control" id="con4"  placeholder="请输入年份或者月份" type="text">
                            </div>
                        </div>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <div class="form-group">
                            <label class="col-sm-3 control-label">*筛选城市：</label>
                            <div class="col-sm-9">
                                <select style="width: 300px" class="form-control" id="cCode4" name="cCode" onchange="getStoreByCity1(this)">
                                    <option value="">全球</option>
                                    @for(obj in list){
                                    <option style="width: 300px" value="${obj.cityCode}">${obj.city}</option>
                                    @}
                                </select>
                            </div>
                        </div>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <div class="form-group" >
                            <label class="col-sm-3 control-label">*筛选场地：</label>
                            <div class="col-sm-9">
                                <select style="width: 300px" class="form-control" id="site4" name="site">
                                    <option value="">全球</option>
                                    @for(obj in sites){
                                    <option style="width: 300px" value="${obj.id}">${obj.name}</option>
                                    @}
                                </select>
                            </div>
                        </div>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<#button name="搜索" icon="fa-search" clickFun="TCompetition.search4()"/>
                    </div>
                    <#table id="TSiteTable1"/>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/modular/system/dataStatistics/echarts.min.js"></script>
<script src="${ctxPath}/modular/system/gameData/gameData.js"></script>
<script src="${ctxPath}/static/js/plugins/switchery/switchery.js"></script>
<script>
    var ans = [];
    var weekX = [];
    var monthX = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
    var yearX = [];
    var timeX = [];
    var dataX = [];
    // 创建一个日期对象
    var currentDate = new Date();
    // 获取当前日期的号数
    let currentDay = currentDate.getDate();
    // 循环添加号数到数组
    for (let i = 0; i < 7; i++) {
        dataX.push(currentDay - 6+i);
    }
    // 获取当前月份
    var currentMonth = currentDate.getMonth();
    // 获取当前年份
    var currentYear = currentDate.getFullYear();
    // 计算指定年份和月份的天数
    function getDaysInMonth(year, month) {
        // month 参数范围是 0-11，所以需要加 1
        return new Date(year, month + 1, 0).getDate();
    }
    // 获取当前月份的天数
    var daysInMonth = getDaysInMonth(currentYear, currentMonth);
    // 将天数按字符串格式添加到 timeX 数组中
    for (var i = 1; i <= daysInMonth; i++) {
        timeX.push(String(i));
    }
    laydate.render({
        elem: '#beginTime'
        , trigger: 'click'
        , range: true
    });
    // 激战球场
    var yD=[];
    var mD=[];
    var yT=[];
    var mT=[];
    // SUTU智慧球场X轴数据
    var SUTU=[];
    // SUTU智慧球场数据
    var SUTUData1=[];
    var years=[];
    var data1=[];
    var data2=[];
    var monthOrDays=[];
    function Search1() {
        var ajax = new $ax(Feng.ctxPath + "/gameData/listSUTU1", function(resp){
            data2=[];
            data1=[];
            var d1 = resp.data1;
            var d2 = resp.data2;
            years = resp.years;
            monthOrDays = resp.monthOrDays;
            for (let i = 0; i <d1.length; i++) {
                data1.push(d1[i].count);
            }
            for (let i = 0; i <d2.length; i++) {
                data2.push(d2[i].count);
            }
            console.log("看看data1")
            console.log(data1)
            console.log("看看data2")
            console.log(data2)
            option4  = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['年度', '月度'],
                    icon: 'stack',
                    selectedMode: 'single', // 单选
                    selected: {
                        年度: true,
                        月度: false,

                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: years
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '年度',
                        type: 'line',
                        stack: 'Total',
                        data: data1
                    },
                    {
                        name: '月度',
                        type: 'line',
                        stack: 'Total',
                        data:data2
                    }
                ]
            };
            var myChart4  = echarts.init(document.getElementById('number1'));
            myChart4.setOption(option4);
        })
        ajax.set("gameId",$("#games").val())
        ajax.set("time",$("#con1").val())
        ajax.set("spaceId",$("#site").val())
        ajax.set("cityCode",$("#cCode").val())
        ajax.start();
        var myChart4  = echarts.init(document.getElementById('number1'));
        var options = myChart4.getOption()
        options.series[0].data = data1
        options.series[1].data = data2
    };
    function BatterData() {
        var ajax = new $ax(Feng.ctxPath + "/gameData/list", function(resp){
            var mDataList= resp.mDataList;
            var yDataList= resp.yDataList;
            // 场次
            yD=[];
            mD=[];
            // 时长
            yT = [];
            mT = [];
            for (let i = 0; i <yDataList.length ; i++) {

                yD.push(yDataList[i].total_num);
                yT.push(yDataList[i].batter_time);
            }
            for (let i = 0; i <mDataList.length ; i++) {
                mD.push(mDataList[i].total_num);
                mT.push(mDataList[i].batter_time);
            }
            for (let i = 0; i <resp.yearList.length ; i++) {
                yearX.push(resp.yearList[i])
            }
            var totalNumber= resp.totalNumber;
            var totalTime= resp.totalTime;
           var tN = document.getElementById("totalNumber");
           var tT = document.getElementById("totalTime");
           tN.innerText = "全球场次总数："+totalNumber+"场"
           tT.innerText = "全球比赛时长："+totalTime+"小时"
            option  = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['年度', '月度'],
                    icon: 'stack',
                    selectedMode: 'single', // 单选
                    selected: {
                        年度: true,
                        月度: false,

                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: yearX
                },
                yAxis: {
                    minInterval: 1,
                    axisLabel : {
                        formatter : '{value}'
                    },
                    name: "场次",
                    type: 'value'
                },
                series: [
                    {
                        name: '年度',
                        type: 'line',
                        stack: 'Total',
                        data: yD
                    },
                    {
                        name: '月度',
                        type: 'line',
                        stack: 'Total',
                        data: mD
                    }
                ]
            };
            option2  = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['年度', '月度'],
                    icon: 'stack',
                    selectedMode: 'single', // 单选
                    selected: {
                        年度: true,
                        月度: false,

                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: yearX
                },
                yAxis: {
                    name: "时长(小时)",
                    type: 'value'
                },
                series: [
                    {
                        name: '年度',
                        type: 'line',
                        stack: 'Total',
                        data: yT
                    },
                    {
                        name: '月度',
                        type: 'line',
                        stack: 'Total',
                        data:mT
                    }
                ]
            };
        });
        ajax.set("storeId",$("#stores").val());
        ajax.start();
    }
    function SUTUData() {
        var ajax = new $ax(Feng.ctxPath + "/gameData/listSUTU", function(resp){
            for (let i = 0; i <resp.games.length ; i++) {
                SUTU.push(resp.games[i])
            }
            for (let i = 0; i <resp.data1.length ; i++) {
                SUTUData1.push(resp.data1[i].count);
            }
            console.log("看看")
            console.log(SUTUData)
            option3 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: SUTU
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: SUTUData1,
                        type: 'bar'
                    }
                ]
            };

        });
        ajax.start();
    }
    $(function(){
        getContent(1);
        BatterData();
        SUTUData();
        Search1();

        // 基于准备好的dom，初始化echarts实例
        var myChart  = echarts.init(document.getElementById('number'));

        myChart.on('legendselectchanged', obj => {
            var options = myChart.getOption()
            options.series[0].data = yD;
            options.series[1].data = mD;
            //这里是选择切换什么样的x轴，那么他会进行对Y值的切换
            if (obj.name == '年度') {
                options.xAxis[0].data = yearX
            } else if (obj.name == '月度') {
                options.xAxis[0].data = monthX
            }
            myChart.setOption(options, true)
        });
        var myChart2  = echarts.init(document.getElementById('time'));
        myChart2.on('legendselectchanged', obj => {
            var options = myChart2.getOption();
            options.series[0].data = yT;
            options.series[1].data = mT;
            //这里是选择切换什么样的x轴，那么他会进行对Y值的切换
            if (obj.name == '年度') {
                options.xAxis[0].data = yearX
            } else if (obj.name == '月度') {
                options.xAxis[0].data = monthX
            }
            myChart2.setOption(options, true)
        });
        var myChart4  = echarts.init(document.getElementById('number1'));
        myChart4.on('legendselectchanged', obj => {
            var options = myChart4.getOption()
            //这里是选择切换什么样的x轴，那么他会进行对Y值的切换
            if (obj.name == '年度') {
                options.xAxis[0].data = years
            } else if (obj.name == '月度') {
                options.xAxis[0].data = monthOrDays
            }
            myChart4.setOption(options, true)
        });
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart2.setOption(option2);


        var myChart3  = echarts.init(document.getElementById('gameTotal'));
        myChart3.setOption(option3);
    });
    function getContent(type){
        //设置点击字体颜色效果
        for(var i=1;i<5;i++){
            document.getElementById("div"+i).style.color="#888888";//
            document.getElementById("div"+i).style.backgroundColor ="";
            $("#content"+i).hide();
        }
        //设置点击背景颜色效果
        document.getElementById("div"+type).style.color="white";//
        document.getElementById("div"+type).style.backgroundColor ="rgb(26, 179, 148)";
        $("#type").val(type);
        $("#content"+type).show();
        if(type!=3){
            $("#ensure").hide();
            $("#nextB").show();
        }else{
            $("#ensure").show();
            $("#nextB").hide();
        }
    }

    function getStoreByCity(e) {
        var cityCode=$(e).val();
        var ajax = new $ax(Feng.ctxPath + "/tSite/getSiteByCity", function(data){
            if(data!=null){
                var content='<option value="">全球</option>';
                $.each(data, function(k,v) {
                    content += "<option value='"+v.id+"'>"+v.name+"</option>";
                });
                $("#site").empty().append(content);
            }
        });
        ajax.set("oneId",cityCode);
        ajax.start();
    }
    function getStoreByCity1(e) {
        var cityCode=$(e).val();
        var ajax = new $ax(Feng.ctxPath + "/tSite/getSiteByCity", function(data){
            if(data!=null){
                var content='<option value="">全球</option>';
                $.each(data, function(k,v) {
                    content += "<option value='"+v.id+"'>"+v.name+"</option>";
                });
                $("#site1").empty().append(content);
            }
        });
        ajax.set("oneId",cityCode);
        ajax.start();
    }
</script>

@}