From f41826d681675595e47f0bfc8fd5460fb700b587 Mon Sep 17 00:00:00 2001
From: renpy <peiyu_ren@163.com>
Date: Wed, 26 Jul 2023 18:08:28 +0800
Subject: [PATCH] =?UTF-8?q?alarmRules=20=E6=A8=A1=E5=9D=97=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91=E5=8F=8A=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/abnormalAlarm/delete-active.png    | Bin 0 -> 1920 bytes
 .../images/abnormalAlarm/disable-active.png   | Bin 0 -> 1697 bytes
 src/assets/images/abnormalAlarm/disable.png   | Bin 0 -> 1423 bytes
 .../images/abnormalAlarm/edit-active.png      | Bin 0 -> 1815 bytes
 .../images/abnormalAlarm/enable-active.png    | Bin 0 -> 1722 bytes
 src/assets/images/abnormalAlarm/enable.png    | Bin 0 -> 1523 bytes
 src/assets/images/abnormalAlarm/icon-1.png    | Bin 0 -> 1546 bytes
 .../alarmCenter/alarmRules/index.vue          | 806 +++++++++++++++++-
 .../abnormalAlarm/components/boxTitle.vue     |  45 +
 9 files changed, 823 insertions(+), 28 deletions(-)
 create mode 100644 src/assets/images/abnormalAlarm/delete-active.png
 create mode 100644 src/assets/images/abnormalAlarm/disable-active.png
 create mode 100644 src/assets/images/abnormalAlarm/disable.png
 create mode 100644 src/assets/images/abnormalAlarm/edit-active.png
 create mode 100644 src/assets/images/abnormalAlarm/enable-active.png
 create mode 100644 src/assets/images/abnormalAlarm/enable.png
 create mode 100644 src/assets/images/abnormalAlarm/icon-1.png
 create mode 100644 src/views/abnormalAlarm/components/boxTitle.vue

diff --git a/src/assets/images/abnormalAlarm/delete-active.png b/src/assets/images/abnormalAlarm/delete-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..16d0ffb2dc709a28c1ffc56ca9b8b459289bb1a1
GIT binary patch
literal 1920
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/disable-active.png b/src/assets/images/abnormalAlarm/disable-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..d19387dd049ae33f966f520ffb889e072d24412a
GIT binary patch
literal 1697
zcmeAS@N?(olHy`uVBq!ia0vp^(jd&i1|)m0d<g|ok|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_^}%*+%kLl-9tGbeK=S2qK5Lqk^=OE*(vHzzj(
zLjyMhV>3r5m|mCs<kH;Kyb_q+6og)9oO(fNA-4c%vrB4GW?5>ATTy<l0@%-1nYi6z
ziPJo&-W1$!am1-tALtl;P|PC5G)xGXd_YWix&?CJDL*w2nB0qi>H3^pbQmzZh<Lg<
zhE&{I6XxwB94NB4WSP!EenHWNTNWH_X$t9Zi)@%-vPj$4L?qDsUw}ekVvL02qJ!s;
z35a${a|Q?rUl8T!bn*z{$#M*zHSJTUi&)lz-P^X^yL`sP**SChQx)_4XJ>1lpQ(Mn
z?|a^)1;zn7AI@47@6b%Tys`5|((KgD-8U`IMOYlsV4A&S=b5s+#6rXGi)$yveE$68
z^Izpa5s&#ZJ%4w7J8=G>-T9lhB7XR*>{CfivGJ(8vf*m=o_ovI?fZ9yFIvC$-!I)q
z{%>^+F0p!xUY%pHZ_1jhW`*I}v+YF!%luq6ifj{quVy#%eEfb#`xw10(cNFFs=hst
zlhx6bdvtwr&S@`0-x>8<w_ohIn^%{yb(Ij)gZRMIh2P%E8CR(66JR;p)>{<fd1ucn
zX$hUL6*eiS&M#NpK3m4vcooave+;~PWEbjYX5Q}N=9&<&?V0=9#t$c68J14l#db)F
zQGB&-$&x)ij~tyJ=Q7FLUt8-TkRq$zy!u4U%ulsdRzDVg3aBi&$e7*V%jWJD%ALfk
z-p)SVGLvUd-u|a2vUdNDZ);)jaa|;s#A`WwV!_r^nKs?~`Hxp|c<o7Vx-7xL!ed{r
zYgPK2-$iD^iz(;&_Al>Q`*LT;852X(t;>oR33~le>v&nf;_9r_bh)@VW0S(Nr#?NI
z0ehN+>Wz-<nKR4qf2vKB(0=x$%@%vFI;>rwsLg#==Exh>*49<QQN0U}{C92c?!SB~
z(de1FPKT}#-v^`p!d9P_y=y793E)c7Z{zmbGxwD6l3x9NsdG|aYjW6q`1JVl1PMOR
zb2HpxYMK<*bU)a5SoBKae%6^cIR1&6o6i3uAa~$s`PXN<UE-fErky#he7CQM|4!(s
zq<^B{XI?3Mb?If+@5k0>4>qaE@$~nyrnk3>{rI|KlNhHy_p}?QA_`vkuJ66F?xA0;
zS)xon^A&~NH~(qv&kmDpW?lPa(Nn4Tns?u(?H0+6eqjA)SzG*WL%zpPlhl(mw|m{)
zF>|(dj_Ijg7hiv#7$)Le`uN+Ik}JKjIsQ*lI-<<oG$V?yujr87Snx+Yf#Kkp^cvgh
RKod}<;pyt<vd$@?2>=TWlkETi

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/disable.png b/src/assets/images/abnormalAlarm/disable.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d8461968c70e7cbd71cb97ade8a0ee8d22aa8f9
GIT binary patch
literal 1423
zcmeAS@N?(olHy`uVBq!ia0vp^(jd&i1|)m0d<g|ok|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_^}%*+%kCo?xAGeZMQS2qJQLqk^=M{`4G3r8ap
z7gtv^Q%55+m|mCs<kH;Kyb_q+6og(!oO(fNA-4c%vrB4GW?5>ATTy<l0@%-1nYi6z
zj?+A--W1$!vB0TUALtl;P|PC5G)xGXd_YWix&?CJDL*w2nB0qi>AFE=+64v%CMHi8
z$B>F!Yp(707fzHp{_*wJgKn3OvS^nqzPiC;wuE}>g}8>3Kja(qc3th*eX66=aF?}&
z`YZvN1>7z2{~IqJa^o_R>J|7>Q~&t;na721?-rN)f0EKDzwiIPvg-V2-5>kjtH>;t
zIPNO)kvo24d)y?Z))^bP-X#b<|G?QUrP3Jc^FU&C#6k1h8<>_Aid+Ba&}ZIvCH2lR
z(;5fqx=9;8SM(UgCEfS5%c|&@A8~;H^ZdLQj}rGB2wfA+W?A*uhVMhnYuC1uSGInT
zRXwxl<qiJG^VfIn(_LGwmgBYjo#wq4>EDCdtfCgLDgDnEX&mx_&-8C}MaJr7A9wc7
zx;FLK|9NXx?zbxLomO1ov~oM|`8mg;fAzJv%QXglPZKEPbY{M{cuiyMT6?X;(we@V
zirEXUtlz!sx~$p`MehZB%9Yo>D_qW*?<KAA)qCB(7S-<jnQ8&A=I^TV3DLcNz$~Dy
z#eLm8_wb-UOLCc({#&=2{XVCZB}<jyb(1Z1`V}j$f0<BX#CFb=#p|x$oqHLl?|AQB
zvG<~lO?rW>{|D=*!BxLXjP5;R+qOZ(F6ma)p>vim+bx%#FK~SQulxv0+r|!djb(HE
zcD@%iYkJB3<Zg4%!@&J=D(iOdYWID+ZWptY)UDW)v-WR)x$aQy;^of+WA5L$XuA2G
s^zYImMKZk-vL7eD;qkP7WY5IIz%1Um-0*%;IH-v9boFyt=akR{0LM`ou>b%7

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/edit-active.png b/src/assets/images/abnormalAlarm/edit-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..60d546080399d59adb5de2d8636e67a76c9e21dc
GIT binary patch
literal 1815
zcmaJ?X;c$u6b%9rtyl%LfTCltf{<h;30o#cOh_W2Y#~Sh5r$*}QIZMC#DqmCNG(ut
zX=}BWx`7m}2nt$cQNdFVD5!vn%W*-(UEFagXeTJzAEk57%(t9-@4N4P?>mzp8obbY
zyyJKhiDVt%FAx*sG}B8SOMDB@y@((N2V5w{!!ZSJK(r`{C&v;{AV7sAqGA-0r>3-`
z^GGCfXQf1nOM@1}GE7BBOc=URr6JfP(mY?I29d2maUcOrRI0g@$92ajfKtw-M0y56
zK^i|aN$H=aMZ?pAC9<>?GPa!JJ0F;5gb4u^iX(tgm8{mmMlNMo7bfPWZIA*CL+}+`
z$_G=@pisaM)1rVE9iqt~hzWSJ=?pIq4=;!cFd-%cLY^RlNn?1ykO$2020lI%BAQmN
zfW-pQ$5_OQOG(0U4Ge+?gMn^f(J^fz$Y8VCAjAZjOd5fp=~C4=Vx*~c&Lau}R43Ca
zHMkN}113cz0n_7L3gPra3M$PfS+(wCnTUdcMnnTL=#VL;5nxcz|3g)(PiP%3MnC)g
zPhp)TRfB?JREO!cGUDJA&ZbZr*iVZhIHr|gSn@~}Lz6HZ(<NaVfXSdU0oO>ST8<fX
zbB75*L2!Utha+kk8X(|O2no7UDTf(+o*$3T;t55N7lR=b@cnq6d_SR(?*$3jLJ!dh
zSAfa%DpZY+aOI!5{8724UQlU>$O2TWT#3p>T1*8D=L{=H_u@0E-bb!{bT8~txgcQ%
zG@b0fPI_dEXdlz`Q{NJcPo0mdiFVf#eI5RUV?$h*f&c+eV!XWX=cvWuVUyN;H*naF
zR^C}FESc=yY~exuwd`qj(qDoMKr}f&Cm+m9Hsi%jN{x`XEt)WY!P>Aqfo)1(;}-kP
zt~Rzy7dTQk)PyzBVs<x_vo;6Trh`4RySmcTPQQOy#4;$FN@}H(I;%Z@dr-MZ(6y71
zG|__<{mOq&<7|O5)oy}W*u}n`eQ^2Ih7*GhKBvAUxmW=kb0k$Z_E$w4$~=aAes?IJ
z+*rITp1d(Wl3Y}La$tYBD*e3Kx}8UNWEDi&S{117?eJ$*0_a{%OJ3-mEQBmZx)n3;
z25e0#H|u`|kyV{&$Bs6t<)zE7U0xf>*%x*|7JCk)E7DVaQ*Nq<9;W20jP)niW`rhR
zzg`%!hb+I7`Hb`}(tUFE<-+IYVJGy}+i?FgtG>Pl)jGes+kYYdLZnkgPD@c>1*3Bo
zcQE>fWpBeeog}0>wkhkjon>^j_gA-`a)6Ak;Q9*YdM7x$zX%VD>pfES<6XU5fA<F0
zP{Hy!8sGLC_Jd8n?uSdC)(v*I9P!`$f{U<kT}z0T4@60eGRMSb&aCWqJFb2UJ=l2p
z{Icgy`pY=Y>AeM<QmG3k!Lj_b%|uvi*3(*dXWOGyvCz=X87;ly_-8!Z8pS(f`})20
zmNti$gdi@hjEnAL@UgtQ`eu1b>kT;#%KV#u+_MA>IXkC=alfYHanpjRzDyu9(VPoi
z>afF|5_?|Ck`kFO?9B|hoWN&RVfFF{fqd}x!xwX1wm9`hJ@IdE;iXpkK;#BZo75Fp
z*LqjCW?cuhFnS8U%vg}^?R)mm5NJsZKvgU^4)JpIEXK4k!Mip`?2@d0)b6~U^Oh`&
z{N94IDdv4cuFcF^)YrD*8ur8DV-A!Fm!P3~r{s#6r=6T);waN|Ys;{k?EV8&*LJ?U
z5_hoZSk>;n?(AKs&h;wdr-hi;EX_gGSErsKcjo1v34GI1b!6%Ei|KX82L|TWl<tGh
zr`pCzx0VfxYF{5}bl;9tQk!4(F|UNW!S+_CSJ;H!iM5DI=8v1vGv&IStYpF;Z9bM?
zbog8GemYQ?`KB$FB^R%WnBjVh)jzm0_ZP?RI+ngPk#?}slPt>U>tQ0Ec_I3UT;$<A
zc;W20SnDk7d)G4bhtM-VqGFwo#J#NcS+;mh`$EqBSnmYtCg`ZX*Sb0_S9&|5<n1>v
iXSv<XoaLBhX-_I{HkfZ6H%@8#RRsux1^fB&IsX6%g3KNO

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/enable-active.png b/src/assets/images/abnormalAlarm/enable-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..85b1bf0d6ce764e429267d797b566a599f06a8f5
GIT binary patch
literal 1722
zcmaJ?Yfuwc7>yv>LBQ~6K`C_&NCC+v8xoM1z=S*`jzI`f7!_+s76_1R*j-Fe!O<#;
z5MQB`qKH@!1dH`8Z<Jb5E22OhKtYApiWLVb$^bguAfP`=cV_qA`^`D$d*0cM(2y0@
zmJ2OOB$Bl_SRf@<XVd%H9O7$e`)3WYEWm}4csLS+>*Od*;wh167!a%Fv9J`DD^rqg
z!W<IG+*Kuu#3LoE*a}1q%1szhuhtT55{VP2*UA+MFb+h+u__Ih@~XO?0;rT+N(4(n
zmuUHLoGN$=3WskAktwz$DEyU_zyN@wXA=Ty7?%Tjb)p7i>$#K(T{f{dnQ0VY0)i)S
zDIbE0l!O9&1cd=#kWN+5=?uWnAB23FOkcV;z@RheG&+k0F{qF)o6clIe!%2IA-ti=
z7`9X(n)F4SxRf{?*Rp9eolXbpd_V+^r9uAw{xmv+#$Zqh1Qkos;Bq}xgSk#A2w+Ts
zs<gNY(Euhzc{GxYb16imA5u_jr)4$RWSNM9(e!dH4Fc(=l%{|Z$^S#u>S;8FOW}|4
z{--b|OVPqKDU2b>sDfx*jH}6&md!_DIgX$*1WBB#VrU$KBUl`w1sD*>06Zd88YQB`
zJSPYe30theaJfbSiv?T?ApxpXN;V{5GN2$9Qz)YQL6A@ow2TGud<883Ab}r?$Ky|N
z1&AV94QuczuJR+7H6zzF3u-OlSpcJ|&9G90B5GhFXSQnQSQs<vO>&hp$Ko?1mqr9b
zGj;ZpPEVPL@iA?u=ax83Pd=<6#vLW*dSQyiCE~hJ#R8s8-&wO(lDI0&A>i#htM-0b
z?8^J4hsq4~MHer~`QGG=3(kR$GWJ=XE%c;btunUkwXo-{o99_Bx^^pM9k2S}7eeor
z{_MQ|v7!92?xyj(FN%^58;816-=_6cKRdRy**3oD*m&?u=Tw(fu1vG`<L<Z_dmJ`G
z19SOHgF>w_tIqh;<b_!gHa`>$#_-m7Z<G`vwj9LD^>Se?aO~EeuhExQnV;uwzHz+b
z7uV&>x)3AuwC|l~>W{}?$LzlK#w)2X+%f$Ga53}nj#9gm+tZplSgGBVp>O$V!u3l_
z`%kRg;STM65JPV6TVftY{<9;o;E_{(bmhRh(uUfrnAdlgJsS00v##l18xIG$Z5nmE
zS8SKj#9h7d?y{_BE@JkA0^4dZtx}eQ%fI}!u{VS1hqf(t>fYXktOfhB#*fPH@YQp8
z;q!GN?z-P|^ocYt+j+f<^ZXxoN+0QG2Y?G?r+~8O4?NnAq^h|O8_^Q2ytd|N*W#Be
zy_Z-9wgi{k_vLo<7{c~A75I=}oxZ7$sv3(Qs1|tl9JzB8<BYqzXEr%xFTQQ#AxjZa
zA1@~l?})2ifw#Ezss{>u1I6dl^G_QOaSO|CFOeo>q#bRpvw4#1-kR+e&r-dIXT7>I
zGD{fH-_cXDe8bLj`IbLj$*XH@u{M|)z<YgR<XR8Z3VhEoO0;j9vwO^aZ)RWLwROYy
z`$%EK$%dRnEaPM+b#$m^BqbsF{x+qb&5I+#X7TyA<VzzCoN}pf>A6u2uixvyU)e%z
z^}8s?`P+k^Tq~(?P>iN?cIni4&y#eyZqbf+xr5@_8y+9<S^Zji<6!X+IFj6&vu`Y@
zH9rSG`^}(MajFv9^>AdMzE70a&|m>>EAqCp*Opb;${OJD-|X!Fuyp=A)NyxalG%Fr
z`u>=9pEI#>PY9a~zD^Zik?P);w^2{k2IsZb*wwk%&uzTSd_H86A0{B5=^f58cG@|-
zs0g9NRoR=rK|7)hY>USAn<K`u3$}@z`Ul&i;DhO#_Vec#4;xN)CAp7@>Pnm{&1-Y4
p=Jcd0zIvK&<}#SOD68JginJmmJlKPjw#f815eq{E6+xSJ{tJD{rVjuB

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/enable.png b/src/assets/images/abnormalAlarm/enable.png
new file mode 100644
index 0000000000000000000000000000000000000000..968d52d01036b89a84ee810a1e144d09fddab8e8
GIT binary patch
literal 1523
zcmeAS@N?(olHy`uVBq!ia0vp^(jd&i1|)m0d<g|ok|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_^}%*+%kCo^+L3pY0dS2qJQLqk^=3pXbVS4U?j
zQwviw6Ejygm|mCs<kH;Kyb_q+6og(woO(fNA-4c%vrB4GW?5>ATTy<l0@%-1nK<3z
z>Wb4msNNKuZgF+PsaGH97=2L8BE>XJ2$+08OnABla^NXHH4m8Fi-766|DqExS1_e{
zx;TbZ+*&hjw|9)A$g%f*-aK7PK8cDRao^&Rskn?|Mnj-sgv&M|CPhK++!mJa`~`u*
zD;1V;9Pw*z<=%H7BErMv(h?!zw=TU)HTIn?e-JIXuK4}A*!PX{yRD4x->jVDzU0k{
zV;i?51u$|si0xqde}M1CX2FhSlINMvK2SZuHv2(C-;qS!9}MRX7)3C+JI-}IkbQyi
z+ChUKk3TP7bx_-YZ(p;@j-AR`7RO{haN4jaCtTmSUFZV0-$4b7i|kXgi}XAiY6bXT
zoOt-h;=1~Z^b$4q?-RcpovS{1WZjOs$yI`rH=D`bZ4vJC4OoBntxsHRPkD*#q|Mo{
zj;^SGy{2`2-gVCFF7MSduFl<?(36tYe?Z?LUqblqv5+~UjqI6^PMj}#u|g<D;@JP7
z{Sk$iuGyAt_2b=W)o-~de&vkUd_2PUjEgH~uDQ$L|MR=?hug{Pj>OhYv3z&Q;32pD
z>6zQ^Y+LpAiDks+pNWg)LwTHn`)W>~H&3`^y6wbVi!+_8#W?>5ZS)b5QmbLM{d14g
z&iM2BMzw$YWpyI&thPDie6;Gzk>pDf!mA_X<HNeQJ&ru>uJY@4SL=J3kV+q!)FM&s
zt9=#6E(MBy{T}4_x7qd5X(1P*L)LN|*LJ?^n&+tU>2+lP9-VV@Yk4E?zp6aH{oIl%
z{-5hYJSqb}Hu^4)VvV&p$#q+F(q_GHYM#NiljkLN`1+VP+X|n4^egJs-HNTO#}~{m
zG@S5^&-dGm*Ig@$=d62parbJ8%NLZA&%CenR?B1vcHE_1e*ea)s+3pK+?6ruHTR0^
tYLitG+;x_!#J}#~S2ey-cH}>+1Vhxd_A}SNT@V5l!=A2wF6*2UngGOJMI!(J

literal 0
HcmV?d00001

diff --git a/src/assets/images/abnormalAlarm/icon-1.png b/src/assets/images/abnormalAlarm/icon-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..07246197f7b0855fe91a6b114f498af11cdfd60c
GIT binary patch
literal 1546
zcmeAS@N?(olHy`uVBq!ia0vp^(jd&i1|)m0d<g|ok|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_^}%*+%kM{`SOBTGw1S2qJwLqk^=3uhBY3rkBE
zLn9+YS2Jfzm|mCs<kH;Kyb_q+6og(UoO(fNA-4c%vrB4GW?5>ATTy<l0@%-1nYi6z
zfzv#w-W1$!vBarYALtl;P|PC5G)xGXd_YWix&?CJDL*w2nB0qi>AFC`r;mYwsn*lQ
zF{I+wnrXfsA%P;t@7uHs9bVcu`NE;VLirZ1))|eOUII!f9=cft6TMXrhAzsu;MA0;
zprk9lRDdT!P)g5a>t4lKZ!d)uC@X8${pJ7Tu6Nz~^F3Ls56v@wzq5V5x7v<*VW;Ww
z<t>h!8Z4F%IC2{ACmil?T5$YxO@Z{4#_j~koJ$iV)-d!Rw41>+|KPf{8yPa#bQ1(^
z*jG!&t>U@TEFr<pSy1G+@}bmc2lErGhadDmj_-0*|H007aNe&ASIy#?m>=lB*l6;k
zpq~Fcf57~UGh$-J{|YUR-!xHqUi`9s4JRXn*Xzw|ZR}5QitY}MpPc8jXx&sht8FG<
zc<wNkAIwhuJL6Z>%Kv8~m=~YB=3eA$e~|xQ{fYG<wL2K3LX*vBDw`P{>zHh_n>B5U
zNr3B@Ys-2>8@c5wmz>tvas0mNm+Raggkmm#`?u)d29;8lH4ze3-0!lpKc&8Y;5f^8
zk^Q4h*K&WEm?Rmf7<vC+DtvNxlS1~Lh5XL%9cCxSGCkOJJo2J^$;_6STt#~OPo#J#
z?KqWw(7xoRnv<m2HsRQ3j!VzKp004G>}LO|%Q=%$bQ#uf`Dz)ED;Tn<UiZYYat1HS
zWve_Q+z*Cs>v8vaAT8GBwX$A$>J^~cT`>#KPm74Cp1HtG)%QzXu=WY{d-WR^Hr2D{
zAK-hz?0Nd1T9x`$Ki#!|n5FLrKRp{g=Z&k~6V9*iUg@eG<dZJ_*Y9FETgB(E4^u*i
zvk&`ZTj`Sze{#LD_B0n$sqCF3{+CU@>SXFX?M3sJTtBebFZ|Mvea-r9TP_^lJ#Xjt
zduh8aJwN8wwmUPA=i{z#lJ_Rhe0Hqisf$datEcag+d-0l{EjSV;$h&apYlkrPWb_-
OboO-hb6Mw<&;$UJdqhqE

literal 0
HcmV?d00001

diff --git a/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue b/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
index 2501b4f..5dd4aa4 100644
--- a/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
+++ b/src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue
@@ -2,56 +2,667 @@
   <div  style="height: 100%;">
     <div class="rules-header">
       <div>
-        <a-button class="rules-add">
+        <a-button class="rules-add" @click="handleAdd">
           <img class="icon-add" src="@/assets/images/global/add.png" alt="" />
           <span style="margin-left: 10px;">
-            Create Alert Rulep
+            Create Alert Rule
           </span>
         </a-button>
-        <a-select style="width: 160px;margin-left: 10px;" v-bind="$attrs" show-arrow  placeholder="select...">
+        <a-select 
+          style="width: 200px;margin-left: 10px;" 
+          :value="queryParams.station" 
+          :options="stateOptions" 
+          show-arrow 
+          allowClear
+          placeholder="select..." 
+          @change="onStateChange"
+        >
           <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
-          <div slot="dropdownRender" slot-scope="menu">
-            <v-nodes :vnodes="menu" />
-            <a-divider style="margin: 0;" />
-            <div
-              style="padding: 4px 12px; cursor: pointer;"
-              @mousedown="e => e.preventDefault()"
-            >
-              <a-checkbox v-model="allVal" @change="checkedAll"><span @click.prevent="handleClick">ALL</span></a-checkbox>
-            </div>
-          </div>
         </a-select>
-        <a-select style="width: 160px;margin-left: 10px;" v-bind="$attrs" show-arrow placeholder="select...">
+
+        <a-select 
+          style="width: 200px;margin-left: 10px;" 
+          :value="queryParams.type"
+          :options="typeOptions" 
+          show-arrow 
+          allowClear
+          placeholder="select..." 
+          @change="onTypeChange"
+        >
           <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
-          <div slot="dropdownRender" slot-scope="menu">
-            <v-nodes :vnodes="menu" />
-            <a-divider style="margin: 0;" />
-            <div
-              style="padding: 4px 12px; cursor: pointer;"
-              @mousedown="e => e.preventDefault()"
-            >
-              <a-checkbox v-model="allVal" @change="checkedAll"><span @click.prevent="handleClick">ALL</span></a-checkbox>
-            </div>
-          </div>
         </a-select>
+
+        <a-select 
+          style="width: 200px;margin-left: 10px;" 
+          :value="queryParams.name"
+          :options="nameOptions" 
+          show-arrow 
+          allowClear
+          placeholder="select..." 
+          @change="onNameChange"
+        >
+          <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+        </a-select>
+        <a-button class="search-btn" @click="onSearch">
+          <img class="icon-add" src="@/assets/images/global/search.png" alt="" />
+          <span style="margin-left: 10px;">
+            Search
+          </span>
+        </a-button>
       </div>
-      <a-button class="rules-reset">
+      <a-button class="rules-reset" @click="resetQuery">
         <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
         <span style="margin-left: 10px;">
           Refresh
         </span>
       </a-button>
     </div>
+    <div class="rules-content">
+      <div class="monitor-list">
+        <div class="monitor-list-item" v-for="item in monitorList" :key="item.id">
+          <div class="monitor-list-item-title">
+            <div class="monitor-list-item-title-name">{{ item.name }}</div>
+            <div class="monitor-list-item-title-server">
+              <span style="color: #5b9cba;">{{ item.sourceType }}：</span>
+              <a-tooltip>
+                <template slot="title">
+                  {{ item.sourceName }}
+                </template>
+                <span style="color: #ade6ee;">{{ item.sourceName }}</span>
+              </a-tooltip>
+            </div>
+          </div>
+          <div class="monitor-list-item-content">
+            <div class="monitor-list-item-content-info">
+              {{ JSON.parse(item.operator).name }} {{ JSON.parse(item.operator).operator }} {{ JSON.parse(item.operator).threshold }}{{ JSON.parse(item.operator).units }}
+            </div>
+            <div :class="[item.enabled==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']">
+              {{ item.enabled==1?"Enable":"Disabled" }}
+            </div>
+          </div>
+          <div class="monitor-list-item-footer">
+            <div class="monitor-list-item-footer-group">
+              <span style="color: #5b9cba;">Alert Contact Group：</span>
+              <span style="color: #ade6ee;">{{ item.groupName }}</span>
+            </div>
+            <div class="monitor-list-item-footer-actions">
+              <span class="actions-edit" @click="editItem(item.id)"></span>
+              <span class="actions-delete" @click="deleteItem(item.id)"></span>
+              <span v-if="item.enabled==1" class="actions-enable">
+              </span>
+              <span v-if="item.enabled==0" class="actions-disable">
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <a-pagination 
+        size="small"
+        v-model="ipagination.current" 
+        :pageSize="ipagination.pageSize"
+        :page-size-options="ipagination.pageSizeOptions"
+        show-size-changer
+        show-quick-jumper
+        :total="ipagination.total"
+        :show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
+        show-less-items 
+        @change="handlePageChange"
+        @showSizeChange="handleSizeChange"
+      />
+    </div>
+    <a-modal 
+      :title="isAdd ? 'Add Rule' : 'Edit Rule'" 
+      :width="845" 
+      :key= modalKey
+      v-model="visible" 
+      @cancel="onCancel"
+    >
+      <a-form-model
+        ref="ruleForm"
+        :model="form"
+        :rules="rules"
+        layout="vertical"
+      >
+        <a-row :gutter="[15,0]">
+          <a-col :span="12">
+            <a-form-model-item ref="sourceType" label="Source Type" prop="sourceType">
+              <a-select 
+                :value="form.sourceType" 
+                :options="typeOptions" 
+                show-arrow 
+                allowClear
+                placeholder="select..." 
+                @change="onSourceTypeChange"
+                >
+                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item ref="source" label="Source" prop="sourceId">
+              <a-select 
+                v-model="form.sourceId" 
+                :options="sourceOptions" 
+                show-arrow 
+                allowClear
+                labelInValue
+                placeholder="select..." 
+                @change="onSourceChange"
+                >
+                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="[15,0]">
+          <a-col :span="12">
+            <a-form-model-item ref="alarmRule" label="Alarm Rule" prop="name">
+              <a-input v-model="form.name" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item ref="monitorItem" label="Monitor Item" prop="itemId">
+              <a-select 
+                v-model="form.itemId" 
+                :options="itemOptions" 
+                show-arrow 
+                allowClear
+                labelInValue
+                placeholder="select..." 
+                @change="onItemChange"
+                >
+                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="[15,0]">
+          <a-col :span="12">
+            <a-form-model-item ref="monitorItem" label="Logic Symbol" prop="operator">
+              <a-select 
+                v-model="form.operator" 
+                :options="operatorOptions" 
+                show-arrow 
+                allowClear
+                placeholder="select..." 
+                >
+                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item ref="threshold" label="Threshold" prop="threshold">
+              <a-input v-model="form.threshold" :suffix="units" />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="[15,0]">
+          <a-col :span="12">
+            <a-form-model-item ref="silenceCycle" label="Silence Cycle" prop="silenceCycle">
+              <a-select 
+                v-model="form.silenceCycle" 
+                :options="silenceCyclerOptions" 
+                show-arrow 
+                allowClear
+                placeholder="select..." 
+                >
+                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item ref="contactGroup" label="Contact Group" prop="contactId">
+              <a-select 
+                v-model="form.contactId" 
+                :options="contactGroupOptions" 
+                show-arrow 
+                allowClear
+                placeholder="select..." 
+                >
+                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model>
+      <template slot="footer">
+        <a-space class="operators" :size="20">
+          <a-button type="success" @click="onSave">Save</a-button>
+          <a-button type="warn"  @click="onCancel">Cancel</a-button>
+        </a-space>
+      </template>
+    </a-modal>
   </div>
 </template>
 
 <script>
-  export default {
-    
-  }
+import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
+import BoxTitle from '../../components/boxTitle.vue';
+export default {
+  components: {
+    BoxTitle,
+    VNodes: {
+      functional: true,
+      render: (h, ctx) => ctx.props.vnodes,
+    },
+  },
+  data() {
+    return {
+      modalKey:"",
+      isAdd:true,
+      ipagination:{
+        current: 1,
+        pageSize: 9,
+        pageSizeOptions: ['9', '18', '27'],
+        showTotal: (total, range) => {
+          const { current, pageSize } = this.ipagination
+          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      visible:false,
+      queryParams: {
+        station: undefined,
+        type: undefined,
+        name: undefined
+      },
+      stateOptions: [
+        {
+          label: "禁用",
+          value: "0"
+        },
+        {
+          label: "启用",
+          value: "1"
+        }
+      ],
+      typeOptions: [
+        {
+          label: "Server",
+          value: "Server"
+        },
+        {
+          label: "Database",
+          value: "Database"
+        },
+        {
+          label: "E-MAIL",
+          value: "Email"
+        },
+      ],
+      nameOptions: [],
+      monitorList: [],
+      // 表单
+      form: {
+        sourceType: "",
+        sourceId: "",
+        name: "",
+        itemId: "",
+        operator: "",
+        threshold: "",
+        silenceCycle: "",
+        contactId: "",
+      },
+      currId:"",
+      units: "",
+      sourceOptions: [],
+      operatorOptions: [
+        {
+          label: ">",
+          value: ">"
+        },
+        {
+          label: "<",
+          value: "<"
+        },
+        {
+          label: ">=",
+          value: ">="
+        },
+        {
+          label: "<=",
+          value: "<="
+        },
+        {
+          label: "==",
+          value: "=="
+        },
+      ],
+      itemOptions: [],
+      silenceCyclerOptions: [
+        {
+          label: "5 minutes",
+          value: "300"
+        },
+        {
+          label: "15 minutes",
+          value: "900"
+        },
+        {
+          label: "30 minutes",
+          value: "1800"
+        },
+        {
+          label: "60 minutes",
+          value: "3600"
+        },
+        {
+          label: "3 hours",
+          value: "10800"
+        },
+        {
+          label: "6 hours",
+          value: "21600"
+        },
+        {
+          label: "12 hours",
+          value: "43200"
+        },
+        {
+          label: "24 hours",
+          value: "86400"
+        }
+      ],
+      contactGroupOptions: [],
+      rules: {
+        sourceType: [
+          { required: true, message: 'Please select a sourceType'},
+        ],
+        sourceId: [
+          { required: true, message: 'Please select a source'},
+        ],
+        name: [
+          { required: true, message: 'Please input alarmRule name'},
+        ],
+        itemId: [
+          { required: true, message: 'Please select a monitorItem'},
+        ],
+        operator: [
+          { required: true, message: 'Please select a logicSymbol'},
+        ],
+        threshold: [
+          { required: true, message: 'Please input threshold'},
+        ],
+        silenceCycle: [
+          { required: true, message: 'Please select a silenceCycle'},
+        ],
+        contactId: [
+          { required: true, message: 'Please select a contactGroup'},
+        ],
+      }
+    }
+  },
+  mounted () {
+    this.getAlarmRulesPage()
+    this.getAlarmGroup()
+  },
+  methods: {
+    getAlarmSources(val) {
+      getAction("/alarmRule/getSources", {souceType:val}).then(res => {
+        if (res.success) {
+          this.nameOptions = this.sourceOptions = res.result.map(item => {
+            return {
+              label: item.sourceName,
+              value: item.sourceId
+            }
+          })
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    getAlarmRulesPage() {
+      let params = {
+        pageNo: this.ipagination.current,
+        pageSize: this.ipagination.pageSize,
+        enabled: this.queryParams.station,
+        sourceType: this.queryParams.type,
+        sourceId: this.queryParams.name
+      }
+      getAction("/alarmRule/findPage", params).then(res => {
+        if (res.success) {
+          this.monitorList = res.result.records
+          this.ipagination.total = res.result.total
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    onSearch() {
+      this.getAlarmRulesPage()
+    },
+    resetQuery() {
+      this.queryParams = {
+        station: undefined,
+        type: undefined,
+        name: undefined
+      }
+    },
+    handlePageChange(page, pageSize) {
+      this.ipagination.current = page
+      this.ipagination.pageSize = pageSize
+      this.getAlarmRulesPage()
+    },
+    handleSizeChange(current, size) {
+      this.ipagination.current = current
+      this.page.pageSize = size
+      this.getAlarmRulesPage()
+    },
+    onTypeChange(val) {
+      this.queryParams.type = val
+      if (val) {
+        this.getAlarmSources(val)
+      }
+    },
+    onStateChange(val) {
+      this.queryParams.station = val
+    },
+    onNameChange(val) {
+      this.queryParams.name = val
+    },
+    getUid() {
+      return (Math.random()+new Date().getTime()).toString(32).slice(0,8)
+    },
+    handleAdd() {
+      this.modalKey = this.getUid()
+      this.visible = true
+      this.isAdd = true
+    },
+    onSourceTypeChange(val) {
+      this.form.sourceType = val
+      this.getAlarmSources(val)
+    },
+    onSourceChange(val,option) {
+      this.form.sourceId = val
+      this.getItems(val.label)
+    },
+    getItems(val) {
+      getAction("/alarmRule/getItems", {sourceName:val}).then(res => {
+        if (res.success) {
+          this.itemOptions = res.result.map(item => {
+            return {
+              label: item.name,
+              value: item.itemId,
+              units:item.units
+            }
+          })
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    onItemChange(val, option) {
+      this.form.itemId = val
+      this.units = option.data.props.units
+    },
+    getAlarmGroup() {
+      let params = {
+        pageNo: 1,
+        pageSize: 9999
+      }
+      getAction("/alarmContactGroup/findPage", params).then(res => {
+        if (res.success) {
+          this.contactGroupOptions = res.result.records.map(item => {
+            return {
+              label: item.name,
+              value: item.id
+            }
+          })
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    onSave() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          let params = {
+            silenceCycle:this.form.silenceCycle,
+            contactId:this.form.contactId,
+            sourceId:this.form.sourceId.key,
+            sourceType:this.form.sourceType,
+            itemId:this.form.itemId.key,
+            rule: {
+              name: this.form.itemId.label,
+              operator: this.form.operator,
+              threshold: this.form.threshold,
+              units: this.units,
+            },
+            name: this.form.name,
+            id: this.isAdd?"":this.currId
+          }
+          if (this.isAdd) {
+            postAction("/alarmRule/create", params).then(res => {
+              if (res.success) {
+                this.visible = false
+                this.$message.success("success")
+                this.getAlarmRulesPage()
+              } else {
+                this.$message.warning("This operation fails. Contact your system administrator")
+              }
+            })
+          } else {
+            httpAction("/alarmRule/update", params, "put").then(res => {
+              if (res.success) {
+                this.visible = false
+                this.$message.success("success")
+                this.getAlarmRulesPage()
+              } else {
+                this.$message.warning("This operation fails. Contact your system administrator")
+              }
+            })
+          }
+        }
+      });
+    },
+    onCancel() {
+      this.resetForm()
+      this.units = ""
+      this.visible = false
+    },
+    editItem(id) {
+      getAction("/alarmRule/findInfo", {alarmRuleId:id}).then(async res => {
+        if (res.success) {
+          let result_1 = await getAction("/alarmRule/getSources", { souceType: res.result.sourceType })
+          if (result_1.success) {
+            this.sourceOptions = result_1.result.map(item => {
+              return {
+                label: item.sourceName,
+                value: item.sourceId
+              }
+            })
+          } else {
+            this.$message.warning("This operation fails. Contact your system administrator")
+          }
+          let result_2 = await  getAction("/alarmRule/getItems", {sourceName:res.result.sourceName})
+          if (result_2.success) {
+            this.itemOptions = result_2.result.map(item => {
+              return {
+                label: item.name,
+                value: item.itemId,
+                units:item.units
+              }
+            })
+          } else {
+            this.$message.warning("This operation fails. Contact your system administrator")
+          }
+          this.visible = true
+          this.isAdd = false
+          this.form.sourceType = res.result.sourceType
+          this.form.sourceId = {
+            key: res.result.sourceId,
+            label: res.result.sourceName
+          }
+          this.form.name = res.result.name
+          this.form.itemId = {
+            key: res.result.itemId,
+            label: JSON.parse(res.result.operator).name
+          }
+          this.form.operator = JSON.parse(res.result.operator).operator
+          this.form.threshold = JSON.parse(res.result.operator).threshold
+          this.units = JSON.parse(res.result.operator).units
+          this.form.silenceCycle = res.result.silenceCycle
+          this.form.contactId = res.result.contactId
+          this.currId = res.result.id
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    deleteItem(id) {
+      let _this = this
+      this.$confirm({
+        title: 'Are you sure to delete this item?',
+        onOk() {
+          deleteAction("/alarmRule/deleteById", {alarmRuleId:id}).then(res => {
+            if (res.success) {
+              _this.$message.success("success")
+              _this.getAlarmRulesPage()
+            } else {
+              _this.$message.warning("This operation fails. Contact your system administrator")
+            }
+          })
+        },
+        onCancel() {
+          console.log('Cancel');
+        },
+      });
+    },
+    resetForm() {
+      this.$refs.ruleForm.resetFields();
+    },
+
+  },
+}
 </script>
 
 <style lang="less" scoped>
+.operators {
+  width: 100%;
+  justify-content: center;
+  .ant-btn {
+    width: 92px;
+  }
+}
+/deep/.ant-modal-title{
+  letter-spacing: 1px;
+}
+.ant-select {
+  .ant-select-arrow-icon {
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+  &-open {
+    .ant-select-arrow-icon {
+      transform: rotate(180deg);
+    }
+  }
+}
+.ant-select-dropdown-content{
+  position: relative;
+  background: #03353f;
+}
 .rules-header{
   height: 50px;
   border-top: 1px solid rgba(13, 235, 201, 0.3);
@@ -61,12 +672,20 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 10px;
+  background: rgba(12, 235, 201, 0.05);
   .rules-add{
     background-color: #1397a3;
     font-family: ArialMT;
 	  color: #ffffff;
     border: none;
   }
+  .search-btn{
+    margin-left: 10px;
+    background-color: #1397a3;
+    font-family: ArialMT;
+	  color: #ffffff;
+    border: none;
+  }
   .rules-reset{
     background-color: #1397a3;
     font-family: ArialMT;
@@ -75,4 +694,135 @@
     float: right;
   }
 }
+.rules-content{
+  height: calc(100% - 65px);
+  margin-left: 20px;
+  position: relative;
+  overflow: hidden;
+  .monitor-list{
+    height: calc(100% - 40px);
+    overflow: auto;
+    display: flex;
+    flex-wrap:wrap;
+    justify-content: space-between;
+    align-content: flex-start;
+    &-item{
+      width: 32.76%;
+      height: 275px;
+      // margin-top: 15px;
+      background-color: rgba(2, 40, 43, 0.5);
+      border: solid 1px rgba(65, 111, 127, 0.5);
+      position: relative;
+      margin-bottom: 15px;
+      &-title{
+        height: 50px;
+        padding: 0 15px 0 20px;
+        background-color: rgba(13, 109, 118, 0.2);
+        border-bottom: solid 1px rgba(65, 111, 127, 0.2);
+        display: flex;
+        justify-content: space-between;
+        line-height: 50px;
+        font-family: ArialMT;
+        &-name{
+          font-size: 16px;
+          color: #00bded;
+        }
+        &-server{
+          width: 55%;
+          font-size: 14px;
+          text-align: right;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+      &-content{
+        padding: 15px 20px;
+        &-info{
+          font-family: ArialMT;
+          font-size: 16px;
+          color: #ade6ee;
+        }
+        &-btn{
+          margin-top: 10px;
+          display: inline-block;
+          padding: 3px 10px;
+        }
+        &-enable{
+          background-color: #098839;
+        }
+        &-disable{
+          background-color: #8a8a8a;
+        }
+      }
+      &-footer{
+        width: 100%;
+        height: 32px;
+        position: absolute;
+        bottom: 10px;
+        padding: 0 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        &-group{
+          font-family: ArialMT;
+	        font-size: 14px;
+        }
+        &-actions{
+          display: flex;
+          align-items: center;
+          span{
+            display: inline-block;
+            width: 26px;
+            height: 26px;
+            margin-left: 5px;
+            cursor: pointer;
+          }
+          .actions-edit{
+            background: url(~@/assets/images/abnormalAlarm/edit.png) no-repeat;
+            background-size: 100% 100%;
+            &:hover{
+              background: url(~@/assets/images/abnormalAlarm/edit-active.png) no-repeat;
+              background-size: 100% 100%;
+            }
+          }
+          .actions-delete{
+            background: url(~@/assets/images/abnormalAlarm/delete.png) no-repeat;
+            background-size: 100% 100%;
+            &:hover{
+              background: url(~@/assets/images/abnormalAlarm/delete-active.png) no-repeat;
+              background-size: 100% 100%;
+            }
+          }
+          .actions-enable{
+            background: url(~@/assets/images/abnormalAlarm/enable.png) no-repeat;
+            background-size: 100% 100%;
+            &:hover{
+              background: url(~@/assets/images/abnormalAlarm/enable-active.png) no-repeat;
+              background-size: 100% 100%;
+            }
+          }
+          .actions-disable{
+            background: url(~@/assets/images/abnormalAlarm/disable.png) no-repeat;
+            background-size: 100% 100%;
+            &:hover{
+              background: url(~@/assets/images/abnormalAlarm/disable-active.png) no-repeat;
+              background-size: 100% 100%;
+            }
+          }
+        }
+      }
+    }
+    &::after{
+      content: '';
+      width: 32.76%;
+    }
+  }
+  .ant-pagination{
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/components/boxTitle.vue b/src/views/abnormalAlarm/components/boxTitle.vue
new file mode 100644
index 0000000..c2499f3
--- /dev/null
+++ b/src/views/abnormalAlarm/components/boxTitle.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="chart-title">
+    <span>{{ title }}</span>
+    <img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      title: {
+        type: String,
+        default: ""
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+.chart-title{
+  height: 40px;
+  font-family: MicrogrammaD-MediExte;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 36px;
+  letter-spacing: 1px;
+  color: #0cebc9;
+  border-bottom: 4px solid rgba(12, 235, 201, 0.2);
+  border-top: 1px solid rgba(12, 235, 201, 0.2);
+  position: relative;
+  // display: flex;
+  // justify-content: space-between;
+  span{
+    display: inline-block;
+    padding: 0 15px;
+    background-color: rgba(12, 235, 201, 0.05);
+  }
+  img{
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+</style>
\ No newline at end of file