测试，先回滚看看效果

run.py

@@ -2,4 +2,4 @@
 # -*- coding:utf-8 -*-
 from src import main
 
-main.run('localhost', 8080, True)
+main.run('0.0.0.0', 8080, True)

src/static/index.css

@@ -50,9 +50,10 @@ body {
   color: white;
   align-items: center;
 }
-.result{
+/*.result{
+  display: none;
   width:111px;
-}
+}*/
 h3{
   font-size: 35px;
 }
@@ -117,3 +118,30 @@ h4{
 .luckerList ul li span{
   font-size: 12px;
 }
+
+.mask {
+  -webkit-filter:blur(5px);
+}
+
+.result {
+  position: absolute;
+  height: 320px;
+  width: 100%;
+  left: 0; top: 50%;
+  margin-top: -160px;
+  text-align: center;
+  padding: 10px;
+  display: none;
+}
+.result span {
+  display: inline-block;
+  font-size: 25px;
+  width: 150px;
+  background: #fff;
+  line-height: 30px;
+  color: #000;
+  margin: 5px;
+  border-radius: 10px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
+  padding: 10px 0;
+}

src/static/js/index.js

@@ -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>`
+            });
+        });
+    }
+}
+

src/templates/index.html

@@ -16,11 +16,6 @@
         <h4>抽取人数：<span id="currentTimes">设置中</span></h4>
     </div>
     <div class="row">
-        <div class="left">
-            <ul class="current-list">
-
-            </ul>
-        </div>
         <div id='holder' class="holder"></div>
     </div>
     <p class="btns">
@@ -29,10 +24,14 @@
         <button href="javascript:void (0)" class="button button-3d button-primary button-rounded " id="luckyUsers" >中奖结果</button>
     </p>
 </div>
+<div class="result" style="display: none;" id="result">
+
+</div>
 
 <script type="text/javascript" src="../static/jquery-2.1.1.min.js"></script>
 <script type="text/javascript" src="../static/jquery-svg3dtagcloud-plugin-master/js/jquery.svg3dtagcloud.js"></script>
+<script type="text/javascript" src="../static/tagcanvas/tagcanvas.js"></script>
 <script type="text/javascript" src="../static/layer/layer.js"></script>
-<script type="text/javascript" src="../static/index.js"></script>
+<script type="text/javascript" src="../static/js/index.js"></script>
 </body>
 </html>