From 87fa594dd46970b01d0bb8e8baa39e94e26f6177 Mon Sep 17 00:00:00 2001
From: JianMiau <bir840124@gmail.com>
Date: Sat, 16 Apr 2022 23:40:11 +0800
Subject: [PATCH] [add] tab

---
 package-lock.json                             | 21 +++++-
 package.json                                  |  4 +-
 src/App.vue                                   | 30 +++++---
 src/components/BJ_Casino_Magnification.vue    | 67 ++++++++++++++++++
 ...Casino_Rank.vue => BJ_Casino_WinMoney.vue} | 18 ++++-
 src/main.ts                                   |  1 +
 .../{BJ_Casino_Rank.ts => BJ_Casino_Data.ts}  | 68 ++++++++++++-------
 src/script/BJ_Casino_Magnification.ts         | 49 +++++++++++++
 src/script/BJ_Casino_WinMoney.ts              | 49 +++++++++++++
 src/script/Tools.ts                           | 11 +++
 10 files changed, 281 insertions(+), 37 deletions(-)
 create mode 100644 src/components/BJ_Casino_Magnification.vue
 rename src/components/{BJ_Casino_Rank.vue => BJ_Casino_WinMoney.vue} (78%)
 rename src/script/{BJ_Casino_Rank.ts => BJ_Casino_Data.ts} (89%)
 create mode 100644 src/script/BJ_Casino_Magnification.ts
 create mode 100644 src/script/BJ_Casino_WinMoney.ts
 create mode 100644 src/script/Tools.ts

diff --git a/package-lock.json b/package-lock.json
index a043d9e..b5e6e3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 4e2eaaf..2846290 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/App.vue b/src/App.vue
index 677b486..49ad098 100644
--- a/src/App.vue
+++ b/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 {
diff --git a/src/components/BJ_Casino_Magnification.vue b/src/components/BJ_Casino_Magnification.vue
new file mode 100644
index 0000000..76073d7
--- /dev/null
+++ b/src/components/BJ_Casino_Magnification.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/BJ_Casino_Rank.vue b/src/components/BJ_Casino_WinMoney.vue
similarity index 78%
rename from src/components/BJ_Casino_Rank.vue
rename to src/components/BJ_Casino_WinMoney.vue
index 9106242..c1e28ac 100644
--- a/src/components/BJ_Casino_Rank.vue
+++ b/src/components/BJ_Casino_WinMoney.vue
@@ -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>
 
diff --git a/src/main.ts b/src/main.ts
index 59c4a7a..26cc52c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,3 +1,4 @@
+import '@popperjs/core';
 import 'bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import ElementPlus from 'element-plus';
diff --git a/src/script/BJ_Casino_Rank.ts b/src/script/BJ_Casino_Data.ts
similarity index 89%
rename from src/script/BJ_Casino_Rank.ts
rename to src/script/BJ_Casino_Data.ts
index 66b5e52..beab4fc 100644
--- a/src/script/BJ_Casino_Rank.ts
+++ b/src/script/BJ_Casino_Data.ts
@@ -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
diff --git a/src/script/BJ_Casino_Magnification.ts b/src/script/BJ_Casino_Magnification.ts
new file mode 100644
index 0000000..ea7b414
--- /dev/null
+++ b/src/script/BJ_Casino_Magnification.ts
@@ -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
+}
diff --git a/src/script/BJ_Casino_WinMoney.ts b/src/script/BJ_Casino_WinMoney.ts
new file mode 100644
index 0000000..79dd3e8
--- /dev/null
+++ b/src/script/BJ_Casino_WinMoney.ts
@@ -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
+}
diff --git a/src/script/Tools.ts b/src/script/Tools.ts
new file mode 100644
index 0000000..0a94a8c
--- /dev/null
+++ b/src/script/Tools.ts
@@ -0,0 +1,11 @@
+
+export class Tools {
+
+    //#region Custom
+
+    public static Sleep(ms: any): Promise<unknown> {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    //#endregion
+}