log-server-web/src/view/ipLogList/gameIpList.vue

<template>
    <div>
        <div class="gva-search-box">
            <el-form ref="searchForm" :inline="true" :model="searchInfo">
                <el-form-item label="游戏id">
                    <el-input v-model="searchInfo.game_id" placeholder="游戏id" />
                </el-form-item>
                <!-- <el-form-item label="日期" prop="create_date">
                    <el-date-picker v-model="searchInfo.create_date" popper-class="picker-popovers" class="timefilter"
                        type="datetime" placeholder="选择日期时间" value-format="YYYY-MM-DD">
                    </el-date-picker>
                </el-form-item> -->
                <el-form-item label="日期" prop="date">
                    <el-date-picker v-model="searchInfo.date" size="default" type="daterange" unlink-panels
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :disabled-date="disabledDate"
                        :shortcuts="shortcuts" />
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
                    <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="gva-table-box">
            <el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column align="left" label="游戏id" min-width="150" prop="game_id" />
                <!-- <el-table-column align="left" label="ip" min-width="150" prop="ip" /> -->
                <el-table-column align="left" label="上报ip次数" min-width="150" prop="count_total" sortable="custom" />
                <el-table-column align="left" label="任务完成" min-width="150" prop="task_count" sortable="custom" />
                <el-table-column align="left" label="成功ip次数" min-width="150" prop="success_ip" sortable="custom" />
                <el-table-column align="left" label="ip个数" min-width="150" prop="count_distinct_ip" sortable="custom" />
                <el-table-column align="left" label="日期" min-width="150" prop="create_date" sortable="custom" />
                <el-table-column align="left" fixed="right" label="操作" width="200">
                    <template #default="scope">
                        <el-button icon="search" size="small" type="primary" link
                            @click="selectIpFunc(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="gva-pagination">
                <el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :total="total"
                    layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
                    @size-change="handleSizeChange" />
            </div>
        </div>
        <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle" width="40%">
            <!-- <template #footer>
                <div class="dialog-footer">
                    <el-text class="mx-1" type="success">Success</el-text>
                    <el-button size="small" @click="closeDialog">取 消</el-button> -->
            <!-- </div>
            </template> -->
            <el-table :data="IpTableData" height="500" border>
                <el-table-column align="center" label="ip" min-width="120" prop="ip" />
                <el-table-column align="center" label="上报次数" min-width="120" prop="count" />
            </el-table>
        </el-dialog>
    </div>
</template>
  
<script>
export default {
    name: 'GameList',
}
</script>
  
<script setup>
import {
    gameIpList,
    getGameIp
} from '@/api/ipLog'
import { toSQLLine } from '@/utils/stringFun'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import warningBar from '@/components/warningBar/warningBar.vue'
import dayjs from "dayjs";
const apis = ref([])
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const IpTableData = ref([])
const searchInfo = ref({})

const onReset = () => {
    searchInfo.value = {}
    getTableData()
}

// 搜索
const onSubmit = () => {
    page.value = 1
    pageSize.value = 10
    searchInfo.value.game_id = Number(searchInfo.value.game_id)
    if (typeof searchInfo.value.date != "undefined") {
        searchInfo.value.date[0] = dayjs(searchInfo.value.date[0]).format(
            "YYYY-MM-DD"
        );
        searchInfo.value.date[1] = dayjs(searchInfo.value.date[1]).format(
            "YYYY-MM-DD"
        );
    }
    getTableData()
}

// 分页
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}

const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
}

// 排序
const sortChange = ({ prop, order }) => {
    if (prop) {
        if (prop === 'id') {
            prop = 'id'
        }
        searchInfo.value.orderKey = toSQLLine(prop)
        searchInfo.value.desc = order === 'descending'
    }
    getTableData()
}

// 查询
const getTableData = async () => {
    const table = await gameIpList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
    if (table.code === 0) {
        tableData.value = table.data.list
        total.value = table.data.total
        page.value = table.data.page
        pageSize.value = table.data.pageSize
    }
}

getTableData()

// 查看IP
const selectIpFunc = async (row) => {
    const res = await getGameIp({ game_id: row.game_id, create_date: row.create_date })
    IpTableData.value = res.data.list
    IpTableData.value.total = res.data.total
    openDialog('getIp')
}
const closeDialog = () => {
    dialogFormVisible.value = false
}
const dialogTitle = ref('')
const type = ref('')
const dialogFormVisible = ref(false)
const openDialog = (key) => {
    switch (key) {
        case 'getIp':
            dialogTitle.value = 'ip个数:' + IpTableData.value.total
            break
        default:
            break
    }
    type.value = key
    dialogFormVisible.value = true
}

// 批量操作
const handleSelectionChange = (val) => {
    apis.value = val
}



// 弹窗相关
// const apiForm = ref(null)
// const initForm = () => {
//     apiForm.value.resetFields()
//     form.value = {
//         game_name: '',
//         game_package_name: ''
//     }
// }

</script>
  
<style scoped lang="scss">
.button-box {
    padding: 10px 20px;

    .el-button {
        float: right;
    }
}

.warning {
    color: #dc143c;
}
</style>