xcx

src/apis.js

@@ -28,6 +28,14 @@ const apis = {
     url: `${prefix}/draw`,
     method: 'post',
   },
+  drawStatus: { // 获取抽奖状态
+    url: `${prefix}/lp/xxx`,
+    method: 'get',
+  },
+  postDrawStatus: { // 发送抽奖状态
+    url: `${prefix}/lp/xxx`,
+    method: 'post',
+  },
   // 奖品维护
   prize: {
     list: {

src/pages/admin.vue

@@ -15,8 +15,8 @@
             :data="settings"
             :prizes="prizes"
             @submit="saveSetting"
-            @startDraw="wsSend({type: 'start'})"
-            @endDraw="wsSend({type: 'end'})"
+            @startDraw="postDrawStatus({type: 'start'})"
+            @endDraw="postDrawStatus({type: 'stop'})"
           ></prize-setting>
         </el-tab-pane>
         <el-tab-pane label="中奖名单" name="winner">
@@ -39,7 +39,6 @@
 <script>
 import getApi from '../apis.js'
 import request from '../utils/request.js'
-import { newWebsocket, sendMsg } from '../utils/websocket.js'
 
 export default {
   name: 'admin-board',
@@ -49,7 +48,6 @@ export default {
     'prize': () => import('../components/prize.vue')
   },
   created () {
-    this.initWebSocket()
     this.getSettingList()
     this.getPrizeList()
   },
@@ -68,11 +66,11 @@ export default {
     }
   },
   methods: {
-    initWebSocket () {
-      newWebsocket('ws://192.168.0.11:8080/api/ws?id=admin')
-    },
-    wsSend (target) {
-      sendMsg(target)
+    postDrawStatus (data) {
+      const api = getApi('postDrawStatus')
+      request({ ...api, params: { message: JSON.stringify(data) || '' } }).then((res) => {
+        window.console.log(res)
+      })
     },
     tabChange (tab) {
       switch (tab.name) {

src/pages/draw.vue

@@ -187,7 +187,6 @@
 import '../assets/reset.css'
 import getApi from '../apis.js'
 import request from '../utils/request.js'
-import { newWebsocket } from '../utils/websocket.js'
 export default {
   name: 'draw',
   data () {
@@ -217,23 +216,30 @@ export default {
       randomArr: [],
       windowWidth: window.innerWidth,
       windowHeight: window.innerHeight,
-      drawWidth: Math.floor(window.innerWidth * .7)
+      drawWidth: Math.floor(window.innerWidth * .7),
+      getDrawStatus: true
     }
   },
   created () {
-    this.initWebSocket()
     this.getUserList()
     this.getPrizeList()
   },
   mounted () {
     this.$nextTick(() => {
       this.canvasInit()
+      this.drawStatus()
+      // var timer = null
+      // timer = window.setInterval(() => {
+      //   if (this.getDrawStatus) {
+      //     this.drawStatus()
+      //   } else {
+      //     window.clearInterval(timer)
+      //     timer = null
+      //   }
+      // }, 60000)
     })
   },
   methods: {
-    initWebSocket () {
-      newWebsocket('ws://192.168.0.11:8080/api/ws?id=web', this.webSocketCallback)
-    },
     webSocketCallback (e) {
       console.log(e)
     },
@@ -343,6 +349,26 @@ export default {
         this.initUsers = res.users.map(x => ({ ...x, active: false, show: true, delete: false, orgName: x.UserOrg }))
       })
     },
+    drawStatus () {
+      if (this.getDrawStatus) {
+        this.getDrawStatus = false
+        const api = getApi('drawStatus')
+        request(api).then((res) => {
+          res = JSON.parse(res)
+          this.getDrawStatus = true
+          // this.initDraw(res)
+          if (res.type === 'start') {
+            this.startDrawStep()
+            this.drawStatus()
+          } else if (res.type === 'stop') {
+            this.stopDrawStep()
+          }
+        }).catch(() => {
+          this.getDrawStatus = true
+          this.drawStatus()
+        })
+      }
+    },
     getPrizeList () { // 获取奖品数据
       const api = getApi('prize.list')
       request(api).then((res) => {
@@ -355,93 +381,99 @@ export default {
         this.initDraw()
       }
     },
-    initDraw () { // 初始化抽奖
+    initDraw (res) { // 初始化抽奖
       document.getElementsByTagName('html')[0].onkeydown = (e) => { // 页面添加键盘点击事件监听
         e = e || event
         if (e.ctrlKey && e.keyCode == 13) { // 启停抽奖组合键：Ctrl + Enter
           this.sureStatus = true
           if (!this.status) { // 重新抽奖
-            const api = getApi('draw')
-            request(api).then((res) => {
-              this.currentPrize = {
-                img: this.prizeList.filter((item) => { if (item.PrizeName === res.winner[0].PrizeName) return item.Picture })[0].Picture,
-                name: res.winner[0].PrizeName || '未知奖品',
-                num: res.winner.length || 0,
-                type: this.prizeList.filter((item) => { if (item.PrizeName === res.winner[0].PrizeName) return item.PrizeType })[0].PrizeType
-              }
-              this.winner = res.winner || []
-              this.drawCount = res.winner.length || 0
-              this.bgGrey = true
-              this.projectStart = false
-              this.status = !this.status
-              this.users = []
-              this.drawUsersArr = [] // 置空中奖数据
-              this.calcRandomArr(this.initUsers.length > 90 ? 90 : this.initUsers.length, this.initUsers, this.users, 'UserId', this.drawCount)
-              this.arrTimer = window.setInterval(() => {
-                this.users = []
-                this.calcRandomArr(this.initUsers.length > 90 ? 90 : this.initUsers.length, this.initUsers, this.users, 'UserId', this.drawCount)
-              }, this.time)
-            })
+            this.startDrawStep()
           } else { // 抽奖变换动画暂定
-            this.status = !this.status
-            clearInterval(this.arrTimer)
-            this.arrTimer = null
-            var num = 0
-            this.users.map((item) => { // 记录中奖数据，以便读取过渡动画结束位置坐标
-              if (item.active) {
-                item.UserName = this.winner[num].UserName
-                item.orgName = this.winner[num].UserOrg
-                item.isReset = true
-                num += 1
-                this.drawUsersArr.push({ ...item, width: 0, startX: '', startY: '', listX: '', listY: '' })
-              }
-            })
-            this.$nextTick(() => {
-              this.drawUsersArr.map((item, index) => { // 记录中奖名单结束位置坐标
-                item.endX = document.getElementsByClassName('targetLi')[index].getBoundingClientRect().x
-                item.endY = document.getElementsByClassName('targetLi')[index].getBoundingClientRect().y
-              })
-              window.setTimeout(() => {
-                this.drawUsersArr.map((item, index) => { // 记录中奖名单结束位置坐标
-                  item.listX = document.getElementsByClassName('endListLi')[index].getBoundingClientRect().x
-                  item.listY = document.getElementsByClassName('endListLi')[index].getBoundingClientRect().y
-                })
-              }, 50)
-              for (var n = 0; n < this.drawCount; n++) { // 记录中奖名单开始位置坐标
-                this.drawUsersArr[n].startX = document.getElementsByClassName('activeLi')[n].getBoundingClientRect().x
-                this.drawUsersArr[n].startY = document.getElementsByClassName('activeLi')[n].getBoundingClientRect().y
-                this.drawUsersArr[n].width = document.getElementsByClassName('activeLi')[n].getBoundingClientRect().width
-              }
-              this.drawUsersArr.map((item, index) => {
-                item.UserId = this.winner[index].UserId,
-                  item.UserName = this.winner[index].UserName,
-                  item.orgName = this.winner[index].UserOrg
-              })
-              window.setTimeout(() => {
-                this.users.map((item) => { // 隐藏未抽中数据
-                  item.show = false
-                })
-                this.drawUsersArr.map((item) => {
-                  item.startX = item.endX
-                  item.startY = item.endY
-                })
-                window.setTimeout(() => {
-                  this.animationOff = true
-                }, 1000)
-                window.setTimeout(() => {
-                  this.bgGrey = false
-                  this.hidePrize = false
-                  this.drawUsersArr.map((item) => {
-                    item.startX = item.listX
-                    item.startY = item.listY
-                  })
-                }, 2500)
-              }, 1000)
-            })
+            this.stopDrawStep()
           }
         }
       }
     },
+    startDrawStep () {
+      const api = getApi('draw')
+      request(api).then((res) => {
+        this.currentPrize = {
+          img: this.prizeList.filter((item) => { if (item.PrizeName === res.winner[0].PrizeName) return item.Picture })[0].Picture,
+          name: res.winner[0].PrizeName || '未知奖品',
+          num: res.winner.length || 0,
+          type: this.prizeList.filter((item) => { if (item.PrizeName === res.winner[0].PrizeName) return item.PrizeType })[0].PrizeType
+        }
+        this.winner = res.winner || []
+        this.drawCount = res.winner.length || 0
+        this.bgGrey = true
+        this.projectStart = false
+        this.status = !this.status
+        this.users = []
+        this.drawUsersArr = [] // 置空中奖数据
+        this.calcRandomArr(this.initUsers.length > 90 ? 90 : this.initUsers.length, this.initUsers, this.users, 'UserId', this.drawCount)
+        this.arrTimer = window.setInterval(() => {
+          this.users = []
+          this.calcRandomArr(this.initUsers.length > 90 ? 90 : this.initUsers.length, this.initUsers, this.users, 'UserId', this.drawCount)
+        }, this.time)
+      })
+    },
+    stopDrawStep () {
+      this.status = !this.status
+      clearInterval(this.arrTimer)
+      this.arrTimer = null
+      var num = 0
+      this.users.map((item) => { // 记录中奖数据，以便读取过渡动画结束位置坐标
+        if (item.active) {
+          item.UserName = this.winner[num].UserName
+          item.orgName = this.winner[num].UserOrg
+          item.isReset = true
+          num += 1
+          this.drawUsersArr.push({ ...item, width: 0, startX: '', startY: '', listX: '', listY: '' })
+        }
+      })
+      this.$nextTick(() => {
+        this.drawUsersArr.map((item, index) => { // 记录中奖名单结束位置坐标
+          item.endX = document.getElementsByClassName('targetLi')[index].getBoundingClientRect().x
+          item.endY = document.getElementsByClassName('targetLi')[index].getBoundingClientRect().y
+        })
+        window.setTimeout(() => {
+          this.drawUsersArr.map((item, index) => { // 记录中奖名单结束位置坐标
+            item.listX = document.getElementsByClassName('endListLi')[index].getBoundingClientRect().x
+            item.listY = document.getElementsByClassName('endListLi')[index].getBoundingClientRect().y
+          })
+        }, 50)
+        for (var n = 0; n < this.drawCount; n++) { // 记录中奖名单开始位置坐标
+          this.drawUsersArr[n].startX = document.getElementsByClassName('activeLi')[n].getBoundingClientRect().x
+          this.drawUsersArr[n].startY = document.getElementsByClassName('activeLi')[n].getBoundingClientRect().y
+          this.drawUsersArr[n].width = document.getElementsByClassName('activeLi')[n].getBoundingClientRect().width
+        }
+        this.drawUsersArr.map((item, index) => {
+          item.UserId = this.winner[index].UserId,
+            item.UserName = this.winner[index].UserName,
+            item.orgName = this.winner[index].UserOrg
+        })
+        window.setTimeout(() => {
+          this.users.map((item) => { // 隐藏未抽中数据
+            item.show = false
+          })
+          this.drawUsersArr.map((item) => {
+            item.startX = item.endX
+            item.startY = item.endY
+          })
+          window.setTimeout(() => {
+            this.animationOff = true
+          }, 1000)
+          window.setTimeout(() => {
+            this.bgGrey = false
+            this.hidePrize = false
+            this.drawUsersArr.map((item) => {
+              item.startX = item.listX
+              item.startY = item.listY
+            })
+          }, 2500)
+        }, 1000)
+      })
+    },
     calcRandomArr (num, pArr, aArr, key, activeNum) {
       var randomNum = Math.floor(Math.random() * pArr.length), bool = false
       if (pArr.length > num) {

src/utils/websocket.js

@@ -1,32 +0,0 @@
-let ws
-
-export function newWebsocket (url, cb) {
-  ws = new WebSocket(url)
-  cb = cb || function () { }
-  ws.onopen = () => {
-    window.console.log('开始连接...')
-    ws.send('ping')
-    window.setInterval(() => {
-      window.console.log('send ping')
-      ws.send('ping')
-    }, 60000)
-  }
-  ws.onmessage = (e) => {
-    window.console.log(e)
-    if (e === 'ping') {
-      ws.sendMsg('pong')
-    } else if (e === 'pong') {
-      window.console.log('心跳完成' + Date.now())
-    } else {
-      cb(e)
-    }
-    window.console.log(e)
-  }
-  ws.onclose = () => {
-    window.console.log('关闭连接...')
-  }
-}
-
-export function sendMsg (msg) {
-  ws.send(msg)
-}