diff --git a/public/images/home.png b/public/images/home.png
new file mode 100644
index 0000000..84a071c
Binary files /dev/null and b/public/images/home.png differ
diff --git a/src/api/menu/index.ts b/src/api/menu/index.ts
index cdc272f..b3ac6f8 100644
--- a/src/api/menu/index.ts
+++ b/src/api/menu/index.ts
@@ -8,6 +8,34 @@ class MenuAPI {
   static getRoutes() {
     return new Promise((resolve) => {
       resolve([
+        {
+          path: "/home",
+          component: "Layout",
+          redirect: "/home/index2",
+          name: "/index2",
+          meta: {
+            title: "数据总览2",
+            icon: "homepage",
+            hidden: false,
+            roles: ["GUEST", "ADMIN", "ADMIN6"],
+            alwaysShow: false,
+          },
+          children: [
+            {
+              path: "index2",
+              component: "dashboard/index2",
+              name: "dashboardIndex2",
+              meta: {
+                title: "模型管理",
+                icon: "user",
+                hidden: true,
+                roles: ["ADMIN", "GUEST"],
+                keepAlive: true,
+                alwaysShow: false,
+              },
+            },
+          ]
+        },
         {
           path: "/modelMgr",
           component: "Layout",
diff --git a/src/assets/logojd.png b/src/assets/logojd.png
new file mode 100644
index 0000000..016667b
Binary files /dev/null and b/src/assets/logojd.png differ
diff --git a/src/layout/components/NavBar/components/NavbarRight2.vue b/src/layout/components/NavBar/components/NavbarRight2.vue
new file mode 100644
index 0000000..f4b92ef
--- /dev/null
+++ b/src/layout/components/NavBar/components/NavbarRight2.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="flex" style="height: 100%;align-items: center;">
+    <div style="flex-grow: 1;display: flex;align-items: center;padding-top: 3px;">
+      <span style="position: relative;top:7px;">
+      <img  src="@/assets/logojd.png" class="logo-image" />
+    </span>    
+      <span class="logo-title" style="font-weight: bold;font-size: 28px;margin-left: auto;margin-right: auto;color:#101010">超异构框架统一管理平台</span>
+    </div>
+    <div>
+      <!--全屏 -->
+      <div class="setting-item" @click="toggle">
+        <svg-icon
+          :icon-class="isFullscreen ? 'fullscreen-exit' : 'fullscreen'"
+        />
+      </div>
+
+    <!-- 用户头像 -->
+    <el-dropdown class="setting-item" trigger="click">
+      <div class="flex-center h100% p10px">
+        <img
+          :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'"
+          class="rounded-full mr-10px w24px w24px"
+        />
+        <span>{{ userStore.user.username }}</span>
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>          
+          <el-dropdown-item >
+            修改密码
+          </el-dropdown-item>
+          <el-dropdown-item  @click="logout">
+            注销登录
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  useAppStore,
+  useTagsViewStore,
+  useUserStore,
+  useSettingsStore,
+} from "@/store";
+import defaultSettings from "@/settings";
+import { DeviceEnum } from "@/enums/DeviceEnum";
+
+const appStore = useAppStore();
+const tagsViewStore = useTagsViewStore();
+const userStore = useUserStore();
+const settingStore = useSettingsStore();
+
+const route = useRoute();
+const router = useRouter();
+
+const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
+
+const { isFullscreen, toggle } = useFullscreen();
+
+/**
+ * 注销
+ */
+function logout() {
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+    lockScroll: false,
+  }).then(() => {
+    userStore
+      .logout()
+      .then(() => {
+        tagsViewStore.delAllViews();
+      })
+      .then(() => {
+        router.push(`/login?redirect=${route.fullPath}`);
+      });
+  });
+}
+</script>
+<style lang="scss" scoped>
+.setting-item {
+  display: inline-block;
+  min-width: 40px;
+  height: $navbar-height;
+  line-height: $navbar-height;
+  color: var(--el-text-color);
+  text-align: center;
+  cursor: pointer;
+
+  &:hover {
+    background: rgb(0 0 0 / 10%);
+  }
+}
+.logo-image {    
+    height: 60px;
+  }
+.layout-top,
+.layout-mix {
+  .setting-item,
+  .el-icon {
+    color: var(--el-color-white);
+  }
+}
+
+.dark .setting-item:hover {
+  background: rgb(255 255 255 / 20%);
+}
+</style>
diff --git a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue b/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
index 8dbc291..229832d 100644
--- a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
+++ b/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
@@ -51,7 +51,7 @@ const handleMenuSelect = (routePath: string) => {
   permissionStore.setMixLeftMenus(routePath);
   // 获取左侧菜单集合，默认跳转到第一个菜单
   const mixLeftMenus = permissionStore.mixLeftMenus;
-  goToFirstMenu(mixLeftMenus);
+  goToFirstMenu(mixLeftMenus);  
 };
 
 /**
diff --git a/src/layout/index.vue b/src/layout/index.vue
index e7cf2fe..6742776 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,6 +1,9 @@
 <template>  
   <el-container class="wh-full main-container">
-      <el-header><NavbarRight /></el-header>
+      <el-header>
+        <NavbarRight2 v-if="isNav2"/>
+        <NavbarRight v-else/>
+      </el-header>
       <el-container class="center-container">
         <el-aside width="200px">
           <Sidebar class="sidebar-container" />
@@ -14,18 +17,20 @@
 <script setup lang="ts">
 import { useAppStore,  usePermissionStore } from "@/store";
 import { DeviceEnum } from "@/enums/DeviceEnum";
+import NavbarRight2 from './components/NavBar/components/NavbarRight2.vue'
 const appStore = useAppStore();
 const permissionStore = usePermissionStore();
 const width = useWindowSize().width;
 const WIDTH_DESKTOP = 992; // 响应式布局容器固定宽度  大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
 const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
 const isOpenSidebar = computed(() => appStore.sidebar.opened);
-
+let isNav2=ref(false)
 const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活path
 
 watch(
   () => activeTopMenuPath.value,
   (newVal) => {
+    
     permissionStore.setMixLeftMenus(newVal);
   },
   {
@@ -46,10 +51,13 @@ watchEffect(() => {
 });
 
 
-
+onMounted(()=>{
+  isNav2.value=location.href.indexOf("/home/index2")>=0
+});
 
 const route = useRoute();
-watch(route, () => {
+watch(route, (a,b,c) => {
+  isNav2.value=a.path=='/home/index2';
   if (isMobile.value && isOpenSidebar.value) {
     appStore.closeSideBar();
   }
diff --git a/src/router/index.ts b/src/router/index.ts
index b67fdf5..7c236ee 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -21,7 +21,10 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import("@/views/login/index.vue"),
     meta: { hidden: true },
   },
-
+  {
+    path: "/home2",
+    component: () => import("@/views/home2.vue"),    
+  },
   {
     path: "/",
     name: "/",
diff --git a/src/views/dashboard/components/ModelFlow2.vue b/src/views/dashboard/components/ModelFlow2.vue
new file mode 100644
index 0000000..7b45481
--- /dev/null
+++ b/src/views/dashboard/components/ModelFlow2.vue
@@ -0,0 +1,299 @@
+<template>
+    <div class="model-flow">
+        <el-row class="row-1">            
+                <div class="card-item">
+                    <div class="title-text">任务描述</div>
+                    <el-badge :value="0" class="item">
+                    <div class="div-img">
+                        <img class="img-150" src="./flow/suanfashangchuan.png" />
+                    </div>                    
+                    </el-badge>
+                </div>            
+                <div class="line line-right">                  
+                </div>            
+                <div class="card-item is-active" >
+                    <div class="title-text">算子检查</div>
+                    <el-badge :value="10" class="item">
+                    <div class="div-img">
+                    <img class="img-150" src="./flow/suanzijiancha.png" />
+                   
+                    </div>
+                </el-badge>
+                </div>
+            
+                <div class="line line-right">
+                </div>
+            
+                <div class="card-item" >
+                    <div class="title-text">编译部署</div>
+                    <el-badge :value="0" class="item">
+                    <div class="div-img">
+                    <img class="img-150" src="./flow/bybs.png" />
+                   
+                    </div>
+                </el-badge>
+                </div>
+                <div class="line line-right">
+                </div>
+                <div class="card-item">
+                    <div class="title-text">性能采集</div>
+                    <el-badge :value="0" class="item">
+                    <div class="div-img">
+                    <img class="img-150" src="./flow/tlpg.png" />
+                    </div>
+                </el-badge>
+                </div>
+            
+                <div class="line line-right">
+                </div>
+            
+                <div class="card-item">
+                    <div class="title-text">评估报告</div>
+                    <el-badge :value="0" class="item">
+                    <div class="div-img">
+                    <img class="img-150" src="./flow/pgbg.png" />
+                    </div>
+                </el-badge>
+                </div>            
+
+        </el-row>       
+        <el-row class="row-3">
+            
+                <div class="card-item line-top">
+                    <el-badge :value="0" class="item">
+                    <div class="div-img">
+                        <img class="img-120" src="./flow/szgl.png" />                    
+                    </div>
+                    </el-badge>
+                        <div class="title-text">算子管理</div>
+                    
+                </div>
+                <div class="line"></div>
+            
+                <div class="card-item" >
+                </div>
+                <div class="line"></div>
+                <div class="card-item card-center">
+                    <div class="card-center-item">
+                        <el-badge :value="0" class="item">
+                    <div class="div-img">
+                    <img class="img-120" src="./flow/sbgl.png" />
+                    </div>
+                </el-badge>
+                        <div class="title-text">设备管理</div>
+                    </div>
+                    <div class="card-center-item">
+                        <el-badge :value="0" class="item">
+                    <div class="div-img">
+                    <img class="img-120" src="./flow/gjgl.png" />
+                    </div>
+                </el-badge>
+                    <div class="title-text">工具管理</div>
+                    </div>
+                </div>
+                <div class="line"></div>
+                <div class="card-item" ></div>
+                <div class="line"></div>
+                <div class="card-item  line-top">
+                    <el-badge :value="0" class="item">
+                    <div class="div-img">
+                    <img class="img-120" src="./flow/sjjgl.png" />
+                    </div>
+                </el-badge>
+                        <div class="title-text">数据集管理</div>
+                    
+                </div>
+
+
+        </el-row>
+    </div>
+</template>
+
+<script lang='ts' setup>
+</script>
+<style lang='scss'>
+@media screen and (max-width:1440px) {
+    .model-flow {
+        padding-left:10px;
+    }    
+}
+@media screen and (min-width:1440px) {
+    .model-flow {
+        padding-left:60px;
+    }    
+}
+.model-flow {
+    .row-1 {
+        .title-text {
+             margin-bottom: 10px;
+            }
+        .line{
+            position: relative;
+            width:calc(20% - 120px);
+            &::before{
+                display: inline-block;
+                height: 1px;
+                content: " ";
+                width:calc(100% - 30px);
+                border-top:dotted 2px #3399ff;
+                position: relative;
+                top:40%;
+                left:10px;                
+            }
+            &::after{
+                display: inline-block;
+                content:" ";
+                background-image: url('./flow/arrow.png');
+                width:6px;
+                height:6px;
+                position: relative;
+                top:calc(40% + 2px);
+                right:-10px;
+            }
+        }      
+    }
+   
+    .row-3{
+        margin-top:60px;
+        .line{
+            position: relative;
+            width:calc(20% - 120px);
+            text-align: center;
+            img{
+                position: relative;
+                top:30px;
+            }
+        }
+        .title-text{
+            margin-top:10px;
+        }
+        .card-center{
+            position: relative;
+            width:120px;
+            .card-center-item{
+                position:absolute;
+                width: 120px;
+                top:24px;
+                z-index: 9;
+                &:first-child{
+                    left: -90px;
+                    &::after{
+                        display:inline-block;
+                        content:" ";
+                        background-image: url('./flow/line1.png');
+                        width: 72px;
+                        height: 40px;
+                        position: relative;
+                        top:-175px;
+                        left:60px;
+                    }
+                    &::before{
+                        display: inline-block;
+                        content: " ";
+                        height: 25px;
+                        width: 2px;
+                        border-left:dotted 1px #3399ff;
+                        position:absolute;
+                        top:-32px;
+                        left:60px;
+                    }
+                }
+                &:last-child{
+                    left: 90px;
+                    &::after{
+                        display:inline-block;
+                        content:" ";
+                        background-image: url('./flow/line2.png');
+                        width: 72px;
+                        height: 40px;
+                        position: relative;
+                        top:-175px;
+                        left:-10px;
+                    }
+                    &::before{
+                        display: inline-block;
+                        content: " ";
+                        height: 25px;
+                        width: 2px;
+                        border-left:dotted 1px #3399ff;
+                        position:absolute;
+                        top:-32px;
+                        left:61px;
+                    }
+                }
+            }
+        }
+        .card-item{
+            &.line-top{
+                &::after{
+                    display: inline-block;
+                    content:" ";
+                    border-left:dotted 2px #3399ff;
+                    height: 60px;
+                    position: relative;
+                    top:-170px;
+                    left:60px;
+                }
+                &::before{
+                    display: inline-block;
+                    content:" ";
+                    background-image: url('./flow/arrow.png');
+                    transform: rotate(-90deg);
+                    width:6px;
+                    height:6px;
+                    position: relative;
+                    top:-61px;
+                    left:58px;
+                }
+            }
+        }
+    }
+
+    .card-item {
+        width: 120px; 
+        .el-badge__content{
+                display: none;
+            }
+        &.is-active{
+            .div-img{                      
+                background: #3399ff;
+                box-shadow: var(--el-box-shadow-light);
+                &:hover{
+                    background: #3399ff88;                    
+                }
+            }
+            .el-badge__content{
+                display: inline-block;
+            }
+        }
+        .title-text{
+            text-align: center;
+            font-weight: bold;
+            font-size: 14px;
+        }
+        .el-badge{
+            width: auto;
+            display: block;
+        }
+        .div-img{                      
+            background: #fff;
+            text-align: center;
+            padding:10px 0px 0px;
+            border-radius: 8px;           
+            &:hover{
+                box-shadow: var(--el-box-shadow-light);
+            }
+            img {
+                &.img-150 {
+                    width: 80px;
+                    height: 44px;
+                }
+                &.img-120{
+                    width: 80px;
+                    height: 55px;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 96d0ddc..62976f2 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -117,28 +117,30 @@ import IndexNotice from './components/IndexNotice.vue'
 import ServiceStatus from './components/ServiceStatus.vue'
 import DeviceAPI from "@/api/device";
 let svTemp=ref(55.5)
+let rd=()=>{ return +(""+Math.random()).substring(3,5)};
+let rd2=()=>{ return +(""+Math.random()).substring(3,4)};
 let topInfos = reactive([
-  { title: '模型总数', count: 158,ucnt:3, clsName: 'c1', icon: "images/nav/nav1.png" },
-  { title: '算子总数', count: 158, ucnt:3,clsName: 'c1', icon: "images/nav/nav2.png" },
-  { title: '数据集总数', count: 158, ucnt:3,clsName: 'c1', icon: "images/nav/nav3.png" },
-  { title: '评估报告总数', count: 158,ucnt:3, clsName: 'c1', icon: "images/nav/nav4.png" },
-  { title: '互联总数', count: 158, ucnt:3,clsName: 'c1', icon: "images/nav/nav5.png" },
-  { title: '总访问量', count: 158, ucnt:3,clsName: 'c1', icon: "images/nav/nav1.png" },
+  { title: '模型总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav1.png" },
+  { title: '算子总数', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav2.png" },
+  { title: '数据集总数', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav3.png" },
+  { title: '评估报告总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav4.png" },
+  { title: '互联总数', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav5.png" },
+  { title: '总访问量', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav1.png" },
 ]);
 
 let devInfos = reactive([
-  { id: 1001, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 'offline', temperature: 25, memory: 85, cpu: 51 },
-  { id: 1002, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 'compile', temperature: 25, memory: 85, cpu: 51 },
-  { id: 1003, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'free', temperature: 25, memory: 85, cpu: 51 },
-  { id: 1004, name: '设备名称4', netType: 'network001', modelName: '模型名称', state: 'inferencing', temperature: 25, memory: 85, cpu: 51 },
-  { id: 1005, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 'noreg', temperature: 25, memory: 85, cpu: 51 },
-  { id: 1006, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'publish', temperature: 25, memory: 85, cpu: 51 },
-  { id: 1007, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 'training', temperature: 25, memory: 85, cpu: 51 },
-  { id: 1008, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 'updating', temperature: 25, memory: 85, cpu: 51 },
-  { id: 1009, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'offline', temperature: 25, memory: 85, cpu: 51 },
-  { id: 1010, name: '设备名称4', netType: 'network001', modelName: '模型名称', state: 'training', temperature: 25, memory: 85, cpu: 51 },
-  { id: 1011, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 'training', temperature: 25, memory: 85, cpu: 51 },
-  { id: 1012, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'training', temperature: 25, memory: 85, cpu: 51 },
+  { id: 1001, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 'offline', temperature:rd() , memory: rd(), cpu:rd() },
+  { id: 1002, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 'compile', temperature:rd() , memory: rd(), cpu:rd() },
+  { id: 1003, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'free', temperature:rd() , memory: rd(), cpu:rd() },
+  { id: 1004, name: '设备名称4', netType: 'network001', modelName: '模型名称', state: 'inferencing', temperature:rd() , memory: rd(), cpu:rd() },
+  { id: 1005, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 'noreg', temperature:rd() , memory: rd(), cpu:rd() },
+  { id: 1006, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'publish', temperature:rd() , memory: rd(), cpu:rd() },
+  { id: 1007, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 'training', temperature:rd() , memory: rd(), cpu:rd() },
+  { id: 1008, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 'updating', temperature:rd() , memory: rd(), cpu:rd() },
+  { id: 1009, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'offline', temperature:rd() , memory: rd(), cpu:rd() },
+  { id: 1010, name: '设备名称4', netType: 'network001', modelName: '模型名称', state: 'training', temperature:rd() , memory: rd(), cpu:rd() },
+  { id: 1011, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 'training', temperature:rd() , memory: rd(), cpu:rd() },
+  { id: 1012, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'training', temperature:rd() , memory: rd(), cpu:rd() },
 ])
 const winWidth=ref(0)
 const isSmallScreen=computed(()=>{
@@ -161,7 +163,7 @@ const getState=(e:any)=>{
     return "未注册";
   }
   if(e=="publish"){
-    return "部署模型和算子中";
+    return "部署中";
   }
   if(e=="training"){
     return "训练中";
diff --git a/src/views/dashboard/index2.vue b/src/views/dashboard/index2.vue
new file mode 100644
index 0000000..d2c47b2
--- /dev/null
+++ b/src/views/dashboard/index2.vue
@@ -0,0 +1,478 @@
+<template>
+    <div class="dashboard-container" :class="isSmallScreen?'is-small':''">
+      <!-- github角标 -->
+      <el-row :gutter="10" class="mt-3" style="margin-bottom: 12px;">
+        <el-col :span="4" v-for="(it, idx) in topInfos" :key="idx">
+          <el-card shadow="always" class="top-row1">
+            <img :src="it.icon" class="top-icon" />
+            <div class="top-row">
+              <div class="div-title">{{ it.title }}</div>
+              <div class="div-num">
+                <span style="color:dodgerblue;">{{ it.ucnt }} </span>/ <span style="font-size:14px;">{{it.count }}</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <div style="display: flex;">
+      <div style="flex-grow: 1;">
+      <el-card shadow="never" class="top-row2">
+        <template #header>
+        <div class="row2-top">
+          <div style="color:#333;font-weight: bold;font-size:15px;">设备运行状态</div>
+          <div class="div-more" v-if="false">更多</div>
+        </div>
+        </template>
+        <el-scrollbar max-height="504px">        
+        <el-row :gutter="20">
+          <el-col :span="isSmallScreen?8:6" v-for="it in devInfos" :key="it.id" class="dev-item" style="margin-bottom: 20px;">
+            <el-card shadow="hover">
+              <template #header>
+                <div class="dev-title">{{ it.name }}
+                  <svg-icon icon-class="enlarge" color="#666" />
+                </div>
+              </template>
+              <div class="dev-row2">
+                <div>
+                  网络类型:<span>{{ it.netType }}</span>
+                </div>
+              </div>
+              <div class="dev-row3">
+                <div class="device-state">
+                  
+                  <img style="position: relative;top: -10px;left:-10px;" :src="'images/state/'+it.state+'.png'"/>
+                  <div style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;" >{{getState(it.state) }}</div>
+                </div>
+                <div class="dev-chart">
+                  <div class="chart-item-title">
+                    <span>温度</span>
+                    <span>{{ it.temperature }}%</span>
+                  </div>
+                  <div class="chart-line">
+                    <div class="chart-line-inline" :style="'width:' + it.temperature + '%'"></div>
+                  </div>
+  
+                  <div class="chart-item-title">
+                    <span>内存</span>
+                    <span>{{ it.memory }}%</span>
+                  </div>
+                  <div class="chart-line">
+                    <div class="chart-line-inline" :style="'width:' + it.memory + '%'"></div>
+                  </div>
+  
+                  <div class="chart-item-title">
+                    <span>效率</span>
+                    <span>{{ it.cpu }}%</span>
+                  </div>
+                  <div class="chart-line">
+                    <div class="chart-line-inline" :style="'width:' + it.cpu + '%'"></div>
+                  </div>
+  
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-scrollbar>
+      </el-card>
+  
+      <el-card shadow="never" class="proc-card">
+        <template #header>
+          <div class="row2-top">
+            <div style="color:#333;font-weight: bold;font-size:15px;">超异构任务部署流程</div>        
+          </div>
+        </template>
+        <ModelFlow/>
+      </el-card>
+    </div>
+    <div style="" class="right-panel">
+      <el-card shadow="never" class="top-row2 notice-card">
+        <template #header>
+          <div class="row2-top">
+            <div style="color:#333;font-weight: bold;font-size:15px;">通知中心</div>        
+          </div>
+        </template>
+        <el-scrollbar height="484px">
+          <IndexNotice/>
+        </el-scrollbar>
+      </el-card>
+  
+      <el-card shadow="never" class="proc-card server-status">
+        <template #header>
+          <div class="row2-top">
+            <div style="color:#333;font-weight: bold;font-size:15px;">服务器运行状态</div>        
+          </div>
+        </template>   
+        <ServiceStatus :val="svTemp" width="200px" height="200px"></ServiceStatus>
+      </el-card>
+    </div>
+  </div>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { reactive } from 'vue'
+  import ModelFlow from './components/ModelFlow2.vue'
+  import IndexNotice from './components/IndexNotice.vue'
+  import ServiceStatus from './components/ServiceStatus.vue'
+  import DeviceAPI from "@/api/device";
+  let svTemp=ref(55.5)
+  let rd=()=>{ return +(""+Math.random()).substring(3,6)};
+  let rd2=()=>{ return +(""+Math.random()).substring(3,4)};
+  let rd3=()=>{ return +(""+Math.random()).substring(3,5)};
+  let topInfos = reactive([
+    { title: '模型总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav1.png" },
+    { title: '算子总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav2.png" },
+    { title: '数据集总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav3.png" },
+    { title: '评估报告总数', count:rd(),ucnt:rd2(),  clsName: 'c1', icon: "images/nav/nav4.png" },
+    { title: '互联总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav5.png" },
+    { title: '总访问量', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav1.png" },
+  ]);
+  
+  let devInfos = reactive([
+    { id: 1001, name: 'NPU-TC-01', netType: 'network001', modelName: '模型名称', state: 'offline', temperature: rd3(), memory: rd3(),  cpu: rd3(),  },
+    { id: 1002, name: 'GPU-B101', netType: 'network001', modelName: '模型名称', state: 'compile', temperature: rd3(), memory: rd3(),  cpu: rd3(),  },
+    { id: 1003, name: 'CPU-SW-02', netType: 'network001', modelName: '模型名称', state: 'free', temperature: rd3(), memory: rd3(),  cpu: rd3(),  },
+    { id: 1004, name: 'CPU-SW-01', netType: 'network001', modelName: '模型名称', state: 'inferencing', temperature: rd3(), memory: rd3(),  cpu: rd3(),  },
+    { id: 1005, name: 'FPGA-FD-01', netType: 'network001', modelName: '模型名称', state: 'noreg', temperature: rd3(), memory: rd3(),  cpu: rd3(),  },
+    { id: 1006, name: 'GPU-MR-01', netType: 'network001', modelName: '模型名称', state: 'publish', temperature: rd3(), memory: rd3(),  cpu: rd3(),  },
+    { id: 1007, name: 'FPGA-FD-02', netType: 'network001', modelName: '模型名称', state: 'training', temperature: rd3(), memory: rd3(),  cpu: rd3(),  },
+    { id: 1008, name: 'CPU-SW-03', netType: 'network001', modelName: '模型名称', state: 'updating',temperature: rd3(), memory: rd3(),  cpu: rd3(),  },
+  ])
+  const winWidth=ref(0)
+  const isSmallScreen=computed(()=>{
+    return winWidth.value<1440;
+  });
+  const getState=(e:any)=>{
+    if(e=="offline"){
+      return "离线";
+    }
+    if(e=="compile"){
+      return "编译中";
+    }
+    if(e=="free"){
+      return "空闲";
+    }
+    if(e=="inferencing"){
+      return "推理中";
+    }
+    if(e=="noreg"){
+      return "未注册";
+    }
+    if(e=="publish"){
+      return "部署中";
+    }
+    if(e=="training"){
+      return "训练中";
+    }
+    
+    return "升级中";  
+  }
+  onMounted(()=>{
+    winWidth.value=window.outerWidth;
+    window.onresize=()=>{
+      setTimeout(()=>{
+        winWidth.value=window.outerWidth;
+      },100);
+    }
+    DeviceAPI.getStatus().then(d=>{
+      debugger;
+    });
+  });
+  </script>
+  
+  <style lang="scss" scoped>
+  .dashboard-container {
+    position: relative;
+    min-width:960px;
+    padding: 0px 24px;
+    &.is-small{
+      padding: 0px 12px;
+    }
+  
+    .user-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+    }
+  
+    .github-corner {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 1;
+      border: 0;
+    }
+  
+    .data-box {
+      display: flex;
+      justify-content: space-between;
+      padding: 20px;
+      font-weight: bold;
+      color: var(--el-text-color-regular);
+      background: var(--el-bg-color-overlay);
+      border-color: var(--el-border-color);
+      box-shadow: var(--el-box-shadow-dark);
+    }
+  
+    .svg-icon {
+      fill: currentcolor !important;
+    }
+  }
+  </style>
+  <style lang="scss">
+  .dashboard-container {
+    &.is-small{
+      .dev-row3 {
+        padding:0px !important;
+        .device-state{
+          width:80px !important;
+        }
+      }
+      .right-panel{
+        min-width: 240px;
+        padding-left:8px;
+      }
+      .model-flow {
+        .card-item{
+          width:100px;
+        }
+        .row-1 {
+          .line{
+            width: calc(20% - 100px);
+            top:10px;
+          }
+        }
+        .row-3 {
+          .line{
+            width: calc(20% - 100px);
+          }
+          .card-center{
+            .card-center-item{
+              width:100px;
+              &:first-child{
+                &::after{
+                  left:50px;
+                }
+                &::before{
+                  left:50px;
+                }
+              }
+              &:last-child{
+                &::after{
+                  left:-20px;
+                }
+                &::before{
+                  left:51px;
+                }
+              }
+            }
+          }
+          .card-item{
+              &.line-top{
+                &::after{
+                  left:50px; 
+                }              
+                &::before{
+                  left:48px;
+                }
+              }
+            }
+        }
+      }
+    }
+    .right-panel{
+      min-width: 300px;
+      padding-left:12px;
+    }
+    .el-card__body {
+      padding: 10px 10px;
+    }
+  
+    .top-row1 {
+      position: relative;
+  
+      .top-icon {
+        top: 20px;
+        position: absolute;
+        background: #409eff2b;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+  
+        svg {
+          width: 20px;
+          height: 20px;
+  
+          * {
+            fill: #3399ff;
+            ;
+          }
+        }
+      }
+  
+      .top-row {
+        padding-left: 40px;
+        line-height: 30px;
+        text-align: center;
+  
+        .div-title {
+          font-weight: bold;
+          font-size: 14px;
+          color: #333;
+        }
+  
+        .div-num {
+          font-size: 20px;
+          font-weight: bolder;
+          color: #333;
+        }
+      }
+    }
+  
+    .top-row2 {
+      &.notice-card{
+        .el-card__header{
+          border-bottom: 1px solid #ebeef5;
+        }  
+        .el-card__body {
+          .el-scrollbar{
+            padding:10px;
+          }
+        }
+      }
+      .el-card__header{
+        padding: 8px;
+        border:none;
+      .row2-top {
+        position: relative;
+  
+        .div-more {
+          position: absolute;
+          right: 12px;
+          top: 0px;
+          font-size: 12px;
+        }
+  
+      }
+    }
+      .el-card__body{
+        padding:0px;
+        .el-scrollbar{
+          padding:0px 10px;
+          .el-scrollbar__bar.is-horizontal{
+            display: none;
+          }
+        }
+      }
+  
+      .dev-item {
+        .el-card {
+          background: #EEF7FE;
+          padding: 8px;
+  
+          .el-card__header {
+            padding: 4px;
+            border: none;
+  
+            .dev-title {
+              color: var(--el-color-primary);
+              position: relative;
+              font-size: 16px;
+              font-weight: bold;
+  
+              .svg-icon {
+                position: absolute;
+                right: 0px;
+                cursor: pointer;
+              }
+            }
+          }
+  
+          .el-card__body {
+            background: #fff;
+            box-shadow: var(--el-box-shadow-light);
+            border-radius: 8px;
+            padding:10px;
+            .dev-row3 {
+              display: flex;
+              padding:12px;
+              align-items: center;
+              .device-state {
+                width: 100px;
+                text-align: center;
+              }
+              .state-text{
+                font-size:16px;
+                &.state0{
+                  color:var(--el-color-primary);
+                }
+                &.state1{
+                  color:var(--el-color-warning);
+                }
+                &.state2{
+                  color:var(--el-color-danger);
+                }
+              }
+  
+              .dev-chart{
+                flex-grow: 1;
+                position: relative;
+                top: -10px;
+                .chart-item-title{
+                  margin: 12px 0px 0px;
+                  font-size:12px;
+                  position: relative;
+                  span{
+                    &:first-child{
+                      font-weight: bold;
+                    }
+                    &:last-child{
+                      position: absolute;
+                      right: 0px;
+                    }
+                  }
+                }
+                .chart-line{                
+                  background-color: #ccc;
+                  height:8px;
+                  border-radius:4px; 
+                  .chart-line-inline{
+                    background-color: var(--el-color-primary);
+                    height:8px;
+                    border-radius:4px; 
+                  }
+                }
+              }
+              
+            }
+          }
+        }
+      }
+    }
+    .proc-card{
+      margin-top:20px;   
+      padding: 8px;
+      .el-card__header{
+        padding: 8px;
+        border:none;
+      }
+      .el-card__body{
+        background: #EEF7FE;
+        border-radius: 8px;
+        height:300px;
+      }
+      &.server-status{
+        background: #EEF7FE;
+        padding: 8px;
+        .el-card__header{
+        }
+        .el-card__body {
+            background: #fff;
+            box-shadow: var(--el-box-shadow-light);
+        }
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/home2.vue b/src/views/home2.vue
new file mode 100644
index 0000000..3bd2b61
--- /dev/null
+++ b/src/views/home2.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang='ts' setup>
+</script>
+<style scoped lang='less'>
+</style>
\ No newline at end of file