[add] Bootstrap
This commit is contained in:
parent
a44af83b9f
commit
4b8a5f4358
35
package-lock.json
generated
35
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
} */
|
||||
@ -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>
|
||||
@ -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')
|
||||
|
||||
@ -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");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user