From d6079942bd18548f72caa65de0ee91c871d6ede3 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Thu, 10 Apr 2025 14:45:33 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8E=AF=E5=A2=83=E7=9B=91=E6=B5=8B=E9=A1=B5?=
 =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  21 +-
 src/assets/image/env-img/air-A.png            | Bin 0 -> 2349 bytes
 src/assets/image/env-img/air-B.png            | Bin 0 -> 2434 bytes
 src/assets/image/env-img/air-C.png            | Bin 0 -> 2440 bytes
 src/assets/image/env-img/dz_big.png           | Bin 0 -> 7087 bytes
 src/assets/image/env-img/dz_sm.png            | Bin 0 -> 5611 bytes
 src/assets/image/env-img/env-1.png            | Bin 0 -> 7081 bytes
 src/assets/image/env-img/env-2.png            | Bin 0 -> 7422 bytes
 src/assets/image/env-img/env-3.png            | Bin 0 -> 6779 bytes
 src/assets/image/env-img/env-4.png            | Bin 0 -> 6908 bytes
 src/assets/image/env-img/levelA.png           | Bin 0 -> 4490 bytes
 src/assets/image/env-img/levelB.png           | Bin 0 -> 3934 bytes
 src/assets/image/env-img/levelC.png           | Bin 0 -> 4572 bytes
 src/assets/image/env-img/levelD.png           | Bin 0 -> 4459 bytes
 src/assets/image/env-img/levelE.png           | Bin 0 -> 4385 bytes
 src/assets/image/env-img/levelF.png           | Bin 0 -> 4607 bytes
 src/assets/image/env-img/line.png             | Bin 0 -> 489 bytes
 src/assets/image/env-img/line_big.png         | Bin 0 -> 772 bytes
 src/assets/image/env-img/offline.png          | Bin 0 -> 469 bytes
 src/assets/image/env-img/offline_big.png      | Bin 0 -> 752 bytes
 src/assets/image/env-img/round.png            | Bin 0 -> 491 bytes
 src/components/ChartsBox/index.vue            |   7 +-
 .../components/center-four-model.vue          | 224 ++++++++++
 .../components/center-one-model.vue           |  90 ++++
 .../components/center-three-model.vue         | 402 ++++++++++++++++++
 .../components/center-two-model.vue           | 207 +++++++++
 .../components/left-one-model.vue             |  90 ++++
 .../components/left-three-model.vue           | 291 +++++++++++++
 .../components/left-two-model.vue             | 177 ++++++++
 .../components/right-one-model.vue            |  28 ++
 .../components/right-two-model.vue            | 119 ++++++
 src/views/home-env-monitor/index.vue          |  98 +++--
 src/views/home/index.vue                      |  27 ++
 34 files changed, 1743 insertions(+), 40 deletions(-)
 create mode 100644 src/assets/image/env-img/air-A.png
 create mode 100644 src/assets/image/env-img/air-B.png
 create mode 100644 src/assets/image/env-img/air-C.png
 create mode 100644 src/assets/image/env-img/dz_big.png
 create mode 100644 src/assets/image/env-img/dz_sm.png
 create mode 100644 src/assets/image/env-img/env-1.png
 create mode 100644 src/assets/image/env-img/env-2.png
 create mode 100644 src/assets/image/env-img/env-3.png
 create mode 100644 src/assets/image/env-img/env-4.png
 create mode 100644 src/assets/image/env-img/levelA.png
 create mode 100644 src/assets/image/env-img/levelB.png
 create mode 100644 src/assets/image/env-img/levelC.png
 create mode 100644 src/assets/image/env-img/levelD.png
 create mode 100644 src/assets/image/env-img/levelE.png
 create mode 100644 src/assets/image/env-img/levelF.png
 create mode 100644 src/assets/image/env-img/line.png
 create mode 100644 src/assets/image/env-img/line_big.png
 create mode 100644 src/assets/image/env-img/offline.png
 create mode 100644 src/assets/image/env-img/offline_big.png
 create mode 100644 src/assets/image/env-img/round.png
 create mode 100644 src/views/home-env-monitor/components/center-four-model.vue
 create mode 100644 src/views/home-env-monitor/components/center-one-model.vue
 create mode 100644 src/views/home-env-monitor/components/center-three-model.vue
 create mode 100644 src/views/home-env-monitor/components/center-two-model.vue
 create mode 100644 src/views/home-env-monitor/components/left-one-model.vue
 create mode 100644 src/views/home-env-monitor/components/left-three-model.vue
 create mode 100644 src/views/home-env-monitor/components/left-two-model.vue
 create mode 100644 src/views/home-env-monitor/components/right-one-model.vue
 create mode 100644 src/views/home-env-monitor/components/right-two-model.vue

diff --git a/package.json b/package.json
index d90fb14..dc52788 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "@jiaminghi/data-view": "^2.7.3",
     "@types/echarts": "^4.4.3",
     "core-js": "^3.6.4",
-    "echarts": "^4.6.0",
+    "echarts": "^5.4.0",
     "element-ui": "2.15.13",
     "js-cookie": "3.0.1",
     "vue": "^2.6.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 478f6f7..d557a22 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,8 @@ dependencies:
     specifier: ^3.6.4
     version: 3.6.4
   echarts:
-    specifier: ^4.6.0
-    version: 4.6.0
+    specifier: ^5.4.0
+    version: 5.4.0
   element-ui:
     specifier: 2.15.13
     version: 2.15.13(vue@2.6.11)
@@ -4401,10 +4401,11 @@ packages:
       safer-buffer: 2.1.2
     dev: true
 
-  /echarts@4.6.0:
-    resolution: {integrity: sha512-xKkcr6v9UVOSF+PMuj7Ngt3bnzLwN1sSXWCvpvX+jYb3mePYsZnABq7wGkPac/m0nV653uGHXoHK8DCKCprdNg==}
+  /echarts@5.4.0:
+    resolution: {integrity: sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==}
     dependencies:
-      zrender: 4.2.0
+      tslib: 2.3.0
+      zrender: 5.4.0
     dev: false
 
   /ee-first@1.1.1:
@@ -8824,6 +8825,10 @@ packages:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: true
 
+  /tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+    dev: false
+
   /tslib@2.6.3:
     resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
     dev: true
@@ -9633,6 +9638,8 @@ packages:
       strip-indent: 2.0.0
     dev: true
 
-  /zrender@4.2.0:
-    resolution: {integrity: sha512-YJ9hxt5uFincYYU3KK31+Ce+B6PJmYYK0Q9fQ6jOUAoC/VHbe4kCKAPkxKeT7jGTxrK5wYu18R0TLGqj2zbEOA==}
+  /zrender@5.4.0:
+    resolution: {integrity: sha512-rOS09Z2HSVGFs2dn/TuYk5BlCaZcVe8UDLLjj1ySYF828LATKKdxuakSZMvrDz54yiKPDYVfjdKqcX8Jky3BIA==}
+    dependencies:
+      tslib: 2.3.0
     dev: false
diff --git a/src/assets/image/env-img/air-A.png b/src/assets/image/env-img/air-A.png
new file mode 100644
index 0000000000000000000000000000000000000000..316ff99a84d28ed9a6bd8208a3bdc7f82e66324c
GIT binary patch
literal 2349
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
TWd#0H00000NkvXXu0mjfl#Y5G

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/air-B.png b/src/assets/image/env-img/air-B.png
new file mode 100644
index 0000000000000000000000000000000000000000..19848c75068d52aa08feb993bd69cf2d26b27df4
GIT binary patch
literal 2434
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
A*8l(j

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/air-C.png b/src/assets/image/env-img/air-C.png
new file mode 100644
index 0000000000000000000000000000000000000000..0193680bb5829112d754987d383beea06641f15e
GIT binary patch
literal 2440
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
GLSTa9la~wt

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/dz_big.png b/src/assets/image/env-img/dz_big.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e6a83f95b5d07fe7d88261772e98c6f6b080d3b
GIT binary patch
literal 7087
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
Z_TRDIz-FDxiZB2G002ovPDHLkV1mmFV?+P|

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/dz_sm.png b/src/assets/image/env-img/dz_sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a98a67c2176f0db0ca4e37ac5b221e94d030add
GIT binary patch
literal 5611
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
FV1g+A+{pj{

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/env-1.png b/src/assets/image/env-img/env-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..b625193c74f26866841580a45d9422d9dd66cdd5
GIT binary patch
literal 7081
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
T^ZZkw00000NkvXXu0mjfaSMM=

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/env-2.png b/src/assets/image/env-img/env-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed70f84b042653450c6c015f3c8c60e3a17fd1cf
GIT binary patch
literal 7422
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

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/env-3.png b/src/assets/image/env-img/env-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..febef95466cce16cd727a3b4ad65fe37f92013ab
GIT binary patch
literal 6779
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

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/env-4.png b/src/assets/image/env-img/env-4.png
new file mode 100644
index 0000000000000000000000000000000000000000..da0308b84c0cd7ecbae4d2e7b7a16038d97835fb
GIT binary patch
literal 6908
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
C*&C1m

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/levelA.png b/src/assets/image/env-img/levelA.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b16c58f053c1998ba2e0b0314534f673fbecda3
GIT binary patch
literal 4490
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

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/levelB.png b/src/assets/image/env-img/levelB.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7ec496175a627f9abdd45ecc82481035e3b4fe1
GIT binary patch
literal 3934
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

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/levelC.png b/src/assets/image/env-img/levelC.png
new file mode 100644
index 0000000000000000000000000000000000000000..e2bdf1048d7a848b258cba0dcb24fba04c87cb47
GIT binary patch
literal 4572
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
GLSTYPU68Q=

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/levelD.png b/src/assets/image/env-img/levelD.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b5e69909f03a5daeaa1d451b9e2a5205a574a69
GIT binary patch
literal 4459
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

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/levelE.png b/src/assets/image/env-img/levelE.png
new file mode 100644
index 0000000000000000000000000000000000000000..db295914a0f65ece17ee03216cbbbd1dc23a2e52
GIT binary patch
literal 4385
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
bw1fT+_#F4^TovO800000NkvXXu0mjfwxma_

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/levelF.png b/src/assets/image/env-img/levelF.png
new file mode 100644
index 0000000000000000000000000000000000000000..2610fbeb01d2a3dc19df1376bd0eef7a364d933e
GIT binary patch
literal 4607
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

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/line.png b/src/assets/image/env-img/line.png
new file mode 100644
index 0000000000000000000000000000000000000000..24db37fd24696d1bb6f28ac8c5639488f987adba
GIT binary patch
literal 489
zcmV<F0T%v=P)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0e(qDK~#7Fy;M<7
z!axvxQ_v5;xPcr2{WB5+Cjf6yPe9QFhzC&i2zUbV1fp0!)f=ccD2e)EpyO<<6_@T(
z6T?fIOlRJ_-Pze$f`MSn4NUQ<niRo;;DIajiU5RGzfN28v2sQVxkik>m<?LTQ2wog
z^oF*GRTvnUu}lyjh<FXpBqkF^6eAOqh1&S?4^vky{j7`rlyk+^1z*U=`upX(VgE4X
z3zJJ&g6<u65JROq?5SNkaq+E!Npl!guY?w-C6kmK&u}Sbr1of7Sg<>0C6Nx?I~knS
z>A>`R7PeDNLpto|`O9+HesWz%I_9C*-=TB-0cJjRLw?d{mBu4|HH6?75fkn}N^i{P
zd(y%AIwBDpp&$~jk?-*oO)*EhgJSQ?C>1VQbIttxF5k*UDJHm(@8O?e6I?!{7EZ39
z)ax8Cefau{<b|BGe00y7vv&kS3etsCX#;9D!Nm4nmR*9U+w_vWi<~VVX`d^{DVQL}
fHGh{UHdc*K1-+d5<+_2y00000NkvXXu0mjfi(b#;

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/line_big.png b/src/assets/image/env-img/line_big.png
new file mode 100644
index 0000000000000000000000000000000000000000..5251818b0e6af2b20f3615b1024e8a7429880857
GIT binary patch
literal 772
zcmV+f1N;1mP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0+~rfK~#7F?O0uI
z(?AgZ#z8#r6iz^Tf)?JOlsYG%oPg#8IN|^(2LPKJgd6k*aRr4pT29b#gFGN4DE08I
zRfiDl^*Y`NMDs~j;{Ew{c4l^F)`Gu)=tK`i@sxi<y}<3HFSDw#Hyp{HsbG-o${AW9
zdaI!Xh@sdq?+T1<!dV5($pkOR5}J1kxgC8_D_JFepqFz|V@9e16n0!URmvKN?{t!r
ztr_t{k-9OZ8q^GLIJF1!6m7s6+3GYHUj3$)zB!_acI!-BxdSsfxJlnrM11WcKo~!e
zV^~1V=LRg(%<#SL<B}#_*fcpKa=x~422~wqXRmf;#8Y;ct0wvlpU?tkbMc;R(K-W~
zW12T+IINpj>jO<-)8HbEb<n{9pM6G#fo-f80f#4gPObEon5XfsY@sCr_`tGoRc$N4
zkAQ1LBNIob+LbSe7+|+E<;ng<5|)kErEnu1jM;Xa+?OeQ3&<?elMIvArlW6afWE7c
z&L$4BJni++7UUpT>^j_8Kn9Qlc!H{X8f|h&y6^{Qt~?jBq}pM%V$^QRpl<Hm9hO%O
zoVg8b>r3wZmpH|ryPB~E>=!j)ktKYg$ToHBi><UOc4GdM<QyKM9pqWY9GEKqHtUOT
z&G?4#K~s;FJFT)$P?Y&0{35;j&Hb)o%q*ZMBo&=tKuzc?ee=LG3SR5_yt4$^cbI}P
zE$K{oKt@<IZ0q9!qj{=h$@I7gpv<*L%hmI`PI2A(&bfHq0#@OlFSj-Vw#9!XU<!Y5
z{>Ia!9`qIyc{g_EauzVzla$0y=9lhOz`2Gac_c@!Q&zecKmVwA7T>e4<w6Iye!n8T
zyeFU05PmN16+zrJ7~8N3Gi_1(3D^m34$cPG9X|mxAO~7wxd`0=0000<MNUMnLSTYt
Cm0D>4

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/offline.png b/src/assets/image/env-img/offline.png
new file mode 100644
index 0000000000000000000000000000000000000000..85eae8d42c11da19c04d91b01ab372e34cd7642b
GIT binary patch
literal 469
zcmV;`0V@89P)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0cuG^K~#7Fy;RF>
zgFq17MV95GI|wBJ7d|IaL7Waq1*U`G3QP&4f{+f#fzJujL6Q!f6Nm%kjYSY9{31nu
z(um#pJm$?VaMnW{$L40Ud6Q-N#72;1*|sPOn{$4rX`0-Pt$r3^7)pX59I-U>JoiC7
zN{ILlWZSx~y?(4E1Q`*0G}{2y5~6TNPmuUct^}Wi{pd?upfhp6_ej?DL6H?j(Q`kS
zvl%2wvPU;=vvqV`KTPHGiB8R`sze$*>?|3?KJ1008iwI7CWI6hMSC_458XcWox)J&
z0y2U%<Xl0T1sO+@fzxwTRefTAK);^D@eaR8K?F|C)vy-wc`&nEe<8WKR{>j&pkGgf
zw-lfg#Hrq6(2FHExfk_=r;IVw3kiSK3+$gUNJztFGZ@Pm>+mo~MptAgHu){5X?jzZ
zr40i6oXokqUa#pZ`WpLRPR>wKl+Ug-T9a?;=euI_c!fEg^>y(L_E)sJ0dJJs00000
LNkvXXu0mjfOt-&B

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/offline_big.png b/src/assets/image/env-img/offline_big.png
new file mode 100644
index 0000000000000000000000000000000000000000..24a4b5e8a7b3566248b3958353fa640e4dfa6da0
GIT binary patch
literal 752
zcmV<M0uTL(P)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0)<ILK~#7F?U-G1
z+At8u*CxZqTY7@JCkXJs=R?d1nx3HH1my-DPLT8l^ai;>l?Mif2S`s4_Xd4pfEl3w
zrE<n)Y)QuQG?U>sqw$BN)k?e4uI<o&U^1E9;_?~AFPF>jYPH($q_!6(!W_r>vfXa`
z-EQ}ZG5}dVWZmue`>K33QYoiYkcHv$6~%`@a$WZd@07w6cu`p)xF6{{Iux(m4;Dr_
z({8sNU7Oey-0gPXv0@(mo%sQn<_R;_t)MTjLQ(g^VzIc?nK*F<+<CLvu<s3^+$EIr
zJDtuWDZt7f>=(B(v)Sw#vPSgpqzA25>zhiZn^eIwYc`uh2&tjmS1OgClz~R0@d(8~
zz&d?A2K)~9x4M2>A4r301*5QamdoW0+~^u@`>M896og{W6fvD7;1#2cxMT;<@Lg(b
zDVQ6nOw7KsTCE1y(O0~)BUOGv7ZH7c&yBD#c(Vj#TS54lhYKIz9%Umy>6t2-#>5<|
zJj#v-3*4DDHdYWqZ^$0LX+vWLk9;l@X=EK@@pwG0!hsKIknAi_`e~dw3##!Qc79YW
zj%US*0ZK2-0mCR^i!j>g#&<NSmEf7k`)9JtA<D=EHp#z*V|!(6bHPiQ<g~IbO!IxR
zi;!bfRpYybLg7A10;gH<6+TpZWSLN|YJ847Zn0S8gi*xQ3kVoe&Zx#Ol}f{xP&b`U
zKaw;f;^o6}_MF!)){UPg7U!y960bhpIxCo!H>IE;OW*)D{>PI>L7Qiyu`FW+aV!YT
z{1eHK?h^@E2F|z#(+($n7tiPO_tEF|dL6{ILnQE`&-Hr!7p273hkNWHZh9E2I3F`v
i(f$H9B%m{APU8=Nf+5{K;!d*w0000<MNUMnLSTZ{HCS)}

literal 0
HcmV?d00001

diff --git a/src/assets/image/env-img/round.png b/src/assets/image/env-img/round.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b89b5c3710516a93c56eebf26d4a7ae479b4c57
GIT binary patch
literal 491
zcmV<H0Tlj;P)<h;3K|Lk000e1NJLTq000jF000jN1^@s6JJyv-00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0f0$FK~#7FjZ(c%
z0znY|cJI)@8SJ0|-@sUCAvPA;O3wpmX`+P>VPlMii9CS4won)gOr$aR1`rddl;l9+
z_QsiGkD$qsn`E=Iv-8c*H>2=R&Y!5PU6f3Sb>+Y%gTT@F@&oj4_f>b%SH;Rnn{wG7
z>^KT}BuEfo{QZg6T~&?dU;(a8P+>JoA&P800^yL~9_xKR9d^9u_h2!AE8rN25C?o8
zGtir-BM!!g2o<GJcU?5SBDVSGSxJw`U@OW9Tu0fGgy1s|r&7UqiZ?Cf*zRjffioYE
zE2xUP$~Y~o+NhgIBVoh^93Zb{9M)V&1y-}_NFk$Tj@Im_1oxwhFxA8hV2zDbU_wVO
z0}S<wgRV6`rpWFq9nBktar$ys^$cOi#y&4XeMtb{{trUJ=!S6-S$YGn`U8~^Xfm7c
zTt$uB5cUf;Sc8K<#6Vt_)~r)2XI;uV62KsrR5Lluk3sutPmTY8W4U;t(!`)FbChui
ht3r<SD5Wm?{sKFNk-kAcF>?R_002ovPDHLkV1i}S&5i&7

literal 0
HcmV?d00001

diff --git a/src/components/ChartsBox/index.vue b/src/components/ChartsBox/index.vue
index ccc7044..014ee20 100644
--- a/src/components/ChartsBox/index.vue
+++ b/src/components/ChartsBox/index.vue
@@ -28,18 +28,19 @@ export default {
     height: 100%;
     .title_bg {
         width: 100%;
-        height: 38px;
+        height: 32px;
         background: url('@/assets/image/common/box_title_bg.png') no-repeat;
         background-size: 100% 100%;
         color: #fff;
-        line-height: 38px;
+        line-height: 32px;
         padding-left: 40px;
         letter-spacing: 2px;
+        font-size: 16px;
     }
 
     .charts-content {
         width: 100%;
-        height: calc(100% - 38px);
+        height: calc(100% - 32px);
     }
 }
 </style>
diff --git a/src/views/home-env-monitor/components/center-four-model.vue b/src/views/home-env-monitor/components/center-four-model.vue
new file mode 100644
index 0000000..989338d
--- /dev/null
+++ b/src/views/home-env-monitor/components/center-four-model.vue
@@ -0,0 +1,224 @@
+<template>
+    <!-- 24小时空气质量数据分析 -->
+    <div style="height: 100%">
+        <ChartsBox :boxTitle="`24小时空气质量数据分析`">
+            <div ref="chartContainer" class="container"> </div>
+        </ChartsBox>
+    </div>
+</template>
+
+<script>
+import ChartsBox from '@/components/ChartsBox/index'
+import * as echarts from 'echarts'
+require('echarts/theme/macarons')
+export default {
+    components: { ChartsBox },
+    data() {
+        return {
+            chart: null,
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.initChart()
+        })
+    },
+    beforeDestroy() {
+        if (!this.chart) {
+            return
+        }
+        this.chart.dispose()
+        this.chart = null
+
+        window.removeEventListener('resize', this.handleResize)
+        if (this.chart) {
+            this.chart.dispose()
+            this.chart = null
+        }
+    },
+    methods: {
+        initChart() {
+            // 使用 ref 获取 container 元素
+            const container = this.$refs.chartContainer
+            this.chart = echarts.init(container, 'macarons')
+
+            this.chart.setOption({
+                xAxis: {
+                    type: 'category',
+                    data: [
+                        '00:00',
+                        '03:00',
+                        '06:00',
+                        '09:00',
+                        '12:00',
+                        '15:00',
+                        '18:00',
+                        '21:00',
+                        '24:00',
+                    ],
+                    boundaryGap: false,
+                    axisTick: { show: true },
+                    axisLabel: { color: '#4494db' },
+                    axisLine: { lineStyle: { color: '#4494db' } },
+                    splitLine: {
+                        // 添加x轴虚线网格线
+                        show: false,
+                    },
+                },
+                yAxis: {
+                    axisTick: { show: false },
+                    axisLine: { lineStyle: { color: '#4494db' } },
+                    splitLine: {
+                        lineStyle: {
+                            type: 'dashed',
+                            color: 'rgba(68, 148, 219, 0.3)',
+                            width: 1,
+                        },
+                    },
+                },
+                grid: {
+                    left: 10,
+                    right: 15,
+                    bottom: 5, // 为图例留出空间
+                    top: 10, // 为图例留出空间
+                    containLabel: true,
+                },
+                legend: {
+                    // 新增右上角图例
+                    right: 20,
+                    top: 10,
+                    icon: 'circle',
+                    itemWidth: 10,
+                    itemHeight: 10,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 12,
+                    },
+                    data: ['PM2.5', 'PM10'],
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            // 解决点击无提示问题
+                            backgroundColor: '#6a7985',
+                        },
+                    },
+                    padding: [5, 10],
+                    formatter: function (params) {
+                        let res = params[0].name + '<br>'
+                        params.forEach((item) => {
+                            res += `${item.marker} ${item.seriesName}: <strong>${item.value}</strong><br>`
+                        })
+                        return res
+                    },
+                },
+                series: [
+                    {
+                        name: 'PM2.5',
+                        type: 'line',
+                        smooth: true,
+                        data: [30, 40, 35, 45, 50, 32, 36, 43, 49],
+                        itemStyle: { color: '#306FFF' },
+                        lineStyle: { color: '#306FFF', width: 2 },
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(
+                                0,
+                                0,
+                                0,
+                                1,
+                                [
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(48, 111, 255, 0.5)',
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(48, 111, 255, 0.1)',
+                                    },
+                                ],
+                            ),
+                        },
+                        animationDuration: 3000,
+                        symbol: 'circle',
+                        symbolSize: 6,
+                        showSymbol: false,
+                        emphasis: {
+                            itemStyle: {
+                                color: '#ffeb3b',
+                                borderColor: '#fff',
+                                borderWidth: 2,
+                            },
+                        },
+                    },
+                    {
+                        name: 'PM10',
+                        type: 'line',
+                        smooth: true,
+                        data: [27, 36, 31, 48, 42, 36, 22, 39, 52],
+                        itemStyle: { color: '#15a0c6' },
+                        lineStyle: { color: '#15a0c6', width: 2 },
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(
+                                0,
+                                0,
+                                0,
+                                1,
+                                [
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(21, 160, 198, 0.5)',
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(21, 160, 198, 0.1)',
+                                    },
+                                ],
+                            ),
+                        },
+                        animationDuration: 3000,
+                        symbol: 'circle',
+                        symbolSize: 6,
+                        showSymbol: false,
+                        emphasis: {
+                            itemStyle: {
+                                color: '#ffeb3b',
+                                borderColor: '#fff',
+                                borderWidth: 2,
+                            },
+                        },
+                    },
+                ],
+            })
+
+            // 添加窗口大小变化时的自适应
+            window.addEventListener('resize', this.handleResize)
+
+            setTimeout(() => {
+                this.chart.dispatchAction({
+                    type: 'highlight',
+                    seriesIndex: 0,
+                })
+            }, 500)
+        },
+        handleResize() {
+            if (this.chart) {
+                this.chart.resize()
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    height: 103%;
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    color: #fff;
+    z-index: 9;
+}
+</style>
diff --git a/src/views/home-env-monitor/components/center-one-model.vue b/src/views/home-env-monitor/components/center-one-model.vue
new file mode 100644
index 0000000..cd3ddcc
--- /dev/null
+++ b/src/views/home-env-monitor/components/center-one-model.vue
@@ -0,0 +1,90 @@
+<template>
+    <!-- 环境监测设备列表 -->
+    <div style="height: 100%">
+        <ChartsBox :boxTitle="`实时环境信息`">
+            <div class="container">
+                <div
+                    v-for="(item, index) in envInfoList"
+                    :key="index"
+                    class="env-item"
+                >
+                    <img :src="item.imgPath" alt="" />
+                    <div class="info">
+                        <div>
+                            <span style="font-size: 20px; font-weight: bold">
+                                {{ item.count }}
+                            </span>
+                            <span> {{ item.code }}</span>
+                        </div>
+                        <div style="margin-top: 6px; font-size: 14px">
+                            {{ item.name }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ChartsBox>
+    </div>
+</template>
+
+<script>
+import ChartsBox from '@/components/ChartsBox/index'
+export default {
+    components: { ChartsBox },
+    data() {
+        return {
+            envInfoList: [
+                {
+                    name: '风速',
+                    imgPath: require('@/assets/image/env-img/env-1.png'),
+                    count: 30,
+                    code: 'M/s',
+                },
+                {
+                    name: '温度',
+                    imgPath: require('@/assets/image/env-img/env-2.png'),
+                    count: 30,
+                    code: '℃',
+                },
+                {
+                    name: '湿速',
+                    imgPath: require('@/assets/image/env-img/env-3.png'),
+                    count: 30,
+                    code: '%',
+                },
+                {
+                    name: '噪音',
+                    imgPath: require('@/assets/image/env-img/env-4.png'),
+                    count: 30,
+                    code: '分贝',
+                },
+            ],
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    color: #fff;
+    color: #b5d3f4;
+    font-size: 16px;
+    transform: translateY(10px);
+
+    .env-item {
+        display: flex;
+        align-items: center;
+        img {
+            width: 66px;
+            height: 54px;
+        }
+
+        .info {
+            margin-left: 6px;
+        }
+    }
+}
+</style>
diff --git a/src/views/home-env-monitor/components/center-three-model.vue b/src/views/home-env-monitor/components/center-three-model.vue
new file mode 100644
index 0000000..f2aafc5
--- /dev/null
+++ b/src/views/home-env-monitor/components/center-three-model.vue
@@ -0,0 +1,402 @@
+<template>
+    <!-- 环境监测设备列表 -->
+    <div style="height: 100%">
+        <ChartsBox :boxTitle="`实时空气质量`">
+            <div class="container">
+                <div class="pie-container">
+                    <div class="air-qu-item">
+                        <div class="chart" ref="chart1"> </div>
+                        <div class="dz-sm"> PM2.5 </div>
+                    </div>
+                    <div class="air-qu-item">
+                        <div class="chart chart2" ref="chart2"></div>
+                        <div class="dz-bg"> 空气质量 </div>
+                    </div>
+                    <div class="air-qu-item">
+                        <div class="chart" ref="chart3"></div>
+                        <div class="dz-sm"> PM2.5 </div>
+                    </div>
+                </div>
+
+                <div class="scale-box">
+                    <div class="icon-box">
+                        <img
+                            v-for="(item, index) in iconList"
+                            :key="index"
+                            :src="item"
+                            alt=""
+                        />
+                    </div>
+                    <div class="line"></div>
+                    <div class="num-box">
+                        <span v-for="item in numList" :key="item">
+                            {{ item }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </ChartsBox>
+    </div>
+</template>
+
+<script>
+import ChartsBox from '@/components/ChartsBox/index'
+import * as echarts from 'echarts'
+require('echarts/theme/macarons')
+export default {
+    components: { ChartsBox },
+    data() {
+        return {
+            chart1: null,
+            chart2: null,
+            chart3: null,
+            iconList: [
+                require('@/assets/image/env-img/levelA.png'),
+                require('@/assets/image/env-img/levelB.png'),
+                require('@/assets/image/env-img/levelC.png'),
+                require('@/assets/image/env-img/levelD.png'),
+                require('@/assets/image/env-img/levelE.png'),
+                require('@/assets/image/env-img/levelF.png'),
+            ],
+            numList: [0, 50, 100, 150, 200, 300, 500],
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.initChart()
+        })
+    },
+    beforeDestroy() {
+        if (!this.chart) {
+            return
+        }
+        this.chart.dispose()
+        this.chart = null
+
+        window.removeEventListener('resize', this.handleResize)
+        if (this.chart) {
+            this.chart.dispose()
+            this.chart = null
+        }
+    },
+    methods: {
+        initChart() {
+            // 使用 ref 获取 container 元素
+            const container1 = this.$refs.chart1
+            const container2 = this.$refs.chart2
+            const container3 = this.$refs.chart3
+            this.chart1 = echarts.init(container1, 'macarons')
+
+            this.chart1.setOption({
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['70%', '90%'],
+                        center: ['50%', '50%'],
+                        startAngle: 225,
+                        label: {
+                            show: true,
+                            position: 'center',
+                            formatter: '{c}',
+                            color: '#FFFFFF',
+                            fontSize: 18,
+                            fontWeight: 'bold',
+                        },
+                        color: [
+                            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: '#08dad1',
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#0b7ddb',
+                                },
+                            ]),
+                            'transparent',
+                        ],
+                        labelLine: {
+                            normal: {
+                                show: false,
+                            },
+                        },
+
+                        data: [
+                            {
+                                value: 50,
+                                label: { show: true },
+                            },
+                            {
+                                value: 50,
+                                label: { show: false },
+                                itemStyle: { color: 'rgba(52, 68, 93,0.5)' }, // 浅色背景
+                            },
+                            {
+                                value: 30,
+                                label: { show: false },
+                                itemStyle: { color: 'rgba(255,255,255,0.0)' }, // 浅色背景
+                            },
+                        ],
+                        // 在圆环中央显示文字
+                        graphic: [
+                            {
+                                type: 'text',
+                                left: 'center',
+                                top: 'center',
+                                style: {
+                                    text: '50', // 直接显示第一个值
+                                    fill: '#FFFFFF', // 文字颜色
+                                    fontSize: 28,
+                                    fontWeight: 'bold',
+                                    textAlign: 'center',
+                                },
+                            },
+                        ],
+                    },
+                ],
+            })
+
+            this.chart2 = echarts.init(container2, 'macarons')
+
+            this.chart2.setOption({
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['80%', '100%'],
+                        center: ['50%', '50%'],
+                        startAngle: 225,
+                        label: {
+                            show: true,
+                            position: 'center',
+                            formatter: '{c}',
+                            color: '#FFFFFF',
+                            fontSize: 18,
+                            fontWeight: 'bold',
+                        },
+                        color: [
+                            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: '#08dad1',
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#0b7ddb',
+                                },
+                            ]),
+                            'transparent',
+                        ],
+                        labelLine: {
+                            normal: {
+                                show: false,
+                            },
+                        },
+
+                        data: [
+                            {
+                                value: 40,
+                                label: { show: true },
+                            },
+                            {
+                                value: 60,
+                                label: { show: false },
+                                itemStyle: { color: 'rgba(52, 68, 93,0.5)' }, // 浅色背景
+                            },
+                            {
+                                value: 30,
+                                label: { show: false },
+                                itemStyle: { color: 'rgba(255,255,255,0.0)' }, // 浅色背景
+                            },
+                        ],
+                        // 在圆环中央显示文字
+                        graphic: [
+                            {
+                                type: 'text',
+                                left: 'center',
+                                top: 'center',
+                                style: {
+                                    text: '50', // 直接显示第一个值
+                                    fill: '#FFFFFF', // 文字颜色
+                                    fontSize: 28,
+                                    fontWeight: 'bold',
+                                    textAlign: 'center',
+                                },
+                            },
+                        ],
+                    },
+                ],
+            })
+
+            this.chart3 = echarts.init(container3, 'macarons')
+
+            this.chart3.setOption({
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['70%', '90%'],
+                        center: ['50%', '50%'],
+                        startAngle: 225,
+                        label: {
+                            show: true,
+                            position: 'center',
+                            formatter: '{c}',
+                            color: '#FFFFFF',
+                            fontSize: 18,
+                            fontWeight: 'bold',
+                        },
+                        color: [
+                            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: '#08dad1',
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#0b7ddb',
+                                },
+                            ]),
+                            'transparent',
+                        ],
+                        labelLine: {
+                            normal: {
+                                show: false,
+                            },
+                        },
+
+                        data: [
+                            {
+                                value: 60,
+                                label: { show: true },
+                            },
+                            {
+                                value: 50,
+                                label: { show: false },
+                                itemStyle: { color: 'rgba(52, 68, 93,0.5)' }, // 浅色背景
+                            },
+                            {
+                                value: 30,
+                                label: { show: false },
+                                itemStyle: { color: 'rgba(255,255,255,0.0)' }, // 浅色背景
+                            },
+                        ],
+                        // 在圆环中央显示文字
+                        graphic: [
+                            {
+                                type: 'text',
+                                left: 'center',
+                                top: 'center',
+                                style: {
+                                    text: '50', // 直接显示第一个值
+                                    fill: '#FFFFFF', // 文字颜色
+                                    fontSize: 28,
+                                    fontWeight: 'bold',
+                                    textAlign: 'center',
+                                },
+                            },
+                        ],
+                    },
+                ],
+            })
+
+            // 添加窗口大小变化时的自适应
+            window.addEventListener('resize', this.handleResize)
+        },
+        handleResize() {
+            if (this.chart1) {
+                this.chart1.resize()
+            }
+            if (this.chart2) {
+                this.chart2.resize()
+            }
+            if (this.chart3) {
+                this.chart2.resize()
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    color: #fff;
+    z-index: 9999;
+
+    .pie-container {
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .air-qu-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .chart {
+            width: 110px;
+            height: 80px;
+        }
+
+        .chart2 {
+            width: 130px;
+        }
+
+        .dz-sm {
+            width: 110px;
+            height: 29px;
+            background: url('@/assets/image/env-img/dz_sm.png') no-repeat;
+            background-size: 100% 100%;
+            font-size: 14px;
+            line-height: 20px;
+            text-align: center;
+        }
+        .dz-bg {
+            width: 128px;
+            height: 35px;
+            background: url('@/assets/image/env-img/dz_sm.png') no-repeat;
+            background-size: 100% 100%;
+            font-size: 14px;
+            line-height: 28px;
+            text-align: center;
+        }
+    }
+
+    .scale-box {
+        width: 100%;
+
+        .icon-box {
+            width: 100%;
+            display: flex;
+            align-content: center;
+            justify-content: space-around;
+
+            img {
+                width: 46px;
+                height: 46px;
+                object-fit: contain;
+            }
+        }
+
+        .num-box {
+            width: 100%;
+            display: flex;
+            align-content: center;
+            justify-content: space-between;
+            span {
+                font-size: 16px;
+            }
+        }
+
+        .line {
+            border-top: 1px dashed #0a77dd;
+        }
+    }
+}
+</style>
diff --git a/src/views/home-env-monitor/components/center-two-model.vue b/src/views/home-env-monitor/components/center-two-model.vue
new file mode 100644
index 0000000..81813c4
--- /dev/null
+++ b/src/views/home-env-monitor/components/center-two-model.vue
@@ -0,0 +1,207 @@
+<template>
+    <!-- 环境监测设备列表 -->
+    <div style="height: 100%">
+        <ChartsBox :boxTitle="`24小时数据分析`">
+            <div ref="chartContainer" class="container"> </div>
+        </ChartsBox>
+    </div>
+</template>
+
+<script>
+import ChartsBox from '@/components/ChartsBox/index'
+import * as echarts from 'echarts'
+require('echarts/theme/macarons')
+export default {
+    components: { ChartsBox },
+    data() {
+        return {
+            chart: null,
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.initChart()
+        })
+    },
+    beforeDestroy() {
+        if (!this.chart) {
+            return
+        }
+        this.chart.dispose()
+        this.chart = null
+
+        window.removeEventListener('resize', this.handleResize)
+        if (this.chart) {
+            this.chart.dispose()
+            this.chart = null
+        }
+    },
+    methods: {
+        initChart() {
+            // 使用 ref 获取 container 元素
+            const container = this.$refs.chartContainer
+            this.chart = echarts.init(container, 'macarons')
+
+            this.chart.setOption({
+                xAxis: {
+                    type: 'category',
+                    data: [
+                        '00:00',
+                        '03:00',
+                        '06:00',
+                        '09:00',
+                        '12:00',
+                        '15:00',
+                        '18:00',
+                        '21:00',
+                        '24:00',
+                    ],
+                    boundaryGap: false,
+                    axisTick: { show: true },
+                    axisLabel: { color: '#4494db' },
+                    axisLine: {
+                        lineStyle: { color: '#4494db' },
+                    },
+                    // 添加x轴网格线虚线样式
+                },
+                yAxis: {
+                    axisTick: { show: false },
+                    axisLine: {
+                        lineStyle: { color: '#4494db' },
+                    },
+                    // 添加y轴网格线虚线样式
+                    splitLine: {
+                        lineStyle: {
+                            type: 'dashed',
+                            color: 'rgba(68, 148, 219, 0.3)',
+                            width: 1,
+                        },
+                    },
+                },
+                grid: {
+                    left: 10,
+                    right: 15,
+                    bottom: 0,
+                    top: 12,
+                    containLabel: true,
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: { type: 'cross' },
+                    padding: [5, 10],
+                },
+                series: [
+                    {
+                        name: '数量',
+                        type: 'line',
+                        smooth: true, // 启用平滑曲线
+                        data: [
+                            { value: 320, name: '00:00' },
+                            { value: 523, name: '03:00' },
+                            { value: 320, name: '06:00' },
+                            { value: 100, name: '09:00' },
+                            { value: 320, name: '12:00' },
+                            { value: 300, name: '15:00' },
+                            { value: 320, name: '18:00' },
+                            { value: 23, name: '21:00' },
+                            { value: 66, name: '24:00' },
+                        ],
+                        itemStyle: {
+                            color: '#15a0c6',
+                        },
+                        lineStyle: {
+                            color: '#15a0c6',
+                            width: 2,
+                        },
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(
+                                0,
+                                0,
+                                0,
+                                1,
+                                [
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(21, 160, 198, 0.5)',
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(21, 160, 198, 0.1)',
+                                    },
+                                ],
+                            ),
+                        },
+                        // 添加线条动画效果
+                        animationDuration: 3000,
+                        animationEasing: 'cubicInOut',
+                        symbol: 'circle',
+                        symbolSize: 6,
+                        showSymbol: false, // 初始不显示点
+                        // 高亮动画配置
+                        emphasis: {
+                            scale: true,
+                            itemStyle: {
+                                color: '#ffeb3b',
+                                borderColor: '#fff',
+                                borderWidth: 2,
+                            },
+                        },
+                        // 线条动画效果
+                        lineAnimation: {
+                            duration: 3000,
+                            easing: 'cubicInOut',
+                            delay: function (idx) {
+                                return idx * 100
+                            },
+                        },
+                        effect: {
+                            show: true,
+                            period: 4,
+                            trailLength: 0.2,
+                            symbol: 'circle',
+                            symbolSize: 6,
+                            loop: true,
+                        },
+                    },
+                ],
+                // 添加全局动画配置
+                animation: {
+                    duration: 3000,
+                    easing: 'cubicInOut',
+                    seriesKey: 'line',
+                    animationDelay: function (idx) {
+                        return idx * 100
+                    },
+                },
+            })
+
+            // 添加窗口大小变化时的自适应
+            window.addEventListener('resize', this.handleResize)
+
+            setTimeout(() => {
+                this.chart.dispatchAction({
+                    type: 'highlight',
+                    seriesIndex: 0,
+                })
+            }, 500)
+        },
+        handleResize() {
+            if (this.chart) {
+                this.chart.resize()
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    color: #fff;
+    z-index: 9999;
+}
+</style>
diff --git a/src/views/home-env-monitor/components/left-one-model.vue b/src/views/home-env-monitor/components/left-one-model.vue
new file mode 100644
index 0000000..968bb2f
--- /dev/null
+++ b/src/views/home-env-monitor/components/left-one-model.vue
@@ -0,0 +1,90 @@
+<template>
+    <!-- 环境监测设备列表 -->
+    <div style="height: 100%; position: relative">
+        <ChartsBox :boxTitle="`环境监测设备列表`">
+            <div class="container">
+                <div
+                    class="device-item"
+                    v-for="(item, index) in deviceList"
+                    :key="index"
+                >
+                    <img
+                        :src="
+                            item.onLine
+                                ? `${require('@/assets/image/env-img/line_big.png')}`
+                                : `${require('@/assets/image/env-img/offline_big.png')}`
+                        "
+                        alt=""
+                    />
+                    <span :style="item.onLine ? 'color:#71C4FF' : ''">
+                        {{ item.name }}
+                    </span>
+                    <span :style="item.onLine ? 'color:#71C4FF' : ''">
+                        {{ item.code }}
+                    </span>
+                </div>
+            </div>
+        </ChartsBox>
+
+        <div class="case">
+            <img src="@/assets/image/env-img/line.png" alt="" />
+            <span>在线</span>
+            <img src="@/assets/image/env-img/offline.png" alt="" />
+            <span>离线</span>
+        </div>
+    </div>
+</template>
+
+<script>
+import ChartsBox from '@/components/ChartsBox/index'
+export default {
+    components: { ChartsBox },
+    data() {
+        return {
+            deviceList: [
+                { name: '1号设备', code: 'YKD-231', onLine: true },
+                { name: '2号设备', code: 'YKD-233', onLine: true },
+                { name: '3号设备', code: 'YKD-232', onLine: false },
+                { name: '4号设备', code: 'YKD-236', onLine: true },
+            ],
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    color: #fff;
+    font-size: 12px;
+    transform: translateY(10px);
+
+    .device-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        img {
+            width: 30px;
+            height: 30px;
+        }
+    }
+}
+
+.case {
+    font-size: 12px;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    display: flex;
+    align-items: center;
+
+    span {
+        padding: 0 12px 0 6px;
+    }
+}
+</style>
diff --git a/src/views/home-env-monitor/components/left-three-model.vue b/src/views/home-env-monitor/components/left-three-model.vue
new file mode 100644
index 0000000..edfd21e
--- /dev/null
+++ b/src/views/home-env-monitor/components/left-three-model.vue
@@ -0,0 +1,291 @@
+<template>
+    <!-- 24小时数据分析 -->
+    <div style="height: 100%">
+        <ChartsBox :boxTitle="`24小时数据分析`">
+            <div ref="chartContainer" class="container"></div>
+        </ChartsBox>
+    </div>
+</template>
+
+<script>
+import ChartsBox from '@/components/ChartsBox/index'
+import * as echarts from 'echarts'
+require('echarts/theme/macarons')
+export default {
+    components: { ChartsBox },
+    data() {
+        return {
+            chart: null,
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.initChart()
+        })
+    },
+    beforeDestroy() {
+        if (!this.chart) {
+            return
+        }
+        this.chart.dispose()
+        this.chart = null
+
+        window.removeEventListener('resize', this.handleResize)
+        if (this.chart) {
+            this.chart.dispose()
+            this.chart = null
+        }
+    },
+    methods: {
+        initChart() {
+            // 使用 ref 获取 container 元素
+            const container = this.$refs.chartContainer
+            this.chart = echarts.init(container, 'macarons')
+
+            this.chart.setOption({
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{b}: {c} ({d}%)',
+                },
+                legend: {
+                    data: [
+                        '优',
+                        '良',
+                        '轻度污染',
+                        '中度污染',
+                        '重度污染',
+                        '严重污染',
+                    ],
+                    right: '4%',
+                    top: 'middle',
+                    orient: 'vertical',
+                    itemGap: 20,
+                    textStyle: {
+                        color: '#fff', // 设置图例文字颜色
+                        fontSize: 13, // 文字大小
+                        padding: [0, 0, 0, 5], // 文字与图例标记的间距 [上,右,下,左]
+                    },
+                    itemStyle: {
+                        // 设置图例标记为正方形
+                        borderWidth: 0, // 去除边框
+                        borderRadius: 0, // 直角（非圆角）
+                    },
+                    itemWidth: 14, // 正方形宽度
+                    itemHeight: 14,
+                    formatter: (name) => {
+                        // 获取对应数据项的value和百分比
+                        const data = this.chart.getOption().series[0].data
+                        const item = data.find((item) => item.name === name)
+                        if (item) {
+                            const total = data.reduce(
+                                (sum, item) => sum + item.value,
+                                0,
+                            )
+                            const percent = (
+                                (item.value / total) *
+                                100
+                            ).toFixed(1)
+
+                            if (
+                                (name === '优' || name === '良') &&
+                                percent.length > 3
+                            ) {
+                                return `${name}                 ${percent}%        ${item.value}`
+                            }
+                            if (
+                                (name === '优' || name === '良') &&
+                                percent.length < 4
+                            ) {
+                                return `${name}                 ${percent}%         ${item.value}`
+                            }
+
+                            if (
+                                (name !== '优' || name !== '良') &&
+                                percent > 10
+                            ) {
+                                return `${name}      ${percent}%        ${item.value}`
+                            }
+                            if (
+                                (name !== '优' || name !== '良') &&
+                                percent < 10
+                            ) {
+                                return `${name}      ${percent}%          ${item.value}`
+                            }
+                        }
+                        return name
+                    },
+                },
+                series: [
+                    {
+                        name: '空气质量分布',
+                        type: 'pie',
+                        radius: ['45%', '59%'], // 标准饼图半径范围
+                        center: ['25%', '50%'], // 居中显示
+                        avoidLabelOverlap: false,
+                        label: {
+                            show: false, // 完全隐藏标签文字
+                        },
+                        labelLine: {
+                            show: false, // 隐藏连接线
+                        },
+                        data: [
+                            {
+                                value: 320,
+                                name: '优',
+                                itemStyle: { color: '#0ffd94' },
+                            },
+                            {
+                                value: 240,
+                                name: '良',
+                                itemStyle: { color: '#17f2ff' },
+                            },
+                            {
+                                value: 149,
+                                name: '轻度污染',
+                                itemStyle: { color: '#f6cf1a' },
+                            },
+                            {
+                                value: 100,
+                                name: '中度污染',
+                                itemStyle: { color: '#ee860e' },
+                            },
+                            {
+                                value: 59,
+                                name: '重度污染',
+                                itemStyle: { color: '#e3021a' },
+                            },
+                            {
+                                value: 59,
+                                name: '严重污染',
+                                itemStyle: { color: '#97642e' },
+                            },
+                        ],
+                        // animationType: 'scale',
+                        animationEasing: 'cubicInOut',
+                        animationDuration: 1000,
+                        emphasis: {
+                            // 启用悬停高亮
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)',
+                            },
+                        },
+
+                        itemStyle: {
+                            borderRadius: 20, // 扇形两端的圆角大小
+                            borderWidth: 4,
+                            borderColor: '#01284d',
+                        },
+                    },
+                    // 装饰圆环1（最外层细环）
+                    {
+                        type: 'pie',
+                        radius: ['65%', '68%'],
+                        center: ['25%', '50%'],
+                        silent: true, // 禁用交互
+                        label: { show: false },
+                        data: [
+                            {
+                                value: 10,
+                                itemStyle: { color: '#04356c' },
+                            },
+                            {
+                                value: 10,
+                                itemStyle: { color: '#04356c' },
+                            },
+                            {
+                                value: 10,
+                                itemStyle: { color: '#04356c' },
+                            },
+                            {
+                                value: 10,
+                                itemStyle: { color: '#04356c' },
+                            },
+                            {
+                                value: 10,
+                                itemStyle: { color: '#04356c' },
+                            },
+                            {
+                                value: 10,
+                                itemStyle: { color: '#04356c' },
+                            },
+                            {
+                                value: 10,
+                                itemStyle: { color: '#04356c' },
+                            },
+                            {
+                                value: 10,
+                                itemStyle: { color: '#04356c' },
+                            },
+                            {
+                                value: 10,
+                                itemStyle: { color: '#04356c' },
+                            },
+                            {
+                                value: 10,
+                                itemStyle: { color: '#04356c' },
+                            },
+                        ],
+                    },
+
+                    // 装饰圆环2（中间层虚线环）
+                    {
+                        type: 'pie',
+                        radius: ['63%', '65%'],
+                        center: ['25%', '50%'],
+                        silent: true,
+                        label: { show: false },
+                        data: [
+                            {
+                                value: 1,
+                                itemStyle: {
+                                    color: 'transparent',
+                                    borderColor: 'rgba(1,40,77,0.5)',
+                                    borderWidth: 1,
+                                    borderType: 'dashed', // 虚线效果
+                                },
+                            },
+                        ],
+                    },
+
+                    // 装饰圆环3（最外层粗环）
+                    {
+                        type: 'pie',
+                        radius: ['70%', '76%'],
+                        center: ['25%', '50%'],
+                        silent: true,
+                        label: { show: false },
+                        data: [
+                            {
+                                value: 1,
+                                itemStyle: {
+                                    color: 'transparent',
+                                    borderColor: '#01284d',
+                                    borderWidth: 2,
+                                },
+                            },
+                        ],
+                    },
+                ],
+            })
+
+            // 添加窗口大小变化时的自适应
+            window.addEventListener('resize', this.handleResize)
+        },
+        handleResize() {
+            if (this.chart) {
+                this.chart.resize()
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+}
+</style>
diff --git a/src/views/home-env-monitor/components/left-two-model.vue b/src/views/home-env-monitor/components/left-two-model.vue
new file mode 100644
index 0000000..93f23b3
--- /dev/null
+++ b/src/views/home-env-monitor/components/left-two-model.vue
@@ -0,0 +1,177 @@
+<template>
+    <!-- 近七日空气质量详情 -->
+    <div style="height: 100%">
+        <ChartsBox :boxTitle="`近七日空气质量详情`">
+            <div class="container">
+                <!-- <div class="feel-box"></div> -->
+                <dv-scroll-board class="dv-scr-board" :config="config" />
+            </div>
+        </ChartsBox>
+    </div>
+</template>
+
+<script>
+import ChartsBox from '@/components/ChartsBox/index'
+
+export default {
+    components: { ChartsBox },
+    data() {
+        return {
+            config: {
+                data: [
+                    [
+                        "<img src='" +
+                            require('@/assets/image/env-img/round.png') +
+                            "' class='table-img'>",
+                        '2025-03-29',
+
+                        "<div  class='air-quality'>空气质量 <img src='" +
+                            require('@/assets/image/env-img/air-A.png') +
+                            "' class='table-img'></div>",
+                    ],
+                    [
+                        "<img src='" +
+                            require('@/assets/image/env-img/round.png') +
+                            "' class='table-img'>",
+                        '2025-03-29',
+
+                        "<div  class='air-quality'>空气质量 <img src='" +
+                            require('@/assets/image/env-img/air-A.png') +
+                            "' class='table-img'></div>",
+                    ],
+                    [
+                        "<img src='" +
+                            require('@/assets/image/env-img/round.png') +
+                            "' class='table-img'>",
+                        '2025-03-29',
+                        "<div  class='air-quality'>空气质量 <img src='" +
+                            require('@/assets/image/env-img/air-B.png') +
+                            "' class='table-img'></div>",
+                    ],
+                    [
+                        "<img src='" +
+                            require('@/assets/image/env-img/round.png') +
+                            "' class='table-img'>",
+                        '2025-03-29',
+                        "<div  class='air-quality'>空气质量 <img src='" +
+                            require('@/assets/image/env-img/air-B.png') +
+                            "' class='table-img'></div>",
+                    ],
+                    [
+                        "<img src='" +
+                            require('@/assets/image/env-img/round.png') +
+                            "' class='table-img'>",
+                        '2025-03-29',
+                        "<div  class='air-quality'>空气质量 <img src='" +
+                            require('@/assets/image/env-img/air-C.png') +
+                            "' class='table-img'></div>",
+                    ],
+                    [
+                        "<img src='" +
+                            require('@/assets/image/env-img/round.png') +
+                            "' class='table-img'>",
+                        '2025-03-29',
+                        "<div  class='air-quality'>空气质量 <img src='" +
+                            require('@/assets/image/env-img/air-C.png') +
+                            "' class='table-img'></div>",
+                    ],
+                    [
+                        "<img src='" +
+                            require('@/assets/image/env-img/round.png') +
+                            "' class='table-img'>",
+                        '2025-03-29',
+                        "<div  class='air-quality'>空气质量 <img src='" +
+                            require('@/assets/image/env-img/air-C.png') +
+                            "' class='table-img'></div>",
+                    ],
+                    [
+                        "<img src='" +
+                            require('@/assets/image/env-img/round.png') +
+                            "' class='table-img'>",
+                        '2025-03-29',
+                        "<div  class='air-quality'>空气质量 <img src='" +
+                            require('@/assets/image/env-img/air-A.png') +
+                            "' class='table-img'></div>",
+                    ],
+                    [
+                        "<img src='" +
+                            require('@/assets/image/env-img/round.png') +
+                            "' class='table-img'>",
+                        '2025-03-29',
+                        "<div  class='air-quality'>空气质量 <img src='" +
+                            require('@/assets/image/env-img/air-C.png') +
+                            "' class='table-img'></div>",
+                    ],
+                ],
+                rowNum: 6, //表格行数
+                // headerHeight: 35,
+                headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
+                oddRowBGC: '', //奇数行
+                evenRowBGC: '', //偶数行
+                columnWidth: [40],
+                align: ['center'],
+                hoverPause: true,
+                waitTime: 5000,
+            },
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    height: 100%;
+
+    .dv-scr-board {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+            to bottom right,
+            rgba(21, 53, 81, 0.2),
+            rgba(6, 30, 66, 0.7)
+        );
+    }
+}
+
+::v-deep .img-box {
+    display: flex;
+    align-items: center;
+
+    .three-img {
+        transform: translateX(10px);
+    }
+    .red-img {
+        transform: translateX(3px);
+    }
+}
+::v-deep .dv-scroll-board .rows .ceil {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+::v-deep .air-quality {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    img {
+        margin-left: 4px;
+    }
+}
+// ::v-deep .row-item ::after {
+//     content: '';
+//     position: absolute;
+//     bottom: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 1px; /* 边框高度 */
+//     background: linear-gradient(
+//         to right,
+//         transparent 10%,
+//         /* 左边透明/淡色 */ #4facfe 40%,
+//         /* 中间亮色（蓝色） */ #4facfe 70%,
+//         /* 中间亮色延续 */ transparent 70% /* 右边透明/淡色 */
+//     );
+// }
+</style>
diff --git a/src/views/home-env-monitor/components/right-one-model.vue b/src/views/home-env-monitor/components/right-one-model.vue
new file mode 100644
index 0000000..435642a
--- /dev/null
+++ b/src/views/home-env-monitor/components/right-one-model.vue
@@ -0,0 +1,28 @@
+<template>
+    <!-- 天气预报 -->
+    <div style="height: 100%">
+        <ChartsBox :boxTitle="`天气预报`">
+            <div class="container"> </div>
+        </ChartsBox>
+    </div>
+</template>
+
+<script>
+import ChartsBox from '@/components/ChartsBox/index'
+export default {
+    components: { ChartsBox },
+    data() {
+        return {}
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    color: #fff;
+}
+</style>
diff --git a/src/views/home-env-monitor/components/right-two-model.vue b/src/views/home-env-monitor/components/right-two-model.vue
new file mode 100644
index 0000000..a017b49
--- /dev/null
+++ b/src/views/home-env-monitor/components/right-two-model.vue
@@ -0,0 +1,119 @@
+<template>
+    <div style="height: 100%">
+        <ChartsBox :boxTitle="`报警信息`">
+            <div class="container">
+                <!-- <div class="feel-box"></div> -->
+                <dv-scroll-board class="dv-scr-board" :config="config" />
+            </div>
+        </ChartsBox>
+    </div>
+</template>
+
+<script>
+import ChartsBox from '@/components/ChartsBox/index'
+
+export default {
+    components: { ChartsBox },
+    data() {
+        return {
+            config: {
+                data: [
+                    [
+                        "<img src='" +
+                            require('@/assets/image/pro-view/blue.png') +
+                            "' class='table-img'>",
+                        '组件1',
+                        'dev-1',
+                        "<span  class='colorGrass'>↑75%</span>",
+                    ],
+                    [
+                        "<img src='" +
+                            require('@/assets/image/pro-view/blue.png') +
+                            "' class='table-img'>",
+                        '组件2',
+                        'dev-2',
+                        "<span  class='colorRed'>↓33%</span>",
+                    ],
+                    [
+                        "<div class='img-box'><img src='" +
+                            require('@/assets/image/pro-view/red.png') +
+                            "' class='table-img red-img'><img src='" +
+                            require('@/assets/image/pro-view/three.png') +
+                            "' class='three-img'></div>",
+                        '组件3',
+                        'dev-3',
+                        "<span  class='colorGrass'>↑100%</span>",
+                    ],
+                    [
+                        "<img src='" +
+                            require('@/assets/image/pro-view/blue.png') +
+                            "' class='table-img'>",
+                        '组件4',
+                        'rea-1',
+                        "<span  class='colorGrass'>↑94%</span>",
+                    ],
+                    [
+                        "<img src='" +
+                            require('@/assets/image/pro-view/blue.png') +
+                            "' class='table-img'>",
+                        '组件5',
+                        'rea-2',
+                        "<span  class='colorGrass'>↑95%</span>",
+                    ],
+                    [
+                        "<img src='" +
+                            require('@/assets/image/pro-view/blue.png') +
+                            "' class='table-img'>",
+                        '组件6',
+                        'fix-2',
+                        "<span  class='colorGrass'>↑63%</span>",
+                    ],
+                ],
+                rowNum: 5, //表格行数
+                headerHeight: 35,
+                headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
+                oddRowBGC: '', //奇数行
+                evenRowBGC: '', //偶数行
+
+                columnWidth: [80],
+                align: ['center'],
+                hoverPause: true,
+                waitTime: 5000,
+            },
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    height: 100%;
+
+    .dv-scr-board {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+            to bottom right,
+            rgba(21, 53, 81, 0.2),
+            rgba(6, 30, 66, 0.7)
+        );
+    }
+}
+
+::v-deep .img-box {
+    display: flex;
+    align-items: center;
+
+    .three-img {
+        transform: translateX(10px);
+    }
+    .red-img {
+        transform: translateX(3px);
+    }
+}
+::v-deep .dv-scroll-board .rows .ceil {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>
diff --git a/src/views/home-env-monitor/index.vue b/src/views/home-env-monitor/index.vue
index f4130bd..445b79b 100644
--- a/src/views/home-env-monitor/index.vue
+++ b/src/views/home-env-monitor/index.vue
@@ -1,20 +1,59 @@
 <template>
     <!-- 环境监测 -->
     <div class="home-env-monitor">
-        <div class="env-1">1</div>
-        <div class="env-2">2</div>
-        <div class="env-3">3</div>
-        <div class="env-4">4</div>
-        <div class="env-5">5</div>
-        <div class="env-6">6</div>
-        <div class="env-7">7</div>
-        <div class="env-8">8</div>
-        <div class="env-9">9</div>
+        <div class="env-1">
+            <LeftOneModel />
+        </div>
+        <div class="env-2">
+            <CenterOneModel />
+        </div>
+        <div class="env-3">
+            <RightOneModel />
+        </div>
+        <div class="env-4">
+            <LeftTwoModel />
+        </div>
+        <div class="env-5">
+            <CenterTwoModel />
+        </div>
+        <div class="env-6">
+            <RightTwoModel />
+        </div>
+        <div class="env-7">
+            <LeftThreeModel />
+        </div>
+        <div class="env-8">
+            <CenterThreeModel />
+        </div>
+        <div class="env-9">
+            <CenterFourModel />
+        </div>
     </div>
 </template>
 
 <script>
-export default {}
+import LeftOneModel from './components/left-one-model.vue' // 左1
+import LeftTwoModel from './components/left-two-model.vue' // 左2
+import LeftThreeModel from './components/left-three-model.vue' // 左3
+import CenterOneModel from './components/center-one-model.vue' // 中1
+import CenterTwoModel from './components/center-two-model.vue' // 中2
+import CenterThreeModel from './components/center-three-model.vue' // 中3
+import CenterFourModel from './components/center-four-model.vue' // 中4
+import RightOneModel from './components/right-one-model.vue' // 右1
+import RightTwoModel from './components/right-two-model.vue' // 右2
+export default {
+    components: {
+        LeftOneModel,
+        LeftTwoModel,
+        LeftThreeModel,
+        CenterOneModel,
+        CenterTwoModel,
+        CenterThreeModel,
+        CenterFourModel,
+        RightOneModel,
+        RightTwoModel,
+    },
+}
 </script>
 
 <style lang="scss" scoped>
@@ -24,44 +63,45 @@ export default {}
     font-size: 30px;
     color: #fff;
     display: grid;
-    grid-template-rows: repeat(9, 1fr);
-    grid-template-columns: repeat(9, 1fr);
+    grid-template-rows: repeat(12, 1fr);
+    grid-template-columns: repeat(14, 1fr);
+    gap: 10px;
 
     .env-1 {
-        grid-column: 1 / 3;
-        grid-row: 1 / 2;
+        grid-column: 1 / 5;
+        grid-row: 1 / 3;
     }
     .env-2 {
-        grid-column: 4 / 7;
+        grid-column: 5 / 11;
         grid-row: 1 / 3;
     }
     .env-3 {
-        grid-column: 7 / 9;
-        grid-row: 1 / 3;
+        grid-column: 11 / 15;
+        grid-row: 1 / 8;
     }
     .env-4 {
-        grid-column: 1 / 3;
-        grid-row: 3 / 6;
+        grid-column: 1 / 5;
+        grid-row: 3 / 8;
     }
     .env-5 {
-        grid-column: 2 / 3;
-        grid-row: 2/ 3;
+        grid-column: 5 / 11;
+        grid-row: 3/ 6;
     }
     .env-6 {
-        grid-column: 3 / 3;
-        grid-row: 2/ 3;
+        grid-column: 11 / 15;
+        grid-row: 8/ 13;
     }
     .env-7 {
-        grid-column: 1 / 3;
-        grid-row: 7 / 9;
+        grid-column: 1 / 5;
+        grid-row: 8 / 13;
     }
     .env-8 {
-        grid-column: 2 / 3;
-        grid-row: 3/ 3;
+        grid-column: 5 / 11;
+        grid-row: 6/ 10;
     }
     .env-9 {
-        grid-column: 3 / 3;
-        grid-row: 3 / 3;
+        grid-column: 5 / 11;
+        grid-row: 10 / 13;
     }
 }
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index e1c142b..aa48211 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -377,6 +377,8 @@ export default {
                     center center;
                 background-size: cover;
                 position: relative;
+
+                z-index: 99;
                 // background-position: center;
 
                 .nav-box {
@@ -389,6 +391,15 @@ export default {
                         display: flex;
                         align-items: center;
                         cursor: pointer;
+                        transition: transform 0.5s ease-in-out !important; /* 柔和缓慢的过渡效果 */
+                        transform-origin: center !important; /* 从中心点开始缩放 */
+                    }
+
+                    .nav-item:hover {
+                        transform: scale(
+                            1.05
+                        ) !important; /* 放大5%，可以根据需要调整 */
+                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* 可选：添加阴影增强立体感 */
                     }
 
                     .nav-icon {
@@ -430,6 +441,22 @@ export default {
                 }
             }
 
+            .left-nav::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.5);
+                transition: background-color 0.3s ease; /* 悬停动画 */
+            }
+
+            /* 鼠标悬停时加深遮罩 */
+            .left-nav:hover::before {
+                background-color: rgba(0, 0, 0, 0.5);
+            }
+
             .floating-box {
                 position: absolute;
                 top: 50%;