feat: 优化首页的页面设计

feat: 完成系统监控的页面设计
2024-07-24 09:33:34 +08:00 · 2024-07-22 13:35:50 +08:00 · 2024-07-22 13:26:17 +08:00
13 changed files with 395 additions and 9 deletions
--- a/src/assets/icons/aliyun.svg
+++ b/src/assets/icons/aliyun.svg
@@ -0,0 +1,6 @@
+<svg t="1720009953391" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6891"
+     width="200" height="200">
+    <path d="M512 0A512 512 0 1 1 0 512 512 512 0 0 1 512 0z" fill="#FF6A00" p-id="6892"></path>
+    <path d="M738.737231 713.432615h-177.230769l16.167384-64.984615 151.630769-32.846769a31.744 31.744 0 0 0 24.359385-29.538462v-163.170461a30.700308 30.700308 0 0 0-24.359385-29.636923l-151.630769-32.84677-16.167384-64.984615h177.230769a112.856615 112.856615 0 0 1 112.699077 111.497846v194.461539a112.403692 112.403692 0 0 1-112.443077 112.088615z m-449.220923-1.536a112.994462 112.994462 0 0 1-112.246154-112.246153v-193.536a111.458462 111.458462 0 0 1 112.246154-110.749539h175.911384l-15.970461 64.984615-151.394462 32.787693a31.744 31.744 0 0 0-24.438154 29.636923v163.170461a30.680615 30.680615 0 0 0 24.438154 29.696l151.473231 31.645539 15.891692 64.630154z m159.940923-200.152615v-15.891692h129.240615v15.891692z"
+          fill="#FFFFFF" p-id="6893"></path>
+</svg>
--- a/src/assets/icons/bucket.svg
+++ b/src/assets/icons/bucket.svg
@@ -0,0 +1,9 @@
+<svg t="1719936338007" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="21681" width="200" height="200">
+    <path d="M512 803.84c-225.28 0-409.6-61.44-409.6-138.24v220.16c5.12 76.8 184.32 138.24 409.6 138.24 220.16 0 404.48-61.44 409.6-138.24V665.6c0 76.8-184.32 138.24-409.6 138.24z"
+          fill="#5F6190" p-id="21682"></path>
+    <path d="M512 542.72c-225.28 0-409.6-61.44-409.6-138.24v220.16c5.12 76.8 184.32 138.24 409.6 138.24 220.16 0 404.48-61.44 409.6-138.24V404.48c0 76.8-184.32 138.24-409.6 138.24z"
+          fill="#5F6190" p-id="21683"></path>
+    <path d="M921.6 138.24C921.6 61.44 737.28 0 512 0S102.4 61.44 102.4 138.24V358.4c5.12 76.8 184.32 138.24 409.6 138.24 220.16 0 404.48-61.44 409.6-138.24V138.24z m-409.6 97.28c-168.96 0-307.2-46.08-307.2-102.4s138.24-102.4 307.2-102.4 307.2 46.08 307.2 102.4-138.24 102.4-307.2 102.4z"
+          fill="#1BC4DB" p-id="21684"></path>
+</svg>
--- a/src/assets/icons/eye-outline.svg
+++ b/src/assets/icons/eye-outline.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+    <path d="M255.66 112c-77.94 0-157.89 45.11-220.83 135.33a16 16 0 00-.27 17.77C82.92 340.8 161.8 400 255.66 400c92.84 0 173.34-59.38 221.79-135.25a16.14 16.14 0 000-17.47C428.89 172.28 347.8 112 255.66 112z"
+          fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
+    <circle cx="256" cy="256" r="80" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
+</svg>
--- a/src/assets/icons/file.svg
+++ b/src/assets/icons/file.svg
@@ -0,0 +1,9 @@
+<svg t="1719936396719" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="22777" width="200" height="200">
+    <path d="M748.353488 430.31814V284.465612H371.323039v115.712H290.498481c-32.942636 0-53.025736 15.042481-53.025737 45.905365v372.259721c0 30.862884 26.751008 55.923101 59.693644 55.9231h553.912558c32.942636 0 59.693643-25.060217 59.693643-55.9231V474.215194c0-30.870822-20.797519-43.897054-44.214573-43.897054h-118.19659z"
+          fill="#FFCB01" p-id="22778"></path>
+    <path d="M262.18369 290.212713a27.306667 27.306667 0 0 0 27.338419-27.346356V181.827473h392.834976a31.990078 31.990078 0 0 1 31.950388 31.958325v200.402357a27.306667 27.306667 0 0 0 27.346356 27.338419 27.306667 27.306667 0 0 0 27.346357-27.338419V213.785798c0-47.746977-38.904062-86.651039-86.643101-86.651038H262.18369a27.306667 27.306667 0 0 0-27.354295 27.346356v108.385241a27.370171 27.370171 0 0 0 27.354295 27.346356z"
+          fill="#333333" p-id="22779"></path>
+    <path d="M427.857364 398.566202c-1.000186-1.825736-4.651659-8.707969-6.715535-14.907535l-0.762046-2.063876-32.148837-78.093892c-16.249054-39.824868-39.880434-56.312062-72.442047-56.312062H181.105116c-28.497364 0-51.017426 8.255504-66.829891 22.321613-16.765023 14.923411-27.298729 36.864-27.298729 67.075969v467.467907c0 56.28031 45.698977 101.971349 101.979287 101.971348h651.589457c56.28031 0 101.979287-45.691039 101.979287-101.979286V485.860217c0-30.275473-10.811535-51.327008-25.750822-65.289922-15.32031-14.336-35.935256-21.591318-58.026666-21.591318H432.858295a43.976434 43.976434 0 0 1-4.992993-0.412775z m451.163287 87.294015v318.186171a38.499225 38.499225 0 0 1-38.475411 38.483348H188.955783a38.499225 38.499225 0 0 1-38.475411-38.483348V336.594357c0-8.573023 1.270078-15.415566 6.009054-19.646512 5.699473-5.064434 14.343938-6.255132 24.61569-6.255132h134.683783c7.699845 0 9.827225 7.437891 13.66921 16.860279l31.799565 77.252465c8.946109 26.354109 20.305364 40.309085 33.736435 48.350264 10.16062 6.10431 22.226357 9.327132 37.864186 9.327132h425.888744c5.477209 0 10.875039 0.928744 14.661457 4.477023 4.207132 3.921364 5.612155 10.39876 5.612155 18.900341z"
+          p-id="22780"></path>
+</svg>
--- a/src/assets/icons/flux.svg
+++ b/src/assets/icons/flux.svg
@@ -0,0 +1,5 @@
+<svg t="1719988678909" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="15225" width="200" height="200">
+    <path d="M868.590933 569.207467h-107.281066c-16.9472 0-28.245333-5.632-33.8944-16.930134v-5.649066l-28.228267-73.403734-67.754667 197.632c-5.649067 16.9472-16.9472 28.228267-33.8944 28.228267-16.930133 0-28.228267-5.632-33.877333-22.5792l-73.403733-141.175467-11.298134 16.9472c-5.649067 11.298133-16.9472 16.930133-33.877333 16.930134H157.0816c-22.5792 0-39.5264-16.930133-39.5264-39.5264 0-22.5792 16.9472-39.5264 39.5264-39.5264h265.403733l33.877334-62.122667c5.649067-11.281067 22.596267-11.281067 33.8944-11.281067 16.930133 0 28.228267 5.632 33.877333 22.5792l62.122667 124.245334 73.386666-208.9472c5.666133-16.930133 22.596267-22.5792 39.543467-22.5792 11.298133 0 28.228267 0 39.5264 16.930133l50.824533 141.175467h79.0528c22.596267 0 39.5264 16.9472 39.5264 39.5264 0 22.596267-22.596267 39.5264-39.5264 39.5264M506.504533 0C228.181333 0 0.426667 227.7376 0.426667 506.077867c0 278.357333 227.7376 506.077867 506.077866 506.077866 278.357333 0 506.094933-227.7376 506.094934-506.077866C1012.599467 227.720533 784.8448 0 506.504533 0"
+          fill="#13E6AA" p-id="15226"></path>
+</svg>
--- a/src/assets/icons/share.svg
+++ b/src/assets/icons/share.svg
@@ -0,0 +1,7 @@
+<svg t="1719936556739" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="27654" width="200" height="200">
+    <path d="M576.27264 832a256 256 0 0 1 366.72-229.76c5.12-24.96 9.6-48.64 12.8-69.12s7.68-39.68 8.96-46.08a138.24 138.24 0 0 0 0-64 111.36 111.36 0 0 0-25.6-39.04 115.84 115.84 0 0 0-36.48-26.24 148.48 148.48 0 0 0-42.24-11.52H283.15264l-58.88 224c-8.32 30.08-23.68 45.44-46.72 45.44a42.24 42.24 0 0 1-32-13.44 46.72 46.72 0 0 1-12.8-33.28 54.4 54.4 0 0 1 0-15.36c7.04-23.68 14.72-48.64 21.76-74.24s12.8-45.44 20.48-71.04 14.08-48.64 19.84-71.68a128 128 0 0 1 24.96-50.56 56.96 56.96 0 0 1 45.44-19.2H832.27264V256a99.84 99.84 0 0 0-13.44-50.56 161.28 161.28 0 0 0-34.56-40.96 183.68 183.68 0 0 0-47.36-27.52 147.2 147.2 0 0 0-48-8.96H140.43264a134.4 134.4 0 0 0-103.68 40.32A160 160 0 0 0 0.27264 279.68v500.48a139.52 139.52 0 0 0 13.44 64 158.72 158.72 0 0 0 34.56 46.72 161.28 161.28 0 0 0 46.08 29.44 122.88 122.88 0 0 0 48.64 10.24H595.47264A252.16 252.16 0 0 1 576.27264 832z"
+          fill="#5197FF" p-id="27655"></path>
+    <path d="M832.27264 640a192 192 0 1 0 192 192 192 192 0 0 0-192-192z m-64 184.96a23.04 23.04 0 0 1 0 7.04l76.16 44.8a31.36 31.36 0 1 1-10.24 23.04A23.04 23.04 0 0 1 832.27264 896l-76.16-44.8a30.72 30.72 0 0 1-21.76 8.96 32 32 0 0 1-32-32 32 32 0 0 1 32-32 32.64 32.64 0 0 1 21.76 8.32l76.16-47.36a27.52 27.52 0 0 1 0-7.04 32 32 0 1 1 32 32 30.72 30.72 0 0 1-21.76-8.96l-74.24 44.16a32 32 0 0 1 0 7.68z"
+          fill="#96C3FF" p-id="27656"></path>
+</svg>
--- a/src/assets/icons/standard_directory.svg
+++ b/src/assets/icons/standard_directory.svg
@@ -0,0 +1,9 @@
+<svg t="1720103382070" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="15117" width="200" height="200">
+    <path d="M0 128a51.2 51.2 0 0 1 51.2-51.2h350.24a51.2 51.2 0 0 1 47.0592 31.0336L473.6 166.4h499.2a51.2 51.2 0 0 1 51.2 51.2v537.6a51.2 51.2 0 0 1-51.2 51.2H51.2a51.2 51.2 0 0 1-51.2-51.2V128z"
+          fill="#FFA000" p-id="15118"></path>
+    <path d="M89.6 249.6m51.2 0l742.4 0q51.2 0 51.2 51.2l0 460.8q0 51.2-51.2 51.2l-742.4 0q-51.2 0-51.2-51.2l0-460.8q0-51.2 51.2-51.2Z"
+          fill="#FFFFFF" p-id="15119"></path>
+    <path d="M0 332.8m51.2 0l921.6 0q51.2 0 51.2 51.2l0 512q0 51.2-51.2 51.2l-921.6 0q-51.2 0-51.2-51.2l0-512q0-51.2 51.2-51.2Z"
+          fill="#FFCA28" p-id="15120"></path>
+</svg>
--- a/src/assets/icons/storage.svg
+++ b/src/assets/icons/storage.svg
@@ -0,0 +1,5 @@
+<svg t="1719987558668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7251"
+     width="200" height="200">
+    <path d="M998.36831369 808.03500972l-88.63608925-569.45477076c-33.85380987-101.62815163-91.51450005-218.21607951-236.61730669-218.21607953h-315.20880748c-77.67963338 0-181.90409043 37.99642711-237.67081208 222.21939995l-94.67501614 565.17051556s-5.19612263 32.65866655-5.19612262 50.07662207c0 80.4866399 62.8591539 145.80514357 140.46738303 145.80514356h702.19761827c77.67963338 0 140.60902095-65.31850367 140.60902094-145.80514356 0-17.27865868-5.26752687-49.79568727-5.26752687-49.79568729zM366.75672597 314.92309107c4.49495625 0 8.42804297 1.68560859 12.85276552 2.45817921 5.96986378-65.0375689 61.59494744-116.30699314 130.14303036-116.30699314 64.96616463 0 118.55447127 45.93400483 129.1597587 106.05404472 4.49495625-0.70350747 9.13155046-1.33444016 13.83603723-1.33444014 42.77231812 0 77.46776173 33.64193822 77.46776173 75.22028361s-34.62520991 75.22028359-77.46776173 75.2905173h-285.99159181c-40.24390524 0-72.76210441-31.74562857-72.7621044-70.72532734s32.44913603-70.65626421 72.7621044-70.65626422zM806.06846636 915.28068607h-588.06669899c-34.76567729 0-62.9293876-26.19716695-62.92938761-58.57372814 0-32.23726441 28.09347658-58.50466503 62.92938761-58.50466504h587.99646526c34.76567729 0 62.9293876 26.26857117 62.92938761 58.50466504 0 32.37773178-28.09347658 58.57372816-62.85915388 58.57372814z"
+          fill="#ffa500" p-id="7252"></path>
+</svg>
--- a/src/assets/icons/user.svg
+++ b/src/assets/icons/user.svg
@@ -0,0 +1,11 @@
+<svg t="1719936630588" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="30504" width="200" height="200">
+    <path d="M332.100265 328.251268m-38.063325 34.890835a51.635134 51.635134 0 1 0 76.12665-69.78167 51.635134 51.635134 0 1 0-76.12665 69.78167Z"
+          fill="#1AC3B6" p-id="30505"></path>
+    <path d="M556.783712 328.252893m-38.063325 34.890835a51.635134 51.635134 0 1 0 76.126651-69.78167 51.635134 51.635134 0 1 0-76.126651 69.78167Z"
+          fill="#1AC3B6" p-id="30506"></path>
+    <path d="M511.987638 1024C229.669419 1024 0 794.293496 0 512S229.669419 0 511.987638 0s512.012362 229.694143 512.012362 512-229.681781 512-512.012362 512z m0-921.286011c-225.664204 0-409.273649 183.609445-409.273649 409.286011s183.609445 409.286011 409.273649 409.286011 409.298373-183.609445 409.298373-409.286011S737.664204 102.713989 511.987638 102.713989z"
+          fill="#06E4D3" p-id="30507"></path>
+    <path d="M511.987638 846.892849V744.178859c128.018543 0 232.178859-104.160317 232.17886-232.178859h102.713989c0 184.635472-150.232652 334.892849-334.892849 334.892849z"
+          fill="#1AC3B6" p-id="30508"></path>
+</svg>
--- a/src/assets/icons/userInfo.svg
+++ b/src/assets/icons/userInfo.svg
@@ -0,0 +1,5 @@
+<svg t="1719936741171" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="33995" width="200" height="200">
+    <path d="M896 448H768a31.963429 31.963429 0 1 0 0 64h128a31.963429 31.963429 0 1 0 0-64m0-128H768a31.963429 31.963429 0 1 0 0 64h128a31.963429 31.963429 0 1 0 0-64M768 256h128a31.963429 31.963429 0 1 0 0-64H768a31.963429 31.963429 0 1 0 0 64m13.750857 384c-5.12-2.267429-97.206857-42.569143-198.729143-62.756571 11.849143-9.654857 22.162286-20.918857 31.085715-33.28 21.942857-29.915429 33.792-66.048 33.792-103.131429V336.018286a176.274286 176.274286 0 0 0-175.689143-176.054857 176.128 176.128 0 0 0-175.762286 176.054857v104.813714c0 56.539429 26.843429 106.788571 68.315429 138.971429-96.475429 20.918857-181.321143 57.929143-185.490286 59.757714-29.257143 11.702857-51.273143 44.617143-51.273143 76.434286v131.657142l1.755429 5.12c9.508571 27.867429 35.108571 46.592 63.780571 46.592h572.928c33.28 0 60.854857-24.868571 65.024-56.978285l0.512-126.390857c0-15.213714-5.12-30.72-13.677714-43.958858a81.481143 81.481143 0 0 0-36.571429-32.036571"
+          fill="#00C998" p-id="33996"></path>
+</svg>
--- a/src/pages/Home/index.less
+++ b/src/pages/Home/index.less
@@ -1,3 +0,0 @@
-.container {
-  padding-top: 80px;
-}
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -4,7 +4,6 @@ import { Avatar, Card, Skeleton, Space, Tag } from 'antd';
 import Meta from 'antd/es/card/Meta';
 import ReactECharts from 'echarts-for-react';
 import { FunctionComponent, useEffect, useState } from 'react';
-import styles from './index.module.less';

 import aliyun from '@/assets/icons/aliyun.svg';
 import eye from '@/assets/icons/eye-outline.svg';
@@ -12,8 +11,8 @@ import share from '@/assets/icons/share.svg';
 import standard_directory from '@/assets/icons/standard_directory.svg';
 import userInfo from '@/assets/icons/userInfo.svg';
 // import * as echarts from "echarts/core";
-
 import 'react-calendar-heatmap/dist/styles.css';
+
 const defaultData = [
  {
    id: '1',
@@ -196,9 +195,34 @@ const MainHome: FunctionComponent = () => {
  }, []);
  return (
    <>
-      <div className={styles.home_content_main}>
-        <div className={styles.home_content_head}>
-          <div className={styles.home_content_head_left}>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        /*className={styles.home_content_main}*/
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+          /*className={styles.home_content_head}*/
+        >
+          <div
+            style={{
+              height: '51vh',
+              width: '43%',
+              display: 'flex',
+              flexDirection: 'row',
+              alignItemstems: 'center',
+              justifyContent: 'space-around',
+              flexWrap: 'wrap',
+            }}
+            /*className={styles.home_content_head_left}*/
+          >
            <Card
              style={{ width: '13.5vw', height: '21vh' }}
              loading={false}
@@ -270,7 +294,14 @@ const MainHome: FunctionComponent = () => {
            </ProCard>
          </div>
        </div>
-        <div className={styles.home_content_list}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirectionirection: 'row',
+            justifyContent: 'space-between',
+            marginTop: '30px',
+          }}
+        >
          <ProCard bordered boxShadow style={{ width: '100%' }}>
            <ProList<DataItem>
              rowKey="id"
--- a/src/pages/Redis/index.tsx
+++ b/src/pages/Redis/index.tsx
@@ -0,0 +1,287 @@
+/** @format */
+import { ProCard, StatisticCard } from '@ant-design/pro-components';
+// import * as echarts from "echarts/core";
+import { Card, Col, Flex, Progress, Row, Skeleton } from 'antd';
+import ReactECharts from 'echarts-for-react';
+import { FunctionComponent, useEffect, useState } from 'react';
+
+import RcResizeObserver from 'rc-resize-observer';
+import 'react-calendar-heatmap/dist/styles.css';
+
+const { Statistic } = StatisticCard;
+const MainHome: FunctionComponent = () => {
+  const [loading, setLoading] = useState(true);
+  const [responsive, setResponsive] = useState(false);
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      color: ['#F58080', '#47D8BE', '#F9A589'],
+      data: ['新增用户数量', '新增分享圈数量'],
+      left: 'center',
+      bottom: 'bottom',
+    },
+    grid: {
+      top: 'middle',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      height: '80%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: [
+        '2024-02-01',
+        '2024-03-01',
+        '2024-04-01',
+        '2024-05-01',
+        '2024-06-01',
+        '2024-07-01',
+      ],
+      axisLine: {
+        lineStyle: {
+          color: '#999',
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#DDD',
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#333',
+        },
+      },
+      nameTextStyle: {
+        color: '#999',
+      },
+      splitArea: {
+        show: false,
+      },
+    },
+    series: [
+      {
+        name: '新增用户数量',
+        type: 'line',
+        data: [58, 90, 22, 13, 66, 28],
+        color: '#F58080',
+        lineStyle: {
+          width: 5,
+          color: {
+            type: 'linear',
+
+            colorStops: [
+              {
+                offset: 0,
+                color: '#FFCAD4', // 0% 处的颜色
+              },
+              {
+                offset: 0.4,
+                color: '#F58080', // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: '#F58080', // 100% 处的颜色
+              },
+            ],
+            globalCoord: false, // 缺省为 false
+          },
+          shadowColor: 'rgba(245,128,128, 0.5)',
+          shadowBlur: 10,
+          shadowOffsetY: 7,
+        },
+        itemStyle: {
+          color: '#F58080',
+          borderWidth: 10,
+          /*shadowColor: 'rgba(72,216,191, 0.3)',
+           shadowBlur: 100,*/
+          borderColor: '#F58080',
+        },
+        smooth: true,
+      },
+      {
+        name: '新增分享圈数量',
+        type: 'line',
+        data: [12, 56, 11, 22, 52, 13],
+        lineStyle: {
+          width: 5,
+          color: {
+            type: 'linear',
+
+            colorStops: [
+              {
+                offset: 0,
+                color: '#AAF487', // 0% 处的颜色
+              },
+              {
+                offset: 0.4,
+                color: '#47D8BE', // 100% 处的颜色
+              },
+              {
+                offset: 1,
+                color: '#47D8BE', // 100% 处的颜色
+              },
+            ],
+            globalCoord: false, // 缺省为 false
+          },
+          shadowColor: 'rgba(71,216,190, 0.5)',
+          shadowBlur: 10,
+          shadowOffsetY: 7,
+        },
+        itemStyle: {
+          color: '#AAF487',
+          borderWidth: 10,
+          /*shadowColor: 'rgba(72,216,191, 0.3)',
+             shadowBlur: 100,*/
+          borderColor: '#AAF487',
+        },
+        smooth: true,
+      },
+    ],
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  }, []);
+  return (
+    <>
+      <div>
+        <Row gutter={16}>
+          <Col span={8}>
+            <Card title="CPU占用率" bordered={false}>
+              <Flex gap="small" wrap>
+                <Progress type="circle" percent={68} />
+              </Flex>
+            </Card>
+          </Col>
+          <Col span={8}>
+            <Card title="内存占用率" bordered={false}>
+              <Progress type="circle" percent={79} />
+            </Card>
+          </Col>
+          <Col span={8}>
+            <Card title="线程占用率" bordered={false}>
+              <Progress type="circle" percent={75} />
+            </Card>
+          </Col>
+        </Row>
+      </div>
+      <br />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <div style={{ width: '100%' }}>
+            <ProCard bordered boxShadow>
+              <Skeleton loading={loading} active>
+                <ReactECharts option={option} />
+              </Skeleton>
+            </ProCard>
+          </div>
+          <div></div>
+        </div>
+        <div style={{ marginTop: 30 }}></div>
+        <RcResizeObserver
+          key="resize-observer"
+          onResize={(offset) => {
+            setResponsive(offset.width < 596);
+          }}
+        >
+          <ProCard
+            title="数据概览"
+            extra="2024年7月26日 星期五"
+            split={responsive ? 'horizontal' : 'vertical'}
+            headerBordered
+            bordered
+          >
+            <ProCard split="horizontal">
+              <ProCard split="horizontal">
+                <ProCard split="vertical">
+                  <StatisticCard
+                    statistic={{
+                      title: '昨日全部流量',
+                      value: 234,
+                      description: (
+                        <Statistic
+                          title="较本月平均流量"
+                          value="8.04%"
+                          trend="down"
+                        />
+                      ),
+                    }}
+                  />
+                  <StatisticCard
+                    statistic={{
+                      title: '本月累计流量',
+                      value: 234,
+                      description: (
+                        <Statistic title="月同比" value="8.04%" trend="up" />
+                      ),
+                    }}
+                  />
+                </ProCard>
+                <ProCard split="vertical">
+                  <StatisticCard
+                    statistic={{
+                      title: '运行中实验',
+                      value: '12/56',
+                      suffix: '个',
+                    }}
+                  />
+                  <StatisticCard
+                    statistic={{
+                      title: '历史实验总数',
+                      value: '134',
+                      suffix: '个',
+                    }}
+                  />
+                </ProCard>
+              </ProCard>
+              <StatisticCard
+                title="流量走势"
+                chart={
+                  <img
+                    src="https://gw.alipayobjects.com/zos/alicdn/_dZIob2NB/zhuzhuangtu.svg"
+                    width="100%"
+                  />
+                }
+              />
+            </ProCard>
+            <StatisticCard
+              title="流量占用情况"
+              chart={
+                <img
+                  src="https://gw.alipayobjects.com/zos/alicdn/qoYmFMxWY/jieping2021-03-29%252520xiawu4.32.34.png"
+                  alt="大盘"
+                  width="100%"
+                />
+              }
+            />
+          </ProCard>
+        </RcResizeObserver>
+      </div>
+    </>
+  );
+};
+export default MainHome;
Author	SHA1	Message	Date
chizhehui	c98d3e6471	feat: 优化首页的页面设计	2024-07-24 09:33:34 +08:00
chizhehui	fc54ab9e73	feat: 完成系统监控的页面设计	2024-07-22 13:35:50 +08:00
chizhehui	38f27bda4b	feat: 完成系统监控的页面设计	2024-07-22 13:26:17 +08:00