From b524672b0517df8cb62eafd331b083ee57a36d91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Sun, 15 May 2022 09:24:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9C=A8=E7=BA=BF=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/getters.js        |  3 ++-
 src/store/modules/socket.js |  7 +++++++
 src/utils/signalR.js        |  6 ++++++
 src/views/index_v1.vue      | 27 +++++++++++++++++----------
 4 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/store/getters.js b/src/store/getters.js
index 762a9fb..67a6b9b 100644
--- a/src/store/getters.js
+++ b/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
\ No newline at end of file
diff --git a/src/store/modules/socket.js b/src/store/modules/socket.js
index 5d9935b..fd32662 100644
--- a/src/store/modules/socket.js
+++ b/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)
   }
 }
 
diff --git a/src/utils/signalR.js b/src/utils/signalR.js
index 00d0d34..31097b0 100644
--- a/src/utils/signalR.js
+++ b/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);
+    })
   }
 }
\ No newline at end of file
diff --git a/src/views/index_v1.vue b/src/views/index_v1.vue
index d32dc3b..6ff7980 100644
--- a/src/views/index_v1.vue
+++ b/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;
           }
         }
       }