linquan
2 months ago
74 changed files with 8136 additions and 46454 deletions
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,232 @@
|
||||
<template> |
||||
<div class="system-edit-post-container"> |
||||
<el-form ref="formRef" size="default" label-width="90px"> |
||||
<el-card shadow="hover" header="排行榜"> |
||||
<el-form :inline="true"> |
||||
<el-form-item label="选择服务器" prop="serverId"> |
||||
<el-select v-model="serverSwitch" class="m-2" placeholder="选择服务器" size="large" style="width: 80px"> |
||||
<el-option v-for="item in serverCategorize" :key="item.value" :label="item.label" :value="item.value" /> |
||||
</el-select> |
||||
<el-select v-model="tableData.param.serverId" class="m-2" placeholder="选择服务器" size="large" filterable> |
||||
<el-option v-for="item in switchServer()" :key="item.id + ''" :label="item.name" :value="item.id + ''" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="选择排行榜" prop="name"> |
||||
<el-select v-model="tableData.param.name" class="m-2" placeholder="选择排行榜" size="large" filterable> |
||||
<el-option v-for="item in rankNames" :key="item.id + ''" :label="item.name + '排行榜'" :value="item.id + ''" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button size="default" type="primary" class="ml10" @click="onSubmit"> |
||||
<el-icon> |
||||
<ele-Search /> |
||||
</el-icon> |
||||
查询 |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-table :data="tableData.data" style="width: 100%"> |
||||
<el-table-column type="index" label="序号" width="60" /> |
||||
<el-table-column prop="id" label="UnitId" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="Name" label="Name" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="Scale" label="Scale" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="Value" label="Value" show-overflow-tooltip></el-table-column> |
||||
</el-table> |
||||
</el-card> |
||||
</el-form> |
||||
</div> |
||||
</template> |
||||
<script lang="ts"> |
||||
import { reactive, toRefs, defineComponent, ref, unref, onMounted } from 'vue'; |
||||
import { getGameRank } from '/@/api/game'; |
||||
import { ElMessage, ElLoading } from 'element-plus'; |
||||
import { serverList, ServerCategorize } from '/@/utils/game'; |
||||
import { gSwitchServer } from '/@/utils/utils'; |
||||
import { RankNames } from '/@/api/common/consts'; |
||||
|
||||
interface TableDataState { |
||||
tableData: { |
||||
param: { |
||||
serverId: number; |
||||
name: string; |
||||
}; |
||||
data: object[]; |
||||
}; |
||||
servers: object[]; |
||||
rankNames: object[]; |
||||
serverSwitch: number; |
||||
serverCategorize: object[]; |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'apiV1GameRankGameRank', |
||||
setup: function () { |
||||
const formRef = ref<HTMLElement | null>(null); |
||||
const state = reactive<TableDataState>({ |
||||
tableData: { |
||||
param: { |
||||
serverId: '', |
||||
name: '', |
||||
}, |
||||
data: [], |
||||
}, |
||||
serverSwitch: 0, |
||||
rankNames: RankNames, |
||||
servers: [], |
||||
serverCategorize: ServerCategorize, |
||||
}); |
||||
|
||||
const onSubmit = () => { |
||||
const loading = ElLoading.service({ |
||||
lock: true, |
||||
text: 'Loading', |
||||
background: 'rgba(0, 0, 0, 0.7)', |
||||
}); |
||||
const formWrap = unref(formRef) as any; |
||||
if (!formWrap) return; |
||||
formWrap.validate((valid: boolean) => { |
||||
if (!valid) { |
||||
ElMessage.error('还有配置未填写'); |
||||
loading.close(); |
||||
return; |
||||
} |
||||
|
||||
getGameRank(state.tableData.param) |
||||
.then((res) => { |
||||
console.log('排行榜获取: ', res); |
||||
if (!res || Number(res.code) != 0 || res.data.list.length <= 0) { |
||||
ElMessage.success('排行榜获取失败'); |
||||
return; |
||||
} |
||||
state.tableData.data = res.data.list[0].Children; |
||||
state.tableData.data.sort((a, b) => { |
||||
a.Value - b.Value; |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.close(); |
||||
}); |
||||
return; |
||||
}); |
||||
}; |
||||
// 页面加载时 |
||||
onMounted(() => { |
||||
serverList().then((res) => { |
||||
// console.log(res); |
||||
state.servers = res; |
||||
}); |
||||
}); |
||||
const switchServer = () => { |
||||
return gSwitchServer(state.serverSwitch, state.servers); |
||||
}; |
||||
return { |
||||
switchServer, |
||||
onSubmit, |
||||
formRef, |
||||
...toRefs(state), |
||||
}; |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.el-table { |
||||
--el-table-border-color: var(--el-border-color-lighter); |
||||
--el-table-border: 0px solid var(--el-table-border-color); |
||||
} |
||||
|
||||
::v-deep .table-style { |
||||
margin-top: -15px; |
||||
padding-top: -20px; |
||||
} |
||||
|
||||
::v-deep .el-table .el-table__cell { |
||||
padding: 0; |
||||
margin-left: -20px; |
||||
min-width: 0; |
||||
box-sizing: border-box; |
||||
text-overflow: ellipsis; |
||||
vertical-align: middle; |
||||
position: relative; |
||||
text-align: left; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.tree-border { |
||||
margin-top: 5px; |
||||
border: 1px solid #e5e6e7 !important; |
||||
background: #fff none !important; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.system-edit-post-container { |
||||
.menu-data-tree { |
||||
border: var(--el-input-border, var(--el-border-base)); |
||||
border-radius: var(--el-input-border-radius, var(--el-border-radius-base)); |
||||
padding: 5px; |
||||
} |
||||
} |
||||
|
||||
.editable-cell__input { |
||||
display: inline; |
||||
width: 10%; |
||||
|
||||
.el-input__inner { |
||||
padding: 0 8px; |
||||
font-size: 12px; |
||||
} |
||||
} |
||||
|
||||
/*.table-left-block {*/ |
||||
/* margin-left: 0px;*/ |
||||
/*}*/ |
||||
|
||||
.left-block { |
||||
margin-left: -20px; |
||||
} |
||||
|
||||
.table-num-left { |
||||
margin-left: -85px; |
||||
} |
||||
|
||||
.num-left { |
||||
margin-left: -30px; |
||||
} |
||||
|
||||
.table-item { |
||||
margin-top: 10px; |
||||
margin-bottom: -10px; |
||||
} |
||||
|
||||
.title-label-block { |
||||
margin-left: -20px; |
||||
} |
||||
|
||||
.label-block { |
||||
padding-left: 10px; |
||||
} |
||||
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td { |
||||
background: #ffffd5; |
||||
} |
||||
|
||||
.warning-row { |
||||
background: #ffffd5; |
||||
} |
||||
|
||||
::v-deep .warning-row .el-table__body tr { |
||||
background-color: #ffffd5; |
||||
} |
||||
|
||||
::v-deep .warning-row .el-table--enable-row-hover .el-table__body tr:hover > td { |
||||
background-color: inherit; |
||||
} |
||||
|
||||
::v-deep .warning-row .el-table__cell { |
||||
background-color: #ffffd5; |
||||
} |
||||
|
||||
::v-deep .tableCell { |
||||
margin-left: -15px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue