From 1a934eaf7efa860a4358f007477c1f8423cafff0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Sat, 16 Dec 2023 23:38:13 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=8F=8A=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/tunnel/sd_icon_fc.png    | Bin 0 -> 1044 bytes
 src/assets/images/tunnel/sd_icon_fj.png    | Bin 0 -> 1064 bytes
 src/assets/images/tunnel/sd_icon_fs.png    | Bin 0 -> 823 bytes
 src/assets/images/tunnel/sd_icon_fy.png    | Bin 0 -> 916 bytes
 src/assets/images/tunnel/sd_icon_qt.png    | Bin 0 -> 828 bytes
 src/assets/images/tunnel/sd_icon_sd.png    | Bin 0 -> 925 bytes
 src/assets/images/tunnel/sd_icon_wd.png    | Bin 0 -> 925 bytes
 src/assets/images/tunnel/sd_icon_yq.png    | Bin 0 -> 949 bytes
 src/assets/styles/index.scss               |  43 ++
 src/components/content/fanInfo/FanInfo.vue |   2 +-
 src/views/device-manage/index.vue          | 522 ++++++++++++++++++++-
 src/views/site/index.vue                   |  54 +--
 src/views/tunnel-manage/index.vue          | 112 ++---
 13 files changed, 613 insertions(+), 120 deletions(-)
 create mode 100644 src/assets/images/tunnel/sd_icon_fc.png
 create mode 100644 src/assets/images/tunnel/sd_icon_fj.png
 create mode 100644 src/assets/images/tunnel/sd_icon_fs.png
 create mode 100644 src/assets/images/tunnel/sd_icon_fy.png
 create mode 100644 src/assets/images/tunnel/sd_icon_qt.png
 create mode 100644 src/assets/images/tunnel/sd_icon_sd.png
 create mode 100644 src/assets/images/tunnel/sd_icon_wd.png
 create mode 100644 src/assets/images/tunnel/sd_icon_yq.png

diff --git a/src/assets/images/tunnel/sd_icon_fc.png b/src/assets/images/tunnel/sd_icon_fc.png
new file mode 100644
index 0000000000000000000000000000000000000000..d25dc9b553934f140b73747009814f2d0ae6a19d
GIT binary patch
literal 1044
zcmV+v1nc{WP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px&&PhZ;R7gv`muslyV;IGMOEDuEmnN5tPebDanuf?_h6o>Mm`qbHQRD-L44sk7
zXbOc<CY&TbDVJd+QSON$k`HJSQ6{&LW>7LN&GN3@yO00b=l|dPoYHw~w>#(mzVG@!
z&$HHgo-L-aZ0`=71)K>S0~`kIQ;+@%d<lFAyav1?>F-h3YS;$b`vTViR|1~_FP0a0
z5BLJuQP1uN99{rVDB$M+M*t528zueHb$=(Y?UlfTz&pS#l0F|5MV{MU1l$Rn46K&4
zx$WE(VB7iM?ZAa4vWp}o!Wl2y$-v{l6Tmu2ZeB78xPm?j91NT<>E{_EHV)XH4?GKe
zpFo=6gTQwHOMx>a{WYTgAzV1HL()H8du{JgNw=l!yS2Y>0=U-n9^kmHNNw*8Tm!5s
zksJl=2J8YpE~I)27?<?>;7ioVKLFPDYu*E{><w#Ibk)>$$np$u(2z`g2dtFzehYYN
z{#;lew)cV814l{<lcy}(CzTSs0n91Uep)nqUt#U*wRZE8CEyC+Two_~s-#3XY1t0L
zw@O;CY7XB5%i1Jkd#|e75N<rW?y9Nn6_v>$<swOcG?A;+-Ub!~IHDhubV^6GHvspB
zon09jxcq`Dp*4~=wnY6Fupz+r1K&v6&;h&!I1yMVY1?$<Wjm&0Nm0mPy2pS+1N<&<
zqoizZtM7JTo1`VSmz6X<3hdd~7}@3gX4{*9OMq*En<VYu0vwXw9pE2<qb23L4LD?p
z@rO83Kulq76Ijwu_1PRrf7-qnctle31$#$q9|(LB;9NYf%P?$z1$^D-fb9cH>R$!Y
z93GRju8<~fcUhlIwyy`Smb9=X;uy+r(*cg(o>v;i{KmyGl6-!Uw99rc(msgo7fQOf
zOS*Iz@TgQT2cEB;CUP3OY^PU8>&qp*+yXq2>QUs1$$V65b_lRoQZ%1h#SGSz!64D~
z(q8QIHsGcFE$R3U&P<SNsGKTDrjE47Oc|$1+SyNU_3vKVft!Ief@6#3w{`$WPNNN^
zQMc8=1I1bs>8iB2zI-Z^<63!km86He>S24rK+@hiEwg!n?P&P&I9cgJW47nk=$DjC
z#0ob_%JbGW$uesyhc<~u)RDrQ)yXo}jF*>L0HhnG*)MIfyM<W)HHiwGhCZ|{Ho(Km
zbe@ncF15C{%G9+-ypGyVZHpB=Epg}|&;Vathro2M==XF<QAZbO+-~Y1(713WqtDsJ
zI`7J0DCy}Tpu<O>8g(=~`@>!Xe0Im%0qM-{KtBLJ`#)g@Uf_TK(e^LD83rmkEY=SI
O0000<MNUMnLSTX&3+=%G

literal 0
HcmV?d00001

diff --git a/src/assets/images/tunnel/sd_icon_fj.png b/src/assets/images/tunnel/sd_icon_fj.png
new file mode 100644
index 0000000000000000000000000000000000000000..497865f7928a67e544f3c60b4a5d9f4a7eaac277
GIT binary patch
literal 1064
zcmV+@1lRkCP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px&;z>k7R7gv`mwU*cV;sgmS2+|JbI56Gh4^D84aFSFoR(9fh=oKFg*02SOeV3Z
zH5z}BoJvI5EK$znd|Hc8)1(w(e=Nr?_w~Bpx95F+&-44eE4}wWzj~hMzOVcH{a)Ag
z{r<!hmhByZGl0{9dB7pS?se;Lz&F5$z{|i(lKvWXtcHDHdk^47;9B5IU|qSuyTI4L
zFLm!s;LrkiTme5DI2?EoSS{(-zVmy5ZC?mH0K5g<D(S0HQRKbt!+^Vh6M*X_J=3*s
z0N8e(-3eS$BD+*lBHZp}I~jNacoJA9$<0G10awtcfc=3BB>lAAh>Z=l_XeH?en=oq
z@HX%Y;6&gwNq@FMZO;PE1$G5CNZL5+Vzzgxq<d4+ZR6ih0N0w{3mn@OsqKq_`^)<m
zfiU?z;Au&VrvRSF-v@3PulX2oWp7w}epgLx9|(L7ERghR-7^Dtqt@?*DS)Tu&xQ42
z`#A7&U`|P0m^`p-UsKXGU(#jGmqp)U?>0&K9l30W;Tt6_S2c(4fs^_qV|yvEkEEMh
zz>fm2Rmq(K><MfJ)=S#j!I4NUS(+8#h<>r8ll!i0`y61Yr1>r2kn0~{ze=DjC7nlB
zcUx4xkCRPWwqGygTp8dsz!pg>hXBViV~bZ6V|WEPvjW@>+)*N3BWc_Ce%lLx$npqD
zKejF#G9DD*w}B;+;!wTIc6|EbBBzh5&R;DlJ{8y`X;DXHF^@>-p%!o)?VbSVMsquE
zwnLn&f+VHy0awOYfa8lM|F)fPB9l1N`W8U!cC(~at>^njAp!m!n9(*2+mD3=_29YD
zcQO7nja8DCG}4-bf0lH2<5>>>q+E8Pq|aKwF_f*Hz_yPmt?%)gi9Z?#o>hH3CX<MB
zNJ^A8nG$S@ynu^<wOzcad&YnVQf>PNV78>2I%*fwKdL%dNOV9+{}*9uAynkDOC%#H
z+!<K5CsI8?F5B1Ta7khD#In6J@O&Kz;=2J1%Qqx)Ny~;2H1BLrkZV9rrM?H3!{4dC
z{axLVjunZddCZfvSEB@Z7Xs#a3}l!(BBy=>v3+%I=mCo_rz@=mKFCBOX<;iHj{qM@
z3Y&)kPZ&tdq0=&px6Y}vRtUB((Nz1K*<^Oj$m(iD_w}LH>Eu7lteb{5iB@En7kyq4
z_mVWmc-yn9&eOemd-S9xQ8z}Py=}1t9MeczqwDnM-D(+DND5y%R~>~Wx5Wycme@N8
zv`@2rbXsK@1T)HJr2TdXX!jt{VCT@$XOvXB-j5u8YSgLu^bdOt@aY|ITO^v^fxZPk
i{eNLv7x>@*wEYVuzWf`SdZqUO0000<MNUMnLSTY%9Qv#P

literal 0
HcmV?d00001

diff --git a/src/assets/images/tunnel/sd_icon_fs.png b/src/assets/images/tunnel/sd_icon_fs.png
new file mode 100644
index 0000000000000000000000000000000000000000..c71960db54144f4351a981725ba46eee923b06a5
GIT binary patch
literal 823
zcmV-71IYY|P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px%@kvBMR7gw3msyC7VHn4Me`_IIvc;V}xgkZiWVvx8+;C-#A{1p%LrqzlF-S7G
zKq=b|S#m+#Ft+3hiMS(@eXc}$e9w5!aps$|%xR|Mt!X;v``-8WJn!>=mLoc_%&aG{
z7+3^M1;zjaV(WL{HSid?3EYtMtJJY7_JWxW1U3WfffvBF#DE9DE8uJF9R!R`fHM;K
z5?}&w3^*+5TcPs{g3W9>a1^);)Jl3;$_syPX5)dqz${>+qzn1>wF8@(f43W0nRvEJ
zl6zS8GBdw{v%ooEmn6$QqzyQr=YbKxGD)AxCgyA~vmwAm;GH{?3r~ah0JDLGl74mu
zn%Qe+y+U-&l6Gdk&w?YS`+@0&JPmap2R#1G5sELR3=Gd70oyV$Zv}^XUA0S##njAp
z0Q-Q4iNdEPX>~?YRh&@^Yyf%y4U!J#8Wb_V<f?bIXTWv9WJ&Hx!DVLtUSCNyiTAGD
zwUUOK*(TsfqKl`AFuMbjfNDu6Q*c-KGf8!d>w62#>1fJ?hq++S>-WGspj(7tuq02d
z?21&o1B`O8Cw+~ix%pf*v&JY8xsP2i3p`yUtv0iI;HsqiVU&N~BB^)!Of$Qk+*+f9
z{fgd5azMLfX3v3%sRzH40&y$E^*QC0m)Cn<QqvxXQ8mD52m4FgC3%Hvv&`%O(B`^I
zDL5$@<KnMfj05Zyt--+`fGLvve;VvcFBkj~sF!r8zzq%qo;dgi(7&q+MyVT#g3|I|
z!NsoHJCet&oaMdvN+Q@bl3MbFFMHL+#MO`|l}Z`WCsOT%q;+|~S#fn~I)!qZqPq>x
z1NL<4ngS9qAA2rKYBDniukdnOtblmJcdBFt_&P8@8purGl%(oZaq-mrTQXx)IZdLU
zq^(I>c$e}b(dw0%jRa1|?BzyOrDrZP``095lMi*BYKx^5m$xkj+*@L02Z4;WW>)#p
zC%pEUSAN*bfme3CO-aA91APi!`JXT;1G@Z2+aKv*w;PE$qbUFY002ovPDHLkV1lvl
BfKvbf

literal 0
HcmV?d00001

diff --git a/src/assets/images/tunnel/sd_icon_fy.png b/src/assets/images/tunnel/sd_icon_fy.png
new file mode 100644
index 0000000000000000000000000000000000000000..48b61e32b3b23972b70691da14c006a8bcd4cdb6
GIT binary patch
literal 916
zcmV;F18e+=P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px&PDw;TR7gv`mr1N<Qxt{2HNZghN|P{C`er~R5^Z!71Kj{M6OvMzm^>t!R4Ag<
zL@E*kVuVVB5D|$WLJ>_&Na+nEL=$~8&_tHAp8Y@n`|I9!?~BSilRx>-IeYEB&)RG6
zD@H8aI|1hc=K#k8hX8xj)t`Y+fwzI@f#)RsHDp#x9k9J8a6NDp@FDO_bKrI06X3_X
zyBDy!0iM*r&jStz?g#Fb^i!YxUSQi71NQ;10yj(gXef&8+dd4q6F3>TM$+S5_qGGJ
zo&W9tE^Cpkk(3CRy=*4~j{uJXw@UJ~kww4-x&=58xJc4>%SN2KV0&NS3E;~FG7UZp
zya6}`I9t-6{|9t(*Y?gux~-CKnf$*1TyJ_0aAIGi#qI}yy#LmEiXVm?tjOO2ZkW9J
zJaDl$ti52VH?@5ea2N1KWB3WJtR9wh`4Dhn<jtQ9>%;a5@Ot2ANr|L)+0MCLCC#-I
z#(^s&?PvQ);K642IN&K@t)yRP4cQLEw@F&BO5Yd2sbfo~B1p+x2^>&0{u}UgN(gvN
z(z*`dl-euJ$%6u%qMws=T34vHH<dt4Z-+2vRk@_}Qsb*7eP;XWDxWyC-Ln01%i5*@
zZw5Y>6o9US?*m87Z2a8>;)NpD_qJC_`nEE0Z3#{v@EmY(fL{Y{loW;P0=^^%#}EkE
ztx~<EIg-e`>_yQw2KXD`SV{TqIv8C}Qy8=UXe14RLaw}dm%aUgcLV%8u=|b@j3Mtz
zP<|N%wjJUeI%Kf+qsMQS9(>&safmq&Je2CF+1OM^7fx^L_pGEfL#bYpTq7f0IA%La
zwo%fmA#yEQPGf*=9|JrT5o$Gk>3p3^`}6>(oQ4HtBygT0TK_?e*7%b$>|*tTfMlLp
zwq(v)w7s?($j7Z*E|ioWylB;Q@~>oOr^J7-NldIX**gQc8_4~L&r2gS^IwxF;0$$R
z+Tu|mPC8j+vB1(Swv_|#^*K<Z(BigO;Ax4SgMjUfLbn6w*O|?dqEgA$F2HqZ^3@V=
zll0ZJ1HFU5R0=ysAKUM=k?2KWgQU)hqcxkofs8h1N=jdzUxTAh9m<=n{IE9#zOv)(
q%)6}YKtBV%@}Dp>4(#xcwtoQrgRC12-R#%^0000<MNUMnLSTZ@=&%p~

literal 0
HcmV?d00001

diff --git a/src/assets/images/tunnel/sd_icon_qt.png b/src/assets/images/tunnel/sd_icon_qt.png
new file mode 100644
index 0000000000000000000000000000000000000000..5dc011ab5471d416281479b009cfa5fa84bfed31
GIT binary patch
literal 828
zcmV-C1H=4@P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px%_DMuRR7gv`mrIC_Q5eU6f5nPHl$4njp=9G;ZX1lU5et_Mn?a2z4U0ijSTLJ$
zsfmSHFcu>Vgsj|BvLT9CAyIOfp<EV^^Kib;H|Kj_?~KcLHeY@3d(Q8<{GaDMujt1z
zv%$a;U@<Ta7!M4OTR#9#fxEy};EJSgMaSxQFPPZ~U@Nc*cm!Ms2HXao0Po`7k-&ri
zoD<;7fJs0n&>`u4-uby;Gg}E90d4}Vk{%a%;m^%%BCrpb3p7jW&e~T6HZ%Wk53nY9
zwpNmRIN)Vw9)VN9X<(Nmt30F+I6}LCvA_yRZw5@P*kER(fwRC%ccc=Yg7*URfJKtN
z{tdLW*UW}Q(cO@=v-E!%9CLaAnEAJ!rUpmP?*Q9NIsXBU>UGsF|I?fnMJML`oU7i|
zUIMoPQzW^P|JyP%SNH=-ZHmp|1u(y;WX!A)I2JA2AnDRTtc<009T?|eFZvcq3yKag
zvuD8S_+FQ!1~YR(ZUGKfiYM<ZGrI<~JNOXrTvB_6D7+DD1`dZd*qQ_G1%?72B@OF`
z@hw2TgKq&lBzcGGv&^g~w8~XM5N9OSnc31%<3}q)9a81Sd0X}F){(r^B<XVHp=RbC
zZNGzG15+jWZwl_?agjH%LOdNCfr~Mc4GDM*aNoh7fx4oGk>hPueq%c7Bg|8ng1w>i
z3<R7dtg8HG8JKun2Iq!4*^mYHR5V9L?~eH{i!m!TW>yY$uDB9#m9TQe=*sSOG3J2F
z;>s<j{)j0t&LiL|ZuIiY0ed+WHxM&h7_POZc(IQP&E`|+>G$F^azc`iK4~=!0wzm(
znDMOKKzyFcY?)?uGR|5a75C&-$fu7wvw-#9-+|*{4m%&mAs5c<5bA9Xlr%kwh)*X!
zTV|}i%uB+|+|zDJZ*#&n16T)mRJ?55Q}@!Rj!sEm67a7}B7%LWtNpbY;eI97b`U6q
zBi=N%9etwLp7Yuddlm57j<<;dYdg><@Y;XEBnJHRkGAhivAi2TybH$w0000<MNUMn
GLSTYte|yRR

literal 0
HcmV?d00001

diff --git a/src/assets/images/tunnel/sd_icon_sd.png b/src/assets/images/tunnel/sd_icon_sd.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f1ea3c16ba2851aebeb95afb67472a9106622f9
GIT binary patch
literal 925
zcmV;O17iG%P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px&S4l)cR7gv`mrdwZRTRa43rZ8B6od$@Aj~35!cY(@ZD2;FAU3HWloClQoM_nx
z2o+>bB8&v72(l(g5e@o)vQm^%i)vsWGb511^dDK)V0G7@^IrFVeIHkhci{1O_nm##
z*?X_O_P(OUvVAVF1h@sb9+(MSSWHg<KLPuJkAM#({WI)X4ccIPDzFZC05}A^S6yH)
z@FVbBv7H87Q2{Qf!0!OA0$u{1mvp?}`F(+H-wA95b_0(~`hJ)f`QP@Hz%#%Nz=M+B
z>ScEtu<bm13b?!S>>f$+@Qj!3L|_N-2JoaL*AJNhTtMFhE(TUeI(o*4H3Qqzft|oF
zaik931b!O05m+qg@3R5z*xH^{NcXv<Cpyo&z$K^80rSt+)8>VX=U)IDIyoN)F6<3!
zm$%8O?ekJLz$xJNHsw=t{&rX&ws(Lx0oO<hle^3I0bnk0P*Uo5eA#{#SXq8<mGn?c
zyD<DaNt;x};b-8cHYH>GeqcLr3|I}kmO7X8`Y=wEQu_>;5#SX4dPxgg7|sFq0U^w7
zl0LM(qJS@u^lghXJ_WV}_yypwq%A{K?EE5&5r~bFo~?yGsk#f8CuwZRIqQK-0=x%!
zL{b!L!YVl?`L(?bSOdHxX?Y{3;Y#ZDgrrr42jR!KZDVf~ZF7K+0CObeyXUffE$}t)
zD{!@><hOarXm&!qOwz#tXI%t*6X3sq3kC^>?H7TyB{He?eiwWgm@O%h>9;5R7#j#&
z)m~cM65DAIv+|LY&eZSF%c4?}X4%g7;vSLd0=EhEpFl)oax*fvlhcqbVCmaqlBTo?
z^&oP+FX>j>>8ok{mr6R^IkbRAe}9*Bo$bqu*i5xOZrj7-F1d!5lkHD{MZlw#H=Ap~
zKUDgA5?CeaE8CA{N|BVk{nC+gY9}DYvsVhp&5|PcO;)FDc4cCb^zs1Uu7D&j10~b;
zIhCY-Tw3NIRlXx0Y4EX|QN&|o$^=;0uW3w>%-qa&&n8j7b!lzymf5P8Ltg?*hv>n7
zO`-s2s5`AK)|IR5i|6+N_okagn9^;ksWS~?d)?C>wi$&cw#9O2TH<I2ff`FkKl&7}
z6S~n4do}RUj<*dKk9MGMfRFwarg4G){iW?+rc2}-X8S&d00000NkvXXu0mjf%-FD^

literal 0
HcmV?d00001

diff --git a/src/assets/images/tunnel/sd_icon_wd.png b/src/assets/images/tunnel/sd_icon_wd.png
new file mode 100644
index 0000000000000000000000000000000000000000..7fa69df652b1d4e39359064fcc310d0d17149a8f
GIT binary patch
literal 925
zcmV;O17iG%P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px&S4l)cR7gv`mtBaIRT#&Ae=yTXQ&=fW@029O3#A1s(=bhzSc$x<?gT$TC`e1F
zbR`ATf)qhk=q~N1h(g3tF-;Nt=psZ4yIT{31+_w#y7+gV^~^NBJM+FfDD&P7GjpEv
zJOAfAU#}R&WBUQ%C15Eq510Wwl1*;{zX9igBfxi({;k?pWeaRi0^S1F0>1zU(*e!^
zmx1fqb}}$C0p}<9%fKvPFYu|P8?E+l3AVig*aMsb-jnoem5TV^_LIOi;5lHOq%WJ<
zjR4z@-#!FhOUhoC6bjpZY=;N-0|$T)B)M^uyTBRx1uzwORnlPF#0CS~UBFks)ezDM
zFM_uM3xFk({<#-u&DQqV9CSZQdcXF29h~oU2hd%n)b?Y*$2pK<p9r}1lCHHnXjXm}
zc&B#f!{8jf5w)+B-Kp*Iz)z7f!1fH<m{V=8q}wI%xbv?g>Lc1~;67lsq=@8}kL{Jf
zYDwLVi)@FQeo3EI*hhq4l+>qO9IgP*7gNUe1z>Kdlr+!wC%^<rs|w(Kz+aNyF4`2<
zMXH?yrUf{XeuJciRl#I?S90+<NvjJR_5(wb-W<gqCxD#+-VF>$+F3MeqPP-VrZ~sb
z24H%CPXq5tiV9WwG%B{eCaxjeZo3`DQPDmM@E^b&N%7eZcylxiNxf}?9|e96@DMPu
zS;4S<6j+>!%CY2;7j1u@n#PTk=j&`Yf}^HSlJrK=rpfh1LHV;3TnL~zz@a!uTuT8Q
z?mGtbNQ%$0l&phC<?2-QqiCFx6b&SbPF->SzA2T)XHx-+zFh{cySim?+5TQqH2(la
z!+%QB?=8Sj0GA{U4+yr8NLtdw)%D<NnN9^)|DF1Cm!u)v4+aF7k^}6r?QyC94oZ5s
zLUE*1c>%F~NK#K$@B^?V6`JF=$D|Gxo_ZX3M$&-o7n0D;k{0FlM<XDcD6SWfn5UYS
z%!1<OK(w`ml5Q3LdkBaPw@Uh^mEt^|+$ov)bfaw&(UF$r1B3_S35C(e52tI0PE{6I
z|2K&Yj-jryE#|eoc>sJm6VBzq?%N9J$hMd_jFwnA2$XGJ;^G*AMh*fsgA_EKAAPdw
zxbw~rdkyf;j<<yr>FhvXfOq~Crf`7!{?hgzxq$*IV+(!f00000NkvXXu0mjfU{J8{

literal 0
HcmV?d00001

diff --git a/src/assets/images/tunnel/sd_icon_yq.png b/src/assets/images/tunnel/sd_icon_yq.png
new file mode 100644
index 0000000000000000000000000000000000000000..36711a8b2706dc775287ff0e8e6366edc0c4ce0c
GIT binary patch
literal 949
zcmV;m14{gfP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px&Z%IT!R7gv`mu=|Xa~Q@ymqrmo)L3Ser<J^*FnL(nCdG?IUXV8)LP@Bhjcko%
zOCGYcNm)YLMtLaO3(t|Lr3v%cCL#^97b0E0*WdT|_uJX|opb(8=YDhQch3F0?uYBX
z?)!)l%=W&(1;9e!G~hVk;OhDt@FnmeunBlg(qF?~t3f}oeF$(fa0Boe@Nx;@J>U!A
zm+E^caC`xrTfi>@P68eS9+LEH*ZVtxZC?sJ3cLd>mGt?rEb_hW6M=hyvw<5WZRqE>
z2e9otTLD~NGP^=jGMuv6P6eI@o&oNX<n~K;1FoRY0!IRuNcwroh%E=(hXWgd?~_Oy
zychT$;2dCqq(AotwDGmQUnSk!lJ0DtPXgDTt^`is+e~`{u9<%T+}8Ab0=Tj_tX(v$
zr?zhaZUruuw0YF3)SkZ()`#s4@G{_JNnvuQ*}fil7<eBDd*@2}W(we8_!ddaRK?*t
z;M_qYWBWqjMc``SIp7W8AmB_%yG8-8qxKeXRDd(|izS`c<!t-dQreGzwUX|r?U`Ah
zy)G%EH<H<Y6Id1CM@kmkC9Ue`X?vfVUD`5F(%&t{E{H_ddCwRQHQS4USpj|*xLr~d
zY7eu0Es)^Cfv@^7c6DaH2*nAKb`C?f9Ywo8z&`?~NXqAKW_$mt%j=5pFYO2{TK#o`
zD*|!%2*5Ldj|2P%Fuk8(*iP>r2WAhNZQDzLn<O1E0&oOn=P=-xfGF73vT<fex~kRR
zqf4)z0M4i@aiyeJZO;SNm2#$9(daepV5*W$01qnlPr!Y^@~lQl5&a3Xo!vXX_0mm}
z7TOM1UID(1ucTvofG11cNv_(4kShZ7q@--E1~^2@Y{vrjyQJy1qxGLub(<q8#GAA>
zxjM(mc6M;oCUUw&(wv@*6Ho&@k#ViYWkp;b0M3%My$3ksG+02&noNnWD@v8fn~S5#
zxZUGO=rx4{+iYh8U0Fx$)Arogpe6+*_f%iWw0&SD&W^gDe;9$a`Ax&_9g+@fRVn)Z
zuVmIJI+uj)S!K?jk3axVRmW)aY~cLpwxspL0;)LwEs6RdM_uPyv^}jkh03Bh6*vIc
zRu}w(qim?YYq5f7C64zHX!T(Hr%%l~Js<zE*8(5!dD}DS<2~qmz{md=rYC^^{ZHFJ
Xb=cDz)WD|<00000NkvXXu0mjfFFnl-

literal 0
HcmV?d00001

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index bff6690..0908987 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -6,6 +6,11 @@
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-position: center;
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
 }
 
 a {
@@ -402,9 +407,13 @@ body,
         font-weight: bold;
         color: #08b7b8;
         letter-spacing: 3px;
+        p{
+          line-height: 40px;
+        }
       }
     }
     .el-message-box__btns {
+      margin-top: 20px;
       display: flex;
       justify-content: space-around;
       .el-button {
@@ -485,3 +494,37 @@ input[type="number"] {
 .el-checkbox__input.is-checked .el-checkbox__inner::after {
   display: none;
 }
+
+//取消 确定按钮
+.btns {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 80px;
+
+  .cancel-btn {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    width: 220px;
+    height: 80px;
+    border-radius: 11px;
+    border: 2px solid #08B7B8;
+    color: #08B7B8;
+    line-height: 80px;
+    font-size: 38px;
+    box-sizing: border-box;
+  }
+
+  .sure-btn {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    width: 220px;
+    height: 80px;
+    line-height: 80px;
+    background: #08B7B8;
+    border-radius: 11px;
+    color: #FFFFFF;
+    font-size: 38px;
+  }
+}
diff --git a/src/components/content/fanInfo/FanInfo.vue b/src/components/content/fanInfo/FanInfo.vue
index 73d3c1b..0a36b88 100644
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -447,7 +447,7 @@ input[type="number"] {
               border: 2px solid #0f82af;
               background: transparent;
               margin-left: 14px;
-
+              outline:none;
               font-size: 28px;
               font-family: MicrosoftYaHei, MicrosoftYaHei;
               font-weight: bold;
diff --git a/src/views/device-manage/index.vue b/src/views/device-manage/index.vue
index 0e15dc8..dd2d39f 100644
--- a/src/views/device-manage/index.vue
+++ b/src/views/device-manage/index.vue
@@ -13,11 +13,9 @@
     <div class="device-content">
       <div class="device-box">
         <div class="box-left">
-<!--          <div>风机</div>-->
-<!--          <div>风压</div>-->
-<!--          <div>其他传感器</div>-->
           <el-menu
               default-active="1"
+              @select="handleChangeMenu"
           >
             <el-menu-item index="1">
               <span>风机</span>
@@ -30,8 +28,185 @@
             </el-menu-item>
           </el-menu>
         </div>
-        <div class="box-right">
-
+        <div class="box-right" v-if="changeIndex==1">
+          <div class="device-title">
+            <span>风机设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <span class="units">
+              <input
+                  type="number"
+                  min="0"
+                  v-model="collectionFrequency"
+              />
+              </span>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe
+                      style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
+                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
+                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
+              <el-table-column prop="name" label="设备名称" align="center"/>
+              <el-table-column prop="currentA" label="A电流" align="center">
+                <template #default="scope">
+                  <el-input placeholder="请输入A电流" v-model="scope.row.currentA"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="currentB" label="B电流" align="center">
+                <template #default="scope">
+                  <el-input placeholder="请输入B电流" v-model="scope.row.currentB"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="currentC" label="C电流" align="center">
+                <template #default="scope">
+                  <el-input placeholder="请输入C电流" v-model="scope.row.currentC"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="state" label="状态" align="center">
+                <template #default="scope">
+                  <div class="switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click=" scope.row.state = true"
+                    >
+                      启动
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state = false"
+                    >
+                      停止
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="isVisited=false">
+              取消
+            </div>
+            <div class="sure-btn">
+              确定
+            </div>
+          </div>
+        </div>
+        <div class="box-right" v-if="changeIndex==2">
+          <div class="device-title">
+            <span>风压设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <span class="units">
+              <input
+                  type="number"
+                  min="0"
+                  v-model="collectionFrequency"
+              />
+              </span>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe
+                      style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
+                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
+                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
+              <el-table-column prop="name" label="设备名称" align="center"/>
+              <el-table-column prop="offset" label="偏移量" align="center"/>
+              <el-table-column prop="unit" label="单位" align="center"/>
+              <el-table-column prop="thresholdValue" label="阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="state" label="状态" align="center">
+                <template #default="scope">
+                  <div class="switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click=" scope.row.state = true"
+                    >
+                      启动
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state = false"
+                    >
+                      停止
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="isVisited=false">
+              取消
+            </div>
+            <div class="sure-btn">
+              确定
+            </div>
+          </div>
+        </div>
+        <div class="box-right" v-if="changeIndex==3">
+          <div class="device-title">
+            <span>其他传感器设备管理</span>
+            <div class="collection-frequency">
+              <span>采集频率</span>
+              <span class="units">
+              <input
+                  type="number"
+                  min="0"
+                  v-model="collectionFrequency"
+              />
+              </span>
+            </div>
+          </div>
+          <div class="device-table">
+            <el-table stripe
+                      style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
+                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
+                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
+              <el-table-column prop="name" label="设备名称" align="center"/>
+              <el-table-column prop="offset" label="偏移量" align="center"/>
+              <el-table-column prop="unit" label="单位" align="center">
+                <template #default="scope">
+                  <el-input placeholder="请输入单位" v-model="scope.row.unit"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="thresholdValue" label="阈值" align="center">
+                <template #default="scope">
+                  <el-input placeholder="请输入阈值" v-model="scope.row.thresholdValue"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="state" label="状态" align="center">
+                <template #default="scope">
+                  <div class="switch">
+                    <div
+                        :class="{ active: scope.row.state }"
+                        @click=" scope.row.state = true"
+                    >
+                      启动
+                    </div>
+                    <div
+                        :class="{ active: ! scope.row.state }"
+                        @click=" scope.row.state = false"
+                    >
+                      停止
+                    </div>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <div class="cancel-btn" @click="isVisited=false">
+              取消
+            </div>
+            <div class="sure-btn" @click="handleSubmit(formInstance)">
+              确定
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -40,10 +215,179 @@
 
 <script setup>
 const router = useRouter()
+const collectionFrequency = ref(0)
+const changeIndex = ref(1)
+const fanData = [
+  {
+    name: '一号风机',
+    currentA: '2342',
+    currentB: '2342',
+    currentC: '2342',
+    state: false,
+  },
+  {
+    name: '二号风机',
+    currentA: '2342',
+    currentB: '2342',
+    currentC: '2342',
+    state: true,
+  },
+  {
+    name: '三号风机',
+    currentA: '2342',
+    currentB: '2342',
+    currentC: '2342',
+    state: false,
+  }
+]
+const winData = [
+  {
+    name: '1号风压',
+    offset: '2342',
+    unit: 'Pa',
+    thresholdValue: '2342',
+    state: false,
+  },
+  {
+    name: '2号风压',
+    offset: '2342',
+    unit: 'Pa',
+    thresholdValue: '2342',
+    state: false,
+  },
+  {
+    name: '3号风压',
+    offset: '2342',
+    unit: 'Pa',
+    thresholdValue: '2342',
+    state: false,
+  },
+  {
+    name: '4号风压',
+    offset: '2342',
+    unit: 'Pa',
+    thresholdValue: '2342',
+    state: false,
+  },
+  {
+    name: '5号风压',
+    offset: '2342',
+    unit: 'Pa',
+    thresholdValue: '2342',
+    state: false,
+  },
+  {
+    name: '6号风压',
+    offset: '2342',
+    unit: 'Pa',
+    thresholdValue: '2342',
+    state: false,
+  },
+  {
+    name: '7号风压',
+    offset: '2342',
+    unit: 'Pa',
+    thresholdValue: '2342',
+    state: false,
+  },
+  {
+    name: '8号风压',
+    offset: '2342',
+    unit: 'Pa',
+    thresholdValue: '2342',
+    state: false,
+  },
+  {
+    name: '9号风压',
+    offset: '2342',
+    unit: 'Pa',
+    thresholdValue: '2342',
+    state: false,
+  },
+  {
+    name: '10号风压',
+    offset: '2342',
+    unit: 'Pa',
+    thresholdValue: '2342',
+    state: false,
+  },
+]
+const otherData = [
+  {
+    name: '风速',
+    offset: '2342',
+    unit: 'm/s',
+    thresholdValue: '2342',
+    state: false,
+  }, {
+    name: '氧      气',
+    offset: '2342',
+    unit: 'm/s',
+    thresholdValue: '2342',
+    state: false,
+  }, {
+    name: '温      度',
+    offset: '2342',
+    unit: 'm/s',
+    thresholdValue: '2342',
+    state: false,
+  }, {
+    name: '湿      度',
+    offset: '2342',
+    unit: 'm/s',
+    thresholdValue: '2342',
+    state: false,
+  }, {
+    name: '粉 尘',
+    offset: '2342',
+    unit: 'm/s',
+    thresholdValue: '2342',
+    state: false,
+  }, {
+    name: '二氧化碳',
+    offset: '2342',
+    unit: 'm/s',
+    thresholdValue: '2342',
+    state: false,
+  }, {
+    name: '一氧化碳',
+    offset: '2342',
+    unit: 'm/s',
+    thresholdValue: '2342',
+    state: false,
+  }, {
+    name: '二氧化氮',
+    offset: '2342',
+    unit: 'm/s',
+    thresholdValue: '2342',
+    state: false,
+  }, {
+    name: '一氧化氮',
+    offset: '2342',
+    unit: 'm/s',
+    thresholdValue: '2342',
+    state: false,
+  }, {
+    name: '二氧化硫',
+    offset: '2342',
+    unit: 'm/s',
+    thresholdValue: '2342',
+    state: false,
+  }, {
+    name: '硫 化 氢',
+    offset: '2342',
+    unit: 'm/s',
+    thresholdValue: '2342',
+    state: false,
+  }
+]
+const handleChangeMenu = (e) => {
+  console.log('切换', e)
+  changeIndex.value = e
+}
 </script>
 
 <style scoped lang="scss">
-
 .tunnel-bgc {
   padding: 85px 0 0 0;
   width: 100%;
@@ -89,31 +433,189 @@ const router = useRouter()
   .device-content {
     display: flex;
     justify-content: center;
-    padding-top: 246px;
+    padding-top: 220px;
 
     .device-box {
       display: flex;
       width: 2194px;
-      height: 1321px;
+      height: 1500px;
       background: #064B66;
       border-radius: 20px;
       border: 2px solid #05FEFF;
       box-sizing: border-box;
 
       .box-left {
+        padding-left: 24px;
         width: 300px;
-        height: 1318px;
+        height: 1498px;
         background: #0D5A7A;
         border-radius: 20px 0px 0px 20px;
-        :deep(.el-menu){
+
+        :deep(.el-menu) {
           border-right: none;
           margin-top: 261px;
           background-color: #0D5A7A;
+
+          .el-menu-item.is-active {
+            background-image: url(../../assets/images/device/sdgl_xz.png);
+          }
+
+          .el-menu-item {
+            color: #fff;
+            height: 90px;
+            font-size: 40px;
+
+            &:hover {
+              background-color: #0D5A7A;
+            }
+
+            &:first-child {
+              letter-spacing: 120px;
+            }
+
+            &:nth-child(2) {
+              letter-spacing: 120px;
+            }
+          }
         }
       }
 
       .box-right {
         flex: 1;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        .device-title {
+          margin-top: 60px;
+          line-height: 61px;
+          color: #FFFFFF;
+          display: flex;
+          justify-content: center;
+
+          > span:first-child {
+            font-size: 46px;
+            font-weight: bold;
+          }
+
+          .collection-frequency {
+            position: absolute;
+            right: 102px;
+
+            > span:first-child {
+              font-size: 38px !important;
+            }
+
+            .units {
+              position: relative;
+
+              input {
+                width: 166px;
+                height: 50px;
+                border: 1px solid #05FEFF;
+                background: transparent;
+                margin-left: 14px;
+                font-size: 35px;
+                color: #FFFFFF;
+                outline: none;
+              }
+            }
+
+            .units::after {
+              content: "秒/次";
+              position: absolute;
+              right: 6px;
+              top: 26%;
+              transform: translateY(-50%);
+              font-size: 35px;
+              color: #08B7B8;
+            }
+          }
+        }
+      }
+
+      .btns {
+        width: 100%;
+        margin: 0 auto;
+        position: absolute;
+        bottom: 70px;
+      }
+
+      .device-table {
+        margin-top: 50px;
+        margin-left: 97px;
+
+        .active {
+          color: #FFFFFF;
+          background: #0f7da9;
+        }
+
+        .switch {
+          margin-top: 22px;
+          margin-left: 60px;
+          display: flex;
+          width: 200px;
+          height: 50px;
+          border-radius: 6px;
+          border: 1px solid #05FEFF;
+          overflow: hidden;
+          color: #51A2B3;
+          line-height: 40px;
+          font-size: 36px;
+
+          & > div {
+            flex: 1;
+            text-align: center;
+            cursor: pointer;
+          }
+        }
+
+        :deep(.el-table--fit) {
+          width: 1700px !important;
+        }
+
+        :deep(.cell) {
+          height: 80px;
+          line-height: 80px;
+          color: #fff;
+          font-size: 38px;
+        }
+
+        :deep(.el-table tr) {
+          background-color: #1C5971;
+        }
+
+        :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
+          background-color: #1C5971;
+        }
+
+        :deep(.el-table__row--striped) {
+          background-color: #13849C!important;
+        }
+        :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell){
+          background-color: #13849C!important;
+        }
+        :deep(.el-table__cell) {
+          .el-input {
+            width: 180px;
+            height: 53px;
+          }
+
+          .el-input__wrapper {
+            border-radius: 6px;
+            border: 1px solid #05FEFF;
+            background-color: transparent;
+
+            .el-input__inner {
+              color: #FFFFFF;
+              font-size: 40px;
+            }
+          }
+        }
+
+        :deep(.el-table__inner-wrapper::before) {
+          display: none;
+        }
       }
     }
   }
diff --git a/src/views/site/index.vue b/src/views/site/index.vue
index d20f28c..9fed933 100644
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -30,7 +30,7 @@
             <div>隧道数量：{{ item.info.tunnelNum }}条
             </div>
             <div>
-              <div class="tunnel" v-if="showFirstTunnel">
+              <div class="tunnel" v-if="item.info.tunnelName">
                 <div>{{ item.info.tunnelName }}</div>
                 <div class="tunnel-icon"></div>
                 <div>施工长度{{ item.info.constructionLength }}米</div>
@@ -41,7 +41,7 @@
                 <div class="add-icon"></div>
               </div>
             </div>
-            <div class="more" @click="router.push('/tunnel')" v-if="showFirstTunnel">
+            <div class="more" @click="goToAddTunnel(item.siteId)"  v-if="item.info.tunnelName">
               更多
               <div class="icon"></div>
             </div>
@@ -105,7 +105,7 @@ const siteIds = ref([])
 const siteNameList = ref([])
 const info = ref({
   tunnelNum: 0,
-  tunnelName: '隧道',
+  tunnelName: '',
   constructionLength: 0,
   implementationLength: 0
 })
@@ -114,7 +114,6 @@ const isClick = ref(false);
 const isVisited = ref(false);
 const total = ref();
 const showAddIcon = ref(false)
-const showFirstTunnel = ref(true)
 const pageInfo = reactive({
   pageNum: 1,
   pageSize: 6
@@ -136,9 +135,10 @@ const getList = () => {
     showAddIcon.value = total.value !== 6;
     res.data.rows.map(item => {
       if (item.tunnelList === null || item.tunnelList === []) {
-        showFirstTunnel.value = false
+        item.info = info.value
+      }else{
+        item.info=item.tunnelList[0]
       }
-      item.info = info.value
       item.checked = false
     })
     siteList.value = res.data.rows;
@@ -229,9 +229,9 @@ const handleMoreDelete = () => {
 }
 
 //点击页码进行分页功能
-const handleCurrentChange = async (val) => {
+const handleCurrentChange = (val) => {
   pageInfo.pageNum = val
-  await getList()
+  getList()
 }
 </script>
 
@@ -254,39 +254,6 @@ const handleCurrentChange = async (val) => {
   color: #FFFFFF;
 }
 
-.btns {
-  display: flex;
-  justify-content: space-around;
-  margin-top: 80px;
-
-  .cancel-btn {
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    width: 220px;
-    height: 80px;
-    border-radius: 11px;
-    border: 2px solid #08B7B8;
-    color: #08B7B8;
-    line-height: 80px;
-    font-size: 38px;
-    box-sizing: border-box;
-  }
-
-  .sure-btn {
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    width: 220px;
-    height: 80px;
-    line-height: 80px;
-    background: #08B7B8;
-    border-radius: 11px;
-    color: #FFFFFF;
-    font-size: 38px;
-  }
-}
-
 :deep(.el-dialog) {
   border: 2px solid #05FEFF;
   background: #0D6578;
@@ -399,11 +366,14 @@ const handleCurrentChange = async (val) => {
   }
 
   .box-content {
+    height: 1850px;
     display: flex;
     flex-wrap: wrap;
     padding-left: 100px;
     padding-right: 100px;
     justify-content: space-between;
+    box-sizing: border-box;
+    overflow: hidden;
 
     .add-box {
       cursor: pointer;
@@ -425,7 +395,7 @@ const handleCurrentChange = async (val) => {
 
     .site-box {
       margin-top: 122px;
-      //margin-right: 60px;
+      //margin-right: 1%;
       padding: 40px 50px;
       width: 1250px;
       height: 750px;
diff --git a/src/views/tunnel-manage/index.vue b/src/views/tunnel-manage/index.vue
index d401dfe..124438e 100644
--- a/src/views/tunnel-manage/index.vue
+++ b/src/views/tunnel-manage/index.vue
@@ -7,6 +7,9 @@
       </div>
       <div class="tunnel-title"></div>
       <div class="all-del-btn">
+        <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
+          添加
+        </div>
         <div class="all-btn">
           全选
         </div>
@@ -84,7 +87,7 @@
     </el-dialog>
     <div class="pagination">
       <span>首页</span>
-      <el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next"/>
+      <el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next" />
       <span>尾页</span>
     </div>
   </div>
@@ -92,6 +95,7 @@
 
 <script setup>
 const router = useRouter()
+const showAddIcon = ref(true)
 const siteId = reactive(router.currentRoute.value.params.siteId)
 const siteList = ref([
   {
@@ -159,51 +163,49 @@ const siteList = ref([
     num: 1,
     constructionLength: 500,
     implementationLength: 10
-  },
-
-
+  }
 ])
 const iconsList = ref([
   {
-    icon: 'white-state-icon.png',
+    icon: 'sd_icon_fj.png',
     name: '风机',
     num: 2
   },
   {
-    icon: 'white-state-icon.png',
-    name: '风机',
-    num: 11
-  },
-  {
-    icon: 'white-state-icon.png',
-    name: '风机',
+    icon: 'sd_icon_sd.png',
+    name: '湿度',
     num: '无'
   },
   {
-    icon: 'white-state-icon.png',
-    name: '风机',
-    num: 2
+    icon: 'sd_icon_fy.png',
+    name: '风压',
+    num: 10
   },
   {
-    icon: 'white-state-icon.png',
-    name: '风机',
-    num: 11
-  },
-  {
-    icon: 'white-state-icon.png',
-    name: '风机',
+    icon: 'sd_icon_yq.png',
+    name: '氧气',
     num: '无'
   },
   {
-    icon: 'white-state-icon.png',
-    name: '风机',
+    icon: 'sd_icon_fs.png',
+    name: '风速',
     num: 11
   },
   {
-    icon: 'white-state-icon.png',
-    name: '风机',
+    icon: 'sd_icon_fc.png',
+    name: '粉尘',
+    num: 1
+  },
+  {
+    icon: 'sd_icon_wd.png',
+    name: '温度',
     num: 11
   },
+  {
+    icon: 'sd_icon_qt.png',
+    name: '有害气体',
+    num: '无'
+  },
 ])
 const title = ref('新增隧道')
 const isVisited = ref(false);
@@ -215,12 +217,13 @@ const form = ref({
   tunnelLength: '',
   remarks: ''
 });
+
 const handleEdit = () => {
   title.value = '编辑隧道'
   isVisited.value = true
 }
 const handleEditDevice = () => {
-  router.push('/device/'+1)
+  router.push('/device/' + 1)
 }
 
 const handleAdd = () => {
@@ -299,37 +302,6 @@ const handleClickSite = (type) => {
   color: #FFFFFF;
 }
 
-.btns {
-  display: flex;
-  justify-content: space-around;
-  margin-top: 80px;
-
-  .cancel-btn {
-    cursor: pointer;
-    width: 220px;
-    height: 80px;
-    border-radius: 11px;
-    border: 2px solid #08B7B8;
-    color: #08B7B8;
-    line-height: 80px;
-    padding-left: 67px;
-    font-size: 38px;
-    box-sizing: border-box;
-  }
-
-  .sure-btn {
-    cursor: pointer;
-    width: 220px;
-    height: 80px;
-    line-height: 80px;
-    background: #08B7B8;
-    border-radius: 11px;
-    color: #FFFFFF;
-    font-size: 38px;
-    padding-left: 67px;
-  }
-}
-
 .tunnel-bgc {
   background-color: #072348;
   padding: 85px 0 0 0;
@@ -393,12 +365,14 @@ const handleClickSite = (type) => {
   }
 
   .box-content {
+    height: 1850px;
     display: flex;
     flex-wrap: wrap;
     padding-left: 67px;
     padding-right: 70px;
     justify-content: space-between;
-
+    box-sizing: border-box;
+    overflow: hidden;
     .add-box {
       cursor: pointer;
       font-weight: bold;
@@ -419,7 +393,7 @@ const handleClickSite = (type) => {
 
     .site-box {
       margin-top: 50px;
-      //margin-right: 122px;
+      margin-right: 1.5%;
       padding: 40px 30px;
       width: 925px;
       height: 550px;
@@ -427,7 +401,7 @@ const handleClickSite = (type) => {
       //box-sizing: border-box;
       position: relative;
 
-      &:nth-child(3) {
+      &:nth-child(4n) {
         margin-right: 0;
       }
 
@@ -474,13 +448,13 @@ const handleClickSite = (type) => {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            margin-right:30px;
+            margin-right: 30px;
           }
         }
 
         .left-img {
           margin-top: 110px;
-          margin-right: 70px;
+          margin-right: 50px;
           width: 340px;
           height: 148px;
           background-image: url('@/assets/images/tunnel/sdgl_sdt.png');
@@ -492,7 +466,7 @@ const handleClickSite = (type) => {
           display: flex;
           align-items: center;
           justify-content: flex-start;
-          font-size: 34px;
+          font-size: 30px;
           color: #60DDDE;
           //margin-left: 175px;
 
@@ -538,10 +512,14 @@ const handleClickSite = (type) => {
               justify-content: space-between;
               align-items: center;
               color: #FFFFFF;
-              font-size: 36px;
-              margin-right: 27px;
+              font-size: 34px;
+              margin-right: 17px;
               margin-bottom: 30px;
 
+              &:first-child {
+                margin-right: 37px;
+              }
+
               &:nth-child(2n) {
                 margin-right: 0;
               }
@@ -563,7 +541,7 @@ const handleClickSite = (type) => {
     align-items: center;
     position: absolute;
     left: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     bottom: 50px;
     color: #60DDDE;
     font-size: 38px;