From 9a93e068bf6737e847241df8102914772333cba6 Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Thu, 16 Nov 2023 14:23:37 +0800
Subject: [PATCH] add overview page total content

---
 frontend/src/views/Overview/Overview.vue | 59 +++++++++++++++++++++++-
 1 file changed, 58 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/Overview/Overview.vue b/frontend/src/views/Overview/Overview.vue
index ad830b8..aea4760 100644
--- a/frontend/src/views/Overview/Overview.vue
+++ b/frontend/src/views/Overview/Overview.vue
@@ -1,7 +1,35 @@
 <template>
     <div class="content">
         <div class="total">
-            <p>total</p>
+            <div>
+                <div class="curr">
+                    <span>欢迎您：{{ userName }}</span>
+                    <span>所属部门：{{ userDeptName }}</span>
+                    <span>您的身份：{{ userType }}</span>
+                </div>
+                <div>
+                    <el-carousel trigger="click" :interval="8000" indicator-position="none">
+                        <el-carousel-item v-for="item in tooltips" :key="item.id">
+                            <h4 class="small">{{ item.name }}</h4>
+                            <p>{{ item.description }}</p>
+                        </el-carousel-item>
+                    </el-carousel>
+                </div>
+            </div>
+            <div class="bottom">
+                <div class="top_panel zx">
+                    <span>在线机器</span>
+                    <p style="color: rgb(92, 123, 217)">{{ normal }}</p>
+                </div>
+                <div class="top_panel lx">
+                    <span>离线机器</span>
+                    <p style="color: rgb(138, 138, 138)">{{ offline }}</p>
+                </div>
+                <div class="top_panel kx">
+                    <span>未分配机器</span>
+                    <p style="color: rgb(253, 190, 0)">{{ free }}</p>
+                </div>
+            </div>
         </div>
         <div class="recent">
             <p>recent message</p>
@@ -13,6 +41,35 @@
 </template>
   
 <script setup lang="ts">
+import { ref } from "vue";
+
+const userName = ref("暂无");
+const userDeptName = ref("暂无");
+const userType = ref("暂无");
+
+const normal = ref(0);
+const offline = ref(0);
+const free = ref(0);
+
+let tooltips = ref([
+  {
+    id: 1,
+    name: "系统",
+    description:
+      "按部门树节点查看一台机器各指标详情，监控性能变化，创建批次方便批量操作",
+  },
+  {
+    id: 2,
+    name: "批次",
+    description: "查看创建批次，执行下发rpm包动作",
+  },
+  {
+    id: 3,
+    name: "日志",
+    description: "查看执行动作的结果以及失败的具体原因",
+  },
+]);
+
 </script>
   
 <style lang="scss" scoped>
-- 
Gitee