tyj_admin_ui/src/views/gameRole/searchAccount/index.vue

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