解决冲突

src/App.vue

@@ -33,7 +33,7 @@ export default {
       proxy: {},
       currentId: 0,
       url: "/static/audio/bg_m_000.mp3",
-      AudioPlayType: 1,
+      AudioPlayType: 1
     }
   },
   mounted () {
@@ -44,6 +44,24 @@ export default {
         $this.MsgBus.$emit('nextMusic')
       }
     }, false);
+    // 游戏准备321的音乐
+    this.MsgBus.$on('daojishiMp3', function (type) {
+      if (type === 1) { // 倒计时
+        $this.url = '/static/audio/ready321go.mp3'
+      } else if (2){ // 开始
+        $this.url = '/static/audio/game_running.mp3'
+      }
+      setTimeout(()=>{
+        $this.setAudioPlay(0)
+      }, 50)
+    })
+    // 更换背景音乐
+    this.MsgBus.$on('changeBGM', function (url) {
+      $this.url = url
+      setTimeout(()=>{
+        $this.setAudioPlay(0)
+      }, 50)
+    })
     //$this.connectServer()
     this.MsgBus.$on('setBarrageShow', function (type) {
       $this.barrageIsShow = type
@@ -110,6 +128,9 @@ export default {
       $this.$PROXY.invoke("SendBarrage", '0.0 让我康康是谁在说我坏话？').done(msg => {
           console.log(msg)
       });
+      $this.$PROXY.invoke("JoinGame", 'Mouse').done(msg => {
+        console.log(msg)
+      });
     },
     getMsg () {
       var $this = this;
@@ -133,7 +154,7 @@ export default {
 </script>
 
 <style>
-@import url("//at.alicdn.com/t/font_1574056_qf60my177p.css");
+@import url("//at.alicdn.com/t/font_1574056_jsd5ri47jy.css");
 @import "./assets/css/init.css";
 @import "./assets/css/animate.css";
 #app {

src/assets/css/GameRanking.css

+.Ranking{
+    width: 100%;
+    height: 100%;
+    background: url(/static/image/gamerank/bg.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 10009;
+}
+.Ranking .logo{
+    position: relative;
+    left: 4rem;
+    top: 2rem;
+}
+.Ranking p.tit{
+    text-align: center;
+    font-size: 4rem;
+    color: white;
+    position: relative;
+    top: -20px;
+}
+.Ranking .rank-box{
+    width: 80%;
+    margin: 0 auto;
+    display: flex;
+    padding-top: 4rem;
+}
+.Ranking .rank-box .item {
+    width: 9rem;
+}
+.Ranking .rank-box .item .head{
+    position: relative;
+    width: 7rem;
+    height: 7rem;
+    border-radius: 50%;
+    background:linear-gradient(0deg,rgba(247,213,23,1),rgba(255,171,2,1));
+    padding: .4rem;
+    margin: 0 auto;
+}
+.Ranking .rank-box .item .head .maozi{
+    position: absolute;
+    left: -12px;
+    top: -20px;
+    box-sizing: border-box;
+}
+.Ranking .rank-box .item .head .user-img{
+    width: 7rem;
+    height: 7rem;
+    border-radius: 50%;
+}
+.Ranking .rank-box .item .body{
+    background: url(/static/image/gamerank/tiao.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 60px;
+    margin: 0 auto;
+    height: 292px;
+    position: relative;
+} 
+.Ranking .rank-box .item .body .color{
+    position: absolute;
+    left: 5%;
+    bottom: 0;
+    width: 89%;
+    background:linear-gradient(90deg,rgba(186,76,11,1),rgba(233,154,53,1),rgba(253,244,139,1),rgba(209,151,25,1));
+    border-radius:0px 0px 30px 30px;
+}
+.Ranking .rank-box .item .name{
+    text-align: center;
+    font-family: 'PingFangR';
+    font-size: 2.4rem;
+    color: white;
+}
+.Ranking .rank-box .item .name p:nth-child(1) {
+    padding: .4rem;
+}
\ No newline at end of file

src/assets/css/PerformRanking.css

+.PerformRanking{
+    width: 100%;
+    height: 100%;
+    background: url(/static/image/jiemu/bg.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+}
+.PerformRanking .logo{
+    position: relative;
+    left: 4rem;
+    top: 2rem;
+}
+.PerformRanking .tit{
+    text-align: center;
+    font-size: 7rem;
+    color: white;
+}
+.PerformRanking .tit span{
+    -webkit-background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: url(../../../static/image/fongt-bg.png);
+    background-position: left top;
+    background-repeat: repeat;
+}
+.rank-box{
+    background-color: wheat;
+    height: 65%;
+    box-sizing: border-box;
+}

src/assets/css/bierede.css

@@ -122,26 +122,26 @@
 
 .container .countdown .countdown_left,.container .countdown .countdown_right {
 	width: 80px;
-	height: 540px;
+	height: 500px;
 	position: fixed;
 	z-index: 3;
 	display: flex
 }
 
 .container .countdown .countdown_left {
-	top: 20%;
+	top: 10%;
 	left: 5%
 }
 
 .container .countdown .countdown_right {
-	top: 20%;
+	top: 10%;
 	right: 5%
 }
 
 .container .countdown .countdown_left .axis,.container .countdown .countdown_right .axis {
 	position: absolute;
 	top: 0;
-	left: 28%;
+	left: 24%;
 	width: 36px;
 	height: 486px;
 	border-radius: 20px;
@@ -152,7 +152,7 @@
 }
 
 .container .countdown .countdown_left .axis .user,.container .countdown .countdown_right .axis .user {
-	margin-top: 150%;
+	margin-top: 64%;
 	width: 100%;
 	position: relative;
 	top: 0;
@@ -821,7 +821,7 @@
     right: .5%;
     z-index: 1000;
     width: 160px;
-    height: 80px;
+    height: 85px;
     border-radius: 8px;
     background: url(../../../static/image/shuqian/g_footer_bg2.png) no-repeat;
     background-size: 100% 100%;
@@ -830,6 +830,12 @@
     justify-content: center;
     align-items: center;
 }
+.dalaoshu .z_index10010{
+	z-index: 10010 !important;
+}
+.dalaoshu .hd-game-btn-container.hd-game-btn-container2{
+    width: 120px;
+}
 .dalaoshu .hd-game-btn-container .hd-game-btn {
     min-width: 70px;
     max-width: 100px;
@@ -920,8 +926,8 @@
     height: 70px;
 }
 .dalaoshu .prompt_img span {
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-left: 8px;
+    margin-right: 8px;
     width: 70px;
     height: 70px;
     display: inline-block;

src/assets/css/pageNav.css

@@ -20,7 +20,7 @@
   position: relative;
   opacity: 0.1;
   transition: opacity linear 4s;
-  padding-right: 20rem;
+  padding-right: 16rem;
   box-sizing: border-box;
 }
 .pageNav .left_nav:hover{
@@ -33,7 +33,7 @@
   width: 8rem;
   height: 5.16rem;
   border-radius: 5px;
-  margin-left: 5px;
+  margin-right: 1rem;
   background: rgba(35,35,45,.7);
   text-align: center;
   cursor: pointer;
@@ -80,7 +80,7 @@
 }
 .control_btn{
   position: absolute;
-  right: 12rem;
+  right: 16rem;
 }
 .music_box{
   position: absolute;
@@ -96,7 +96,7 @@
   color: #e9d5ab !important;
   border: none;
   width: 100px;
-  padding-right: 0 !important;
+  padding: 0 !important;
   text-align: center; 
 }
 .music-select .el-input__suffix{
@@ -108,4 +108,5 @@
 .music_box .iconfont{
   font-size: 2.8rem;
   cursor: pointer;
+  margin-right: .8rem;
 }
\ No newline at end of file

src/assets/js/menuJson.js

@@ -3,13 +3,15 @@ const leftNavMenu = [
     Class: 'iconfont iconshouye',
     Name: '首页',
     Url: 'index',
-    children: []
+    children: [],
+    bgm: '/static/audio/bg_m_000.mp3',
   },
   {
     Class: 'iconfont iconqiandao',
     Name: '签到',
     Url: 'SignIn',
-    children: []
+    children: [],
+    bgm: '/static/audio/signIn.mp3',
   },
   {
     Class: 'iconfont iconyouxi',
@@ -20,19 +22,22 @@ const leftNavMenu = [
         Class: 'iconfont icon-laoshu',
         Name: '瑞鼠迎福',
         Url: 'Mouse',
-        children: []
+        children: [],
+        bgm: '/static/audio/game_mouse_bg.mp3',
       },
       {
         Class: 'iconfont iconqian',
         Name: '疯狂数钞票',
         Url: 'Money',
-        children: []
+        children: [],
+        bgm: '/static/audio/game_money_bg.mp3',
       },
       {
         Class: 'iconfont icondatiqia',
         Name: '答题',
         Url: 'Answer',
-        children: []
+        children: [],
+        bgm: '/static/audio/toupiao.mp3',
       }
     ]
   },
@@ -40,13 +45,22 @@ const leftNavMenu = [
     Class: 'iconfont iconchoujiang',
     Name: '抽奖',
     Url: 'LuckDraw',
-    children: []
+    children: [],
+    bgm: '/static/audio/choujiang.mp3',
   },
   {
     Class: 'iconfont iconzu',
     Name: '投票',
     Url: 'Vote',
-    children: []
+    children: [],
+    bgm: '/static/audio/toupiao.mp3',
+  },
+  {
+    Class: 'iconfont iconpaihangbang',
+    Name: '排行榜',
+    Url: 'PerformRanking',
+    children: [],
+    bgm: '/static/audio/choujiang.mp3',
   }
 ]
 const controlMenu = [

src/components/PerformRanking.vue

+<template>
+  <div class="PerformRanking">
+    <img class="logo" src="/static/image/jiemu/logo.png" alt="">
+    <div>
+      <p class="tit yinxiang2020">
+        <span v-for="(item, index) in tit" :key="index">{{item}}</span>
+      </p>
+      <p class="tit yinxiang2020">
+        <span v-for="(item, index) in tit2" :key="index">{{item}}</span>
+      </p>
+    </div>
+    <div class="rank-box">
+      
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PerformRanking',
+  data () {
+    return {
+      tit: '和平印象2019年年会',
+      tit2: '节目评选结果'
+    }
+  },
+  activated () {},
+  created () {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+@import "../assets/css/PerformRanking.css";
+</style>

src/components/pageNav.vue

 <template>
   <div class="pageNav">
     <div class="left_nav ce9">
-      <div class="left_nav_item" @click="goPage(item)" @mouseover="mouseOver(index)" @mouseleave="mouseLeave" v-for="(item, index) in leftNavMenu" :key="index" :index="index">
+      <div class="left_nav_item" @click.stop="goPage(item)" @mouseover="mouseOver(index)" @mouseleave="mouseLeave" v-for="(item, index) in leftNavMenu" :key="index" :index="index">
         <div class="f1">
           <i :class="item.Class"></i>
         </div>
         <template v-if="item.children.length">
           <p class="item_name">{{item.Name}}</p>
           <div class="left_nav_item_children" :class="animateClass" v-if="mouseIndex === index">
-            <div class="children_item" @click="goPage(children)" v-for="(children, childrenIndex) in item.children" :key="childrenIndex" :index="`${index}-${childrenIndex}`" >
+            <div class="children_item" @click.stop="goPage(children)" v-for="(children, childrenIndex) in item.children" :key="childrenIndex" :index="`${index}-${childrenIndex}`" >
               <i :class="children.Class"></i><span>{{children.Name}}</span>
             </div>
           </div>
@@ -110,7 +110,8 @@ export default {
         this.MsgBus.$emit('setBarrageShow', this.controlMenu[index].state)
       } else if (Name === '声音') {
         console.log('sy')
-        this.mutePage(this.controlMenu[index].state)
+        let type = this.controlMenu[index].state ? 0 : 1
+        this.changeAudioState(type)
       } else if (Name === '全屏') {
         console.log('qp')
         if (!this.controlMenu[index].state) {
@@ -125,9 +126,6 @@ export default {
       elem.muted = t
       elem.pause()
     },
-    mutePage: function (t) {
-      document.querySelectorAll('audio').forEach(audio => this.setMute(audio, !t))
-    },
     fullScreen: function () { // 全屏
       let element = document.documentElement
       if (element.requestFullscreen) {
@@ -157,6 +155,8 @@ export default {
         window.open('http://activity.oytour.com/html/SignIn/signin.html')
         return
       }
+      console.log(obj)
+      this.MsgBus.$emit('changeBGM', obj.bgm)
       if (!obj.children.length && this.$route.name !== obj.Url) {
         this.$router.push({
           name: obj.Url

src/components/playGame/GameRanking.vue

+<template>
+  <div class="Ranking">
+    <img class="logo" src="/static/image/jiemu/logo.png" alt="">
+    <p class="tit"><span>排</span> <span>行</span> <span>榜</span></p>
+    <div class="rank-box">
+      <div class="item" v-for="(item, index) in rankingList">
+        <div class="head">
+          <img v-if="index < 3" class="maozi" :src="`/static/image/gamerank/maozi_${index+1}.png`" alt="">
+          <img class="user-img" :src="item.photo" alt="">
+        </div>
+        <div class="body">
+          <div class="color" :style="{'height': (item.height * 20) + 'px'}"></div>
+        </div>
+        <div class="name">
+          <p>{{item.name}}</p>
+          <p>{{item.rank}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Ranking',
+  props: {
+    rankingList: {
+      type: Array,
+      default: []
+    }
+  },
+  data () {
+    return {
+      
+    }
+  },
+  activated () {},
+  created () {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style scoped>
+@import "../../assets/css/GameRanking.css";
+</style>

src/components/playGame/Money.vue

@@ -164,7 +164,7 @@
   right: 0.5%;
   z-index: 1000;
   width: 160px;
-  height: 80px;
+  height: 85px;
   border-radius: 8px;
   background: url(../../../static/image/shuqian/g_footer_bg2.png) no-repeat;
   background-size: 100% 100%;
@@ -173,6 +173,9 @@
   justify-content: center;
   align-items: center;
 }
+.shuchaopiao .hd-game-btn-container.hd-game-btn-container2{
+    width: 120px;
+}
 .shuchaopiao .hd-game-btn-container .hd-game-btn {
   min-width: 70px;
   max-width: 100px;
@@ -912,7 +915,7 @@
           <img class="winnerRipple move" src="../../../static/image/shuqian/winner-quan1.png" alt />
         </div>
         <!-- 按钮 -->
-        <div class="hd-game-btn-container">
+        <div class="hd-game-btn-container hd-game-btn-container2">
           <div class="hd-game-btn" @click="getReady()" v-show="status==0">
             <i class="iconfont icon-go"></i>
             <span>准备</span>
@@ -1184,6 +1187,7 @@ export default {
         }
         let imgPath1 = num.split("")[0];
         let imgPath2 = num.split("")[1];
+        console.log(imgPath2)
         let countHtml = `<img class="img-num imgNumberImg" src='../../../static/image/shuqian/${imgPath1}.png'/>
                        <img class="img-num imgNumberImg2" src='../../../static/image/shuqian/${imgPath2}.png'/>`;
         this.$refs.countBox.innerHTML = countHtml;

src/components/playGame/Mouse.vue

@@ -30,7 +30,7 @@
           </div>
         </div>
       </div>
-      <div class="cover-container" v-show="showReady">
+      <div class="cover-container" v-show="noReady">
         <div class="winner-topBs">
           <img src="/static/image/dalaoshu/new-back-topbs.png" />
         </div>
@@ -51,31 +51,37 @@
         <div class="Number_prompt_div">
           <span class="Numberpro_number">
             <span class="Numberpro_left">游戏已进入</span>
-            <span class="game_join_total">1</span>
+            <span class="game_join_total">{{RoomAllUser.length}}</span>
             <span class="Numberpro_right">人</span>
           </span>
         </div>
         <div class="prompt_imgdiv">
           <div class="prompt_img">
-            <span class="waiting-box">
-              <img src="/static/image/shuqian/lantern.png" alt="">
+            <span class="waiting-box"  v-for="(item, index) in RoomAllUser" :key="index" v-if="index < 9">
+              <img :src="item.photo" alt="">
             </span>
           </div>
         </div>
       </div>
       <!-- 按钮 -->
-      <div class="hd-game-btn-container">
+      <div class="hd-game-btn-container hd-game-btn-container2" v-show="noReady">
         <div class="hd-game-btn" @click="getReady()">
           <i class="iconfont icon-go"></i>
           <span>准备</span>
         </div>
       </div>
-      <div class="hd-game-btn-container" v-show="!showReady">
+      <div class="hd-game-btn-container hd-game-btn-container2 z_index10010" v-show="rankingShow">
+        <div class="hd-game-btn" @click="RestGame()">
+          <i class="iconfont icon-go"></i>
+          <span>重置</span>
+        </div>
+      </div>
+      <div class="hd-game-btn-container" v-show="!showCount && !noReady && !showThrityCount">
         <div class="hd-game-btn" @click="StartGame()">
           <i class="iconfont icon-go"></i>
           <span>开始</span>
         </div>
-        <div class="hd-game-btn" style="display:none;">
+        <div class="hd-game-btn" v-if="gameOverState || (!showCount && !noReady)" @click="RestGame">
           <i class="iconfont icon-lajitong"></i>
           <span>重置</span>
         </div>
@@ -89,16 +95,64 @@
         <img class="img-num imgNumberImg" src='../../../static/image/shuqian/3.png'/>
         <img class="img-num imgNumberImg2" src='../../../static/image/shuqian/0.png'/>
       </div>
+      <!-- 两边排行榜 -->
+      <div class="countdown">
+        <div class="countdown_left">
+          <div class="axis">
+            <div class="user" v-if="rankingListNow.length && index <= 4" v-for="(item, index) in rankingListNow" :key="index">
+              <div class="texts">
+                <p class="name">{{item.name}}</p>
+                <p class="score">{{item.rank}}</p>
+              </div>
+              <img class="head_img" :src="item.photo">
+              <div class="avatar">
+                <img src="/static/image/dalaoshu/ranking_bg.png">
+                <div class="ranking">{{index+1}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="time" :class="{'num-scale-bg': totalTime2 < 30}"></div>
+          <div class="text" :class="{'num-scale-bg': totalTime2 < 30}">
+            <p>倒计时</p>
+            <h1>{{totalTime2}}</h1>
+          </div>
+        </div>
+        <div class="countdown_right">
+          <div class="axis">
+            <div class="user" v-if="rankingListNow.length && index > 4" v-for="(item, index) in rankingListNow" :key="index">
+              <div class="texts">
+                <p class="name">{{item.name}}</p>
+                <p class="score">{{item.rank}}</p>
+              </div>
+              <img class="head_img" :src="item.photo">
+              <div class="avatar">
+                <img  src="/static/image/dalaoshu/ranking_bg.png">
+                <div class="ranking">{{index+1}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="time" :class="{'num-scale-bg': totalTime2 < 30}"></div>
+          <div class="text" :class="{'num-scale-bg': totalTime2 < 30}">
+              <p>倒计时</p>
+              <h1>{{totalTime2}}</h1>
+          </div>
+        </div>
+      </div>
+      <rank-list :rankingList="rankingList" v-show="rankingShow"></rank-list>
     </div>     
   </div>
 </template>
 
 <script>
+import RankingListPage from './GameRanking'
 export default {
   name: 'Mouse',
+  components: {
+    'rank-list': RankingListPage
+  },
   data () {
     return {
-      showReady: true,
+      noReady: true,
       totalTime: 3,
       totalTime2: 30,
       proxy: {},
@@ -174,60 +228,155 @@ export default {
       dataIndex: 0,
       createMouseTime: null,
       rankShow: false,
+      Code: 'Mouse',
+      RoomAllUser: [],
+      gameOverState: false,
+      rankingShow: false,
+      rankingList: [],
+      rankingListNow: []
     }
   },
   activated () {
     
   },
   mounted () {
-    this.connectServer()
-    this.proxy.on("getChangeMenu", data => {
+    let $this = this
+    this.initData()
+    $this.$PROXY.on("getChangeMenu", data => {
+      console.log(data.status)
       if (data.status === 1) {
         console.log('准备。。。。')
-        this.laoshuData = JSON.parse(data.data)
+        $this.laoshuData = JSON.parse(data.data)
       } else if (data.status === 2) {
         console.log('进行中。。。。')
+        $this.laoshuData = JSON.parse(data.data)
       } else if (data.status === -1) {
         console.log('结束了。。。。')
-        this.rankShow = true
+        $this.gameOver()
+      }
+    })
+    // 监听加入者
+    this.$PROXY.on("notifyNewMouseGamerUser", data => {
+      console.log(data.n + '加入了游戏~~~')
+      $this.RoomAllUser.push({
+        name: data.n,
+        photo: data.p
+      })
+    })
+    // 监听游戏结束 展示排行榜
+    this.$PROXY.on("notifyMouseGamerResult", data => {
+      console.log(data)
+      $this.getRankList(data)
+    })
+    // 监听玩家分数
+    this.$PROXY.on("notifyeMouseGamerRank", data => {
+      console.log(data)
+      $this.rankingListNow = [];
+      if (data.length) {
+        data.map(x=>{
+          $this.rankingListNow.push({
+            name: x.n,
+            photo: x.p,
+            rank: x.s
+          })
+        })
       }
     })
   },
   methods: {
-    connectServer() {
+    // 游戏结束后处理的东西
+    gameOver: function () {
+      this.gameOverState = true
+      this.dataIndex = 0
+      this.totalTime2 = -1
+      this.showPeople = false
+    },
+    // 初始化游戏
+    RestGame: function () {
       let $this = this
-      var conn = $.hubConnection("http://192.168.2.65:7838/signalr", {
-        qs: `i=888888&n=罗超&p=${encodeURIComponent(
-          "http://imgfile.oytour.com/New/Upload/User/20191018150051176.png"
-        )}`
+      this.$PROXY.invoke("RestGame", $this.Code).done(msg => {
+        console.log('初始化游戏。。。')
       });
-      this.proxy = conn.createHubProxy("annualLeaveHub");
-      conn
-        .start()
-        .done(data => {
-          // $this.initData()
+      this.noReady = true
+      this.showPeople = false
+      this.rankingShow = false
+      this.dataIndex = 0
+      this.totalTime2 = 30
+    },
+    // 获取当前加入的人
+    GetRoomAllUser: function () {
+      let $this = this
+      $this.RoomAllUser = []
+      this.$PROXY.invoke("GetRoomAllUser", $this.Code).done(data => {
+        data.map(x=>{
+          $this.RoomAllUser.push({
+            name: x.n,
+            photo: x.p
           })
-        .fail(data => {});
+        })
+      });
     },
     initData: function () {
-      this.proxy.invoke("RestGame", 'Mouse').done(msg => {
-        console.log('11111111')
+      let $this = this
+      try {
+        this.$PROXY.invoke("GetMenuStatus", $this.Code).done(data => {
+          console.log(data.status)
+          if (data.status === 1) {
+            $this.noReady = false
+            $this.showPeople = true
+            $this.laoshuData = JSON.parse(data.data)
+            $this.GetRoomAllUser()
+          } else if (data.status === 2) {
+            $this.noReady = false
+            $this.showCount = true
+            $this.showPeople = false
+            $this.countDown()
+            $this.laoshuData = JSON.parse(data.data)
+            $this.StartGame()
+          } else if (data.status === -1) {
+            $this.getRankList(data.rank)
+          }
         });
+      } catch (error) {
+        setTimeout(() => {
+          $this.initData()
+        }, 1000);
+      }
+    },
+    getRankList: function (data) {
+      if (data.length) {
+        data.map((x, index)=>{
+          this.rankingList.push({
+            name: x.n,
+            photo: x.p,
+            rank: x.s,
+            height: data.length - index
+          })
+        })
+        this.rankingShow = true
+      }
     },
     StartGame: function () {
-      this.showCount = true
-      this.showPeople = false
-      this.proxy.invoke("BeginGame", 'Mouse').done(msg => {
+      console.log('游戏开始111111·')
+      let $this = this;
+      this.$PROXY.invoke("BeginGame", $this.Code).done(msg => {
         console.log('游戏开始了·')
       });
+      // 开始游戏先播放音乐在启用
+      $this.MsgBus.$emit('daojishiMp3', 1)
+      setTimeout(()=>{
+        this.showCount = true
+        this.showPeople = false
         this.countDown()
+      }, 1000)
+      
     },
      // 321倒计时
     countDown () {
-      let clock = window.setInterval(() => {
+      let clock2 = window.setInterval(() => {
         this.totalTime--
         if (this.totalTime === 0) {
-          window.clearInterval(clock)
+          window.clearInterval(clock2)
           this.showCount = false
           this.totalTime = 3
           this.showThrityCount = true
@@ -240,7 +389,7 @@ export default {
     createMouse () {
       let pathStr = '/static/image/dalaoshu/'
       let $this = this
-      if (this.dataIndex < this.laoshuData.length) {
+      if (this.dataIndex > this.laoshuData.length - 1 || this.gameOverState) {
         return
       }
       this.createMouseTime = setTimeout(()=>{
@@ -254,11 +403,13 @@ export default {
         $this.createMouse()
         $this.dataIndex++
         $this.$forceUpdate()
-      }, $this.laoshuData[$this.dataIndex-1].Interval + 300)
+      }, $this.laoshuData[$this.dataIndex].Interval + 300)
     },
     // 30秒倒计时
     countDown30 () {
-      let clock = window.setInterval(() => {
+      let $this = this
+      $this.MsgBus.$emit('daojishiMp3', 2)
+      let clock2 = window.setInterval(() => {
         this.totalTime2--
         let num = this.totalTime2.toString()
         if (this.totalTime2 < 10) {
@@ -266,12 +417,12 @@ export default {
         }
         let imgPath1 = num.split('')[0]
         let imgPath2 = num.split('')[1]
+        console.log(imgPath2)
         let countHtml = `<img class="img-num imgNumberImg" src='../../../static/image/shuqian/${imgPath1}.png'/>
                        <img class="img-num imgNumberImg2" src='../../../static/image/shuqian/${imgPath2}.png'/>`
         this.$refs.countBox.innerHTML = countHtml
-        if (this.totalTime2 === -1) {
-          window.clearInterval(clock)
-          this.createMouseTime = null
+        if (this.totalTime2 < 0) {
+          window.clearInterval(clock2)
           this.dataIndex = 0
           this.showThrityCount = false
           this.totalTime2 = 30
@@ -279,11 +430,12 @@ export default {
       }, 1000)
     },
     getReady: function () {
-      this.proxy.invoke("ReadyGame", 'Mouse').done(msg => {
-        console.log(msg)
+      let $this = this
+      this.$PROXY.invoke("ReadyGame", $this.Code).done(msg => {
+        console.log('游戏准备啦~~')
       });
       this.showPeople = true
-      this.showReady = false
+      this.noReady = false
     }
   }
 }

src/plugin/signalr.js

@@ -4,7 +4,7 @@ let PROXY = null;
 
 let HUB = null;
 
-const HUB_API = 'http://localhost:7838/signalr';
+const HUB_API = 'http://192.168.2.66:7838/signalr';
 
 // 建立连接
 export function startConnection() {

src/router/index.js

@@ -8,6 +8,7 @@ import LuckDraw from '@/components/playGame/LuckDraw'
 import Vote from '@/components/playGame/Vote'
 import Answer from '@/components/playGame/Answer'
 import SignIn from '@/components/SignIn'
+import PerformRanking from '@/components/PerformRanking'
 Vue.use(Router)
 export default new Router({
   routes: [
@@ -59,6 +60,14 @@ export default new Router({
         title: '投票',
         keepAlive: false
       }
+    }, {
+      path: '/PerformRanking',
+      name: 'PerformRanking',
+      component: PerformRanking,
+      meta: {
+        title: '排行榜',
+        keepAlive: false
+      }
     }, {
       path: '/Answer',
       name: 'Answer',