|
|
|
<template>
|
|
|
|
<div class="game-account-container">
|
|
|
|
<el-card shadow="hover">
|
|
|
|
<div class="game-account-search mb15">
|
|
|
|
<el-form :inline="true">
|
|
|
|
<el-form-item label="服务器">
|
|
|
|
<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="queryParams.serverId" class="m-2" placeholder="选择服务器" 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="查询">
|
|
|
|
<el-select v-model="queryParams.type" class="m-2" placeholder="" size="large" style="width: 160px">
|
|
|
|
<el-option label="天数" :value="1"/>
|
|
|
|
<el-option label="村庄规模" :value="2"/>
|
|
|
|
<el-option label="小于一天的时间" :value="3"/>
|
|
|
|
</el-select>
|
|
|
|
<el-input v-model="queryParams.data" placeholder="请输入" style="width: 180px">
|
|
|
|
<template #prepend>
|
|
|
|
<el-select v-model="queryParams.compareType" class="m-2" placeholder="" size="default"
|
|
|
|
style="width: 60px">
|
|
|
|
<el-option v-for="item in compareType" :key="item.value" :label="item.label" :value="item.value"/>
|
|
|
|
</el-select>
|
|
|
|
</template>
|
|
|
|
</el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="起始日期" prop="startTime">
|
|
|
|
<el-date-picker type="datetime" size="large" v-model="queryParams.startTime" format="YYYY/MM/DD HH:mm:ss"
|
|
|
|
value-format="x"/>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="截止日期" prop="endTime">
|
|
|
|
<el-date-picker type="datetime" size="large" v-model="queryParams.endTime" format="YYYY/MM/DD HH:mm:ss"
|
|
|
|
value-format="x"/>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
|
|
<el-button size="default" type="primary" class="ml10" @click="accountList">
|
|
|
|
<el-icon>
|
|
|
|
<ele-Search/>
|
|
|
|
</el-icon>
|
|
|
|
查询
|
|
|
|
</el-button>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</div>
|
|
|
|
<div class="game-account-search mb15">
|
|
|
|
<el-form :inline="true">
|
|
|
|
<el-form-item label="" v-if="tableData.avgScale>0">
|
|
|
|
平均村庄规模:{{ tableData.avgScale }}
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="" v-if="tableData.avgDay>0">
|
|
|
|
平均天数:{{ tableData.avgDay }}
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</div>
|
|
|
|
<el-table :data="tableData.data" style="width: 100%" stripe border>
|
|
|
|
<el-table-column type="index" label="序号" width="60"/>
|
|
|
|
<el-table-column prop="stringId" label="id" show-overflow-tooltip></el-table-column>
|
|
|
|
<el-table-column prop="account" label="账号" show-overflow-tooltip></el-table-column>
|
|
|
|
<el-table-column prop="villagerNum" label="人数" show-overflow-tooltip></el-table-column>
|
|
|
|
<el-table-column prop="scale" label="村庄规模" show-overflow-tooltip></el-table-column>
|
|
|
|
<el-table-column prop="day" label="天数" show-overflow-tooltip></el-table-column>
|
|
|
|
<el-table-column v-if="queryParams.type==3" prop="game_time" label="时间" show-overflow-tooltip/>
|
|
|
|
</el-table>
|
|
|
|
<el-row justify="space-evenly">
|
|
|
|
<el-pagination :hide-on-single-page="true" :total="tableData.total" v-model:page-size="queryParams.pageSize"
|
|
|
|
v-model:current-page="queryParams.pageNum" @current-change="accountList"/>
|
|
|
|
</el-row>
|
|
|
|
</el-card>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import {toRefs, reactive, onMounted, defineComponent} from 'vue';
|
|
|
|
import {gameSearchAccount} from "/@/api/game/mange";
|
|
|
|
import {ElMessage} from "element-plus";
|
|
|
|
import {allServerList, ServerCategorize} from "/@/utils/game";
|
|
|
|
import {gSwitchServer} from "/@/utils/utils";
|
|
|
|
|
|
|
|
// 定义接口来定义对象的类型
|
|
|
|
interface TableData {
|
|
|
|
StringId: string;
|
|
|
|
PeopleNum: number;
|
|
|
|
Scale: number;
|
|
|
|
Day: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface TableDataState {
|
|
|
|
serverSwitch: number;
|
|
|
|
queryParams: {
|
|
|
|
type: number,
|
|
|
|
data: number,
|
|
|
|
// day: number;
|
|
|
|
// scale: number;
|
|
|
|
compareType: number;
|
|
|
|
pageSize: number;
|
|
|
|
pageNum: number;
|
|
|
|
serverId: number;
|
|
|
|
startTime: number;
|
|
|
|
endTime: number;
|
|
|
|
};
|
|
|
|
tableData: {
|
|
|
|
data: Array<TableData>;
|
|
|
|
total: number;
|
|
|
|
avgScale: number;
|
|
|
|
avgDay: number;
|
|
|
|
};
|
|
|
|
servers: object[];
|
|
|
|
compareType: Array<{ label: string, value: number }>
|
|
|
|
serverCategorize: object[];
|
|
|
|
}
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
name: 'apiV1GameRoleSearchAccount',
|
|
|
|
setup() {
|
|
|
|
const state = reactive<TableDataState>({
|
|
|
|
serverSwitch: 0,
|
|
|
|
queryParams: {
|
|
|
|
data: 0,
|
|
|
|
type: 1,
|
|
|
|
// day: 0,
|
|
|
|
// time: 0,
|
|
|
|
// scale: 0,
|
|
|
|
compareType: 1,
|
|
|
|
pageSize: 10,
|
|
|
|
pageNum: 1,
|
|
|
|
serverId: "",
|
|
|
|
startTime: 0,
|
|
|
|
endTime: 0,
|
|
|
|
},
|
|
|
|
tableData: {
|
|
|
|
data: [],
|
|
|
|
total: 0,
|
|
|
|
avgScale: 0,
|
|
|
|
avgDay: 0
|
|
|
|
},
|
|
|
|
servers: [],
|
|
|
|
compareType: [
|
|
|
|
{value: 1, label: '=',},
|
|
|
|
{value: 2, label: '<=',},
|
|
|
|
{value: 3, label: '<',},
|
|
|
|
{value: 4, label: '>',},
|
|
|
|
{value: 5, label: '>=',}
|
|
|
|
],
|
|
|
|
serverCategorize: ServerCategorize,
|
|
|
|
});
|
|
|
|
|
|
|
|
const accountList = () => {
|
|
|
|
console.log(state.queryParams);
|
|
|
|
gameSearchAccount(state.queryParams).then(res => {
|
|
|
|
if (!res.data.accounts || res.data.accounts.length == 0) {
|
|
|
|
state.tableData.data = [];
|
|
|
|
state.tableData.total = 0;
|
|
|
|
ElMessage.error('未查询到用户信息!');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
console.log(res);
|
|
|
|
const list = res.data.accounts ?? [];
|
|
|
|
state.tableData.total = res.data.total;
|
|
|
|
state.tableData.data = list;
|
|
|
|
state.tableData.avgScale = res.data.avgScale;
|
|
|
|
state.tableData.avgDay = res.data.avgDay;
|
|
|
|
})
|
|
|
|
};
|
|
|
|
// 页面加载时
|
|
|
|
onMounted(() => {
|
|
|
|
allServerList().then(res => {
|
|
|
|
state.servers = res;
|
|
|
|
})
|
|
|
|
});
|
|
|
|
const switchServer = () => {
|
|
|
|
return gSwitchServer(state.serverSwitch, state.servers)
|
|
|
|
};
|
|
|
|
return {
|
|
|
|
switchServer,
|
|
|
|
accountList,
|
|
|
|
...toRefs(state),
|
|
|
|
};
|
|
|
|
},
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.el-form-item {
|
|
|
|
display: -moz-flex;
|
|
|
|
vertical-align: middle;
|
|
|
|
margin-right: 32px;
|
|
|
|
}
|
|
|
|
|
|
|
|
::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>
|