[add] tab

This commit is contained in:
建喵 2022-04-16 23:40:11 +08:00
parent 3dda160b9a
commit 87fa594dd4
10 changed files with 281 additions and 37 deletions

21
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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 {

View 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>

View File

@ -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>

View File

@ -1,3 +1,4 @@
import '@popperjs/core';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import ElementPlus from 'element-plus';

View File

@ -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

View 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
}

View 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
View 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
}