按客户要求去掉了一些多余部分，丰富了一些节点

public/imgs/nginx.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M77.483 512.683V275.797c-0.342-8.533 4.096-16.384 11.946-20.138L498.347 19.456c7.509-4.437 15.701-5.461 22.869-1.024L931.84 255.659c7.168 4.096 11.264 11.946 10.923 20.138v473.088c0.341 8.192-3.755 16.043-10.923 20.139l-408.917 235.861c-7.51 4.438-17.067 4.438-24.918 0L88.747 769.024c-7.51-4.437-10.923-10.24-10.923-19.456l-0.341-236.885z" fill="#009438" /><path d="M366.933 424.619v276.138c0 31.062-24.917 58.71-58.026 58.027-20.139-1.024-35.84-9.216-46.422-26.624-5.461-8.192-7.509-17.408-7.509-27.648V320.853c0-25.6 15.701-44.032 35.84-52.224s40.277-6.485 60.757 0c19.456 5.462 34.134 17.408 46.422 32.086l244.053 292.864c1.024 1.024 1.707 3.072 3.755 4.437v-279.21c0-29.355 20.138-52.225 48.81-54.955 35.84-4.438 59.734 21.162 63.488 47.786v390.827c0 21.845-10.24 37.547-28.33 47.787-13.654 7.509-28.331 9.216-44.032 8.192-22.528-1.366-44.032-10.582-60.758-25.6-9.216-8.192-15.701-18.432-23.893-27.648l-232.79-278.187c0-1.024-1.023-1.707-1.706-3.072l0.341 0.683z" fill="#FEFEFE" /></svg>

public/imgs/switch.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="151.03px" viewBox="0 0 1356 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M0 389.700161h1353.843886v242.365139H0z" fill="#4467AE" /><path d="M711.710196 249.301199c-19.198737-11.087447-48.289414-12.293043-64.920585-2.693674L11.223644 613.552592c-16.626126 9.599369-14.537772 26.397002 4.660965 37.48445l626.244037 361.557718c19.203781 11.087447 48.294458 12.293043 64.920585 2.693674l635.565967-366.945067c16.631171-9.599369 14.542816-26.397002-4.660965-37.484449L711.710196 249.301199z" fill="#4467AE" /><path d="M711.710196 9.170701c-19.198737-11.082403-48.289414-12.293043-64.920585-2.68863L11.223644 373.427138c-16.626126 9.599369-14.537772 26.391958 4.660965 37.479405l626.244037 361.562763c19.203781 11.087447 48.294458 12.293043 64.920585 2.693674l635.565967-366.945067c16.631171-9.604413 14.542816-26.397002-4.660965-37.48445L711.710196 9.170701z" fill="#6D8ACA" /><path d="M296.203321 413.751548l-60.274753 34.800863 12.424196-99.908088 173.04085-7.173044-60.274753 34.800864 187.139765 108.0446-64.915541 37.479405L296.203321 413.751548zM533.21642 276.913886l-60.274752 34.800864 12.424196-99.908089 173.040849-7.173043-60.274752 34.800863 187.139765 108.0446-64.915541 37.474361-187.139765-108.039556z" fill="#FFFFFF" /><path d="M1057.640566 367.888459l60.274752-34.800864-12.424195 99.908089-173.045895 7.173043 60.279797-34.800863-187.139764-108.0446 64.91554-37.479405 187.139765 108.0446zM820.622422 504.731164l60.279797-34.800863-12.424196 99.908089-173.045894 7.173043 60.279797-34.805908-187.139765-108.039556 64.91554-37.479405 187.134721 108.0446z" fill="#FFFFFF" /></svg>

src/assets/scss/base.scss

@@ -1,7 +1,7 @@
-@font-face {
-  font-family: titleFont;
-  src        : url("/m-font.ttf");
-}
+// @font-face {
+//   font-family: titleFont;
+//   src        : url("/m-font.ttf");
+// }
 
 body,
 html {

src/components/topbar/v2.vue

@@ -1,17 +1,20 @@
 <template>
   <div class="top-bar flex-row">
-    <div class="flex1 flex"></div>
-    <div style="flex: 6" class="flex-row">
-      <ul class="navs flex-end">
-      </ul>
+    <div style="flex: 1" class="flex-row">
+      <div class="navs flex-end">
+        <div class="search">
+          <el-input size="small" v-model="searchText" style="width: 200px;margin-right: 12px;"></el-input>
+          <el-button size="small" type="primary">搜索</el-button>
+        </div>
+      </div>
       <div class="title font">全链路监控平台</div>
-      <ul class="navs flex right">
-      </ul>
-    </div>
-    <div class="right flex1 flex-end nowrap">
-      <div class="full" @click="full">
-        <img v-if="!isFull" src="@/assets/imgs/full_screen.svg" alt="full_screen" class="icon" />
-        <img v-else src="@/assets/imgs/exit_screen.svg" alt="full_screen" class="icon" />
+      <div class="navs flex right">
+        <div class="right flex1 flex-end nowrap">
+          <div class="full" @click="full">
+            <img v-if="!isFull" src="@/assets/imgs/full_screen.svg" alt="full_screen" class="icon" />
+            <img v-else src="@/assets/imgs/exit_screen.svg" alt="full_screen" class="icon" />
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -19,56 +22,13 @@
 
 <script setup>
 import { ref, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 import { full } from '@/utils/index'
-// import Api from '@/api'
-const title = localStorage.parkName || import.meta.env.VITE_APP_TITLE
-
-const parkInfo = JSON.parse(localStorage.info || '{"displayModuleIds": ""}')
-const navItems = parkInfo.displayModuleIds.split(',')
-
-const navLeftAll = [
-  {
-    name: '园区总览',
-    path: '/v2'
-  },
-  {
-    name: '能耗监测',
-    path: '/v2/energy'
-  },
-  {
-    name: '碳排放监测',
-    path: '/v2/carbon'
-  },
-  {
-    name: '节能管理',
-    path: '/v2/saving'
-  }
-]
-const navRightAll = [
-  {
-    name: '能源降费',
-    path: '/v2/cost'
-  },
-  {
-    name: '用能安全',
-    path: '/v2/safe'
-  },
-  {
-    name: '响应调控',
-    path: '/v2/control'
-  }
-]
-
-const navLeft = navLeftAll.filter((item) => navItems.includes(item.name))
-const navRight = navRightAll.filter((item) => navItems.includes(item.name))
 
+const searchText = ref('')
 const store = useStore()
 // 是否为全屏
 const isFull = ref(false)
-const active = ref(useRoute().path)
-const router = useRouter()
 
 watch(
   () => store.state.resize,
@@ -77,24 +37,6 @@ watch(
   }
 )
 
-// 监听window是否全屏，并进行相应的操作,支持esc键退出
-// window.onresize = () => {
-//   isFull.value = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement)
-// }
-
-const toNav = (path) => {
-  active.value = path
-  router.push(path)
-}
-// const login = () => {
-//   Api.login({
-//     username: 'user',
-//     password: '15f4dCc3b5aa765d61d8327deb882cf991'
-//   }).then((res) => {
-//     sessionStorage.setItem('token', res.token)
-//     window.location.reload()
-//   })
-// }
 </script>
 
 <style scoped lang="scss">
@@ -108,6 +50,7 @@ const toNav = (path) => {
   background-size: auto 100%;
   background-position: center center;
   background-repeat: no-repeat;
+
   .title {
     font-size: 4vh;
     color: #fff;
@@ -115,61 +58,34 @@ const toNav = (path) => {
     margin-bottom: 2.4vh;
     width: 45vw;
   }
+
   .login {
     cursor: pointer;
   }
+
   .navs {
     display: flex;
     align-items: center;
     flex: 1;
     overflow: hidden;
-    transform: rotateZ(4deg);
-    &.right {
-      transform: rotateZ(-4deg);
-    }
-    .nav-item {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 7.3vw;
-      height: 2.3vw;
-      color: #fff;
-      white-space: nowrap;
-      cursor: pointer;
-      text-align: center;
-      font-size: 0.8vw;
-      background-image: url(@/assets/imgs/v2/nav-item-left.png);
-      background-repeat: no-repeat;
-      background-size: contain;
-      background-position: center center;
-      // background-color: #000;
-
-      &:hover {
-        background-image: url(@/assets/imgs/v2/nav-item-left-on.png);
-      }
-      &.active {
-        background-image: url(@/assets/imgs/v2/nav-item-left-on.png);
-      }
-      &.right {
-        background-image: url(@/assets/imgs/v2/nav-item-right.png);
-        &:hover {
-          background-image: url(@/assets/imgs/v2/nav-item-right-on.png);
-        }
-        &.active {
-          background-image: url(@/assets/imgs/v2/nav-item-right-on.png);
-        }
-      }
-    }
+    // transform: rotateZ(4deg);
+    // &.right {
+    //   transform: rotateZ(-4deg);
+    // }
   }
+
   .right {
     align-self: flex-start;
+
     .time {
       font-size: 18px;
       margin-right: 15px;
     }
+
     .full {
       cursor: pointer;
       margin-top: 2vh;
+
       .icon {
         width: 20px;
         height: 20px;
@@ -177,5 +93,4 @@ const toNav = (path) => {
       }
     }
   }
-}
-</style>
+}</style>

src/views/home/AllLink.vue

@@ -6,13 +6,16 @@
 </template>
 <script setup>
 import G6 from '@antv/g6';
-import { getG6Options, getMockData, getMockData2 } from './g6';
+import { getG6Options, getG6TreeOptions, getMockData, getMockData2, getMockData3 } from './g6';
 import { onMounted, ref } from 'vue';
 
 let graph = null
 
 const level = ref(1)
 onMounted(() => {
+  // graph = new G6.TreeGraph(getG6TreeOptions({
+  //   container: 'g6ChartWrapper'
+  // }));
   graph = new G6.Graph(getG6Options({
     container: 'g6ChartWrapper'
   }));
@@ -25,14 +28,22 @@ function nodeClick(event) {
     draw2()
   }, 100);
 }
+function nodeClick2(e) {
+  if (e.target.get('name') === 'collapse-icon') {
+    e.item.getModel().collapsed = !e.item.getModel().collapsed;
+    graph.setItemState(e.item, 'collapsed', e.item.getModel().collapsed);
+    graph.layout();
+  }
+}
 
 function draw() {
   level.value = 1
-  graph.data(getMockData());
+  graph.data(getMockData3());
   graph.render();
 
   // 节点上的点击事件
-  graph.on('node:click', nodeClick);
+  // graph.on('node:click', nodeClick);
+  graph.on('node:click', nodeClick2);
 }
 
 

src/views/home/g6.js

@@ -32,7 +32,8 @@ export function getG6Options({ container = 'container' }) {
     modes: {
       default: ['drag-canvas', 'drag-node', 'activate-relations']
     },
-    plugins: [tooltip, toolbar],
+    // plugins: [tooltip, toolbar],
+    plugins: [tooltip],
     // fitView: true,
     fitCenter: true,
     layout: {
@@ -45,8 +46,19 @@ export function getG6Options({ container = 'container' }) {
       strictRadial: true, // 是否必须是严格的 radial 布局，及每一层的节点严格布局在一个环上。preventOverlap 为 true 时生效。
       workerEnabled: true // 可选，开启 web-worker
     },
+    layout: {
+      type: 'dagre',
+      // rankdir: 'TB',
+      // rankdir: 'LR',
+      // align: 'UL',
+      // controlPoints: true,
+      ranksep: 60,
+      nodesepFunc: () => 1,
+      ranksepFunc: () => 1
+    },
     defaultNode: {
       size: 30,
+      type: 'image',
       style: {
         // fill: '#fa8c16',
         // stroke: '#000',
@@ -93,6 +105,36 @@ export function getG6Options({ container = 'container' }) {
   }
 }
 
+export function getG6TreeOptions({ container = 'container' }) {
+  return {
+    container,
+    modes: {
+      default: ['drag-canvas']
+    },
+    defaultNode: {
+      type: 'image',
+      size: 30
+    },
+    defaultEdge: {
+      type: 'cubic-horizontal',
+      style: {
+        endArrow: true
+      }
+    },
+    fitCenter: true,
+    fitView: true,
+    layout: {
+      type: 'indented',
+      direction: 'LR',
+      dropCap: false,
+      indent: 100,
+      getHeight: () => {
+        return 30
+      }
+    }
+  }
+}
+
 // 更新数据
 // graph.on('circle-shape:click', (evt) => {
 //   const { item } = evt;
@@ -210,7 +252,7 @@ export function getMockData() {
     if (i !== 4) {
       return {
         id: String(i),
-        label: img.split(','),
+        label: img.split('.')[0],
         type: 'image',
         size: 40,
         img: '/imgs/' + img
@@ -218,7 +260,7 @@ export function getMockData() {
     } else {
       return {
         id: String(i),
-        label: img.split(','),
+        label: img.split('.')[0],
         type: 'background-animate',
         size: 30,
         color: '#f00',
@@ -276,10 +318,7 @@ export function getMockData() {
 }
 
 export function getMockData2() {
-  const img = new Image()
-  img.src = 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg'
-
-  const imgs = ['C.svg', 'Elastic.svg', 'Hadoop.svg', 'Flink.svg', 'Hive.svg', 'jaeger.svg', 'error.gif']
+  const imgs = ['app.svg', 'host.svg', 'jifang.svg', 'jigui.svg', 'nginx.svg', 'SQL.svg']
 
   const nodes = imgs.map((img, i) => {
     return {
@@ -330,3 +369,219 @@ export function getMockData2() {
     ]
   }
 }
+
+const types = ['machine room', 'UPS', 'cabinet', 'switch', 'server', 'VM', 'app', 'db']
+const nodeTree = [
+  {
+    id: '1',
+    label: 'MR001\n广州',
+    type: 'image',
+    img: '/imgs/machine room.svg',
+    size: 40,
+    children: [
+      {
+        id: '2',
+        label: 'BSDC UPS\nBSDC-UPS01',
+        type: 'image',
+        img: '/imgs/UPS.svg',
+        size: 40,
+        children: [
+          {
+            id: '4',
+            label: 'IT Cabinet\nC01',
+            type: 'image',
+            size: 40,
+            img: '/imgs/cabinet.svg'
+          },
+          {
+            id: '5',
+            label: 'IT Cabinet\nC02',
+            type: 'image',
+            size: 40,
+            img: '/imgs/cabinet.svg'
+          }
+        ]
+      },
+      {
+        label: 'BSDC UPS\nBSDC-UPS02',
+        type: 'image',
+        id: '3',
+        size: 40,
+        img: '/imgs/UPS.svg',
+        children: [
+          {
+            id: '6',
+            label: 'IT Cabinet\nC03',
+            size: 40,
+            type: 'image',
+            img: '/imgs/cabinet.svg'
+          },
+          {
+            id: '7',
+            label: 'IT Cabinet\nC04',
+            size: 40,
+            type: 'image',
+            img: '/imgs/cabinet.svg'
+          }
+        ]
+      }
+    ]
+  }
+]
+const nodeTree2 = [
+  {
+    id: '1',
+    label: 'MR001\n广州',
+    img: '/imgs/machine room.svg',
+    children: [
+      {
+        id: '2',
+        label: 'BSDC UPS\nBSDC-UPS01',
+        img: '/imgs/UPS.svg',
+        children: [
+          {
+            id: '4',
+            label: 'IT Cabinet\nC01',
+            img: '/imgs/cabinet.svg'
+          },
+          {
+            id: '5',
+            label: 'IT Cabinet\nC02',
+            img: '/imgs/cabinet.svg',
+            children: [
+              {
+                id: '8',
+                label: 'Switch\nSW01',
+                img: '/imgs/switch.svg'
+              },
+              {
+                id: '10',
+                label: 'Switch\nSW03',
+                img: '/imgs/switch.svg'
+              },
+              {
+                id: '11',
+                label: 'Switch\nSW04',
+                img: '/imgs/switch.svg'
+              },
+              {
+                id: '9',
+                label: 'Switch\nSW02',
+                img: '/imgs/switch.svg',
+                children: [
+                  {
+                    id: '14',
+                    label: 'Server\nSRV01',
+                    img: '/imgs/server.svg'
+                  },
+                  {
+                    id: '15',
+                    label: 'Server\nSRV02',
+                    img: '/imgs/server.svg'
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        id: '3',
+        label: 'BSDC UPS\nBSDC-UPS02',
+        img: '/imgs/UPS.svg',
+        children: [
+          {
+            id: '6',
+            label: 'IT Cabinet\nC03',
+            img: '/imgs/cabinet.svg'
+          },
+          {
+            id: '7',
+            label: 'IT Cabinet\nC04',
+            img: '/imgs/cabinet.svg'
+          },
+          {
+            id: '16',
+            label: 'Server\nSRV03',
+            img: '/imgs/server.svg'
+          },
+          {
+            id: '17',
+            label: 'Server\nSRV04',
+            img: '/imgs/server.svg',
+            children: [
+              {
+                id: '18',
+                label: 'VM\nVM01',
+                img: '/imgs/vm.svg'
+              },
+              {
+                id: '19',
+                label: 'VM\nVM02',
+                img: '/imgs/vm.svg',
+                children: [
+                  {
+                    id: '22',
+                    label: 'DB\nDB01',
+                    img: '/imgs/db.svg'
+                  },
+                  {
+                    id: '23',
+                    label: 'DB\nDB02',
+                    img: '/imgs/db.svg',
+                    children: [
+                      {
+                        id: '20',
+                        label: 'App\nApp01',
+                        img: '/imgs/app.svg'
+                      },
+                      {
+                        id: '21',
+                        label: 'App\nApp02',
+                        img: '/imgs/app.svg'
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]
+
+export function getMockData3() {
+  // return nodeTree2
+  const nodes = flattenObjectTree(nodeTree2)
+  // const edges = flattenObjectTree(nodeTree2)
+  console.log(nodes)
+  return {
+    nodes,
+    edges: nodes.filter((i) => i.source).map((i) => ({ source: i.source, target: i.target }))
+  }
+}
+
+// 将tree展平
+function flattenObjectTree(tree, parent = null) {
+  let result = []
+
+  for (let i = 0; i < tree.length; i++) {
+    let node = { ...tree[i], target: tree[i].id, source: parent?.id }
+
+    if (node.children && node.children.length > 0) {
+      let children = node.children
+      delete node.children
+
+      result.push(node)
+
+      let flattenedChildren = flattenObjectTree(children, node)
+      result = result.concat(flattenedChildren)
+    } else {
+      result.push(node)
+    }
+  }
+
+  return result
+}

src/views/home/index copy.vue

@@ -0,0 +1,391 @@
+<template>
+  <div class="dashboard-wrapper">
+    <div class="v2-page flex-row-start gap dashboard">
+      <div class="part left flex-column-stretch pb-2">
+        <!-- <div class=" flex1 my-2 flex-row gap-2">
+          <num-bar-card title="数据中心" unit="个">1</num-bar-card>
+          <num-bar-card title="机柜" unit="个">2223</num-bar-card>
+        </div> -->
+        <div class="my-2 flex-row gap-2" style="height: 10vh;">
+          <numCardText title="数据中心数量" unit="个" :value="12"></numCardText>
+          <numCardText title="机柜数量" unit="个" :value="12423"></numCardText>
+        </div>
+        <subtitle class="">数量统计</subtitle>
+        <div class=" flex-row">
+          <num-bar-line title="机柜" unit="个">12</num-bar-line>
+          <num-bar-line title="服务器" unit="个">423</num-bar-line>
+        </div>
+        <div class="  flex-row">
+          <num-bar-line title="操作系统" unit="个">23</num-bar-line>
+          <num-bar-line title="中间件" unit="个">546</num-bar-line>
+        </div>
+        <div class="  flex-row">
+          <num-bar-line title="数据" unit="个">442</num-bar-line>
+          <num-bar-line title="项目" unit="个">68345</num-bar-line>
+        </div>
+        <subtitle class="mt-1">首页点名称</subtitle>
+        <div class="flex-row mb-2">
+          <el-input placeholder="请输入首页点名称"></el-input>
+          <el-button type="primary" class="ml-1">搜索</el-button>
+        </div>
+        <subtitle class="mt-1">末节点名称</subtitle>
+        <div class="flex-row mb-2">
+          <el-input placeholder="请输入末节点名称"></el-input>
+          <el-button type="primary" class="ml-1">搜索</el-button>
+        </div>
+      </div>
+      <div class="center">
+        <AllLink></AllLink>
+      </div>
+      <div class="part right flex-column-stretch pb-2">
+        <subtitle class="mt-2">Zabbix server linux</subtitle>
+        <div class="flex-row mt-2">
+          <numCardLed title="运行时间" unit="天" :value="12"></numCardLed>
+          <numCardLed title="CPU核数" unit="" :value="2"></numCardLed>
+          <numCardLed title="总内存" unit="GB" :value="12.34"></numCardLed>
+        </div>
+        <div class="card-bg my-2" style="padding: 0 1vw;">
+          <distribution class="my-1" :list="distributionList"></distribution>
+        </div>
+        <subtitle class="mt-2">CPU</subtitle>
+        <echart-v2 type="Line" class=" mb-2" ref="efficiencyMetricsRef1"></echart-v2>
+        <subtitle class="mt-2">每次I/O读写耗时</subtitle>
+        <echart-v2 type="Line" class=" mb-2" ref="efficiencyMetricsRef2"></echart-v2>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import numBarLine from '@/components/num-bar/line.vue'
+import numCardLed from '@/components/v2/num-card-led.vue'
+import numCardText from '@/components/v2/num-card-text.vue'
+import AllLink from './AllLink.vue';
+import distribution from '@/components/v2/distribution.vue'
+import { onMounted, ref } from 'vue'
+import { getStereoscopicLineOption } from '@/components/echart-v2/optionsWithCustomLine.js'
+
+const efficiencyMetricsRef1 = ref()
+const efficiencyMetricsRef2 = ref()
+
+const data = {
+  "xAxis": [
+    "2023-01",
+    "2023-02",
+    "2023-03",
+    "2023-04",
+    "2023-05",
+    "2023-06",
+    "2023-07",
+    "2023-08",
+    "2023-09",
+    "2023-10"
+  ],
+  "碳排值": [
+    "1706.25",
+    "2105.51",
+    "3121.90",
+    "2930.23",
+    "2967.78",
+    "2831.36",
+    "3072.57",
+    "2974.36",
+    "2865.35",
+    "1748.01"
+  ],
+  "碳排占比": [
+    "54.65",
+    "67.44",
+    "100.00",
+    "93.86",
+    "95.06",
+    "90.69",
+    "98.42",
+    "95.27",
+    "91.78",
+    "55.99"
+  ],
+  "碳排标准": [
+    "3121.90",
+    "3121.90",
+    "3121.90",
+    "3121.90",
+    "3121.90",
+    "3121.90",
+    "3121.90",
+    "3121.90",
+    "3121.90",
+    "3121.90"
+  ]
+}
+
+onMounted(() => {
+  efficiencyMetricsRef1.value.draw(
+    getStereoscopicLineOption({
+      legendData: ['cpu利用率', '系统使用率', '用户使用率'],
+      barData1: data['碳排标准'],
+      barData2: data['碳排值'],
+      lineData: data['碳排占比'],
+      xAxisData: data.xAxis
+    })
+  )
+  efficiencyMetricsRef2.value.draw(
+    getStereoscopicLineOption({
+      legendData: ['读取耗时', '写入耗时'],
+      barData1: data['碳排标准'],
+      barData2: data['碳排值'],
+      lineData: [],
+      xAxisData: data.xAxis
+    })
+  )
+})
+
+const distributionList = [{
+  label: 'CPU使用率',
+  value: 30
+}, {
+  label: '内存使用率',
+  value: 12
+}, {
+  label: '分区使用率',
+  value: 12
+}, {
+  label: '磁盘使用率',
+  value: 12
+}]
+
+
+
+</script>
+<style lang="scss" scoped>
+.heathy-title {
+  font-size: 1.4vh;
+  text-align: center;
+  line-height: 1.2;
+}
+
+.select-wrapper {
+  position: absolute;
+  z-index: 1;
+  margin: 13vh 0 0 3vw;
+}
+
+select {
+  margin-right: 0.5vw;
+  height: 1.4vw;
+  line-height: 1.4vw;
+  background: #1f509c;
+  border: none;
+  font-size: 0.7vw;
+  color: #fff;
+  padding: 0 0.5vw;
+  border-radius: 3px;
+  font-weight: bold;
+}
+
+sub {
+  font-size: 1vh;
+  font-weight: bold;
+  margin-left: 0.5em;
+}
+
+.dashboard-wrapper {
+  position: relative;
+
+  .map {
+    position: absolute;
+    z-index: 0;
+    width: 54vw;
+    left: 22.2vw;
+    height: 90vh;
+    // background: rgba(0, 0, 0, 0.5);
+    border-radius: 10vw;
+  }
+}
+
+.v2-page {
+  position: relative;
+  // background-color: #000;
+  // background-image: url('@/assets/imgs/v2/box-home.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 93vh;
+  margin: 0 1vw;
+  margin-top: -2vh;
+  padding: 0;
+
+  .center-title {
+    background-image: url('@/assets/imgs/v2/title-bg.png');
+    text-align: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 5vh;
+    font-size: 2.4vh;
+    line-height: 5vh;
+  }
+
+  .part {
+    width: 22vw;
+    height: 100%;
+
+    .part-title {
+      font-size: 1.3vw;
+      font-family: JZhongYi !important;
+      text-align: center;
+      line-height: 3vh;
+      margin-top: 2.7vh;
+    }
+  }
+
+  .right {
+    position: relative;
+    padding-left: 1vw;
+    z-index: 20;
+  }
+
+  .center {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    width: 100%;
+    flex: 1;
+    position: relative;
+
+    .top {
+      margin: 3vh 6.5vw 0;
+      height: 8vh;
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      z-index: 1;
+
+      .num-card {
+        flex: 1;
+      }
+    }
+
+    .map {
+      position: absolute;
+      background: #ccc;
+      width: 100%;
+      height: 90%;
+    }
+
+    .bottom {
+      position: relative;
+      height: 37vh;
+      margin: 0 4vw;
+      padding-bottom: 3vh;
+      transform: translateY(0);
+      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
+      transition: transform 0.5s;
+
+      &.expandWapper {
+        transform: translateY(calc(37vh - 2vw));
+      }
+
+      .expand {
+        display: flex;
+        justify-content: flex-end;
+        cursor: pointer;
+        margin-bottom: 0.5vw;
+
+        img {
+          width: 1.5vw;
+          height: 1.5vw;
+        }
+      }
+    }
+
+    .map-wrapper {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+    }
+  }
+}
+
+.table-header-wrapper {
+  overflow: hidden;
+  height: 17vh;
+
+  .table-scroll {
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+
+    .tbody {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      // height: calc(100% - 3vh);
+      padding: 0;
+      height: 17vh;
+    }
+
+    .tr {
+      display: flex;
+      height: 3.7vh;
+      justify-content: space-between;
+      align-items: center;
+      // margin-top: 0.9vh;
+      font-size: 1.3vh;
+
+      &:nth-child(2n) {
+        background: rgba(8, 32, 68, 0.4);
+      }
+
+      &:nth-child(2n + 1) {
+        background: rgba(8, 32, 68, 0);
+      }
+
+      .rank {
+        width: 5vh;
+        height: 2.2vh;
+        line-height: 2.2vh;
+        background: rgba(191, 191, 191, 0.2);
+        text-align: center;
+      }
+
+      .name {
+        flex: 1;
+        text-align: center;
+        padding: 0 1vh;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .count {
+        text-align: center;
+        padding-right: 1vh;
+      }
+    }
+
+    .table-header {
+      margin-top: 1vh;
+
+      .rank {
+        background: none;
+        border-left: 0.15vw solid #00aeff;
+        position: relative;
+
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          width: 0px;
+          height: 0px;
+          border: 0.5vh solid transparent;
+          border-left: 0.5vh solid #00aeff;
+          top: 0.6vh;
+          left: 0.1vh;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/home/index.vue

@@ -1,197 +1,32 @@
 <template>
   <div class="dashboard-wrapper">
     <div class="v2-page flex-row-start gap dashboard">
-      <div class="part left flex-column-stretch pb-2">
-        <!-- <div class=" flex1 my-2 flex-row gap-2">
-          <num-bar-card title="数据中心" unit="个">1</num-bar-card>
-          <num-bar-card title="机柜" unit="个">2223</num-bar-card>
-        </div> -->
-        <div class="my-2 flex-row gap-2" style="height: 10vh;">
-          <numCardText title="数据中心数量" unit="个" :value="12"></numCardText>
-          <numCardText title="机柜数量" unit="个" :value="12423"></numCardText>
-        </div>
-        <subtitle class="">数量统计</subtitle>
-        <div class=" flex-row">
-          <num-bar-line title="机柜" unit="个">12</num-bar-line>
-          <num-bar-line title="服务器" unit="个">423</num-bar-line>
-        </div>
-        <div class="  flex-row">
-          <num-bar-line title="操作系统" unit="个">23</num-bar-line>
-          <num-bar-line title="中间件" unit="个">546</num-bar-line>
-        </div>
-        <div class="  flex-row">
-          <num-bar-line title="数据" unit="个">442</num-bar-line>
-          <num-bar-line title="项目" unit="个">68345</num-bar-line>
-        </div>
-        <subtitle class="mt-1">首页点名称</subtitle>
-        <div class="flex-row mb-2">
-          <el-input placeholder="请输入首页点名称"></el-input>
-          <el-button type="primary" class="ml-1">搜索</el-button>
-        </div>
-        <subtitle class="mt-1">末节点名称</subtitle>
-        <div class="flex-row mb-2">
-          <el-input placeholder="请输入末节点名称"></el-input>
-          <el-button type="primary" class="ml-1">搜索</el-button>
-        </div>
-      </div>
       <div class="center">
         <AllLink></AllLink>
       </div>
-      <div class="part right flex-column-stretch pb-2">
-        <subtitle class="mt-2">Zabbix server linux</subtitle>
-        <div class="flex-row mt-2">
-          <numCardLed title="运行时间" unit="天" :value="12"></numCardLed>
-          <numCardLed title="CPU核数" unit="" :value="2"></numCardLed>
-          <numCardLed title="总内存" unit="GB" :value="12.34"></numCardLed>
-        </div>
-        <div class="card-bg my-2" style="padding: 0 1vw;">
-          <distribution class="my-1" :list="distributionList"></distribution>
-        </div>
-        <subtitle class="mt-2">CPU</subtitle>
-        <echart-v2 type="Line" class=" mb-2" ref="efficiencyMetricsRef1"></echart-v2>
-        <subtitle class="mt-2">每次I/O读写耗时</subtitle>
-        <echart-v2 type="Line" class=" mb-2" ref="efficiencyMetricsRef2"></echart-v2>
-      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import numBarLine from '@/components/num-bar/line.vue'
-import numCardLed from '@/components/v2/num-card-led.vue'
-import numCardText from '@/components/v2/num-card-text.vue'
 import AllLink from './AllLink.vue';
-import distribution from '@/components/v2/distribution.vue'
 import { onMounted, ref } from 'vue'
-import { getStereoscopicLineOption } from '@/components/echart-v2/optionsWithCustomLine.js'
 
-const efficiencyMetricsRef1 = ref()
-const efficiencyMetricsRef2 = ref()
-
-const data = {
-  "xAxis": [
-    "2023-01",
-    "2023-02",
-    "2023-03",
-    "2023-04",
-    "2023-05",
-    "2023-06",
-    "2023-07",
-    "2023-08",
-    "2023-09",
-    "2023-10"
-  ],
-  "碳排值": [
-    "1706.25",
-    "2105.51",
-    "3121.90",
-    "2930.23",
-    "2967.78",
-    "2831.36",
-    "3072.57",
-    "2974.36",
-    "2865.35",
-    "1748.01"
-  ],
-  "碳排占比": [
-    "54.65",
-    "67.44",
-    "100.00",
-    "93.86",
-    "95.06",
-    "90.69",
-    "98.42",
-    "95.27",
-    "91.78",
-    "55.99"
-  ],
-  "碳排标准": [
-    "3121.90",
-    "3121.90",
-    "3121.90",
-    "3121.90",
-    "3121.90",
-    "3121.90",
-    "3121.90",
-    "3121.90",
-    "3121.90",
-    "3121.90"
-  ]
-}
 
 onMounted(() => {
-  efficiencyMetricsRef1.value.draw(
-    getStereoscopicLineOption({
-      legendData: ['cpu利用率', '系统使用率', '用户使用率'],
-      barData1: data['碳排标准'],
-      barData2: data['碳排值'],
-      lineData: data['碳排占比'],
-      xAxisData: data.xAxis
-    })
-  )
-  efficiencyMetricsRef2.value.draw(
-    getStereoscopicLineOption({
-      legendData: ['读取耗时', '写入耗时'],
-      barData1: data['碳排标准'],
-      barData2: data['碳排值'],
-      lineData: [],
-      xAxisData: data.xAxis
-    })
-  )
 })
 
-const distributionList = [{
-  label: 'CPU使用率',
-  value: 30
-}, {
-  label: '内存使用率',
-  value: 12
-}, {
-  label: '分区使用率',
-  value: 12
-}, {
-  label: '磁盘使用率',
-  value: 12
-}]
-
-
-
 </script>
 <style lang="scss" scoped>
-.heathy-title {
-  font-size: 1.4vh;
-  text-align: center;
-  line-height: 1.2;
-}
-
-.select-wrapper {
-  position: absolute;
-  z-index: 1;
-  margin: 13vh 0 0 3vw;
-}
-
-select {
-  margin-right: 0.5vw;
-  height: 1.4vw;
-  line-height: 1.4vw;
-  background: #1f509c;
-  border: none;
-  font-size: 0.7vw;
-  color: #fff;
-  padding: 0 0.5vw;
-  border-radius: 3px;
-  font-weight: bold;
-}
-
-sub {
-  font-size: 1vh;
-  font-weight: bold;
-  margin-left: 0.5em;
-}
-
 .dashboard-wrapper {
   position: relative;
 
+  .search {
+    display: flex;
+    position: absolute;
+    z-index: 10000;
+  }
+
   .map {
     position: absolute;
     z-index: 0;
@@ -266,39 +101,6 @@ sub {
       }
     }
 
-    .map {
-      position: absolute;
-      background: #ccc;
-      width: 100%;
-      height: 90%;
-    }
-
-    .bottom {
-      position: relative;
-      height: 37vh;
-      margin: 0 4vw;
-      padding-bottom: 3vh;
-      transform: translateY(0);
-      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
-      transition: transform 0.5s;
-
-      &.expandWapper {
-        transform: translateY(calc(37vh - 2vw));
-      }
-
-      .expand {
-        display: flex;
-        justify-content: flex-end;
-        cursor: pointer;
-        margin-bottom: 0.5vw;
-
-        img {
-          width: 1.5vw;
-          height: 1.5vw;
-        }
-      }
-    }
-
     .map-wrapper {
       position: absolute;
       width: 100%;