左文祺
8 years ago
6 changed files with 3650 additions and 491 deletions
File diff suppressed because it is too large
Load Diff
@ -1,304 +0,0 @@
@@ -1,304 +0,0 @@
|
||||
$(document).ready(function () { |
||||
new Index(); |
||||
}); |
||||
|
||||
class BS { |
||||
constructor() { |
||||
|
||||
} |
||||
|
||||
static fetch(url, data, type) { |
||||
return new Promise((resolve) => { |
||||
$.ajax({ |
||||
type: type ? type : 'GET', |
||||
data: data ? data : {}, |
||||
url, |
||||
success(resp) { |
||||
resolve(resp) |
||||
} |
||||
}) |
||||
}) |
||||
|
||||
} |
||||
|
||||
static run() { |
||||
return this.fetch('/run'); |
||||
} |
||||
|
||||
static stopAndResult(award_id) { |
||||
return this.fetch('/draw_lottery', {award_id}); |
||||
} |
||||
|
||||
static getLucklessUsers() { |
||||
return this.fetch('/luckless_users'); |
||||
} |
||||
|
||||
static getLuckyUsers() { |
||||
return this.fetch('/lucky_users'); |
||||
} |
||||
|
||||
static getAwards() { |
||||
return this.fetch('/awards'); |
||||
} |
||||
|
||||
static getAward(award_id) { |
||||
return this.fetch('/award', { |
||||
award_id |
||||
}); |
||||
} |
||||
|
||||
static getUsers() { |
||||
return this.fetch('/users'); |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
class Index { |
||||
constructor() { |
||||
this.running = false; |
||||
this.currentAward = ''; |
||||
this.entries = []; |
||||
this.settings = { |
||||
width: 800, |
||||
height: 600, |
||||
radius: '65%', |
||||
radiusMin: 75, |
||||
bgDraw: true, |
||||
bgColor: 'none', |
||||
opacityOver: 0.90, |
||||
opacityOut: 0.05, |
||||
opacitySpeed: 1, |
||||
fov: 450, |
||||
speed: 1, |
||||
fontFamily: 'FZShuTi,Microsoft YaHei,Oswald,Arial, sans-serif', |
||||
fontSize: '28', |
||||
hoverFontSize: '55', |
||||
fontColor: '#fff', |
||||
fontWeight: 'normal',//bold
|
||||
fontStyle: 'normal',//italic
|
||||
fontStretch: 'extra-expanded',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
|
||||
fontToUpperCase: true, |
||||
// tooltipFontFamily: 'Oswald, Arial, sans-serif',
|
||||
// tooltipFontSize: '11',
|
||||
// tooltipFontColor: '#fff',
|
||||
// tooltipFontWeight: 'normal',//bold
|
||||
// tooltipFontStyle: 'normal',//italic
|
||||
// tooltipFontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
|
||||
// tooltipFontToUpperCase: false,
|
||||
// tooltipTextAnchor: 'left',
|
||||
// tooltipDiffX: 0,
|
||||
// tooltipDiffY: 10
|
||||
|
||||
}; |
||||
this.buildCloud().then(() => { |
||||
this.svg3DTagCloud = new SVG3DTagCloud(document.getElementById('holder'), this.settings); |
||||
}); |
||||
this.bindEvent(); |
||||
this.initVisualSocket(); |
||||
|
||||
} |
||||
|
||||
buildCloud() { |
||||
return BS.getLucklessUsers().then((resp) => { |
||||
console.log(resp); |
||||
let entry = []; |
||||
$(resp.data).each((i, val) => { |
||||
entry.push({ |
||||
label: val.name, |
||||
uid: val.uid, |
||||
role: val.role, |
||||
url: 'javascript:void(0)', |
||||
target: '_top' |
||||
}) |
||||
}); |
||||
this.entries = entry; |
||||
this.settings.entries = this.entries; |
||||
}) |
||||
} |
||||
|
||||
rebuild() { |
||||
this.buildCloud().then(() => { |
||||
$('.holder').empty(); |
||||
this.svg3DTagCloud = new SVG3DTagCloud(document.getElementById('holder'), this.settings); |
||||
}) |
||||
|
||||
} |
||||
|
||||
initVisualSocket() { |
||||
// this.refreshCurrentAward();
|
||||
let tempAwardId = ''; |
||||
setInterval(() => { |
||||
tempAwardId = localStorage.getItem('current_award'); |
||||
if (this.currentAward !== tempAwardId) { |
||||
/*change*/ |
||||
// window.location.reload(1);
|
||||
this.currentAward = tempAwardId; |
||||
this.refreshCurrentAward(); |
||||
} |
||||
}, 2 * 1000); |
||||
} |
||||
|
||||
refreshCurrentAward() { |
||||
if (this.currentAward === '') return; |
||||
BS.getAward(this.currentAward).then((resp) => { |
||||
console.log(resp); |
||||
if (resp.status === 200) { |
||||
let awardInfo = resp.data; |
||||
$('#currentAwardName').html(awardInfo.award_name); |
||||
$('#currentTimes').html(awardInfo.award_capacity); |
||||
} |
||||
|
||||
}) |
||||
} |
||||
|
||||
|
||||
bindEvent() { |
||||
$('#start').click(() => { |
||||
if (this.running) { |
||||
alert('正在抽奖'); |
||||
return; |
||||
} |
||||
BS.run().then(resp => { |
||||
console.log(resp); |
||||
this.svg3DTagCloud.speed(6); |
||||
this.running = true; |
||||
}); |
||||
}); |
||||
$('#end').click(() => { |
||||
if (!this.running) { |
||||
return; |
||||
} |
||||
console.log('click'); |
||||
BS.stopAndResult(this.currentAward).then(resp => { |
||||
this.running = false; |
||||
console.log(resp); |
||||
if (resp.status === 200) { |
||||
this.render(resp.data, 0); |
||||
} |
||||
}); |
||||
}); |
||||
$('#luckyUsers').click(() => { |
||||
this.list(); |
||||
}); |
||||
|
||||
} |
||||
|
||||
render(data, i) { |
||||
// debugger
|
||||
if (i >= data.length) { |
||||
this.currentlist(data); |
||||
this.rebuild(); |
||||
return; |
||||
} |
||||
this.chose(data[i]).then(() => { |
||||
i++; |
||||
this.render(data, i); |
||||
}); |
||||
} |
||||
|
||||
stop() { |
||||
this.svg3DTagCloud.reset(); |
||||
this.svg3DTagCloud.speed(1); |
||||
} |
||||
|
||||
chose(user) { |
||||
return new Promise((resolve) => { |
||||
let uid = user.uid; |
||||
let name = user.name; |
||||
let index = $(`[data-uid=${uid}]`).data('index'); |
||||
this.svg3DTagCloud.chose([{ |
||||
index |
||||
}]); |
||||
let currentList = `<li><i class="fa fa-user"></i>${name}</li>`; |
||||
$('.current-list').append(currentList); |
||||
setTimeout(() => { |
||||
// this.stop()
|
||||
resolve(); |
||||
}, 1 * 1000) |
||||
}).then(() => { |
||||
return new Promise((resolve) => { |
||||
this.stop(); |
||||
setTimeout(() => { |
||||
resolve(); |
||||
}, 0) |
||||
}); |
||||
|
||||
}) |
||||
} |
||||
|
||||
currentlist(data) { |
||||
let offset = $(".holder").offset(); |
||||
let DOM = '<ul>' |
||||
for (let user of data) { |
||||
DOM += `<li>${user.name}</li>`; |
||||
} |
||||
DOM += `</ul>`; |
||||
layer.open({ |
||||
type: 1, |
||||
area: '800px', |
||||
skin: 'layui-layer-lan', //样式类名
|
||||
offset: [offset.top, offset.left], |
||||
closeBtn: 1, //不显示关闭按钮
|
||||
anim: 3, |
||||
title: '本次中奖名单', |
||||
shadeClose: false, //开启遮罩关闭
|
||||
content: `<div class="luckerList">${DOM}</div>` |
||||
}); |
||||
} |
||||
|
||||
list() { |
||||
let offset = $(".holder").offset(); |
||||
let awards={}; |
||||
let load=layer.load(2); |
||||
BS.getAwards().then(resp=>{ |
||||
resp.data.map((val)=>{ |
||||
console.log(val); |
||||
if(typeof awards[val.award_id]==="undefined"){ |
||||
awards[val.award_id]={}; |
||||
} |
||||
awards[val.award_id].name = val.award_name; |
||||
awards[val.award_id].data=[]; |
||||
|
||||
}) |
||||
|
||||
}).then(()=>{ |
||||
return BS.getLuckyUsers().then(resp => { |
||||
resp.data.map(val=>{ |
||||
awards[val.award_id].data.push(val) |
||||
}) |
||||
}); |
||||
}).then(()=>{ |
||||
layer.close(load); |
||||
console.log(awards); |
||||
let content = ``; |
||||
for(let key of Object.keys(awards)){ |
||||
let award = awards[key]; |
||||
let lisArray=award.data.map((data)=>{ |
||||
return `<li class="${data.role==2||data.role==3?'sp':''}">${data.name}<span>【${data.uid}】</span></li>` |
||||
}); |
||||
content+=` |
||||
<section> |
||||
<h5>${award.name}</h5> |
||||
<ul> |
||||
${lisArray.join("")} |
||||
</ul> |
||||
</section>`; |
||||
} |
||||
layer.open({ |
||||
type: 1, |
||||
area: '800px', |
||||
skin: 'layui-layer-lan', //样式类名
|
||||
offset: [offset.top, offset.left], |
||||
closeBtn: 1, //不显示关闭按钮
|
||||
anim: 3, |
||||
title: '所有中奖名单', |
||||
shadeClose: false, //开启遮罩关闭
|
||||
content: ` |
||||
<div class="luckerList">${content} |
||||
</div>` |
||||
}); |
||||
}); |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue