From 6a4588b79fa052deb861d8be3a2472bd29c3da57 Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Wed, 22 Nov 2023 14:16:29 +0800
Subject: [PATCH] request machines overview info at overview page

---
 frontend/src/global/defines.ts           |  4 ++-
 frontend/src/request/overview.ts         |  9 +++++++
 frontend/src/request/request.ts          | 12 ++++++---
 frontend/src/request/user.ts             |  3 +++
 frontend/src/views/Home/Home.vue         |  2 +-
 frontend/src/views/Overview/Overview.vue | 32 ++++++++++++++++++------
 6 files changed, 49 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/request/overview.ts

diff --git a/frontend/src/global/defines.ts b/frontend/src/global/defines.ts
index aba9e13..2a64f5f 100644
--- a/frontend/src/global/defines.ts
+++ b/frontend/src/global/defines.ts
@@ -1,5 +1,7 @@
 
 // cookie定义
-export const CookieAuthToken = "token"
+// TODO: use simple token name
+// export const CookieAuthToken = "token"
+export const CookieAuthToken = "Admin-Token"
 
 
diff --git a/frontend/src/request/overview.ts b/frontend/src/request/overview.ts
new file mode 100644
index 0000000..d0eb9e2
--- /dev/null
+++ b/frontend/src/request/overview.ts
@@ -0,0 +1,9 @@
+import request from './request';
+
+// 获取机器集群概览信息
+export function machinesOverview() {
+  return request({
+    url: '/overview/info',
+    method: 'get',
+  });
+}
\ No newline at end of file
diff --git a/frontend/src/request/request.ts b/frontend/src/request/request.ts
index 150670d..e26ac1a 100644
--- a/frontend/src/request/request.ts
+++ b/frontend/src/request/request.ts
@@ -1,4 +1,4 @@
-import axios from 'axios';
+import axios, { type AxiosRequestConfig } from 'axios';
 
 
 // 公共定义
@@ -30,11 +30,17 @@ instance.interceptors.response.use(
   },
   (error) => {
     // 处理响应错误
-    return Promise.reject(error);
+    if (error.response.data) {
+      return error.response.data;
+    }
+    return {
+      code: error.response.status,
+      msg: error.response.statusText,
+    }
   }
 );
 
 // 封装通用的request函数
-export default function request(config: any) {
+export default function request(config: AxiosRequestConfig) {
   return instance(config);
 }
\ No newline at end of file
diff --git a/frontend/src/request/user.ts b/frontend/src/request/user.ts
index 7a64a91..1f83280 100644
--- a/frontend/src/request/user.ts
+++ b/frontend/src/request/user.ts
@@ -1,4 +1,5 @@
 import request from './request';
+
 // 用户登录
 export function loginByEmail(data: any) {
   return request({
@@ -7,6 +8,7 @@ export function loginByEmail(data: any) {
     data,
   });
 }
+
 // 获取全部用户信息
 export function getUsers(data: any) {
   return request({
@@ -15,6 +17,7 @@ export function getUsers(data: any) {
     params: data,
   });
 }
+
 // 按邮箱查找用户
 export function searchUser(data: any, paged: any) {
   return request({
diff --git a/frontend/src/views/Home/Home.vue b/frontend/src/views/Home/Home.vue
index 3ef6a34..47afce4 100644
--- a/frontend/src/views/Home/Home.vue
+++ b/frontend/src/views/Home/Home.vue
@@ -74,7 +74,7 @@ onMounted(() => {
             ElMessage.error("failed to login:" + resp.msg)
         }
     }).catch((err) => {
-        ElMessage.error("get platform version failed:", err)
+        ElMessage.error("get platform version failed:" + err)
     })
 })
 
diff --git a/frontend/src/views/Overview/Overview.vue b/frontend/src/views/Overview/Overview.vue
index 290289d..b203890 100644
--- a/frontend/src/views/Overview/Overview.vue
+++ b/frontend/src/views/Overview/Overview.vue
@@ -5,7 +5,7 @@
                 <div class="user">
                     <span>欢迎您：{{ user.name }}</span>
                     <span>所属部门：{{ user.department }}</span>
-                    <span>您的身份：{{ user.roleID === "1"? "超级管理员" : "普通用户" }}</span>
+                    <span>您的身份：{{ user.roleID === "1" ? "超级管理员" : "普通用户" }}</span>
                 </div>
                 <div class="tips">
                     <el-carousel style="width: 100%; height: 100%;" trigger="click" :interval="8000"
@@ -20,15 +20,15 @@
             <div class="bottom">
                 <div class="bottom_panel zx">
                     <span>在线机器</span>
-                    <p style="color: rgb(92, 123, 217)">{{ normal }}</p>
+                    <p style="color: rgb(92, 123, 217)">{{ overview.normal }}</p>
                 </div>
                 <div class="bottom_panel lx">
                     <span>离线机器</span>
-                    <p style="color: rgb(138, 138, 138)">{{ offline }}</p>
+                    <p style="color: rgb(138, 138, 138)">{{ overview.offline }}</p>
                 </div>
                 <div class="bottom_panel kx">
                     <span>未分配机器</span>
-                    <p style="color: rgb(253, 190, 0)">{{ free }}</p>
+                    <p style="color: rgb(253, 190, 0)">{{ overview.free }}</p>
                 </div>
             </div>
         </div>
@@ -60,16 +60,15 @@
   
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { ElMessage } from 'element-plus';
 import DepartChart from "./components/DepartChart.vue";
 
 import { type User, userStore } from "@/stores/user";
+import { machinesOverview } from "@/request/overview";
+import { RespCodeOK } from "@/request/request";
 
 const user = ref<User>({})
 
-const normal = ref(0);
-const offline = ref(0);
-const free = ref(0);
-
 let tooltips = ref([
     {
         id: 1,
@@ -102,8 +101,25 @@ const Message = ref([
     },
 ]);
 
+interface MachinesOverview {
+    normal?: number
+    offline?: number
+    free?: number
+}
+const overview = ref<MachinesOverview>({})
+
 onMounted(() => {
     user.value = userStore().user
+
+    machinesOverview().then((resp: any) => {
+        if (resp.code === RespCodeOK) {
+            overview.value = resp.data.data.AgentStatus
+        } else {
+            ElMessage.error("failed to get machines overview info: " + resp.msg)
+        }
+    }).catch((err: any) => {
+        ElMessage.error("failed to get machines overview info:" + err.msg)
+    })
 })
 </script>
   
-- 
Gitee