[add] Bootstrap

2022-04-10 23:06:20 +08:00
parent a44af83b9f
commit 4b8a5f4358
6 changed files with 94 additions and 42 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
      "dependencies": {
        "@ant-design/icons-vue": "^6.1.0",
        "axios": "^0.26.1",
+        "bootstrap": "^5.1.3",
        "vue": "^3.2.25"
      },
      "devDependencies": {
@@ -109,6 +110,16 @@
      "integrity": "sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==",
      "dev": true
    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
    "node_modules/@vitejs/plugin-vue": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.1.tgz",
@@ -355,6 +366,18 @@
        "node": ">= 10.0.0"
      }
    },
+    "node_modules/bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.10.2"
+      }
+    },
    "node_modules/call-bind": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -1673,6 +1696,12 @@
      "integrity": "sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==",
      "dev": true
    },
+    "@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "peer": true
+    },
    "@vitejs/plugin-vue": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.1.tgz",
@@ -1903,6 +1932,12 @@
        "@babel/types": "^7.9.6"
      }
    },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "requires": {}
+    },
    "call-bind": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
  "dependencies": {
    "@ant-design/icons-vue": "^6.1.0",
    "axios": "^0.26.1",
+    "bootstrap": "^5.1.3",
    "vue": "^3.2.25"
  },
  "devDependencies": {
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -1,11 +1,15 @@
-.main {
+.table {
+    width: inherit;
+}
+
+/* .main {
    width: 80%;
    margin: 20px auto;
 }

 .table {
    table-layout: fixed;
-    /* width: 100%; */
+    width: 100%;
    margin-bottom: 1rem;
    color: #888;
    vertical-align: top;
@@ -61,4 +65,4 @@ tr {

 .table>:not(:first-child) {
    border-top: 2px solid currentColor;
-}
+} */
--- a/src/components/BJ_Casino_Rank.vue
+++ b/src/components/BJ_Casino_Rank.vue
@@ -4,14 +4,47 @@ import '../assets/style.css';
 import { BJ_Casino_Rank } from "../script/BJ_Casino_Rank";

 let Title = ref("BJ_Casino_Rank");
-let div_Main = ref(null);
+let RankData = ref([]);
 const self = {
-    div_Main: div_Main
+    RankData: RankData
 }
 const Script = new BJ_Casino_Rank(self);
+
 </script>

 <template>
    <h1>{{ Title }}</h1>
-    <div ref="div_Main"></div>
+    <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>
+                </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>
+                </tr>
+
+            </tbody>
+        </table>  </div>
 </template>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,6 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { createApp } from 'vue';
+import App from './App.vue';
+

 createApp(App).mount('#app')
--- a/src/script/BJ_Casino_Rank.ts
+++ b/src/script/BJ_Casino_Rank.ts
@@ -6,6 +6,8 @@ export class BJ_Casino_Rank {

    private _ws: any;

+    private _rankdata: any = null;
+
    //#endregion

    //#region Lifecycle
@@ -107,7 +109,7 @@ export class BJ_Casino_Rank {
            }

            case "rank.info": {
-                this.SetData(Data);
+                this.SetRankData(Data);
                this._ws.close();
                break;
            }
@@ -117,42 +119,13 @@ export class BJ_Casino_Rank {
        }
    }

-    public SetData(data: any) {
+    public SetRankData(data: any) {
        let rankdata = data["rank"];
-        // let div_Main = document.getElementById("div_Main");
-        let div_Main = this._client.div_Main;
-        let div_main_s = "";
-        div_main_s += `
-        <table class="table table-striped table-info table-hover">
-        <thead>
-        `;
-        div_main_s += `<th>排名</th>`;
-        div_main_s += `<th>名稱</th>`;
-        div_main_s += `<th>倍率</th>`;
-        div_main_s += `<th>機台</th>`;
-        div_main_s += `<th>桌號</th>`;
-        div_main_s += `</thead><tbody>`;
-        for (let i = 0; i < rankdata.length; i++) {
-            const data = rankdata[i];
-            const rank = data[0];
-            const magnification = Math.floor(data[1]);
-            const name = data[2][1];
-            const slot = data[3][0];
-            const table = data[3][1];
-            div_main_s += `
-                    <tr>
-                    <td><font size="5"><b>${rank}</b></font></td>
-                    <td align="left"><font size="5"><b>${name}</b></font></td>
-                    <td align="left"><font size="5"><b>${magnification}</b></font></td>
-                    <td align="left"><font size="5"><b>${slot}</b></font></td>
-                    <td align="left"><font size="5"><b>${table}</b></font></td>
-                    </tr>
-                    `;
-        }
-        div_main_s += `</tbody></table>`;
-        div_Main.value.innerHTML = div_main_s;
+        this._client.RankData.value = rankdata;
    }

+    //#endregion
+
    //#region WebSocke

    public OnWebSocketMessage(e: any) {
@@ -213,6 +186,10 @@ export class BJ_Casino_Rank {
        this.AddLog(this._ws.readyState);
    }

+    public Sleep(ms: number) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
    public AddLog(log: any) {
        console.log(log);
        // var textarea = document.getElementById("Log");