add full screen

src/views/gambleGameBucket/detail/index.vue

-<template>
+<template >
 <div class="app-container calendar-list-container">
   <div class="app-container">
      <div class="block">
         </el-select>
         </el-col >
         <el-col :offset="10" :span="8">
-            <span class="demonstration">時間 : {{moment(this.roundTime)}}</span>
+          <span @click="dialogVisible = true" class="demonstration">時間 : {{moment(this.roundTime)}}</span>
         </el-col>
       </el-row>
     </div>
   </div>
+  
     <el-table header-row-class-name="init" :data="bookie" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
       style="width: 100%">      
       <el-table-column label="本期開獎" lable-className="title" align="center">   
         </el-table-column>
         </el-table-column>      
     </el-table>
+
+
+
+  <el-dialog
+    :visible.sync="dialogVisible"
+    fullscreen="true"
+    :before-close="handleClose">
+    <div class="app-container">
+     <div class="block">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <span class="demonstration">關數</span>
+          <el-select @change='handleFilter' style="width: 120px" class="filter-item" v-model="listQuery.round" placeholder="關">
+          <el-option v-for="item in roundOptions" :key="item.label" :label="item.label" :value="item.key">
+          </el-option>
+        </el-select>
+          </el-col >
+          <el-col :offset="10" :span="8">
+            <span @click="dialogVisible = false" class="demonstration">時間 : {{moment(this.roundTime)}}</span>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <el-table header-row-class-name="init" :data="bookie" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
+      style="width: 100%">      
+      <el-table-column label="本期開獎" lable-className="title" align="center">   
+        <el-table-column label="莊家結果" align="center">            
+                  
+          <el-table-column label="莊家" prop="MemberRecord.GambleMember.name"></el-table-column>
+          <el-table-column label="點數">
+            <template slot-scope="scope">
+              <span>{{`${scope.row.DealingRecord.point1} | ${scope.row.DealingRecord.point2} / ${point(scope.row.DealingRecord)}`}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="上莊分數">
+            <template slot-scope="scope">
+              <span>{{memberRecord[memberRecord.length-1][0].wager}}</span>
+            </template>
+          </el-table-column>  
+          <el-table-column prop="MemberRecord.FixedServiceFees" label="服務費"></el-table-column>
+          <el-table-column label="有效下注量">
+            <template slot-scope="scope">
+              <div>{{scope.row.effectiveWagger}}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="下注量抽水" >
+            <template slot-scope="scope">
+                <div>{{scope.row.MemberRecord.wagerServiceFees}}</div>
+            </template>
+          </el-table-column> 
+          <!-- 
+          <el-table-column label="莊輸贏">
+            <template slot-scope="scope">
+              <div :style="moneyColor(scope.row.MemberRecord.earned)">{{scope.row.MemberRecord.earned}}</div>
+            </template>
+          </el-table-column>
+          -->
+          <el-table-column label="莊贏抽水">
+              <template slot-scope="scope">
+                <div>{{scope.row.MemberRecord.serviceFees}}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="莊家結果">
+            <template slot-scope="scope">
+              <div :style="moneyColor(scope.row.bookieResult)">{{scope.row.bookieResult}}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="最終積分">
+            <template slot-scope="scope">
+              <div>{{scope.row.currentChips}}</div>
+            </template>
+          </el-table-column>  
+          <el-table-column label="閒家輸贏" prop="memberWagger"></el-table-column>          
+          <el-table-column label="閒家抽水" prop="effectiveServiceFees"></el-table-column>
+        </el-table-column>             
+      </el-table-column>                   
+    </el-table>
+    <el-table :header-cell-style="initDoor" :data="dealing" v-loading.body="listLoading" :summary-method="getSummaries" show-summary  element-loading-text="Loading" border fit highlight-current-row
+      style="width: 100%">
+      <el-table-column label="各門結果" align="center"> 
+        <el-table-column label="名稱">
+          <template slot-scope="scope">
+            <span>{{scope.$index === 0 ?"點數":"門主"}}</span>
+          </template>
+        </el-table-column>   
+        <el-table-column label="第一門">
+          <template slot-scope="scope">
+            <span>{{doorTableSwitch(scope.$index, 0)}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="第二門">
+          <template slot-scope="scope">
+            <span>{{doorTableSwitch(scope.$index, 1)}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="第三門">
+          <template slot-scope="scope">
+            <span>{{doorTableSwitch(scope.$index, 2)}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="第四門">
+          <template slot-scope="scope">
+            <span>{{doorTableSwitch(scope.$index, 3)}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="第五門">
+          <template slot-scope="scope">
+            <span>{{doorTableSwitch(scope.$index, 4)}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="第六門">
+          <template slot-scope="scope">
+            <span>{{doorTableSwitch(scope.$index, 5)}}</span>
+          </template>
+        </el-table-column>
+      </el-table-column>      
+    </el-table>
+    <el-table v-show="hasPunishment(punishmentRecord)" :data="punishmentRecord" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
+      style="width: 100%">
+      <el-table-column label="懲罰名單" align="center">
+        <el-table-column prop="GambleMember.name" label="玩家">
+        </el-table-column>
+        <el-table-column label="原因">
+          <template slot-scope="scope">
+            <div>{{reason(scope.row.rule)}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="金額">
+          <template slot-scope="scope">
+            <div :style="moneyColor((scope.row.chips)*(-1))">{{(scope.row.chips)*(-1)}}</div>
+          </template>
+        </el-table-column>
+      </el-table-column>      
+    </el-table>
+    <el-table :data="detail" :span-method="objectSpanMethod"  v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
+      style="width: 100%">
+      <el-table-column label="本關結果" align="center">
+        <el-table-column prop="MemberRecord.GambleMember.name" label="玩家">
+        </el-table-column>
+        <!-- <el-table-column prop="MemberRecord.GambleMember.name" label="門主">
+        </el-table-column> -->
+        <el-table-column  label="押">
+          <template slot-scope="scope">
+            <span>{{`${scope.row.MemberRecord.door} / ${scope.row.MemberRecord.wager}`}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="DealingRecord.totalPoints" label="點數">
+          <template slot-scope="scope">
+            <span>{{`${scope.row.DealingRecord.point1} | ${scope.row.DealingRecord.point2} / ${point(scope.row.DealingRecord)}`}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="輸贏">
+          <template slot-scope="scope">
+            <div :style="moneyColor(scope.row.MemberRecord.earned)">{{scope.row.MemberRecord.earned}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="MemberRecord.serviceFees" label="抽水">
+        </el-table-column>
+        <el-table-column label="輸贏合計">
+          <template slot-scope="scope">
+            <div :style="moneyColor(scope.row.totalChips)">{{scope.row.totalChips}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="最終積分">
+          <template slot-scope="scope">
+            <div>{{scope.row.MemberRecord.currentChips}}</div>
+          </template>
+        </el-table-column>
+      </el-table-column>      
+    </el-table>
+
+    <el-table :data="members" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
+      style="width: 100%">
+      <el-table-column label="當前玩家餘額" align="center">
+        <el-table-column prop="name_0" label="成員">
+        </el-table-column>
+        <el-table-column prop="chips_0" label="當前積分">
+        </el-table-column>
+        <el-table-column prop="name_1" label="成員">
+        </el-table-column>
+        <el-table-column prop="chips_1" label="當前積分">
+        </el-table-column>
+        <el-table-column prop="name_2" label="成員">
+        </el-table-column>
+        <el-table-column prop="chips_2" label="當前積分">
+        </el-table-column>
+        <el-table-column prop="name_3" label="成員">
+        </el-table-column>
+        <el-table-column prop="chips_3" label="當前積分">
+        </el-table-column>
+        </el-table-column>      
+    </el-table>
+    </el-dialog>
 </div>
 </template>
 
 <script>
-
 import { mapGetters, mapActions } from 'vuex'
 import { fetchDetails, fetchRoundCount, fetchDealingRecords, fetchMemberRecords, fetchRoundRecord, fetchGameBid, fetchWagerRecord, fetchMemberInfo, fetchPunishmentRecord } from '@/api/gambleGameBucket'
 import { fetchGambleMemberList } from '@/api/gambleMember'
 import { ponitTransform } from '@/utils/point'
 import _ from 'lodash'
 import moment from 'moment-timezone'
+import screenfull from 'screenfull'
+import $ from 'jquery'
 
 export default {
   data() {
       memberRecordTemp: [],
       wagerRecord: [],
       roundTime: 0,
+      dialogVisible: false,
     }
   },
   async created() {
     },
     hasPunishment(data) {
       return data.length !== 0 ? true : false
+    },
+    click() {
+      console.log('click')
+      if (screenfull.enabled) {
+        screenfull.request(document.getElementById('full'));
+      }
     }
   },
   destroyed() {

src/views/layout/components/Navbar.vue

     <breadcrumb></breadcrumb>
     <el-dropdown class="avatar-container" trigger="click">
       <div class="avatar-wrapper">
-        <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
+        <!-- <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'"> -->
         <i class="el-icon-caret-bottom"></i>
       </div>
       <el-dropdown-menu class="user-dropdown" slot="dropdown">