Annual lottery program, out of the box

Down to the end, all kinds of annual meetings are required to draw, just recently wrote a lottery program, summarize, and to facilitate future ponder, but also to all of you out of the box draw a demo reference

demo demo link

Preview, Portal

The complete code addresses

Portal

flow chart

Explanation

1. Fair draw, there is no black-box operation code functional test, pressure test, after a more than Review, out of the box can be assured.
2. The company last week lottery draw procedure is actually used, but the code I omitted the relevant information with the company, so basically no effect on the UI, but can easily modify the design as a background image can be.
3. The best resolution of 1920 * 1080, but the actual use of the device screen should be considered local
4. There lottery, winning two Music, needs to connect better audio effects
5. You can configure the prize, a prize draw can be divided into several small times, according to the draw here being only 1 table / 1 to reason: delete / replace the need to optimize it here
6. After winning list of winners and prizes will write information to winning records in the table, there is a page to view, easy to back Duijiang
7. Being only release the code table number pumping, in fact, the picture table number of employees into picture would be better, there is a sign of the original page, can be checked in advance who entered the user table, only sign of talent in the prize pool, where there is also a nestjs writing background, the code is not being released, can whisper communication. Process can refer to
   

Core code

Key nodes corresponding comment, please read carefully, please correct deficiencies

//生成从minNum到maxNum的随机数
randomNum(minNum, maxNum){
    return parseInt(Math.random()* (maxNum - minNum + 1) + minNum); 
},

//奖头像动起来
doMove(start, end) {
    console.log('start, end', start, end );

    this.setIntervalFun = setInterval(() => {
        for(let i = start; i < end; i ++ ) {
            this.$set(this.currentPrizeUsers, i, this.keepNoRepeat(this.currentPrizeUsers, this.moveUsers));
        }
    }, 80) 
},

//保证数字不重复
keepNoRepeat(currentPrizeUsers, userNoPrize) {
  let user = userNoPrize[this.randomNum(0, userNoPrize.length)];

  //由于分多小次抽奖，抽奖完成后奖池人数才变化，所以可能存在取值越界
  if(!user) {
    return this.keepNoRepeat(currentPrizeUsers, userNoPrize);
  }
  if(currentPrizeUsers.filter(item => item.userid == user.userid).length > 0) {
    return this.keepNoRepeat(currentPrizeUsers, userNoPrize);
  }else {
    return user;
  }
},

//停/继续/完成点击
handlePrizeClick: throttle(function() {
    //单次抽奖的最后一小次暂停
    if(this.movePrizeNum == this.currentPrizeInfo.count) {
        this.choujiangId.pause();
        this.zhongjiangId.play();
        clearInterval(this.setIntervalFun);
        this.movePrizeStatus = 2;
        this.movePrizeNum += 1;
        this.doPrize(this.currentPrizeUsers.filter(item => item.userid).map(item => item.userid).join(','));
        return;
    }

    if(this.movePrizeStatus == 2) {//显示状态-完成抽奖
        this.choujiangId.pause();
        this.zhongjiangId.pause();
        this.dialogTableVisible = false;
        this.movePrizeStatus = 0;
    }else if(this.movePrizeStatus == 3) {//再次启动
        this.choujiangId.play();
        this.zhongjiangId.pause();
        this.movePrizeStatus = 1;
        this.doMove(this.movePrizeNum * this.currentPrizeInfo.everytime, this.currentPrizeInfo.everytime * (this.movePrizeNum + 1) );
        this.movePrizeNum += 1;
    }else if(this.movePrizeStatus == 1) {//暂停
        this.choujiangId.pause();
        this.zhongjiangId.play();
        clearInterval(this.setIntervalFun);
        this.movePrizeStatus = 3;
        this.doPrize(this.currentPrizeUsers.filter(item => item.userid).map(item => item.userid).join(','));
    }
}, 1000),

//洗牌
randomUser() {
    let randomUser = setInterval(() => {
        this.moveUsers = this.moveUsers.sort((a, b) => Math.random() > .5 ? -1 : 1);
    }, 100)
    setTimeout(() => {
        clearInterval(randomUser);
    }, 2000);
}

Iteration ideas (deficiency)

1. Configuration information should be richer prizes, make a single back-end configuration page supports the configuration picture prize, lottery number, frequency and music, etc.
2. The prizes configuration information data table management, rather than json
3. Lottery history should be able to look back, you can delete (void), and delete records in the table winning
4. If the number of progressive enough (more than 1w people), may have performance problems, we can continue to optimize the front-end cycle
5. Adding Login / Access Control Interface

Follow-up considerations

1. Press the spacebar to pause operation may be better, but the voice it?
2. Some do more cool effects reshuffle