From fe6a1d1ff3177a1963d80f665a2215bb552c7ee4 Mon Sep 17 00:00:00 2001
From: renpy <peiyu_ren@163.com>
Date: Mon, 7 Aug 2023 18:49:55 +0800
Subject: [PATCH] =?UTF-8?q?instances=20=E6=A8=A1=E5=9D=97=E6=90=AD?=
 =?UTF-8?q?=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/assets/images/abnormalAlarm/alarm.png     | Bin 0 -> 2763 bytes
 src/assets/images/abnormalAlarm/cpu.png       | Bin 0 -> 3427 bytes
 src/assets/images/abnormalAlarm/email.png     | Bin 0 -> 2812 bytes
 src/assets/images/abnormalAlarm/icon-r.png    | Bin 0 -> 1628 bytes
 src/assets/images/abnormalAlarm/icon-y.png    | Bin 0 -> 1627 bytes
 src/assets/images/abnormalAlarm/partition.png | Bin 0 -> 3125 bytes
 src/assets/images/abnormalAlarm/ram.png       | Bin 0 -> 2889 bytes
 src/assets/images/abnormalAlarm/running.png   | Bin 0 -> 3407 bytes
 src/assets/images/abnormalAlarm/times.png     | Bin 0 -> 3226 bytes
 src/assets/images/abnormalAlarm/warning.png   | Bin 0 -> 3091 bytes
 src/assets/less/TabMenu.less                  |  80 +++
 .../alarmCenter/alarmHistory/index.vue        |  81 +--
 .../abnormalAlarm/components/boxTitle.vue     |   8 +-
 .../serverMonitor/instances/details.vue       | 603 ++++++++++++++++++
 .../serverMonitor/instances/index.vue         |  42 +-
 yarn.lock                                     |   5 +
 17 files changed, 732 insertions(+), 88 deletions(-)
 create mode 100644 src/assets/images/abnormalAlarm/alarm.png
 create mode 100644 src/assets/images/abnormalAlarm/cpu.png
 create mode 100644 src/assets/images/abnormalAlarm/email.png
 create mode 100644 src/assets/images/abnormalAlarm/icon-r.png
 create mode 100644 src/assets/images/abnormalAlarm/icon-y.png
 create mode 100644 src/assets/images/abnormalAlarm/partition.png
 create mode 100644 src/assets/images/abnormalAlarm/ram.png
 create mode 100644 src/assets/images/abnormalAlarm/running.png
 create mode 100644 src/assets/images/abnormalAlarm/times.png
 create mode 100644 src/assets/images/abnormalAlarm/warning.png
 create mode 100644 src/assets/less/TabMenu.less
 create mode 100644 src/views/abnormalAlarm/serverMonitor/instances/details.vue

diff --git a/package.json b/package.json
index bbea7cf..b1b053f 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "vue-area-linkage": "^5.1.0",
     "vue-cropper": "^0.5.4",
     "vue-i18n": "^8.7.0",
+    "vue-infinite-scroll": "^2.0.2",
     "vue-loader": "^15.7.0",
     "vue-ls": "^3.2.0",
     "vue-photo-preview": "^1.1.3",
diff --git a/src/assets/images/abnormalAlarm/alarm.png b/src/assets/images/abnormalAlarm/alarm.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b7c929f2c6068944bd5de0d6b28b45b11167a3f
GIT binary patch
literal 2763
zcmaJ@c|4T+9-bkC?AbYvIb+Q+X0Z=r8)M7Zn(W1xc`-4InZclJrIJLF(n1_rT0~tn
zC`*bsj3V4DsiZiv9m=t!J37_5f86f-`MmFM`8?0_-JU<*OfL^-sqJdpK_HNntBa$L
zV71tK#UO%j<q@l&1&b;N@6XxI2<OC;SOCbL!UzMPt~62v-~*5-2{E03H3%fEMJ4)k
z{0Z(DGJ|GB+QJxdX-okd1hTf}GD+kpfCCK!BB*pMY`(D>2BlK4Fh5fQlEB0PkyMvN
z7O*?fgGf${B3n{mwl+{}E=C|g12`lomljQDW4Kt@7hQ~Czjcj(LBBvaQCQgDN%<4J
zpg0B#fSMU0;bbHd4K=qkLYbMEm>~_JXe1hmK$;>@XgJCYgEYaQ%%NW&m>?R95{~h4
zbov@gaKgeOIUFVifryWfH;OklVz43*C`(IA1QLxvqu~MsoSi`DkhpL<TkD&GBfuuJ
zs7wx(L5FTBlEN6V94t(b>E9*LnBQgT?5}MSGz`HdF%c*u<W@=FfCR$-htg=@(QJ+n
z@K3(~Q<zOmU;+pqfX#?ykp+Vb*V+oj#Nb!}iNjzK8I0&}UG$1%a2V`J1`~=#8KI&2
zepEVz5zpTFg+L%+T<L5MiB1Mw9kDQhgb|fW!JsYB=H?FO4tOUN8im3;+M8OK<4sH~
zP$s4*yrrY*H?AXt97_Y}oNrvpKU~}oxm#YKF$Iww0Twk5pg6G@H0YO_G1MRDV);Y8
zuUyKHbFu#+7a>Rnu{GKMn)J6Tfqk~N-+e1Me0M%T7ucO8@O8xC11k_n)W+4(p2!^@
zJwL)w#Q)ThV%&(uP7-CsB1^dT-kQfo9gpiiJRE`h3=&RL))a9&(5Ir6`4n`}+u>fQ
zY_`n3<+O8uwMe9Amk@Uz$x<-E3oDh3l9TxS-un6XMYGd$)6<ij#5;|~NrkKL=grT4
z;^%Ix#a;q2&oI_Q!!x9t>U=im5lyp`BYaiJUFVvF&AdT+GBX7CVj^foGHpcX+<{BH
zq4$f=b>M9w^ESabl<W)R&)wH<#;I7GdTaG=<rd&+Sbi1~H#ri|Kjb&W8BiSS?4Lz)
z+3FEfZzS78<?K`}ms`zOhwk>uDfd;AU-q{*q#D+~iaXM3cFuO?GKC9dVVx(GPuC&h
zykBc5m>*N05%I_m$j2tX@N97PKRGU@#u^Un%a8{Qb!$(=-A>caNWkj!rjRf~d6%Ez
zG)J#Sf|~n;wY5JK;r{617d39`rD&gr=%+w)x?|22V4$~Z@BM!BQ`Dp_Y|~r9+0Z{g
zJV8~%g<`!=WU370hLpx<9?28muUWfKOfR{wXop+N{uy*k_kN*3bvy8*SI3^qhrz2r
zdmrZ_{#80GX5g>=(@8mzPUd!S-GHIWmBIbq66YIKCT_=iwv^OqzbbGH9X!}UCZudI
z!;M3q4cZs#-pme=Be*w~Ur!b~L5)K1Ia<g&-l^#jo108~sqYnqRrU?=F4r?d$p+?3
zVf2IZ=J9IsUb;l_0L9Q97iY@lRup1rk9b)-XxLE0?FPS{khxu%RS7*sKwbu&x^N_*
zwjmqt&y!?jCoEv?ii7&(lS1aPP4B4I^pgWGvSzEAoQn~PpO@BdZWMifz0lh|>zhj1
z&)v8h+|PS;+*F;pm?yRUgl*SQ#s_jL=I5WShKR>Rvy`!!tM|s2JKyOQUcX69w9bRp
zUF&;a?do72yuckfoMS#zy^j$TUSUuc$8*OamY88Hl-HscVajSfXY<~qJ>>=yo9xAc
zoNGygY9WM|31Zhe3kL2yZiuZe6ambYG)h1vNLMheS*^GDSvS6J7f(yUO;^He$aY7k
zrjtgCAGMX2<a>Z4TiJBu`Xl`+_M(?zS8|O|NpdrNbNY{x;#);lMvV4?PR|bY&vpxA
zzdXltgT}W-QoZ%6r9lVogqX@QW<mZ9#4E+NqWdEB?2JTPJ2XXjm5+7_Nghpls5`(<
zufCw0yk?Oaks`v2SAO|Xwq{PVZCSnpJU0qaQ4?ap-1VGKE<`1)y@ckHJN{ic&fmFo
zv*{GrWy3(fk+bTSS{`s9O6b<xN#uRneK!UjGP)4RZ7U~$ZgUe$K)mW3zht}Q{<Uh_
zL{Bes%j=ZT6i!(mIq>9FmBR&jPg~)dbzCZh|0Gxp-WaA+BP`0xG6V68E>(${z86L9
z$&;#gvixW$@gO}pK~dh9;O=>0oVQouH#AO4=XA72*mB6#^e65)9k(v(%3SZ-pf*T8
znJ#~loVk>U5^qzrp*;0D(i3!0Pq;jFxnCWjaP&lXZlaxqjeS;NfN&c+w5!3vxV}O{
z-z0xM9^qjz{-G88Y_)#1BDVjT60y{<wy#L`SY*h&ckqWDfBM#B=q0*Eg}y!%%b(H$
zCxa&@EZT4M=3A@KNf#9YPHiU5Bra_tattcH6wDS)l-xhnA8wF741<r$$S8l>J+`;n
z>`+ekPU}%#Oj6i<%xs`%$;#Pc7ujtt;&Oi;LLV*=yRp91EGl!HGW8L8JifK28#}qH
zx{C6P+k<@lUt@QzLc}W(4m$IhxabA;q6`U*MnB`c?Uq?(zgurhR;P_A^#Xx!Od(2x
z3iO>IxkA1S4rKvo6}g`FmhmgSzF}jm>Q<lQ_BeFzUd9~uMYj6EjERosibrAMd+8%g
z<cwS;_-PBi1(|1qDwR*?D`;2NsGgZ6UOxXT*b;3GgA)zLdN0jd4Ko)VnroD`YMqod
zB(_TtAF5`hLH;~<2JBfD{g@+vLvfexg)phkD8>7upPe_mCdb}R<nMWcZ+(g%YoLww
zJ;?Cw!T5QfS-2K#TH4{}vd6a7V8m@g{zHMvBOCAMkh|bo<6SWpkO3FF0oRpEU|CFi
zzrN0Wax`6t%$CnZnuGbHhcjYd>C)(>l0KQY9Lmr7=Fe5VRqN|EB6S~^W%pMV?q#WK
zz^N`))K5EZtSNR$TC{Imo_?qmx*KCVWoGT;@lL5MQpCU=)fOcxH>biL?peSL68oL5
zN_(tZCe})4)Lho<r`Wkiv^+J*FWaM}dPaQTouj2E_Q17jv!dJmkD|}C=GXRx=`_PG
z?z7+4Z}QNOvWWcXV`M!rbTSrncAI#`nqyzZZ$fYH+*^l?{xl3((!?ISR-jk?>3n&K
zL}H4tcO0L2v?J*>$ZG0Jn#TLp3XF48;^&~s<{I0(AMQ6Uzb>}=YjIpQNH(ef9KRs(
zv3>?VV|Wo#2RWE?@^_scCF$_?uB6+;@j11jGm`09xI3GO7SK#jj_LH0eA(9Tr7PaU
JvDzUt{XZkMl1~5t

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/cpu.png b/src/assets/images/abnormalAlarm/cpu.png
new file mode 100644
index 0000000000000000000000000000000000000000..e21eb78da519199ae03277dfd1a3d407f4c656b1
GIT binary patch
literal 3427
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
C4*ISD

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/email.png b/src/assets/images/abnormalAlarm/email.png
new file mode 100644
index 0000000000000000000000000000000000000000..3c40f8e045e23b7f5963eab1b372be8525c87f14
GIT binary patch
literal 2812
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
E0mtpECIA2c

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/icon-r.png b/src/assets/images/abnormalAlarm/icon-r.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb64be271e415ef66ffc2c64da78acd20479f6d5
GIT binary patch
literal 1628
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`Gjk|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+n3Xd_B1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!WpKsVXIz(~Q|QqR!L
z#Kg=%N5ROz$Uxt~RNv4@*U-$$z{JYXTmcG{fVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj
z%k|2Q_413-^$jg8E%gnI^o@*kfhu&1EAvVcD|GXUm0>2hq!uR^WfqiV=I1GZOiWD5
zFD<cE0=g99h1>$Tv3bSNU;+l1ennz|zM-B0$V)JVzP|XC=H|jx7ncO3BHWAB;Np<V
zf>iyW)Z+ZoqGVvir744~DzI`cN=+=uFAB-e&w+(vKt_H^esM;Afr62to{@q^cxGNo
zetEGbSc9*xm1kaYNn&1ds;7&s63_^}%*+%kb5kcH3s+}1S2qJULqk^=M`L3*OA}K|
zGiM7!3nz19m|mCs<kH;Kyb_q+6u4d&1Dtw6X(6`&XtPUdQD#|cid#{Bt^(N4R++fn
z;)2sWsNNKuZgF<SsaGH97=2L8BE>XJ2$+08OnABla^NXHH4m8Fi-75R;?!+#85o$(
zd%8G=RNR^}Ej#0EqRjF0KW7_Hl-g#*m;H=&@)A?imK<-NjCXrfr&l_5iF1E+QWVjT
z5qdi7826OZ9;bArW_f!`$xc5jkZHVq?$1A8{=P1>`akz^`22G>i|0N6UR`%R{b65|
z;zGX^fisPr6W9YkEZ~$o<hr7f-;wJOBb(37uo<eY`48<(oWv!iSR*g6{Z3G>@jHHi
zNw(tvqXo<N1<Hx>;S&7b3x(nimsC8+`y|A-wr%kTkv3=1E2@EcpM=+)IL&#hSaump
zr2&86VOH5J?|>O=FZ^kesPX)<S3f4~-m#Of_sc!el<A)u5?>k7_TFjpoq87ehm)M1
zcu#h^!lk}&c6I`HidW?7Yr76dS}-yvn(Kt!=sS?HgUz}`a57s2AM1uw{DF4!&p%us
z^26MoU33HcH3x4ekD^e9$qB+a1?TRCtyuKzU`^$w)0Q^jr@p^()AgK`qiXHjxvniS
z>ivZ6mI3cpb|!VLjrQ%`H+$|0{)k2Iwda;*AF!A*tI=sidEFak*8;A6twG++r#2so
z+^kf=>TEmpzV-9tE37u@IV8I5?6Sz-9%4H4+^o>pZIT(`zkes)`_gupkxlGi-R`-Y
z!`2$#pKE&g=DU~Q{yM$%Z2MGfrMTwgkrK1?46SJ^COu-D&3?eDm!CT^lIv+;Y1v-Q
zwV`sySaQBy5uVz$J9d>j7qjt~$k!{^=9;YGy<sEamQgeP<bxZ2Q`|!~UE5=x^SN5}
z?5Q;-CmUyc+7idC^NxQL!^%r5Zshnr_rI)TI%{YAnw#&sZ1rw0RL^NnW<2F>GXGsh
z%kjH~wwGd>rW=UHwfytX`7t+eN4Ln#dN~>Cqnj1uA6G6jR&~xi@<*$t_2j-!Df+i6
zZN=uBXsvM;cUrH~_4_ba1(UVtw4}dtKV94&tsC6_Ok<<rS&99fMPL8UtXiUW^RkrR
z$NX;FH&0isbCNVx%?}azw(2fV#peGf@)_9}+-%mRTWndg5LDiKy85}Sb4q9e0F&8l
Ad;kCd

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/icon-y.png b/src/assets/images/abnormalAlarm/icon-y.png
new file mode 100644
index 0000000000000000000000000000000000000000..16e6883e12bb1767ac02db766b16c30f0cfca992
GIT binary patch
literal 1627
zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAnN?apKg7ec#$`gxH85~pclTsBt
za}(23gHjVyDhp4h+AuIMD`$p8ltlRYSS9D@>Lr5I=vCwv0Ch7k*w|MTBqnF4mMA2p
zrf25aD!t#mUr8Y|#a1cY)Yrhbz&SM|)1#^=HMq(zB)KX(*)m1R-cG@$!U||WZfZ%Q
zLPc&)Ua?h$trFN=D<B&rtgoa1R#K8}s|0aWgl~X?bAC~(f|;IyZnA-ak%GCUo}rnE
ziJ5_pf{}rdfxdyMzM+w>p_!F|iIt(b0u(3#Z7WJivkG!?gW3h;*(zm}loVL$>z9|8
z>y;bp<rk&v8(Lag>Khp88yV>WRp=I1=9MH?=;jqG!%T2VElw`VEGWs$&r<-In3$Ab
zT4JjNbScCOxdm`z^NOLt1Pn0!io^naLp=kKmtYEgeeo;J&4sHjE(uCSxEHIz#UYgi
zsro^w#rdU0$-sz9QwCX8VC7ttnpl!w6q28x0}I7~jQo=P;*9(P1tUW}BL$7{%)FHR
z@?uS}247z*&%EN2#JuEGPZwJypb>hRnJHH0W(Lj%29_4CZU%0KhORD-hAt*f&MwYQ
zmWHm5W{##Xy)OC5rManjB{01y2)&j#^@7quZUN9{m(-%nveXo}qWoM1u%E3mal6F~
zr+HAlDY)HYj#IBb&@uX;m_>?dm=G}efSB-f3*^94erg^txfcP`_4Nw3>kJG`=R92;
zLn>}fnda#c7ASK3>*wqZOBTF59c7w3Yw;wd4jt(ZHl+-PjR)QCq+U|$y5+Lu;-bWh
zO5GcjZo6#J)KXTGG80PGU=hojp)t`ntnP2$ANd%)_qO}_{!|p)xBY&{c;EE7b<;)F
zlM{?Z4*E!NTV7zyU&xo|lzd0=rl6bKA;TNI%@4TuH2QzwbvymS!sD>)iVh>Ov?F=3
zi<|QfS5~mpJAXNQ!A@i9#-g|Vrb!ETa^(gv^=~$seDYE>!}5m-Qv^RhSa)cXkX<#q
zs>0GaTb%p9*Dc`54SKOE=BNU@sn-ju^9O8p@Wo!>l7Faur}^tSJL4#x?+;bZe7D_b
z@veR8su}yr3uO45*MIuNRChQeg154Ox$F@C%crY9&026kY?9XHSg)eF#m2@3EOCd*
zG<O+sojWLYqLtTc-_y?`a~hsLi*z#FQZeuAs$(`4eBMqxDVkfNA5J>7?Qmsz;6rWB
zL#c8)*UmN>Z57CwvazjBE4$;@V)xK%tG}`voRzv^Gn4geA7ga%QW=w!fPMEDN~vjt
zH|_~CUDmWI=cC)n0#!>Nt;CtzzxkZ^JQtN+5EoQ>|Mi|XSDu{{V6M#C!q=)iq5V>3
z`L%y9W=_76sJy4DUjFh;HUB+d=PO!i+U^!wHOEr&NS)1_i@dLmZ`eEg{#IPb63u+J
zFK`COdQ+asr@ZIzgeBj8<E<XDF0=QmhGv+Z&b#z2<r!z{vM(fB?Oq=<+e9MQ#HTYr
zO5vN6Vo5uX$Mx>T7kIY5YtXsAW>wht-$jnL#T?5HGoIaGurla;2#YvpkIAVEN;?+q
z*nMf)ve*?9Lfs`ce9~(^-6)<Yzt$^vOW|JM_H?D4mvkq;lQN&fnP1$hF{S+YUO6u7
zJt394m)*11&R@SmzLV)`qTZjT<ysHL&aRr$mcDS+ipc4!|IXh()geqH$8}cbx{}rW
w>kh7+k@fm|$AA85?`s}MUy1*F%AS#pVWRck^X(hoECUtyp00i_>zopr0LB?^p#T5?

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/partition.png b/src/assets/images/abnormalAlarm/partition.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2418d8970cc8b69bb5cb1bdd7bf964d126e6d2e
GIT binary patch
literal 3125
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
M7_=R#%!&~GAMM_88~^|S

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/ram.png b/src/assets/images/abnormalAlarm/ram.png
new file mode 100644
index 0000000000000000000000000000000000000000..dfc754fefcfd102fecbc61250a2840c2749082b4
GIT binary patch
literal 2889
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/running.png b/src/assets/images/abnormalAlarm/running.png
new file mode 100644
index 0000000000000000000000000000000000000000..b19f7921da34051c83d005cfd1d6bd8afcb09d96
GIT binary patch
literal 3407
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/times.png b/src/assets/images/abnormalAlarm/times.png
new file mode 100644
index 0000000000000000000000000000000000000000..3144cb47ece2ba2c9411aec1d9fb06f47f0466fb
GIT binary patch
literal 3226
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
EKPxD=ApigX

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/warning.png b/src/assets/images/abnormalAlarm/warning.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef0982ec03cf65d4ae14c434904c2e9686281f5b
GIT binary patch
literal 3091
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

literal 0
HcmV?d00001

diff --git a/src/assets/less/TabMenu.less b/src/assets/less/TabMenu.less
new file mode 100644
index 0000000..2d14e70
--- /dev/null
+++ b/src/assets/less/TabMenu.less
@@ -0,0 +1,80 @@
+::v-deep {
+  .ant-tabs{
+    height: 100%;
+    .ant-tabs-top-content{
+      height: calc(100% - 50px);
+      .ant-tabs-tabpane{
+        height: 100%;
+        overflow: auto;
+        overflow: hidden;
+      }
+    }
+  }
+  .ant-tabs-bar{
+    width: 100%;
+    height: 40px;
+    margin: 0 0 10px 0;
+    background-color: rgba(12, 235, 201, 0.05);
+    border-top: 1px solid rgba(12, 235, 201, 0.3);
+    border-bottom: 1px solid rgba(12, 235, 201, 0.3);
+  }
+  .ant-tabs-nav .ant-tabs-tab{
+    height: 30px;
+    line-height: 30px;
+    background-color: rgba(58, 236, 240, 0.22);
+    font-family: BookmanOldStyle;
+    font-size: 16px;
+    font-weight: bold;
+    font-stretch: normal;
+    letter-spacing: 2px;
+    color: #c9f6f6;
+    margin: 0 0 0 10px;
+    padding: 0 23px;
+    position: relative;
+    &::before{
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 7px;
+      height: 29px;
+      color: rgba(58, 236, 240, 0.22);
+      border: 1px solid #569e9e;
+      border-right: none;
+      border-radius: 0;
+    }
+    &::after{
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 7px;
+      height: 29px;
+      color: rgba(58, 236, 240, 0.22);
+      border: 1px solid #569e9e;
+      border-left: none;
+    }
+    &-active{
+      &::before,
+          &::after {
+            border-color: #0cecca !important;
+          }
+    }
+  }
+  .ant-tabs-ink-bar{
+    display: none !important
+  }
+  .ant-tabs-nav .ant-tabs-tab-active{
+    color: #2affdf;
+  }
+  .ant-row{
+    height: 36px;
+    line-height: 36px;
+  }
+  .ant-tabs-tab-prev, .ant-tabs-tab-next{
+    color: #c9f6f6;
+  }
+  .ant-tabs-tab-prev:hover, .ant-tabs-tab-next:hover{
+    color: #2affdf;
+  }
+}
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue b/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
index 31d31f6..7571454 100644
--- a/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
+++ b/src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
@@ -442,90 +442,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
+  @import "~@/assets/less/TabMenu.less";
 .chart-layout{
   height: 230px;
   margin-left: 20px;
 }
-::v-deep {
-  .ant-tabs{
-    height: 100%;
-    .ant-tabs-top-content{
-      height: calc(100% - 50px);
-      .ant-tabs-tabpane{
-        height: 100%;
-        overflow: auto;
-        overflow: hidden;
-      }
-    }
-  }
-  .ant-tabs-bar{
-    width: 100%;
-    height: 40px;
-    margin: 0 0 10px 0;
-    background-color: rgba(12, 235, 201, 0.05);
-    border-top: 1px solid rgba(12, 235, 201, 0.3);
-    border-bottom: 1px solid rgba(12, 235, 201, 0.3);
-  }
-  .ant-tabs-nav .ant-tabs-tab{
-    height: 30px;
-    line-height: 30px;
-    background-color: rgba(58, 236, 240, 0.22);
-    font-family: BookmanOldStyle;
-    font-size: 16px;
-    font-weight: bold;
-    font-stretch: normal;
-    letter-spacing: 2px;
-    color: #c9f6f6;
-    margin: 0 0 0 10px;
-    padding: 0 23px;
-    position: relative;
-    &::before{
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 7px;
-      height: 29px;
-      color: rgba(58, 236, 240, 0.22);
-      border: 1px solid #569e9e;
-      border-right: none;
-      border-radius: 0;
-    }
-    &::after{
-      content: "";
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 7px;
-      height: 29px;
-      color: rgba(58, 236, 240, 0.22);
-      border: 1px solid #569e9e;
-      border-left: none;
-    }
-    &-active{
-      &::before,
-          &::after {
-            border-color: #0cecca !important;
-          }
-    }
-  }
-  .ant-tabs-ink-bar{
-    display: none !important
-  }
-  .ant-tabs-nav .ant-tabs-tab-active{
-    color: #2affdf;
-  }
-  .ant-row{
-    height: 36px;
-    line-height: 36px;
-  }
-  .ant-tabs-tab-prev, .ant-tabs-tab-next{
-    color: #c9f6f6;
-  }
-  .ant-tabs-tab-prev:hover, .ant-tabs-tab-next:hover{
-    color: #2affdf;
-  }
-}
 .analysis-chart{
   width: 100%;
   height: 100%;
diff --git a/src/views/abnormalAlarm/components/boxTitle.vue b/src/views/abnormalAlarm/components/boxTitle.vue
index c2499f3..1c42c97 100644
--- a/src/views/abnormalAlarm/components/boxTitle.vue
+++ b/src/views/abnormalAlarm/components/boxTitle.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="chart-title">
     <span>{{ title }}</span>
-    <img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
+    <div class="right">
+      <slot name="right">
+        <img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
+      </slot>
+    </div>
   </div>
 </template>
 
@@ -35,7 +39,7 @@
     padding: 0 15px;
     background-color: rgba(12, 235, 201, 0.05);
   }
-  img{
+  .right{
     position: absolute;
     right: 15px;
     top: 50%;
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/details.vue b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
new file mode 100644
index 0000000..5b183af
--- /dev/null
+++ b/src/views/abnormalAlarm/serverMonitor/instances/details.vue
@@ -0,0 +1,603 @@
+<template>
+  <div style="height: 100%;">
+    <div class="content-top">
+      <div style="width: calc( 100% - 562px);">
+        <BoxTitle title="Basic lnformation"></BoxTitle>
+        <div class="basic-info">
+          <div 
+            class="basic-info-list"
+            v-infinite-scroll="handleInfiniteOnLoad"
+            :infinite-scroll-disabled="busy"
+            :infinite-scroll-distance="5"
+          >
+            <a-list :dataSource="dataSource">
+              <a-list-item :class="{ 'ant-list-item-active': index===currIndex}" slot="renderItem" slot-scope="item, index" @click="handleBasicItem(index)">
+                <div>{{ item.name }}</div>
+              </a-list-item>
+              <div v-if="loading && !busy" class="demo-loading-container">
+                <a-spin />
+              </div>
+            </a-list>
+          </div>
+          <div class="basic-info-detail">
+            <a-row :gutter="10" style="height: 40px;">
+              <a-col :span="6"  style="height: 100%;">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/running.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">running state</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num state">NORMAL</div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="5"  style="height: 100%;">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/alarm.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">Alarm SMS</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num">16</div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="6"  style="height: 100%;padding-left:12px">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/email.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">Alarm email</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num">16</div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="7"  style="height: 100%;">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/warning.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">Number of alarms</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num">16</div>
+                  </div>
+                </div>
+              </a-col>
+            </a-row>
+            <a-row :gutter="10" style="height: 40px;margin-top: 10px;">
+              <a-col :span="6"  style="height: 100%;">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/times.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">Run time</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num">126.5h</div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="5"  style="height: 100%;">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/ram.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">RAM Size</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num">28.9GB</div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="6"  style="height: 100%;padding-left:12px">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/cpu.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">CPU Cores</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num">16</div>
+                  </div>
+                </div>
+              </a-col>
+              <a-col :span="7"  style="height: 100%;">
+                <div class="basic-info-detail-col">
+                  <div class="basic-info-detail-col-img">
+                    <img src="~@/assets/images/abnormalAlarm/partition.png" alt="">
+                  </div>
+                  <div class="basic-info-detail-col-msg">
+                    <div class="basic-info-detail-col-msg-title">
+                      <div class="circle"></div>
+                      <div class="title">Total Disk Partition</div>
+                    </div>
+                    <div class="basic-info-detail-col-msg-num">16</div>
+                  </div>
+                </div>
+              </a-col>
+            </a-row>
+            <div class="basic-info-detail-content">
+              <a-row style="height: 100%;">
+                <a-col :span="12">
+                  <a-row style="height: 26px;">
+                    <a-col :span="12" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="12" class="basic-info-detail-content-key">Host Name:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">PC-01</a-col>
+                      </a-row>
+                    </a-col> 
+                    <a-col :span="12" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="12" class="basic-info-detail-content-key">OS Version:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">7.8 64-bit</a-col>
+                      </a-row>
+                    </a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="12" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="12" class="basic-info-detail-content-key">IP Address:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">192.168.1.1</a-col>
+                      </a-row>
+                    </a-col>
+                    <a-col :span="12" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="12" class="basic-info-detail-content-key">Kernel version:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">2000</a-col>
+                      </a-row>
+                    </a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="12" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="12" class="basic-info-detail-content-key">OS Name:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">Centos</a-col>
+                      </a-row>
+                    </a-col>
+                    <a-col :span="12" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="12" class="basic-info-detail-content-key">Bios Version:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">FX705GM.307</a-col>
+                      </a-row>
+                    </a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="4" style="height: 26px;" class="basic-info-detail-content-key">CPU:</a-col>
+                    <a-col :span="20" style="height: 26px;" class="basic-info-detail-content-val">Inte(R)Core(TM)i7-8750H CPU@2.2GHz</a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Manufacturer:</a-col>
+                    <a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">ASUSTeK COMPUTER INC.</a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="8" style="height: 26px;" class="basic-info-detail-content-key">Server Agent Path:</a-col>
+                    <a-col :span="16" style="height: 26px;" class="basic-info-detail-content-val">C:\Agent\Default\Desktop</a-col>
+                  </a-row>
+                </a-col>
+                <a-col :span="12">
+                  <a-row style="height: 26px;">
+                    <a-col :span="11" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="18" class="basic-info-detail-content-key">Network Lnterface:</a-col>
+                        <a-col :span="6" class="basic-info-detail-content-val">11</a-col>
+                      </a-row>
+                    </a-col>
+                    <a-col :span="13" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="15" class="basic-info-detail-content-key">Location:</a-col>
+                        <a-col :span="9" class="basic-info-detail-content-val">China</a-col>
+                      </a-row>
+                    </a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="11" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="18" class="basic-info-detail-content-key">Time Zone:</a-col>
+                        <a-col :span="6" class="basic-info-detail-content-val">CST</a-col>
+                      </a-row>
+                    </a-col>
+                    <a-col :span="13" style="height: 26px;">
+                      <a-row style="height: 100%;">
+                        <a-col :span="15" class="basic-info-detail-content-key">Server Agent User:</a-col>
+                        <a-col :span="9" class="basic-info-detail-content-val">LocalSystem</a-col>
+                      </a-row>
+                    </a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Start Time:</a-col>
+                    <a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">2023-03-01 14:00:01</a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Model Number:</a-col>
+                    <a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">TUF GamingFX705GM_FX86SM</a-col>
+                  </a-row>
+                  <a-row style="height: 26px;">
+                    <a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Bios Supplier:</a-col>
+                    <a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">American Megatrends lnc.</a-col>
+                  </a-row>
+                </a-col>
+              </a-row>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div style="width:542px">
+        <BoxTitle title="Alarm information"></BoxTitle>
+        <div
+          class="alarm-info-list"
+          v-infinite-scroll="handleInfiniteAlarmInfo"
+          :infinite-scroll-disabled="busy_alarm_info"
+          :infinite-scroll-distance="10"
+        >
+          <a-list :dataSource="dataSource_alarm_info">
+            <a-list-item slot="renderItem" slot-scope="item">
+              <img class="alarm-info-list-img" src="@/assets/images/abnormalAlarm/icon-r.png" alt="">
+              <div class="alarm-info-list-info">{{ JSON.parse(item.alarmInfo).info }}</div>
+              <div class="alarm-info-list-date">{{ item.alarmStartDate }}</div>
+              <a slot="actions" class="alarm-info-list-actions">Detail</a>
+            </a-list-item>
+            <div v-if="loading_alarm_info && !busy" class="demo-loading-container">
+              <a-spin />
+            </div>
+          </a-list>
+        </div>
+      </div>
+    </div>
+    <div class="content-center">
+      <BoxTitle title="Event Timelinen">
+        <template slot="right">asdfadf</template>
+      </BoxTitle>
+    </div>
+    <div class="content-bottom">
+      <div class="content-bottom-left">
+        <div class="content-bottom-left-top">
+          <a-row :gutter="20">
+            <a-col class="gutter-row" :span="8">
+              <BoxTitle title="CPU"></BoxTitle>
+            </a-col>
+            <a-col class="gutter-row" :span="8">
+              <BoxTitle title="MEMORY"></BoxTitle>
+            </a-col>
+            <a-col class="gutter-row" :span="8">
+              <BoxTitle title="LOADS"></BoxTitle>
+            </a-col>
+          </a-row>
+        </div>
+        <div class="content-bottom-left-bottom">
+          <BoxTitle title="CPU utilization">
+            <template slot="right">asdfadf</template>
+          </BoxTitle>
+        </div>
+      </div>
+      <div style="width:542px">
+        <BoxTitle title="DISK"></BoxTitle>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BoxTitle from '../../components/boxTitle.vue';
+import infiniteScroll from 'vue-infinite-scroll';
+import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
+export default {
+  directives: { infiniteScroll },
+  components: {
+    BoxTitle,
+  },
+  data() {
+    return {
+      dataSource: [],
+      loading: false,
+      busy: false,
+      ipagination:{
+        current: 1,
+        pageSize: 10,
+        total: 0
+      },
+      dataSource_alarm_info: [],
+      loading_alarm_info: false,
+      busy_alarm_info: false,
+      ipagination_alarm_info:{
+        current: 1,
+        pageSize: 10,
+        total: 0
+      },
+      currIndex:null,
+    }
+  },
+  mounted () {
+    this.getSysServer(res => {
+      this.loading = false
+      if (res.success) {
+        this.ipagination.total = res.result.total
+        this.dataSource = res.result.records
+      } else {
+        this.$message.warning("This operation fails. Contact your system administrator")
+      }
+    });
+    this.getServerAlarmHistory(res => {
+      this.loading_alarm_info = false
+      if (res.success) {
+        this.ipagination_alarm_info.total = res.result.total
+        this.dataSource_alarm_info = res.result.records
+      } else {
+        this.$message.warning("This operation fails. Contact your system administrator")
+      }
+    });
+  },
+  methods: {
+    getSysServer(callBack) {
+      this.loading = true
+      let params = {
+        pageNo: this.ipagination.current,
+        pageSize: this.ipagination.pageSize
+      }
+      getAction("/sysServer/findPage", params).then(res => {
+        callBack(res)
+      })
+    },
+    handleInfiniteOnLoad() {
+      if (this.dataSource.length>0) {
+        const dataSource = this.dataSource;
+        this.loading = true;
+        if (dataSource.length == this.ipagination.total) {
+          this.$message.warning('Infinite List loaded all');
+          this.busy = true;
+          this.loading = false;
+          return;
+        } else {
+          this.ipagination.current += 1
+          this.getSysServer(res => {
+            this.ipagination.total = res.result.total
+            this.dataSource = dataSource.concat(res.result.records);
+            this.loading = false;
+          });
+        }
+      }
+    },
+    handleBasicItem(i) {
+      this.currIndex = i
+    },
+    getServerAlarmHistory(callBack) {
+      this.loading = true
+      let params = {
+        startDate: "2022-08-01",
+        endDate: "2023-08-07",
+        pageNo: this.ipagination_alarm_info.current,
+        pageSize: this.ipagination_alarm_info.pageSize,
+      }
+      getAction("/sysServer/findAlarmHistory", params).then(res => {
+        callBack(res)
+      })
+    },
+    handleInfiniteAlarmInfo() {
+      if (this.dataSource_alarm_info.length>0) {
+        const dataSource_alarm_info = this.dataSource_alarm_info;
+        this.loading_alarm_info = true;
+        if (dataSource_alarm_info.length == this.ipagination_alarm_info.total) {
+          this.$message.warning('Infinite List loaded all');
+          this.busy_alarm_info = true;
+          this.loading_alarm_info = false;
+          return;
+        } else {
+          this.ipagination_alarm_info.current += 1
+          this.getServerAlarmHistory(res => {
+            this.ipagination_alarm_info.total = res.result.total
+            this.dataSource_alarm_info = dataSource_alarm_info.concat(res.result.records);
+            this.loading_alarm_info = false;
+          });
+        }
+      }
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.content-top{
+  width: 100%;
+  height: 331px;
+  // height: 43.5%;
+  display: flex;
+  justify-content: space-between;
+  .basic-info{
+    width: 100%;
+    height:291px;
+    padding: 15px 0;
+    display: flex;
+    justify-content: space-between;
+    &-list{
+      height: 100%;
+      width: 170px;
+      overflow: auto;
+      border: solid 1px rgba(65, 111, 127, 0.5);
+      .ant-list-item{
+        border: none;
+        height: 32px;
+        justify-content: center;
+        font-family: ArialMT;
+        font-size: 14px;
+        letter-spacing: 1px;
+        color: #ade6ee;
+        cursor: pointer;
+      }
+      .ant-list-item:nth-child(even){
+        background-color: rgba(13, 109, 118, 0.2);
+      }
+      .ant-list-item-active{
+        background-color: rgb(15, 158, 171, 0.5) !important;
+	      color: #ffffff; 
+      }
+      .demo-loading-container {
+        position: absolute;
+        bottom: 40px;
+        width: 100%;
+        text-align: center;
+      }
+    }
+    &-detail{
+      height: 100%;
+      width: calc(100% - 185px);
+      &-col{
+        height: 100%;
+        position: relative;
+        &-img{
+          width: 40px;
+          height: 40px;
+          float: left;
+          img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+        &-msg{
+          float: left;
+          height: 100%;
+          margin-left: 15px;
+          &-title{
+            height: 14px;
+            position: absolute;
+            left: 47px;
+            top: 2px;
+            .circle{
+              position: absolute;
+              left: 0;
+              top: 0;
+              width: 12px;
+              height: 12px;
+              border-radius: 50%;
+              background-image: linear-gradient(90deg, #0e98a8 0%, #00fffc 100%), 
+              linear-gradient( #0cecca, #0cecca);
+              background-blend-mode: normal, normal;
+            }
+            .title{
+              position: absolute;
+              left: 20px;
+              top: 0;
+              font-family: ArialMT;
+              font-size: 14px;
+              line-height: 14px;
+              letter-spacing: 1px;
+              color: #ade6ee;
+              white-space: nowrap;
+            }
+          }
+          &-num{
+            height: 20px;
+            position: absolute;
+            left: 47px;
+            bottom: 0px;
+            line-height: 20px;
+            font-family: MicrogrammaD-MediExte;
+            font-size: 20px;
+            letter-spacing: 1px;
+            color: #ffffff;
+          }
+          .state{
+            font-size: 16px;
+            letter-spacing: 1px;
+            color: #06cdd3;
+          }
+        }
+      }
+      &-content{
+        height: 161px;
+        border: solid 1px rgba(65, 111, 127, 0.5);
+        background-color: rgba(2, 40, 43, 0.5);
+        margin-top: 10px;
+        padding: 0 10px;
+        &-key{
+          font-family: ArialMT;
+          font-size: 12px;
+          line-height: 26px;
+          color: #6ebad0;
+        }
+        &-val{
+          font-family: ArialMT;
+          font-size: 12px;
+          line-height: 26px;
+          color: #ade6ee;
+        }
+      }
+    }
+  }
+  .alarm-info-list{
+    height: 100%;
+    overflow: auto;
+    font-family: ArialMT;
+    font-size: 16px;
+    .ant-list-item{
+      border: none;
+      height: 52px;
+      letter-spacing: 1px;
+      color: #ade6ee;
+    }
+    .ant-list-item:nth-child(odd){
+      background-color: rgba(13, 109, 118, 0.2);
+    }
+    &-img{
+      display: inline-block;
+      width: 24px;
+	    height: 24px;
+      margin-left: 12px;
+    }
+    &-info{
+      display: inline-block;
+      color: #ffffff;
+    }
+    &-date{
+      display: inline-block;
+      color: #90b4c5;
+    }
+    &-actions{
+      
+      color: #17c6f2;
+    }
+  }
+}
+.content-center{
+  width: 100%;
+  height: 130px;
+  // height: 14.9%;
+}
+.content-bottom{
+  width: 100%;
+  height: calc(100% - 461px);
+  // height: 41.6%;
+  display: flex;
+  justify-content: space-between;
+  &-left{
+    width: calc( 100% - 562px);
+    height: 100%;
+    &-top{
+      width: 100%;
+      height: 160px;
+    }
+    &-bottom{
+      width: 100%;
+      height: calc(100% - 160px);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/index.vue b/src/views/abnormalAlarm/serverMonitor/instances/index.vue
index c628d7c..a378ca7 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/index.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/index.vue
@@ -1,15 +1,45 @@
 <template>
-  <div>
-    instances
+  <div style="height: 100%;">
+    <a-card :bordered="false" style="height:100%;margin-left: 20px;">
+      <a-tabs default-active-key="detais" @change="handleTabChange">
+        <a-tab-pane key="detais" tab="DETAILS">
+          <Details></Details>
+        </a-tab-pane>
+        <a-tab-pane key="service-process" tab="SERVICE AND PROCESS">
+          SERVICE AND PROCESS
+        </a-tab-pane>
+        <a-tab-pane key="monitor" tab="MONITOR">
+          MONITOR
+        </a-tab-pane>
+        <a-tab-pane key="cpu" tab="CPU">
+          CPU
+        </a-tab-pane>
+        <a-tab-pane key="memory" tab="MEMORY">
+          MEMORY
+        </a-tab-pane>
+        <a-tab-pane key="disk" tab="DISK">
+          DISK
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
   </div>
 </template>
 
 <script>
-  export default {
-    
-  }
+import Details from './details.vue';
+export default {
+  components: {
+    Details,
+  },
+  methods: {
+    handleTabChange(key) {
+      console.log(key);
+    },
+  },
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
+  @import "~@/assets/less/TabMenu.less";
 
 </style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 523b949..9995050 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11622,6 +11622,11 @@ vue-i18n@^8.7.0:
   resolved "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.18.2.tgz#cd7c12f2e178e6faa23b0e3cfd2f7bac9305f8fc"
   integrity sha512-0X5nBTCZAVjlwcrPaYJwNs3iipBBTv0AUHwQUOa8yP3XbQGWKbRHqBb3OhCYtum/IHDD21d/df5Xd2VgyxbxfA==
 
+vue-infinite-scroll@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmmirror.com/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz#ca37a91fe92ee0ad3b74acf8682c00917144b711"
+  integrity sha512-n+YghR059YmciANGJh9SsNWRi1YZEBVlODtmnb/12zI+4R72QZSWd+EuZ5mW6auEo/yaJXgxzwsuhvALVnm73A==
+
 vue-loader@^13.0.5:
   version "13.7.3"
   resolved "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz#e07440f78230a639d00ada4da7b96d0e9d62037f"