4 changed files with 159 additions and 1 deletions
@ -0,0 +1,145 @@
|
||||
<template> |
||||
<div class="game-online-container"> |
||||
<el-card shadow="hover"> |
||||
<div class="system-user-search mb15"> |
||||
<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" multiple 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> |
||||
<el-button size="default" type="primary" class="ml10" @click="onlineList"> |
||||
<el-icon> |
||||
<ele-Search /> |
||||
</el-icon> |
||||
重载 |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
|
||||
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" stripe border> |
||||
<el-table-column type="selection" width="55" align="center" /> |
||||
<el-table-column type="index" label="序号" width="71" /> |
||||
<el-table-column prop="name" label="服务器名" width="250"></el-table-column> |
||||
<el-table-column prop="msg" label="发送状态"> |
||||
<template #default="scope"> |
||||
<div v-if="scope.row.msg == '发送成功'" style="color: #e60000">{{ scope.row.msg }}</div> |
||||
<div v-else-if="!!scope.row.msg">{{ scope.row.msg }}</div> |
||||
<div v-else style="color: #a5a5a5">未发送</div> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts"> |
||||
import { toRefs, reactive, onMounted, defineComponent } from 'vue'; |
||||
import { serverList, ServerCategorize, ServerList } from '/@/utils/game'; |
||||
import { gameServerReloadDll } from '/@/api/game/serverConfig'; |
||||
|
||||
// 定义接口来定义对象的类型 |
||||
interface TableData { |
||||
serverId: number; |
||||
name: string; |
||||
ip: string; |
||||
status: string; |
||||
msg: string; |
||||
} |
||||
|
||||
interface TableDataState { |
||||
serverSwitch: number; |
||||
tableData: { |
||||
data: Array<TableData>; |
||||
param: { |
||||
serverId: number[]; |
||||
}; |
||||
}; |
||||
servers: object[]; |
||||
serverCategorize: object[]; |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'apiV1ServerReloadDll', |
||||
setup() { |
||||
const state = reactive<TableDataState>({ |
||||
serverSwitch: 0, |
||||
tableData: { |
||||
data: [], |
||||
param: { |
||||
serverId: '', |
||||
}, |
||||
}, |
||||
servers: ServerList, |
||||
serverCategorize: ServerCategorize, |
||||
}); |
||||
const onlineList = () => { |
||||
if (state.tableData.param.serverId.length > 0) { |
||||
for (let server in state.tableData.param.serverId) { |
||||
onlines(state.tableData.param.serverId[server]); |
||||
} |
||||
} |
||||
}; |
||||
const onlines = (serverId: number) => { |
||||
if (!serverId) { |
||||
return; |
||||
} |
||||
gameServerReloadDll({ serverId: serverId }).then((res) => { |
||||
console.log(res.data); |
||||
let data = state.tableData.data.find((r) => r.id === serverId); |
||||
if (data) { |
||||
if (res.data.message) { |
||||
data.msg = res.data.message; |
||||
} else { |
||||
data.msg = '发送失败'; |
||||
} |
||||
} |
||||
}); |
||||
}; |
||||
// 页面加载时 |
||||
onMounted(() => { |
||||
serverList().then((res) => { |
||||
// console.log(res); |
||||
state.tableData.data = res; |
||||
}); |
||||
}); |
||||
const handleSelectionChange = (selection: any[]) => { |
||||
state.tableData.param.serverId = selection.map((item) => item.id); |
||||
console.log(state.tableData.param.serverId, selection); |
||||
}; |
||||
return { |
||||
handleSelectionChange, |
||||
onlineList, |
||||
...toRefs(state), |
||||
}; |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
::v-deep .el-table .el-table__cell { |
||||
padding: 5px; |
||||
margin-left: -20px; |
||||
min-width: 0; |
||||
box-sizing: border-box; |
||||
text-overflow: ellipsis; |
||||
vertical-align: middle; |
||||
position: relative; |
||||
text-align: left; |
||||
z-index: 1; |
||||
} |
||||
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td { |
||||
background: #ffffd5; |
||||
} |
||||
|
||||
::v-deep .el-table .el-table--enable-row-hover .el-table__body tr:hover > td { |
||||
background: inherit; |
||||
} |
||||
</style> |
Loading…
Reference in new issue