左文祺
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 @@ |
|||||||
$(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