|
@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>
|
<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="range" name="range">
|
<option value="y">年度</option>
|
<option value="m">月度</option>
|
</select>
|
<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>
|
|
<#button name="搜索" icon="fa-search" clickFun="BatterData()"/>
|
</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">
|
<select style="width: 300px" class="form-control" id="range1" name="range1" onchange="getStoreByCity(this)">
|
<option value="y">年度</option>
|
<option value="m">月度</option>
|
<option value="d">日度</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="con1" placeholder="请输入年份或者月份" type="text">
|
</div>
|
</div>
|
|
<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>
|
|
|
</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="site" name="site">
|
<option value="">全球</option>
|
@for(obj in sites){
|
<option style="width: 300px" value="${obj.id}">${obj.name}</option>
|
@}
|
</select>
|
</div>
|
</div>
|
|
<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>
|
<#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">
|
<div class="form-group">
|
<span id="totalNumber3">全球场次总数：</span>
|
</div>
|
</div>
|
</br>
|
<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="yearOrMonth3" name="cCode" >
|
<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="con3" placeholder="请输入年份或者月份" type="text">
|
</div>
|
</div>
|
|
<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="cCode3" name="cCode" onchange="getStoreByCity3(this)">
|
<option value="">全球</option>
|
@for(obj in list){
|
<option style="width: 300px" value="${obj.cityCode}">${obj.city}</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="site3" name="site">
|
<option value="">全球</option>
|
@for(obj in sites){
|
<option style="width: 300px" value="${obj.id}">${obj.name}</option>
|
@}
|
</select>
|
</div>
|
</div>
|
<#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">
|
<div class="form-group">
|
<span id="totalNumber4">全球场次总数：<span id="num" style="color:red"></span>场
|
</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="yearOrMonth4" name="cCode">
|
<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>
|
|
<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="getStoreByCity4(this)">
|
<option value="">全球</option>
|
@for(obj in list){
|
<option style="width: 300px" value="${obj.cityCode}">${obj.city}</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="site4" name="site">
|
<option value="">全球</option>
|
@for(obj in sites){
|
<option style="width: 300px" value="${obj.id}">${obj.name}</option>
|
@}
|
</select>
|
</div>
|
</div>
|
<#button name="搜索" icon="fa-search" clickFun="TSite1.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;
|
years = resp.years;
|
if (years.length == 0){
|
years=[2020,2021,2022,2023]
|
}
|
for (let i = 0; i <d1.length; i++) {
|
data1.push(d1[i].count);
|
}
|
if (d1.length==0){
|
data1= [0,0,0,0]
|
}
|
option4 = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
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("range",$("#range1").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 yDataList= resp.yDataList;
|
// 场次
|
yD=[];
|
mD=[];
|
// 时长
|
yT = [];
|
mT = [];
|
yearX=[];
|
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 <resp.yearList.length ; i++) {
|
yearX.push(resp.yearList[i])
|
}
|
if(resp.yearList.length==0){
|
yearX=[2019,2020,2021,2023]
|
}
|
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'
|
},
|
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'
|
},
|
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
|
}
|
]
|
};
|
var myChart4 = echarts.init(document.getElementById('number'));
|
myChart4.setOption(option);
|
var myChart5 = echarts.init(document.getElementById('time'));
|
myChart5.setOption(option2);
|
});
|
ajax.set("range",$("#range").val());
|
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();
|
// 跨城赛获取全球场次总数
|
var ajax = new $ax(Feng.ctxPath + "/gameData/cityGame", function(data){
|
var totalNumber3= document.getElementById("totalNumber3");
|
totalNumber3.innerText = "全球场次总数:"+data.totalNum;
|
});
|
ajax.start();
|
// 获取90°准度赛全球场次总数
|
var ajax4 = new $ax(Feng.ctxPath + "/gameData/cityGameOne", function(data){
|
var totalNumber4= document.getElementById("totalNumber4");
|
$("#num").text(data.totalNum)
|
});
|
ajax4.start();
|
// 基于准备好的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){
|
if (cityCode==""){
|
var content='<option value="">全球</option>';
|
}else{
|
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 getStoreByCity3(e) {
|
var cityCode=$(e).val();
|
var ajax = new $ax(Feng.ctxPath + "/tSite/getSiteByCity", function(data){
|
if(data!=null){
|
if (cityCode==""){
|
var content='<option value="">全球</option>';
|
}else{
|
var content='<option value="">全部</option>';
|
}
|
$.each(data, function(k,v) {
|
content += "<option value='"+v.id+"'>"+v.name+"</option>";
|
});
|
$("#site3").empty().append(content);
|
}
|
});
|
ajax.set("oneId",cityCode);
|
ajax.start();
|
}
|
function getStoreByCity4(e) {
|
var cityCode=$(e).val();
|
var ajax = new $ax(Feng.ctxPath + "/tSite/getSiteByCity", function(data){
|
if(data!=null){
|
if (cityCode==""){
|
var content='<option value="">全球</option>';
|
}else{
|
var content='<option value="">全部</option>';
|
}
|
$.each(data, function(k,v) {
|
content += "<option value='"+v.id+"'>"+v.name+"</option>";
|
});
|
$("#site4").empty().append(content);
|
}
|
});
|
ajax.set("oneId",cityCode);
|
ajax.start();
|
}
|
</script>
|
|
@}
|
