左文祺
8 years ago
6 changed files with 2497 additions and 9 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,357 @@ |
|||||||
|
$(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 Tag{ |
||||||
|
constructor(entries){ |
||||||
|
this.entries=entries; |
||||||
|
this.createCanvas(); |
||||||
|
} |
||||||
|
createHTML(){ |
||||||
|
let html = [ '<ul>' ]; |
||||||
|
$(this.entries).each((i, val) => { |
||||||
|
let color = (val.role===2||val.role===3)? 'yellow' : 'white'; |
||||||
|
html.push(`<li><a href="javascript:void(0)" style="color: ${color};" data-uid="${val.uid}" data-role="${val.role}">${val.name}</a></li>`); |
||||||
|
// html.push(`<li><a href="#" style="color:${color};">' + item.name + '</a></li>`);
|
||||||
|
}); |
||||||
|
html.push('</ul>'); |
||||||
|
return html.join(''); |
||||||
|
}; |
||||||
|
static speed(){ |
||||||
|
return [0.1 * Math.random() + 0.01, -(0.1 * Math.random() + 0.01)]; |
||||||
|
}; |
||||||
|
createCanvas(){ |
||||||
|
let canvas = document.createElement('canvas'); |
||||||
|
canvas.id = 'myCanvas'; |
||||||
|
canvas.width = 1024; |
||||||
|
canvas.height = 600; |
||||||
|
document.getElementById('holder').appendChild(canvas); |
||||||
|
canvas.innerHTML = this.createHTML(); |
||||||
|
TagCanvas.Start('myCanvas', '', { |
||||||
|
textColour: null, |
||||||
|
initial: Tag.speed(), |
||||||
|
dragControl: 1, |
||||||
|
textHeight: 14 |
||||||
|
}); |
||||||
|
} |
||||||
|
fast(){ |
||||||
|
TagCanvas.SetSpeed('myCanvas', [5, 1]); |
||||||
|
} |
||||||
|
stop(){ |
||||||
|
TagCanvas.SetSpeed('myCanvas', Tag.speed()); |
||||||
|
TagCanvas.Reload('myCanvas'); |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
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 Tag(this.entries) |
||||||
|
// 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, |
||||||
|
name: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.fast(); |
||||||
|
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.svg3DTagCloud.stop(); |
||||||
|
this.render(resp.data, 0); |
||||||
|
|
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
$('#luckyUsers').click(() => { |
||||||
|
this.list(); |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
tips(){ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
render(data, i) { |
||||||
|
this.currentlist(data); |
||||||
|
this.rebuild(); |
||||||
|
// 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 = ''; |
||||||
|
for (let user of data) { |
||||||
|
DOM += `<span>${user.name}<br>${user.uid}</span>`; |
||||||
|
} |
||||||
|
DOM += ``; |
||||||
|
$('#result').css('display', 'block').html(DOM); |
||||||
|
setTimeout(function(){ |
||||||
|
$('.holder').addClass('mask'); |
||||||
|
}, 300); |
||||||
|
/* 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>` |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue