调整数据库表的单复数
This commit is contained in:
@@ -0,0 +1,478 @@
|
||||
<template>
|
||||
<div class="pages online-users-page">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-cards">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="6">
|
||||
<a-card>
|
||||
<a-statistic
|
||||
title="在线用户总数"
|
||||
:value="onlineCount"
|
||||
:value-style="{ color: '#3f8600' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined style="font-size: 24px" />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<a-card>
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item label="刷新间隔">
|
||||
<a-select
|
||||
v-model:value="refreshInterval"
|
||||
style="width: 150px"
|
||||
@change="handleRefreshIntervalChange"
|
||||
>
|
||||
<a-select-option :value="0"
|
||||
>不自动刷新</a-select-option
|
||||
>
|
||||
<a-select-option :value="5000"
|
||||
>5秒</a-select-option
|
||||
>
|
||||
<a-select-option :value="10000"
|
||||
>10秒</a-select-option
|
||||
>
|
||||
<a-select-option :value="30000"
|
||||
>30秒</a-select-option
|
||||
>
|
||||
<a-select-option :value="60000"
|
||||
>60秒</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleRefresh"
|
||||
:loading="loading"
|
||||
>
|
||||
<template #icon
|
||||
><ReloadOutlined
|
||||
/></template>
|
||||
刷新
|
||||
</a-button>
|
||||
<a-button @click="handleRefreshAllOffline">
|
||||
<template #icon
|
||||
><StopOutlined
|
||||
/></template>
|
||||
全部下线
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-space>
|
||||
<a-input
|
||||
v-model:value="searchForm.keyword"
|
||||
placeholder="用户名"
|
||||
allow-clear
|
||||
style="width: 200px"
|
||||
/>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格内容 -->
|
||||
<div class="table-content">
|
||||
<sc-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:row-key="rowKey"
|
||||
@refresh="refreshTable"
|
||||
>
|
||||
<template #status="{ record }">
|
||||
<a-tag :color="record.is_online ? 'success' : 'default'">
|
||||
{{ record.is_online ? "在线" : "离线" }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #lastActive="{ record }">
|
||||
{{ formatDate(record.last_active_at) }}
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="handleViewSessions(record)"
|
||||
>
|
||||
查看会话
|
||||
</a-button>
|
||||
<a-popconfirm
|
||||
title="确定强制该用户下线吗？"
|
||||
@confirm="handleOffline(record)"
|
||||
>
|
||||
<a-button type="link" size="small" danger>
|
||||
强制下线
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
@click="handleOfflineAll(record)"
|
||||
>
|
||||
全部下线
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</sc-table>
|
||||
</div>
|
||||
|
||||
<!-- 会话详情弹窗 -->
|
||||
<sessions-dialog
|
||||
v-if="dialog.sessions"
|
||||
ref="sessionsDialogRef"
|
||||
@success="handleSessionsSuccess"
|
||||
@closed="dialog.sessions = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted } from "vue";
|
||||
import { message, Modal } from "ant-design-vue";
|
||||
import {
|
||||
UserOutlined,
|
||||
SearchOutlined,
|
||||
RedoOutlined,
|
||||
ReloadOutlined,
|
||||
StopOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import scTable from "@/components/scTable/index.vue";
|
||||
import sessionsDialog from "./sessions.vue";
|
||||
import authApi from "@/api/auth";
|
||||
|
||||
defineOptions({
|
||||
name: "authOnlineUsers",
|
||||
});
|
||||
|
||||
// 表格引用
|
||||
const tableRef = ref(null);
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
keyword: "",
|
||||
});
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
const loading = ref(false);
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
});
|
||||
|
||||
// 行key
|
||||
const rowKey = "id";
|
||||
|
||||
// 在线用户数量
|
||||
const onlineCount = ref(0);
|
||||
|
||||
// 刷新定时器
|
||||
const refreshInterval = ref(30000); // 默认30秒
|
||||
let refreshTimer = null;
|
||||
|
||||
// 对话框状态
|
||||
const dialog = reactive({
|
||||
sessions: false,
|
||||
});
|
||||
|
||||
// 弹窗引用
|
||||
const sessionsDialogRef = ref(null);
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: "#",
|
||||
dataIndex: "_index",
|
||||
key: "_index",
|
||||
width: 60,
|
||||
align: "center",
|
||||
},
|
||||
{ title: "用户名", dataIndex: "username", key: "username", width: 150 },
|
||||
{ title: "真实姓名", dataIndex: "real_name", key: "real_name", width: 150 },
|
||||
{ title: "邮箱", dataIndex: "email", key: "email", width: 200 },
|
||||
{ title: "手机号", dataIndex: "phone", key: "phone", width: 150 },
|
||||
{
|
||||
title: "状态",
|
||||
dataIndex: "status",
|
||||
key: "status",
|
||||
width: 100,
|
||||
align: "center",
|
||||
slot: "status",
|
||||
},
|
||||
{
|
||||
title: "最后活跃时间",
|
||||
dataIndex: "last_active_at",
|
||||
key: "last_active_at",
|
||||
width: 180,
|
||||
slot: "lastActive",
|
||||
},
|
||||
{
|
||||
title: "最后登录IP",
|
||||
dataIndex: "last_login_ip",
|
||||
key: "last_login_ip",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "action",
|
||||
key: "action",
|
||||
width: 200,
|
||||
align: "center",
|
||||
slot: "action",
|
||||
fixed: "right",
|
||||
},
|
||||
];
|
||||
|
||||
// 加载在线用户数量
|
||||
const loadOnlineCount = async () => {
|
||||
try {
|
||||
const res = await authApi.onlineUsers.count.get();
|
||||
if (res.code === 200) {
|
||||
onlineCount.value = res.data || 0;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取在线用户数量失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载在线用户列表
|
||||
const loadOnlineUsers = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const params = {
|
||||
...searchForm,
|
||||
limit: pagination.pageSize,
|
||||
};
|
||||
const res = await authApi.onlineUsers.list.get(params);
|
||||
loading.value = false;
|
||||
|
||||
if (res.code === 200) {
|
||||
// 添加序号
|
||||
const list = res.data?.list || [];
|
||||
tableData.value = list.map((item, index) => ({
|
||||
...item,
|
||||
_index:
|
||||
(pagination.current - 1) * pagination.pageSize + index + 1,
|
||||
}));
|
||||
pagination.total = res.data?.total || 0;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载在线用户列表失败:", error);
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 刷新表格
|
||||
const refreshTable = () => {
|
||||
loadOnlineCount();
|
||||
loadOnlineUsers();
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1;
|
||||
refreshTable();
|
||||
};
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
searchForm.keyword = "";
|
||||
pagination.current = 1;
|
||||
refreshTable();
|
||||
};
|
||||
|
||||
// 刷新按钮
|
||||
const handleRefresh = () => {
|
||||
refreshTable();
|
||||
message.success("刷新成功");
|
||||
};
|
||||
|
||||
// 刷新间隔变化
|
||||
const handleRefreshIntervalChange = (value) => {
|
||||
clearRefreshTimer();
|
||||
if (value > 0) {
|
||||
startRefreshTimer(value);
|
||||
}
|
||||
};
|
||||
|
||||
// 启动刷新定时器
|
||||
const startRefreshTimer = (interval) => {
|
||||
refreshTimer = setInterval(() => {
|
||||
refreshTable();
|
||||
}, interval);
|
||||
};
|
||||
|
||||
// 清除刷新定时器
|
||||
const clearRefreshTimer = () => {
|
||||
if (refreshTimer) {
|
||||
clearInterval(refreshTimer);
|
||||
refreshTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 查看用户会话
|
||||
const handleViewSessions = (record) => {
|
||||
dialog.sessions = true;
|
||||
setTimeout(() => {
|
||||
sessionsDialogRef.value?.open().setData(record);
|
||||
}, 0);
|
||||
};
|
||||
|
||||
// 强制用户下线（单个）
|
||||
const handleOffline = async (record) => {
|
||||
try {
|
||||
const res = await authApi.onlineUsers.offline.post(record.id, {});
|
||||
if (res.code === 200) {
|
||||
message.success("强制下线成功");
|
||||
refreshTable();
|
||||
} else {
|
||||
message.error(res.message || "操作失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("强制下线失败:", error);
|
||||
message.error("操作失败");
|
||||
}
|
||||
};
|
||||
|
||||
// 强制用户所有设备下线
|
||||
const handleOfflineAll = async (record) => {
|
||||
try {
|
||||
const res = await authApi.onlineUsers.offlineAll.post(record.id);
|
||||
if (res.code === 200) {
|
||||
message.success("全部下线成功");
|
||||
refreshTable();
|
||||
} else {
|
||||
message.error(res.message || "操作失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("全部下线失败:", error);
|
||||
message.error("操作失败");
|
||||
}
|
||||
};
|
||||
|
||||
// 全部下线
|
||||
const handleRefreshAllOffline = () => {
|
||||
Modal.confirm({
|
||||
title: "确认操作",
|
||||
content: "确定要强制所有在线用户下线吗？",
|
||||
okText: "确定",
|
||||
cancelText: "取消",
|
||||
okType: "danger",
|
||||
onOk: async () => {
|
||||
try {
|
||||
// 这里需要遍历所有在线用户并下线
|
||||
const onlineUsers = tableData.value.filter(
|
||||
(user) => user.is_online,
|
||||
);
|
||||
for (const user of onlineUsers) {
|
||||
await authApi.onlineUsers.offlineAll.post(user.id);
|
||||
}
|
||||
message.success("全部下线成功");
|
||||
refreshTable();
|
||||
} catch (error) {
|
||||
console.error("全部下线失败:", error);
|
||||
message.error("操作失败");
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 会话操作成功回调
|
||||
const handleSessionsSuccess = () => {
|
||||
refreshTable();
|
||||
};
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (date) => {
|
||||
if (!date) return "-";
|
||||
const d = new Date(date);
|
||||
return d.toLocaleString("zh-CN", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
refreshTable();
|
||||
// 启动自动刷新
|
||||
if (refreshInterval.value > 0) {
|
||||
startRefreshTimer(refreshInterval.value);
|
||||
}
|
||||
});
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
onUnmounted(() => {
|
||||
clearRefreshTimer();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.online-users-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.stats-cards {
|
||||
margin-bottom: 16px;
|
||||
|
||||
:deep(.ant-card) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-statistic-title) {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
:deep(.ant-statistic-content) {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user