新增在线用户显示

src/store/getters.js

@@ -18,6 +18,7 @@ const getters = {
   defaultRoutes: state => state.permission.defaultRoutes,
   sidebarRouters: state => state.permission.sidebarRouters,
   onlineUserNum: state => state.socket.onlineNum,
-  noticeList: state => state.socket.noticeList
+  noticeList: state => state.socket.noticeList,
+  onlineUsers: state => state.socket.onlineUsers
 }
 export default getters

src/store/modules/socket.js

@@ -1,5 +1,6 @@
 const state = {
   onlineNum: 0,
+  onlineUsers: [],
   noticeList: []
 }
 const mutations = {
@@ -8,6 +9,9 @@ const mutations = {
   },
   SET_NOTICE_list: (state, data) => {
     state.noticeList = data;
+  },
+  SET_ONLINE_USERS: (state, data) => {
+    state.onlineUsers = data;
   }
 }
 
@@ -19,6 +23,9 @@ const actions = {
   // 更新系统通知
   getNoticeList({ commit }, data) {
     commit('SET_NOTICE_list', data)
+  },
+  getOnlineUsers({ commit }, data) {
+    commit('SET_ONLINE_USERS', data)
   }
 }
 

src/utils/signalR.js

@@ -60,6 +60,7 @@ export default {
   },
   // 接收消息处理
   receiveMsg(connection) {
+    console.log(connection)
     connection.on("onlineNum", (data) => {
       store.dispatch("socket/changeOnlineNum", data);
     });
@@ -84,5 +85,10 @@ export default {
         store.dispatch("socket/getNoticeList", data.data);
       }
     })
+
+    // 接收在线用户
+    connection.on("onlineUser", (data) => {
+      store.dispatch("socket/getOnlineUsers", data);
+    })
   }
 }

src/views/index_v1.vue

@@ -64,20 +64,21 @@
         <el-card shadow="hover">
           <template #header>
             <div>
-              <span>最新文章</span>
+              <span>在线用户</span>
               <el-button class="home-card-more" type="text" @click="onOpenGitee">更多</el-button>
             </div>
           </template>
-
           <div class="info">
-            <vue3-seamless-scroll :list="newArticleList" class="info-scroll" :step="0.2" :limitScrollNum="2">
+            <!-- <vue3-seamless-scroll :list="onlineUsers" class="info-scroll" :step="0.2" :limitScrollNum="1"> -->
+            <div class="info-scroll">
               <ul class="info-ul">
-                <li v-for="(v, k) in newArticleList" :key="k" class="info-item">
-                  <div class="info-item-left" v-text="v.title"></div>
-                  <div class="info-item-right" v-text="parseTime(v.updateTime, '{m}/{d}')"></div>
+                <li v-for="(v, k) in onlineUsers" :key="k" class="info-item">
+                  <div class="info-item-left" v-text="v.name"></div>
+                  <div class="info-item-right" v-text="dayjs(v.loginTime).format('HH:mm:ss')"></div>
                 </li>
               </ul>
-            </vue3-seamless-scroll>
+            </div>
+            <!-- </vue3-seamless-scroll> -->
           </div>
         </el-card>
       </el-col>
@@ -120,6 +121,7 @@ import PieChart from './dashboard/PieChart'
 import BarChart from './dashboard/BarChart'
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
 import { listNewArticle } from '@/api/article/article.js'
+import dayjs from 'dayjs'
 
 const data = {
   newVisitis: {
@@ -146,6 +148,9 @@ const userInfo = computed(() => {
 const currentTime = computed(() => {
   return proxy.parseTime(new Date())
 })
+const onlineUsers = computed(() => {
+  return proxy.$store.getters.onlineUsers
+})
 let newArticleList = reactive([])
 
 listNewArticle().then((res) => {
@@ -210,10 +215,11 @@ function onOpenGitee() {}
     }
   }
   .info {
-    height: 198px;
+    height: 189px;
+    // overflow-y: scroll;
     .info-scroll {
       height: 100%;
-      overflow: hidden;
+      overflow-y: scroll;
       .info-ul {
         list-style: none;
         padding: 0;
@@ -236,8 +242,9 @@ function onOpenGitee() {}
             overflow: hidden;
           }
           .info-item-right {
-            width: 60px;
+            width: 160px;
             text-align: right;
+            padding-right: 10px;
           }
         }
       }