diff --git a/package-lock.json b/package-lock.json index b4b91dd..a4984ad 100644 --- 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", diff --git a/package.json b/package.json index 06b1b7e..eb660d7 100644 --- 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": { diff --git a/src/assets/style.css b/src/assets/style.css index c236a58..a1686ab 100644 --- 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; -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/src/components/BJ_Casino_Rank.vue b/src/components/BJ_Casino_Rank.vue index fbf3e85..9e4a832 100644 --- 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); + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 01433bc..333a8f1 100644 --- 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') diff --git a/src/script/BJ_Casino_Rank.ts b/src/script/BJ_Casino_Rank.ts index d7fedef..3fa076f 100644 --- 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 += ` - - - `; - div_main_s += ``; - div_main_s += ``; - div_main_s += ``; - div_main_s += ``; - div_main_s += ``; - div_main_s += ``; - 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 += ` - - - - - - - - `; - } - div_main_s += `
排名名稱倍率機台桌號
${rank}${name}${magnification}${slot}${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");