From 8c6cf5bc434f1f236b9a12c45c05636a3903f8c7 Mon Sep 17 00:00:00 2001
From: AprilWind <2100166581@qq.com>
Date: Fri, 19 Apr 2024 05:02:14 +0000
Subject: [PATCH] =?UTF-8?q?!104=20add=20=E6=96=B0=E5=A2=9E=E5=9C=A8?=
 =?UTF-8?q?=E7=BA=BF=E7=99=BB=E5=BD=95=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=20*=20update=20=E5=9C=A8=E7=BA=BF=E7=99=BB=E5=BD=95=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E7=AE=A1=E7=90=86=E5=88=A0=E9=99=A4=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=20*=20add=20=E6=96=B0=E5=A2=9E=E5=9C=A8=E7=BA=BF=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/monitor/online/index.ts               | 16 +++++
 src/views/system/user/profile/index.vue       | 14 ++++-
 .../system/user/profile/onlineDevice.vue      | 59 +++++++++++++++++++
 3 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 src/views/system/user/profile/onlineDevice.vue

diff --git a/src/api/monitor/online/index.ts b/src/api/monitor/online/index.ts
index 3d9034a..7484702 100644
--- a/src/api/monitor/online/index.ts
+++ b/src/api/monitor/online/index.ts
@@ -18,3 +18,19 @@ export function forceLogout(tokenId: string) {
     method: 'delete'
   });
 }
+
+// 获取当前用户登录在线设备
+export function getOnline() {
+  return request({
+    url: '/monitor/online',
+    method: 'get'
+  });
+}
+
+// 删除当前在线设备
+export function delOnline(tokenId: string) {
+  return request({
+    url: '/monitor/online/' + tokenId,
+    method: 'post'
+  });
+}
diff --git a/src/views/system/user/profile/index.vue b/src/views/system/user/profile/index.vue
index 0c8b527..426fca8 100644
--- a/src/views/system/user/profile/index.vue
+++ b/src/views/system/user/profile/index.vue
@@ -58,6 +58,9 @@
             <el-tab-pane label="第三方应用" name="thirdParty">
               <thirdParty :auths="state.auths" />
             </el-tab-pane>
+            <el-tab-pane label="在线设备" name="onlinDevice">
+              <onlinDevice :devices="state.devices" />
+            </el-tab-pane>
           </el-tabs>
         </el-card>
       </el-col>
@@ -70,8 +73,10 @@ import UserAvatar from './userAvatar.vue';
 import UserInfo from './userInfo.vue';
 import ResetPwd from './resetPwd.vue';
 import ThirdParty from './thirdParty.vue';
+import OnlinDevice from './onlineDevice.vue';
 import { getAuthList } from '@/api/system/social/auth';
 import { getUserProfile } from '@/api/system/user';
+import { getOnline } from '@/api/monitor/online';
 import { UserVO } from '@/api/system/user/types';
 
 const activeTab = ref('userinfo');
@@ -80,12 +85,14 @@ interface State {
   roleGroup: string;
   postGroup: string;
   auths: any;
+  devices: any;
 }
 const state = ref<State>({
   user: {},
   roleGroup: '',
   postGroup: '',
-  auths: []
+  auths: [],
+  devices: []
 });
 
 const userForm = ref({});
@@ -102,9 +109,14 @@ const getAuths = async () => {
   const res = await getAuthList();
   state.value.auths = res.data;
 };
+const getOnlines = async () => {
+  const res = await getOnline();
+  state.value.devices = res.rows;
+};
 
 onMounted(() => {
   getUser();
   getAuths();
+  getOnlines();
 });
 </script>
diff --git a/src/views/system/user/profile/onlineDevice.vue b/src/views/system/user/profile/onlineDevice.vue
new file mode 100644
index 0000000..479e89a
--- /dev/null
+++ b/src/views/system/user/profile/onlineDevice.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <el-table :data="devices" style="width: 100%; height: 100%; font-size: 10px">
+      <el-table-column label="设备类型" align="center">
+        <template #default="scope">
+          <dict-tag :options="sys_device_type" :value="scope.row.deviceType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
+      <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+      <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
+      <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
+      <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.loginTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-tooltip content="删除" placement="top">
+            <el-button link type="primary" icon="Delete" @click="handldDelOnline(scope.row)">
+            </el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script name="Online" lang="ts" setup>
+import { delOnline } from '@/api/monitor/online';
+import { propTypes } from '@/utils/propTypes';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { sys_device_type } = toRefs<any>(proxy?.useDict('sys_device_type'));
+
+const props = defineProps({
+  devices: propTypes.any.isRequired
+});
+const devices = computed(() => props.devices);
+
+/** 删除按钮操作 */
+const handldDelOnline = (row: any) => {
+  ElMessageBox.confirm('删除设备后，在该设备登录需要重新进行验证')
+    .then(() => {
+      return delOnline(row.tokenId);
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        proxy?.$modal.msgSuccess('删除成功');
+        proxy?.$tab.refreshPage();
+      } else {
+        proxy?.$modal.msgError(res.msg);
+      }
+    })
+    .catch(() => {});
+};
+
+</script>