在线用户列表优化

src/api/monitor/online.js

@@ -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',

src/store/modules/socket.js

@@ -15,9 +15,11 @@ const useSocketStore = defineStore('socket', {
       this.noticeList = data
       this.noticeDot = data.length > 0
     },
-    setOnlineUsers(data) {
+    // setOnlineUsers(data) {
-      this.onlineUsers = data
+    //   const { onlineNum, users } = data
-    },
+    //   this.onlineUsers = users
+    //   this.onlineNum = onlineNum
+    // },
     sendChat(data) {
       const { proxy } = getCurrentInstance()
       console.log(data)

src/utils/request.js

@@ -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 = '后端接口连接异常'

src/utils/signalR.js

@@ -99,9 +99,9 @@ export default {
     })
 
     // 接收在线用户
-    connection.on('onlineUser', (data) => {
+    // connection.on('onlineUser', (data) => {
-      useSocketStore().setOnlineUsers(data)
+    //   useSocketStore().setOnlineUsers(data)
-    })
+    // })
 
     // 接收聊天数据
     connection.on('receiveChat', (data) => {

src/views/index_v1.vue

@@ -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="tool" /> {{ $t('layout.commonFuncs') }}</span>
-              <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>
             <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 {

src/views/monitor/onlineuser/index.vue

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