[add] tab
This commit is contained in:
		
							
								
								
									
										21
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										21
									
								
								package-lock.json
									
									
									
										generated
									
									
									
								
							| @@ -9,11 +9,13 @@ | ||||
|             "version": "0.0.0", | ||||
|             "dependencies": { | ||||
|                 "@ant-design/icons-vue": "^6.1.0", | ||||
|                 "@popperjs/core": "^2.11.5", | ||||
|                 "axios": "^0.26.1", | ||||
|                 "bootstrap": "^5.1.3", | ||||
|                 "element-plus": "^2.1.9", | ||||
|                 "moment": "^2.29.2", | ||||
|                 "vue": "^3.2.25" | ||||
|                 "vue": "^3.2.25", | ||||
|                 "vue-loading-overlay": "^5.0.3" | ||||
|             }, | ||||
|             "devDependencies": { | ||||
|                 "@vitejs/plugin-vue": "^2.3.0", | ||||
| @@ -1785,6 +1787,17 @@ | ||||
|                 "@vue/shared": "3.2.31" | ||||
|             } | ||||
|         }, | ||||
|         "node_modules/vue-loading-overlay": { | ||||
|             "version": "5.0.3", | ||||
|             "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-5.0.3.tgz", | ||||
|             "integrity": "sha512-6JWZalwlHF4do3HXsFZGt6PcWYseAI5FuNKpveEkljkzqskDWRr7rYmYHVx2kKu4qIvK0vLpL25T/hpFMNoevQ==", | ||||
|             "engines": { | ||||
|                 "node": ">=12.13.0" | ||||
|             }, | ||||
|             "peerDependencies": { | ||||
|                 "vue": "^3.0.0" | ||||
|             } | ||||
|         }, | ||||
|         "node_modules/vue-tsc": { | ||||
|             "version": "0.29.8", | ||||
|             "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.29.8.tgz", | ||||
| @@ -3104,6 +3117,12 @@ | ||||
|                 "@vue/shared": "3.2.31" | ||||
|             } | ||||
|         }, | ||||
|         "vue-loading-overlay": { | ||||
|             "version": "5.0.3", | ||||
|             "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-5.0.3.tgz", | ||||
|             "integrity": "sha512-6JWZalwlHF4do3HXsFZGt6PcWYseAI5FuNKpveEkljkzqskDWRr7rYmYHVx2kKu4qIvK0vLpL25T/hpFMNoevQ==", | ||||
|             "requires": {} | ||||
|         }, | ||||
|         "vue-tsc": { | ||||
|             "version": "0.29.8", | ||||
|             "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.29.8.tgz", | ||||
|   | ||||
| @@ -9,11 +9,13 @@ | ||||
|     }, | ||||
|     "dependencies": { | ||||
|         "@ant-design/icons-vue": "^6.1.0", | ||||
|         "@popperjs/core": "^2.11.5", | ||||
|         "axios": "^0.26.1", | ||||
|         "bootstrap": "^5.1.3", | ||||
|         "element-plus": "^2.1.9", | ||||
|         "moment": "^2.29.2", | ||||
|         "vue": "^3.2.25" | ||||
|         "vue": "^3.2.25", | ||||
|         "vue-loading-overlay": "^5.0.3" | ||||
|     }, | ||||
|     "devDependencies": { | ||||
|         "@vitejs/plugin-vue": "^2.3.0", | ||||
|   | ||||
							
								
								
									
										30
									
								
								src/App.vue
									
									
									
									
									
								
							
							
						
						
									
										30
									
								
								src/App.vue
									
									
									
									
									
								
							| @@ -1,7 +1,17 @@ | ||||
| <script setup lang="ts"> | ||||
| import type { TabsPaneContext } from 'element-plus'; | ||||
| import { ref } from "vue"; | ||||
| import BJ_Casino_Rank from './components/BJ_Casino_Rank.vue'; | ||||
| import Loading from 'vue-loading-overlay'; | ||||
| import 'vue-loading-overlay/dist/vue-loading.css'; | ||||
| import BJ_Casino_Magnification from './components/BJ_Casino_Magnification.vue'; | ||||
| import BJ_Casino_WinMoney from './components/BJ_Casino_WinMoney.vue'; | ||||
| import { BJ_Casino_Data } from './script/BJ_Casino_Data'; | ||||
|  | ||||
| let isLoading = ref(true) | ||||
| const self = { | ||||
|     isLoading: isLoading, | ||||
| } | ||||
| const BJ_Casino = new BJ_Casino_Data(self) | ||||
|  | ||||
| const activeName = ref('first') | ||||
| const handleClick = (tab: TabsPaneContext, event: Event) => { | ||||
| @@ -10,25 +20,27 @@ const handleClick = (tab: TabsPaneContext, event: Event) => { | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
|  | ||||
|     <loading v-model:active="isLoading" :active.sync="isLoading" :can-cancel="false" :is-full-page="true"></loading> | ||||
|     <div> | ||||
|         <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> | ||||
|             <el-tab-pane label="User" name="first"> | ||||
|                 <BJ_Casino_Rank /> | ||||
|             <el-tab-pane label="BJ_Casino_Rank倍率" name="first"> | ||||
|                 <BJ_Casino_Magnification :BJ_Casino="BJ_Casino" /> | ||||
|             </el-tab-pane> | ||||
|             <el-tab-pane label="BJ_Casino_Rank贏分" name="second"> | ||||
|                 <BJ_Casino_WinMoney :BJ_Casino="BJ_Casino" /> | ||||
|             </el-tab-pane> | ||||
|             <el-tab-pane label="Config" name="second">Config</el-tab-pane> | ||||
|             <el-tab-pane label="Role" name="third">Role</el-tab-pane> | ||||
|             <el-tab-pane label="Task" name="fourth">Task</el-tab-pane> | ||||
|         </el-tabs> | ||||
|     </div> | ||||
|     <!-- <BJ_Casino_Magnification /> --> | ||||
| </template> | ||||
|  | ||||
| <style> | ||||
| @import url('../src/assets/fonts.css'); | ||||
| @import url('../src/assets/style.css'); | ||||
|  | ||||
| .demo-tabs>.el-tabs__content { | ||||
|     width: 50%; | ||||
|     margin: 0 auto; | ||||
| .el-tabs__nav { | ||||
|     float: none; | ||||
| } | ||||
|  | ||||
| #app { | ||||
|   | ||||
							
								
								
									
										67
									
								
								src/components/BJ_Casino_Magnification.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										67
									
								
								src/components/BJ_Casino_Magnification.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,67 @@ | ||||
| <script setup lang="ts"> | ||||
| import { ref } from "vue"; | ||||
| import { BJ_Casino_Data } from "../script/BJ_Casino_Data"; | ||||
| import { BJ_Casino_Magnification } from "../script/BJ_Casino_Magnification"; | ||||
|  | ||||
| const props = defineProps<{ BJ_Casino: BJ_Casino_Data }>() | ||||
|  | ||||
| // const props = defineProps({ | ||||
| //     list: { | ||||
| //         type: Array, | ||||
| //         default: () => [], | ||||
| //     }, | ||||
| // }) | ||||
|  | ||||
| let Title = ref(""); | ||||
| let RankData = ref([]); | ||||
| const self = { | ||||
|     Title: Title, | ||||
|     RankData: RankData, | ||||
|     // BJ_Casino: props.list[0].value, | ||||
|     BJ_Casino: props.BJ_Casino, | ||||
| } | ||||
| const Script = new BJ_Casino_Magnification(self); | ||||
|  | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
|     <h1>{{ Title }}</h1> | ||||
|     <div class="d-flex justify-content-center"> | ||||
|         <table class="table table-striped table-info table-hover"> | ||||
|             <thead> | ||||
|                 <tr> | ||||
|                     <th align="left">排名</th> | ||||
|                     <th align="left">名稱</th> | ||||
|                     <th align="left">倍率</th> | ||||
|                     <th align="left">機台</th> | ||||
|                     <th align="left">桌號</th> | ||||
|                     <th align="left">日期</th> | ||||
|                 </tr> | ||||
|             </thead> | ||||
|             <tbody> | ||||
|  | ||||
|                 <tr v-for="(item, index) in RankData" :key="index"> | ||||
|                     <td> | ||||
|                         <font size="5"><b>{{ item[0] }}</b></font> | ||||
|                     </td> | ||||
|                     <td align="left"> | ||||
|                         <font size="5"><b>{{ item[2][1] }}</b></font> | ||||
|                     </td> | ||||
|                     <td align="left"> | ||||
|                         <font size="5"><b>{{ Math.floor(item[1]) }}</b></font> | ||||
|                     </td> | ||||
|                     <td align="left"> | ||||
|                         <font size="5"><b>{{ item[3][0] }}</b></font> | ||||
|                     </td> | ||||
|                     <td align="left"> | ||||
|                         <font size="5"><b>{{ item[3][1] }}</b></font> | ||||
|                     </td> | ||||
|                     <td align="left"> | ||||
|                         <font size="5"><b>{{ item[4] }}</b></font> | ||||
|                     </td> | ||||
|                 </tr> | ||||
|  | ||||
|             </tbody> | ||||
|         </table> | ||||
|     </div> | ||||
| </template> | ||||
| @@ -1,14 +1,26 @@ | ||||
| <script setup lang="ts"> | ||||
| import { ref } from "vue"; | ||||
| import { BJ_Casino_Rank } from "../script/BJ_Casino_Rank"; | ||||
| import { BJ_Casino_Data } from "../script/BJ_Casino_Data"; | ||||
| import { BJ_Casino_WinMoney } from "../script/BJ_Casino_WinMoney"; | ||||
| 
 | ||||
| let Title = ref("BJ_Casino_Rank"); | ||||
| const props = defineProps<{ BJ_Casino: BJ_Casino_Data }>() | ||||
| 
 | ||||
| // const props = defineProps({ | ||||
| //     list: { | ||||
| //         type: Array, | ||||
| //         default: () => [], | ||||
| //     }, | ||||
| // }) | ||||
| 
 | ||||
| let Title = ref(""); | ||||
| let RankData = ref([]); | ||||
| const self = { | ||||
|     Title: Title, | ||||
|     RankData: RankData, | ||||
|     // BJ_Casino: props.list[0].value, | ||||
|     BJ_Casino: props.BJ_Casino, | ||||
| } | ||||
| const Script = new BJ_Casino_Rank(self); | ||||
| const Script = new BJ_Casino_WinMoney(self); | ||||
| 
 | ||||
| </script> | ||||
| 
 | ||||
| @@ -1,3 +1,4 @@ | ||||
| import '@popperjs/core'; | ||||
| import 'bootstrap'; | ||||
| import 'bootstrap/dist/css/bootstrap.min.css'; | ||||
| import ElementPlus from 'element-plus'; | ||||
|   | ||||
| @@ -1,20 +1,23 @@ | ||||
| import moment from 'moment'; | ||||
| 
 | ||||
| export class BJ_Casino_Rank { | ||||
| export class BJ_Casino_Data { | ||||
| 
 | ||||
|     //#region public
 | ||||
| 
 | ||||
|     public ContestData: string[] = ["4/7~4/13", "4/14~4/20", "4/21~4/27"]; | ||||
| 
 | ||||
|     public Title: string = ""; | ||||
| 
 | ||||
|     public Client: any; | ||||
| 
 | ||||
|     //#endregion
 | ||||
| 
 | ||||
|     //#region private
 | ||||
| 
 | ||||
|     private _client: any; | ||||
| 
 | ||||
|     private _ws: any; | ||||
| 
 | ||||
|     private _rankdata: any[] = []; | ||||
|     private _rankMagnificationData: any[] = []; | ||||
|     private _rankWinMoneyData: any[] = []; | ||||
| 
 | ||||
|     private _nowSearchContestID: number = 0; | ||||
| 
 | ||||
| @@ -32,6 +35,18 @@ export class BJ_Casino_Rank { | ||||
| 
 | ||||
|     private _nowContestEnd: string = ""; | ||||
| 
 | ||||
|     /** | ||||
|      * 0 _rankMagnificationData | ||||
|      * 1 _rankWinMoneyData | ||||
|      */ | ||||
|     private _isOK: any[] = [false, false]; | ||||
| 
 | ||||
|     //#endregion
 | ||||
| 
 | ||||
|     //#region get set
 | ||||
| 
 | ||||
|     public get RankMagnificationData(): any[] { return this._rankMagnificationData }; | ||||
| 
 | ||||
|     //#endregion
 | ||||
| 
 | ||||
|     //#region Lifecycle
 | ||||
| @@ -40,7 +55,7 @@ export class BJ_Casino_Rank { | ||||
|      * | ||||
|      */ | ||||
|     constructor(client: any) { | ||||
|         this._client = client; | ||||
|         this.Client = client; | ||||
|         this.onLoad(); | ||||
|     } | ||||
| 
 | ||||
| @@ -78,8 +93,6 @@ export class BJ_Casino_Rank { | ||||
|             //websocket关闭连接
 | ||||
|             this._ws.onclose = function (event: any) { | ||||
|                 self.AddLog("已經與服務器斷開連接,當前連接狀態:" + this.readyState); | ||||
|                 // let document = parent ? parent.document : document;
 | ||||
|                 // document.title = `已斷線`;
 | ||||
|             }; | ||||
| 
 | ||||
|             //websocket连接异常
 | ||||
| @@ -133,13 +146,12 @@ export class BJ_Casino_Rank { | ||||
|             } | ||||
| 
 | ||||
|             case "rank.info": { | ||||
|                 this.RankDataCallBack(Data); | ||||
|                 this.RankMagnificationDataCallBack(Data); | ||||
|                 break; | ||||
|             } | ||||
| 
 | ||||
|             case "rank.history": { | ||||
|                 this.ParseRankData(Data); | ||||
|                 this._ws.close(); | ||||
|                 this.ParseRankMagnificationData(Data); | ||||
|                 break; | ||||
|             } | ||||
| 
 | ||||
| @@ -148,7 +160,7 @@ export class BJ_Casino_Rank { | ||||
|         } | ||||
|     } | ||||
| 
 | ||||
|     public RankDataCallBack(data: any) { | ||||
|     public RankMagnificationDataCallBack(data: any) { | ||||
|         let id = +data["id"]; | ||||
|         this._nowSearchContestID = id; | ||||
|         this._nowContestID = id; | ||||
| @@ -169,24 +181,24 @@ export class BJ_Casino_Rank { | ||||
|                 break; | ||||
|             } | ||||
|         } | ||||
|         this._client.Title.value = `${this._nowContestStart}~${this._nowContestEnd}`; | ||||
|         this.ParseRankData(data); | ||||
|         this.Title = `${this._nowContestStart}~${this._nowContestEnd}`; | ||||
|         this.ParseRankMagnificationData(data); | ||||
|     } | ||||
| 
 | ||||
|     public ParseRankData(data: any) { | ||||
|     public ParseRankMagnificationData(data: any) { | ||||
|         let id = this._nowSearchContestID; | ||||
|         this.RankDataAddDate(id, data["rank"]); | ||||
|         this._rankdata = this._rankdata.concat(data["rank"]); | ||||
|         this.RankDataMagnificationAddDate(id, data["rank"]); | ||||
|         this._rankMagnificationData = this._rankMagnificationData.concat(data["rank"]); | ||||
|         if (id !== this._nowContestStartIndex) { | ||||
|             this._nowSearchContestID = id - 1; | ||||
|             this.SendData("rank.history", { "id": this._nowSearchContestID, "t": 12, "p": 2 }); | ||||
|         } else { | ||||
|             this.OrganizeRankData(this._rankdata); | ||||
|             this.SetRankData(this._rankdata); | ||||
|             this.OrganizeRankMagnificationData(this._rankMagnificationData); | ||||
|             this.SetRankMagnificationData(this._rankMagnificationData); | ||||
|         } | ||||
|     } | ||||
| 
 | ||||
|     public RankDataAddDate(id: number, rankdata: any) { | ||||
|     public RankDataMagnificationAddDate(id: number, rankdata: any) { | ||||
|         let date: string = this._contestDateFormID(id); | ||||
|         for (let i = 0; i < rankdata.length; i++) { | ||||
|             rankdata[i].push(date); | ||||
| @@ -194,7 +206,7 @@ export class BJ_Casino_Rank { | ||||
|         return rankdata; | ||||
|     } | ||||
| 
 | ||||
|     public OrganizeRankData(rankdata: any) { | ||||
|     public OrganizeRankMagnificationData(rankdata: any) { | ||||
|         rankdata.sort((a: any, b: any) => { | ||||
|             return b[1] - a[1]; | ||||
|         }); | ||||
| @@ -204,11 +216,21 @@ export class BJ_Casino_Rank { | ||||
|         for (let i = 0; i < rankdata.length; i++) { | ||||
|             rankdata[i][0] = i + 1; | ||||
|         } | ||||
|         this._rankdata = rankdata; | ||||
|         this._rankMagnificationData = rankdata; | ||||
|     } | ||||
| 
 | ||||
|     public SetRankData(rankdata: any) { | ||||
|         this._client.RankData.value = rankdata; | ||||
|     public SetRankMagnificationData(rankdata: any) { | ||||
|         this._ws.close(); | ||||
|         this._isOK[0] = true; | ||||
|         this._isOK[1] = true; | ||||
|         this._checkOK(); | ||||
|     } | ||||
| 
 | ||||
|     private _checkOK() { | ||||
|         if (this._isOK.includes(false)) { | ||||
|             return; | ||||
|         } | ||||
|         this.Client.isLoading.value = false; | ||||
|     } | ||||
| 
 | ||||
|     //#endregion
 | ||||
							
								
								
									
										49
									
								
								src/script/BJ_Casino_Magnification.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										49
									
								
								src/script/BJ_Casino_Magnification.ts
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,49 @@ | ||||
| import { BJ_Casino_Data } from "./BJ_Casino_Data"; | ||||
| import { Tools } from "./Tools"; | ||||
|  | ||||
| export class BJ_Casino_Magnification { | ||||
|     //#region Lifecycle | ||||
|  | ||||
|     public BJ_Casino: BJ_Casino_Data | undefined; | ||||
|  | ||||
|     //#endregion | ||||
|  | ||||
|     //#region private | ||||
|  | ||||
|     private _client: any; | ||||
|  | ||||
|     //#endregion | ||||
|  | ||||
|     //#region Lifecycle | ||||
|  | ||||
|     /** | ||||
|      * | ||||
|      */ | ||||
|     constructor(client: any) { | ||||
|         this._client = client; | ||||
|         this.BJ_Casino = client.BJ_Casino; | ||||
|         this.onLoad(); | ||||
|     } | ||||
|  | ||||
|     public async onLoad() { | ||||
|         await this.SetInit(); | ||||
|     }; | ||||
|  | ||||
|     public async SetInit() { | ||||
|         while (this.BJ_Casino?.Client.isLoading.value) { | ||||
|             await Tools.Sleep(50); | ||||
|         } | ||||
|         this._client.Title.value = this.BJ_Casino?.Title; | ||||
|         this.SendData(); | ||||
|     }; | ||||
|  | ||||
|     //#endregion | ||||
|  | ||||
|     //#region Custom | ||||
|  | ||||
|     public SendData() { | ||||
|         this._client.RankData.value = this.BJ_Casino?.RankMagnificationData; | ||||
|     } | ||||
|  | ||||
|     //#endregion | ||||
| } | ||||
							
								
								
									
										49
									
								
								src/script/BJ_Casino_WinMoney.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										49
									
								
								src/script/BJ_Casino_WinMoney.ts
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,49 @@ | ||||
| import { BJ_Casino_Data } from "./BJ_Casino_Data"; | ||||
| import { Tools } from "./Tools"; | ||||
|  | ||||
| export class BJ_Casino_WinMoney { | ||||
|     //#region Lifecycle | ||||
|  | ||||
|     public BJ_Casino: BJ_Casino_Data | undefined; | ||||
|  | ||||
|     //#endregion | ||||
|  | ||||
|     //#region private | ||||
|  | ||||
|     private _client: any; | ||||
|  | ||||
|     //#endregion | ||||
|  | ||||
|     //#region Lifecycle | ||||
|  | ||||
|     /** | ||||
|      * | ||||
|      */ | ||||
|     constructor(client: any) { | ||||
|         this._client = client; | ||||
|         this.BJ_Casino = client.BJ_Casino; | ||||
|         this.onLoad(); | ||||
|     } | ||||
|  | ||||
|     public async onLoad() { | ||||
|         await this.SetInit(); | ||||
|     }; | ||||
|  | ||||
|     public async SetInit() { | ||||
|         while (this.BJ_Casino?.Client.isLoading.value) { | ||||
|             await Tools.Sleep(50); | ||||
|         } | ||||
|         this._client.Title.value = this.BJ_Casino?.Title; | ||||
|         this.SendData(); | ||||
|     }; | ||||
|  | ||||
|     //#endregion | ||||
|  | ||||
|     //#region Custom | ||||
|  | ||||
|     public SendData() { | ||||
|         this._client.RankData.value = this.BJ_Casino?.RankMagnificationData; | ||||
|     } | ||||
|  | ||||
|     //#endregion | ||||
| } | ||||
							
								
								
									
										11
									
								
								src/script/Tools.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										11
									
								
								src/script/Tools.ts
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,11 @@ | ||||
|  | ||||
| export class Tools { | ||||
|  | ||||
|     //#region Custom | ||||
|  | ||||
|     public static Sleep(ms: any): Promise<unknown> { | ||||
|         return new Promise(resolve => setTimeout(resolve, ms)); | ||||
|     } | ||||
|  | ||||
|     //#endregion | ||||
| } | ||||
		Reference in New Issue
	
	Block a user