在线用户列表优化
This commit is contained in:
不做码农
parent
1899fc694f
commit
81f7af1a19
@ -1,7 +1,7 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询在线用户列表
|
||||
export function list(query) {
|
||||
export function listOnline(query) {
|
||||
return request({
|
||||
url: '/monitor/online/list',
|
||||
method: 'get',
|
||||
|
||||
@ -15,9 +15,11 @@ const useSocketStore = defineStore('socket', {
|
||||
this.noticeList = data
|
||||
this.noticeDot = data.length > 0
|
||||
},
|
||||
setOnlineUsers(data) {
|
||||
this.onlineUsers = data
|
||||
},
|
||||
// setOnlineUsers(data) {
|
||||
// const { onlineNum, users } = data
|
||||
// this.onlineUsers = users
|
||||
// this.onlineNum = onlineNum
|
||||
// },
|
||||
sendChat(data) {
|
||||
const { proxy } = getCurrentInstance()
|
||||
console.log(data)
|
||||
|
||||
@ -75,7 +75,7 @@ service.interceptors.response.use(
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
console.log('err' + error)
|
||||
console.log('axios err', error)
|
||||
let { message } = error
|
||||
if (message == 'Network Error') {
|
||||
message = '后端接口连接异常'
|
||||
|
||||
@ -99,9 +99,9 @@ export default {
|
||||
})
|
||||
|
||||
// 接收在线用户
|
||||
connection.on('onlineUser', (data) => {
|
||||
useSocketStore().setOnlineUsers(data)
|
||||
})
|
||||
// connection.on('onlineUser', (data) => {
|
||||
// useSocketStore().setOnlineUsers(data)
|
||||
// })
|
||||
|
||||
// 接收聊天数据
|
||||
connection.on('receiveChat', (data) => {
|
||||
|
||||
@ -27,36 +27,12 @@
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="15">
|
||||
<el-col :md="12" :lg="12" :xl="12" class="mb10" v-hasPermi="['online']">
|
||||
<el-col :md="24" :lg="24" :xl="24" class="mb10">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div>
|
||||
<span><svg-icon name="peoples" />{{ $t('layout.onlineUsers') }}</span>
|
||||
<el-button class="home-card-more" text @click="onOpenGitee">{{ $t('btn.more') }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<div class="info">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<div v-for="(v, k) in onlineUsers" :key="k" class="info-item">
|
||||
<div class="info-item-left" v-text="v.name"></div>
|
||||
<div>{{ v.userIP }}({{ v.location }})</div>
|
||||
<div class="info-item-right" v-text="dayjs(v.loginTime).format('MM/DD日HH:mm:ss')"></div>
|
||||
<el-button text @click="onChat(v)" icon="bell" v-hasRole="['admin']">通知</el-button>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :md="12" :lg="12" :xl="12" class="mb10">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<span><svg-icon name="tool" /> 常用功能</span>
|
||||
<span><svg-icon name="tool" /> {{ $t('layout.commonFuncs') }}</span>
|
||||
<div class="home-card-more">
|
||||
<el-button text @click="handleAdd()">{{ $t('btn.add') }}</el-button>
|
||||
<!-- <el-button text @click="showEdit = !showEdit">
|
||||
<span v-if="!showEdit">{{ $t('btn.edit') }}</span>
|
||||
<span v-else>{{ $t('btn.cancel') }}</span>
|
||||
</el-button> -->
|
||||
</div>
|
||||
</template>
|
||||
<div class="info">
|
||||
@ -111,10 +87,7 @@ import BarChart from './dashboard/BarChart'
|
||||
// import WordCloudChat from './dashboard/WordCloud.vue'
|
||||
import CommonMenu from './components/CommonMenu'
|
||||
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import useSocketStore from '@/store/modules/socket'
|
||||
const showEdit = ref(false)
|
||||
const data = {
|
||||
newVisitis: {
|
||||
@ -132,57 +105,7 @@ const data = {
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
},
|
||||
wordCloud: [
|
||||
{
|
||||
name: 'Vue3',
|
||||
value: 144
|
||||
},
|
||||
{
|
||||
name: '.net6',
|
||||
value: 928
|
||||
},
|
||||
{
|
||||
name: 'Sqlsugar',
|
||||
value: 906
|
||||
},
|
||||
{
|
||||
name: 'Redis',
|
||||
value: 825
|
||||
},
|
||||
{
|
||||
name: '代码生成',
|
||||
value: 514
|
||||
},
|
||||
{
|
||||
name: '开源免费',
|
||||
value: 486
|
||||
},
|
||||
{
|
||||
name: '代码简单',
|
||||
value: 53
|
||||
},
|
||||
{
|
||||
name: '打赏',
|
||||
value: 163
|
||||
},
|
||||
{
|
||||
name: '国际化',
|
||||
value: 163
|
||||
},
|
||||
{
|
||||
name: 'Composition api',
|
||||
value: 1163
|
||||
},
|
||||
{
|
||||
name: 'Quartz.Net',
|
||||
value: 190
|
||||
},
|
||||
{
|
||||
name: 'Element UI',
|
||||
value: 190
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
const { proxy } = getCurrentInstance()
|
||||
const userInfo = computed(() => {
|
||||
@ -191,9 +114,6 @@ const userInfo = computed(() => {
|
||||
const currentTime = computed(() => {
|
||||
return proxy.parseTime(new Date())
|
||||
})
|
||||
const onlineUsers = computed(() => {
|
||||
return useSocketStore().onlineUsers
|
||||
})
|
||||
|
||||
let lineChartData = reactive([])
|
||||
const dataType = ref(null)
|
||||
@ -202,22 +122,7 @@ function handleSetLineChartData(type) {
|
||||
lineChartData = data[type]
|
||||
}
|
||||
handleSetLineChartData('newVisitis')
|
||||
function onOpenGitee() {}
|
||||
function onChat(item) {
|
||||
proxy
|
||||
.$prompt('请输入通知内容', '', {
|
||||
confirmButtonText: '发送',
|
||||
cancelButtonText: '取消',
|
||||
inputPattern: /\S/,
|
||||
inputErrorMessage: '消息内容不能为空'
|
||||
})
|
||||
.then(({ value }) => {
|
||||
proxy.signalr.SR.invoke('SendMessage', item.connnectionId, item.name, value).catch(function (err) {
|
||||
console.error(err.toString())
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
proxy.$modal.msg('请通过搜索添加')
|
||||
}
|
||||
@ -256,32 +161,6 @@ function handleAdd() {
|
||||
.info {
|
||||
height: 200px;
|
||||
// overflow-y: scroll;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.info-item-left {
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.info-item-right {
|
||||
width: 140px;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-wrapper {
|
||||
|
||||
95
src/views/monitor/onlineuser/index.vue
Normal file
95
src/views/monitor/onlineuser/index.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">刷新</el-button>
|
||||
<!-- <el-button icon="Refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table :data="onlineUsers" ref="tableRef" border highlight-current-row>
|
||||
<!-- <el-table-column prop="connnectionId" label="连接id"></el-table-column> -->
|
||||
<el-table-column label="No" type="index" width="50" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="用户名" align="center" />
|
||||
<el-table-column prop="userIP" label="用户IP" align="center" />
|
||||
<el-table-column prop="location" label="登录地点" align="center" />
|
||||
<el-table-column prop="browser" label="登录浏览器"></el-table-column>
|
||||
<el-table-column prop="loginTime" label="登录时间">
|
||||
<template #default="scope">
|
||||
{{ dayjs(scope.row.loginTime).format('MM/DD日HH:mm:ss') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="140">
|
||||
<template #default="scope">
|
||||
<el-button text @click="onChat(scope.row)" icon="bell" v-hasRole="['admin']">通知</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
class="mt10"
|
||||
background
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="onlineuser">
|
||||
import { listOnline } from '@/api/monitor/online'
|
||||
import dayjs from 'dayjs'
|
||||
import useSocketStore from '@/store/modules/socket'
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const queryRef = ref(null)
|
||||
const queryParams = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
|
||||
// const total = computed(() => {
|
||||
// return useSocketStore().onlineNum
|
||||
// })
|
||||
// const onlineUsers = computed(() => {
|
||||
// return useSocketStore().onlineUsers
|
||||
// })
|
||||
const onlineUsers = ref([])
|
||||
const total = ref(0)
|
||||
function handleQuery() {
|
||||
queryParams.pageNum = 1
|
||||
getList()
|
||||
}
|
||||
function getList() {
|
||||
// proxy.signalr.SR.invoke('GetOnlineUsers', queryParams.pageNum, queryParams.pageSize).catch(function (err) {
|
||||
// console.error(err.toString())
|
||||
// })
|
||||
listOnline(queryParams).then((res) => {
|
||||
if (res.code == 200) {
|
||||
total.value = res.data.totalNum
|
||||
onlineUsers.value = res.data.result
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
|
||||
function onChat(item) {
|
||||
proxy
|
||||
.$prompt('请输入通知内容', '', {
|
||||
confirmButtonText: '发送',
|
||||
cancelButtonText: '取消',
|
||||
inputPattern: /\S/,
|
||||
inputErrorMessage: '消息内容不能为空'
|
||||
})
|
||||
.then(({ value }) => {
|
||||
proxy.signalr.SR.invoke('SendMessage', item.connnectionId, item.name, value).catch(function (err) {
|
||||
console.error(err.toString())
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
function resetQuery() {}
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user