702 lines
24 KiB
HTML
702 lines
24 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-cn">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>{$screeninfo.title|default="比翼飞行网"}</title>
|
||
|
|
<link href="https://cdn.bootcdn.net/ajax/libs/layui/2.8.17/css/layui.min.css" rel="stylesheet">
|
||
|
|
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css" rel="stylesheet">
|
||
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
|
||
|
|
<link href="//at.alicdn.com/t/c/font_4379154_00ky9nxoo3aw.css" rel="stylesheet">
|
||
|
|
<link href="__CDN__/assets/css/live.css" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
.group .content::after {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="app" style="background: url({$screeninfo.backound_img|default="" |cdnurl}) no-repeat 0/100% 100%">
|
||
|
|
|
||
|
|
<header style="height: 116px;">
|
||
|
|
<!-- <div class="header_l">
|
||
|
|
<img class="icon1" src="./assets/imgs/icon1.png" alt="">
|
||
|
|
<img class="icon2" src="./assets/imgs/icon2.png" alt="">
|
||
|
|
</div>
|
||
|
|
<img class="title" src="./assets/imgs/header.png" alt="">
|
||
|
|
<div class="header_r">
|
||
|
|
<img class="icon3" src="./assets/imgs/icon3.png" alt="">
|
||
|
|
</div> -->
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
|
||
|
|
<!-- navigation -->
|
||
|
|
<div class="navigation">
|
||
|
|
<div class="menuList">
|
||
|
|
<div class="menuItem animate__animated animate__bounceInLeft">排位赛</div>
|
||
|
|
<div class="menuItem animate__animated animate__bounceInDown">32进16</div>
|
||
|
|
<div class="menuItem animate__animated animate__bounceInRight">16进8</div>
|
||
|
|
<div class="menuItem animate__animated animate__bounceInUp">8进4</div>
|
||
|
|
<div class="menuItem animate__animated animate__bounceInUp">决赛</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- course -->
|
||
|
|
<div class="card_container card_container_course" style="display: none;">
|
||
|
|
<div class="course card animate__animated">
|
||
|
|
<div class="tools">
|
||
|
|
<div class="back"></div>
|
||
|
|
<div class="promotion">晋级名单</div>
|
||
|
|
</div>
|
||
|
|
<div class="content"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- group -->
|
||
|
|
<div class="card_container card_container_group" style="display: none;">
|
||
|
|
<div class="group card animate__animated">
|
||
|
|
<div class="tools">
|
||
|
|
<div class="back"></div>
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<div class="player_list">
|
||
|
|
<div class="list_title"></div>
|
||
|
|
<div class="list_content"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- rank -->
|
||
|
|
<div class="card_container card_container_rank" style="display: none;">
|
||
|
|
<div class="rank card animate__animated">
|
||
|
|
<div class="tools">
|
||
|
|
<div class="back"></div>
|
||
|
|
</div>
|
||
|
|
<div class="content"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- finals -->
|
||
|
|
<div class="card_container card_container_finals" style="display: none;">
|
||
|
|
<div class="finals card animate__animated">
|
||
|
|
<div class="tools">
|
||
|
|
<div class="back"></div>
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<div class="playerList"></div>
|
||
|
|
<div class="cjList" style="text-wrap: nowrap;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>最终成绩以现场裁判组裁定公布为准</p>
|
||
|
|
<p>技术支持:云朵科技</p>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.8.17/layui.min.js"></script>
|
||
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
// var url = window.location.href;
|
||
|
|
var params = {};
|
||
|
|
// url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
|
||
|
|
// params[key] = value;
|
||
|
|
// });
|
||
|
|
|
||
|
|
params.match_id = {$match_id} || 127
|
||
|
|
|
||
|
|
let group_thirtyTwo = [], group_sixteen = [], group_eight = [], group_four = [], group_one = []
|
||
|
|
let course = 32, course_name = '排位赛'
|
||
|
|
let timer = null
|
||
|
|
|
||
|
|
var color = "{$screeninfo.font_rgb|default=''}"
|
||
|
|
color == color ? color : '#FE5900'
|
||
|
|
const setMainColor = () => {
|
||
|
|
$('.card').css({
|
||
|
|
'border': `1px solid ${color}`
|
||
|
|
})
|
||
|
|
$('footer p').css({
|
||
|
|
'color': color
|
||
|
|
})
|
||
|
|
$('.menuItem').css({
|
||
|
|
'border-color': color,
|
||
|
|
'background-color': color + '1a'
|
||
|
|
})
|
||
|
|
$('.back').css({
|
||
|
|
'background-color': color
|
||
|
|
})
|
||
|
|
$('.promotion').css({
|
||
|
|
'border-color': color,
|
||
|
|
'background-color': color + '1a',
|
||
|
|
'color': color
|
||
|
|
})
|
||
|
|
$('.group_name').css({
|
||
|
|
'background-color': color
|
||
|
|
})
|
||
|
|
$('.group').css({
|
||
|
|
'border-color': color,
|
||
|
|
})
|
||
|
|
$('.groupList .group').on('mouseenter', function() {
|
||
|
|
$(this).css({
|
||
|
|
'box-shadow': `${color+'80'} 0 0 30px 2px`
|
||
|
|
})
|
||
|
|
}).on('mouseleave', function() {
|
||
|
|
$(this).css({
|
||
|
|
'box-shadow': 'none'
|
||
|
|
})
|
||
|
|
})
|
||
|
|
$('.player_list .list_title').css({
|
||
|
|
'border-bottom-color': color
|
||
|
|
})
|
||
|
|
}
|
||
|
|
setMainColor()
|
||
|
|
|
||
|
|
// 获取分组
|
||
|
|
const getGroup = async() => {
|
||
|
|
const res = await $.get(`https://www.fpvone.cn/index/ranking/getRankingall?match_id=${params.match_id}`)
|
||
|
|
if(res.code != 1) return
|
||
|
|
group_thirtyTwo = setFz(res.data.thirty_two)
|
||
|
|
group_sixteen = setFz(res.data.sixteen)
|
||
|
|
group_eight = setFz(res.data.eight)
|
||
|
|
group_four = setFz(res.data.four)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置分组
|
||
|
|
const setGroup = (group, flag) => {
|
||
|
|
let turns = 32
|
||
|
|
switch(flag) {
|
||
|
|
case 1: turns = 32; break;
|
||
|
|
case 2: turns = 16; break;
|
||
|
|
case 3: turns = 8; break;
|
||
|
|
case 4: turns = 4; break;
|
||
|
|
}
|
||
|
|
let swiper_html = ''
|
||
|
|
let swiper_item_html = ''
|
||
|
|
group.map((item, index) => {
|
||
|
|
let player_html = ''
|
||
|
|
item.data.map(i => {
|
||
|
|
player_html += `
|
||
|
|
<div class="player">
|
||
|
|
<div class="left">${i.player_name}</div>
|
||
|
|
<div class="right">${i.age==undefined?'未知':`${i.age}岁`} | ${setProvince(i.province)}</div>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
})
|
||
|
|
swiper_item_html += `
|
||
|
|
<div class="group group_one" data-group="${item.group}">
|
||
|
|
<div class="group_name">${item.group}组</div>
|
||
|
|
<div class="group_players">${player_html}</div>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
if(index%4 == 3 || index == group.length-1) {
|
||
|
|
swiper_html += `
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="groupList">${swiper_item_html}</div>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
swiper_item_html = ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
$(`.course .content`).html(`
|
||
|
|
<div class="swiper-container">
|
||
|
|
<div class="swiper-wrapper">${swiper_html}</div>
|
||
|
|
</div>
|
||
|
|
`)
|
||
|
|
|
||
|
|
$('.group_one').click(async function() {
|
||
|
|
const group = $(this).data('group')
|
||
|
|
await getAndSetGroupDetail(group, course)
|
||
|
|
course_hide()
|
||
|
|
group_show()
|
||
|
|
timer = setInterval(() => {
|
||
|
|
getAndSetGroupDetail(group, course)
|
||
|
|
}, 1000)
|
||
|
|
})
|
||
|
|
if(flag == 1 || flag == 2) {
|
||
|
|
const mySwiper = new Swiper ('.swiper-container', {
|
||
|
|
loop: true,
|
||
|
|
speed: 1000,
|
||
|
|
})
|
||
|
|
$('.course .swiper-container').append(`
|
||
|
|
<i class="arrow arrow_left iconfont icon-zuojiantou" style="color: ${color}"></i>
|
||
|
|
<i class="arrow arrow_right iconfont icon-youjiantou" style="color: ${color}"></i>
|
||
|
|
`)
|
||
|
|
$('.arrow_left').click(function() {
|
||
|
|
mySwiper.slidePrev()
|
||
|
|
})
|
||
|
|
$('.arrow_right').click(function() {
|
||
|
|
mySwiper.slideNext()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
$('.course .promotion').click(async function() {
|
||
|
|
await getAndSetPromotionList(course)
|
||
|
|
course_hide()
|
||
|
|
rank_show()
|
||
|
|
})
|
||
|
|
$('.course .back').click(function() {
|
||
|
|
course_hide()
|
||
|
|
setTimeout(() => {
|
||
|
|
$(`.course .content`).html('')
|
||
|
|
}, 500);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 处理省份
|
||
|
|
const setProvince = (province) => {
|
||
|
|
return province==undefined?'未知':
|
||
|
|
province=='新疆维吾尔自治区'?'新疆':
|
||
|
|
province=='广西壮族自治区'?'广西':
|
||
|
|
province=='宁夏回族自治区'?'宁夏':
|
||
|
|
province.replace(/省|市|特别行政区|自治区/g, '')
|
||
|
|
}
|
||
|
|
|
||
|
|
// 处理分组的数据
|
||
|
|
const setFz = (list) => {
|
||
|
|
const l = { 'A':[],'B':[],'C':[],'D':[],'E':[],'F':[],'G':[],'H':[],'I':[],'J':[],'K':[],'L':[],'M':[],'N':[],'O':[],'P':[],'Q':[],'R':[],'S':[],'T':[],'U':[],'V':[],'W':[],'X':[],'Y':[],'Z':[],'AA':[],'AB':[],'AC':[],'AD':[],'AE':[],'AF':[],'AG':[],'AH':[],'AI':[],'AJ':[],'AK':[],'AL':[],'AM':[],'AN':[],'AO':[],'AP':[],'AQ':[],'AR':[],'AS':[],'AT':[],'AU':[],'AV':[],'AW':[],'AX':[],'AY':[],'AZ':[] }
|
||
|
|
const ll = []
|
||
|
|
list.map(item => {
|
||
|
|
if(l[item.grouping] == null) l[item.grouping] = []
|
||
|
|
l[item.grouping].push(item)
|
||
|
|
})
|
||
|
|
for(let i in l) {
|
||
|
|
if(l[i].length != 0) ll.push({ group: i, data: l[i] })
|
||
|
|
}
|
||
|
|
return ll
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取分组详情
|
||
|
|
const getAndSetGroupDetail = async(group, course) => {
|
||
|
|
const res = await $.get(`https://www.fpvone.cn/index/ranking/getRankForGroup?course=${course}&group=${group}&match_id=${params.match_id}`)
|
||
|
|
if(res.code != 1) return
|
||
|
|
const round = res.data.round
|
||
|
|
const playerList = res.data.items
|
||
|
|
$('.group .back').text(`${course_name} ${group}组`)
|
||
|
|
$('.group .back').click(function() {
|
||
|
|
group_hide()
|
||
|
|
course_show()
|
||
|
|
clearInterval(timer)
|
||
|
|
})
|
||
|
|
let html = ''
|
||
|
|
playerList.map(item => {
|
||
|
|
let achievement_html = ''
|
||
|
|
for(let i=1; i<=round; i++) {
|
||
|
|
let h = ''
|
||
|
|
for(let j=0; j<item.achievement_list.length; j++) {
|
||
|
|
if(item.achievement_list[j].course == course && item.achievement_list[j].other_round == i) {
|
||
|
|
const times = item.achievement_list[j].times
|
||
|
|
const fly_num = item.achievement_list[j].fly_num
|
||
|
|
h = `
|
||
|
|
<div class="list_data">
|
||
|
|
<span>${times==null||times==''?'':times=='DNF'?'':times}</span>
|
||
|
|
<span>${fly_num==null||fly_num==''?'':fly_num=='DNF'?'DNF':`(${fly_num}圈)`}</span>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(h == '') h = `<div class="list_data"></div>`
|
||
|
|
achievement_html += h
|
||
|
|
}
|
||
|
|
|
||
|
|
html += `
|
||
|
|
<div class="list_item" style="border-color: ${color}">
|
||
|
|
<div class="list_id">${item.player_id}</div>
|
||
|
|
<div class="list_player">
|
||
|
|
<img src="${item.style_photo.indexOf('ydool2017.oss')!=-1?item.style_photo:`https://ydool2017.oss-cn-shanghai.aliyuncs.com${item.style_photo}`}" alt="">
|
||
|
|
<div style="font-size: ${item.player_name.length>=4?'24px':''}">${item.player_name}</div>
|
||
|
|
<div style="font-size: ${item.player_name.length>=4?'20px':''}">(${item.age}岁 | ${setProvince(item.province)})</div>
|
||
|
|
</div>
|
||
|
|
${achievement_html}
|
||
|
|
<div class="list_data">
|
||
|
|
<span>${item.times==null||item.times==''?'':item.times=='DNF'?'':item.times}</span>
|
||
|
|
<span>${item.fly_num==null||item.fly_num==''?'':item.fly_num=='DNF'?'DNF':`(${item.fly_num}圈)`}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
})
|
||
|
|
let list_title_html = ''
|
||
|
|
const numberToChinese = (num) => {
|
||
|
|
let chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
|
||
|
|
let numStr = num.toString()
|
||
|
|
let result = ''
|
||
|
|
for(let i = 0; i<numStr.length; i++) {
|
||
|
|
result += chineseNumbers[parseInt(numStr[i])]
|
||
|
|
}
|
||
|
|
return result
|
||
|
|
}
|
||
|
|
for(let i=1; i<=round; i++) {
|
||
|
|
list_title_html += `<span>第${numberToChinese(i)}轮</span>`
|
||
|
|
}
|
||
|
|
$('.group .list_title').html(`
|
||
|
|
<span>编号</span>
|
||
|
|
<span>飞手</span>
|
||
|
|
${list_title_html}
|
||
|
|
<span>最优成绩</span>
|
||
|
|
`)
|
||
|
|
$('.group .list_content').html(html)
|
||
|
|
$('.group .list_data').css({
|
||
|
|
width: 70 / (round+1) + '%'
|
||
|
|
})
|
||
|
|
$('.group .list_title span').css({
|
||
|
|
width: 70 / (round+1) + '%'
|
||
|
|
})
|
||
|
|
// updateGroupDetail(group, course, playerList)
|
||
|
|
$('main .group .player_list .list_title::after').css({
|
||
|
|
'background-color': color
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 实时更新分组详情的数据
|
||
|
|
const updateGroupDetail = async(group, course, list) => {
|
||
|
|
let oldList = getAchievementList(list)
|
||
|
|
timer = setInterval(async() => {
|
||
|
|
const res = await $.get(`https://www.fpvone.cn/index/ranking/getRankForGroup?course=${course}&group=${group}&match_id=${params.match_id}`)
|
||
|
|
if(res.code != 1) return
|
||
|
|
const playerList = res.data.items
|
||
|
|
let newList = getAchievementList(playerList)
|
||
|
|
compareAndUpdate(oldList, newList)
|
||
|
|
oldList = newList
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
const getAchievementList = (playerList) => {
|
||
|
|
let achievement = []
|
||
|
|
playerList.map(item => {
|
||
|
|
let a = []
|
||
|
|
item.achievement_list.map(i => {
|
||
|
|
if(i.course == course) {
|
||
|
|
a.push(i)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
a.sort((a, b) => a.other_round - b.other_round)
|
||
|
|
a.push({
|
||
|
|
times: item.times,
|
||
|
|
fly_num: item.fly_num,
|
||
|
|
})
|
||
|
|
achievement.push({
|
||
|
|
player_name: item.player_name,
|
||
|
|
achievement_list: a
|
||
|
|
})
|
||
|
|
})
|
||
|
|
return achievement
|
||
|
|
}
|
||
|
|
const compareAndUpdate = (oldList, newList) => {
|
||
|
|
for(let i=0; i<oldList.length; i++) {
|
||
|
|
for(let j=0; j<oldList[i].achievement_list.length; j++) {
|
||
|
|
let oldItem = oldList[i].achievement_list[j]
|
||
|
|
let newItem = newList[i].achievement_list[j]
|
||
|
|
if(oldItem.times != newItem.times || oldItem.fly_num != newItem.fly_num) {
|
||
|
|
$(`.group .list_content .list_item:eq(${i}) .list_data:eq(${j})`).html(`
|
||
|
|
<span>${newItem.times==null||newItem.times==''?'':newItem.times=='DNF'?'':newItem.times}</span>
|
||
|
|
<span>${newItem.fly_num==null||newItem.fly_num==''?'':newItem.fly_num=='DNF'?'DNF':`(${newItem.fly_num}圈)`}</span>
|
||
|
|
`)
|
||
|
|
$(`.group .list_content .list_item:eq(${i}) .list_data:eq(${j})`).addClass('animate__animated animate__bounceIn')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取晋级名单
|
||
|
|
const getAndSetPromotionList = async(course) => {
|
||
|
|
const res = await $.get(`https://www.fpvone.cn/index/ranking/getRanking?match_id=${params.match_id}&course=${course}`)
|
||
|
|
if(res.code != 1) return
|
||
|
|
const list = course == 32 ? res.data.thirty_two.slice(0,32) : course == 16 ? res.data.sixteen.slice(0,16) : course == 8 ? res.data.eight.slice(0,8) : course == 4 ? res.data.four.slice(0,4) : []
|
||
|
|
$('.rank .back').text(`${course_name} 晋级名单`)
|
||
|
|
$('.rank .back').css({ 'padding-left': '80px' })
|
||
|
|
$('.rank .back').click(function() {
|
||
|
|
rank_hide()
|
||
|
|
course_show()
|
||
|
|
})
|
||
|
|
let html = ''
|
||
|
|
list.map((item, index) => {
|
||
|
|
html += `
|
||
|
|
<div class="list_item" style="border-color: ${color}">
|
||
|
|
<span>${index-0+1}.</span>
|
||
|
|
<span>${item.player_name}</span>
|
||
|
|
<span>${item.times==null||item.times==''?'':item.times=='DNF'?'':item.times}</span>
|
||
|
|
<span>${item.fly_num==null||item.fly_num==''?'':item.fly_num=='DNF'?'DNF':`(${item.fly_num}圈)`}</span>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
})
|
||
|
|
$('.card_container_rank .content').html(`<div class="rankList rankList${course}">${html}</div>`)
|
||
|
|
$('main .group .player_list .list_title::after').css({
|
||
|
|
'background-color': color
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取决赛数据
|
||
|
|
const getfinals = async() => {
|
||
|
|
const res = await $.get(`https://www.fpvone.cn/index/ranking/getFinalsList?match_id=${params.match_id}`)
|
||
|
|
if(res.code != 1) return
|
||
|
|
let player = [], finals_player = []
|
||
|
|
res.data[0] && player.push(res.data[0])
|
||
|
|
res.data[1] && player.push(res.data[1])
|
||
|
|
res.data[2] && player.push(res.data[2])
|
||
|
|
res.data[3] && player.push(res.data[3])
|
||
|
|
finals_player = player.sort((a, b) => b.integral_sum - a.integral_sum)
|
||
|
|
setFinalPlayer(finals_player)
|
||
|
|
let extraGame = {}
|
||
|
|
finals_player.map(item => {
|
||
|
|
if(!extraGame[item.integral_sum]) {
|
||
|
|
extraGame[item.integral_sum] = []
|
||
|
|
}
|
||
|
|
extraGame[item.integral_sum].push(item)
|
||
|
|
})
|
||
|
|
let extraGame2 = []
|
||
|
|
for(let i in extraGame) {
|
||
|
|
if(extraGame[i].length>1) {
|
||
|
|
extraGame2.push(extraGame[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
extraGame = extraGame2
|
||
|
|
extraGame.map(item => {
|
||
|
|
item.map(i => {
|
||
|
|
res.data.integral_list.map(e => {
|
||
|
|
if(e.other_round == '加赛'&&i.player_name==e.player_name) {
|
||
|
|
i.game = e
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
})
|
||
|
|
let lists = []
|
||
|
|
let finals_rank = {
|
||
|
|
1: [],
|
||
|
|
2: [],
|
||
|
|
3: [],
|
||
|
|
4: [],
|
||
|
|
5: [],
|
||
|
|
6: [],
|
||
|
|
7: [],
|
||
|
|
8: [],
|
||
|
|
9: [],
|
||
|
|
10: [],
|
||
|
|
'加赛': [],
|
||
|
|
}
|
||
|
|
res.data.integral_list.map(item => {
|
||
|
|
finals_rank[item.other_round].push(item)
|
||
|
|
})
|
||
|
|
console.log(2,finals_rank)
|
||
|
|
for(let i=1; i<=10; i++) {
|
||
|
|
if(finals_rank[i].length !== 0) {
|
||
|
|
lists.push({
|
||
|
|
finals_round: i,
|
||
|
|
list: finals_rank[i]
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
console.log(1,extraGame)
|
||
|
|
extraGame.map(item => {
|
||
|
|
let arr = []
|
||
|
|
item.map(i => {
|
||
|
|
if(i.game) {
|
||
|
|
arr.push(i.game)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
if(arr.length!=0) {
|
||
|
|
lists.push({
|
||
|
|
finals_round: '加赛',
|
||
|
|
list: arr
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
setFinalAchievement(lists)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置决赛选手
|
||
|
|
const setFinalPlayer = (finals_player) => {
|
||
|
|
let html = ''
|
||
|
|
finals_player.map((item, index) => {
|
||
|
|
let scorelist = `
|
||
|
|
<div class="scorelist">
|
||
|
|
<div class="sitem">
|
||
|
|
<div>决赛积分</div>
|
||
|
|
<div>${item.integral_sum}分<span style="margin-left: 4px; font-size: 16px">${!item.win_extra_series?'':item.win_extra_series=='1'?`(加赛胜)`:''}</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
html += `
|
||
|
|
<div class="player" style="border-color: ${color}">
|
||
|
|
<div class="medal">${index-0+1}</div>
|
||
|
|
<div class="desc">
|
||
|
|
<div class="avater">
|
||
|
|
<img src="${item.style_photo.indexOf('ydool2017.oss')!=-1?item.style_photo:`https://ydool2017.oss-cn-shanghai.aliyuncs.com${item.style_photo}`}" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="data">
|
||
|
|
<div class="line line1">${item.player_name}</div>
|
||
|
|
<div class="line line2">${item.age}岁 | ${setProvince(item.province)}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="player_id" style="background-color: ${color}">编号${item.player_id}</div>
|
||
|
|
${scorelist}
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
})
|
||
|
|
$('.card_container_finals .playerList').html(html)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置决赛成绩
|
||
|
|
const setFinalAchievement = (finals_rank) => {
|
||
|
|
let html = ''
|
||
|
|
let list = []
|
||
|
|
console.log(finals_rank)
|
||
|
|
finals_rank.map(item => {
|
||
|
|
if(item.finals_round == '加赛' && item.list.length==0) return
|
||
|
|
let h1 = '<div>姓名</div>', h2 = '<div>圈数</div>', h3 = '<div>成绩</div>', h4 = '<div>积分</div>'
|
||
|
|
item.list.map(i => {
|
||
|
|
h1 += `<div>${i.player_name}</div>`
|
||
|
|
h2 += `<div>${i.fly_num!=null?i.fly_num:''}</div>`
|
||
|
|
h3 += `<div>${i.times!=null?i.times:''}</div>`
|
||
|
|
h4 += `<div>${i.integral!=null?i.integral:''}</div>`
|
||
|
|
})
|
||
|
|
h1 = `<div class="line l_line1">${h1}</div>`
|
||
|
|
h2 = `<div class="line l_line2">${h2}</div>`
|
||
|
|
h3 = `<div class="line l_line3">${h3}</div>`
|
||
|
|
h4 = `<div class="line l_line4">${h4}</div>`
|
||
|
|
|
||
|
|
let cjItemhtml = `
|
||
|
|
<div class="cjItem" style="border-color: ${color}">
|
||
|
|
<div class="title" style="background: ${color}">${item.finals_round=='加赛'?'加赛':`第${item.finals_round}轮`}</div>
|
||
|
|
<div class="content">
|
||
|
|
${h1}${h2}${h3}${h4}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
list.push(cjItemhtml)
|
||
|
|
})
|
||
|
|
let swiper_html = ''
|
||
|
|
let swiper_item_html = ''
|
||
|
|
list.map((item, index) => {
|
||
|
|
swiper_item_html += item
|
||
|
|
if(index%3 == 2 || index == list.length-1) {
|
||
|
|
swiper_html += `
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="groupList">${swiper_item_html}</div>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
swiper_item_html = ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
$('.card_container_finals .cjList').html(`
|
||
|
|
<div class="finals-swiper-container">
|
||
|
|
<i class="arrow arrow_left iconfont icon-zuojiantou" style="color: ${color}"></i>
|
||
|
|
<i class="arrow arrow_right iconfont icon-youjiantou" style="color: ${color}"></i>
|
||
|
|
<div class="swiper-wrapper">${swiper_html}</div>
|
||
|
|
</div>
|
||
|
|
`)
|
||
|
|
const mySwiper = new Swiper ('.finals-swiper-container', {
|
||
|
|
loop: true,
|
||
|
|
speed: 1000,
|
||
|
|
})
|
||
|
|
$('.arrow_left').click(function() {
|
||
|
|
mySwiper.slidePrev()
|
||
|
|
})
|
||
|
|
$('.arrow_right').click(function() {
|
||
|
|
mySwiper.slideNext()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 点击事件
|
||
|
|
$('.navigation .menuList .menuItem').click(async function() {
|
||
|
|
const index = $(this).index() + 1
|
||
|
|
course = index==1?32:index==2?16:index==3?8:index==4?4:1
|
||
|
|
course_name = $(this).text()
|
||
|
|
if(index != 5) {
|
||
|
|
await getGroup()
|
||
|
|
setGroup(index==1?group_thirtyTwo:index==2?group_sixteen:index==3?group_eight:group_four, index)
|
||
|
|
$('.course .back').text(course_name)
|
||
|
|
course_show()
|
||
|
|
} else {
|
||
|
|
await getfinals()
|
||
|
|
$('.finals .back').text(course_name)
|
||
|
|
finals_show()
|
||
|
|
// timer = setInterval(() => {
|
||
|
|
// getfinals()
|
||
|
|
// }, 1000)
|
||
|
|
$('.finals .back').click(function() {
|
||
|
|
finals_hide()
|
||
|
|
clearInterval(timer)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
setMainColor()
|
||
|
|
})
|
||
|
|
|
||
|
|
const course_show = () => {
|
||
|
|
$('.course').addClass('animate__fadeInRightBig')
|
||
|
|
$('.card_container_course').show()
|
||
|
|
}
|
||
|
|
const course_hide = () => {
|
||
|
|
$('.course').removeClass('animate__fadeInRightBig')
|
||
|
|
$('.course').addClass('animate__fadeOutLeftBig')
|
||
|
|
setTimeout(() => {
|
||
|
|
$('.card_container_course').hide()
|
||
|
|
$('.course').removeClass('animate__fadeOutLeftBig')
|
||
|
|
}, 500)
|
||
|
|
}
|
||
|
|
const group_show = () => {
|
||
|
|
$('.group').addClass('animate__fadeInRightBig')
|
||
|
|
$('.card_container_group').show()
|
||
|
|
}
|
||
|
|
const group_hide = () => {
|
||
|
|
$('.group').removeClass('animate__fadeInRightBig')
|
||
|
|
$('.group').addClass('animate__fadeOutLeftBig')
|
||
|
|
setTimeout(() => {
|
||
|
|
$('.card_container_group').hide()
|
||
|
|
$('.group').removeClass('animate__fadeOutLeftBig')
|
||
|
|
}, 500)
|
||
|
|
}
|
||
|
|
const rank_show = () => {
|
||
|
|
$('.rank').addClass('animate__fadeInRightBig')
|
||
|
|
$('.card_container_rank').show()
|
||
|
|
}
|
||
|
|
const rank_hide = () => {
|
||
|
|
$('.rank').removeClass('animate__fadeInRightBig')
|
||
|
|
$('.rank').addClass('animate__fadeOutLeftBig')
|
||
|
|
setTimeout(() => {
|
||
|
|
$('.card_container_rank').hide()
|
||
|
|
$('.rank').removeClass('animate__fadeOutLeftBig')
|
||
|
|
}, 500)
|
||
|
|
}
|
||
|
|
const finals_show = () => {
|
||
|
|
$('.finals').addClass('animate__fadeInRightBig')
|
||
|
|
$('.card_container_finals').show()
|
||
|
|
}
|
||
|
|
const finals_hide = () => {
|
||
|
|
$('.finals').removeClass('animate__fadeInRightBig')
|
||
|
|
$('.finals').addClass('animate__fadeOutLeftBig')
|
||
|
|
setTimeout(() => {
|
||
|
|
$('.card_container_finals').hide()
|
||
|
|
$('.finals').removeClass('animate__fadeOutLeftBig')
|
||
|
|
}, 500)
|
||
|
|
}
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
$('.menuItem').removeClass('animate__bounceInRight animate__bounceInDown animate__bounceInLeft animate__bounceInUp')
|
||
|
|
}, 1000)
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// const reset_font = () => {
|
||
|
|
// let width = document.documentElement.clientWidth || document.body.clientWidth
|
||
|
|
// let height = document.documentElement.clientHeight || document.body.clientHeight
|
||
|
|
// document.getElementById('app').style.transformOrigin = 'top left'
|
||
|
|
// document.getElementById('app').style.transform ='scale(' + width / 1920 + ',' + height / 1080 + ')'
|
||
|
|
// }
|
||
|
|
// window.addEventListener('resize', function () {
|
||
|
|
// reset_font()
|
||
|
|
// reset_font()
|
||
|
|
// })
|
||
|
|
// reset_font()
|
||
|
|
// reset_font()
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|